@llui/markdown-editor 0.2.11 → 0.2.13

package/src/plugins/floating-toolbar.ts

@@ -0,0 +1,180 @@
+// Floating selection toolbar — a bubble of inline-format actions that appears
+// above a non-collapsed text selection. A plugin-UI overlay: `register` watches
+// selection changes and positions/fills the bar; clicking a button runs the
+// command on the still-live selection.
+
+import { $getSelection, $isRangeSelection } from 'lexical'
+import { $findMatchingParent, mergeRegister } from '@lexical/utils'
+import { $isLinkNode } from '@lexical/link'
+import { button, each, span, text, unsafeHtml, type Signal } from '@llui/dom'
+import { definePluginUI } from './ui.js'
+import { OVERLAY_Z, hideOverlay, onViewportChange, overlayRoot } from './overlay.js'
+import { DEFAULT_GLYPHS } from '../surfaces/toolbar.js'
+import type { CommandItem, MarkdownPlugin } from './types.js'
+
+interface BarItem {
+  id: string
+  label: string
+  glyph: string
+  active: boolean
+}
+
+interface FloatState {
+  open: boolean
+  x: number
+  y: number
+  items: BarItem[]
+}
+
+type FloatMsg =
+  | { type: 'show'; x: number; y: number; items: BarItem[] }
+  | { type: 'hide' }
+  | { type: 'run'; index: number }
+
+type FloatEffect = { type: 'run'; id: string }
+
+interface InlineFormat {
+  bold: boolean
+  italic: boolean
+  strikethrough: boolean
+  code: boolean
+  link: boolean
+}
+
+function readFormat(editor: import('lexical').LexicalEditor): InlineFormat {
+  return editor.getEditorState().read(() => {
+    const selection = $getSelection()
+    if (!$isRangeSelection(selection)) {
+      return { bold: false, italic: false, strikethrough: false, code: false, link: false }
+    }
+    return {
+      bold: selection.hasFormat('bold'),
+      italic: selection.hasFormat('italic'),
+      strikethrough: selection.hasFormat('strikethrough'),
+      code: selection.hasFormat('code'),
+      link: $findMatchingParent(selection.anchor.getNode(), (n) => $isLinkNode(n)) !== null,
+    }
+  })
+}
+
+function activeFor(id: string, fmt: InlineFormat): boolean {
+  switch (id) {
+    case 'bold':
+      return fmt.bold
+    case 'italic':
+      return fmt.italic
+    case 'strikethrough':
+      return fmt.strikethrough
+    case 'code':
+      return fmt.code
+    case 'link':
+      return fmt.link
+    default:
+      return false
+  }
+}
+
+export function floatingToolbarPlugin(): MarkdownPlugin {
+  let floatingItems: CommandItem[] = []
+
+  return {
+    name: 'floatingToolbar',
+    onItems: (items) => {
+      floatingItems = items.filter((i) =>
+        i.surfaces ? i.surfaces.includes('floating') : i.group === 'inline',
+      )
+    },
+    register: (editor, ctx) => {
+      const refresh = (): void => {
+        const collapsed = editor.getEditorState().read(() => {
+          const s = $getSelection()
+          return !$isRangeSelection(s) || s.isCollapsed()
+        })
+        const dom = typeof window !== 'undefined' ? window.getSelection() : null
+        if (collapsed || !dom || dom.rangeCount === 0) {
+          ctx.emit({ type: 'plugin', name: 'floatingToolbar', msg: { type: 'hide' } })
+          return
+        }
+        const rect = dom.getRangeAt(0).getBoundingClientRect()
+        if (rect.width === 0 && rect.height === 0) {
+          ctx.emit({ type: 'plugin', name: 'floatingToolbar', msg: { type: 'hide' } })
+          return
+        }
+        const fmt = readFormat(editor)
+        const items: BarItem[] = floatingItems.map((i) => ({
+          id: i.id,
+          label: i.label,
+          glyph: DEFAULT_GLYPHS[i.id] ?? i.label,
+          active: activeFor(i.id, fmt),
+        }))
+        ctx.emit({
+          type: 'plugin',
+          name: 'floatingToolbar',
+          msg: { type: 'show', x: rect.left + rect.width / 2, y: rect.top, items },
+        })
+      }
+      return mergeRegister(
+        editor.registerUpdateListener(() => refresh()),
+        // Keep the bubble glued to the selection while the page scrolls.
+        onViewportChange(refresh),
+      )
+    },
+    ui: definePluginUI<FloatState, FloatMsg, FloatEffect>({
+      init: () => ({ open: false, x: 0, y: 0, items: [] }),
+      update: (state, msg) => {
+        switch (msg.type) {
+          case 'show':
+            return { open: msg.items.length > 0, x: msg.x, y: msg.y, items: msg.items }
+          case 'hide':
+            return hideOverlay(state)
+          case 'run': {
+            const item = state.items[msg.index]
+            return item ? [state, [{ type: 'run', id: item.id }]] : state
+          }
+        }
+      },
+      onEffect: (effect, ctx) => {
+        ctx.emit({ type: 'runCommand', id: effect.id })
+      },
+      // `x` is the selection's horizontal centre; the transform centres the bar on
+      // it and lifts it above the selection.
+      view: ({ state, send }) =>
+        overlayRoot({
+          open: state.at('open'),
+          x: state.at('x'),
+          y: state.at('y'),
+          zIndex: OVERLAY_Z.floatingToolbar,
+          transform: 'transform:translate(-50%,-115%)',
+          attrs: { 'data-scope': 'md-floating', 'data-part': 'bar' },
+          children: () => [
+            each(state.at('items') as Signal<BarItem[]>, {
+              key: (it) => it.id,
+              render: (item, index) => [
+                button(
+                  {
+                    type: 'button',
+                    'data-scope': 'md-floating',
+                    'data-part': 'item',
+                    'data-active': item.map((it) => (it.active ? '' : undefined)),
+                    'aria-label': item.map((it) => it.label),
+                    onMouseDown: (e: MouseEvent) => {
+                      e.preventDefault()
+                      send({ type: 'run', index: index.peek() })
+                    },
+                  },
+                  [span({ 'data-part': 'glyph', 'aria-hidden': 'true' }, [renderGlyph(item)])],
+                ),
+              ],
+            }),
+          ],
+        }),
+    }),
+  }
+}
+
+/** Render an item's glyph (SVG markup → unsafeHtml, otherwise text). */
+function renderGlyph(item: Signal<BarItem>): import('@llui/dom').Mountable {
+  // The glyph value is stable per row; reading once is fine.
+  const glyph = item.peek().glyph
+  return glyph.trimStart().startsWith('<svg') ? unsafeHtml(glyph) : text(item.map((it) => it.glyph))
+}

package/src/plugins/hr.ts

@@ -0,0 +1,66 @@
+// Horizontal-rule plugin — a thematic break rendered as an `<hr>` via the
+// decorator bridge, round-tripping to `---` markdown.
+
+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 { component, 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 HR_TRANSFORMER: ElementTransformer = {
+  dependencies: [LLuiDecoratorNode],
+  export: (node: LexicalNode): string | null =>
+    $isLLuiDecoratorNode(node) && node.getBridgeType() === BRIDGE_TYPE ? '---' : null,
+  regExp: /^(---|\*\*\*|___)\s*$/,
+  replace: (parentNode: ElementNode): void => {
+    parentNode.replace($createLLuiDecoratorNode(BRIDGE_TYPE, {}))
+  },
+  type: 'element',
+}
+
+/** Insert a horizontal rule at the current selection. */
+export function $insertHorizontalRule(): void {
+  $insertNodeToNearestRoot($createLLuiDecoratorNode(BRIDGE_TYPE, {}))
+}
+
+export function hrPlugin(): MarkdownPlugin {
+  return {
+    name: 'hr',
+    nodes: [LLuiDecoratorNode],
+    decorators: [hrBridge],
+    transformers: [HR_TRANSFORMER],
+    items: [
+      {
+        id: 'horizontalRule',
+        label: 'Divider',
+        icon: 'hr',
+        group: 'insert',
+        keywords: ['rule', 'divider', 'separator', 'hr'],
+        run: (editor) => editor.update(() => $insertHorizontalRule()),
+        surfaces: ['toolbar', 'slash', 'context'],
+      },
+    ],
+  }
+}

package/src/plugins/image.ts

@@ -0,0 +1,237 @@
+// 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 LexicalNode,
+} from 'lexical'
+import { $insertNodeToNearestRoot } from '@lexical/utils'
+import type { ElementTransformer } from '@lexical/markdown'
+import {
+  $createLLuiDecoratorNode,
+  $isLLuiDecoratorNode,
+  LLuiDecoratorNode,
+  decoratorBridge,
+} from '@llui/lexical'
+import { button, component, div, img, input, text, type Signal } from '@llui/dom'
+import {
+  connect as connectDialog,
+  overlay as overlayDialog,
+  type DialogMsg,
+} from '@llui/components/dialog'
+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, 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 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 => {
+    parentNode.replace(
+      $createLLuiDecoratorNode(BRIDGE_TYPE, { alt: match[1] ?? '', src: match[2] ?? '' }),
+    )
+  },
+  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 {
+  let savedSelection: BaseSelection | null = 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 = editor.getEditorState().read(() => {
+            const selection = $getSelection()
+            return selection ? selection.clone() : null
+          })
+          return
+        }
+        if (effect.src.trim() === '') return
+        editor.update(() => {
+          if (savedSelection) $setSelection(savedSelection.clone())
+          $insertNodeToNearestRoot(
+            $createLLuiDecoratorNode(BRIDGE_TYPE, { src: effect.src.trim(), alt: effect.alt }),
+          )
+        })
+        savedSelection = null
+      },
+    }),
+  }
+}

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,133 @@
+// 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 { 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. Encapsulated in the plugin instance — not the core editor.
+  let savedSelection: BaseSelection | null = 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 = editor.getEditorState().read(() => {
+            const selection = $getSelection()
+            return selection ? selection.clone() : null
+          })
+          ctx.send({ type: 'show', url: readLinkUrl(editor) })
+          return
+        }
+        const url = effect.url.trim()
+        editor.update(() => {
+          if (savedSelection) $setSelection(savedSelection.clone())
+          $toggleLink(url === '' ? null : url)
+        })
+        savedSelection = null
+      },
+    }),
+  }
+}