edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/code/header.svelte.js

@@ -0,0 +1,141 @@
+/**
+ * A code block's header (`code.language`): the block's language, a button
+ * that opens the view's language list (`LanguageMenu`) and Copy. One per
+ * rendered code block with the app's `header` snippet, whose attachment
+ * (`button`) gives its markup the keys and the ARIA.
+ */
+import { untrack } from 'svelte';
+import { Text } from '../../text/text.svelte.js';
+import { attribute } from '../chrome.js';
+import { languageOf } from './languages.js';
+import { all, listen } from '../../utils/listen.js';
+/** How long Copy reads Copied after a copy, in milliseconds. */
+const COPIED_FOR = 1200;
+/** A code block's text: its lines, joined by newlines. */
+const codeText = (code) => code.children
+    .map((line) => line.content.map((part) => (part instanceof Text ? part.stringContent : '')).join(''))
+    .join('\n');
+/**
+ * What a code plugin's `header` snippet receives: the code block's
+ * language (`language`, its id; `label`, as shown), whether the language may be changed here
+ * (`editable`: an editable view, not a suggestion's preview), the list's
+ * state (`expanded`), the actions (`toggle`, the list's own `pick`, `copy`, and
+ * `copied` for a moment after a copy) and the plugin's `labels`. Put
+ * `{@attach header.button}` on the element that opens the language list:
+ * it opens it on a click, ArrowDown or ArrowUp, Escape gives the keys back
+ * to the editor, the toolbar's shortcut at a caret in the block reaches it, and it carries
+ * the ARIA (`aria-haspopup`, `aria-expanded`, `aria-controls`, its name).
+ */
+export class CodeHeader {
+    view;
+    settings;
+    menu;
+    /** Copy just copied: the button may read Copied (reactive, for a moment). */
+    copied = $state(false);
+    #timer;
+    /** @internal */
+    constructor(
+    /**
+     * The code block as its snippet reads it.
+     * @internal
+     */
+    view, 
+    /** @internal */
+    settings, 
+    /**
+     * The view's language list (none in a view without one).
+     * @internal
+     */
+    menu) {
+        this.view = view;
+        this.settings = settings;
+        this.menu = menu;
+    }
+    /** The code block; `undefined` in a suggestion's preview. */
+    get block() {
+        return this.view().handle;
+    }
+    /** The block's language id: its `data.language`, else the plugin's default (reactive). */
+    get language() {
+        return languageOf(this.view().data, this.settings);
+    }
+    /** The language's label; a language the plugin does not list shows its id (reactive). */
+    get label() {
+        const language = this.language;
+        return this.settings.languages.find((row) => row.id === language)?.label ?? language;
+    }
+    /** The view is readonly (reactive). */
+    get readonly() {
+        return this.view().handle?.edytor.readonly ?? true;
+    }
+    /** The language may be changed here: an editable view, not a suggestion's preview (reactive). */
+    get editable() {
+        return Boolean(this.menu && this.view().handle && !this.readonly);
+    }
+    /** The language list is open on this block (reactive). */
+    get expanded() {
+        const block = this.view().handle;
+        return Boolean(block && this.menu?.isOpenFor(block.id));
+    }
+    /**
+     * Open the language list under the header's button, or close it (`keys`:
+     * the keyboard opened it, so the keys go back to the button after).
+     */
+    toggle = (keys = false) => {
+        const block = this.view().handle;
+        if (block && this.editable)
+            this.menu?.toggle(block.id, keys);
+    };
+    /** Copy the block's code to the clipboard; `copied` reads true for a moment. */
+    copy = async () => {
+        const block = this.view().handle;
+        // A suggestion's preview has no block to copy.
+        if (!block)
+            return;
+        await navigator.clipboard.writeText(codeText(block));
+        this.copied = true;
+        clearTimeout(this.#timer);
+        this.#timer = setTimeout(() => (this.copied = false), COPIED_FOR);
+    };
+    /**
+     * The element that opens the language list (`{@attach header.button}`, a
+     * `button`): a click opens or closes it (from Enter or Space, the keys
+     * opened it and get it back), ArrowDown or ArrowUp opens it, Escape gives
+     * the keys back to the editor; a press keeps the editor's selection. It
+     * carries `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`
+     * while the list is open, and its name ("Code language: SQL") unless
+     * you set one; the toolbar's shortcut at a caret in the block focuses it.
+     */
+    button = (node) => untrack(() => {
+        node.setAttribute('data-edytor-code-language-button', '');
+        node.setAttribute('aria-haspopup', 'listbox');
+        const mousedown = (event) => event.preventDefault();
+        // A click from Enter or Space has no pointer (`detail` 0): the keys opened it.
+        const click = (event) => this.toggle(event.detail === 0);
+        const keydown = (event) => {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                if (!this.expanded)
+                    this.toggle(true);
+            }
+            else if (event.key === 'Escape')
+                this.menu?.release();
+            else
+                return;
+            event.preventDefault();
+        };
+        const off = listen(node, 'mousedown', mousedown);
+        const off2 = listen(node, 'click', click);
+        const off3 = listen(node, 'keydown', keydown);
+        $effect(() => {
+            const expanded = this.expanded;
+            attribute(node, 'aria-expanded', String(expanded));
+            attribute(node, 'aria-controls', expanded ? this.menu?.listId : undefined);
+        });
+        return all(off, off2, off3);
+    });
+    /**
+     * The header is gone: Copied's timer goes with it.
+     * @internal
+     */
+    dispose = () => clearTimeout(this.#timer);
+}

package/dist/plugins/code/languageMenu.svelte.d.ts

@@ -0,0 +1,84 @@
+import type { Attachment } from 'svelte/attachments';
+import type { Edytor } from '../../edytor.svelte.js';
+import { type MenuItemPayload } from '../chrome.js';
+import { ChromeList } from '../list.svelte.js';
+/** A row of the language list: a language id and its label as shown. */
+export type LanguageRow = {
+    id: string;
+    label: string;
+};
+/**
+ * One row of the language list, for your `menu`: the row shape every
+ * menu shares (`item` is the language, `run` picks it), and whether it is
+ * the block's own language (`current`, the demo's ✓).
+ */
+export type LanguageMenuItem = MenuItemPayload<LanguageRow> & {
+    /** It is the block's language. */
+    current: boolean;
+};
+/**
+ * One view's code language list (Notion's): the header's language button
+ * opens it in the overlay under the button, a search field over the
+ * languages (by label or id), the block's own marked. The field holds the
+ * keys: the arrows move the highlighted row, Enter picks it, Escape
+ * closes. A pick writes the block's `data.language` (one `patchData`
+ * command, one undo step). Opened by the keys, the list gives them back to
+ * its button; opened by a press, to the editor. A press or a focus outside
+ * closes it, as readonly does.
+ *
+ * What a `menu` snippet receives: the open list (`open`), the query
+ * and its rows (`query`, `items`, each a `MenuItemPayload`), the keyboard's
+ * row (`index`), `search`, `pick` and `close`, and
+ * the attachments that give it the keys and the ARIA: `keys` on the
+ * search field, `popup` on the list, `option(index)` on each row.
+ */
+export declare class LanguageMenu extends ChromeList {
+    #private;
+    /** The code block whose list is open, and whether the keys opened it (reactive). */
+    open: {
+        block: string;
+        keys: boolean;
+    } | null;
+    /** The search field's text. */
+    query: string;
+    /** The view is readonly (reactive): the list closes. */
+    get readonly(): boolean;
+    /** The open block's language id. */
+    get current(): string | null;
+    /** The rows the query keeps: a language the plugin does not list first (the block's own), then the list. */
+    get rows(): readonly LanguageRow[];
+    /**
+     * The rows for your `menu`: each the row shape every menu shares
+     * (`run` picks it, `select` highlights it, `option` its attributes), and
+     * whether it is the block's language (`current`).
+     */
+    get items(): LanguageMenuItem[];
+    protected get count(): number;
+    /** Whether `block`'s list is open. */
+    isOpenFor: (block: string) => boolean;
+    /** Open `block`'s list (`keys`: the keyboard opened it), or close it when it is open. */
+    toggle: (block: string, keys: boolean) => void;
+    /** A new query: the first row it keeps is highlighted. */
+    search: (query: string) => void;
+    /** Pick `row` (the highlighted one): the block's language, one undo step; the list closes. */
+    pick: (row?: LanguageRow | undefined) => void;
+    /**
+     * Close the list; the keys go back to its button (`button`), to the
+     * editor (`editor`: its caret where it was), or stay where a press or a
+     * focus put them (`null`).
+     */
+    close: (keys?: "button" | "editor" | null) => void;
+    /**
+     * The search field (`{@attach menu.keys}`): it takes the focus as the
+     * list opens and is its `combobox` (unless it has a role), naming the
+     * list and the highlighted row (`aria-controls`,
+     * `aria-activedescendant`). ArrowDown and ArrowUp move the highlighted
+     * row (around the ends), Enter picks it, Escape closes the list (the
+     * keys back to the button when they opened it, else to the editor);
+     * none reaches the editor. Focus leaving the list and its button closes
+     * it.
+     */
+    keys: Attachment<HTMLElement>;
+}
+/** Each view's language list (the first code plugin listed owns it). */
+export declare const languageMenus: WeakMap<Edytor, LanguageMenu>;

package/dist/plugins/code/languageMenu.svelte.js

@@ -0,0 +1,199 @@
+import { untrack } from 'svelte';
+import { takeKeys } from '../../events/onFocus.js';
+import { attribute } from '../chrome.js';
+import { ChromeList, holdKeys } from '../list.svelte.js';
+import { Anchored } from '../anchored.svelte.js';
+import { languageOf } from './languages.js';
+import { all, listen } from '../../utils/listen.js';
+/**
+ * One view's code language list (Notion's): the header's language button
+ * opens it in the overlay under the button, a search field over the
+ * languages (by label or id), the block's own marked. The field holds the
+ * keys: the arrows move the highlighted row, Enter picks it, Escape
+ * closes. A pick writes the block's `data.language` (one `patchData`
+ * command, one undo step). Opened by the keys, the list gives them back to
+ * its button; opened by a press, to the editor. A press or a focus outside
+ * closes it, as readonly does.
+ *
+ * What a `menu` snippet receives: the open list (`open`), the query
+ * and its rows (`query`, `items`, each a `MenuItemPayload`), the keyboard's
+ * row (`index`), `search`, `pick` and `close`, and
+ * the attachments that give it the keys and the ARIA: `keys` on the
+ * search field, `popup` on the list, `option(index)` on each row.
+ */
+export class LanguageMenu extends ChromeList {
+    settings;
+    /** The code block whose list is open, and whether the keys opened it (reactive). */
+    open = $state.raw(null);
+    /** The search field's text. */
+    query = $state('');
+    /**
+     * The list's panel under its button: its place, and what closes it.
+     * @internal
+     */
+    panel;
+    /** @internal */
+    constructor(edytor, 
+    /** @internal */
+    settings) {
+        super(edytor, 'code-languages', 'listbox');
+        this.settings = settings;
+        this.panel = new Anchored(edytor, 'edytor-code-language-host', () => (this.open ? this.#button(this.open.block) : undefined), () => this.close());
+    }
+    /** The view is readonly (reactive): the list closes. */
+    get readonly() {
+        return this.edytor.readonly;
+    }
+    /** The open block's language id. */
+    get current() {
+        const open = this.open;
+        if (!open)
+            return null;
+        return languageOf(this.edytor.idToBlock.get(open.block)?.data, this.settings);
+    }
+    /** The rows the query keeps: a language the plugin does not list first (the block's own), then the list. */
+    get rows() {
+        const current = this.current;
+        const listed = this.settings.languages;
+        const all = current && !listed.some((row) => row.id === current)
+            ? [{ id: current, label: current }, ...listed]
+            : listed;
+        const query = this.query.trim().toLowerCase();
+        if (!query)
+            return all;
+        return all.filter((row) => row.label.toLowerCase().includes(query) || row.id.toLowerCase().includes(query));
+    }
+    /**
+     * The rows for your `menu`: each the row shape every menu shares
+     * (`run` picks it, `select` highlights it, `option` its attributes), and
+     * whether it is the block's language (`current`).
+     */
+    get items() {
+        const current = this.current;
+        return this.rows.map((row, index) => ({
+            item: row,
+            id: this.rowId(index),
+            selected: index === this.index,
+            current: row.id === current,
+            run: () => this.pick(row),
+            select: () => (this.index = index),
+            option: this.option(index)
+        }));
+    }
+    get count() {
+        return this.rows.length;
+    }
+    /** Whether `block`'s list is open. */
+    isOpenFor = (block) => this.open?.block === block;
+    /** Open `block`'s list (`keys`: the keyboard opened it), or close it when it is open. */
+    toggle = (block, keys) => {
+        if (this.isOpenFor(block))
+            return this.close(keys ? 'button' : 'editor');
+        if (!this.edytor.dispatcher.permits() || !this.edytor.idToBlock.get(block)?.isInTree)
+            return;
+        this.query = '';
+        this.open = { block, keys };
+        this.index = Math.max(0, this.rows.findIndex((row) => row.id === this.current));
+        this.edytor.overlay.invalidate();
+    };
+    /** A new query: the first row it keeps is highlighted. */
+    search = (query) => {
+        this.query = query;
+        this.index = 0;
+    };
+    /** Pick `row` (the highlighted one): the block's language, one undo step; the list closes. */
+    pick = (row = this.rows[this.index]) => {
+        const open = this.open;
+        if (!open || !row)
+            return;
+        const block = this.edytor.idToBlock.get(open.block);
+        if (block?.isInTree && row.id !== this.current)
+            block.edytor.patchData(block.id, [{ path: ['language'], value: row.id }]);
+        this.close(open.keys ? 'button' : 'editor');
+    };
+    /**
+     * Close the list; the keys go back to its button (`button`), to the
+     * editor (`editor`: its caret where it was), or stay where a press or a
+     * focus put them (`null`).
+     */
+    close = (keys = null) => {
+        const open = this.open;
+        if (!open)
+            return;
+        this.open = null;
+        this.panel.box = null;
+        this.query = '';
+        this.edytor.overlay.invalidate();
+        if (keys === 'button')
+            this.#button(open.block)?.focus({ preventScroll: true });
+        else if (keys === 'editor') {
+            takeKeys(this.edytor);
+            this.edytor.selection.display();
+        }
+    };
+    /**
+     * The search field (`{@attach menu.keys}`): it takes the focus as the
+     * list opens and is its `combobox` (unless it has a role), naming the
+     * list and the highlighted row (`aria-controls`,
+     * `aria-activedescendant`). ArrowDown and ArrowUp move the highlighted
+     * row (around the ends), Enter picks it, Escape closes the list (the
+     * keys back to the button when they opened it, else to the editor);
+     * none reaches the editor. Focus leaving the list and its button closes
+     * it.
+     */
+    keys = (node) => untrack(() => {
+        if (!node.hasAttribute('role'))
+            node.setAttribute('role', 'combobox');
+        node.setAttribute('aria-expanded', 'true');
+        node.setAttribute('aria-autocomplete', 'list');
+        attribute(node, 'aria-controls', this.listId);
+        const off2 = listen(node, 'focusout', this.panel.blurred);
+        const off = holdKeys(node, this.#keydown, () => this.rows.length ? this.rowId(this.index) : undefined);
+        return all(off, off2);
+    });
+    /** The search field's keys (`keys`). */
+    #keydown = (event) => {
+        if (event.isComposing)
+            return;
+        const step = { ArrowDown: 1, ArrowUp: -1 }[event.key];
+        if (step)
+            this.move(step);
+        else if (event.key === 'Enter')
+            this.pick();
+        else if (event.key === 'Escape')
+            this.close(this.open?.keys ? 'button' : 'editor');
+        else
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    /**
+     * The keys back to the editor from a language button (its Escape): the
+     * host takes the focus, the caret shown where the selection is.
+     * @internal
+     */
+    release = () => {
+        this.close();
+        takeKeys(this.edytor);
+    };
+    /**
+     * The language button of the code block holding a caret (where Alt+F10
+     * takes the keys, as to a toolbar), if any.
+     * @internal
+     */
+    buttonAtCaret = () => {
+        const { startText } = this.edytor.selection.textRange();
+        const { isCollapsed } = this.edytor.selection.projection;
+        const startBlock = startText?.parent;
+        const code = startBlock?.type === 'codeLine' ? startBlock.parent : null;
+        if (!isCollapsed || !code || this.edytor.readonly)
+            return null;
+        return this.#button(code.id);
+    };
+    /** The language button of code block `block`, in this view (the header's `button` attachment marks it). */
+    #button = (block) => this.edytor.idToBlock
+        .get(block)
+        ?.node?.querySelector('[data-edytor-code-language-button]') ?? null;
+}
+/** Each view's language list (the first code plugin listed owns it). */
+export const languageMenus = new WeakMap();

package/dist/plugins/code/languages.d.ts

@@ -8,7 +8,9 @@
 import { type LanguageDefinition } from '@tanstack/highlight/core';
 import type { JSONText } from '../../utils/json.js';
 import type { Edytor } from '../../edytor.svelte.js';
-import { type CodeLabels, type PartialLabels } from '../../labels.js';
+import type { Snippet } from 'svelte';
+import type { CodeHeader } from './header.svelte.js';
+import type { LanguageMenu } from './languageMenu.svelte.js';
 /** A language a code block may be in. */
 export type CodeLanguage = {
     /** Stored in the code block's `data.language`. */
@@ -37,26 +39,35 @@ export declare const loadCodeLanguage: (language: CodeLanguage) => Promise<void>
  */
 export declare const tokenizeCode: (code: string, language: CodeLanguage | undefined) => JSONText[];
 export type CodePluginOptions = {
-    /** The languages a code block may be in, in the header's order. Default `CODE_LANGUAGES`. */
+    /** The languages a code block may be in, in the header's order, with their names. Default `CODE_LANGUAGES`. */
     languages?: readonly CodeLanguage[];
     /** The language of a code block whose `data.language` is unset. Default `'javascript'`. */
     defaultLanguage?: string;
     /**
-     * The words the code block shows (its menu row, header, a language's
-     * label by id), over the English ones.
+     * A code block's header (the language's button and Copy) and its words: it renders
+     * above the code, in the block's non-editable part (without it, no
+     * header). Put `{@attach header.button}` on the element that opens the
+     * language list.
      */
-    labels?: PartialLabels<'code'>;
-    /** The slash menu's keywords of the code command (`block.code`), which replace its own. */
-    keywords?: Partial<Record<string, string[]>>;
+    header?: Snippet<[CodeHeader]>;
+    /**
+     * The language list: it renders under the header's button while
+     * `menu.open` is set (without it, nothing shows). Put `{@attach menu.keys}` on its search field,
+     * `{@attach menu.popup}` on the list, and `{@attach item.option}` on each
+     * row of `menu.items` (its highlight from `item.selected`). The first code
+     * plugin listed in a view owns its list.
+     */
+    menu?: Snippet<[LanguageMenu]>;
 };
 export type CodeSettings = {
     languages: readonly CodeLanguage[];
     defaultLanguage: string;
-    labels: CodeLabels;
+    /** The app's header markup, if any. */
+    header?: Snippet<[CodeHeader]>;
+    /** The app's language list markup, if any. */
+    menu?: Snippet<[LanguageMenu]>;
 };
 export declare const DEFAULT_CODE_SETTINGS: CodeSettings;
-/** A language's label as shown: the labels' `languages` entry for its id, else its own. */
-export declare const languageLabel: (language: CodeLanguage, { labels }: CodeSettings) => string;
 /** Each view's code options, for its code blocks' header (which reads them through its view). */
 export declare const codeSettings: WeakMap<Edytor, CodeSettings>;
 /** A code block's language id: its `data.language`, else the default. */

package/dist/plugins/code/languages.js

@@ -8,132 +8,48 @@
 import { createHighlighter } from '@tanstack/highlight/core';
 import { jsx } from '@tanstack/highlight/languages/jsx';
 import { SvelteMap } from 'svelte/reactivity';
-import { englishLabels } from '../../labels.js';
-const scripts = () => Promise.all([
-    import('@tanstack/highlight/languages/css'),
-    import('@tanstack/highlight/languages/js'),
-    import('@tanstack/highlight/languages/ts')
-]).then(([{ css }, { js }, { ts }]) => [css, js, ts]);
-/** A markup grammar with the style and script grammars it embeds. */
-const markup = (grammar) => () => Promise.all([grammar(), scripts()]).then(([own, embedded]) => [own, ...embedded]);
+/** The grammars more than one language loads. */
+const css = () => import('@tanstack/highlight/languages/css');
+const ts = () => import('@tanstack/highlight/languages/ts');
+const html = () => import('@tanstack/highlight/languages/html');
+const scripts = () => Promise.all([css(), import('@tanstack/highlight/languages/js'), ts()]).then(([{ css }, { js }, { ts }]) => [css, js, ts]);
+/**
+ * A listed language: its lines are tokenized with `grammar` (its id unless
+ * named), the definition the module `load` imports exports by that name; a
+ * markup grammar (`embeds`) also loads the style and script grammars it embeds.
+ */
+const language = (id, label, load, grammar = id, embeds = false) => ({
+    id,
+    label,
+    grammar,
+    load: () => Promise.all([load(), embeds ? scripts() : []]).then(([module, embedded]) => [
+        module[grammar],
+        ...embedded
+    ])
+});
 /** The default languages, after Notion's list, sorted by label (Plain text first). */
 export const CODE_LANGUAGES = [
     { id: 'plaintext', label: 'Plain text' },
-    {
-        id: 'bash',
-        label: 'Bash',
-        grammar: 'shell',
-        load: () => import('@tanstack/highlight/languages/shell').then((m) => [m.shell])
-    },
-    {
-        id: 'cpp',
-        label: 'C++',
-        grammar: 'cpp',
-        load: () => import('@tanstack/highlight/languages/cpp').then((m) => [m.cpp])
-    },
-    {
-        id: 'css',
-        label: 'CSS',
-        grammar: 'css',
-        load: () => import('@tanstack/highlight/languages/css').then((m) => [m.css])
-    },
-    {
-        id: 'diff',
-        label: 'Diff',
-        grammar: 'diff',
-        load: () => import('@tanstack/highlight/languages/diff').then((m) => [m.diff])
-    },
-    {
-        id: 'docker',
-        label: 'Docker',
-        grammar: 'dockerfile',
-        load: () => import('@tanstack/highlight/languages/dockerfile').then((m) => [m.dockerfile])
-    },
-    {
-        id: 'go',
-        label: 'Go',
-        grammar: 'go',
-        load: () => import('@tanstack/highlight/languages/go').then((m) => [m.go])
-    },
-    {
-        id: 'html',
-        label: 'HTML',
-        grammar: 'html',
-        load: markup(() => import('@tanstack/highlight/languages/html').then((m) => m.html))
-    },
+    language('bash', 'Bash', () => import('@tanstack/highlight/languages/shell'), 'shell'),
+    language('cpp', 'C++', () => import('@tanstack/highlight/languages/cpp')),
+    language('css', 'CSS', css),
+    language('diff', 'Diff', () => import('@tanstack/highlight/languages/diff')),
+    language('docker', 'Docker', () => import('@tanstack/highlight/languages/dockerfile'), 'dockerfile'),
+    language('go', 'Go', () => import('@tanstack/highlight/languages/go')),
+    language('html', 'HTML', html, 'html', true),
     { id: 'javascript', label: 'JavaScript', grammar: 'jsx', load: async () => [jsx] },
-    {
-        id: 'json',
-        label: 'JSON',
-        grammar: 'json',
-        load: () => import('@tanstack/highlight/languages/json').then((m) => [m.json])
-    },
-    {
-        id: 'markdown',
-        label: 'Markdown',
-        grammar: 'markdown',
-        load: () => import('@tanstack/highlight/languages/markdown').then((m) => [m.markdown])
-    },
-    {
-        id: 'mermaid',
-        label: 'Mermaid',
-        grammar: 'mermaid',
-        load: () => import('@tanstack/highlight/languages/mermaid').then((m) => [m.mermaid])
-    },
-    {
-        id: 'php',
-        label: 'PHP',
-        grammar: 'php',
-        load: () => import('@tanstack/highlight/languages/php').then((m) => [m.php])
-    },
-    {
-        id: 'python',
-        label: 'Python',
-        grammar: 'python',
-        load: () => import('@tanstack/highlight/languages/python').then((m) => [m.python])
-    },
-    {
-        id: 'sql',
-        label: 'SQL',
-        grammar: 'sql',
-        load: () => import('@tanstack/highlight/languages/sql').then((m) => [m.sql])
-    },
-    {
-        id: 'svelte',
-        label: 'Svelte',
-        grammar: 'svelte',
-        load: markup(() => import('@tanstack/highlight/languages/svelte').then((m) => m.svelte))
-    },
-    {
-        id: 'toml',
-        label: 'TOML',
-        grammar: 'toml',
-        load: () => import('@tanstack/highlight/languages/toml').then((m) => [m.toml])
-    },
-    {
-        id: 'typescript',
-        label: 'TypeScript',
-        grammar: 'ts',
-        load: () => import('@tanstack/highlight/languages/ts').then((m) => [m.ts])
-    },
-    {
-        id: 'vue',
-        label: 'Vue',
-        grammar: 'vue',
-        load: markup(() => import('@tanstack/highlight/languages/vue').then((m) => m.vue))
-    },
-    {
-        id: 'xml',
-        label: 'XML',
-        grammar: 'html',
-        load: () => import('@tanstack/highlight/languages/html').then((m) => [m.html])
-    },
-    {
-        id: 'yaml',
-        label: 'YAML',
-        grammar: 'yaml',
-        load: () => import('@tanstack/highlight/languages/yaml').then((m) => [m.yaml])
-    }
+    language('json', 'JSON', () => import('@tanstack/highlight/languages/json')),
+    language('markdown', 'Markdown', () => import('@tanstack/highlight/languages/markdown')),
+    language('mermaid', 'Mermaid', () => import('@tanstack/highlight/languages/mermaid')),
+    language('php', 'PHP', () => import('@tanstack/highlight/languages/php')),
+    language('python', 'Python', () => import('@tanstack/highlight/languages/python')),
+    language('sql', 'SQL', () => import('@tanstack/highlight/languages/sql')),
+    language('svelte', 'Svelte', () => import('@tanstack/highlight/languages/svelte'), 'svelte', true),
+    language('toml', 'TOML', () => import('@tanstack/highlight/languages/toml')),
+    language('typescript', 'TypeScript', ts, 'ts'),
+    language('vue', 'Vue', () => import('@tanstack/highlight/languages/vue'), 'vue', true),
+    language('xml', 'XML', html, 'html'),
+    language('yaml', 'YAML', () => import('@tanstack/highlight/languages/yaml'))
 ];
 /**
  * The grammars loaded so far, by name, shared by every editor (a grammar is
@@ -181,11 +97,8 @@ export const tokenizeCode = (code, language) => {
 };
 export const DEFAULT_CODE_SETTINGS = {
     languages: CODE_LANGUAGES,
-    defaultLanguage: 'javascript',
-    labels: englishLabels.code
+    defaultLanguage: 'javascript'
 };
-/** A language's label as shown: the labels' `languages` entry for its id, else its own. */
-export const languageLabel = (language, { labels }) => labels.languages[language.id] ?? language.label;
 /** Each view's code options, for its code blocks' header (which reads them through its view). */
 export const codeSettings = new WeakMap();
 /** A code block's language id: its `data.language`, else the default. */