<bmx-code-editor>

<div class="row" style="gap: 0.5rem; flex-wrap: wrap; margin-block-end: 0.5rem; align-items: center">
  <label for="ex-code-lang">Language</label>
  <select id="ex-code-lang">
    <option value="typescript" selected>TypeScript</option>
    <option value="json">JSON</option>
    <option value="sql">SQL</option>
    <option value="python">Python</option>
    <option value="html">HTML</option>
    <option value="markdown">Markdown</option>
  </select>
  <label><input type="checkbox" id="ex-code-wrap"> Wrap lines</label>
</div>

<bmx-code-editor id="ex-code" language="typescript" label="Order service" status-bar style="--bmx-code-editor-height: 26rem"></bmx-code-editor>

<div class="row" style="margin-block-start: 0.75rem; gap: 0.5rem; flex-wrap: wrap">
  <bmx-button variant="outline" tone="neutral" id="ex-code-find">Find "total"</bmx-button>
  <bmx-button variant="outline" tone="neutral" id="ex-code-fold">Fold everything</bmx-button>
  <bmx-button variant="outline" tone="neutral" id="ex-code-format">Format</bmx-button>
</div>
<p class="note" id="ex-code-out">Try Ctrl+D on a word, Alt+click for another cursor, Ctrl+/ to comment, Alt+Up and Down to move lines, Ctrl+F to find, and Ctrl+Space for suggestions. In JSON, a missing comma is underlined as you type.</p>

<h3>Problems from a linter, and suggestions of your own</h3>

<p class="note">The editor takes problems from any linter as <code>diagnostics</code> (F8 goes from one to the next) and suggestions from a function of yours as <code>completions</code>.</p>
<bmx-code-editor id="ex-code-sql" language="sql" max-lines="10" min-lines="5" label="Query"></bmx-code-editor>

<script type="module">
  await customElements.whenDefined('bmx-code-editor');

  const samples = {
    typescript: `/**
 * Totals for an order, with tax and a discount.
 */
import { round } from './money';

export interface Line {
  readonly sku: string;
  readonly quantity: number;
  readonly price: number; // per unit, in pence
}

const TAX_RATE = 0.2;
const SKU = /^[A-Z]{3}-\\d{4}$/;

export function orderTotal(lines: readonly Line[], discount = 0): number {
  let total = 0;
  for (const line of lines) {
    if (!SKU.test(line.sku)) throw new Error(\`Unknown product: \${line.sku}\`);
    total += line.quantity * line.price;
  }
  const taxed = total * (1 + TAX_RATE);
  return round(Math.max(0, taxed - discount));
}
`,
    json: `{
  "name": "orders",
  "version": "1.7.0",
  "private": true,
  "scripts": { "build": "stencil build", "test": "vitest" }
  "keywords": ["orders", "totals"]
}
`,
    sql: `-- Customers who ordered more than three times this year
SELECT c.name, COUNT(o.id) AS orders, SUM(o.total) AS spent
FROM customers c
JOIN orders o ON o.customer_id = c.id
WHERE o.placed_at >= DATE '2026-01-01'
GROUP BY c.name
HAVING COUNT(o.id) > 3
ORDER BY spent DESC;
`,
    python: `from dataclasses import dataclass

@dataclass
class Line:
    sku: str
    quantity: int
    price: float

def order_total(lines: list[Line], discount: float = 0.0) -> float:
    """Total with tax, less any discount."""
    total = sum(l.quantity * l.price for l in lines)
    return max(0.0, total * 1.2 - discount)
`,
    html: `<!doctype html>
<html lang="en-GB">
  <head>
    <style>
      .total { font-weight: 600; color: #1864ab; }
    </style>
  </head>
  <body>
    <p class="total">Total: <output id="t">0</output></p>
    <script>
      document.getElementById('t').value = (42).toFixed(2);
    <\/script>
  </body>
</html>
`,
    markdown: `# Release notes

Version **1.7.0** brings a \`bmx-code-editor\` and a [diff](#diff).

- Several cursors
- Find and replace

\`\`\`ts
const editor = document.querySelector('bmx-code-editor');
\`\`\`
`,
  };

  const editor = document.getElementById('ex-code');
  editor.value = samples.typescript;
  document.getElementById('ex-code-lang').addEventListener('change', e => {
    editor.language = e.target.value;
    editor.setValue(samples[e.target.value]);
  });
  document.getElementById('ex-code-wrap').addEventListener('change', e => (editor.wrap = e.target.checked));
  document.getElementById('ex-code-find').addEventListener('click', async () => {
    const n = await editor.find('total');
    document.getElementById('ex-code-out').textContent = `${n} matches. F3 goes to the next one.`;
  });
  document.getElementById('ex-code-fold').addEventListener('click', () => editor.foldAll());
  document.getElementById('ex-code-format').addEventListener('click', async () => {
    const changed = await editor.format();
    document.getElementById('ex-code-out').textContent = changed ? 'Formatted.' : 'Formatting is built in for JSON; give the editor a formatter for other languages.';
  });

  const sql = document.getElementById('ex-code-sql');
  sql.value = `SELECT name, emial\nFROM customers\nWHERE country = 'GB'\nORDER BY name;`;
  sql.diagnostics = [{ line: 1, column: 14, endColumn: 19, severity: 'warning', message: 'Unknown column "emial". Did you mean "email"?', source: 'your linter' }];
  const columns = ['email', 'name', 'country', 'created_at', 'last_order'];
  sql.completions = ({ word }) => columns.filter(c => c.startsWith(word.toLowerCase())).map(c => ({ label: c, kind: 'property', detail: 'customers' }));
</script>