@llui/markdown-editor 0.2.14 → 0.4.0

package/src/styles/editor.css

@@ -83,12 +83,6 @@
 [data-lexical-editor] .md-strikethrough {
   text-decoration: line-through;
 }
-[data-lexical-editor] .md-underline {
-  text-decoration: underline;
-}
-[data-lexical-editor] .md-underline-strikethrough {
-  text-decoration: underline line-through;
-}
 
 /* Task-list items (li[role="checkbox"]) with a clickable checkbox. */
 [data-lexical-editor] li[role='checkbox'] {
@@ -351,6 +345,40 @@
   background: var(--md-surface-2);
 }
 
+/* ── Code-block language badge ────────────────────────────────────────── */
+[data-scope='md-code-language'][data-part='bar'] {
+  padding: 0.15rem;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+[data-scope='md-code-language'][data-part='input'] {
+  font: inherit;
+  font-family: var(--md-mono);
+  font-size: 0.72rem;
+  width: 8rem;
+  padding: 0.1rem 0.3rem;
+  color: var(--md-text);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+[data-scope='md-code-language'][data-part='input']::placeholder {
+  color: var(--md-muted);
+}
+
+/* ── Wiki links ───────────────────────────────────────────────────────── */
+[data-scope='md-wikilink'][data-part='link'] {
+  color: var(--md-primary);
+  text-decoration: none;
+  border-bottom: 1px solid var(--md-primary-soft);
+  cursor: pointer;
+}
+[data-scope='md-wikilink'][data-part='link']:hover {
+  border-bottom-color: var(--md-primary);
+}
+
 /* ── Math block ───────────────────────────────────────────────────────── */
 [data-scope='md-math'][data-part='root'] {
   display: flex;
@@ -375,6 +403,36 @@
   text-align: center;
 }
 
+/* ── Frontmatter block ────────────────────────────────────────────────── */
+[data-scope='md-frontmatter'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin: 0 0 0.9rem;
+  padding: 0.6rem 0.8rem;
+  border: 1px dashed var(--md-border);
+  border-radius: 8px;
+  background: var(--md-surface-2);
+}
+[data-scope='md-frontmatter'] [data-part='source'] {
+  width: 100%;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  resize: vertical;
+  background: transparent;
+  font-family: var(--md-mono);
+  font-size: 0.82rem;
+  line-height: 1.5;
+  white-space: pre;
+  overflow-x: auto;
+  color: var(--md-muted);
+  outline: none;
+}
+[data-scope='md-frontmatter'] [data-part='source']:focus {
+  color: var(--md-text);
+}
+
 /* ── Mermaid block ────────────────────────────────────────────────────── */
 [data-scope='md-mermaid'][data-part='root'] {
   display: flex;

package/src/theme.ts

@@ -2,10 +2,19 @@
 //
 // Lexical styles most inline formats through semantic tags that carry
 // browser-default styling — bold→<strong>, italic→<em>, code→<code>. But
-// `strikethrough` (and `underline`) render as a bare <span> whose ONLY styling
-// hook is a `theme.text.<format>` class. With no theme the format is applied to
-// the model but is visually invisible. This default theme supplies those class
-// names; the bundled `styles/editor.css` gives them their `text-decoration`.
+// `strikethrough` renders as a bare <span> whose ONLY styling hook is a
+// `theme.text.strikethrough` class. With no theme the format is applied to the
+// model but is visually invisible. This default theme supplies that class name;
+// the bundled `styles/editor.css` gives it its `text-decoration`.
+//
+// `underline` is deliberately NOT themed here: the GFM markdown dialect this
+// editor serializes has no underline representation (Lexical's text-format
+// transformers require a SYMMETRIC delimiter, and there is no standard symmetric
+// underline syntax), so an applied underline would be silently stripped on save.
+// To keep the WYSIWYG surface and the serialized dialect in lock-step, the
+// underline command is also intercepted at the editor seam (see editor.ts) — so
+// underline can be neither applied nor lost. Add it back (theme + transformer +
+// command) only alongside a dialect that can round-trip it.
 //
 // Consumers can override any entry via `markdownEditor({ theme })` — the user's
 // theme is merged over this default (see `mergeTheme`).
@@ -13,22 +22,17 @@
 import type { EditorThemeClasses } from 'lexical'
 
 export const STRIKETHROUGH_CLASS = 'md-strikethrough'
-export const UNDERLINE_CLASS = 'md-underline'
-export const UNDERLINE_STRIKETHROUGH_CLASS = 'md-underline-strikethrough'
 
 /** The class hooks Lexical needs for text-decoration formats it renders as a
- * plain <span>. (`underlineStrikethrough` is Lexical's special composite key for
- * the case where both apply — both want `text-decoration`.) */
+ * plain <span>. */
 export const defaultTheme: EditorThemeClasses = {
   text: {
     strikethrough: STRIKETHROUGH_CLASS,
-    underline: UNDERLINE_CLASS,
-    underlineStrikethrough: UNDERLINE_STRIKETHROUGH_CLASS,
   },
 }
 
 /** Merge a consumer theme over the default. `text` is merged per-key so a
- * consumer overriding (say) `strikethrough` keeps the default `underline`.
+ * consumer overriding (say) `strikethrough` keeps the other default entries.
  *
  * Always returns a FRESH theme (never the shared `defaultTheme` singleton):
  * Lexical caches resolved class arrays by MUTATING the `text` object it is

package/src/transformers/code.ts

@@ -0,0 +1,174 @@
+// The fenced-code-block transformer.
+//
+// ## Why this package does not use `@lexical/markdown`'s `CODE`
+//
+// Upstream's `CODE_START_REGEX` captures the info string with `([\w-]+)?`, i.e.
+// a SINGLE word-ish token. Everything after that token stays on the line and is
+// pushed into the code block's CONTENT:
+//
+//   ```lance table      →  language 'lance',  body 'table\nsum(x)'   (corrupt)
+//   ```c++              →  language 'c',      body '++\nint main()'  (corrupt)
+//
+// That is silent data loss on perfectly ordinary markdown. CommonMark defines
+// the info string as *the rest of the line*, trimmed — so
+// {@link CODE_INFO_TRANSFORMER} captures exactly that and hands it to
+// `CodeNode.setLanguage` untouched.
+//
+// This lives in `transformers/` (not in `plugins/code-language.ts`) so that it
+// is the DEFAULT in `GFM_TRANSFORMERS` rather than an opt-in a consumer has to
+// remember to order ahead of `corePlugin()`. `codeLanguagePlugin()` contributes
+// this same object reference, so the registry's reference de-duplication
+// collapses the two contributions into one and plugin order cannot change the
+// parse. See `test/composition.test.ts`.
+//
+// ## The language is an opaque label
+//
+// The package depends on `@lexical/code-core`, not `@lexical/code`, to keep
+// Prism out of the bundle. Nothing interprets the info string — it is stored,
+// shown, edited, and re-emitted verbatim. That opacity is precisely what lets an
+// arbitrary token like `lance table` survive a round-trip.
+
+import { $createTextNode, type ElementNode, type LexicalNode } from 'lexical'
+import { $createCodeNode, $isCodeNode, CodeNode } from '@lexical/code-core'
+import type { MultilineElementTransformer } from '@lexical/markdown'
+
+/**
+ * Canonicalize a fence info string.
+ *
+ * CommonMark's info string is the remainder of the opening-fence line with the
+ * surrounding whitespace stripped; a blank one means "no language". Two
+ * characters are removed rather than preserved, because keeping them would emit
+ * markdown that no longer re-imports to the same block:
+ *
+ * - a backtick — illegal in a backtick-fenced info string (it would terminate
+ *   or corrupt the fence);
+ * - a newline — it would end the fence line entirely.
+ *
+ * Everything else survives verbatim, including spaces (`'lance table'`) and
+ * punctuation (`'c++'`, `'objective-c'`).
+ */
+export function normalizeCodeInfo(raw: string | null | undefined): string | null {
+  if (raw === null || raw === undefined) return null
+  const cleaned = raw
+    .replace(/`/g, '')
+    .replace(/[\r\n]+/g, ' ')
+    .trim()
+  return cleaned === '' ? null : cleaned
+}
+
+/** The opening fence: its backtick run, then the raw info string (rest of line). */
+const FENCE_START = /^([ \t]*`{3,})(.*)$/
+/** A closing fence of at least `length` backticks on a line of its own. */
+const fenceEndFor = (length: number): RegExp => new RegExp(`^[ \\t]*\`{${length},}[ \\t]*$`)
+
+/**
+ * The narrowest fence that can enclose `code` without being terminated early:
+ * one backtick longer than the longest fence-like run inside it.
+ */
+function fenceFor(code: string): string {
+  const runs = code.match(/`{3,}/g)
+  const longest = runs ? Math.max(...runs.map((run) => run.length)) : 0
+  return '`'.repeat(Math.max(3, longest + 1))
+}
+
+/**
+ * A self-closing opening fence (```` ```code``` ````): the closing run sits on
+ * the SAME line, so the span between the fences is CONTENT and there is no info
+ * string. Returns that content, or `null` when the line is an ordinary opening
+ * fence.
+ *
+ * Shared by BOTH directions on purpose. It used to live only in
+ * `handleImportAfterStartMatch`, so the import path and the typed-shortcut
+ * `replace` path parsed the same text two different ways: importing
+ * '```inline```' gave a language-less block containing `inline`, while TYPING it
+ * and pressing Enter gave an EMPTY block labelled 'inline' — the word was gone.
+ * The divergence was reachable because `FENCE_START`'s `(.*)$` consumes the
+ * whole line, which always satisfies the shortcut engine's `match[0].length ===
+ * matchLength` gate. (Upstream's narrower `CODE_START_REGEX` never matched this
+ * shape, so widening the capture is what introduced it.)
+ */
+function singleLineFenceContent(fence: string, rest: string): string | null {
+  const closing = rest.match(new RegExp(`\`{${fence.length},}[ \t]*$`))
+  return closing && closing.index !== undefined ? rest.slice(0, closing.index) : null
+}
+
+/** Append a code block carrying `language` and `lines` to `parent`. */
+function $appendCodeNode(
+  parent: ElementNode,
+  language: string | null,
+  lines: readonly string[],
+): void {
+  const node = $createCodeNode(language ?? undefined)
+  const code = lines.join('\n')
+  if (code !== '') node.append($createTextNode(code))
+  parent.append(node)
+}
+
+/**
+ * A drop-in replacement for `@lexical/markdown`'s `CODE` that treats the whole
+ * remainder of the opening-fence line as the info string (CommonMark's rule)
+ * instead of a single `[\w-]+` token.
+ */
+export const CODE_INFO_TRANSFORMER: MultilineElementTransformer = {
+  dependencies: [CodeNode],
+  export: (node: LexicalNode): string | null => {
+    if (!$isCodeNode(node)) return null
+    const code = node.getTextContent()
+    const fence = fenceFor(code)
+    const info = normalizeCodeInfo(node.getLanguage()) ?? ''
+    return fence + info + (code === '' ? '' : '\n' + code) + '\n' + fence
+  },
+  handleImportAfterStartMatch: ({ lines, rootNode, startLineIndex, startMatch }) => {
+    const fence = (startMatch[1] ?? '```').trim()
+    const rest = startMatch[2] ?? ''
+
+    // Single-line form (```code```) — see `singleLineFenceContent`. Matches
+    // `@lexical/markdown`, and matches CommonMark, which forbids a backtick
+    // inside the info string.
+    const inline = singleLineFenceContent(fence, rest)
+    if (inline !== null) {
+      $appendCodeNode(rootNode, null, [inline])
+      return [true, startLineIndex]
+    }
+
+    const language = normalizeCodeInfo(rest)
+    const fenceEnd = fenceEndFor(fence.length)
+    for (let i = startLineIndex + 1; i < lines.length; i++) {
+      if (fenceEnd.test(lines[i] as string)) {
+        $appendCodeNode(rootNode, language, lines.slice(startLineIndex + 1, i))
+        return [true, i]
+      }
+    }
+    // Unterminated fence: consume to the end of the document.
+    $appendCodeNode(rootNode, language, lines.slice(startLineIndex + 1))
+    return [true, lines.length - 1]
+  },
+  regExpEnd: { optional: true, regExp: /^[ \t]*`{3,}[ \t]*$/ },
+  regExpStart: FENCE_START,
+  // Import is fully handled above; `replace` serves the typed-shortcut path
+  // (`registerMarkdownShortcuts` calls it with the trailing siblings) and the
+  // paste path (`children === null`, lines supplied).
+  replace: (rootNode, children, startMatch, _endMatch, linesInBetween, isImport) => {
+    const fence = (startMatch[1] ?? '```').trim()
+    const rest = startMatch[2] ?? ''
+    // The SAME single-line rule the import path applies, so the two agree.
+    const inline = singleLineFenceContent(fence, rest)
+    if (inline !== null) {
+      const node = $createCodeNode()
+      if (inline !== '') node.append($createTextNode(inline))
+      rootNode.replace(node)
+      if (!isImport) node.select(0, 0)
+      return
+    }
+    const language = normalizeCodeInfo(rest)
+    if (!children) {
+      $appendCodeNode(rootNode, language, linesInBetween ?? [])
+      return
+    }
+    const node = $createCodeNode(language ?? undefined)
+    node.append(...children)
+    rootNode.replace(node)
+    if (!isImport) node.select(0, 0)
+  },
+  type: 'multiline-element',
+}

package/src/transformers/gfm.ts

@@ -15,7 +15,6 @@ import {
   UNORDERED_LIST,
   ORDERED_LIST,
   CHECK_LIST,
-  CODE,
   BOLD_ITALIC_STAR,
   BOLD_ITALIC_UNDERSCORE,
   BOLD_STAR,
@@ -27,6 +26,7 @@ import {
   HIGHLIGHT,
   LINK,
 } from '@lexical/markdown'
+import { CODE_INFO_TRANSFORMER } from './code.js'
 
 /** Node classes required to render the GFM superset. */
 export const GFM_NODES: ReadonlyArray<Klass<LexicalNode>> = [
@@ -39,9 +39,18 @@ export const GFM_NODES: ReadonlyArray<Klass<LexicalNode>> = [
   LinkNode,
 ]
 
+/** The `==highlight==` transformer. NOT part of the default GFM set: `==..==` is
+ * not GFM, so exporting it produces non-standard markdown other renderers won't
+ * understand. Offered as an opt-in a consumer can add to a plugin's transformers. */
+export const HIGHLIGHT_TRANSFORMER: Transformer = HIGHLIGHT
+
 /** Inline text-format transformers (no block nodes, no node registration). These
  * are the only transformers a single-block / inline-only editor needs; `LINK` is
- * kept separate since it requires `LinkNode` to be registered. */
+ * kept separate since it requires `LinkNode` to be registered.
+ *
+ * `HIGHLIGHT` is deliberately excluded: it round-trips as the non-GFM `==..==`
+ * syntax, so it would silently emit markdown outside the editor's stated dialect.
+ * Opt in with {@link HIGHLIGHT_TRANSFORMER}. */
 export const INLINE_TEXT_TRANSFORMERS: readonly Transformer[] = [
   BOLD_ITALIC_STAR,
   BOLD_ITALIC_UNDERSCORE,
@@ -51,7 +60,6 @@ export const INLINE_TEXT_TRANSFORMERS: readonly Transformer[] = [
   ITALIC_UNDERSCORE,
   STRIKETHROUGH,
   INLINE_CODE,
-  HIGHLIGHT,
 ]
 
 /** Markdown ↔ node transformers for the GFM superset. */
@@ -63,7 +71,11 @@ export const GFM_TRANSFORMERS: readonly Transformer[] = [
   CHECK_LIST,
   UNORDERED_LIST,
   ORDERED_LIST,
-  CODE,
+  // NOT `@lexical/markdown`'s `CODE`: that one captures the info string as a
+  // single `[\w-]+` token and pushes the remainder of the fence line into the
+  // code body, silently corrupting ```c++ and ```lance table. See
+  // `transformers/code.ts`.
+  CODE_INFO_TRANSFORMER,
   ...INLINE_TEXT_TRANSFORMERS,
   LINK,
 ]

package/src/transformers/registry.ts

@@ -15,6 +15,28 @@ const TYPE_RANK: Record<string, number> = {
   'text-match': 3,
 }
 
+/**
+ * Explicit ordering between transformers of the SAME rank.
+ *
+ * Within a rank Lexical falls back to array position, which for text-match
+ * transformers means `findOutermostTextMatchTransformer` breaks a tie — two
+ * transformers matching at the SAME start index — by plugin array order. That
+ * makes round-trip fidelity depend on the order a consumer happens to list
+ * plugins in, which is exactly the failure mode the registry exists to prevent.
+ *
+ * A transformer that must be consulted ahead of a same-rank peer declares a
+ * LOWER precedence here (default 0). This is a side table rather than a field on
+ * the transformer because the colliding peers include upstream's `LINK`, which
+ * this package does not own and cannot annotate.
+ */
+const precedence = new WeakMap<Transformer, number>()
+
+/** Declare that `transformer` must be consulted before same-rank peers with a
+ * higher value. Call at module scope, beside the transformer's definition. */
+export function setTransformerPrecedence(transformer: Transformer, value: number): void {
+  precedence.set(transformer, value)
+}
+
 /** Stable-sort transformers into the order Lexical expects. */
 export function orderTransformers(transformers: readonly Transformer[]): Transformer[] {
   return [...transformers].sort((a, b) => {
@@ -25,6 +47,11 @@ export function orderTransformers(transformers: readonly Transformer[]): Transfo
       // Longer trigger (`***`) before shorter (`**`, `*`).
       return b.tag.length - a.tag.length
     }
+    const pa = precedence.get(a) ?? 0
+    const pb = precedence.get(b) ?? 0
+    if (pa !== pb) return pa - pb
+    // Equal precedence: `Array.prototype.sort` is specified stable, so the
+    // plugin array order is preserved — the documented default.
     return 0
   })
 }

package/dist/__llui_deps.json

@@ -1,274 +0,0 @@
-{
-  "compilerVersion": "0.3.0",
-  "components": {},
-  "helpers": {
-    "editor#markdownEditor": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "changeDebounceMs",
-            "collab",
-            "defaultValue",
-            "namespace",
-            "onChange",
-            "onFormatChange",
-            "pasteMarkdown",
-            "placeholder",
-            "plugins",
-            "plugins.length",
-            "readonly",
-            "theme",
-            "toolbar",
-            "value"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "format#computeFormatState": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "shape": "opaque"
-        },
-        {
-          "index": 1,
-          "reads": [
-            "canRedo",
-            "canUndo"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/callout#calloutPlugin": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "defaultKind"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/emoji#emojiPlugin": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "emoji"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/image#imagePlugin": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "upload"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/link#linkPlugin": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "defaultUrl"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/math#mathPlugin": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "render"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/mention#mentionPlugin": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "source"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/mermaid#mermaidPlugin": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "render"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/overlay#overlayRoot": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "attrs",
-            "before",
-            "open",
-            "transform",
-            "x",
-            "y",
-            "zIndex"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/single-block#singleBlockPlugin": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "allowLineBreaks",
-            "formats",
-            "link"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "plugins/ui#definePluginUI": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "init",
-            "onEffect",
-            "update",
-            "view"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "state#init": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "collab",
-            "readonly",
-            "value",
-            "value.length"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "state#update": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "shape": "opaque"
-        },
-        {
-          "index": 1,
-          "reads": [
-            "charCount",
-            "connected",
-            "format",
-            "id",
-            "overlay",
-            "peers",
-            "query",
-            "readonly",
-            "synced",
-            "type",
-            "value",
-            "wordCount",
-            "x",
-            "y"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "surfaces/link-dialog#linkDialog": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "dialog",
-            "id",
-            "onDialog",
-            "url"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    },
-    "surfaces/toolbar#toolbar": {
-      "helperLocalPaths": [],
-      "kind": "view-helper",
-      "viaParams": [
-        {
-          "index": 0,
-          "reads": [
-            "aria-label",
-            "blockSelect",
-            "collab",
-            "format",
-            "glyphs",
-            "groups",
-            "items",
-            "send"
-          ],
-          "shape": "state-value"
-        }
-      ]
-    }
-  },
-  "version": 2
-}