@llui/markdown-editor 0.1.0

package/dist/surfaces/toolbar.js

@@ -0,0 +1,134 @@
+// Toolbar surface. `connectToolbar` returns a parts bag (the @llui/components
+// idiom) driven reactively by the format signal; `toolbar` is a ready-made
+// grouped toolbar Mountable for consumers who don't want to hand-render buttons.
+import { button, div, option, select, span, text, tagSend, unsafeHtml, } from '@llui/dom';
+/** Build reactive toolbar parts from the format signal. Spread `item(id)` onto a
+ * `<button>`; `aria-pressed` / `data-active` / `disabled` track the format. */
+export function connectToolbar(format, send, items) {
+    const byId = new Map(items.map((i) => [i.id, i]));
+    return {
+        root: {
+            role: 'toolbar',
+            'aria-label': 'Formatting',
+            'data-scope': 'md-toolbar',
+            'data-part': 'root',
+        },
+        item: (id) => {
+            const item = byId.get(id);
+            const label = item?.label ?? id;
+            return {
+                type: 'button',
+                'data-scope': 'md-toolbar',
+                'data-part': 'item',
+                'data-id': id,
+                'aria-label': label,
+                title: label,
+                'aria-pressed': format.map((f) => (item?.isActive?.(f) ? 'true' : 'false')),
+                'aria-disabled': format.map((f) => (item?.isDisabled?.(f) ? 'true' : undefined)),
+                disabled: format.map((f) => item?.isDisabled?.(f) ?? false),
+                'data-active': format.map((f) => (item?.isActive?.(f) ? '' : undefined)),
+                onClick: tagSend(send, ['runCommand'], () => send({ type: 'runCommand', id })),
+            };
+        },
+    };
+}
+/** Inline SVG icon (monochrome, inherits `currentColor`) used where a glyph
+ * reads poorly. A glyph string starting with `<svg` is rendered as markup. */
+const LINK_ICON = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 13.5a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 1 0-5-5l-1 1"/><path d="M14.5 10.5a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 1 0 5 5l1-1"/></svg>';
+const IMAGE_ICON = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="9.5" r="1.6"/><path d="m4 18 5-5 4 4 3-3 4 4"/></svg>';
+/** Compact glyphs so the default toolbar reads as a real toolbar without icon
+ * assets. SVG strings render as icons; everything else as text. Override via
+ * `ToolbarOptions.glyphs`. */
+export const DEFAULT_GLYPHS = {
+    bold: 'B',
+    italic: 'I',
+    strikethrough: 'S',
+    code: '</>',
+    link: LINK_ICON,
+    image: IMAGE_ICON,
+    hr: '—',
+    table: '▦',
+    paragraph: '¶',
+    h1: 'H1',
+    h2: 'H2',
+    h3: 'H3',
+    quote: '❝',
+    codeBlock: '{ }',
+    bulletList: '•',
+    numberList: '1.',
+    checkList: '☑',
+    undo: '↺',
+    redo: '↻',
+};
+const GROUP_ORDER = ['inline', 'block', 'list', 'insert', 'history'];
+function groupItems(items) {
+    const groups = new Map();
+    for (const item of items) {
+        const key = item.group ?? 'other';
+        const list = groups.get(key) ?? [];
+        list.push(item.id);
+        groups.set(key, list);
+    }
+    const ordered = [];
+    for (const key of GROUP_ORDER) {
+        const list = groups.get(key);
+        if (list)
+            ordered.push(list);
+    }
+    for (const [key, list] of groups) {
+        if (!GROUP_ORDER.includes(key))
+            ordered.push(list);
+    }
+    return ordered;
+}
+/** Render the `block` group as a native `<select>` of block types. */
+function blockTypeSelect(format, send, blockItems) {
+    return select({
+        'data-scope': 'md-toolbar',
+        'data-part': 'block-select',
+        'aria-label': 'Block type',
+        value: format.map((f) => blockItems.find((i) => i.isActive?.(f))?.id ?? ''),
+        onChange: (e) => {
+            const id = e.currentTarget.value;
+            if (id)
+                send({ type: 'runCommand', id });
+        },
+    }, [
+        option({ value: '', hidden: true }, [text('—')]),
+        ...blockItems.map((i) => option({ value: i.id }, [text(i.label)])),
+    ]);
+}
+/** A ready-made grouped toolbar. Items not surfaced to `'toolbar'` are dropped. */
+export function toolbar(opts) {
+    const surfaceItems = opts.items.filter((i) => i.surfaces?.includes('toolbar') ?? true);
+    const byId = new Map(surfaceItems.map((i) => [i.id, i]));
+    const parts = connectToolbar(opts.format, opts.send, surfaceItems);
+    const glyphs = { ...DEFAULT_GLYPHS, ...(opts.glyphs ?? {}) };
+    const useBlockSelect = opts.blockSelect !== false && !opts.groups;
+    const blockItems = useBlockSelect ? surfaceItems.filter((i) => i.group === 'block') : [];
+    const buttonItems = useBlockSelect
+        ? surfaceItems.filter((i) => i.group !== 'block')
+        : surfaceItems;
+    const groups = opts.groups ?? groupItems(buttonItems);
+    const children = [];
+    if (blockItems.length > 0) {
+        children.push(div({ 'data-scope': 'md-toolbar', 'data-part': 'group' }, [
+            blockTypeSelect(opts.format, opts.send, blockItems),
+        ]));
+    }
+    for (const ids of groups) {
+        const present = ids.filter((id) => byId.has(id));
+        if (present.length === 0)
+            continue;
+        children.push(div({ 'data-scope': 'md-toolbar', 'data-part': 'group' }, present.map((id) => {
+            const item = byId.get(id);
+            const glyph = glyphs[id] ?? item.label;
+            const glyphNode = glyph.trimStart().startsWith('<svg') ? unsafeHtml(glyph) : text(glyph);
+            return button({ ...parts.item(id) }, [
+                span({ 'data-part': 'glyph', 'aria-hidden': 'true' }, [glyphNode]),
+            ]);
+        })));
+    }
+    return div({ ...parts.root, ...(opts['aria-label'] ? { 'aria-label': opts['aria-label'] } : {}) }, children);
+}
+//# sourceMappingURL=toolbar.js.map

package/dist/surfaces/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/surfaces/toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["// Toolbar surface. `connectToolbar` returns a parts bag (the @llui/components\n// idiom) driven reactively by the format signal; `toolbar` is a ready-made\n// grouped toolbar Mountable for consumers who don't want to hand-render buttons.\n\nimport {\n  button,\n  div,\n  option,\n  select,\n  span,\n  text,\n  tagSend,\n  unsafeHtml,\n  type Mountable,\n  type Send,\n  type Signal,\n} from '@llui/dom'\nimport type { CommandItem } from '../plugins/types.js'\nimport type { EditorMsg, FormatState } from '../state.js'\n\nexport interface ToolbarItemParts {\n  type: 'button'\n  'data-scope': 'md-toolbar'\n  'data-part': 'item'\n  'data-id': string\n  'aria-label': string\n  title: string\n  'aria-pressed': Signal<'true' | 'false'>\n  'aria-disabled': Signal<'true' | undefined>\n  disabled: Signal<boolean>\n  'data-active': Signal<'' | undefined>\n  onClick: (e: MouseEvent) => void\n}\n\nexport interface ToolbarParts {\n  root: {\n    role: 'toolbar'\n    'aria-label': string\n    'data-scope': 'md-toolbar'\n    'data-part': 'root'\n  }\n  item: (id: string) => ToolbarItemParts\n}\n\n/** Build reactive toolbar parts from the format signal. Spread `item(id)` onto a\n * `<button>`; `aria-pressed` / `data-active` / `disabled` track the format. */\nexport function connectToolbar(\n  format: Signal<FormatState>,\n  send: Send<EditorMsg>,\n  items: readonly CommandItem[],\n): ToolbarParts {\n  const byId = new Map(items.map((i) => [i.id, i]))\n  return {\n    root: {\n      role: 'toolbar',\n      'aria-label': 'Formatting',\n      'data-scope': 'md-toolbar',\n      'data-part': 'root',\n    },\n    item: (id) => {\n      const item = byId.get(id)\n      const label = item?.label ?? id\n      return {\n        type: 'button',\n        'data-scope': 'md-toolbar',\n        'data-part': 'item',\n        'data-id': id,\n        'aria-label': label,\n        title: label,\n        'aria-pressed': format.map((f) => (item?.isActive?.(f) ? 'true' : 'false')),\n        'aria-disabled': format.map((f) => (item?.isDisabled?.(f) ? 'true' : undefined)),\n        disabled: format.map((f) => item?.isDisabled?.(f) ?? false),\n        'data-active': format.map((f) => (item?.isActive?.(f) ? '' : undefined)),\n        onClick: tagSend(send, ['runCommand'], () => send({ type: 'runCommand', id })),\n      }\n    },\n  }\n}\n\n/** Inline SVG icon (monochrome, inherits `currentColor`) used where a glyph\n * reads poorly. A glyph string starting with `<svg` is rendered as markup. */\nconst LINK_ICON =\n  '<svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9.5 13.5a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 1 0-5-5l-1 1\"/><path d=\"M14.5 10.5a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 1 0 5 5l1-1\"/></svg>'\n\nconst IMAGE_ICON =\n  '<svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"/><circle cx=\"9\" cy=\"9.5\" r=\"1.6\"/><path d=\"m4 18 5-5 4 4 3-3 4 4\"/></svg>'\n\n/** Compact glyphs so the default toolbar reads as a real toolbar without icon\n * assets. SVG strings render as icons; everything else as text. Override via\n * `ToolbarOptions.glyphs`. */\nexport const DEFAULT_GLYPHS: Readonly<Record<string, string>> = {\n  bold: 'B',\n  italic: 'I',\n  strikethrough: 'S',\n  code: '</>',\n  link: LINK_ICON,\n  image: IMAGE_ICON,\n  hr: '—',\n  table: '▦',\n  paragraph: '¶',\n  h1: 'H1',\n  h2: 'H2',\n  h3: 'H3',\n  quote: '❝',\n  codeBlock: '{ }',\n  bulletList: '•',\n  numberList: '1.',\n  checkList: '☑',\n  undo: '↺',\n  redo: '↻',\n}\n\nconst GROUP_ORDER = ['inline', 'block', 'list', 'insert', 'history']\n\nfunction groupItems(items: readonly CommandItem[]): string[][] {\n  const groups = new Map<string, string[]>()\n  for (const item of items) {\n    const key = item.group ?? 'other'\n    const list = groups.get(key) ?? []\n    list.push(item.id)\n    groups.set(key, list)\n  }\n  const ordered: string[][] = []\n  for (const key of GROUP_ORDER) {\n    const list = groups.get(key)\n    if (list) ordered.push(list)\n  }\n  for (const [key, list] of groups) {\n    if (!GROUP_ORDER.includes(key)) ordered.push(list)\n  }\n  return ordered\n}\n\nexport interface ToolbarOptions {\n  format: Signal<FormatState>\n  send: Send<EditorMsg>\n  items: readonly CommandItem[]\n  /** Explicit grouped layout of ids; defaults to grouping by `item.group`. */\n  groups?: readonly (readonly string[])[]\n  /** Glyph overrides (id → text/emoji). Merged over {@link DEFAULT_GLYPHS}. */\n  glyphs?: Readonly<Record<string, string>>\n  /** Render the `block` group as a `<select>` dropdown instead of buttons\n   * (default true). */\n  blockSelect?: boolean\n  'aria-label'?: string\n}\n\n/** Render the `block` group as a native `<select>` of block types. */\nfunction blockTypeSelect(\n  format: Signal<FormatState>,\n  send: Send<EditorMsg>,\n  blockItems: readonly CommandItem[],\n): Mountable {\n  return select(\n    {\n      'data-scope': 'md-toolbar',\n      'data-part': 'block-select',\n      'aria-label': 'Block type',\n      value: format.map((f) => blockItems.find((i) => i.isActive?.(f))?.id ?? ''),\n      onChange: (e: Event) => {\n        const id = (e.currentTarget as HTMLSelectElement).value\n        if (id) send({ type: 'runCommand', id })\n      },\n    },\n    [\n      option({ value: '', hidden: true }, [text('—')]),\n      ...blockItems.map((i) => option({ value: i.id }, [text(i.label)])),\n    ],\n  )\n}\n\n/** A ready-made grouped toolbar. Items not surfaced to `'toolbar'` are dropped. */\nexport function toolbar(opts: ToolbarOptions): Mountable {\n  const surfaceItems = opts.items.filter((i) => i.surfaces?.includes('toolbar') ?? true)\n  const byId = new Map(surfaceItems.map((i) => [i.id, i]))\n  const parts = connectToolbar(opts.format, opts.send, surfaceItems)\n  const glyphs = { ...DEFAULT_GLYPHS, ...(opts.glyphs ?? {}) }\n\n  const useBlockSelect = opts.blockSelect !== false && !opts.groups\n  const blockItems = useBlockSelect ? surfaceItems.filter((i) => i.group === 'block') : []\n  const buttonItems = useBlockSelect\n    ? surfaceItems.filter((i) => i.group !== 'block')\n    : surfaceItems\n  const groups = opts.groups ?? groupItems(buttonItems)\n\n  const children: Mountable[] = []\n  if (blockItems.length > 0) {\n    children.push(\n      div({ 'data-scope': 'md-toolbar', 'data-part': 'group' }, [\n        blockTypeSelect(opts.format, opts.send, blockItems),\n      ]),\n    )\n  }\n  for (const ids of groups) {\n    const present = ids.filter((id) => byId.has(id))\n    if (present.length === 0) continue\n    children.push(\n      div(\n        { 'data-scope': 'md-toolbar', 'data-part': 'group' },\n        present.map((id) => {\n          const item = byId.get(id)!\n          const glyph = glyphs[id] ?? item.label\n          const glyphNode = glyph.trimStart().startsWith('<svg') ? unsafeHtml(glyph) : text(glyph)\n          return button({ ...parts.item(id) }, [\n            span({ 'data-part': 'glyph', 'aria-hidden': 'true' }, [glyphNode]),\n          ])\n        }),\n      ),\n    )\n  }\n\n  return div(\n    { ...parts.root, ...(opts['aria-label'] ? { 'aria-label': opts['aria-label'] } : {}) },\n    children,\n  )\n}\n"]}

package/dist/transformers/gfm.d.ts

@@ -0,0 +1,7 @@
+import type { Klass, LexicalNode } from 'lexical';
+import { type Transformer } from '@lexical/markdown';
+/** Node classes required to render the GFM superset. */
+export declare const GFM_NODES: ReadonlyArray<Klass<LexicalNode>>;
+/** Markdown ↔ node transformers for the GFM superset. */
+export declare const GFM_TRANSFORMERS: readonly Transformer[];
+//# sourceMappingURL=gfm.d.ts.map

package/dist/transformers/gfm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gfm.d.ts","sourceRoot":"","sources":["../../src/transformers/gfm.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAOjD,OAAO,EACL,KAAK,WAAW,EAiBjB,MAAM,mBAAmB,CAAA;AAE1B,wDAAwD;AACxD,eAAO,MAAM,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAQvD,CAAA;AAED,yDAAyD;AACzD,eAAO,MAAM,gBAAgB,EAAE,SAAS,WAAW,EAmBlD,CAAA"}

package/dist/transformers/gfm.js

@@ -0,0 +1,41 @@
+// The built-in GFM superset: node classes + the explicit transformer set that
+// maps exactly to those nodes (no surprise nodes — HR/tables are opt-in plugins).
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { ListNode, ListItemNode } from '@lexical/list';
+import { LinkNode } from '@lexical/link';
+// `@lexical/code-core` (not `@lexical/code`) keeps Prism out of the bundle — we
+// never register syntax highlighting, so plain CodeNode is all we need.
+import { CodeNode, CodeHighlightNode } from '@lexical/code-core';
+import { HEADING, QUOTE, UNORDERED_LIST, ORDERED_LIST, CHECK_LIST, CODE, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, ITALIC_STAR, ITALIC_UNDERSCORE, STRIKETHROUGH, INLINE_CODE, HIGHLIGHT, LINK, } from '@lexical/markdown';
+/** Node classes required to render the GFM superset. */
+export const GFM_NODES = [
+    HeadingNode,
+    QuoteNode,
+    ListNode,
+    ListItemNode,
+    CodeNode,
+    CodeHighlightNode,
+    LinkNode,
+];
+/** Markdown ↔ node transformers for the GFM superset. */
+export const GFM_TRANSFORMERS = [
+    HEADING,
+    QUOTE,
+    // CHECK_LIST must precede the plain list transformers: `- [ ]`/`- [x]` also
+    // match `- `, so UNORDERED_LIST would otherwise swallow it as bullet text.
+    CHECK_LIST,
+    UNORDERED_LIST,
+    ORDERED_LIST,
+    CODE,
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+    BOLD_STAR,
+    BOLD_UNDERSCORE,
+    ITALIC_STAR,
+    ITALIC_UNDERSCORE,
+    STRIKETHROUGH,
+    INLINE_CODE,
+    HIGHLIGHT,
+    LINK,
+];
+//# sourceMappingURL=gfm.js.map

package/dist/transformers/gfm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gfm.js","sourceRoot":"","sources":["../../src/transformers/gfm.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,kFAAkF;AAGlF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,gFAAgF;AAChF,wEAAwE;AACxE,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,EAEL,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,sBAAsB,EACtB,SAAS,EACT,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,SAAS,EACT,IAAI,GACL,MAAM,mBAAmB,CAAA;AAE1B,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAsC;IAC1D,WAAW;IACX,SAAS;IACT,QAAQ;IACR,YAAY;IACZ,QAAQ;IACR,iBAAiB;IACjB,QAAQ;CACT,CAAA;AAED,yDAAyD;AACzD,MAAM,CAAC,MAAM,gBAAgB,GAA2B;IACtD,OAAO;IACP,KAAK;IACL,4EAA4E;IAC5E,2EAA2E;IAC3E,UAAU;IACV,cAAc;IACd,YAAY;IACZ,IAAI;IACJ,gBAAgB;IAChB,sBAAsB;IACtB,SAAS;IACT,eAAe;IACf,WAAW;IACX,iBAAiB;IACjB,aAAa;IACb,WAAW;IACX,SAAS;IACT,IAAI;CACL,CAAA","sourcesContent":["// The built-in GFM superset: node classes + the explicit transformer set that\n// maps exactly to those nodes (no surprise nodes — HR/tables are opt-in plugins).\n\nimport type { Klass, LexicalNode } from 'lexical'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { ListNode, ListItemNode } from '@lexical/list'\nimport { LinkNode } from '@lexical/link'\n// `@lexical/code-core` (not `@lexical/code`) keeps Prism out of the bundle — we\n// never register syntax highlighting, so plain CodeNode is all we need.\nimport { CodeNode, CodeHighlightNode } from '@lexical/code-core'\nimport {\n  type Transformer,\n  HEADING,\n  QUOTE,\n  UNORDERED_LIST,\n  ORDERED_LIST,\n  CHECK_LIST,\n  CODE,\n  BOLD_ITALIC_STAR,\n  BOLD_ITALIC_UNDERSCORE,\n  BOLD_STAR,\n  BOLD_UNDERSCORE,\n  ITALIC_STAR,\n  ITALIC_UNDERSCORE,\n  STRIKETHROUGH,\n  INLINE_CODE,\n  HIGHLIGHT,\n  LINK,\n} from '@lexical/markdown'\n\n/** Node classes required to render the GFM superset. */\nexport const GFM_NODES: ReadonlyArray<Klass<LexicalNode>> = [\n  HeadingNode,\n  QuoteNode,\n  ListNode,\n  ListItemNode,\n  CodeNode,\n  CodeHighlightNode,\n  LinkNode,\n]\n\n/** Markdown ↔ node transformers for the GFM superset. */\nexport const GFM_TRANSFORMERS: readonly Transformer[] = [\n  HEADING,\n  QUOTE,\n  // CHECK_LIST must precede the plain list transformers: `- [ ]`/`- [x]` also\n  // match `- `, so UNORDERED_LIST would otherwise swallow it as bullet text.\n  CHECK_LIST,\n  UNORDERED_LIST,\n  ORDERED_LIST,\n  CODE,\n  BOLD_ITALIC_STAR,\n  BOLD_ITALIC_UNDERSCORE,\n  BOLD_STAR,\n  BOLD_UNDERSCORE,\n  ITALIC_STAR,\n  ITALIC_UNDERSCORE,\n  STRIKETHROUGH,\n  INLINE_CODE,\n  HIGHLIGHT,\n  LINK,\n]\n"]}

package/dist/transformers/registry.d.ts

@@ -0,0 +1,9 @@
+import type { Transformer } from '@lexical/markdown';
+import type { MarkdownPlugin } from '../plugins/types.js';
+/** Stable-sort transformers into the order Lexical expects. */
+export declare function orderTransformers(transformers: readonly Transformer[]): Transformer[];
+/** Collect every plugin's transformers (de-duplicated by reference) and order
+ * them. The result is passed to `$convertTo/FromMarkdownString` and
+ * `registerMarkdownShortcuts`. */
+export declare function buildTransformers(plugins: readonly MarkdownPlugin[]): Transformer[];
+//# sourceMappingURL=registry.d.ts.map

package/dist/transformers/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/transformers/registry.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAYzD,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,SAAS,WAAW,EAAE,GAAG,WAAW,EAAE,CAWrF;AAED;;kCAEkC;AAClC,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,SAAS,cAAc,EAAE,GAAG,WAAW,EAAE,CAYnF"}

package/dist/transformers/registry.js

@@ -0,0 +1,43 @@
+// The transformer registry: flatten plugin transformer contributions into a
+// single, correctly-ordered Lexical TRANSFORMERS array. Ordering is the single
+// place markdown round-trip fidelity is governed.
+// Lexical resolves transformers in array order. Element/multiline constructs
+// must be tried before inline text matching, and longer text-format patterns
+// (e.g. `***`) before shorter (`**`, `*`) so they aren't shadowed.
+const TYPE_RANK = {
+    'multiline-element': 0,
+    element: 1,
+    'text-format': 2,
+    'text-match': 3,
+};
+/** Stable-sort transformers into the order Lexical expects. */
+export function orderTransformers(transformers) {
+    return [...transformers].sort((a, b) => {
+        const ra = TYPE_RANK[a.type] ?? 9;
+        const rb = TYPE_RANK[b.type] ?? 9;
+        if (ra !== rb)
+            return ra - rb;
+        if (a.type === 'text-format' && b.type === 'text-format') {
+            // Longer trigger (`***`) before shorter (`**`, `*`).
+            return b.tag.length - a.tag.length;
+        }
+        return 0;
+    });
+}
+/** Collect every plugin's transformers (de-duplicated by reference) and order
+ * them. The result is passed to `$convertTo/FromMarkdownString` and
+ * `registerMarkdownShortcuts`. */
+export function buildTransformers(plugins) {
+    const seen = new Set();
+    const collected = [];
+    for (const plugin of plugins) {
+        for (const transformer of plugin.transformers ?? []) {
+            if (!seen.has(transformer)) {
+                seen.add(transformer);
+                collected.push(transformer);
+            }
+        }
+    }
+    return orderTransformers(collected);
+}
+//# sourceMappingURL=registry.js.map

package/dist/transformers/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/transformers/registry.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,+EAA+E;AAC/E,kDAAkD;AAKlD,6EAA6E;AAC7E,6EAA6E;AAC7E,mEAAmE;AACnE,MAAM,SAAS,GAA2B;IACxC,mBAAmB,EAAE,CAAC;IACtB,OAAO,EAAE,CAAC;IACV,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;CAChB,CAAA;AAED,+DAA+D;AAC/D,MAAM,UAAU,iBAAiB,CAAC,YAAoC;IACpE,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACjC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACjC,IAAI,EAAE,KAAK,EAAE;YAAE,OAAO,EAAE,GAAG,EAAE,CAAA;QAC7B,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;YACzD,qDAAqD;YACrD,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAA;QACpC,CAAC;QACD,OAAO,CAAC,CAAA;IACV,CAAC,CAAC,CAAA;AACJ,CAAC;AAED;;kCAEkC;AAClC,MAAM,UAAU,iBAAiB,CAAC,OAAkC;IAClE,MAAM,IAAI,GAAG,IAAI,GAAG,EAAe,CAAA;IACnC,MAAM,SAAS,GAAkB,EAAE,CAAA;IACnC,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,KAAK,MAAM,WAAW,IAAI,MAAM,CAAC,YAAY,IAAI,EAAE,EAAE,CAAC;YACpD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;gBAC3B,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;gBACrB,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;YAC7B,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,iBAAiB,CAAC,SAAS,CAAC,CAAA;AACrC,CAAC","sourcesContent":["// The transformer registry: flatten plugin transformer contributions into a\n// single, correctly-ordered Lexical TRANSFORMERS array. Ordering is the single\n// place markdown round-trip fidelity is governed.\n\nimport type { Transformer } from '@lexical/markdown'\nimport type { MarkdownPlugin } from '../plugins/types.js'\n\n// Lexical resolves transformers in array order. Element/multiline constructs\n// must be tried before inline text matching, and longer text-format patterns\n// (e.g. `***`) before shorter (`**`, `*`) so they aren't shadowed.\nconst TYPE_RANK: Record<string, number> = {\n  'multiline-element': 0,\n  element: 1,\n  'text-format': 2,\n  'text-match': 3,\n}\n\n/** Stable-sort transformers into the order Lexical expects. */\nexport function orderTransformers(transformers: readonly Transformer[]): Transformer[] {\n  return [...transformers].sort((a, b) => {\n    const ra = TYPE_RANK[a.type] ?? 9\n    const rb = TYPE_RANK[b.type] ?? 9\n    if (ra !== rb) return ra - rb\n    if (a.type === 'text-format' && b.type === 'text-format') {\n      // Longer trigger (`***`) before shorter (`**`, `*`).\n      return b.tag.length - a.tag.length\n    }\n    return 0\n  })\n}\n\n/** Collect every plugin's transformers (de-duplicated by reference) and order\n * them. The result is passed to `$convertTo/FromMarkdownString` and\n * `registerMarkdownShortcuts`. */\nexport function buildTransformers(plugins: readonly MarkdownPlugin[]): Transformer[] {\n  const seen = new Set<Transformer>()\n  const collected: Transformer[] = []\n  for (const plugin of plugins) {\n    for (const transformer of plugin.transformers ?? []) {\n      if (!seen.has(transformer)) {\n        seen.add(transformer)\n        collected.push(transformer)\n      }\n    }\n  }\n  return orderTransformers(collected)\n}\n"]}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@llui/markdown-editor",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugins/core": {
+      "import": "./dist/plugins/core.js",
+      "types": "./dist/plugins/core.d.ts"
+    },
+    "./plugins/callout": {
+      "import": "./dist/plugins/callout.js",
+      "types": "./dist/plugins/callout.d.ts"
+    },
+    "./surfaces/toolbar": {
+      "import": "./dist/surfaces/toolbar.js",
+      "types": "./dist/surfaces/toolbar.d.ts"
+    },
+    "./styles/editor.css": "./dist/styles/editor.css"
+  },
+  "peerDependencies": {
+    "@llui/dom": "^0.9.0",
+    "@llui/lexical": "^0.1.0",
+    "@llui/components": "^0.10.0",
+    "lexical": "^0.45.0",
+    "@lexical/markdown": "^0.45.0",
+    "@lexical/rich-text": "^0.45.0",
+    "@lexical/list": "^0.45.0",
+    "@lexical/link": "^0.45.0",
+    "@lexical/table": "^0.45.0",
+    "@lexical/selection": "^0.45.0",
+    "@lexical/utils": "^0.45.0",
+    "@lexical/code-core": "^0.45.0"
+  },
+  "devDependencies": {
+    "lexical": "^0.45.0",
+    "@lexical/headless": "^0.45.0",
+    "@lexical/markdown": "^0.45.0",
+    "@lexical/rich-text": "^0.45.0",
+    "@lexical/list": "^0.45.0",
+    "@lexical/link": "^0.45.0",
+    "@lexical/table": "^0.45.0",
+    "@lexical/selection": "^0.45.0",
+    "@lexical/utils": "^0.45.0",
+    "typescript": "^6.0.0",
+    "vitest": "^4.1.2",
+    "@lexical/code-core": "^0.45.0",
+    "@llui/dom": "0.9.0",
+    "@llui/lexical": "0.1.0",
+    "@llui/components": "0.10.0"
+  },
+  "sideEffects": [
+    "./dist/styles/editor.css"
+  ],
+  "description": "WYSIWYG Markdown editor for LLui — hides Markdown behind a rich, pluggable editing widget built on Lexical",
+  "keywords": [
+    "llui",
+    "markdown",
+    "editor",
+    "wysiwyg",
+    "lexical",
+    "rich-text"
+  ],
+  "author": "Franco Ponticelli <franco.ponticelli@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fponticelli/llui.git",
+    "directory": "packages/markdown-editor"
+  },
+  "bugs": {
+    "url": "https://github.com/fponticelli/llui/issues"
+  },
+  "homepage": "https://github.com/fponticelli/llui/tree/main/packages/markdown-editor#readme",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/editor.css dist/styles/",
+    "check": "tsc --noEmit -p tsconfig.check.json",
+    "lint": "eslint src",
+    "test": "vitest run"
+  }
+}