@pilotiq/tiptap 3.10.4 → 3.10.6

package/src/plugin.test.ts

@@ -1,19 +0,0 @@
-import { describe, it } from 'node:test'
-import assert from 'node:assert/strict'
-import { getFieldRenderer } from '@pilotiq/pilotiq/react'
-import { Pilotiq } from '@pilotiq/pilotiq'
-import { tiptap } from './plugin.js'
-
-describe('tiptap() plugin', () => {
-  it('exposes a Pilotiq plugin shape', () => {
-    const plugin = tiptap()
-    assert.equal(plugin.name, '@pilotiq/tiptap')
-    assert.equal(typeof plugin.register, 'function')
-  })
-
-  it('plugins([tiptap()]) wires the richtext field renderer', () => {
-    Pilotiq.make('test').plugins([tiptap()])
-    const renderer = getFieldRenderer('richtext')
-    assert.equal(typeof renderer, 'function')
-  })
-})

package/src/plugin.ts

@@ -1,26 +0,0 @@
-import type { PilotiqPlugin } from '@pilotiq/pilotiq'
-import { registerTiptap } from './register.js'
-
-/**
- * Pilotiq plugin that registers the Tiptap rich-text renderer.
- *
- * Use with `Pilotiq.make(...).plugins([tiptap()])` instead of calling
- * `registerTiptap()` directly from your app's client entry — the plugin
- * runs through the panel module so it's wired in one place.
- *
- * @example
- * ```ts
- * import { Pilotiq } from '@pilotiq/pilotiq'
- * import { tiptap } from '@pilotiq/tiptap'
- *
- * Pilotiq.make('Admin').plugins([tiptap()])
- * ```
- */
-export function tiptap(): PilotiqPlugin {
-  return {
-    name: '@pilotiq/tiptap',
-    register() {
-      registerTiptap()
-    },
-  }
-}

package/src/react/AiSuggestionBanner.tsx

@@ -1,185 +0,0 @@
-import { useMemo } from 'react'
-import {
-  usePendingSuggestionsForField,
-  usePendingSuggestions,
-  type PendingSuggestion,
-} from '@pilotiq/pilotiq/react'
-
-/**
- * Bottom-of-editor banner UI for whole-field AI suggestions on Tiptap
- * surfaces whose content shape can't survive the inline chip widget's
- * plain-text replace (richtext, markdown). The chip path renders the
- * replacement via `Element.textContent = replacement` which surfaces raw
- * HTML / markdown as literal text — fine for plain `TextField`, ugly for
- * the others.
- *
- * Visible only when at least one pending suggestion targets this field
- * AND lacks `meta.editorRange` (i.e. a whole-field replacement from
- * `update_form_state`'s `set_value` op). Range-anchored suggestions stay
- * on the editor-side chip widget path — those have a precise location
- * the user wants to see in context.
- *
- * Phase 1 ships banner-only ("Changes suggested — Accept / Reject"); no
- * inline diff visualization yet. Phase 2 will replace the banner-only
- * UX with a `prosemirror-changeset`-driven inline diff on the editor's
- * doc itself, with the banner staying as the global Accept-all / Reject
- * control bar. See `[[project_pilotiq_text_field_tiptap_rules]]`.
- *
- * Approve runs the renderer-supplied `onApplyWholeField(value)` callback
- * AND dismisses the suggestion from the queue. Reject just dismisses
- * (no doc mutation). Multiple pending whole-field suggestions on the
- * same field stack — Accept all / Reject all collapse the queue in one
- * pass.
- */
-export interface AiSuggestionBannerProps {
-  /** Field name, matches the suggestion's `fieldName`. */
-  fieldName: string
-  /**
-   * Apply a whole-field suggestion to the underlying editor. Receives the
-   * raw `suggestedValue` string from the suggestion. The renderer wires
-   * its own content-shape-aware `setContent` here (markdown source for
-   * MarkdownEditor, HTML / JSON for TiptapEditor).
-   *
-   * Skipped when `onAcceptViaEditor` is supplied — that path means the
-   * editor already holds the proposed state via `AiInlineDiffExtension`,
-   * and Accept routes through `acceptAiInlineDiff()` instead. The host
-   * still calls `pendingSuggestions.approve(id)` afterwards to dismiss
-   * the queue entry.
-   */
-  onApplyWholeField: (suggestedValue: string) => void
-  /**
-   * Diff-aware Accept hook. When supplied, the banner calls this first
-   * (so the editor commits its diff state) and then dismisses via the
-   * context. `onApplyWholeField` is NOT called in this mode — the
-   * editor's current doc is already the accepted state.
-   *
-   * Sparse so the simple banner path (Phase 1, no diff) keeps its
-   * existing semantics.
-   */
-  onAcceptViaEditor?: () => void
-  /**
-   * Diff-aware Reject hook. When supplied, the banner calls this first
-   * (so the editor reverts to the baseline) and then dismisses via the
-   * context. Sparse — see `onAcceptViaEditor`.
-   */
-  onRejectViaEditor?: () => void
-  /** Optional class on the outer banner element. Defaults to a minimal styled chrome. */
-  className?: string
-}
-
-/**
- * Hook variant — returns banner state without rendering, for renderers
- * that want to compose their own chrome. Renderer-agnostic.
- */
-export function useAiSuggestionBanner(fieldName: string): {
-  pending:    readonly PendingSuggestion[]
-  approveAll: (apply: (value: string) => void) => void
-  rejectAll:  () => void
-} {
-  const { list, dismiss } = usePendingSuggestionsForField(fieldName)
-
-  // Only whole-field suggestions land in the banner. Range-anchored ones
-  // ride the editor chip widget.
-  const pending = useMemo(
-    () => list.filter(s => !hasEditorRange(s)),
-    [list],
-  )
-
-  const approveAll = (apply: (value: string) => void): void => {
-    for (const s of pending) {
-      if (typeof s.suggestedValue === 'string') apply(s.suggestedValue)
-      dismiss(s.id)
-    }
-  }
-
-  const rejectAll = (): void => {
-    for (const s of pending) dismiss(s.id)
-  }
-
-  return { pending, approveAll, rejectAll }
-}
-
-function hasEditorRange(s: PendingSuggestion): boolean {
-  const meta = (s.meta ?? {}) as Record<string, unknown>
-  const range = meta['editorRange'] as { from?: unknown; to?: unknown } | undefined
-  return !!(range && typeof range.from === 'number' && typeof range.to === 'number')
-}
-
-export function AiSuggestionBanner({
-  fieldName,
-  onApplyWholeField,
-  onAcceptViaEditor,
-  onRejectViaEditor,
-  className,
-}: AiSuggestionBannerProps): React.ReactElement | null {
-  const { pending, approveAll, rejectAll } = useAiSuggestionBanner(fieldName)
-  const { dismiss } = usePendingSuggestions()
-
-  if (pending.length === 0) return null
-
-  // First (and usually only) pending suggestion drives the agent-label
-  // display. Multiple-at-once is rare in practice — the banner shows the
-  // most recent producer to keep the chrome compact.
-  const head = pending[0]!
-  const sourceLabel = head.source?.agentLabel ?? null
-
-  const handleAccept = (): void => {
-    // Diff-active path — editor's current doc IS the accepted state.
-    // Commit via the editor command, then drop the queue entries.
-    if (onAcceptViaEditor) {
-      onAcceptViaEditor()
-      for (const s of pending) dismiss(s.id)
-      return
-    }
-    approveAll(onApplyWholeField)
-  }
-
-  const handleReject = (): void => {
-    // Diff-active path — editor still holds the proposed state; revert
-    // to the captured baseline before dismissing.
-    if (onRejectViaEditor) {
-      onRejectViaEditor()
-      for (const s of pending) dismiss(s.id)
-      return
-    }
-    rejectAll()
-  }
-
-  // Per-suggestion controls when there's more than one — keeps the UX
-  // discoverable. Single suggestion: Accept / Reject only.
-  const single = pending.length === 1
-
-  return (
-    <div
-      role="region"
-      aria-label="AI suggested changes"
-      data-pilotiq-ai-banner=""
-      className={className ?? 'pilotiq-ai-banner'}
-    >
-      <span className="pilotiq-ai-banner-icon" aria-hidden="true">💡</span>
-      <span className="pilotiq-ai-banner-label">
-        {single
-          ? sourceLabel
-            ? `Changes suggested by ${sourceLabel}`
-            : 'Changes suggested'
-          : `${pending.length} changes suggested`}
-      </span>
-      <div className="pilotiq-ai-banner-actions">
-        <button
-          type="button"
-          className="pilotiq-ai-banner-reject"
-          onClick={handleReject}
-        >
-          {single ? 'Reject' : 'Reject all'}
-        </button>
-        <button
-          type="button"
-          className="pilotiq-ai-banner-accept"
-          onClick={handleAccept}
-        >
-          {single ? 'Accept' : 'Accept all'}
-        </button>
-      </div>
-    </div>
-  )
-}

package/src/react/BlockNodeView.tsx

@@ -1,99 +0,0 @@
-import { useEffect } from 'react'
-import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react'
-import type { BlockMeta } from '../Block.js'
-
-/**
- * Generic React NodeView for the `pilotiqBlock` ProseMirror node. Reads
- * the block type from `node.attrs.blockType`, looks up its `BlockMeta`
- * in `BlockNodeExtension.options.blocks`, and renders a compact inline
- * summary card with an "Edit" button.
- *
- * Editing happens in a side panel hosted by `TiptapEditor`, NOT inline.
- * The NodeView fires `BlockNodeExtension.options.onEdit(getPos())` when
- * the Edit button is clicked; the host opens its panel anchored to the
- * editor wrapper. NodeViews live in a separate React tree from the host
- * editor, so the bridge has to go through extension options — context
- * doesn't cross trees.
- *
- * If no `onEdit` is wired (e.g. a consumer that uses `BlockNodeExtension`
- * standalone without `TiptapEditor`'s panel), the Edit button is hidden.
- */
-export function BlockNodeView(props: NodeViewProps) {
-  const { editor, node, getPos, deleteNode } = props
-  const blockType = String(node.attrs['blockType'] ?? '')
-  const blockData = (node.attrs['blockData'] as Record<string, unknown> | undefined) ?? {}
-
-  // Tiptap mounts NodeViews in a separate React tree, so we can't read the
-  // block registry through context. Pull it off the extension's options
-  // instead — set by RichTextField via BlockNodeExtension.configure({ blocks }).
-  const blockExt = editor.extensionManager.extensions.find((e) => e.name === 'pilotiqBlock')
-  const blocks   = (blockExt?.options['blocks'] as BlockMeta[] | undefined) ?? []
-  const onEdit   = blockExt?.options['onEdit'] as ((pos: number) => void) | undefined
-  const meta     = blocks.find((b) => b.name === blockType)
-
-  // Self-heal: a block with no `blockType` is malformed — almost always
-  // means a stale node from a prior buggy insert. Delete it on mount so
-  // the editor doesn't get stuck in an unrecoverable state.
-  useEffect(() => {
-    if (blockType === '') deleteNode()
-  }, [blockType, deleteNode])
-
-  if (!meta) {
-    if (blockType === '') return null
-    return (
-      <NodeViewWrapper className="my-2 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">
-        Unknown block type: <code>{blockType}</code>
-      </NodeViewWrapper>
-    )
-  }
-
-  const summary = meta.schema
-    .map((f) => {
-      const v = blockData[f.name]
-      return typeof v === 'string' && v ? v : ''
-    })
-    .filter(Boolean)
-    .join(' · ') || meta.label
-
-  const handleEdit = (): void => {
-    if (!onEdit) return
-    const pos = getPos()
-    if (typeof pos !== 'number') return
-    onEdit(pos)
-  }
-
-  return (
-    <NodeViewWrapper className="pilotiq-block my-3 rounded-lg border bg-muted/30">
-      <div className="flex items-start justify-between gap-2 px-3 py-2">
-        <button
-          type="button"
-          onClick={handleEdit}
-          disabled={!onEdit}
-          className="flex items-center gap-2 text-left text-sm disabled:cursor-default"
-        >
-          {meta.icon && <span aria-hidden="true">{meta.icon}</span>}
-          <span className="font-medium">{meta.label}</span>
-          <span className="text-xs text-muted-foreground line-clamp-1">{summary}</span>
-        </button>
-        <div className="flex items-center gap-2">
-          {onEdit && (
-            <button
-              type="button"
-              onClick={handleEdit}
-              className="text-xs text-muted-foreground hover:text-foreground"
-            >
-              Edit
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={() => deleteNode()}
-            className="text-xs text-destructive hover:underline"
-          >
-            Remove
-          </button>
-        </div>
-      </div>
-    </NodeViewWrapper>
-  )
-}

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

@@ -1,38 +0,0 @@
-import { describe, it } from 'node:test'
-import assert from 'node:assert/strict'
-import React from 'react'
-import { render, cleanup, screen } from '@testing-library/react'
-
-import { clampPanelWidth } from './BlockSidePanel.js'
-
-/**
- * Phase 6e proof-of-concept — exercise React Testing Library's
- * `render()` against the jsdom environment that `src/test/setup.ts`
- * boots. The pure helper `clampPanelWidth` is already covered by the
- * neighbouring `BlockSidePanel.test.ts`; this file proves the RTL
- * surface (render / screen / cleanup) actually works in the test
- * harness — every future component-level test for `BlockSidePanel`,
- * `Toolbar`, `SlashMenu`, etc. uses the same primitives.
- */
-describe('RTL render() (DOM)', () => {
-  it('renders a trivial React tree and queries it via `screen`', () => {
-    render(<div data-testid="probe">hello tiptap</div>)
-    try {
-      const node = screen.getByTestId('probe')
-      assert.equal(node.textContent, 'hello tiptap')
-    } finally {
-      cleanup()
-    }
-  })
-
-  it('exports clampPanelWidth as a stable pure helper (sanity)', () => {
-    // Cross-check: pure-data assertions still work alongside RTL
-    // mounts. `clampPanelWidth` is the helper tested via the
-    // pure-mode `BlockSidePanel.test.ts` already — re-asserting one
-    // case here confirms the dual-import surface (both pure tests
-    // and DOM tests in the same package) doesn't conflict.
-    assert.equal(clampPanelWidth(100), 240)
-    assert.equal(clampPanelWidth(320), 320)
-    assert.equal(clampPanelWidth(1000), 600)
-  })
-})