@llui/markdown-editor 0.2.11 → 0.2.13

package/src/plugins/single-block.ts

@@ -0,0 +1,193 @@
+// The single-block plugin: constrains the editor to exactly ONE paragraph that
+// holds only inline content (bold / italic / strikethrough / code, optionally
+// links). No headings, lists, quotes, code blocks, or multiple paragraphs.
+//
+// It enforces the invariant two ways, so it holds no matter how content arrives
+// (typing, the markdown seed, or a paste):
+//   1. The transformer set contributes ONLY inline text-format transformers, so
+//      block markdown (`# `, `- `, `> `, fenced code) is never parsed into block
+//      nodes — `registerMarkdownShortcuts` and `$convertFromMarkdownString` both
+//      read from this set.
+//   2. A RootNode transform coalesces the document back to a single paragraph of
+//      inline leaves whenever anything slips through (a multi-paragraph paste, a
+//      multi-line seed). Enter is intercepted so it never splits the paragraph.
+//
+// `singleBlockPlugin()` REPLACES the default plugin set — pass it instead of
+// `corePlugin()`. A dev-only guard warns when block-contributing plugins are
+// composed alongside it (since a plugin is additive and can't un-register them).
+
+import {
+  $createLineBreakNode,
+  $createParagraphNode,
+  $createTextNode,
+  $getSelection,
+  $isElementNode,
+  $isLineBreakNode,
+  $isParagraphNode,
+  $isRangeSelection,
+  $isTextNode,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ENTER_COMMAND,
+  RootNode,
+  type ElementNode,
+  type LexicalNode,
+  type ParagraphNode,
+} from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { LinkNode } from '@lexical/link'
+import { LINK, type Transformer } from '@lexical/markdown'
+import type { CommandItem, MarkdownPlugin } from './types.js'
+import { inlineItems, type InlineFormat } from './inline.js'
+import { INLINE_TEXT_TRANSFORMERS } from '../transformers/gfm.js'
+
+export type { InlineFormat }
+
+// `import.meta.env.DEV` is substituted by Vite/Rollup at build time; raw tsc /
+// vitest see it as undefined, so the dev guard stays off there unless the
+// bundler sets it. (Augmented locally so the package carries no build-tool dep.)
+declare global {
+  interface ImportMeta {
+    env?: { DEV?: boolean; MODE?: string }
+  }
+}
+
+export interface SingleBlockPluginOptions {
+  /** Inline formats surfaced as toolbar items.
+   * Default `['bold', 'italic', 'strikethrough', 'code']`. NOTE: this limits the
+   * toolbar buttons only — markdown syntax (`*x*`) and Ctrl/⌘ shortcuts still
+   * apply every inline format, and all inline markdown round-trips regardless. */
+  formats?: readonly InlineFormat[]
+  /** Allow soft line breaks within the single paragraph. When `false` (default)
+   * Enter is inert and pasted/seeded line breaks collapse to spaces — a strict
+   * single-line field. When `true`, Enter inserts a `\n` and merged lines are
+   * joined with a line break instead of a space. A new paragraph is never made. */
+  allowLineBreaks?: boolean
+  /** Register `LinkNode` + the markdown link transformer so inline links
+   * round-trip. Default `false`. Compose with `linkPlugin()` for the toolbar
+   * button + insert dialog. */
+  link?: boolean
+}
+
+/** Is this node an inline leaf that belongs directly inside a paragraph? */
+function isInlineLeaf(node: LexicalNode): boolean {
+  return $isTextNode(node) || $isLineBreakNode(node) || ($isElementNode(node) && node.isInline())
+}
+
+/** Decompose a block element into "lines" — each line is the inline content of
+ * one leaf block (paragraph, heading, list item, …). Recurses through nested
+ * block containers (a list → its items) so every leaf block becomes its own
+ * line; this is what lets adjacent list items be separator-joined rather than
+ * mashed together. */
+function blockLines(node: ElementNode): LexicalNode[][] {
+  const children = node.getChildren()
+  const hasBlockChildren = children.some((c) => $isElementNode(c) && !c.isInline())
+  if (!hasBlockChildren) {
+    return [children.filter(isInlineLeaf)]
+  }
+  const lines: LexicalNode[][] = []
+  for (const child of children) {
+    if ($isElementNode(child) && !child.isInline()) lines.push(...blockLines(child))
+    else if (isInlineLeaf(child)) lines.push([child])
+  }
+  return lines
+}
+
+/** Collapse every line break in a paragraph to a single space (single-line
+ * mode) so adjacent lines don't mash into one word. */
+function collapseLineBreaks(para: ParagraphNode): void {
+  for (const child of para.getChildren()) {
+    if ($isLineBreakNode(child)) child.replace($createTextNode(' '))
+  }
+}
+
+/** Coalesce the document to exactly one paragraph of inline content. Returns the
+ * `RootNode` transform the plugin registers. */
+function makeEnforce(allowLineBreaks: boolean): (root: RootNode) => void {
+  return (root) => {
+    const children = root.getChildren()
+
+    // Fast path: already a single paragraph — only fix stray line breaks.
+    if (children.length === 1 && $isParagraphNode(children[0])) {
+      if (!allowLineBreaks) collapseLineBreaks(children[0])
+      return
+    }
+
+    // Gather the inline content of every leaf block as a separate line.
+    const lines: LexicalNode[][] = []
+    for (const child of children) {
+      if ($isElementNode(child)) {
+        if (child.isInline()) lines.push([child])
+        else lines.push(...blockLines(child))
+      } else if (isInlineLeaf(child)) {
+        lines.push([child])
+      }
+    }
+
+    const para = $createParagraphNode()
+    let first = true
+    for (const line of lines) {
+      if (line.length === 0) continue
+      if (!first) para.append(allowLineBreaks ? $createLineBreakNode() : $createTextNode(' '))
+      for (const node of line) para.append(node)
+      first = false
+    }
+    if (!allowLineBreaks) collapseLineBreaks(para)
+    root.clear()
+    root.append(para)
+  }
+}
+
+export function singleBlockPlugin(opts: SingleBlockPluginOptions = {}): MarkdownPlugin {
+  const allowLineBreaks = opts.allowLineBreaks ?? false
+  const linkEnabled = opts.link ?? false
+
+  const items: CommandItem[] = inlineItems(opts.formats)
+
+  const transformers: Transformer[] = [...INLINE_TEXT_TRANSFORMERS]
+  if (linkEnabled) transformers.push(LINK)
+
+  const enforce = makeEnforce(allowLineBreaks)
+
+  const onEnter = (event: KeyboardEvent | null): boolean => {
+    if (!allowLineBreaks) {
+      // Inert: never split the paragraph, never insert a break.
+      event?.preventDefault()
+      return true
+    }
+    // Convert a plain Enter (which would split the paragraph) into a soft line
+    // break; let Shift+Enter fall through to the default soft-break handler.
+    if (event && event.shiftKey) return false
+    event?.preventDefault()
+    const selection = $getSelection()
+    if ($isRangeSelection(selection)) selection.insertLineBreak()
+    return true
+  }
+
+  return {
+    name: 'single-block',
+    ...(linkEnabled ? { nodes: [LinkNode] } : {}),
+    transformers,
+    items,
+    // Dev guard: single-block REPLACES the default plugin set, but a plugin is
+    // additive and can't un-register a sibling's block contributions. If another
+    // plugin's command items introduce block/structural content, warn loudly so
+    // the silently-broken `[corePlugin(), singleBlockPlugin()]` combo is caught.
+    onItems: (all) => {
+      if (import.meta.env?.DEV !== true) return
+      const structural = all.filter((i) => i.group && i.group !== 'inline' && i.group !== 'history')
+      if (structural.length === 0) return
+      const ids = structural.map((i) => i.id).join(', ')
+      console.warn(
+        `[llui] singleBlockPlugin: other plugins contribute block/structural commands (${ids}). ` +
+          `single-block REPLACES the default plugin set — pass it INSTEAD OF corePlugin (and any ` +
+          `block/insert plugins). Block content may otherwise reappear and the single-paragraph ` +
+          `constraint won't hold.`,
+      )
+    },
+    register: (editor) =>
+      mergeRegister(
+        editor.registerNodeTransform(RootNode, enforce),
+        editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_HIGH),
+      ),
+  }
+}

package/src/plugins/slash.ts

@@ -0,0 +1,224 @@
+// Slash command menu — a `/` command palette built as a plugin. It uses both the
+// engine `register` hook (to detect the `/query` trigger and drive keyboard nav
+// from editor events) and the plugin-UI extension (state + the floating menu
+// view + command execution). The flagship demonstration that the plugin-UI seam
+// handles complex, stateful overlays.
+
+import {
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+} from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+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
+}
+
+/** A rendered row — the `active` flag is row-local so `each` highlights reliably. */
+interface MenuRow {
+  id: string
+  label: string
+  active: boolean
+}
+
+interface SlashState {
+  open: boolean
+  query: string
+  items: MenuRow[]
+  index: number
+  x: number
+  y: number
+}
+
+function withActive(items: readonly MenuItem[], index: number): MenuRow[] {
+  return items.map((it, i) => ({ id: it.id, label: it.label, active: i === index }))
+}
+
+type SlashMsg =
+  | { type: 'show'; query: string; items: MenuItem[]; x: number; y: number }
+  | { type: 'hide' }
+  | { type: 'move'; delta: number }
+  | { type: 'choose' }
+  | { type: 'click'; index: number }
+
+type SlashEffect = { type: 'run'; id: string; query: string }
+
+const TRIGGER = /(?:^|\s)\/([\w-]*)$/
+
+/** Read the active slash query before the collapsed caret, or null. */
+function $readSlashQuery(): string | null {
+  const selection = $getSelection()
+  if (!$isRangeSelection(selection) || !selection.isCollapsed()) return null
+  const node = selection.anchor.getNode()
+  if (!$isTextNode(node)) return null
+  const before = node.getTextContent().slice(0, selection.anchor.offset)
+  const match = before.match(TRIGGER)
+  return match ? (match[1] ?? '') : null
+}
+
+function caretXY(): { x: number; y: number } {
+  if (typeof window === 'undefined') return { x: 0, y: 0 }
+  const sel = window.getSelection()
+  if (sel && sel.rangeCount > 0) {
+    const rect = sel.getRangeAt(0).getBoundingClientRect()
+    return { x: rect.left, y: rect.bottom + 4 }
+  }
+  return { x: 0, y: 0 }
+}
+
+function matches(item: CommandItem, query: string): boolean {
+  if (query === '') return true
+  const q = query.toLowerCase()
+  if (item.label.toLowerCase().includes(q) || item.id.toLowerCase().includes(q)) return true
+  return (item.keywords ?? []).some((k) => k.toLowerCase().includes(q))
+}
+
+export function slashPlugin(): MarkdownPlugin {
+  let slashItems: CommandItem[] = []
+
+  const filtered = (query: string): MenuItem[] =>
+    slashItems.filter((i) => matches(i, query)).map((i) => ({ id: i.id, label: i.label }))
+
+  return {
+    name: 'slash',
+    onItems: (items) => {
+      slashItems = items.filter((i) =>
+        i.surfaces
+          ? i.surfaces.includes('slash')
+          : ['block', 'list', 'insert'].includes(i.group ?? ''),
+      )
+    },
+    register: (editor, ctx) => {
+      const isActive = (): boolean => editor.getEditorState().read(() => $readSlashQuery() !== null)
+
+      const refresh = (): void => {
+        const query = editor.getEditorState().read(() => $readSlashQuery())
+        if (query === null) {
+          ctx.emit({ type: 'plugin', name: 'slash', msg: { type: 'hide' } })
+          return
+        }
+        const items = filtered(query)
+        const { x, y } = caretXY()
+        ctx.emit({ type: 'plugin', name: 'slash', msg: { type: 'show', query, items, x, y } })
+      }
+
+      const nav = (delta: number, e: KeyboardEvent | null): boolean => {
+        if (!isActive()) return false
+        e?.preventDefault()
+        ctx.emit({ type: 'plugin', name: 'slash', msg: { type: 'move', delta } })
+        return true
+      }
+
+      return mergeRegister(
+        editor.registerUpdateListener(() => refresh()),
+        editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (e) => nav(1, e), COMMAND_PRIORITY_HIGH),
+        editor.registerCommand(KEY_ARROW_UP_COMMAND, (e) => nav(-1, e), COMMAND_PRIORITY_HIGH),
+        editor.registerCommand(
+          KEY_ENTER_COMMAND,
+          (e) => {
+            if (!isActive()) return false
+            e?.preventDefault()
+            ctx.emit({ type: 'plugin', name: 'slash', msg: { type: 'choose' } })
+            return true
+          },
+          COMMAND_PRIORITY_HIGH,
+        ),
+        editor.registerCommand(
+          KEY_ESCAPE_COMMAND,
+          () => {
+            if (!isActive()) return false
+            ctx.emit({ type: 'plugin', name: 'slash', msg: { type: 'hide' } })
+            return true
+          },
+          COMMAND_PRIORITY_HIGH,
+        ),
+      )
+    },
+    ui: definePluginUI<SlashState, SlashMsg, SlashEffect>({
+      init: () => ({ open: false, query: '', items: [], index: 0, x: 0, y: 0 }),
+      update: (state, msg) => {
+        switch (msg.type) {
+          case 'show':
+            return {
+              open: msg.items.length > 0,
+              query: msg.query,
+              items: withActive(msg.items, 0),
+              index: 0,
+              x: msg.x,
+              y: msg.y,
+            }
+          case 'hide':
+            return hideOverlay(state)
+          case 'move': {
+            if (!state.open || state.items.length === 0) return state
+            const index = (state.index + msg.delta + state.items.length) % state.items.length
+            return { ...state, index, items: withActive(state.items, index) }
+          }
+          case 'choose': {
+            const item = state.items[state.index]
+            if (!state.open || !item) return hideOverlay(state)
+            return [{ ...state, open: false }, [{ type: 'run', id: item.id, query: state.query }]]
+          }
+          case 'click': {
+            const item = state.items[msg.index]
+            if (!item) return state
+            return [{ ...state, open: false }, [{ type: 'run', id: item.id, query: state.query }]]
+          }
+        }
+      },
+      onEffect: (effect, ctx) => {
+        const editor = ctx.editor()
+        if (!editor) return
+        // Remove the typed "/query" before running the command.
+        editor.update(() => {
+          const selection = $getSelection()
+          if (!$isRangeSelection(selection) || !selection.isCollapsed()) return
+          const node = selection.anchor.getNode()
+          if (!$isTextNode(node)) return
+          const offset = selection.anchor.offset
+          const start = offset - effect.query.length - 1
+          if (start >= 0) node.spliceText(start, effect.query.length + 1, '', true)
+        })
+        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.typeahead,
+          attrs: { 'data-scope': 'md-slash', 'data-part': 'root' },
+          children: () => [
+            each(state.at('items') as Signal<MenuRow[]>, {
+              key: (it) => it.id,
+              render: (item, index) => [
+                div(
+                  {
+                    'data-scope': 'md-slash',
+                    'data-part': 'option',
+                    'data-active': item.map((it) => (it.active ? '' : undefined)),
+                    onMouseDown: (e: MouseEvent) => {
+                      e.preventDefault()
+                      send({ type: 'click', index: index.peek() })
+                    },
+                  },
+                  [text(item.map((it) => it.label))],
+                ),
+              ],
+            }),
+          ],
+        }),
+    }),
+  }
+}

package/src/plugins/table.ts

@@ -0,0 +1,281 @@
+// Table plugin — GFM tables backed by @lexical/table nodes, with a hand-written
+// multiline transformer that imports `| a | b |` syntax to a TableNode and
+// exports it back. Cells are ordinary editable paragraphs.
+//
+// Place `tablePlugin()` before `corePlugin()` so its multiline transformer is
+// tried ahead of the generic code-block one.
+
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  type LexicalNode,
+} from 'lexical'
+import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
+import {
+  $createTableCellNode,
+  $createTableNode,
+  $createTableRowNode,
+  $deleteTableColumnAtSelection,
+  $deleteTableRowAtSelection,
+  $getTableCellNodeFromLexicalNode,
+  $getTableNodeFromLexicalNodeOrThrow,
+  $insertTableColumnAtSelection,
+  $insertTableRowAtSelection,
+  $isTableNode,
+  $isTableSelection,
+  TableCellHeaderStates,
+  TableCellNode,
+  TableNode,
+  TableRowNode,
+} from '@lexical/table'
+import type { MultilineElementTransformer } from '@lexical/markdown'
+import { button, text } from '@llui/dom'
+import { definePluginUI } from './ui.js'
+import { OVERLAY_Z, hideOverlay, onViewportChange, overlayRoot } from './overlay.js'
+import type { MarkdownPlugin } from './types.js'
+
+interface TableToolsState {
+  open: boolean
+  x: number
+  y: number
+}
+
+type TableToolsMsg =
+  | { type: 'show'; x: number; y: number }
+  | { type: 'hide' }
+  | { type: 'op'; id: string }
+type TableToolsEffect = { type: 'run'; id: string }
+
+const TABLE_TOOLS: ReadonlyArray<{ id: string; label: string; title: string }> = [
+  { id: 'rowAbove', label: '↑＋', title: 'Insert row above' },
+  { id: 'rowBelow', label: '↓＋', title: 'Insert row below' },
+  { id: 'colLeft', label: '←＋', title: 'Insert column left' },
+  { id: 'colRight', label: '→＋', title: 'Insert column right' },
+  { id: 'delRow', label: '✕R', title: 'Delete row' },
+  { id: 'delCol', label: '✕C', title: 'Delete column' },
+  { id: 'delTable', label: '🗑', title: 'Delete table' },
+]
+
+/** Run a table editing operation against the current cell selection. */
+function $runTableOp(id: string): void {
+  switch (id) {
+    case 'rowAbove':
+      $insertTableRowAtSelection(false)
+      return
+    case 'rowBelow':
+      $insertTableRowAtSelection(true)
+      return
+    case 'colLeft':
+      $insertTableColumnAtSelection(false)
+      return
+    case 'colRight':
+      $insertTableColumnAtSelection(true)
+      return
+    case 'delRow':
+      $deleteTableRowAtSelection()
+      return
+    case 'delCol':
+      $deleteTableColumnAtSelection()
+      return
+    case 'delTable': {
+      const selection = $getSelection()
+      // A focused cell is a RangeSelection; a multi-cell drag is a TableSelection.
+      // Both carry an anchor pointing into a cell — accept either.
+      if (!$isRangeSelection(selection) && !$isTableSelection(selection)) return
+      const cell = $getTableCellNodeFromLexicalNode(selection.anchor.getNode())
+      if (cell) $getTableNodeFromLexicalNodeOrThrow(cell).remove()
+      return
+    }
+  }
+}
+
+function splitRow(line: string): string[] {
+  return line
+    .trim()
+    .replace(/^\|/, '')
+    .replace(/\|$/, '')
+    .split('|')
+    .map((c) => c.trim().replace(/\\\|/g, '|'))
+}
+
+function isSeparator(line: string | undefined): boolean {
+  return !!line && /^\s*\|?[\s:|-]*-[\s:|-]*\|?\s*$/.test(line) && line.includes('-')
+}
+
+function isRow(line: string | undefined): boolean {
+  return !!line && /^\s*\|.*\|\s*$/.test(line.trim())
+}
+
+function makeCell(textValue: string, header: boolean): TableCellNode {
+  const cell = $createTableCellNode(
+    header ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS,
+  )
+  cell.append($createParagraphNode().append($createTextNode(textValue)))
+  return cell
+}
+
+function buildTable(header: string[], body: string[][]): TableNode {
+  const table = $createTableNode()
+  const headerRow = $createTableRowNode()
+  for (const h of header) headerRow.append(makeCell(h, true))
+  table.append(headerRow)
+  for (const row of body) {
+    const tr = $createTableRowNode()
+    for (let i = 0; i < header.length; i++) tr.append(makeCell(row[i] ?? '', false))
+    table.append(tr)
+  }
+  return table
+}
+
+const TABLE_TRANSFORMER: MultilineElementTransformer = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
+  export: (node: LexicalNode): string | null => {
+    if (!$isTableNode(node)) return null
+    const rows = node.getChildren() as TableRowNode[]
+    if (rows.length === 0) return null
+    const lines: string[] = []
+    rows.forEach((row, ri) => {
+      const cells = row.getChildren() as TableCellNode[]
+      const texts = cells.map((c) => c.getTextContent().replace(/\|/g, '\\|').replace(/\n/g, ' '))
+      lines.push('| ' + texts.join(' | ') + ' |')
+      if (ri === 0) lines.push('| ' + texts.map(() => '---').join(' | ') + ' |')
+    })
+    return lines.join('\n')
+  },
+  regExpStart: /^\s*\|(.+)\|\s*$/,
+  handleImportAfterStartMatch: ({ lines, rootNode, startLineIndex }) => {
+    if (!isSeparator(lines[startLineIndex + 1])) return null // header must be followed by a separator
+    let end = startLineIndex + 2
+    const body: string[][] = []
+    while (end < lines.length && isRow(lines[end]) && !isSeparator(lines[end])) {
+      body.push(splitRow(lines[end]!))
+      end++
+    }
+    rootNode.append(buildTable(splitRow(lines[startLineIndex]!), body))
+    return [true, end - 1]
+  },
+  // Import is handled manually above; a multiline transformer still needs replace.
+  replace: () => false,
+  type: 'multiline-element',
+}
+
+export function tablePlugin(): MarkdownPlugin {
+  return {
+    name: 'table',
+    nodes: [TableNode, TableRowNode, TableCellNode],
+    transformers: [TABLE_TRANSFORMER],
+    // A contextual toolbar appears above the table whenever the selection is in a
+    // cell. It tracks the table's viewport rect, so it repositions on scroll/resize
+    // (not just on editor updates) and only re-emits when the rect actually moves.
+    register: (editor, ctx) => {
+      let lastKey: string | null = null
+      let lastX = NaN
+      let lastY = NaN
+      const refresh = (): void => {
+        const tableKey = editor.getEditorState().read(() => {
+          const selection = $getSelection()
+          // RangeSelection = caret in a cell; TableSelection = multi-cell drag.
+          if (!$isRangeSelection(selection) && !$isTableSelection(selection)) return null
+          const cell = $getTableCellNodeFromLexicalNode(selection.anchor.getNode())
+          return cell ? $getTableNodeFromLexicalNodeOrThrow(cell).getKey() : null
+        })
+        const el = tableKey ? editor.getElementByKey(tableKey) : null
+        if (!el) {
+          if (lastKey !== null) {
+            lastKey = null
+            lastX = NaN
+            lastY = NaN
+            ctx.emit({ type: 'plugin', name: 'table', msg: { type: 'hide' } })
+          }
+          return
+        }
+        const rect = el.getBoundingClientRect()
+        // Typing inside a cell never moves the table's top-left; skip the redundant
+        // emit so the overlay isn't reconciled on every keystroke.
+        if (tableKey === lastKey && rect.left === lastX && rect.top === lastY) return
+        lastKey = tableKey
+        lastX = rect.left
+        lastY = rect.top
+        ctx.emit({
+          type: 'plugin',
+          name: 'table',
+          msg: { type: 'show', x: rect.left, y: rect.top },
+        })
+      }
+      return mergeRegister(
+        editor.registerUpdateListener(() => refresh()),
+        onViewportChange(refresh),
+      )
+    },
+    ui: definePluginUI<TableToolsState, TableToolsMsg, TableToolsEffect>({
+      init: () => ({ open: false, x: 0, y: 0 }),
+      update: (state, msg) => {
+        switch (msg.type) {
+          case 'show':
+            return state.open && state.x === msg.x && state.y === msg.y
+              ? state
+              : { open: true, x: msg.x, y: msg.y }
+          case 'hide':
+            return hideOverlay(state)
+          case 'op':
+            return [state, [{ type: 'run', id: msg.id }]]
+        }
+      },
+      onEffect: (effect, ctx) => {
+        const editor = ctx.editor()
+        if (editor) editor.update(() => $runTableOp(effect.id))
+      },
+      view: ({ state, send }) =>
+        overlayRoot({
+          open: state.at('open'),
+          x: state.at('x'),
+          y: state.at('y'),
+          zIndex: OVERLAY_Z.tableTools,
+          // Lift the bar above the table's top edge.
+          transform: 'transform:translateY(-118%)',
+          attrs: { 'data-scope': 'md-table-tools', 'data-part': 'bar' },
+          children: () =>
+            TABLE_TOOLS.map((tool) =>
+              button(
+                {
+                  type: 'button',
+                  'data-scope': 'md-table-tools',
+                  'data-part': 'tool',
+                  title: tool.title,
+                  'aria-label': tool.title,
+                  onMouseDown: (e: MouseEvent) => {
+                    e.preventDefault()
+                    send({ type: 'op', id: tool.id })
+                  },
+                },
+                [text(tool.label)],
+              ),
+            ),
+        }),
+    }),
+    items: [
+      {
+        id: 'table',
+        label: 'Table',
+        icon: 'table',
+        group: 'insert',
+        keywords: ['grid', 'rows', 'columns'],
+        run: (editor) =>
+          editor.update(() =>
+            $insertNodeToNearestRoot(
+              buildTable(
+                ['Column 1', 'Column 2'],
+                [
+                  ['', ''],
+                  ['', ''],
+                ],
+              ),
+            ),
+          ),
+        surfaces: ['toolbar', 'slash', 'context'],
+      },
+    ],
+  }
+}