@pilotiq/tiptap 3.10.4 → 3.10.6

package/src/react/MentionMenu.tsx

@@ -1,120 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import type { MentionItem } from '../MentionProvider.js'
-
-/**
- * Mutable ref the document-level keydown listener in `TiptapEditor` reads.
- * `MentionMenu` installs its keyboard handler on mount, clears on unmount —
- * same protocol as `SlashMenu`'s `keyHandlerRef`.
- */
-export type MentionKeyHandlerRef = { current: ((event: KeyboardEvent) => boolean) | null }
-
-interface MentionMenuProps {
-  trigger:       string
-  items:         MentionItem[]
-  command:       (item: MentionItem) => void
-  keyHandlerRef: MentionKeyHandlerRef
-}
-
-/**
- * Floating list of mention items. Mirrors `SlashMenu` but uses the lighter
- * `MentionItem` shape (no command thunk per item — the `command` prop is
- * pre-curried by the Suggestion plugin).
- *
- * Optional `group` strings on items render as section headings; items
- * without a group land under "Suggestions".
- */
-export function MentionMenu({ trigger, items, command, keyHandlerRef }: MentionMenuProps) {
-  const [active, setActive] = useState(0)
-  const containerRef = useRef<HTMLDivElement | null>(null)
-
-  const grouped = useMemo(
-    () => groupBy(items, (it) => it.group ?? 'Suggestions'),
-    [items],
-  )
-  const renderOrder = useMemo(
-    () => Array.from(grouped.values()).flat(),
-    [grouped],
-  )
-
-  useEffect(() => { setActive(0) }, [renderOrder])
-
-  useEffect(() => {
-    const el = containerRef.current?.querySelector<HTMLElement>(`[data-index="${active}"]`)
-    el?.scrollIntoView({ block: 'nearest' })
-  }, [active])
-
-  useEffect(() => {
-    keyHandlerRef.current = (event) => {
-      const len = renderOrder.length
-      if (event.key === 'ArrowDown') {
-        setActive((i) => (len === 0 ? 0 : (i + 1) % len))
-        return true
-      }
-      if (event.key === 'ArrowUp') {
-        setActive((i) => (len === 0 ? 0 : (i - 1 + len) % len))
-        return true
-      }
-      if (event.key === 'Enter') {
-        const item = renderOrder[active]
-        if (item) command(item)
-        return true
-      }
-      return false
-    }
-    return () => { keyHandlerRef.current = null }
-  }, [renderOrder, active, command, keyHandlerRef])
-
-  if (renderOrder.length === 0) {
-    return (
-      <div className="px-3 py-2 text-xs text-muted-foreground">
-        No matches
-      </div>
-    )
-  }
-
-  let runningIndex = 0
-  return (
-    <div ref={containerRef} className="max-h-72 w-64 overflow-y-auto p-1 text-sm">
-      {Array.from(grouped.entries()).map(([groupName, groupItems]) => (
-        <div key={groupName}>
-          <div className="px-2 pt-2 pb-1 text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground">
-            {groupName}
-          </div>
-          {groupItems.map((item) => {
-            const idx = runningIndex++
-            const isActive = idx === active
-            return (
-              <button
-                key={item.id}
-                data-index={idx}
-                type="button"
-                onMouseDown={(e) => { e.preventDefault(); command(item) }}
-                onMouseEnter={() => setActive(idx)}
-                className={`flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left ${
-                  isActive ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/60'
-                }`}
-              >
-                <span className="flex size-6 items-center justify-center rounded border bg-background text-xs">
-                  {trigger}
-                </span>
-                <span className="flex-1">{item.label}</span>
-                <span className="text-xs text-muted-foreground">{item.id}</span>
-              </button>
-            )
-          })}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function groupBy<T>(items: T[], key: (item: T) => string): Map<string, T[]> {
-  const out = new Map<string, T[]>()
-  for (const item of items) {
-    const k = key(item)
-    const list = out.get(k)
-    if (list) list.push(item)
-    else out.set(k, [item])
-  }
-  return out
-}

package/src/react/Palette.tsx

@@ -1,86 +0,0 @@
-import { useState, type ReactNode } from 'react'
-import { Popover } from '@base-ui/react/popover'
-import type { ColorSwatch } from '../RichTextField.js'
-
-interface PaletteProps {
-  /** Trigger button — usually the toolbar's `textColor` / `highlight` button. */
-  trigger:        ReactNode
-  swatches:       ColorSwatch[]
-  /** Whether to render a free-form color picker below the swatches. */
-  custom:         boolean
-  /** Currently active color, when known. Used to show the highlight ring. */
-  activeColor?:   string | undefined
-  /** Pick a swatch (or the custom-picker value). */
-  onPick:         (value: string) => void
-  /** Clear the color (removes the mark). */
-  onClear:        () => void
-  clearLabel?:    string
-}
-
-/**
- * Swatch popover anchored to a toolbar button. Drives `textColor` and
- * `highlight` — both share the same UI shape, only the swatches and the
- * `onPick`/`onClear` wiring differ.
- *
- * Mounts open / closed itself; consumers don't manage the open state.
- */
-export function Palette({
-  trigger, swatches, custom, activeColor, onPick, onClear, clearLabel = 'No color',
-}: PaletteProps) {
-  const [open, setOpen] = useState(false)
-
-  const close = (): void => setOpen(false)
-  const pick  = (value: string): void => { onPick(value); close() }
-  const clear = (): void => { onClear(); close() }
-
-  return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger render={trigger as React.ReactElement} />
-      <Popover.Portal>
-        <Popover.Positioner side="bottom" align="start" sideOffset={6} className="isolate z-50">
-          <Popover.Popup
-            className="rounded-md border bg-popover p-2 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95"
-          >
-            <div className="grid grid-cols-5 gap-1">
-              {swatches.map((s) => {
-                const isActive = activeColor && activeColor.toLowerCase() === s.value.toLowerCase()
-                return (
-                  <button
-                    key={s.value}
-                    type="button"
-                    title={s.label}
-                    aria-label={s.label}
-                    aria-pressed={Boolean(isActive)}
-                    onClick={() => pick(s.value)}
-                    className={`h-6 w-6 rounded border transition-transform hover:scale-110 ${
-                      isActive ? 'ring-2 ring-ring ring-offset-1' : 'border-border/60'
-                    }`}
-                    style={{ background: s.value }}
-                  />
-                )
-              })}
-            </div>
-            {custom && (
-              <label className="mt-2 flex items-center justify-between gap-2 text-xs text-muted-foreground">
-                <span>Custom</span>
-                <input
-                  type="color"
-                  defaultValue={activeColor ?? '#000000'}
-                  onChange={(e) => onPick(e.target.value)}
-                  className="h-6 w-12 cursor-pointer rounded border-0 bg-transparent p-0"
-                />
-              </label>
-            )}
-            <button
-              type="button"
-              onClick={clear}
-              className="mt-2 w-full rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-            >
-              {clearLabel}
-            </button>
-          </Popover.Popup>
-        </Popover.Positioner>
-      </Popover.Portal>
-    </Popover.Root>
-  )
-}

package/src/react/SlashMenu.tsx

@@ -1,129 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import type { SlashItem } from '../extensions/SlashCommandExtension.js'
-
-/**
- * Mutable ref the document-level keydown listener in `TiptapEditor` reads.
- * `SlashMenu` installs its keyboard handler on mount, clears on unmount.
- */
-export type SlashKeyHandlerRef = { current: ((event: KeyboardEvent) => boolean) | null }
-
-interface SlashMenuProps {
-  items:         SlashItem[]
-  command:       (item: SlashItem) => void
-  keyHandlerRef: SlashKeyHandlerRef
-}
-
-/**
- * Floating list of slash items. Mounted by the Base UI Popover in
- * TiptapEditor; the popover's anchor is a virtual element, so we don't need
- * to position the menu ourselves.
- *
- * Keys: ArrowUp / ArrowDown to move, Enter to pick. Escape is handled in
- * `SlashCommandExtension.onKeyDown` (closes the popup directly).
- */
-export function SlashMenu({ items, command, keyHandlerRef }: SlashMenuProps) {
-  const [active, setActive] = useState(0)
-  const containerRef = useRef<HTMLDivElement | null>(null)
-
-  // Group items for visual organisation, then derive the flat render-order
-  // array. `items` is in plugin order (paragraph, h1, h2, h3, …) but we
-  // render grouped (Basic/Headings/Lists/Blocks). The active index must
-  // track render order — otherwise ArrowDown highlights item N visually
-  // but Enter inserts items[N] from the plugin-order array, which is a
-  // different item.
-  const grouped = useMemo(
-    () => groupBy(items, (it) => it.group ?? 'Other'),
-    [items],
-  )
-  const renderOrder = useMemo(
-    () => Array.from(grouped.values()).flat(),
-    [grouped],
-  )
-
-  // Reset selection when the filtered list changes.
-  useEffect(() => { setActive(0) }, [renderOrder])
-
-  // Keep the active item in view inside the scroll container.
-  useEffect(() => {
-    const el = containerRef.current?.querySelector<HTMLElement>(`[data-index="${active}"]`)
-    el?.scrollIntoView({ block: 'nearest' })
-  }, [active])
-
-  // Install the keyboard bridge for the document-level listener in
-  // TiptapEditor.
-  useEffect(() => {
-    keyHandlerRef.current = (event) => {
-      const len = renderOrder.length
-      if (event.key === 'ArrowDown') {
-        setActive((i) => (len === 0 ? 0 : (i + 1) % len))
-        return true
-      }
-      if (event.key === 'ArrowUp') {
-        setActive((i) => (len === 0 ? 0 : (i - 1 + len) % len))
-        return true
-      }
-      if (event.key === 'Enter') {
-        const item = renderOrder[active]
-        if (item) command(item)
-        return true
-      }
-      return false
-    }
-    return () => { keyHandlerRef.current = null }
-  }, [renderOrder, active, command, keyHandlerRef])
-
-  if (renderOrder.length === 0) {
-    return (
-      <div className="px-3 py-2 text-xs text-muted-foreground">
-        No matches
-      </div>
-    )
-  }
-
-  let runningIndex = 0
-  return (
-    <div ref={containerRef} className="max-h-72 w-64 overflow-y-auto p-1 text-sm">
-      {Array.from(grouped.entries()).map(([groupName, groupItems]) => (
-        <div key={groupName}>
-          <div className="px-2 pt-2 pb-1 text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground">
-            {groupName}
-          </div>
-          {groupItems.map((item) => {
-            const idx = runningIndex++
-            const isActive = idx === active
-            return (
-              <button
-                key={item.key}
-                data-index={idx}
-                type="button"
-                onMouseDown={(e) => { e.preventDefault(); command(item) }}
-                onMouseEnter={() => setActive(idx)}
-                className={`flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left ${
-                  isActive ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/60'
-                }`}
-              >
-                {item.icon && (
-                  <span className="flex size-6 items-center justify-center rounded border bg-background text-xs">
-                    {item.icon}
-                  </span>
-                )}
-                <span>{item.label}</span>
-              </button>
-            )
-          })}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function groupBy<T>(items: T[], key: (item: T) => string): Map<string, T[]> {
-  const out = new Map<string, T[]>()
-  for (const item of items) {
-    const k = key(item)
-    const list = out.get(k)
-    if (list) list.push(item)
-    else out.set(k, [item])
-  }
-  return out
-}

package/src/react/TableFloatingToolbar.tsx

@@ -1,154 +0,0 @@
-import { useEffect, useState } from 'react'
-import type { Editor } from '@tiptap/core'
-import { Tooltip } from '@base-ui/react/tooltip'
-import type { ToolbarButtonId } from '../RichTextField.js'
-import { TOOLBAR_BUTTONS, type ToolbarButtonDef } from './toolbarButtons.js'
-
-interface TableFloatingToolbarProps {
-  editor: Editor
-}
-
-/**
- * Cell-management toolbar shown whenever the cursor is inside a table. Pinned
- * to the top edge of the enclosing `<table>`, viewport-relative so it tracks
- * scroll without forcing the editor wrapper to be `position: relative`.
- *
- * Buttons map directly onto the table-* ids registered in `toolbarButtons.tsx`,
- * so the icons / disabled gates / commands stay in sync with the top-level
- * toolbar's table buttons.
- */
-const TABLE_BUTTON_GROUPS: ToolbarButtonId[][] = [
-  ['tableAddColumnBefore', 'tableAddColumnAfter', 'tableDeleteColumn'],
-  ['tableAddRowBefore',    'tableAddRowAfter',    'tableDeleteRow'],
-  ['tableMergeCells', 'tableSplitCell'],
-  ['tableToggleHeaderRow', 'tableToggleHeaderCell'],
-  ['tableDelete'],
-]
-
-export function TableFloatingToolbar({ editor }: TableFloatingToolbarProps) {
-  const [pos, setPos] = useState<{ top: number; left: number } | null>(null)
-  // Force re-render when the selection moves so isActive / isDisabled flip.
-  const [, setTick] = useState(0)
-
-  useEffect(() => {
-    const update = (): void => {
-      if (!editor.isActive('table')) { setPos(null); return }
-      const tableDom = findEnclosingTable(editor)
-      if (!tableDom) { setPos(null); return }
-      const rect = tableDom.getBoundingClientRect()
-      // Lift the toolbar above the table — height of the strip + breathing room.
-      // Bump if the strip grows.
-      const top  = rect.top - 44
-      const left = rect.left + rect.width / 2
-      setPos({ top, left })
-    }
-    const close = (): void => setPos(null)
-    update()
-    editor.on('selectionUpdate', update)
-    editor.on('transaction',     update)
-    editor.on('blur',             close)
-    window.addEventListener('scroll', update, true)
-    window.addEventListener('resize', update)
-    return () => {
-      editor.off('selectionUpdate', update)
-      editor.off('transaction',     update)
-      editor.off('blur',             close)
-      window.removeEventListener('scroll', update, true)
-      window.removeEventListener('resize', update)
-    }
-  }, [editor])
-
-  // Refresh the disabled/active state predicates on every tx — the buttons
-  // read these inline against the live editor.
-  useEffect(() => {
-    if (!editor) return
-    const bump = (): void => setTick((t) => t + 1)
-    editor.on('selectionUpdate', bump)
-    editor.on('transaction',     bump)
-    return () => {
-      editor.off('selectionUpdate', bump)
-      editor.off('transaction',     bump)
-    }
-  }, [editor])
-
-  if (!pos) return null
-
-  const groups = TABLE_BUTTON_GROUPS
-    .map((g) => g.map((id) => TOOLBAR_BUTTONS[id]).filter((b): b is ToolbarButtonDef => Boolean(b?.available)))
-    .filter((g) => g.length > 0)
-
-  return (
-    <Tooltip.Provider delay={400}>
-      <div
-        className="fixed z-40 flex items-center gap-0.5 rounded-md border bg-popover px-1 py-1 text-popover-foreground shadow-md"
-        style={{ top: pos.top, left: pos.left, transform: 'translateX(-50%)' }}
-        // mousedown shouldn't steal focus — keeps the cell selection alive
-        // while the command runs.
-        onMouseDown={(e) => { e.preventDefault() }}
-      >
-        {groups.map((group, gi) => (
-          <div key={gi} className="flex items-center gap-0.5">
-            {gi > 0 && <span aria-hidden className="mx-1 h-5 w-px shrink-0 bg-border" />}
-            {group.map((btn) => (
-              <TableButton key={btn.id} def={btn} editor={editor} />
-            ))}
-          </div>
-        ))}
-      </div>
-    </Tooltip.Provider>
-  )
-}
-
-function TableButton({ def, editor }: { def: ToolbarButtonDef; editor: Editor }) {
-  const active   = def.isActive?.(editor) ?? false
-  const disabled = def.isDisabled?.(editor) ?? false
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger
-        render={(props) => (
-          <button
-            {...props}
-            type="button"
-            disabled={disabled}
-            onClick={() => def.command(editor)}
-            className={`inline-flex h-7 w-7 items-center justify-center rounded text-foreground transition-colors disabled:opacity-50 disabled:pointer-events-none ${
-              active ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/60'
-            }`}
-            aria-label={def.label}
-            aria-pressed={active}
-          >
-            {def.icon}
-          </button>
-        )}
-      />
-      <Tooltip.Portal>
-        <Tooltip.Positioner side="top" sideOffset={6} className="isolate z-50">
-          <Tooltip.Popup className="rounded-md bg-foreground px-2 py-1 text-xs text-background shadow-md data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95">
-            {def.label}
-          </Tooltip.Popup>
-        </Tooltip.Positioner>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  )
-}
-
-/**
- * Walk up from the current selection to find the enclosing `<table>` DOM node.
- * Returns `null` if the cursor isn't inside one. Uses `view.domAtPos` rather
- * than walking the document tree — works even when the cell is inside a
- * resize-NodeView wrapper.
- */
-function findEnclosingTable(editor: Editor): HTMLElement | null {
-  const { from } = editor.state.selection
-  let dom: Node | null
-  try {
-    dom = editor.view.domAtPos(from).node
-  } catch {
-    return null
-  }
-  while (dom && dom !== editor.view.dom) {
-    if (dom instanceof HTMLElement && dom.tagName === 'TABLE') return dom
-    dom = dom.parentNode
-  }
-  return null
-}

package/src/react/TiptapEditor.dom.test.tsx

@@ -1,112 +0,0 @@
-import { describe, it } from 'node:test'
-import assert from 'node:assert/strict'
-import React from 'react'
-import { render, cleanup, waitFor } from '@testing-library/react'
-
-import { TiptapEditor } from './TiptapEditor.js'
-
-/**
- * Behavioral coverage for the rich-text field renderer. The matching
- * pure-data tests under `RichTextField.test.ts` cover `toMeta()` / option
- * resolution; this file proves the React renderer actually mounts in our
- * jsdom + RTL environment and produces the FormData wiring downstream
- * consumers depend on.
- *
- * Scope is deliberately narrow — slash menu, floating toolbar, mention
- * popover, side panel, and AI suggestion bridge all need additional
- * fixtures (focus traps, document-level key handlers, context providers)
- * and are covered by the playground + Playwright e2e suite. The asserts
- * here are the ones that would catch a "renderer crashes at mount" or
- * "hidden input wire-name drift" regression cheaply.
- */
-describe('TiptapEditor (DOM)', () => {
-  function renderEditor(opts: {
-    name:          string
-    defaultValue?: unknown
-    placeholder?:  string
-  }) {
-    const { name, defaultValue = '', placeholder = 'Write…' } = opts
-    return render(
-      <TiptapEditor
-        el={{ type: 'field', fieldType: 'richtext', name }}
-        name={name}
-        defaultValue={defaultValue}
-        required={false}
-        disabled={false}
-        placeholder={placeholder}
-      />,
-    )
-  }
-
-  it('mounts the editor on hydration and exposes the hidden FormData input', async () => {
-    const { container } = renderEditor({ name: 'bio' })
-    try {
-      // Initial render is the SSR placeholder gated on `mounted`. After
-      // the mount-effect flips, `ClientEditor` mounts → Tiptap defers
-      // editor construction to its own effect under `immediatelyRender:
-      // false` → the `.ProseMirror` contenteditable lands in the DOM.
-      await waitFor(() => {
-        assert.ok(
-          container.querySelector('.ProseMirror'),
-          'ProseMirror contenteditable mounts after hydration',
-        )
-      })
-      const hidden = container.querySelector<HTMLInputElement>(
-        'input[type="hidden"][name="bio"]',
-      )
-      assert.ok(hidden, 'hidden FormData input present alongside the editor')
-    } finally {
-      cleanup()
-    }
-  })
-
-  it('serializes a JSON `defaultValue` into the hidden input on first paint', async () => {
-    // Tiptap doc shape: paragraph with one text node. The renderer's
-    // `serializeForHidden` round-trips this verbatim under the default
-    // `storage: 'json'` setting, so the hidden input should hold the
-    // JSON string at the very first render (before the editor itself
-    // has even mounted — the SSR placeholder ships the same serialized
-    // value so submit-on-mount works).
-    const defaultValue = {
-      type:    'doc',
-      content: [
-        { type: 'paragraph', content: [{ type: 'text', text: 'hello' }] },
-      ],
-    }
-    const { container } = renderEditor({ name: 'body', defaultValue })
-    try {
-      const hidden = container.querySelector<HTMLInputElement>(
-        'input[type="hidden"][name="body"]',
-      )
-      assert.ok(hidden, 'hidden input present')
-      const parsed = JSON.parse(hidden.value)
-      assert.equal(parsed.type, 'doc', 'value parses to a doc')
-      assert.equal(parsed.content[0].content[0].text, 'hello')
-    } finally {
-      cleanup()
-    }
-  })
-
-  it('uses the field `name` for the hidden input wire-name', async () => {
-    // Pilotiq forms post FormData keyed by field name; renaming the wire
-    // input here would silently drop the field on submit. The non-default
-    // `name` ("article_body" with an underscore) doubles as a regression
-    // guard for any future serializer that tries to clean / normalize
-    // names — the value the host passes in is the value posted back.
-    const { container } = renderEditor({ name: 'article_body' })
-    try {
-      await waitFor(() => {
-        assert.ok(
-          container.querySelector('.ProseMirror'),
-          'editor mounted (post-hydration probe so the test isn\'t racing the SSR branch)',
-        )
-      })
-      const hidden = container.querySelector<HTMLInputElement>(
-        'input[type="hidden"][name="article_body"]',
-      )
-      assert.ok(hidden, 'wire-name matches `name` prop verbatim')
-    } finally {
-      cleanup()
-    }
-  })
-})