@pilotiq/tiptap 3.10.8 → 3.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pilotiq/tiptap
 
+## 3.11.0
+
+### Minor Changes
+
+- 30a802e: `CollabTextRenderer` (the Tiptap surface behind collab/AI `TextField` / `TextareaField`) now renders whole-field AI suggestions through `AiInlineDiffExtension` + `AiSuggestionBanner` — the same red/green inline diff and amber Accept/Reject banner `RichTextField` uses — instead of the legacy green-pill chip with ✓/✕. One review surface across every text shape. The chip bridge stays mounted for producer-supplied `editorRange` suggestions; `onApplyWholeField` remains the fallback when a suggestion can't parse.
+
 ## 3.10.8
 
 ### Patch Changes

package/dist/markdownExtension.js

@@ -129,7 +129,7 @@ var require_markdown_it_task_lists = __commonJS({
   }
 });
 
-// ../../node_modules/.pnpm/tiptap-markdown@0.9.0_@tiptap+core@3.22.4_@tiptap+pm@3.22.4_/node_modules/tiptap-markdown/dist/tiptap-markdown.es.js
+// ../../node_modules/.pnpm/tiptap-markdown@0.9.0_@tiptap+core@3.26.0_@tiptap+pm@3.26.0_/node_modules/tiptap-markdown/dist/tiptap-markdown.es.js
 import { Extension, Mark as Mark2, getHTMLFromFragment, Node as Node$1, extensions } from "@tiptap/core";
 
 // ../../node_modules/.pnpm/orderedmap@2.1.1/node_modules/orderedmap/dist/index.js
@@ -8859,7 +8859,7 @@ var MarkdownSerializerState = class {
   }
 };
 
-// ../../node_modules/.pnpm/tiptap-markdown@0.9.0_@tiptap+core@3.22.4_@tiptap+pm@3.22.4_/node_modules/tiptap-markdown/dist/tiptap-markdown.es.js
+// ../../node_modules/.pnpm/tiptap-markdown@0.9.0_@tiptap+core@3.26.0_@tiptap+pm@3.26.0_/node_modules/tiptap-markdown/dist/tiptap-markdown.es.js
 var import_markdown_it_task_lists = __toESM(require_markdown_it_task_lists(), 1);
 import { Fragment as Fragment2, DOMParser } from "@tiptap/pm/model";
 import { Plugin, PluginKey } from "@tiptap/pm/state";

package/dist/react/CollabTextRenderer.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
+import { Slice } from '@tiptap/pm/model';
 import { useCollabRoom, getCollabExtensions, } from '@pilotiq/pilotiq/react';
 import { useCollabSeed } from '@rudderjs/sync/react';
 import { createPlainTextEditor, plainTextOf, plainTextToDoc } from '../PlainTextEditor.js';
 import { AiSuggestionExtension } from '../extensions/AiSuggestionExtension.js';
+import { AiInlineDiffExtension } from '../extensions/AiInlineDiffExtension.js';
 import { useAiSuggestionBridge } from './useAiSuggestionBridge.js';
+import { useAiInlineDiff, useIsAiInlineDiffActive } from './useAiInlineDiff.js';
+import { AiSuggestionBanner } from './AiSuggestionBanner.js';
 /**
  * Tiptap-backed plain-text editor for pilotiq's `TextField` / `TextareaField`
  * / similar single-line / multi-line text fields when collab is on.
@@ -93,12 +97,14 @@ export function CollabTextRenderer({ name, fragmentKey, multiline, defaultValue,
             // seeds the fragment on first connect when it's still empty. When
             // collab is off, seed from defaultValue directly.
             content: collabActive ? '' : defaultValue,
-            // AI suggestions — always-on extension that tracks suggested edits as
-            // inline strikethrough + Approve/Reject chip widgets. Idle until the
-            // host calls `editor.commands.addAiSuggestion(...)` via the bridge below.
-            // Matches the `TiptapEditor` wiring so suggestion mode works uniformly
+            // AI suggestions — chip extension (producer-supplied range
+            // suggestions) + inline-diff extension (whole-field suggestions:
+            // red strikethrough on removed runs, green on inserted, with the
+            // `<AiSuggestionBanner>` Accept / Reject below). Both idle until
+            // a suggestion arrives via the bridges below. Matches the
+            // `TiptapEditor` wiring so the review surface reads identically
             // across RichTextField / MarkdownField / TextField+TextareaField.
-            extensions: [...collabExtensions, AiSuggestionExtension],
+            extensions: [...collabExtensions, AiSuggestionExtension, AiInlineDiffExtension],
             onUpdate: (text) => onChange(text),
             ...(onSubmit ? { onSubmit: () => { onSubmit(); return false; } } : {}),
             ...(className || editorAttributes
@@ -125,26 +131,35 @@ export function CollabTextRenderer({ name, fragmentKey, multiline, defaultValue,
     // `<PendingSuggestionsContext>` queue with the editor's `AiSuggestion`
     // extension. No-op when no provider is mounted (default no-op context).
     //
-    // Whole-field fallback: chat-driven suggestions (e.g. `update_form_state`)
-    // arrive without `meta.editorRange`. Plain-text editors opt into a
-    // synthesized full-doc range so the inline-diff chip (red strikethrough on
-    // the current value + green chip with the suggested text + ✓/✕ buttons)
-    // renders BEFORE the user approves. The extension's `applyApprove` is
-    // text-node-based which fits the plain-text schema exactly. The
-    // `onApplyWholeField` callback stays as a fallback for cases that don't
-    // synthesize (e.g. an empty doc — `from === to` skips the chip but the
-    // applier still needs to swap content).
+    // Whole-field suggestions do NOT synthesize a chip range anymore —
+    // they render through `useAiInlineDiff` below (same red/green inline
+    // diff + banner as `TiptapEditor`), replacing the old green-pill chip
+    // that read differently from the rich-text surface. The bridge stays
+    // mounted for producer-supplied `meta.editorRange` suggestions (precise
+    // anchors worth visualizing in place) and as the `onApplyWholeField`
+    // fallback when the diff path can't parse a suggestion.
+    const applyWholeField = (value) => {
+        if (!editor || editor.isDestroyed)
+            return;
+        editor.commands.setContent(plainTextToDoc(value, !!multiline));
+    };
     useAiSuggestionBridge(editor ?? null, name, {
-        synthesizeWholeFieldRange: (ed) => ({
-            from: 0,
-            to: ed.state.doc.content.size,
-        }),
-        onApplyWholeField: (value) => {
-            if (!editor || editor.isDestroyed)
-                return;
-            editor.commands.setContent(plainTextToDoc(value, !!multiline));
+        onApplyWholeField: applyWholeField,
+    });
+    // Inline diff for whole-field suggestions — plain-text shape: each
+    // line wraps in a `paragraph` node, mirroring `plainTextToDoc`.
+    useAiInlineDiff(editor ?? null, name, {
+        parseSuggestion: (ed, value) => {
+            try {
+                const node = ed.schema.nodeFromJSON(plainTextToDoc(value, !!multiline));
+                return new Slice(node.content, 0, 0);
+            }
+            catch {
+                return null;
+            }
         },
     });
+    const isDiffActive = useIsAiInlineDiffActive(editor ?? null);
     // First-load seed when collab is active. Collaboration starts the editor
     // empty regardless of `defaultValue`; once the room's first sync
     // resolves, `useCollabSeed` runs the callback inside `ydoc.transact`.
@@ -197,5 +212,13 @@ export function CollabTextRenderer({ name, fragmentKey, multiline, defaultValue,
         onChange(plainTextOf(editor));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [editor]);
-    return _jsx(EditorContent, { editor: editor });
+    // Banner mounts below the editor exactly like `TiptapEditor`'s — it
+    // renders nothing while no suggestion is pending for this field, so
+    // the single-line text surface keeps its normal footprint.
+    return (_jsxs(_Fragment, { children: [_jsx(EditorContent, { editor: editor }), _jsx(AiSuggestionBanner, { fieldName: name, onApplyWholeField: applyWholeField, ...(isDiffActive && editor
+                    ? {
+                        onAcceptViaEditor: () => editor.commands.acceptAiInlineDiff(),
+                        onRejectViaEditor: () => editor.commands.rejectAiInlineDiff(),
+                    }
+                    : {}) })] }));
 }

package/dist/test/setup.js

@@ -40,6 +40,9 @@ const globals = {
     KeyboardEvent: window.KeyboardEvent,
     CustomEvent: window.CustomEvent,
     DocumentFragment: window.DocumentFragment,
+    // prosemirror-view ≥1.41 probes `root instanceof ShadowRoot` while
+    // resolving the editor's event root.
+    ShadowRoot: window.ShadowRoot,
     Range: window.Range,
     Selection: window.Selection,
     MutationObserver: window.MutationObserver,
@@ -57,6 +60,15 @@ const globals = {
 for (const [k, v] of Object.entries(globals)) {
     Object.defineProperty(globalThis, k, { value: v, writable: true, configurable: true });
 }
+// jsdom has no layout engine and never implements elementFromPoint;
+// prosemirror-view ≥1.41 calls it during view initialization.
+if (typeof window.document.elementFromPoint !== 'function') {
+    Object.defineProperty(window.document, 'elementFromPoint', {
+        value: () => null,
+        writable: true,
+        configurable: true,
+    });
+}
 // React 19 + RTL require `IS_REACT_ACT_ENVIRONMENT` so `act()` warnings
 // don't fire on every render. Without it, Tiptap's mount cascade
 // produces dozens of warnings that swamp real test failures.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pilotiq/tiptap",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "Tiptap rich-text editor adapter for @pilotiq/pilotiq — slash menu, draggable blocks, custom-block API",
   "license": "MIT",
   "repository": {
@@ -91,7 +91,7 @@
     "react-dom": "^19",
     "tiptap-markdown": "^0.9",
     "typescript": "^5",
-    "@pilotiq/pilotiq": "^0.35.2"
+    "@pilotiq/pilotiq": "^0.37.0"
   },
   "author": "Suleiman Shahbari",
   "scripts": {