@llui/markdown-editor 0.2.13 → 0.3.0

package/src/plugins/math.ts

@@ -11,7 +11,7 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { component, div, span, text, type Mountable, type Signal } from '@llui/dom'
+import { div, span, text, type Mountable, type Signal } from '@llui/dom'
 import type { MarkdownPlugin } from './types.js'
 import { renderedPreview, type PreviewRender } from './_preview.js'
 
@@ -25,8 +25,6 @@ function isMathData(value: unknown): value is MathData {
   return typeof value === 'object' && value !== null && typeof (value as MathData).tex === 'string'
 }
 
-type MathMsg = { type: 'commit'; tex: string }
-
 const stop = (e: Event): void => e.stopPropagation()
 
 export interface MathPluginOptions {
@@ -40,44 +38,32 @@ export interface MathPluginOptions {
 }
 
 export function mathPlugin(opts: MathPluginOptions = {}): MarkdownPlugin {
-  const bridge = decoratorBridge<MathData, MathData, MathMsg, never>(BRIDGE_TYPE, (data, api) =>
-    component<MathData, MathMsg, never>({
-      name: 'Math',
-      init: () => ({ tex: data.tex }),
-      update: (state, msg) => {
-        if (msg.type === 'commit') {
-          if (msg.tex === state.tex) return state
-          api.update({ tex: msg.tex })
-          return { tex: msg.tex }
-        }
-        return state
-      },
-      view: ({ state, send }) => {
-        const children: Mountable[] = [
-          span(
-            {
-              'data-part': 'source',
-              contenteditable: 'true',
-              role: 'textbox',
-              'aria-label': 'TeX source',
-              onKeyDown: stop,
-              onBeforeInput: stop,
-              onPaste: stop,
-              onBlur: (e: FocusEvent) =>
-                send({ type: 'commit', tex: (e.target as HTMLElement).textContent ?? '' }),
-            },
-            [text(state.at('tex') as Signal<string>)],
-          ),
-        ]
-        if (opts.render) {
-          children.push(renderedPreview(state.at('tex') as Signal<string>, opts.render, 'span'))
-        }
-        return [
-          div({ 'data-scope': 'md-math', 'data-part': 'root', contenteditable: 'false' }, children),
-        ]
-      },
-    }),
-  )
+  const bridge = decoratorBridge<MathData>(BRIDGE_TYPE, (data, api) => {
+    const children: Mountable[] = [
+      span(
+        {
+          'data-part': 'source',
+          contenteditable: 'true',
+          role: 'textbox',
+          'aria-label': 'TeX source',
+          onKeyDown: stop,
+          onBeforeInput: stop,
+          onPaste: stop,
+          onBlur: (e: FocusEvent) => {
+            const tex = (e.target as HTMLElement).textContent ?? ''
+            if (tex !== data.peek().tex) api.update({ tex })
+          },
+        },
+        [text(data.at('tex') as Signal<string>)],
+      ),
+    ]
+    if (opts.render) {
+      children.push(renderedPreview(data.at('tex') as Signal<string>, opts.render, 'span'))
+    }
+    return [
+      div({ 'data-scope': 'md-math', 'data-part': 'root', contenteditable: 'false' }, children),
+    ]
+  })
 
   const transformer: ElementTransformer = {
     dependencies: [LLuiDecoratorNode],

package/src/plugins/mermaid.ts

@@ -15,7 +15,7 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { component, div, text, type Mountable, type Signal } from '@llui/dom'
+import { div, text, type Mountable, type Signal } from '@llui/dom'
 import type { MarkdownPlugin } from './types.js'
 import { renderedPreview, type PreviewRender } from './_preview.js'
 
@@ -31,8 +31,6 @@ function isMermaidData(value: unknown): value is MermaidData {
   )
 }
 
-type MermaidMsg = { type: 'commit'; code: string }
-
 const stop = (e: Event): void => e.stopPropagation()
 
 export interface MermaidPluginOptions {
@@ -46,49 +44,32 @@ export interface MermaidPluginOptions {
 }
 
 export function mermaidPlugin(opts: MermaidPluginOptions = {}): MarkdownPlugin {
-  const bridge = decoratorBridge<MermaidData, MermaidData, MermaidMsg, never>(
-    BRIDGE_TYPE,
-    (data, api) =>
-      component<MermaidData, MermaidMsg, never>({
-        name: 'Mermaid',
-        init: () => ({ code: data.code }),
-        update: (state, msg) => {
-          if (msg.type === 'commit') {
-            if (msg.code === state.code) return state
-            api.update({ code: msg.code })
-            return { code: msg.code }
-          }
-          return state
+  const bridge = decoratorBridge<MermaidData>(BRIDGE_TYPE, (data, api) => {
+    const children: Mountable[] = [
+      div(
+        {
+          'data-part': 'source',
+          contenteditable: 'true',
+          role: 'textbox',
+          'aria-label': 'Mermaid source',
+          onKeyDown: stop,
+          onBeforeInput: stop,
+          onPaste: stop,
+          onBlur: (e: FocusEvent) => {
+            const code = (e.target as HTMLElement).textContent ?? ''
+            if (code !== data.peek().code) api.update({ code })
+          },
         },
-        view: ({ state, send }) => {
-          const children: Mountable[] = [
-            div(
-              {
-                'data-part': 'source',
-                contenteditable: 'true',
-                role: 'textbox',
-                'aria-label': 'Mermaid source',
-                onKeyDown: stop,
-                onBeforeInput: stop,
-                onPaste: stop,
-                onBlur: (e: FocusEvent) =>
-                  send({ type: 'commit', code: (e.target as HTMLElement).textContent ?? '' }),
-              },
-              [text(state.at('code') as Signal<string>)],
-            ),
-          ]
-          if (opts.render) {
-            children.push(renderedPreview(state.at('code') as Signal<string>, opts.render))
-          }
-          return [
-            div(
-              { 'data-scope': 'md-mermaid', 'data-part': 'root', contenteditable: 'false' },
-              children,
-            ),
-          ]
-        },
-      }),
-  )
+        [text(data.at('code') as Signal<string>)],
+      ),
+    ]
+    if (opts.render) {
+      children.push(renderedPreview(data.at('code') as Signal<string>, opts.render))
+    }
+    return [
+      div({ 'data-scope': 'md-mermaid', 'data-part': 'root', contenteditable: 'false' }, children),
+    ]
+  })
 
   const transformer: MultilineElementTransformer = {
     dependencies: [LLuiDecoratorNode],

package/src/plugins/table.ts

@@ -7,9 +7,10 @@
 
 import {
   $createParagraphNode,
-  $createTextNode,
   $getSelection,
   $isRangeSelection,
+  type ElementFormatType,
+  type ElementNode,
   type LexicalNode,
 } from 'lexical'
 import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
@@ -30,12 +31,26 @@ import {
   TableNode,
   TableRowNode,
 } from '@lexical/table'
-import type { MultilineElementTransformer } from '@lexical/markdown'
+import {
+  $convertFromMarkdownString,
+  LINK,
+  type MultilineElementTransformer,
+  type Transformer,
+} from '@lexical/markdown'
 import { button, text } from '@llui/dom'
 import { definePluginUI } from './ui.js'
 import { OVERLAY_Z, hideOverlay, onViewportChange, overlayRoot } from './overlay.js'
+import { INLINE_TEXT_TRANSFORMERS } from '../transformers/gfm.js'
 import type { MarkdownPlugin } from './types.js'
 
+/** Transformers used to parse/serialize a single table cell's INLINE content
+ * (bold/italic/strikethrough/inline-code and links). No block/element or
+ * multiline transformers, so a cell's markdown is always a single inline run —
+ * this is what makes bold/link cells survive an export∘import round-trip instead
+ * of being flattened to bare text. `LINK` needs `LinkNode`, which the core plugin
+ * registers (tables are used alongside it). */
+const CELL_TRANSFORMERS: readonly Transformer[] = [...INLINE_TEXT_TRANSFORMERS, LINK]
+
 interface TableToolsState {
   open: boolean
   x: number
@@ -92,38 +107,86 @@ function $runTableOp(id: string): void {
 }
 
 function splitRow(line: string): string[] {
-  return line
+  // Strip the OUTER table pipes (always unescaped delimiters), then split on
+  // unescaped `|` only — an escaped `\|` is literal cell content and must NOT
+  // split the cell (export writes `\|` for a pipe in a cell; see TABLE_TRANSFORMER
+  // export). Finally unescape `\|` → `|` so the round-trip is lossless.
+  const inner = line
     .trim()
     .replace(/^\|/, '')
-    .replace(/\|$/, '')
-    .split('|')
-    .map((c) => c.trim().replace(/\\\|/g, '|'))
+    .replace(/(?<!\\)\|$/, '')
+  return inner.split(/(?<!\\)\|/).map((c) => c.trim().replace(/\\\|/g, '|'))
 }
 
 function isSeparator(line: string | undefined): boolean {
   return !!line && /^\s*\|?[\s:|-]*-[\s:|-]*\|?\s*$/.test(line) && line.includes('-')
 }
 
+/** Is `line` a GFM table row? GFM makes the leading and trailing pipes OPTIONAL
+ * (`a | b` is as valid as `| a | b |`); the only requirement is at least one
+ * unescaped cell delimiter. The old `\|.*\|` test rejected valid pipe-less-edge
+ * rows, truncating imported tables. */
 function isRow(line: string | undefined): boolean {
-  return !!line && /^\s*\|.*\|\s*$/.test(line.trim())
+  if (line === undefined) return false
+  const trimmed = line.trim()
+  return trimmed !== '' && /(?<!\\)\|/.test(trimmed)
 }
 
-function makeCell(textValue: string, header: boolean): TableCellNode {
+/** Map a GFM separator cell (`:---`, `:---:`, `---:`, `---`) to a cell alignment. */
+function parseAlignment(separatorCell: string): ElementFormatType {
+  const t = separatorCell.trim()
+  const left = t.startsWith(':')
+  const right = t.endsWith(':')
+  if (left && right) return 'center'
+  if (right) return 'right'
+  if (left) return 'left'
+  return ''
+}
+
+/** Map a cell's alignment back to its GFM separator token. */
+function alignmentSeparator(format: ElementFormatType): string {
+  switch (format) {
+    case 'center':
+      return ':---:'
+    case 'right':
+    case 'end':
+      return '---:'
+    case 'left':
+    case 'start':
+      return ':---'
+    default:
+      return '---'
+  }
+}
+
+/** Build a cell from its inline markdown, parsing bold/italic/link/etc. through
+ * {@link CELL_TRANSFORMERS} (not a bare text node) and applying its column's
+ * alignment. */
+function makeCell(cellMarkdown: string, header: boolean, align: ElementFormatType): TableCellNode {
   const cell = $createTableCellNode(
     header ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS,
   )
-  cell.append($createParagraphNode().append($createTextNode(textValue)))
+  // Parse the cell's inline markdown into a paragraph of formatted text nodes.
+  $convertFromMarkdownString(cellMarkdown, [...CELL_TRANSFORMERS], cell)
+  // A blank cell yields no paragraph — keep the cell a well-formed single-paragraph.
+  if (cell.getChildrenSize() === 0) cell.append($createParagraphNode())
+  if (align !== '') cell.setFormat(align)
   return cell
 }
 
-function buildTable(header: string[], body: string[][]): TableNode {
+function buildTable(
+  header: string[],
+  body: string[][],
+  aligns: readonly ElementFormatType[],
+): TableNode {
   const table = $createTableNode()
   const headerRow = $createTableRowNode()
-  for (const h of header) headerRow.append(makeCell(h, true))
+  header.forEach((h, i) => headerRow.append(makeCell(h, true, aligns[i] ?? '')))
   table.append(headerRow)
   for (const row of body) {
     const tr = $createTableRowNode()
-    for (let i = 0; i < header.length; i++) tr.append(makeCell(row[i] ?? '', false))
+    for (let i = 0; i < header.length; i++)
+      tr.append(makeCell(row[i] ?? '', false, aligns[i] ?? ''))
     table.append(tr)
   }
   return table
@@ -131,29 +194,42 @@ function buildTable(header: string[], body: string[][]): TableNode {
 
 const TABLE_TRANSFORMER: MultilineElementTransformer = {
   dependencies: [TableNode, TableRowNode, TableCellNode],
-  export: (node: LexicalNode): string | null => {
+  export: (node: LexicalNode, traverseChildren: (node: ElementNode) => string): string | null => {
     if (!$isTableNode(node)) return null
     const rows = node.getChildren() as TableRowNode[]
     if (rows.length === 0) return null
     const lines: string[] = []
     rows.forEach((row, ri) => {
       const cells = row.getChildren() as TableCellNode[]
-      const texts = cells.map((c) => c.getTextContent().replace(/\|/g, '\\|').replace(/\n/g, ' '))
+      // Serialize each cell's INLINE content through the full transformer set
+      // (so bold/italic/links survive), then escape `|` and flatten newlines so
+      // the cell can't break the row.
+      const texts = cells.map((c) =>
+        traverseChildren(c).replace(/\|/g, '\\|').replace(/\r?\n/g, ' ').trim(),
+      )
       lines.push('| ' + texts.join(' | ') + ' |')
-      if (ri === 0) lines.push('| ' + texts.map(() => '---').join(' | ') + ' |')
+      if (ri === 0) {
+        // Reconstruct the alignment row from the header cells' alignments.
+        const seps = cells.map((c) => alignmentSeparator(c.getFormatType()))
+        lines.push('| ' + seps.join(' | ') + ' |')
+      }
     })
     return lines.join('\n')
   },
-  regExpStart: /^\s*\|(.+)\|\s*$/,
+  // Leading/trailing pipes are optional in GFM; require only one internal pipe.
+  // A false positive is harmless — the header is only accepted when the NEXT line
+  // is a delimiter row (checked below).
+  regExpStart: /^\s*\|?.*(?<!\\)\|.*\|?\s*$/,
   handleImportAfterStartMatch: ({ lines, rootNode, startLineIndex }) => {
     if (!isSeparator(lines[startLineIndex + 1])) return null // header must be followed by a separator
+    const aligns = splitRow(lines[startLineIndex + 1]!).map(parseAlignment)
     let end = startLineIndex + 2
     const body: string[][] = []
     while (end < lines.length && isRow(lines[end]) && !isSeparator(lines[end])) {
       body.push(splitRow(lines[end]!))
       end++
     }
-    rootNode.append(buildTable(splitRow(lines[startLineIndex]!), body))
+    rootNode.append(buildTable(splitRow(lines[startLineIndex]!), body, aligns))
     return [true, end - 1]
   },
   // Import is handled manually above; a multiline transformer still needs replace.
@@ -271,6 +347,7 @@ export function tablePlugin(): MarkdownPlugin {
                   ['', ''],
                   ['', ''],
                 ],
+                ['', ''],
               ),
             ),
           ),

package/src/security.ts

@@ -0,0 +1,89 @@
+// URL-scheme policy for the editor.
+//
+// The read-only renderer (`@llui/markdown`) already refuses dangerous link/image
+// schemes (`javascript:`, `vbscript:`, `data:text/html`, …) via `sanitizeUrl`.
+// The EDITOR has additional ingress points that must enforce the SAME policy or
+// an attacker-authored document becomes live/clickable inside it:
+//
+//   1. link commit           — `$toggleLink` on a raw, user-typed URL,
+//   2. image src             — an `![alt](src)` inserted or imported,
+//   3. markdown paste/import — `$convertFromMarkdownString` builds real
+//      `LinkNode`s (and image decorator nodes) from untrusted text,
+//   4. the typed `[x](url)`  markdown shortcut — builds a `LinkNode` live.
+//
+// Links are additionally guarded by a global `LinkNode` node transform
+// ({@link registerLinkSanitizer}) so #1/#3/#4 all funnel through one enforcement
+// point. Rather than hand-roll (and drift from) a second allowlist, this module
+// reuses `@llui/markdown`'s exact `sanitizeUrl` and only differs in the
+// allowed-scheme SET per surface — which is data, not a divergent implementation.
+
+import { sanitizeUrl, defaultAllowedProtocols } from '@llui/markdown/security'
+import { $isLinkNode, LinkNode } from '@lexical/link'
+import { $isElementNode, type LexicalEditor, type LexicalNode } from 'lexical'
+
+/** Schemes allowed for a hyperlink href. A click navigates, so this is the strict
+ * set — identical to the renderer's default (`http`/`https`/`mailto`/`tel`). */
+export const LINK_PROTOCOLS: readonly string[] = defaultAllowedProtocols
+
+/** Schemes allowed for an image `src`. Adds `data:` on top of the link set: a
+ * base64 image never executes when loaded through `<img>` (unlike a `data:`
+ * hyperlink, which can carry `text/html`), and inline data images are a
+ * first-class editor feature (paste / upload). */
+export const IMAGE_PROTOCOLS: readonly string[] = [...defaultAllowedProtocols, 'data']
+
+/** Sanitize a hyperlink href. Returns the safe URL, or `null` when the scheme is
+ * not on {@link LINK_PROTOCOLS} (the link must then be dropped/unwrapped). */
+export function sanitizeLinkUrl(url: string): string | null {
+  return sanitizeUrl(url, LINK_PROTOCOLS)
+}
+
+/** Sanitize an image `src`. Returns the safe URL, or `null` when the scheme is
+ * not on {@link IMAGE_PROTOCOLS} (the image must then be dropped). */
+export function sanitizeImageUrl(url: string): string | null {
+  return sanitizeUrl(url, IMAGE_PROTOCOLS)
+}
+
+/** Neutralize one `LinkNode` in place (must run inside `editor.update`): rewrite a
+ * merely-normalized href, or — when the scheme is disallowed — UNWRAP the link so
+ * its visible text survives but the clickable `javascript:`/`data:` payload is
+ * gone. Returns true if the node was unwrapped/removed. */
+function neutralizeLink(node: LinkNode): boolean {
+  const url = node.getURL()
+  const safe = sanitizeLinkUrl(url)
+  if (safe === null) {
+    for (const child of node.getChildren()) node.insertBefore(child)
+    node.remove()
+    return true
+  }
+  if (safe !== url) node.setURL(safe)
+  return false
+}
+
+/** Walk `node` (depth-first) neutralizing every unsafe `LinkNode` beneath it. Must
+ * run inside an `editor.update`. Use right after importing untrusted markdown
+ * (e.g. paste) into a detached scratch tree, before it reaches the live document. */
+export function $sanitizeLinkNodes(node: LexicalNode): void {
+  if ($isLinkNode(node)) {
+    // Snapshot children first: unwrapping lifts them out of the (removed) link,
+    // so recurse the snapshot to catch a defensively-nested inner link either way.
+    const children = node.getChildren()
+    neutralizeLink(node)
+    for (const child of children) $sanitizeLinkNodes(child)
+    return
+  }
+  if ($isElementNode(node)) {
+    for (const child of node.getChildren()) $sanitizeLinkNodes(child)
+  }
+}
+
+/** Register a global `LinkNode` transform that keeps every link's href on the
+ * allowlist — the single choke point covering the link dialog, pasted/imported
+ * markdown, AND the typed `[text](url)` shortcut. Returns a disposer. A no-op when
+ * `LinkNode` isn't registered on the editor (no links are possible then, e.g. the
+ * single-block preset), since `registerNodeTransform` requires a registered node. */
+export function registerLinkSanitizer(editor: LexicalEditor): () => void {
+  if (!editor.hasNodes([LinkNode])) return () => {}
+  return editor.registerNodeTransform(LinkNode, (node) => {
+    neutralizeLink(node)
+  })
+}

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'] {

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/gfm.ts

@@ -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. */