@llui/markdown-editor 0.2.12 → 0.2.14

package/src/plugins/core.ts

@@ -0,0 +1,179 @@
+// The core plugin: the GFM superset of nodes, transformers, command items, and
+// shortcuts. This is the default plugin when none are supplied, so the minimal
+// `markdownEditor()` one-liner still has full keyboard formatting.
+
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+  type ElementNode,
+  type LexicalEditor,
+} from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { $setBlocksType } from '@lexical/selection'
+import { $createHeadingNode, $createQuoteNode, type HeadingTagType } from '@lexical/rich-text'
+import { $createCodeNode } from '@lexical/code-core'
+import {
+  INSERT_CHECK_LIST_COMMAND,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  registerCheckList,
+  registerList,
+} from '@lexical/list'
+import type { CommandContext, CommandItem, MarkdownPlugin } from './types.js'
+import { inlineItems } from './inline.js'
+import { GFM_NODES, GFM_TRANSFORMERS } from '../transformers/gfm.js'
+
+const NOOP_CTX: CommandContext = { send: () => {} }
+
+/** Wrap a node-factory into an editor action that converts the selected blocks. */
+function block(create: () => ElementNode): (editor: LexicalEditor) => void {
+  return (editor) =>
+    editor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection)) $setBlocksType(selection, create)
+    })
+}
+
+function heading(tag: HeadingTagType): (editor: LexicalEditor) => void {
+  return block(() => $createHeadingNode(tag))
+}
+
+export interface CorePluginOptions {
+  /** Reserved for future core options. */
+  readonly _?: never
+}
+
+export function corePlugin(_opts: CorePluginOptions = {}): MarkdownPlugin {
+  const items: CommandItem[] = [
+    ...inlineItems(),
+    {
+      id: 'paragraph',
+      label: 'Text',
+      icon: 'paragraph',
+      group: 'block',
+      keywords: ['body', 'normal'],
+      run: block(() => $createParagraphNode()),
+      isActive: (f) => f.blockType === 'paragraph',
+    },
+    {
+      id: 'h1',
+      label: 'Heading 1',
+      icon: 'h1',
+      group: 'block',
+      keywords: ['title'],
+      run: heading('h1'),
+      isActive: (f) => f.blockType === 'h1',
+    },
+    {
+      id: 'h2',
+      label: 'Heading 2',
+      icon: 'h2',
+      group: 'block',
+      run: heading('h2'),
+      isActive: (f) => f.blockType === 'h2',
+    },
+    {
+      id: 'h3',
+      label: 'Heading 3',
+      icon: 'h3',
+      group: 'block',
+      run: heading('h3'),
+      isActive: (f) => f.blockType === 'h3',
+    },
+    {
+      id: 'quote',
+      label: 'Quote',
+      icon: 'quote',
+      group: 'block',
+      keywords: ['blockquote'],
+      run: block(() => $createQuoteNode()),
+      isActive: (f) => f.blockType === 'quote',
+    },
+    {
+      id: 'codeBlock',
+      label: 'Code block',
+      icon: 'code-block',
+      group: 'block',
+      keywords: ['fence', 'pre'],
+      run: block(() => $createCodeNode()),
+      isActive: (f) => f.blockType === 'code',
+    },
+    {
+      id: 'bulletList',
+      label: 'Bulleted list',
+      icon: 'list-bullet',
+      group: 'list',
+      keywords: ['unordered', 'ul'],
+      run: (e) => e.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+      isActive: (f) => f.blockType === 'bullet',
+    },
+    {
+      id: 'numberList',
+      label: 'Numbered list',
+      icon: 'list-number',
+      group: 'list',
+      keywords: ['ordered', 'ol'],
+      run: (e) => e.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+      isActive: (f) => f.blockType === 'number',
+    },
+    {
+      id: 'checkList',
+      label: 'Task list',
+      icon: 'list-check',
+      group: 'list',
+      keywords: ['todo', 'checkbox'],
+      run: (e) => e.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
+      isActive: (f) => f.blockType === 'check',
+    },
+    {
+      id: 'undo',
+      label: 'Undo',
+      icon: 'undo',
+      group: 'history',
+      run: (e) => e.dispatchCommand(UNDO_COMMAND, undefined),
+      isDisabled: (f) => !f.canUndo,
+      surfaces: ['toolbar', 'context'],
+    },
+    {
+      id: 'redo',
+      label: 'Redo',
+      icon: 'redo',
+      group: 'history',
+      run: (e) => e.dispatchCommand(REDO_COMMAND, undefined),
+      isDisabled: (f) => !f.canRedo,
+      surfaces: ['toolbar', 'context'],
+    },
+  ]
+
+  const byId = new Map(items.map((i) => [i.id, i]))
+  const shortcut =
+    (id: string) =>
+    (editor: LexicalEditor): boolean => {
+      const item = byId.get(id)
+      if (!item) return false
+      item.run(editor, NOOP_CTX)
+      return true
+    }
+
+  return {
+    name: 'core',
+    nodes: GFM_NODES,
+    transformers: GFM_TRANSFORMERS,
+    items,
+    // registerList wires list commands/indentation; registerCheckList adds the
+    // click-to-toggle on task items. (Linking is handled by the editor's link
+    // dialog via $toggleLink — see commitLink in editor.ts.)
+    register: (editor) => mergeRegister(registerList(editor), registerCheckList(editor)),
+    shortcuts: [
+      { combo: 'Mod-Alt-1', run: shortcut('h1') },
+      { combo: 'Mod-Alt-2', run: shortcut('h2') },
+      { combo: 'Mod-Alt-3', run: shortcut('h3') },
+      { combo: 'Mod-Shift-7', run: shortcut('numberList') },
+      { combo: 'Mod-Shift-8', run: shortcut('bulletList') },
+      { combo: 'Mod-Shift-9', run: shortcut('quote') },
+    ],
+  }
+}

package/src/plugins/emoji.ts

@@ -0,0 +1,59 @@
+// Emoji plugin — replace `:shortcode:` with the emoji while typing or on import,
+// via a text-match transformer. Unknown shortcodes are left untouched.
+
+import { $createTextNode, type TextNode } from 'lexical'
+import type { TextMatchTransformer } from '@lexical/markdown'
+import type { MarkdownPlugin } from './types.js'
+
+/** A small default shortcode → emoji map. Extend via `emojiPlugin({ emoji })`. */
+export const DEFAULT_EMOJI: Readonly<Record<string, string>> = {
+  smile: '😄',
+  grin: '😁',
+  joy: '😂',
+  wink: '😉',
+  heart: '❤️',
+  thumbsup: '👍',
+  '+1': '👍',
+  thumbsdown: '👎',
+  fire: '🔥',
+  tada: '🎉',
+  rocket: '🚀',
+  star: '⭐',
+  check: '✅',
+  x: '❌',
+  warning: '⚠️',
+  bulb: '💡',
+  eyes: '👀',
+  sparkles: '✨',
+  '100': '💯',
+  thinking: '🤔',
+}
+
+function transformer(map: Readonly<Record<string, string>>): TextMatchTransformer {
+  return {
+    dependencies: [],
+    // `null` keeps the emoji as a unicode character in the exported markdown.
+    export: () => null,
+    importRegExp: /:([a-z0-9_+-]+):/,
+    regExp: /:([a-z0-9_+-]+):$/,
+    trigger: ':',
+    replace: (node: TextNode, match: RegExpMatchArray): void => {
+      const emoji = map[match[1] ?? '']
+      if (emoji) node.replace($createTextNode(emoji))
+    },
+    type: 'text-match',
+  }
+}
+
+export interface EmojiPluginOptions {
+  /** Extra/override shortcode → emoji entries (merged over the defaults). */
+  emoji?: Readonly<Record<string, string>>
+}
+
+export function emojiPlugin(opts: EmojiPluginOptions = {}): MarkdownPlugin {
+  const map = { ...DEFAULT_EMOJI, ...(opts.emoji ?? {}) }
+  return {
+    name: 'emoji',
+    transformers: [transformer(map)],
+  }
+}

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,56 @@
+// 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 { hr } from '@llui/dom'
+import type { MarkdownPlugin } from './types.js'
+
+const BRIDGE_TYPE = 'hr'
+
+const hrBridge = decoratorBridge<Record<string, never>>(BRIDGE_TYPE, () => [
+  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'],
+      },
+    ],
+  }
+}