@llui/markdown-editor 0.2.14 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llui/markdown-editor",
-  "version": "0.2.14",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,10 +33,10 @@
     "@lexical/selection": "^0.46.0",
     "@lexical/utils": "^0.46.0",
     "@lexical/code-core": "^0.46.0",
-    "@llui/dom": "^0.11.8",
-    "@llui/lexical": "^0.2.10",
-    "@llui/markdown": "^0.11.3",
-    "@llui/components": "^0.12.4"
+    "@llui/dom": "^0.12.0",
+    "@llui/markdown": "^0.12.0",
+    "@llui/lexical": "^0.3.0",
+    "@llui/components": "^0.13.0"
   },
   "devDependencies": {
     "lexical": "^0.46.0",
@@ -51,10 +51,10 @@
     "typescript": "^6.0.0",
     "vitest": "^4.1.2",
     "@lexical/code-core": "^0.46.0",
-    "@llui/dom": "0.11.8",
-    "@llui/markdown": "0.11.3",
-    "@llui/components": "0.12.4",
-    "@llui/lexical": "0.2.10"
+    "@llui/dom": "0.12.0",
+    "@llui/markdown": "0.12.0",
+    "@llui/components": "0.13.0",
+    "@llui/lexical": "0.3.0"
   },
   "sideEffects": [
     "./dist/styles/editor.css"

package/src/editor.ts

@@ -4,7 +4,14 @@
 // live editor through effects, and COMPOSES plugin UI extensions (each plugin's
 // state slice + reducer + view + effects) into the single component.
 
-import { $getRoot, $setSelection, type EditorThemeClasses, type LexicalEditor } from 'lexical'
+import {
+  $getRoot,
+  $setSelection,
+  COMMAND_PRIORITY_CRITICAL,
+  FORMAT_TEXT_COMMAND,
+  type EditorThemeClasses,
+  type LexicalEditor,
+} from 'lexical'
 import {
   $convertFromMarkdownString,
   $convertToMarkdownString,
@@ -109,13 +116,31 @@ function defaultPlugins(): MarkdownPlugin[] {
   return [corePlugin(), linkPlugin()]
 }
 
+/** Swallow the underline text-format command. `registerRichText` wires Cmd+U to
+ * FORMAT_TEXT 'underline', but the GFM markdown dialect this editor serializes
+ * has no underline representation, so an applied underline would be silently
+ * stripped on save. Intercepting at CRITICAL priority (ahead of rich-text) keeps
+ * the WYSIWYG surface and the serialized dialect in lock-step: underline can be
+ * neither applied nor lost. Returns a disposer. */
+export function blockUnderlineFormat(editor: LexicalEditor): () => void {
+  return editor.registerCommand(
+    FORMAT_TEXT_COMMAND,
+    (payload) => payload === 'underline',
+    COMMAND_PRIORITY_CRITICAL,
+  )
+}
+
 /** The per-mount `send` closure — the WeakMap key that ties a live editor to the
  * one mount it belongs to. */
 type EditorSend = (msg: EditorMsg) => void
 
-/** Per-mount live state: the Lexical editor captured by that mount's `onReady`. */
+/** Per-mount live state: the Lexical editor captured by that mount's `onReady`,
+ * plus the last markdown delivered to the consumer's `onChange` (dedup key). */
 interface MountContext {
   editor: LexicalEditor | null
+  /** Last value handed to `config.onChange` for this mount — guards against
+   * double / redundant consumer notifications. `undefined` = nothing emitted yet. */
+  lastChange: string | undefined
 }
 
 /**
@@ -148,14 +173,17 @@ export function markdownEditor(
   const contextFor = (send: EditorSend): MountContext => {
     let ctx = mountContexts.get(send)
     if (!ctx) {
-      ctx = { editor: null }
+      ctx = { editor: null, lastChange: undefined }
       mountContexts.set(send, ctx)
     }
     return ctx
   }
 
   const baseOnEffect = makeOnEffect((api) => contextFor(api.send).editor, itemsById, {
-    onChange: config.onChange,
+    // NB: consumer `onChange` is delivered DIRECTLY from the foreign onChange
+    // wrapper (see `view` below), NOT through this effect path — the dispose-time
+    // debounce flush runs after the TEA loop is disposed, and a `send` from a
+    // disposed loop is dropped, so effect-routed delivery loses the final edit.
     onFormatChange: config.onFormatChange,
     applyValue: (editor, value) =>
       editor.update(
@@ -273,6 +301,10 @@ export function markdownEditor(
         : {}),
       register: (editor) => {
         const disposers = [
+          // Keep the WYSIWYG surface and the serialized GFM dialect in lock-step:
+          // underline (Cmd+U) has no markdown representation, so it is swallowed
+          // rather than applied-then-silently-stripped on save.
+          blockUnderlineFormat(editor),
           registerMarkdownShortcuts(editor, transformers),
           // Global scheme allowlist for links: the single backstop covering the
           // link dialog, pasted/imported markdown, and the typed `[x](url)`
@@ -297,7 +329,20 @@ export function markdownEditor(
         }
         config.onReady?.(editor)
       },
-      onChange: (value) => send({ type: 'markdownChanged', value }),
+      onChange: (value) => {
+        // Deliver to the consumer DIRECTLY, independent of the TEA loop: the
+        // dispose-time debounce flush runs AFTER the component is disposed, and a
+        // `send` from a disposed loop is dropped — so routing consumer delivery
+        // through `send` would lose the last debounce window of typing on unmount.
+        // Deduped per mount so the same value isn't delivered twice.
+        if (value !== mount.lastChange) {
+          mount.lastChange = value
+          config.onChange?.(value)
+        }
+        // Mirror into TEA state (value/dirty) while the loop is alive; dropped
+        // silently after dispose, which is fine — the consumer was already told.
+        send({ type: 'markdownChanged', value })
+      },
       onSelectionChange: (ctx) => {
         const format = computeFormatState(ctx.editor, ctx)
         const text = ctx.editor.getEditorState().read(() => $getRoot().getTextContent())

package/src/effects.ts

@@ -12,7 +12,6 @@ export interface EffectApi {
 }
 
 export interface EffectConfig {
-  onChange?: (markdown: string) => void
   onFormatChange?: (format: FormatState) => void
   /** Push markdown into the live editor (deserialize), without echoing onChange. */
   applyValue: (editor: LexicalEditor, value: string) => void
@@ -41,7 +40,10 @@ export function makeOnEffect(
         return
       }
       case 'emitChange': {
-        config.onChange?.(effect.value)
+        // Consumer `onChange` delivery moved to the foreign onChange wrapper (see
+        // editor.ts) so it survives dispose — the loop is torn down before the
+        // dispose-time debounce flush runs, and a `send`-routed effect would be
+        // dropped. This effect now only signals that state changed; no side effect.
         return
       }
       case 'emitFormat': {

package/src/index.ts

@@ -7,6 +7,7 @@ export {
   type CollabHooks,
   type CollabFactory,
   markdownEditor,
+  blockUnderlineFormat,
 } from './editor.js'
 
 export {
@@ -68,18 +69,12 @@ export { tablePlugin } from './plugins/table.js'
 
 export { $insertMarkdownAtSelection, registerMarkdownPaste } from './paste.js'
 
-export { GFM_NODES, GFM_TRANSFORMERS } from './transformers/gfm.js'
+export { GFM_NODES, GFM_TRANSFORMERS, HIGHLIGHT_TRANSFORMER } from './transformers/gfm.js'
 export { buildTransformers, orderTransformers } from './transformers/registry.js'
 
 export { computeFormatState } from './format.js'
 
-export {
-  STRIKETHROUGH_CLASS,
-  UNDERLINE_CLASS,
-  UNDERLINE_STRIKETHROUGH_CLASS,
-  defaultTheme,
-  mergeTheme,
-} from './theme.js'
+export { STRIKETHROUGH_CLASS, defaultTheme, mergeTheme } from './theme.js'
 
 export {
   type ToolbarItemParts,

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
@@ -107,26 +122,71 @@ 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
@@ -134,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.
@@ -274,6 +347,7 @@ export function tablePlugin(): MarkdownPlugin {
                   ['', ''],
                   ['', ''],
                 ],
+                ['', ''],
               ),
             ),
           ),

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