@pilotiq/tiptap 0.1.0

package/src/react/FloatingToolbar.tsx

@@ -0,0 +1,304 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import type { Editor } from '@tiptap/core'
+import { Tooltip } from '@base-ui/react/tooltip'
+import { Dialog } from '@base-ui/react/dialog'
+
+interface FloatingToolbarProps {
+  editor: Editor
+}
+
+/**
+ * Selection-based formatting toolbar. Visible whenever the editor has a
+ * non-empty range selection inside text content. Inline marks (B/I/S/Code)
+ * are grouped together; Link sits after a separator since it's a different
+ * kind of action.
+ */
+export function FloatingToolbar({ editor }: FloatingToolbarProps) {
+  const [pos,      setPos]      = useState<{ top: number; left: number } | null>(null)
+  const [linkOpen, setLinkOpen] = useState(false)
+  const [linkUrl,  setLinkUrl]  = useState('')
+
+  useEffect(() => {
+    const update = (): void => {
+      const { from, to, empty } = editor.state.selection
+      if (empty) { setPos(null); return }
+      // Don't show on full-block selections (e.g. clicking a custom block).
+      const slice = editor.state.doc.slice(from, to)
+      if (slice.content.childCount === 0) { setPos(null); return }
+      const start = editor.view.coordsAtPos(from)
+      const end   = editor.view.coordsAtPos(to)
+      // Viewport-relative — pair with `position: fixed` below. The wrapper
+      // around <EditorContent> is `position: relative`, so an absolute toolbar
+      // would be positioned relative to it instead of the viewport.
+      // Lift the toolbar above the selection. The value is the toolbar's full
+      // height plus a small breathing gap; bump if the toolbar grows.
+      const top  = Math.min(start.top, end.top) - 48
+      const left = (start.left + end.right) / 2
+      setPos({ top, left })
+    }
+    const close = (): void => setPos(null)
+    editor.on('selectionUpdate', update)
+    editor.on('blur', close)
+    // Keep the toolbar pinned to the selection when the page or any scroll
+    // ancestor scrolls (capture phase catches inner scrollers too).
+    window.addEventListener('scroll', update, true)
+    window.addEventListener('resize', update)
+    return () => {
+      editor.off('selectionUpdate', update)
+      editor.off('blur', close)
+      window.removeEventListener('scroll', update, true)
+      window.removeEventListener('resize', update)
+    }
+  }, [editor])
+
+  const openLinkDialog = (): void => {
+    const previousUrl = editor.getAttributes('link')['href'] as string | undefined
+    setLinkUrl(previousUrl ?? '')
+    setLinkOpen(true)
+  }
+
+  const applyLink = (): void => {
+    setLinkOpen(false)
+    const trimmed = linkUrl.trim()
+    if (trimmed === '') {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      return
+    }
+    editor.chain().focus().extendMarkRange('link').setLink({ href: trimmed }).run()
+  }
+
+  const removeLink = (): void => {
+    setLinkOpen(false)
+    editor.chain().focus().extendMarkRange('link').unsetLink().run()
+  }
+
+  const mod    = isMac() ? '⌘' : 'Ctrl+'
+  const isLink = editor.isActive('link')
+
+  return (
+    <>
+      {pos && (
+        <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%)' }}
+          >
+            <ToolbarButton
+              label={`Bold (${mod}B)`}
+              active={editor.isActive('bold')}
+              onClick={() => editor.chain().focus().toggleBold().run()}
+            >
+              <BoldIcon />
+            </ToolbarButton>
+            <ToolbarButton
+              label={`Italic (${mod}I)`}
+              active={editor.isActive('italic')}
+              onClick={() => editor.chain().focus().toggleItalic().run()}
+            >
+              <ItalicIcon />
+            </ToolbarButton>
+            <ToolbarButton
+              label={`Strikethrough (${mod}⇧X)`}
+              active={editor.isActive('strike')}
+              onClick={() => editor.chain().focus().toggleStrike().run()}
+            >
+              <StrikeIcon />
+            </ToolbarButton>
+            <ToolbarButton
+              label={`Code (${mod}E)`}
+              active={editor.isActive('code')}
+              onClick={() => editor.chain().focus().toggleCode().run()}
+            >
+              <CodeIcon />
+            </ToolbarButton>
+            <span aria-hidden className="mx-1 h-5 w-px shrink-0 bg-border" />
+            <ToolbarButton
+              label={isLink ? 'Edit link' : 'Add link'}
+              active={isLink}
+              onClick={openLinkDialog}
+            >
+              <LinkIcon />
+            </ToolbarButton>
+          </div>
+        </Tooltip.Provider>
+      )}
+      <LinkDialog
+        open={linkOpen}
+        onOpenChange={setLinkOpen}
+        url={linkUrl}
+        onUrlChange={setLinkUrl}
+        onApply={applyLink}
+        onRemove={isLink ? removeLink : null}
+        isEdit={isLink}
+      />
+    </>
+  )
+}
+
+function ToolbarButton({
+  label,
+  active,
+  onClick,
+  children,
+}: {
+  label: string
+  active: boolean
+  onClick: () => void
+  children: ReactNode
+}) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger
+        render={(props) => (
+          <button
+            {...props}
+            type="button"
+            // mousedown + preventDefault keeps editor focus so the selection
+            // (and therefore the toolbar) survives the click.
+            onMouseDown={(e) => { e.preventDefault(); onClick() }}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded text-foreground transition-colors ${
+              active ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/60'
+            }`}
+            aria-label={label}
+            aria-pressed={active}
+          >
+            {children}
+          </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">
+            {label}
+          </Tooltip.Popup>
+        </Tooltip.Positioner>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  )
+}
+
+function LinkDialog({
+  open,
+  onOpenChange,
+  url,
+  onUrlChange,
+  onApply,
+  onRemove,
+  isEdit,
+}: {
+  open:         boolean
+  onOpenChange: (open: boolean) => void
+  url:          string
+  onUrlChange:  (url: string) => void
+  onApply:      () => void
+  onRemove:     (() => void) | null
+  isEdit:       boolean
+}) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className="fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" />
+        <Dialog.Popup className="fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] sm:max-w-md translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg transition-[opacity,transform] duration-150 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0">
+          <Dialog.Title className="text-lg leading-none font-semibold">
+            {isEdit ? 'Edit link' : 'Add link'}
+          </Dialog.Title>
+          <input
+            type="url"
+            value={url}
+            onChange={(e) => onUrlChange(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                onApply()
+              }
+            }}
+            placeholder="https://example.com"
+            autoFocus
+            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+          <div className="flex flex-row-reverse items-center gap-2">
+            <button
+              type="button"
+              onClick={onApply}
+              className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+            >
+              {isEdit ? 'Update' : 'Add'}
+            </button>
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
+            >
+              Cancel
+            </button>
+            {onRemove && (
+              <button
+                type="button"
+                onClick={onRemove}
+                className="me-auto inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-destructive hover:bg-destructive/10"
+              >
+                Remove link
+              </button>
+            )}
+          </div>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+function isMac(): boolean {
+  if (typeof navigator === 'undefined') return false
+  // navigator.platform is deprecated but still the most reliable signal here.
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform)
+}
+
+// Inline SVG icons (lucide.dev paths). Kept inline so this package doesn't
+// pull `lucide-react` as a peer dep — the rest of @pilotiq/tiptap is already
+// inline-SVG (DragHandle).
+function BoldIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M6 12h9a4 4 0 0 1 0 8H6Z" />
+      <path d="M6 4h7a4 4 0 0 1 0 8H6Z" />
+    </svg>
+  )
+}
+
+function ItalicIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <line x1="19" y1="4" x2="10" y2="4" />
+      <line x1="14" y1="20" x2="5"  y2="20" />
+      <line x1="15" y1="4" x2="9"   y2="20" />
+    </svg>
+  )
+}
+
+function StrikeIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M16 4H9a3 3 0 0 0-2.83 4" />
+      <path d="M14 12a4 4 0 0 1 0 8H6" />
+      <line x1="4" y1="12" x2="20" y2="12" />
+    </svg>
+  )
+}
+
+function CodeIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  )
+}
+
+function LinkIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  )
+}

package/src/react/MentionMenu.tsx

@@ -0,0 +1,120 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,129 @@
+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
+}