@llui/markdown-editor 0.2.14 → 0.4.0

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,
@@ -76,10 +83,23 @@ export interface EditorConfig {
 }
 
 /** Disposer-returning binding the collab layer installs on the live editor.
- * `@llui/lexical-collab`'s `YjsCollab` satisfies this structurally, so
- * `@llui/markdown-editor` needs no Yjs dependency of its own. */
+ * `@llui/lexical-collab`'s `YjsCollab` and `@llui/lexical-loro`'s `LoroCollab`
+ * both satisfy this structurally, so `@llui/markdown-editor` needs neither a Yjs
+ * nor a Loro dependency of its own. */
 export interface CollabBinding {
   register: (editor: LexicalEditor) => () => void
+  /**
+   * A CRDT-aware undo owner, if the binding provides one SEPARATELY from
+   * `register`. When present it is handed to `lexicalForeign({ externalUndo })`,
+   * which forces the built-in `@lexical/history` stack off so the two can never
+   * both be live — this is what gives collab mode real, peer-scoped undo.
+   *
+   * Optional because not every binding splits undo out this way: `yjsCollab`
+   * installs its own undo commands INSIDE `register`, so it leaves this unset and
+   * still owns undo. A binding that sets neither would leave the editor with no
+   * undo at all — see `@llui/lexical-loro`, which sets this.
+   */
+  externalUndo?: (editor: LexicalEditor) => () => void
 }
 
 /** Hooks the editor injects into the {@link CollabFactory}: a markdown `seed`
@@ -109,13 +129,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 +186,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(
@@ -263,8 +304,18 @@ export function markdownEditor(
       },
       // In collab mode the shared CRDT owns the document: the local undo stack
       // and the boot-time seed are disabled — the binding supplies a scoped undo
-      // manager and a sync-gated bootstrap instead.
-      ...(collabBinding ? { history: false, seedMode: 'deferred' as const } : {}),
+      // manager and a sync-gated bootstrap instead. A binding that owns undo via
+      // a SEPARATE `externalUndo` (Loro) has it wired here; one that owns undo
+      // inside its own `register` (Yjs) leaves the field unset. Either way the
+      // built-in history is off, so a binding that forgot both would show as "no
+      // undo" rather than fighting a local stack.
+      ...(collabBinding
+        ? {
+            history: false as const,
+            seedMode: 'deferred' as const,
+            ...(collabBinding.externalUndo ? { externalUndo: collabBinding.externalUndo } : {}),
+          }
+        : {}),
       defaultValue: collabBinding || config.value ? undefined : (config.defaultValue ?? ''),
       ...(config.value && !collabBinding ? { value: config.value } : {}),
       readonly: state.at('readonly'),
@@ -273,6 +324,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 +352,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 {
@@ -56,6 +57,17 @@ export {
   $insertCallout,
 } from './plugins/callout.js'
 export { hrPlugin, $insertHorizontalRule } from './plugins/hr.js'
+export {
+  type FrontmatterData,
+  type FrontmatterPluginOptions,
+  FRONTMATTER_BRIDGE_TYPE,
+  FRONTMATTER_TRANSFORMER,
+  frontmatterPlugin,
+  serializeFrontmatter,
+  splitFrontmatter,
+  $getFrontmatter,
+  $setFrontmatter,
+} from './plugins/frontmatter.js'
 export { slashPlugin } from './plugins/slash.js'
 export { contextMenuPlugin } from './plugins/context-menu.js'
 export { floatingToolbarPlugin } from './plugins/floating-toolbar.js'
@@ -65,21 +77,61 @@ export { type Mention, type MentionPluginOptions, mentionPlugin } from './plugin
 export { type EmojiPluginOptions, DEFAULT_EMOJI, emojiPlugin } from './plugins/emoji.js'
 export { type ImagePluginOptions, imagePlugin } from './plugins/image.js'
 export { tablePlugin } from './plugins/table.js'
+export {
+  type CodeLanguagePluginOptions,
+  type CodeLanguageState,
+  type CodeLanguageMsg,
+  type CodeLanguageEffect,
+  CODE_LANGUAGE_PLUGIN,
+  codeLanguagePlugin,
+} from './plugins/code-language.js'
+export {
+  type WikiLink,
+  type WikiLinkPluginOptions,
+  type SerializedWikiLinkNode,
+  WikiLinkNode,
+  $createWikiLinkNode,
+  $isWikiLinkNode,
+  parseWikiLinkInner,
+  formatWikiLink,
+  // The representability guards that make `formatWikiLink` the true inverse of
+  // `parseWikiLinkInner`; exported so a host resolving/creating targets can
+  // apply the same normalization before it hands one to `$createWikiLinkNode`.
+  sanitizeWikiLinkTarget,
+  sanitizeWikiLinkAlias,
+  wikilinkPlugin,
+} from './plugins/wikilink.js'
+export {
+  type BlockDragOptions,
+  type BlockRect,
+  type DropTarget,
+  type IndicatorRect,
+  type Place,
+  BLOCK_DRAG_Z,
+  blockAtPoint,
+  findDropTarget,
+  indicatorRect,
+  blockDragPlugin,
+} from './plugins/block-drag.js'
 
 export { $insertMarkdownAtSelection, registerMarkdownPaste } from './paste.js'
 
-export { GFM_NODES, GFM_TRANSFORMERS } from './transformers/gfm.js'
-export { buildTransformers, orderTransformers } from './transformers/registry.js'
+export { GFM_NODES, GFM_TRANSFORMERS, HIGHLIGHT_TRANSFORMER } from './transformers/gfm.js'
+// The CommonMark-correct fenced-code transformer. Already part of
+// `GFM_TRANSFORMERS`; exported for consumers assembling a transformer set by hand.
+export { CODE_INFO_TRANSFORMER, normalizeCodeInfo } from './transformers/code.js'
+// `setTransformerPrecedence` breaks ties between SAME-rank transformers, so a
+// collision (e.g. wikilink vs upstream LINK, which both match at the same index)
+// is resolved structurally instead of by the order a consumer lists plugins in.
+export {
+  buildTransformers,
+  orderTransformers,
+  setTransformerPrecedence,
+} 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,