@llui/markdown-editor 0.2.13 → 0.3.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,
@@ -20,6 +27,7 @@ import {
 import { corePlugin } from './plugins/core.js'
 import { linkPlugin } from './plugins/link.js'
 import { registerMarkdownPaste } from './paste.js'
+import { registerLinkSanitizer } from './security.js'
 import { toolbar as renderToolbar } from './surfaces/toolbar.js'
 import type { CommandItem, MarkdownPlugin } from './plugins/types.js'
 import type { PluginUI } from './plugins/ui.js'
@@ -108,6 +116,33 @@ 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`,
+ * 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
+}
+
 /**
  * Build the markdown editor component. Embed it with `mountApp(el, markdownEditor(...))`
  * or compose it inside a larger component.
@@ -128,12 +163,27 @@ export function markdownEditor(
     .map((p) => ({ name: p.name, ui: p.ui }))
   const pluginUIByName = new Map(pluginUIs.map((p) => [p.name, p.ui]))
 
-  // The live editor, captured at mount; effects dispatch through it.
-  let editorRef: LexicalEditor | null = null
-  const getEditor = (): LexicalEditor | null => editorRef
+  // Per-MOUNT live-editor context, keyed by the mount's stable `send` closure —
+  // the SAME object the runtime hands to both `view` and `onEffect`. A single
+  // definition can be mounted more than once (or re-mounted); each mount gets its
+  // own editor reference here, so effects and plugin handlers dispatch to their
+  // own editor and unmount clears only that mount's reference (no cross-wiring,
+  // no leaked disposed editor). Entries are collected with their `send` key.
+  const mountContexts = new WeakMap<EditorSend, MountContext>()
+  const contextFor = (send: EditorSend): MountContext => {
+    let ctx = mountContexts.get(send)
+    if (!ctx) {
+      ctx = { editor: null, lastChange: undefined }
+      mountContexts.set(send, ctx)
+    }
+    return ctx
+  }
 
-  const baseOnEffect = makeOnEffect(getEditor, itemsById, {
-    onChange: config.onChange,
+  const baseOnEffect = makeOnEffect((api) => contextFor(api.send).editor, itemsById, {
+    // 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(
@@ -192,9 +242,10 @@ export function markdownEditor(
     api: { send: (msg: EditorMsg) => void; state: Signal<EditorState> },
   ): void => {
     if (effect.type === 'pluginEffect') {
+      const mount = contextFor(api.send)
       const ui = pluginUIByName.get(effect.name)
       ui?.onEffect?.(effect.effect, {
-        editor: getEditor,
+        editor: () => mount.editor,
         send: (msg) => api.send({ type: 'plugin', name: effect.name, msg }),
         emit: (msg) => api.send(msg as EditorMsg),
       })
@@ -210,6 +261,10 @@ export function markdownEditor(
     state: Signal<EditorState>
     send: (msg: EditorMsg) => void
   }): Renderable => {
+    // This mount's live-editor slot (keyed by this mount's `send`). `onReady`
+    // fills it; effects/plugins read it through `contextFor(api.send)`.
+    const mount = contextFor(send)
+
     // Build the collab binding (once, at mount) from the consumer's factory,
     // injecting the markdown seed + status sinks that mirror into `state.collab`.
     const collabBinding: CollabBinding | null = config.collab
@@ -245,23 +300,49 @@ export function markdownEditor(
         ? { changeDebounceMs: config.changeDebounceMs }
         : {}),
       register: (editor) => {
-        const disposers = [registerMarkdownShortcuts(editor, transformers)]
+        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)`
+          // shortcut. Image src is enforced in the image transformer.
+          registerLinkSanitizer(editor),
+        ]
         if (config.pasteMarkdown !== false)
           disposers.push(registerMarkdownPaste(editor, transformers))
         if (decorators.length > 0) disposers.push(registerDecoratorBridges(editor, decorators))
         if (collabBinding) disposers.push(collabBinding.register(editor))
         return () => {
           for (const dispose of disposers) dispose()
+          // Release this mount's editor reference so a disposed editor never
+          // leaks and stale effects can't reach a torn-down editor.
+          mount.editor = null
         }
       },
       onReady: (editor) => {
-        editorRef = editor
+        mount.editor = editor
         if (config.placeholder) {
           editor.getRootElement()?.setAttribute('data-placeholder', config.placeholder)
         }
         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())
@@ -278,7 +359,7 @@ export function markdownEditor(
       const rendered = ui.view({
         state: state.at(`plugins.${name}`),
         send: (msg) => send({ type: 'plugin', name, msg }),
-        editor: getEditor,
+        editor: () => mount.editor,
       })
       return Array.isArray(rendered) ? rendered : [rendered]
     })

package/src/effects.ts

@@ -12,34 +12,38 @@ 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
 }
 
-/** Build the component's `onEffect`. `getEditor` returns the live editor (set at
- * mount via the foreign `onReady`); `items` is the merged id → command map. */
+/** Build the component's `onEffect`. `resolveEditor` maps the per-mount effect
+ * `api` (whose `send` identifies the mount) to that mount's live editor — so two
+ * mounts of one definition dispatch to their own editors; `items` is the merged
+ * id → command map. */
 export function makeOnEffect(
-  getEditor: () => LexicalEditor | null,
+  resolveEditor: (api: EffectApi) => LexicalEditor | null,
   items: ReadonlyMap<string, CommandItem>,
   config: EffectConfig,
 ): (effect: EditorEffect, api: EffectApi) => void {
   return (effect, api) => {
     switch (effect.type) {
       case 'execCommand': {
-        const editor = getEditor()
+        const editor = resolveEditor(api)
         const item = items.get(effect.id)
         if (editor && item) item.run(editor, { send: api.send })
         return
       }
       case 'applyValue': {
-        const editor = getEditor()
+        const editor = resolveEditor(api)
         if (editor) config.applyValue(editor, effect.value)
         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/paste.ts

@@ -17,6 +17,7 @@ import {
   type LexicalEditor,
 } from 'lexical'
 import { $convertFromMarkdownString, type Transformer } from '@lexical/markdown'
+import { $sanitizeLinkNodes } from './security.js'
 
 /**
  * Parse `markdown` with `transformers` and insert the produced nodes at the
@@ -40,6 +41,10 @@ export function $insertMarkdownAtSelection(
   // touches the scratch node, not the live document.
   const scratch = $createParagraphNode()
   $convertFromMarkdownString(markdown, transformers, scratch)
+  // Untrusted source: neutralize any `javascript:`/`data:` link the markdown
+  // carried BEFORE the nodes are spliced into the live document. (Image src is
+  // enforced in the image transformer; links go through here.)
+  $sanitizeLinkNodes(scratch)
   const nodes = scratch.getChildren()
   if (nodes.length === 0) return false
 

package/src/plugins/callout.ts

@@ -12,7 +12,7 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { button, component, div, span, text, type Signal } from '@llui/dom'
+import { button, div, span, text, type Signal } from '@llui/dom'
 import type { MarkdownPlugin } from './types.js'
 
 export type CalloutKind = 'note' | 'tip' | 'warning' | 'danger'
@@ -46,71 +46,56 @@ function isCalloutData(value: unknown): value is CalloutData {
   )
 }
 
-type CalloutMsg = { type: 'cycle' } | { type: 'commitText'; text: string }
-
 // Keep keyboard/input/paste events from bubbling to the outer Lexical editor so
 // the nested editable text island edits natively without Lexical intercepting.
 const stop = (e: Event): void => e.stopPropagation()
 
 /** The LLui sub-view rendered inside a callout DecoratorNode. The badge cycles
  * the kind; the text is an editable island that persists into the Lexical node
- * on blur (both round-trip to markdown). */
-const calloutBridge = decoratorBridge<CalloutData, CalloutData, CalloutMsg, never>(
-  BRIDGE_TYPE,
-  (data, api) =>
-    component<CalloutData, CalloutMsg, never>({
-      name: 'Callout',
-      init: () => ({ kind: data.kind, text: data.text }),
-      update: (state, msg) => {
-        if (msg.type === 'cycle') {
-          const kind = nextKind(state.kind)
-          api.update({ kind, text: state.text })
-          return { ...state, kind }
-        }
-        if (msg.type === 'commitText') {
-          if (msg.text === state.text) return state
-          api.update({ kind: state.kind, text: msg.text })
-          return { ...state, text: msg.text }
-        }
-        return state
-      },
-      view: ({ state, send }) => [
-        div(
-          {
-            'data-scope': 'md-callout',
-            'data-part': 'root',
-            'data-kind': state.at('kind') as Signal<string>,
-            contenteditable: 'false',
-            onKeyDown: stop,
-            onBeforeInput: stop,
-            onPaste: stop,
+ * on blur (both round-trip to markdown). `data` is a reactive signal fed by the
+ * bridge, so a data commit updates the view IN PLACE — the editable island keeps
+ * its focus/caret instead of the whole sub-app remounting. */
+const calloutBridge = decoratorBridge<CalloutData>(BRIDGE_TYPE, (data, api) => [
+  div(
+    {
+      'data-scope': 'md-callout',
+      'data-part': 'root',
+      'data-kind': data.at('kind') as Signal<string>,
+      contenteditable: 'false',
+      onKeyDown: stop,
+      onBeforeInput: stop,
+      onPaste: stop,
+    },
+    [
+      button(
+        {
+          type: 'button',
+          'data-part': 'badge',
+          'aria-label': 'Change callout kind',
+          onClick: () => {
+            const cur = data.peek()
+            api.update({ kind: nextKind(cur.kind), text: cur.text })
+          },
+        },
+        [text(data.at('kind').map((k) => KIND_LABEL[k]))],
+      ),
+      span(
+        {
+          'data-part': 'text',
+          contenteditable: 'true',
+          role: 'textbox',
+          'aria-label': 'Callout text',
+          onBlur: (e: FocusEvent) => {
+            const cur = data.peek()
+            const value = (e.target as HTMLElement).textContent ?? ''
+            if (value !== cur.text) api.update({ kind: cur.kind, text: value })
           },
-          [
-            button(
-              {
-                type: 'button',
-                'data-part': 'badge',
-                'aria-label': 'Change callout kind',
-                onClick: () => send({ type: 'cycle' }),
-              },
-              [text(state.at('kind').map((k) => KIND_LABEL[k]))],
-            ),
-            span(
-              {
-                'data-part': 'text',
-                contenteditable: 'true',
-                role: 'textbox',
-                'aria-label': 'Callout text',
-                onBlur: (e: FocusEvent) =>
-                  send({ type: 'commitText', text: (e.target as HTMLElement).textContent ?? '' }),
-              },
-              [text(state.at('text') as Signal<string>)],
-            ),
-          ],
-        ),
-      ],
-    }),
-)
+        },
+        [text(data.at('text') as Signal<string>)],
+      ),
+    ],
+  ),
+])
 
 /** `:::kind text` element transformer (single-line admonition). */
 const CALLOUT_TRANSFORMER: ElementTransformer = {

package/src/plugins/hr.ts

@@ -10,24 +10,14 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { component, hr } from '@llui/dom'
+import { hr } from '@llui/dom'
 import type { MarkdownPlugin } from './types.js'
 
 const BRIDGE_TYPE = 'hr'
 
-const hrBridge = decoratorBridge<
-  Record<string, never>,
-  Record<string, never>,
-  { type: 'noop' },
-  never
->(BRIDGE_TYPE, () =>
-  component<Record<string, never>, { type: 'noop' }, never>({
-    name: 'HorizontalRule',
-    init: () => ({}),
-    update: (state) => state,
-    view: () => [hr({ 'data-md-hr': '', contenteditable: 'false' })],
-  }),
-)
+const hrBridge = decoratorBridge<Record<string, never>>(BRIDGE_TYPE, () => [
+  hr({ 'data-md-hr': '', contenteditable: 'false' }),
+])
 
 const HR_TRANSFORMER: ElementTransformer = {
   dependencies: [LLuiDecoratorNode],

package/src/plugins/image.ts

@@ -8,6 +8,7 @@ import {
   $setSelection,
   type BaseSelection,
   type ElementNode,
+  type LexicalEditor,
   type LexicalNode,
 } from 'lexical'
 import { $insertNodeToNearestRoot } from '@lexical/utils'
@@ -18,12 +19,13 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { button, component, div, img, input, text, type Signal } from '@llui/dom'
+import { button, div, img, input, text, type Signal } from '@llui/dom'
 import {
   connect as connectDialog,
   overlay as overlayDialog,
   type DialogMsg,
 } from '@llui/components/dialog'
+import { sanitizeImageUrl } from '../security.js'
 import { definePluginUI } from './ui.js'
 import type { MarkdownPlugin } from './types.js'
 
@@ -43,20 +45,11 @@ function isImageData(value: unknown): value is ImageData {
   )
 }
 
-const imageBridge = decoratorBridge<ImageData, ImageData, { type: 'noop' }, never>(
-  BRIDGE_TYPE,
-  (data) =>
-    component<ImageData, { type: 'noop' }, never>({
-      name: 'Image',
-      init: () => ({ src: data.src, alt: data.alt }),
-      update: (state) => state,
-      view: ({ state }) => [
-        div({ 'data-scope': 'md-image', 'data-part': 'root', contenteditable: 'false' }, [
-          img({ src: state.at('src') as Signal<string>, alt: state.at('alt') as Signal<string> }),
-        ]),
-      ],
-    }),
-)
+const imageBridge = decoratorBridge<ImageData>(BRIDGE_TYPE, (data) => [
+  div({ 'data-scope': 'md-image', 'data-part': 'root', contenteditable: 'false' }, [
+    img({ src: data.at('src') as Signal<string>, alt: data.at('alt') as Signal<string> }),
+  ]),
+])
 
 const IMAGE_TRANSFORMER: ElementTransformer = {
   dependencies: [LLuiDecoratorNode],
@@ -67,9 +60,12 @@ const IMAGE_TRANSFORMER: ElementTransformer = {
   },
   regExp: /^!\[([^\]]*)\]\(([^)]+)\)$/,
   replace: (parentNode: ElementNode, _children, match): void => {
-    parentNode.replace(
-      $createLLuiDecoratorNode(BRIDGE_TYPE, { alt: match[1] ?? '', src: match[2] ?? '' }),
-    )
+    // Enforce the image-src allowlist on import/paste: a disallowed scheme
+    // (e.g. `javascript:`) sanitizes to null → drop the image entirely rather
+    // than materialize a decorator node bound to an unsafe src.
+    const src = sanitizeImageUrl(match[2] ?? '')
+    if (src === null) return
+    parentNode.replace($createLLuiDecoratorNode(BRIDGE_TYPE, { alt: match[1] ?? '', src }))
   },
   type: 'element',
 }
@@ -112,7 +108,9 @@ export interface ImagePluginOptions {
 }
 
 export function imagePlugin(opts: ImagePluginOptions = {}): MarkdownPlugin {
-  let savedSelection: BaseSelection | null = null
+  // Keyed by the per-mount editor so two mounts never cross-wire the selection
+  // saved while the insert dialog is open.
+  const savedSelection = new WeakMap<LexicalEditor, BaseSelection | null>()
 
   return {
     name: 'image',
@@ -217,20 +215,25 @@ export function imagePlugin(opts: ImagePluginOptions = {}): MarkdownPlugin {
         const editor = ctx.editor()
         if (!editor) return
         if (effect.type === 'begin') {
-          savedSelection = editor.getEditorState().read(() => {
-            const selection = $getSelection()
-            return selection ? selection.clone() : null
-          })
+          savedSelection.set(
+            editor,
+            editor.getEditorState().read(() => {
+              const selection = $getSelection()
+              return selection ? selection.clone() : null
+            }),
+          )
           return
         }
-        if (effect.src.trim() === '') return
+        // Enforce the image-src allowlist at insert: a disallowed scheme drops
+        // the insertion rather than binding the decorator to an unsafe src.
+        const src = sanitizeImageUrl(effect.src.trim())
+        if (src === null) return
+        const saved = savedSelection.get(editor) ?? null
         editor.update(() => {
-          if (savedSelection) $setSelection(savedSelection.clone())
-          $insertNodeToNearestRoot(
-            $createLLuiDecoratorNode(BRIDGE_TYPE, { src: effect.src.trim(), alt: effect.alt }),
-          )
+          if (saved) $setSelection(saved.clone())
+          $insertNodeToNearestRoot($createLLuiDecoratorNode(BRIDGE_TYPE, { src, alt: effect.alt }))
         })
-        savedSelection = null
+        savedSelection.delete(editor)
       },
     }),
   }

package/src/plugins/link.ts

@@ -14,6 +14,7 @@ import { $findMatchingParent } from '@lexical/utils'
 import { $isLinkNode, $toggleLink } from '@lexical/link'
 import type { DialogMsg, DialogState } from '@llui/components/dialog'
 import { linkDialog } from '../surfaces/link-dialog.js'
+import { sanitizeLinkUrl } from '../security.js'
 import { definePluginUI } from './ui.js'
 import type { CommandItem, MarkdownPlugin } from './types.js'
 
@@ -66,8 +67,9 @@ export interface LinkPluginOptions {
 
 export function linkPlugin(opts: LinkPluginOptions = {}): MarkdownPlugin {
   // Selection saved when the dialog opens (the modal steals focus/selection),
-  // restored on commit. Encapsulated in the plugin instance — not the core editor.
-  let savedSelection: BaseSelection | null = null
+  // restored on commit. Keyed by the per-mount editor so two mounts of the same
+  // plugin instance never cross-wire their saved selection.
+  const savedSelection = new WeakMap<LexicalEditor, BaseSelection | null>()
 
   const item: CommandItem = {
     id: 'link',
@@ -114,19 +116,27 @@ export function linkPlugin(opts: LinkPluginOptions = {}): MarkdownPlugin {
         const editor = ctx.editor()
         if (!editor) return
         if (effect.type === 'begin') {
-          savedSelection = editor.getEditorState().read(() => {
-            const selection = $getSelection()
-            return selection ? selection.clone() : null
-          })
+          savedSelection.set(
+            editor,
+            editor.getEditorState().read(() => {
+              const selection = $getSelection()
+              return selection ? selection.clone() : null
+            }),
+          )
           ctx.send({ type: 'show', url: readLinkUrl(editor) })
           return
         }
-        const url = effect.url.trim()
+        // Enforce the URL-scheme allowlist at commit: a `javascript:`/`data:`
+        // href sanitizes to null → no link is created (unlink). The global
+        // LinkNode transform is the backstop, but blocking here avoids ever
+        // materializing the unsafe link.
+        const safe = sanitizeLinkUrl(effect.url.trim())
+        const saved = savedSelection.get(editor) ?? null
         editor.update(() => {
-          if (savedSelection) $setSelection(savedSelection.clone())
-          $toggleLink(url === '' ? null : url)
+          if (saved) $setSelection(saved.clone())
+          $toggleLink(safe === null || safe === '' ? null : safe)
         })
-        savedSelection = null
+        savedSelection.delete(editor)
       },
     }),
   }