npm - @pilotiq/tiptap - Versions diffs - 3.19.2 → 4.0.0 - Mend

@pilotiq/tiptap 3.19.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/CHANGELOG.md +56 -0
package/dist/extensions/BlockNodeExtension.d.ts +0 -9
package/dist/extensions/BlockNodeExtension.js +0 -20
package/dist/extensions/{AiInlineDiffExtension.d.ts → InlineDiffExtension.d.ts} +23 -23
package/dist/extensions/{AiInlineDiffExtension.js → InlineDiffExtension.js} +33 -33
package/dist/extensions/{AiSuggestionExtension.d.ts → SuggestionChipExtension.d.ts} +29 -29
package/dist/extensions/{AiSuggestionExtension.js → SuggestionChipExtension.js} +52 -52
package/dist/index.d.ts +4 -4
package/dist/index.js +4 -4
package/dist/react/BlockNodeView.d.ts +23 -12
package/dist/react/BlockNodeView.js +55 -21
package/dist/react/CollabTextRenderer.js +16 -16
package/dist/react/MarkdownEditor.js +17 -17
package/dist/react/{AiSuggestionBanner.d.ts → SuggestionBanner.d.ts} +6 -6
package/dist/react/{AiSuggestionBanner.js → SuggestionBanner.js} +5 -5
package/dist/react/TiptapEditor.js +24 -59
package/dist/react/blockValues.d.ts +54 -0
package/dist/react/blockValues.js +161 -0
package/dist/react/floatingToolbarVisibility.d.ts +9 -2
package/dist/react/floatingToolbarVisibility.js +12 -3
package/dist/react/{useAiInlineDiff.d.ts → useInlineDiff.d.ts} +13 -13
package/dist/react/{useAiInlineDiff.js → useInlineDiff.js} +36 -19
package/dist/react/{useAiSuggestionBridge.d.ts → useSuggestionBridge.d.ts} +7 -7
package/dist/react/{useAiSuggestionBridge.js → useSuggestionBridge.js} +10 -10
package/dist/surgicalOps.d.ts +15 -2
package/dist/surgicalOps.js +50 -3
package/package.json +1 -1
package/dist/react/BlockSidePanel.d.ts +0 -105
package/dist/react/BlockSidePanel.js +0 -338

package/dist/extensions/{AiSuggestionExtension.js → SuggestionChipExtension.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { Decoration, DecorationSet } from '@tiptap/pm/view';
-export const aiSuggestionPluginKey = new PluginKey('pilotiqAiSuggestion');
+export const suggestionChipPluginKey = new PluginKey('pilotiqSuggestionChip');
 /**
  * Append or replace by id. Pure — exported for tests and so the same dedupe
  * shape can drive consumer-side mirror state.
@@ -55,7 +55,7 @@ export function sortForApproveAll(suggestions) {
  *
  * Usage:
  * ```ts
- * editor.commands.addAiSuggestion({
+ * editor.commands.addSuggestion({
  *   id:          'seo-1',
  *   from:        12,
  *   to:          18,
@@ -63,30 +63,30 @@ export function sortForApproveAll(suggestions) {
  *   source:      { agentLabel: 'SEO' },
  * })
  * // …user clicks ✓ on the chip, or:
- * editor.commands.approveAiSuggestion('seo-1')
+ * editor.commands.approveSuggestion('seo-1')
  * ```
  *
  * Mounted by default inside `TiptapEditor`; consumer code reaches it through
  * the editor's command surface.
  */
-export const AiSuggestionExtension = Extension.create({
-    name: 'pilotiqAiSuggestion',
+export const SuggestionChipExtension = Extension.create({
+    name: 'pilotiqSuggestionChip',
     addOptions() {
         return {
-            classPrefix: 'pilotiq-ai-suggestion',
+            classPrefix: 'pilotiq-suggestion',
         };
     },
     onCreate() {
         // Inject minimal default styles for the chip + strikethrough on first
         // mount so consumers see the visualization without wiring CSS. Idempotent
-        // via the `data-pilotiq-ai-suggestion-styles` sentinel; consumers who
+        // via the `data-pilotiq-suggestion-styles` sentinel; consumers who
         // want full control just add their own `<style>` with the same class
         // names (last wins — the cascade picks user overrides over our defaults
         // since the user stylesheet appears AFTER our injected one in `<head>`
         // when imported via Vite/Webpack, OR via higher specificity).
         if (typeof document === 'undefined')
             return;
-        const SENTINEL = 'data-pilotiq-ai-suggestion-styles';
+        const SENTINEL = 'data-pilotiq-suggestion-styles';
         if (document.head.querySelector(`style[${SENTINEL}]`))
             return;
         const prefix = this.options.classPrefix;
@@ -134,10 +134,10 @@ export const AiSuggestionExtension = Extension.create({
       /* Banner — bottom-of-editor strip for whole-field suggestions on rich
          surfaces (markdown / richtext). Sibling to the chip styles above;
          lives here so both ship via the same extension-mount sentinel.
-         Class names live under \`pilotiq-ai-banner-*\` (not \`-suggestion-\`)
+         Class names live under \`pilotiq-suggestion-banner-*\` (not \`-suggestion-\`)
          since the banner is a host-mounted React component, not a PM
          decoration. */
-      .pilotiq-ai-banner {
+      .pilotiq-suggestion-banner {
         display: flex;
         align-items: center;
         gap: 0.5rem;
@@ -150,15 +150,15 @@ export const AiSuggestionExtension = Extension.create({
         font-size: 0.875rem;
         line-height: 1.4;
       }
-      .pilotiq-ai-banner-icon { flex: 0 0 auto; }
-      .pilotiq-ai-banner-label { flex: 1 1 auto; }
-      .pilotiq-ai-banner-actions {
+      .pilotiq-suggestion-banner-icon { flex: 0 0 auto; }
+      .pilotiq-suggestion-banner-label { flex: 1 1 auto; }
+      .pilotiq-suggestion-banner-actions {
         display: inline-flex;
         gap: 0.375rem;
         flex: 0 0 auto;
       }
-      .pilotiq-ai-banner-reject,
-      .pilotiq-ai-banner-accept {
+      .pilotiq-suggestion-banner-reject,
+      .pilotiq-suggestion-banner-accept {
         appearance: none;
         cursor: pointer;
         font-size: 0.8125rem;
@@ -168,50 +168,50 @@ export const AiSuggestionExtension = Extension.create({
         border-radius: 0.25rem;
         border: 1px solid transparent;
       }
-      .pilotiq-ai-banner-reject {
+      .pilotiq-suggestion-banner-reject {
         background-color: transparent;
         color: rgb(120, 53, 15);
         border-color: rgba(180, 83, 9, 0.4);
       }
-      .pilotiq-ai-banner-reject:hover {
+      .pilotiq-suggestion-banner-reject:hover {
         background-color: rgba(254, 215, 170, 0.4);
       }
-      .pilotiq-ai-banner-accept {
+      .pilotiq-suggestion-banner-accept {
         background-color: rgb(22, 101, 52);
         color: white;
       }
-      .pilotiq-ai-banner-accept:hover { background-color: rgb(21, 128, 61); }
+      .pilotiq-suggestion-banner-accept:hover { background-color: rgb(21, 128, 61); }
     `;
         document.head.appendChild(style);
     },
     addCommands() {
         return {
-            addAiSuggestion: (suggestion) => ({ tr, state, dispatch }) => {
-                const current = aiSuggestionPluginKey.getState(state)?.suggestions ?? [];
+            addSuggestion: (suggestion) => ({ tr, state, dispatch }) => {
+                const current = suggestionChipPluginKey.getState(state)?.suggestions ?? [];
                 const next = upsertSuggestion(current, suggestion);
                 if (dispatch) {
-                    tr.setMeta(aiSuggestionPluginKey, { type: 'set', next });
+                    tr.setMeta(suggestionChipPluginKey, { type: 'set', next });
                     dispatch(tr);
                 }
                 return true;
             },
-            addAiSuggestions: (suggestions) => ({ tr, state, dispatch }) => {
-                const current = aiSuggestionPluginKey.getState(state)?.suggestions ?? [];
+            addSuggestions: (suggestions) => ({ tr, state, dispatch }) => {
+                const current = suggestionChipPluginKey.getState(state)?.suggestions ?? [];
                 const next = upsertSuggestions(current, suggestions);
                 if (dispatch) {
-                    tr.setMeta(aiSuggestionPluginKey, { type: 'set', next });
+                    tr.setMeta(suggestionChipPluginKey, { type: 'set', next });
                     dispatch(tr);
                 }
                 return true;
             },
-            approveAiSuggestion: (id) => ({ tr, state, dispatch }) => {
-                const current = aiSuggestionPluginKey.getState(state)?.suggestions ?? [];
+            approveSuggestion: (id) => ({ tr, state, dispatch }) => {
+                const current = suggestionChipPluginKey.getState(state)?.suggestions ?? [];
                 const target = current.find(s => s.id === id);
                 if (!target)
                     return false;
                 if (dispatch) {
                     applyApprove(tr, state, target);
-                    tr.setMeta(aiSuggestionPluginKey, {
+                    tr.setMeta(suggestionChipPluginKey, {
                         type: 'set',
                         next: removeSuggestion(current, id),
                     });
@@ -219,13 +219,13 @@ export const AiSuggestionExtension = Extension.create({
                 }
                 return true;
             },
-            rejectAiSuggestion: (id) => ({ tr, state, dispatch }) => {
-                const current = aiSuggestionPluginKey.getState(state)?.suggestions ?? [];
+            rejectSuggestion: (id) => ({ tr, state, dispatch }) => {
+                const current = suggestionChipPluginKey.getState(state)?.suggestions ?? [];
                 const target = current.find(s => s.id === id);
                 if (!target)
                     return false;
                 if (dispatch) {
-                    tr.setMeta(aiSuggestionPluginKey, {
+                    tr.setMeta(suggestionChipPluginKey, {
                         type: 'set',
                         next: removeSuggestion(current, id),
                     });
@@ -233,14 +233,14 @@ export const AiSuggestionExtension = Extension.create({
                 }
                 return true;
             },
-            approveAllAiSuggestions: () => ({ tr, state, dispatch }) => {
-                const current = aiSuggestionPluginKey.getState(state)?.suggestions ?? [];
+            approveAllSuggestions: () => ({ tr, state, dispatch }) => {
+                const current = suggestionChipPluginKey.getState(state)?.suggestions ?? [];
                 if (current.length === 0)
                     return false;
                 if (dispatch) {
                     for (const s of sortForApproveAll(current))
                         applyApprove(tr, state, s);
-                    tr.setMeta(aiSuggestionPluginKey, {
+                    tr.setMeta(suggestionChipPluginKey, {
                         type: 'set',
                         next: [],
                     });
@@ -248,12 +248,12 @@ export const AiSuggestionExtension = Extension.create({
                 }
                 return true;
             },
-            rejectAllAiSuggestions: () => ({ tr, state, dispatch }) => {
-                const current = aiSuggestionPluginKey.getState(state)?.suggestions ?? [];
+            rejectAllSuggestions: () => ({ tr, state, dispatch }) => {
+                const current = suggestionChipPluginKey.getState(state)?.suggestions ?? [];
                 if (current.length === 0)
                     return false;
                 if (dispatch) {
-                    tr.setMeta(aiSuggestionPluginKey, {
+                    tr.setMeta(suggestionChipPluginKey, {
                         type: 'set',
                         next: [],
                     });
@@ -261,12 +261,12 @@ export const AiSuggestionExtension = Extension.create({
                 }
                 return true;
             },
-            clearAiSuggestions: () => ({ tr, state, dispatch }) => {
-                const current = aiSuggestionPluginKey.getState(state)?.suggestions ?? [];
+            clearSuggestions: () => ({ tr, state, dispatch }) => {
+                const current = suggestionChipPluginKey.getState(state)?.suggestions ?? [];
                 if (current.length === 0)
                     return false;
                 if (dispatch) {
-                    tr.setMeta(aiSuggestionPluginKey, {
+                    tr.setMeta(suggestionChipPluginKey, {
                         type: 'set',
                         next: [],
                     });
@@ -280,11 +280,11 @@ export const AiSuggestionExtension = Extension.create({
         const ext = this;
         return [
             new Plugin({
-                key: aiSuggestionPluginKey,
+                key: suggestionChipPluginKey,
                 state: {
                     init: () => ({ suggestions: [] }),
                     apply(tr, prev) {
-                        const meta = tr.getMeta(aiSuggestionPluginKey);
+                        const meta = tr.getMeta(suggestionChipPluginKey);
                         const base = meta?.type === 'set' ? meta.next : prev.suggestions;
                         if (!tr.docChanged)
                             return { suggestions: base };
@@ -295,17 +295,17 @@ export const AiSuggestionExtension = Extension.create({
                 },
                 props: {
                     decorations(state) {
-                        const ps = aiSuggestionPluginKey.getState(state);
+                        const ps = suggestionChipPluginKey.getState(state);
                         if (!ps || ps.suggestions.length === 0)
                             return DecorationSet.empty;
                         return buildDecorations(state, ps.suggestions, ext.options.classPrefix, ext.editor);
                     },
                 },
                 view(view) {
-                    let last = aiSuggestionPluginKey.getState(view.state)?.suggestions;
+                    let last = suggestionChipPluginKey.getState(view.state)?.suggestions;
                     return {
                         update(updated) {
-                            const next = aiSuggestionPluginKey.getState(updated.state)?.suggestions;
+                            const next = suggestionChipPluginKey.getState(updated.state)?.suggestions;
                             if (next === last)
                                 return;
                             last = next;
@@ -344,13 +344,13 @@ function buildDecorations(state, suggestions, prefix, editor) {
         if (from < to) {
             decos.push(Decoration.inline(from, to, {
                 class: `${prefix}-original`,
-                'data-pilotiq-ai-suggestion-id': s.id,
+                'data-pilotiq-suggestion-id': s.id,
             }));
         }
         decos.push(Decoration.widget(to, () => buildChip(s, prefix, editor), {
             side: 1,
             ignoreSelection: true,
-            key: `pilotiq-ai-suggestion:${s.id}`,
+            key: `pilotiq-suggestion:${s.id}`,
         }));
     }
     return DecorationSet.create(state.doc, decos);
@@ -368,7 +368,7 @@ export function clampPos(pos, max) {
 function buildChip(s, prefix, editor) {
     const root = document.createElement('span');
     root.className = `${prefix}-chip`;
-    root.setAttribute('data-pilotiq-ai-suggestion-id', s.id);
+    root.setAttribute('data-pilotiq-suggestion-id', s.id);
     root.contentEditable = 'false';
     if (s.replacement.length > 0) {
         const insert = document.createElement('span');
@@ -377,16 +377,16 @@ function buildChip(s, prefix, editor) {
         root.appendChild(insert);
     }
     if (s.source?.agentLabel) {
-        root.setAttribute('data-pilotiq-ai-suggestion-source', s.source.agentLabel);
+        root.setAttribute('data-pilotiq-suggestion-source', s.source.agentLabel);
     }
     if (s.source?.agentSlug) {
-        root.setAttribute('data-pilotiq-ai-suggestion-source-slug', s.source.agentSlug);
+        root.setAttribute('data-pilotiq-suggestion-source-slug', s.source.agentSlug);
     }
     root.appendChild(buildButton(prefix, 'accept', '✓', 'Accept suggestion', () => {
-        editor.chain().focus().approveAiSuggestion(s.id).run();
+        editor.chain().focus().approveSuggestion(s.id).run();
     }));
     root.appendChild(buildButton(prefix, 'reject', '✕', 'Reject suggestion', () => {
-        editor.chain().focus().rejectAiSuggestion(s.id).run();
+        editor.chain().focus().rejectSuggestion(s.id).run();
     }));
     return root;
 }

package/dist/index.d.ts CHANGED Viewed

@@ -6,10 +6,10 @@ export { registerTiptap } from './register.js';
 export { createPlainTextEditor, plainTextOf, plainTextToDoc, type PlainTextEditorOptions, } from './PlainTextEditor.js';
 export { tiptap } from './plugin.js';
 export { TiptapEditor } from './react/TiptapEditor.js';
-export { AiSuggestionExtension, aiSuggestionPluginKey, upsertSuggestion, upsertSuggestions, removeSuggestion, remapSuggestions, sortForApproveAll, clampPos, type AiSuggestion, type AiSuggestionExtensionOptions, } from './extensions/AiSuggestionExtension.js';
-export { useAiSuggestionBridge } from './react/useAiSuggestionBridge.js';
-export { AiInlineDiffExtension, aiInlineDiffPluginKey, getAiInlineDiffState, type AiInlineDiffExtensionOptions, } from './extensions/AiInlineDiffExtension.js';
-export { planReplaceBlock, planInsertBlockBefore, planDeleteBlock, planWrapBlocks, planUpdateBlockMark, summarizeBlockStructure, type BlockMarkRange, type TransactionModifier, } from './surgicalOps.js';
+export { SuggestionChipExtension, suggestionChipPluginKey, upsertSuggestion, upsertSuggestions, removeSuggestion, remapSuggestions, sortForApproveAll, clampPos, type InlineSuggestion, type SuggestionChipExtensionOptions, } from './extensions/SuggestionChipExtension.js';
+export { useSuggestionBridge } from './react/useSuggestionBridge.js';
+export { InlineDiffExtension, inlineDiffPluginKey, getInlineDiffState, type InlineDiffExtensionOptions, } from './extensions/InlineDiffExtension.js';
+export { planReplaceBlock, planInsertBlockBefore, planDeleteBlock, planWrapBlocks, planUpdateBlockMark, planReplaceText, summarizeBlockStructure, type BlockMarkRange, type TransactionModifier, } from './surgicalOps.js';
 export { renderRichTextToHtml, isRichTextValue, type RenderRichTextOptions, type TiptapNode, type TiptapMark, } from './render.js';
 export { contentBlockNodes, Intro, Faq, FaqItem, FaqQuestion, FaqAnswer, Alert, AlertTitle, AlertBody, Summary, KeyTakeaways, ProsCons, ProsColumn, ConsColumn, ContentBlockKeymap, LabeledBlockExitKeymap, planExitLabeledBlock, isSelectionInAlert, ALERT_VARIANTS, ALERT_VARIANT_LABEL, coerceAlertType, type AlertType, } from './extensions/contentBlocks.js';
 export { shouldShowFloatingToolbar, TOOLBAR_MARKS } from './react/floatingToolbarVisibility.js';

package/dist/index.js CHANGED Viewed

@@ -6,10 +6,10 @@ export { registerTiptap } from './register.js';
 export { createPlainTextEditor, plainTextOf, plainTextToDoc, } from './PlainTextEditor.js';
 export { tiptap } from './plugin.js';
 export { TiptapEditor } from './react/TiptapEditor.js';
-export { AiSuggestionExtension, aiSuggestionPluginKey, upsertSuggestion, upsertSuggestions, removeSuggestion, remapSuggestions, sortForApproveAll, clampPos, } from './extensions/AiSuggestionExtension.js';
-export { useAiSuggestionBridge } from './react/useAiSuggestionBridge.js';
-export { AiInlineDiffExtension, aiInlineDiffPluginKey, getAiInlineDiffState, } from './extensions/AiInlineDiffExtension.js';
-export { planReplaceBlock, planInsertBlockBefore, planDeleteBlock, planWrapBlocks, planUpdateBlockMark, summarizeBlockStructure, } from './surgicalOps.js';
+export { SuggestionChipExtension, suggestionChipPluginKey, upsertSuggestion, upsertSuggestions, removeSuggestion, remapSuggestions, sortForApproveAll, clampPos, } from './extensions/SuggestionChipExtension.js';
+export { useSuggestionBridge } from './react/useSuggestionBridge.js';
+export { InlineDiffExtension, inlineDiffPluginKey, getInlineDiffState, } from './extensions/InlineDiffExtension.js';
+export { planReplaceBlock, planInsertBlockBefore, planDeleteBlock, planWrapBlocks, planUpdateBlockMark, planReplaceText, summarizeBlockStructure, } from './surgicalOps.js';
 export { renderRichTextToHtml, isRichTextValue, } from './render.js';
 // Default content-block node specs (Intro / FAQ / Alert / Summary / Key takeaways /
 // Pros & cons). `contentBlockNodes` is the exact array `TiptapEditor` registers,

package/dist/react/BlockNodeView.d.ts CHANGED Viewed

@@ -1,19 +1,30 @@
 import { type NodeViewProps } from '@tiptap/react';
 /**
- * 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.
+ * 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 summary card.
  *
- * 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.
+ * Editing is **inline** (accordion): clicking the card (or the Edit chevron)
+ * expands a panel below the summary that hosts the block's `Block.schema([…])`
+ * as a real pilotiq form via `<FormFields>`. Edits write straight back onto
+ * the node with `updateAttributes({ blockData })` on every change — the
+ * NodeView already owns the node, so there's no host bridge / side panel /
+ * position-remapping to thread through.
  *
- * If no `onEdit` is wired (e.g. a consumer that uses `BlockNodeExtension`
- * standalone without `TiptapEditor`'s panel), the Edit button is hidden.
+ * The form is rendered in a `contentEditable={false}` region and every input
+ * event is stopped from bubbling into ProseMirror, so the editor never treats
+ * the form inputs as document content or hijacks their focus/selection.
+ *
+ * Reads: each field's `defaultValue` is overridden from the block's stored
+ * `blockData`, snapshotted once per expand into `initialValuesRef`. Inputs are
+ * uncontrolled (outside a `FormStateProvider`, pilotiq's renderers fall back to
+ * `defaultValue`), so write-back transactions re-rendering the NodeView never
+ * reset the user's in-progress typing.
+ *
+ * Writes: container-level `onInput` / `onChange` delegation. Every change
+ * snapshots the whole form via `new FormData(formEl)` → `parseFormDataToNested`
+ * (rebuilds nested arrays/objects from dotted-path inputs like `items.0.title`)
+ * → `coerceBlockValues` (per-fieldType JSON parse / boolean / number coerce).
  */
 export declare function BlockNodeView(props: NodeViewProps): import("react").JSX.Element | null;
 //# sourceMappingURL=BlockNodeView.d.ts.map

package/dist/react/BlockNodeView.js CHANGED Viewed

@@ -1,33 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { NodeViewWrapper } from '@tiptap/react';
+import { FormFields, parseFormDataToNested } from '@pilotiq/pilotiq/react';
+import { coerceBlockValues } from './blockValues.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.
+ * 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 summary card.
  *
- * 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.
+ * Editing is **inline** (accordion): clicking the card (or the Edit chevron)
+ * expands a panel below the summary that hosts the block's `Block.schema([…])`
+ * as a real pilotiq form via `<FormFields>`. Edits write straight back onto
+ * the node with `updateAttributes({ blockData })` on every change — the
+ * NodeView already owns the node, so there's no host bridge / side panel /
+ * position-remapping to thread through.
  *
- * If no `onEdit` is wired (e.g. a consumer that uses `BlockNodeExtension`
- * standalone without `TiptapEditor`'s panel), the Edit button is hidden.
+ * The form is rendered in a `contentEditable={false}` region and every input
+ * event is stopped from bubbling into ProseMirror, so the editor never treats
+ * the form inputs as document content or hijacks their focus/selection.
+ *
+ * Reads: each field's `defaultValue` is overridden from the block's stored
+ * `blockData`, snapshotted once per expand into `initialValuesRef`. Inputs are
+ * uncontrolled (outside a `FormStateProvider`, pilotiq's renderers fall back to
+ * `defaultValue`), so write-back transactions re-rendering the NodeView never
+ * reset the user's in-progress typing.
+ *
+ * Writes: container-level `onInput` / `onChange` delegation. Every change
+ * snapshots the whole form via `new FormData(formEl)` → `parseFormDataToNested`
+ * (rebuilds nested arrays/objects from dotted-path inputs like `items.0.title`)
+ * → `coerceBlockValues` (per-fieldType JSON parse / boolean / number coerce).
  */
 export function BlockNodeView(props) {
-    const { editor, node, getPos, deleteNode } = props;
+    const { editor, node, deleteNode, updateAttributes } = props;
     const blockType = String(node.attrs['blockType'] ?? '');
     const blockData = node.attrs['blockData'] ?? {};
+    const editable = editor.isEditable;
     // 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'] ?? [];
-    const onEdit = blockExt?.options['onEdit'];
     const meta = blocks.find((b) => b.name === blockType);
+    const [expanded, setExpanded] = useState(false);
+    // Seeds the form's `defaultValue`s. Re-snapshotted from the live node each
+    // time the panel opens; not updated mid-edit (uncontrolled inputs hold their
+    // own state while open).
+    const initialValuesRef = useRef(blockData);
+    const formRef = useRef(null);
     // 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.
@@ -47,13 +66,28 @@ export function BlockNodeView(props) {
     })
         .filter(Boolean)
         .join(' · ') || meta.label;
-    const handleEdit = () => {
-        if (!onEdit)
+    const toggleExpanded = () => {
+        if (!editable)
             return;
-        const pos = getPos();
-        if (typeof pos !== 'number')
+        setExpanded((prev) => {
+            const next = !prev;
+            if (next) {
+                initialValuesRef.current =
+                    node.attrs['blockData'] ?? {};
+            }
+            return next;
+        });
+    };
+    const handleChange = () => {
+        const formEl = formRef.current;
+        if (!formEl)
             return;
-        onEdit(pos);
+        const raw = parseFormDataToNested(new FormData(formEl));
+        const coerced = coerceBlockValues(raw, meta.schema);
+        updateAttributes({ blockData: coerced });
     };
-    return (_jsx(NodeViewWrapper, { className: "pilotiq-block my-3 rounded-lg border bg-muted/30", children: _jsxs("div", { className: "flex items-start justify-between gap-2 px-3 py-2", children: [_jsxs("button", { type: "button", onClick: handleEdit, disabled: !onEdit, className: "flex items-center gap-2 text-left text-sm disabled:cursor-default", children: [meta.icon && _jsx("span", { "aria-hidden": "true", children: meta.icon }), _jsx("span", { className: "font-medium", children: meta.label }), _jsx("span", { className: "text-xs text-muted-foreground line-clamp-1", children: summary })] }), _jsxs("div", { className: "flex items-center gap-2", children: [onEdit && (_jsx("button", { type: "button", onClick: handleEdit, className: "text-xs text-muted-foreground hover:text-foreground", children: "Edit" })), _jsx("button", { type: "button", onClick: () => deleteNode(), className: "text-xs text-destructive hover:underline", children: "Remove" })] })] }) }));
+    return (_jsxs(NodeViewWrapper, { className: "pilotiq-block my-3 rounded-lg border bg-muted/30", children: [_jsxs("div", { className: "flex items-start justify-between gap-2 px-3 py-2", children: [_jsxs("button", { type: "button", onClick: toggleExpanded, disabled: !editable, className: "flex min-w-0 items-center gap-2 text-left text-sm disabled:cursor-default", children: [meta.icon && _jsx("span", { "aria-hidden": "true", children: meta.icon }), _jsx("span", { className: "font-medium", children: meta.label }), _jsx("span", { className: "line-clamp-1 text-xs text-muted-foreground", children: summary })] }), editable && (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: toggleExpanded, "aria-expanded": expanded, className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [expanded ? 'Done' : 'Edit', _jsx("svg", { viewBox: "0 0 24 24", className: 'size-3.5 transition-transform ' + (expanded ? 'rotate-180' : ''), fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("button", { type: "button", onClick: () => deleteNode(), className: "text-xs text-destructive hover:underline", children: "Remove" })] }))] }), expanded && editable && (
+            // contentEditable=false + event guards keep ProseMirror from treating
+            // the form inputs as document content or stealing their focus/caret.
+            _jsx("div", { contentEditable: false, className: "border-t px-3 py-3", onMouseDown: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), onKeyUp: (e) => e.stopPropagation(), onPaste: (e) => e.stopPropagation(), onDrop: (e) => e.stopPropagation(), children: _jsx("form", { ref: formRef, onInput: handleChange, onChange: handleChange, onSubmit: (e) => e.preventDefault(), className: "flex flex-col gap-3", children: _jsx(FormFields, { elements: meta.schema, values: initialValuesRef.current }) }) }))] }));
 }

package/dist/react/CollabTextRenderer.js CHANGED Viewed

@@ -5,11 +5,11 @@ 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, readAiDiffViewMarker } from './useAiInlineDiff.js';
-import { AiSuggestionBanner } from './AiSuggestionBanner.js';
+import { SuggestionChipExtension } from '../extensions/SuggestionChipExtension.js';
+import { InlineDiffExtension } from '../extensions/InlineDiffExtension.js';
+import { useSuggestionBridge } from './useSuggestionBridge.js';
+import { useInlineDiff, useIsInlineDiffActive, readDiffViewMarker } from './useInlineDiff.js';
+import { SuggestionBanner } from './SuggestionBanner.js';
 /**
  * Tiptap-backed plain-text editor for pilotiq's `TextField` / `TextareaField`
  * / similar single-line / multi-line text fields when collab is on.
@@ -100,11 +100,11 @@ export function CollabTextRenderer({ name, fragmentKey, multiline, defaultValue,
             // 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
+            // `<SuggestionBanner>` 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, AiInlineDiffExtension],
+            extensions: [...collabExtensions, SuggestionChipExtension, InlineDiffExtension],
             onUpdate: (text) => onChange(text),
             ...(onSubmit ? { onSubmit: () => { onSubmit(); return false; } } : {}),
             ...(className || editorAttributes
@@ -128,11 +128,11 @@ export function CollabTextRenderer({ name, fragmentKey, multiline, defaultValue,
         editor.setEditable(!disabled);
     }, [editor, disabled]);
     // Cross-package suggestion bridge — sync the host's
-    // `<PendingSuggestionsContext>` queue with the editor's `AiSuggestion`
+    // `<PendingSuggestionsContext>` queue with the editor's `InlineSuggestion`
     // extension. No-op when no provider is mounted (default no-op context).
     //
     // Whole-field suggestions do NOT synthesize a chip range anymore —
-    // they render through `useAiInlineDiff` below (same red/green inline
+    // they render through `useInlineDiff` 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
@@ -143,12 +143,12 @@ export function CollabTextRenderer({ name, fragmentKey, multiline, defaultValue,
             return;
         editor.commands.setContent(plainTextToDoc(value, !!multiline));
     };
-    useAiSuggestionBridge(editor ?? null, name, {
+    useSuggestionBridge(editor ?? null, name, {
         onApplyWholeField: applyWholeField,
     });
     // Inline diff for whole-field suggestions — plain-text shape: each
     // line wraps in a `paragraph` node, mirroring `plainTextToDoc`.
-    useAiInlineDiff(editor ?? null, name, {
+    useInlineDiff(editor ?? null, name, {
         parseSuggestion: (ed, value) => {
             try {
                 const node = ed.schema.nodeFromJSON(plainTextToDoc(value, !!multiline));
@@ -158,9 +158,9 @@ export function CollabTextRenderer({ name, fragmentKey, multiline, defaultValue,
                 return null;
             }
         },
-        resolveDisplayMode: () => readAiDiffViewMarker(name),
+        resolveDisplayMode: () => readDiffViewMarker(name),
     });
-    const isDiffActive = useIsAiInlineDiffActive(editor ?? null);
+    const isDiffActive = useIsInlineDiffActive(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`.
@@ -216,10 +216,10 @@ export function CollabTextRenderer({ name, fragmentKey, multiline, defaultValue,
     // 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
+    return (_jsxs(_Fragment, { children: [_jsx(EditorContent, { editor: editor }), _jsx(SuggestionBanner, { fieldName: name, onApplyWholeField: applyWholeField, ...(isDiffActive && editor
                     ? {
-                        onAcceptViaEditor: () => editor.commands.acceptAiInlineDiff(),
-                        onRejectViaEditor: () => editor.commands.rejectAiInlineDiff(),
+                        onAcceptViaEditor: () => editor.commands.acceptInlineDiff(),
+                        onRejectViaEditor: () => editor.commands.rejectInlineDiff(),
                     }
                     : {}) })] }));
 }