@llui/markdown-editor 0.2.11 → 0.2.13

package/src/paste.ts

@@ -0,0 +1,91 @@
+// Markdown-on-paste: when the user pastes plain text into the editor, parse it
+// as Markdown and insert the resulting rich nodes at the caret instead of the
+// literal source. Rich pastes (clipboards carrying `text/html`) are left to
+// Lexical's own HTML import so copy-from-the-web keeps its formatting. Disabled
+// per-editor via the `pasteMarkdown: false` config option.
+
+import {
+  $createParagraphNode,
+  $getSelection,
+  $insertNodes,
+  $isRangeSelection,
+  $setSelection,
+  COMMAND_PRIORITY_HIGH,
+  PASTE_COMMAND,
+  isDOMNode,
+  isSelectionCapturedInDecoratorInput,
+  type LexicalEditor,
+} from 'lexical'
+import { $convertFromMarkdownString, type Transformer } from '@lexical/markdown'
+
+/**
+ * Parse `markdown` with `transformers` and insert the produced nodes at the
+ * current range selection. The document is parsed into a detached scratch
+ * container (so the live root is never cleared) and the selection captured
+ * before the import — which moves the caret into the scratch node — is restored
+ * before the nodes are spliced in. Returns `true` only when nodes were actually
+ * inserted; `false` (a no-op) when there is no range selection to insert into or
+ * the markdown parsed to nothing — letting the caller fall back to the default
+ * paste behaviour instead of silently swallowing the event.
+ */
+export function $insertMarkdownAtSelection(
+  markdown: string,
+  transformers: Array<Transformer>,
+): boolean {
+  const selection = $getSelection()
+  if (!$isRangeSelection(selection)) return false
+  const saved = selection.clone()
+
+  // Import into a detached element so `$convertFromMarkdownString`'s `root.clear()`
+  // touches the scratch node, not the live document.
+  const scratch = $createParagraphNode()
+  $convertFromMarkdownString(markdown, transformers, scratch)
+  const nodes = scratch.getChildren()
+  if (nodes.length === 0) return false
+
+  // The import re-homes the selection to the scratch node's start; restore the
+  // real caret, then splice the parsed nodes in (splitting blocks as needed).
+  $setSelection(saved)
+  $insertNodes(nodes)
+  return true
+}
+
+/**
+ * Register the markdown-on-paste handler on `editor`. Returns a disposer.
+ *
+ * Plain-text pastes are converted as Markdown. Pastes that also carry
+ * `text/html` are ignored so Lexical's richer HTML import handles them.
+ */
+export function registerMarkdownPaste(
+  editor: LexicalEditor,
+  transformers: Array<Transformer>,
+): () => void {
+  return editor.registerCommand(
+    PASTE_COMMAND,
+    (event: ClipboardEvent) => {
+      // Let native inputs inside a DecoratorNode paste themselves (mirrors
+      // Lexical's own rich-text paste guard).
+      if (isDOMNode(event.target) && isSelectionCapturedInDecoratorInput(event.target)) return false
+      const clipboard = event.clipboardData
+      if (!clipboard) return false
+      // Defer to Lexical's HTML import when the source provides rich content.
+      if (clipboard.types.includes('text/html')) return false
+      const text = clipboard.getData('text/plain')
+      if (!text) return false
+
+      // Command listeners run inside a read context, so we can inspect the
+      // selection synchronously. Only claim the event when there is a range
+      // selection to insert into; otherwise fall through to Lexical's default
+      // paste handler (e.g. a selected decorator/NodeSelection) rather than
+      // swallowing the paste.
+      if (!$isRangeSelection($getSelection())) return false
+
+      event.preventDefault()
+      editor.update(() => {
+        $insertMarkdownAtSelection(text, transformers)
+      })
+      return true
+    },
+    COMMAND_PRIORITY_HIGH,
+  )
+}

package/src/plugins/_preview.ts

@@ -0,0 +1,51 @@
+// Shared rendered-preview seam for the math / mermaid decorator plugins.
+//
+// SECURITY: a consumer-supplied `render` turns editor-document content
+// (TeX / mermaid source the user typed) into a preview. To avoid forcing
+// that through an unsanitized HTML sink, `render` may return EITHER:
+//
+//   - a DOM `Node` — mounted directly with no HTML round-trip and NO
+//     sanitization needed (prefer this: hand back the element KaTeX /
+//     mermaid already produced); or
+//   - a `string` — injected as **trusted HTML**. The renderer owns
+//     sanitization in this branch; document content flows into it, so a
+//     vulnerable/misconfigured renderer is an XSS sink. Return sanitized
+//     markup (e.g. via DOMPurify) or prefer the Node form.
+
+import { foreign, type Mountable, type Signal } from '@llui/dom'
+
+/** A preview renderer: source string → safe DOM node, or trusted HTML string. */
+export type PreviewRender = (source: string) => string | Node
+
+interface PreviewInstance {
+  unbind: () => void
+}
+
+/**
+ * Build a reactive `data-part="preview"` region that re-renders whenever
+ * `source` changes. String results are set as trusted HTML; Node results
+ * are mounted directly (no sanitization). See the module header.
+ */
+export function renderedPreview(
+  source: Signal<string>,
+  render: PreviewRender,
+  tag = 'div',
+): Mountable {
+  return foreign<PreviewInstance, { source: Signal<string> }>({
+    tag,
+    state: { source },
+    mount: ({ el, state }) => {
+      el.setAttribute('data-part', 'preview')
+      el.setAttribute('contenteditable', 'false')
+      const apply = (value: string): void => {
+        const out = render(value)
+        if (typeof out === 'string') el.innerHTML = out
+        else el.replaceChildren(out)
+      }
+      // `bind` fires immediately with the current value, then on change.
+      const unbind = state.source.bind(apply)
+      return { unbind }
+    },
+    unmount: (instance) => instance.unbind(),
+  })
+}

package/src/plugins/callout.ts

@@ -0,0 +1,195 @@
+// Callout (admonition) plugin — the custom-rendering showcase. A callout is a
+// block decorator: it stores `{ kind, text }`, renders an LLui sub-view (its own
+// TEA loop) with a clickable kind badge, and round-trips to `:::kind text`
+// markdown via a contributed element transformer.
+
+import { 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, component, div, span, text, type Signal } from '@llui/dom'
+import type { MarkdownPlugin } from './types.js'
+
+export type CalloutKind = 'note' | 'tip' | 'warning' | 'danger'
+
+export interface CalloutData {
+  kind: CalloutKind
+  text: string
+}
+
+const KIND_CYCLE: readonly CalloutKind[] = ['note', 'tip', 'warning', 'danger']
+const KIND_LABEL: Readonly<Record<CalloutKind, string>> = {
+  note: 'Note',
+  tip: 'Tip',
+  warning: 'Warning',
+  danger: 'Danger',
+}
+
+const BRIDGE_TYPE = 'callout'
+
+function nextKind(kind: CalloutKind): CalloutKind {
+  const idx = KIND_CYCLE.indexOf(kind)
+  return KIND_CYCLE[(idx + 1) % KIND_CYCLE.length]!
+}
+
+function isCalloutData(value: unknown): value is CalloutData {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof (value as CalloutData).kind === 'string' &&
+    typeof (value as CalloutData).text === 'string'
+  )
+}
+
+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,
+          },
+          [
+            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>)],
+            ),
+          ],
+        ),
+      ],
+    }),
+)
+
+/** `:::kind text` element transformer (single-line admonition). */
+const CALLOUT_TRANSFORMER: ElementTransformer = {
+  dependencies: [LLuiDecoratorNode],
+  export: (node: LexicalNode): string | null => {
+    if (!$isLLuiDecoratorNode(node) || node.getBridgeType() !== BRIDGE_TYPE) return null
+    const data = node.getData()
+    if (!isCalloutData(data)) return null
+    return `:::${data.kind} ${data.text}`
+  },
+  regExp: /^:::(note|tip|warning|danger)[ \t]+(.+)$/,
+  replace: (parentNode: ElementNode, _children, match): void => {
+    const kind = match[1] as CalloutKind
+    const callout = $createLLuiDecoratorNode(BRIDGE_TYPE, { kind, text: match[2] ?? '' })
+    parentNode.replace(callout)
+  },
+  type: 'element',
+}
+
+/** Insert a fresh callout at the current selection; returns the created node. */
+export function $insertCallout(
+  kind: CalloutKind = 'note',
+  textValue = 'New callout',
+): LLuiDecoratorNode {
+  return $insertNodeToNearestRoot($createLLuiDecoratorNode(BRIDGE_TYPE, { kind, text: textValue }))
+}
+
+/** Move focus into a callout's editable text island once it has decorated, and
+ * select its placeholder text so the next keystroke replaces it. */
+function focusCalloutText(editor: LexicalEditor, key: string, attempt = 0): void {
+  if (typeof requestAnimationFrame !== 'function') return
+  requestAnimationFrame(() => {
+    const span = editor.getElementByKey(key)?.querySelector('[data-part="text"]')
+    if (span instanceof HTMLElement) {
+      span.focus()
+      try {
+        const range = document.createRange()
+        range.selectNodeContents(span)
+        const sel = window.getSelection()
+        sel?.removeAllRanges()
+        sel?.addRange(range)
+      } catch {
+        /* selection API unavailable */
+      }
+    } else if (attempt < 3) {
+      focusCalloutText(editor, key, attempt + 1)
+    }
+  })
+}
+
+export interface CalloutPluginOptions {
+  /** Default kind for the toolbar/slash insert action. */
+  defaultKind?: CalloutKind
+}
+
+export function calloutPlugin(opts: CalloutPluginOptions = {}): MarkdownPlugin {
+  const defaultKind = opts.defaultKind ?? 'note'
+  return {
+    name: 'callout',
+    nodes: [LLuiDecoratorNode],
+    decorators: [calloutBridge],
+    transformers: [CALLOUT_TRANSFORMER],
+    items: [
+      {
+        id: 'callout',
+        label: 'Callout',
+        icon: 'callout',
+        group: 'insert',
+        keywords: ['note', 'admonition', 'aside', 'tip', 'warning'],
+        run: (editor) => {
+          let key = ''
+          editor.update(() => {
+            key = $insertCallout(defaultKind).getKey()
+          })
+          // Land the caret inside the new callout's text, not after the block.
+          focusCalloutText(editor, key)
+        },
+        surfaces: ['toolbar', 'slash', 'context'],
+      },
+    ],
+  }
+}

package/src/plugins/context-menu.ts

@@ -0,0 +1,118 @@
+// Right-click context menu — a plugin-UI overlay. `register` installs a
+// `contextmenu` listener on the editor root and opens the menu at the pointer;
+// the plugin-UI renders the menu and runs the chosen command.
+
+import { div, each, text, type Signal } from '@llui/dom'
+import { definePluginUI } from './ui.js'
+import { OVERLAY_Z, hideOverlay, overlayRoot } from './overlay.js'
+import type { CommandItem, MarkdownPlugin } from './types.js'
+
+interface MenuItem {
+  id: string
+  label: string
+}
+
+interface ContextState {
+  open: boolean
+  x: number
+  y: number
+  items: MenuItem[]
+}
+
+type ContextMsg =
+  | { type: 'open'; x: number; y: number; items: MenuItem[] }
+  | { type: 'close' }
+  | { type: 'choose'; index: number }
+
+type ContextEffect = { type: 'run'; id: string }
+
+export function contextMenuPlugin(): MarkdownPlugin {
+  let contextItems: CommandItem[] = []
+
+  return {
+    name: 'contextMenu',
+    onItems: (items) => {
+      // Curated: only items that explicitly opt into the context menu (insert
+      // actions, links, history). Inline formatting lives in the floating bar.
+      contextItems = items.filter((i) => i.surfaces?.includes('context') ?? false)
+    },
+    register: (editor, ctx) => {
+      const onContext = (e: Event): void => {
+        const me = e as MouseEvent
+        e.preventDefault()
+        ctx.emit({
+          type: 'plugin',
+          name: 'contextMenu',
+          msg: {
+            type: 'open',
+            x: me.clientX,
+            y: me.clientY,
+            items: contextItems.map((i) => ({ id: i.id, label: i.label })),
+          },
+        })
+      }
+      const root = editor.getRootElement()
+      root?.addEventListener('contextmenu', onContext)
+      return () => {
+        editor.getRootElement()?.removeEventListener('contextmenu', onContext)
+      }
+    },
+    ui: definePluginUI<ContextState, ContextMsg, ContextEffect>({
+      init: () => ({ open: false, x: 0, y: 0, items: [] }),
+      update: (state, msg) => {
+        switch (msg.type) {
+          case 'open':
+            return { open: msg.items.length > 0, x: msg.x, y: msg.y, items: msg.items }
+          case 'close':
+            return hideOverlay(state)
+          case 'choose': {
+            const item = state.items[msg.index]
+            if (!item) return hideOverlay(state)
+            return [{ ...state, open: false }, [{ type: 'run', id: item.id }]]
+          }
+        }
+      },
+      onEffect: (effect, ctx) => {
+        ctx.emit({ type: 'runCommand', id: effect.id })
+      },
+      view: ({ state, send }) =>
+        overlayRoot({
+          open: state.at('open'),
+          x: state.at('x'),
+          y: state.at('y'),
+          zIndex: OVERLAY_Z.contextMenu,
+          attrs: { 'data-scope': 'md-context', 'data-part': 'root' },
+          // Backdrop closes the menu on any outside interaction.
+          before: () => [
+            div({
+              'data-scope': 'md-context',
+              'data-part': 'backdrop',
+              onMouseDown: () => send({ type: 'close' }),
+              onContextMenu: (e: Event) => {
+                e.preventDefault()
+                send({ type: 'close' })
+              },
+            }),
+          ],
+          children: () => [
+            each(state.at('items') as Signal<MenuItem[]>, {
+              key: (it) => it.id,
+              render: (item, index) => [
+                div(
+                  {
+                    'data-scope': 'md-context',
+                    'data-part': 'option',
+                    onMouseDown: (e: MouseEvent) => {
+                      e.preventDefault()
+                      send({ type: 'choose', index: index.peek() })
+                    },
+                  },
+                  [text(item.map((it) => it.label))],
+                ),
+              ],
+            }),
+          ],
+        }),
+    }),
+  }
+}

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)],
+  }
+}