@llui/markdown-editor 0.3.0 → 0.5.0

package/src/styles/block-drag.css

@@ -0,0 +1,118 @@
+/* Block drag-and-drop reordering (`blockDragPlugin`).
+ *
+ * Geometry is set inline by the plugin (measured, therefore dynamic); everything
+ * here is appearance only. Import alongside `editor.css`:
+ *   import '@llui/markdown-editor/styles/block-drag.css'
+ */
+
+[data-scope='md-block-drag'][data-part='handle'] {
+  display: flex;
+  align-items: center;
+}
+
+[data-scope='md-block-drag'][data-part='grip'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--md-muted, #9aa0a6);
+  font-size: 14px;
+  line-height: 1;
+  cursor: grab;
+  opacity: 0.7;
+}
+
+[data-scope='md-block-drag'][data-part='grip']:hover {
+  background: var(--md-hover, rgba(127, 127, 127, 0.14));
+  opacity: 1;
+}
+
+/* Keyboard users must be able to see the grip they have focused. */
+[data-scope='md-block-drag'][data-part='grip']:focus-visible {
+  outline: 2px solid var(--md-accent, #3b82f6);
+  outline-offset: 1px;
+  opacity: 1;
+}
+
+/* Grab mode is a live, invisible-by-default mode — give it a strong affordance. */
+[data-scope='md-block-drag'][data-part='grip'][data-grabbed] {
+  background: var(--md-accent, #3b82f6);
+  color: #fff;
+  cursor: grabbing;
+  opacity: 1;
+}
+
+[data-scope='md-block-drag'][data-part='indicator'] {
+  height: 2px;
+  border-radius: 1px;
+  background: var(--md-accent, #3b82f6);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-scope='md-block-drag'][data-part='grip'] {
+    transition:
+      opacity 120ms ease,
+      background-color 120ms ease;
+  }
+}
+
+/* Block-actions menu (grip click / right-click). Positioned inline by the plugin;
+ * appearance only here. */
+[data-scope='md-block-drag'][data-part='menu'] {
+  min-width: 160px;
+  padding: 4px;
+  border: 1px solid var(--md-border, rgba(127, 127, 127, 0.2));
+  border-radius: var(--md-radius, 8px);
+  background: var(--md-surface, #fff);
+  color: var(--md-text, #1f2328);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+[data-scope='md-block-drag'][data-part='menu-label'] {
+  padding: 4px 8px 2px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--md-muted, #9aa0a6);
+}
+
+[data-scope='md-block-drag'][data-part='menu-item'] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+[data-scope='md-block-drag'][data-part='menu-item']:hover,
+[data-scope='md-block-drag'][data-part='menu-item']:focus-visible {
+  background: var(--md-hover, rgba(127, 127, 127, 0.14));
+  outline: none;
+}
+
+[data-scope='md-block-drag'][data-part='menu-item']:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--md-accent, #3b82f6);
+}
+
+[data-scope='md-block-drag'][data-part='menu-sep'] {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--md-border, rgba(127, 127, 127, 0.2));
+}

package/src/styles/editor.css

@@ -345,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;
@@ -369,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;
@@ -421,6 +485,54 @@
   background: var(--md-primary-soft);
 }
 
+/* ── Document-link (wikilink) search + reference panel ────────────────── */
+[data-scope='md-wikilink'][data-part='panel'] {
+  display: flex;
+  min-width: 22rem;
+  max-width: 34rem;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 8px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+[data-scope='md-wikilink'][data-part='results'] {
+  flex: 0 0 14rem;
+  max-height: 18rem;
+  overflow: auto;
+  padding: 0.25rem;
+  border-right: 1px solid var(--md-border);
+}
+[data-scope='md-wikilink'][data-part='result'] {
+  padding: 0.4rem 0.6rem;
+  border-radius: 5px;
+  cursor: pointer;
+}
+[data-scope='md-wikilink'][data-part='result'][data-active] {
+  background: var(--md-primary-soft);
+}
+[data-scope='md-wikilink'][data-part='result-title'] {
+  font-size: 0.88rem;
+  color: var(--md-text);
+}
+[data-scope='md-wikilink'][data-part='result-snippet'] {
+  font-size: 0.78rem;
+  color: var(--md-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-scope='md-wikilink'][data-part='preview'] {
+  flex: 1 1 auto;
+  max-height: 18rem;
+  overflow: auto;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.82rem;
+  line-height: 1.5;
+  color: var(--md-text-soft, var(--md-muted));
+  white-space: pre-wrap;
+}
+
 /* ── Context menu ─────────────────────────────────────────────────────── */
 [data-scope='md-context'][data-part='backdrop'] {
   position: fixed;

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>> = [
@@ -71,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
   })
 }