@llui/markdown-editor 0.2.12 → 0.2.14

package/src/plugins/image.ts

@@ -0,0 +1,240 @@
+// Image plugin — a block image rendered via the decorator bridge, round-tripping
+// to `![alt](src)` markdown, inserted through a plugin-UI dialog (URL + alt, with
+// optional file upload). Exercises decorator rendering + a transformer + the
+// plugin-UI extension all at once.
+
+import {
+  $getSelection,
+  $setSelection,
+  type BaseSelection,
+  type ElementNode,
+  type LexicalEditor,
+  type LexicalNode,
+} from 'lexical'
+import { $insertNodeToNearestRoot } from '@lexical/utils'
+import type { ElementTransformer } from '@lexical/markdown'
+import {
+  $createLLuiDecoratorNode,
+  $isLLuiDecoratorNode,
+  LLuiDecoratorNode,
+  decoratorBridge,
+} from '@llui/lexical'
+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'
+
+const BRIDGE_TYPE = 'image'
+
+interface ImageData {
+  src: string
+  alt: string
+}
+
+function isImageData(value: unknown): value is ImageData {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof (value as ImageData).src === 'string' &&
+    typeof (value as ImageData).alt === '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],
+  export: (node: LexicalNode): string | null => {
+    if (!$isLLuiDecoratorNode(node) || node.getBridgeType() !== BRIDGE_TYPE) return null
+    const data = node.getData()
+    return isImageData(data) ? `![${data.alt}](${data.src})` : null
+  },
+  regExp: /^!\[([^\]]*)\]\(([^)]+)\)$/,
+  replace: (parentNode: ElementNode, _children, match): void => {
+    // 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',
+}
+
+interface ImageState {
+  dialog: { open: boolean }
+  src: string
+  alt: string
+}
+
+type ImageMsg =
+  | { type: 'open' }
+  | { type: 'setSrc'; src: string }
+  | { type: 'setAlt'; alt: string }
+  | { type: 'submit' }
+  | { type: 'dialog'; msg: DialogMsg }
+
+type ImageEffect = { type: 'begin' } | { type: 'insert'; src: string; alt: string }
+
+function dialogOpen(msg: DialogMsg, current: boolean): boolean {
+  switch (msg.type) {
+    case 'open':
+      return true
+    case 'close':
+      return false
+    case 'toggle':
+      return !current
+    case 'setOpen':
+      return msg.open
+    case 'animationEnd':
+    case 'transitionEnd':
+      return current
+  }
+}
+
+export interface ImagePluginOptions {
+  /** Upload a chosen file and resolve to its URL. When omitted, the file picker
+   * is hidden and only URL entry is offered. */
+  upload?: (file: File) => Promise<string>
+}
+
+export function imagePlugin(opts: ImagePluginOptions = {}): MarkdownPlugin {
+  // 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',
+    nodes: [LLuiDecoratorNode],
+    decorators: [imageBridge],
+    transformers: [IMAGE_TRANSFORMER],
+    items: [
+      {
+        id: 'image',
+        label: 'Image',
+        icon: 'image',
+        group: 'insert',
+        keywords: ['img', 'picture', 'photo'],
+        run: (_editor, ctx) => ctx.send({ type: 'plugin', name: 'image', msg: { type: 'open' } }),
+        surfaces: ['toolbar', 'slash', 'context'],
+      },
+    ],
+    ui: definePluginUI<ImageState, ImageMsg, ImageEffect>({
+      init: () => ({ dialog: { open: false }, src: '', alt: '' }),
+      update: (state, msg) => {
+        switch (msg.type) {
+          case 'open':
+            return [{ dialog: { open: true }, src: '', alt: '' }, [{ type: 'begin' }]]
+          case 'setSrc':
+            return { ...state, src: msg.src }
+          case 'setAlt':
+            return { ...state, alt: msg.alt }
+          case 'submit':
+            return [
+              { ...state, dialog: { open: false } },
+              [{ type: 'insert', src: state.src, alt: state.alt }],
+            ]
+          case 'dialog': {
+            const open = dialogOpen(msg.msg, state.dialog.open)
+            return open === state.dialog.open ? state : { ...state, dialog: { open } }
+          }
+        }
+      },
+      view: ({ state, send }) => {
+        const dialogSend = (msg: DialogMsg): void => send({ type: 'dialog', msg })
+        const parts = connectDialog(state.at('dialog'), dialogSend, {
+          id: 'md-image-dialog',
+          closeLabel: 'Cancel',
+        })
+        return [
+          overlayDialog({
+            state: state.at('dialog'),
+            send: dialogSend,
+            parts,
+            content: () => [
+              div({ ...parts.content, 'data-md-link': 'box' }, [
+                div({ ...parts.title, 'data-md-link': 'title' }, [text('Insert image')]),
+                input({
+                  'data-md-link': 'input',
+                  type: 'url',
+                  placeholder: 'https://example.com/image.png',
+                  value: state.at('src') as Signal<string>,
+                  onInput: (e: Event) =>
+                    send({ type: 'setSrc', src: (e.target as HTMLInputElement).value }),
+                }),
+                input({
+                  'data-md-link': 'input',
+                  'data-md-image': 'alt',
+                  type: 'text',
+                  placeholder: 'Alt text (description)',
+                  value: state.at('alt') as Signal<string>,
+                  onInput: (e: Event) =>
+                    send({ type: 'setAlt', alt: (e.target as HTMLInputElement).value }),
+                }),
+                ...(opts.upload
+                  ? [
+                      input({
+                        'data-md-image': 'file',
+                        type: 'file',
+                        accept: 'image/*',
+                        onChange: (e: Event) => {
+                          const file = (e.target as HTMLInputElement).files?.[0]
+                          if (file && opts.upload) {
+                            void opts.upload(file).then((src) => send({ type: 'setSrc', src }))
+                          }
+                        },
+                      }),
+                    ]
+                  : []),
+                div({ 'data-md-link': 'actions' }, [
+                  button({ ...parts.closeTrigger, 'data-md-link': 'cancel' }, [text('Cancel')]),
+                  button(
+                    {
+                      type: 'button',
+                      'data-md-link': 'apply',
+                      onClick: () => send({ type: 'submit' }),
+                    },
+                    [text('Insert')],
+                  ),
+                ]),
+              ]),
+            ],
+          }),
+        ]
+      },
+      onEffect: (effect, ctx) => {
+        const editor = ctx.editor()
+        if (!editor) return
+        if (effect.type === 'begin') {
+          savedSelection.set(
+            editor,
+            editor.getEditorState().read(() => {
+              const selection = $getSelection()
+              return selection ? selection.clone() : null
+            }),
+          )
+          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 (saved) $setSelection(saved.clone())
+          $insertNodeToNearestRoot($createLLuiDecoratorNode(BRIDGE_TYPE, { src, alt: effect.alt }))
+        })
+        savedSelection.delete(editor)
+      },
+    }),
+  }
+}

package/src/plugins/inline.ts

@@ -0,0 +1,76 @@
+// Shared inline text-formatting building blocks: the bold / italic /
+// strikethrough / code command items and the `FORMAT_TEXT_COMMAND` dispatcher.
+// Both `corePlugin` (the full GFM superset) and `singleBlockPlugin` (inline-only)
+// derive their inline surface from here, so the canonical inline-format set and
+// its labels/icons/keywords live in exactly one place.
+
+import { FORMAT_TEXT_COMMAND, type LexicalEditor, type TextFormatType } from 'lexical'
+import type { FormatState } from '../state.js'
+import type { CommandItem } from './types.js'
+
+/** An inline text-format surfaced as a toolbar command item. */
+export type InlineFormat = 'bold' | 'italic' | 'strikethrough' | 'code'
+
+/** The full inline-format set, in toolbar order. */
+export const INLINE_FORMATS: readonly InlineFormat[] = ['bold', 'italic', 'strikethrough', 'code']
+
+interface InlineFormatDef {
+  label: string
+  icon: string
+  keywords: readonly string[]
+  format: TextFormatType
+  isActive: (f: FormatState) => boolean
+}
+
+const DEFS: Record<InlineFormat, InlineFormatDef> = {
+  bold: {
+    label: 'Bold',
+    icon: 'bold',
+    keywords: ['strong'],
+    format: 'bold',
+    isActive: (f) => f.bold,
+  },
+  italic: {
+    label: 'Italic',
+    icon: 'italic',
+    keywords: ['emphasis'],
+    format: 'italic',
+    isActive: (f) => f.italic,
+  },
+  strikethrough: {
+    label: 'Strikethrough',
+    icon: 'strikethrough',
+    keywords: ['strike', 'del'],
+    format: 'strikethrough',
+    isActive: (f) => f.strikethrough,
+  },
+  code: {
+    label: 'Inline code',
+    icon: 'code',
+    keywords: ['mono'],
+    format: 'code',
+    isActive: (f) => f.code,
+  },
+}
+
+/** Dispatch a text-format toggle on the live editor. */
+export function inlineFormatCommand(format: TextFormatType): (editor: LexicalEditor) => void {
+  return (editor) => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format)
+}
+
+/** Build the inline `CommandItem`s for `formats` (default: all four), grouped
+ * under `'inline'`. Surfaces are left unset (item appears in every surface). */
+export function inlineItems(formats: readonly InlineFormat[] = INLINE_FORMATS): CommandItem[] {
+  return formats.map((id) => {
+    const def = DEFS[id]
+    return {
+      id,
+      label: def.label,
+      icon: def.icon,
+      group: 'inline',
+      keywords: def.keywords,
+      run: inlineFormatCommand(def.format),
+      isActive: def.isActive,
+    }
+  })
+}

package/src/plugins/link.ts

@@ -0,0 +1,143 @@
+// The link plugin — a stateful, UI-bearing feature built entirely as a plugin
+// (no core editor changes). It owns its dialog state, its view (the modal), and
+// its effects (save/restore selection + toggle the link). This is the proof that
+// the plugin-UI extension makes such features pluggable rather than built-in.
+
+import {
+  $getSelection,
+  $isRangeSelection,
+  $setSelection,
+  type BaseSelection,
+  type LexicalEditor,
+} from 'lexical'
+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'
+
+const PLUGIN = 'link'
+
+interface LinkState {
+  dialog: DialogState
+  url: string
+}
+
+type LinkMsg =
+  | { type: 'open' }
+  | { type: 'show'; url: string }
+  | { type: 'setUrl'; url: string }
+  | { type: 'submit' }
+  | { type: 'dialog'; msg: DialogMsg }
+
+type LinkEffect = { type: 'begin' } | { type: 'commit'; url: string }
+
+/** Read the URL of the link wrapping the current selection (empty if none). */
+function readLinkUrl(editor: LexicalEditor): string {
+  return editor.getEditorState().read(() => {
+    const selection = $getSelection()
+    if (!$isRangeSelection(selection)) return ''
+    const link = $findMatchingParent(selection.anchor.getNode(), (node) => $isLinkNode(node))
+    return $isLinkNode(link) ? link.getURL() : ''
+  })
+}
+
+function dialogOpen(msg: DialogMsg, current: boolean): boolean {
+  switch (msg.type) {
+    case 'open':
+      return true
+    case 'close':
+      return false
+    case 'toggle':
+      return !current
+    case 'setOpen':
+      return msg.open
+    case 'animationEnd':
+    case 'transitionEnd':
+      return current
+  }
+}
+
+export interface LinkPluginOptions {
+  /** Default URL pre-filled when there's no existing link (default ''). */
+  defaultUrl?: string
+}
+
+export function linkPlugin(opts: LinkPluginOptions = {}): MarkdownPlugin {
+  // Selection saved when the dialog opens (the modal steals focus/selection),
+  // 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',
+    label: 'Link',
+    icon: 'link',
+    group: 'inline',
+    keywords: ['url', 'href'],
+    run: (_editor, ctx) => ctx.send({ type: 'plugin', name: PLUGIN, msg: { type: 'open' } }),
+    isActive: (f) => f.link,
+    surfaces: ['toolbar', 'floating', 'context'],
+  }
+
+  return {
+    name: PLUGIN,
+    items: [item],
+    ui: definePluginUI<LinkState, LinkMsg, LinkEffect>({
+      init: () => ({ dialog: { open: false }, url: opts.defaultUrl ?? '' }),
+      update: (state, msg) => {
+        switch (msg.type) {
+          case 'open':
+            return [state, [{ type: 'begin' }]]
+          case 'show':
+            return { dialog: { open: true }, url: msg.url }
+          case 'setUrl':
+            return { ...state, url: msg.url }
+          case 'submit':
+            return [{ ...state, dialog: { open: false } }, [{ type: 'commit', url: state.url }]]
+          case 'dialog': {
+            const open = dialogOpen(msg.msg, state.dialog.open)
+            return open === state.dialog.open ? state : { ...state, dialog: { open } }
+          }
+        }
+      },
+      view: ({ state, send }) => [
+        linkDialog({
+          dialog: state.at('dialog'),
+          url: state.at('url'),
+          onInput: (url) => send({ type: 'setUrl', url }),
+          onSubmit: () => send({ type: 'submit' }),
+          onDialog: (msg) => send({ type: 'dialog', msg }),
+        }),
+      ],
+      onEffect: (effect, ctx) => {
+        const editor = ctx.editor()
+        if (!editor) return
+        if (effect.type === 'begin') {
+          savedSelection.set(
+            editor,
+            editor.getEditorState().read(() => {
+              const selection = $getSelection()
+              return selection ? selection.clone() : null
+            }),
+          )
+          ctx.send({ type: 'show', url: readLinkUrl(editor) })
+          return
+        }
+        // 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 (saved) $setSelection(saved.clone())
+          $toggleLink(safe === null || safe === '' ? null : safe)
+        })
+        savedSelection.delete(editor)
+      },
+    }),
+  }
+}

package/src/plugins/math.ts

@@ -0,0 +1,102 @@
+// Math plugin — a block math node ($$…$$) rendered via the decorator bridge. The
+// TeX source is editable inline (persists on blur); an optional `render` callback
+// (e.g. KaTeX) turns it into a typeset preview. Round-trips to `$$tex$$`.
+
+import { type ElementNode, type LexicalNode } from 'lexical'
+import { $insertNodeToNearestRoot } from '@lexical/utils'
+import type { ElementTransformer } from '@lexical/markdown'
+import {
+  $createLLuiDecoratorNode,
+  $isLLuiDecoratorNode,
+  LLuiDecoratorNode,
+  decoratorBridge,
+} from '@llui/lexical'
+import { div, span, text, type Mountable, type Signal } from '@llui/dom'
+import type { MarkdownPlugin } from './types.js'
+import { renderedPreview, type PreviewRender } from './_preview.js'
+
+const BRIDGE_TYPE = 'math'
+
+interface MathData {
+  tex: string
+}
+
+function isMathData(value: unknown): value is MathData {
+  return typeof value === 'object' && value !== null && typeof (value as MathData).tex === 'string'
+}
+
+const stop = (e: Event): void => e.stopPropagation()
+
+export interface MathPluginOptions {
+  /** Typeset TeX to an HTML string (e.g. via KaTeX). When omitted, the raw TeX is
+   * shown in a styled box. */
+  /** Render the TeX source to a preview. Return a DOM `Node` (mounted
+   * directly, no sanitization) or a **trusted HTML string** (injected as-is
+   * — sanitize it yourself, e.g. via DOMPurify, since it carries document
+   * content). See `renderedPreview`. */
+  render?: PreviewRender
+}
+
+export function mathPlugin(opts: MathPluginOptions = {}): MarkdownPlugin {
+  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],
+    export: (node: LexicalNode): string | null => {
+      if (!$isLLuiDecoratorNode(node) || node.getBridgeType() !== BRIDGE_TYPE) return null
+      const data = node.getData()
+      return isMathData(data) ? `$$${data.tex}$$` : null
+    },
+    regExp: /^\$\$(.+)\$\$$/,
+    replace: (parentNode: ElementNode, _children, match): void => {
+      parentNode.replace($createLLuiDecoratorNode(BRIDGE_TYPE, { tex: match[1] ?? '' }))
+    },
+    type: 'element',
+  }
+
+  return {
+    name: 'math',
+    nodes: [LLuiDecoratorNode],
+    decorators: [bridge],
+    transformers: [transformer],
+    items: [
+      {
+        id: 'math',
+        label: 'Math block',
+        icon: 'math',
+        group: 'insert',
+        keywords: ['latex', 'tex', 'equation', 'formula'],
+        run: (editor) =>
+          editor.update(() =>
+            $insertNodeToNearestRoot($createLLuiDecoratorNode(BRIDGE_TYPE, { tex: 'e = mc^2' })),
+          ),
+        surfaces: ['slash', 'context'],
+      },
+    ],
+  }
+}