@pilotiq/tiptap 3.19.0 → 3.19.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @pilotiq/tiptap
 
+## 3.19.2
+
+### Patch Changes
+
+- 6064202: AI inline diff: the removed/deleted side now keeps its original block formatting (#91).
+
+  Previously the deleted content was flattened with `textBetween()` / `node.textContent`, so a removed heading, list, FAQ, or other formatted block rendered as plain text next to the (correctly-formatted) inserted side. The deleted widget now serializes the baseline's real nodes via the schema's `DOMSerializer` — a removed `<h2>` stays an `<h2>`, a list keeps its `<ul><li>`, a FAQ keeps its wrappers. A single plain top-level paragraph edit still renders as the inline word-level diff (no regression). Applies to both inline and `lines` display modes.
+
+## 3.19.1
+
+### Patch Changes
+
+- ff44b8d: Show the inline mark toolbar on a bare caret inside a formatting mark.
+
+  The selection-based `FloatingToolbar` only appeared on a non-empty text selection, so a link or bold span couldn't be edited by just clicking into it (#156). Its show/hide decision now lives in a pure, exported `shouldShowFloatingToolbar(state)` predicate: a caret (empty selection) surfaces the toolbar when it sits inside one of the toolbar's marks (`bold` / `italic` / `strike` / `code` / `link`), non-empty ranges behave as before, and the callout/alert suppression from #155 still holds. Pinned by `floatingToolbarVisibility.dom.test.ts` against the real schema.
+
 ## 3.19.0
 
 ### Minor Changes

package/dist/extensions/AiInlineDiffExtension.js

@@ -34,6 +34,7 @@
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { DOMSerializer, Fragment } from '@tiptap/pm/model';
 import { ChangeSet } from 'prosemirror-changeset';
 export const aiInlineDiffPluginKey = new PluginKey('pilotiqAiInlineDiff');
 /** Read the active diff state, if any. Public for hosts that want to
@@ -73,6 +74,21 @@ export const AiInlineDiffExtension = Extension.create({
         color: rgb(153, 27, 27);
         padding: 0 0.125em;
       }
+      /* Structure-preserving deleted block (heading / list / faq / …):
+         keep the removed node's own formatting, tinted red + struck so it
+         still reads as "deleted". Block display so an <h2>/<ul>/faq lays
+         out as itself rather than collapsing inline. */
+      .${prefix}-deleted-block {
+        display: block;
+        background-color: rgba(254, 226, 226, 0.55);
+        color: rgb(153, 27, 27);
+        text-decoration: line-through;
+        text-decoration-color: rgba(220, 38, 38, 0.7);
+        border-radius: 2px;
+        padding: 0 0.25em;
+        opacity: 0.9;
+      }
+      .${prefix}-deleted-block > * { margin-top: 0; margin-bottom: 0; }
       .${prefix}-inserted-line {
         display: block;
         background-color: rgba(187, 247, 208, 0.45);
@@ -107,6 +123,7 @@ export const AiInlineDiffExtension = Extension.create({
         left: 0.25em;
         opacity: 0.7;
       }
+      .${prefix}-deleted-line > * { margin-top: 0; margin-bottom: 0; }
     `;
         document.head.appendChild(style);
     },
@@ -232,32 +249,72 @@ function buildDiffDecorations(state, ds, prefix) {
                 'data-pilotiq-ai-diff-id': ds.id,
             }));
         }
-        // Deleted text — pull from the baseline using the `fromA..toA` range.
-        // Render via a widget at the change's insert-point (or end of insert)
-        // so the deleted text appears immediately before / after the new run.
-        // Empty deletions (pure inserts) skip the widget.
+        // Deleted content — pull from the baseline using the `fromA..toA`
+        // range. Render via a widget at the change's insert-point so the
+        // deleted content appears immediately before the new run. Empty
+        // deletions (pure inserts) skip the widget.
         if (change.toA > change.fromA) {
-            const deletedText = ds.baseline.textBetween(change.fromA, change.toA, '\n', ' ');
-            if (deletedText.length > 0) {
-                decos.push(Decoration.widget(fromB, () => buildDeletedWidget(deletedText, prefix, ds.id), {
-                    side: -1,
-                    ignoreSelection: true,
-                    key: `pilotiq-ai-diff:deleted:${change.fromA}:${change.toA}`,
-                }));
-            }
+            decos.push(Decoration.widget(fromB, () => buildDeletedWidget(ds.baseline, change.fromA, change.toA, prefix, ds.id), {
+                side: -1,
+                ignoreSelection: true,
+                key: `pilotiq-ai-diff:deleted:${change.fromA}:${change.toA}`,
+            }));
         }
     }
     return DecorationSet.create(state.doc, decos);
 }
-function buildDeletedWidget(text, prefix, id) {
+/**
+ * Render the deleted side of a change preserving its ORIGINAL block
+ * formatting (heading / list / faq / alert / blockquote …) — bug #91.
+ *
+ * Strategy: collect the BASELINE top-level blocks the deleted range
+ * `fromA..toA` overlaps, each CUT to the overlapping span, and serialize
+ * those real nodes via the schema's `DOMSerializer`. A removed heading
+ * stays an `<h2>`, a removed list keeps its `<ul><li>`, a faq keeps its
+ * wrappers — because we serialize the node itself, not flattened text.
+ *
+ * The one exception is a single plain top-level paragraph: there the inline
+ * word-diff look (red strike-through text) reads better, and wrapping a
+ * one-word change in its `<p>` would stack it as a block and break the
+ * inline diff — so paragraphs stay text.
+ */
+function buildDeletedWidget(baseline, fromA, toA, prefix, id) {
     const root = document.createElement('span');
     root.className = `${prefix}-deleted`;
     root.setAttribute('data-pilotiq-ai-diff-id', id);
     root.contentEditable = 'false';
-    const inner = document.createElement('span');
-    inner.className = `${prefix}-deleted-text`;
-    inner.textContent = text;
-    root.appendChild(inner);
+    // Walk the baseline's top-level blocks; for each one the deleted range
+    // touches, keep the whole node when fully covered, else cut it to the
+    // overlapping slice (preserving the node's own wrapper either way).
+    const pieces = [];
+    baseline.forEach((child, offset) => {
+        if (Math.min(toA, offset + child.nodeSize) <= Math.max(fromA, offset))
+            return;
+        if (child.isAtom) {
+            pieces.push(child);
+            return;
+        }
+        const localFrom = Math.max(0, fromA - (offset + 1));
+        const localTo = Math.min(child.content.size, toA - (offset + 1));
+        if (localFrom <= 0 && localTo >= child.content.size) {
+            pieces.push(child);
+            return;
+        }
+        if (localTo <= localFrom)
+            return;
+        pieces.push(child.cut(localFrom, localTo));
+    });
+    if (pieces.length === 1 && pieces[0].type.name === 'paragraph') {
+        const inner = document.createElement('span');
+        inner.className = `${prefix}-deleted-text`;
+        inner.textContent = baseline.textBetween(fromA, toA, '\n', ' ');
+        root.appendChild(inner);
+        return root;
+    }
+    const block = document.createElement('span');
+    block.className = `${prefix}-deleted-block`;
+    block.appendChild(DOMSerializer.fromSchema(baseline.type.schema).serializeFragment(Fragment.fromArray(pieces)));
+    root.appendChild(block);
     return root;
 }
 /**
@@ -277,32 +334,36 @@ function buildDeletedWidget(text, prefix, id) {
  */
 function buildLineDiffDecorations(state, ds, prefix) {
     const decos = [];
-    const baseTexts = topLevelBlockTexts(ds.baseline);
+    const baseBlocks = topLevelBlocks(ds.baseline);
     const current = [];
     state.doc.forEach((node, pos) => {
         current.push({ text: node.textContent, pos, nodeSize: node.nodeSize });
     });
-    // Walk tokens with a pointer into the CURRENT doc's blocks. Removed
-    // baseline lines accumulate and flush as ONE widget anchored before
-    // the next current block (or at doc end), so consecutive deletions
-    // render as a contiguous red row group.
+    const schema = ds.baseline.type.schema;
+    // Walk tokens with a pointer into the CURRENT doc's blocks (`j`) and the
+    // BASELINE blocks (`bi`). Removed baseline BLOCKS (the real nodes, not
+    // their flattened text — bug #91) accumulate and flush as ONE widget
+    // anchored before the next current block (or at doc end), so consecutive
+    // deletions render as a contiguous red row group with their formatting.
     let j = 0;
+    let bi = 0;
     let pendingRemoved = [];
     const flushRemoved = (anchor) => {
         if (pendingRemoved.length === 0)
             return;
-        const lines = pendingRemoved;
+        const nodes = pendingRemoved;
         pendingRemoved = [];
-        decos.push(Decoration.widget(anchor, () => buildDeletedLinesWidget(lines.join('\n'), prefix, ds.id), {
+        decos.push(Decoration.widget(anchor, () => buildDeletedLinesWidget(nodes, schema, prefix, ds.id), {
             side: -1,
             ignoreSelection: true,
-            key: `pilotiq-ai-diff:deleted-lines:${anchor}:${lines.length}`,
+            key: `pilotiq-ai-diff:deleted-lines:${anchor}:${nodes.length}`,
         }));
     };
-    for (const tok of lcsBlockDiffTokens(baseTexts, current.map(c => c.text))) {
+    for (const tok of lcsBlockDiffTokens(baseBlocks.map(b => b.text), current.map(c => c.text))) {
         if (tok.kind === 'kept') {
             flushRemoved(current[j].pos);
             j++;
+            bi++;
             continue;
         }
         if (tok.kind === 'added') {
@@ -314,15 +375,16 @@ function buildLineDiffDecorations(state, ds, prefix) {
             j++;
             continue;
         }
-        // removed — baseline-only line; accumulate for the next flush.
-        pendingRemoved.push(tok.text);
+        // removed — baseline-only block; accumulate the real node for the flush.
+        pendingRemoved.push(baseBlocks[bi].node);
+        bi++;
     }
     flushRemoved(state.doc.content.size);
     return DecorationSet.create(state.doc, decos);
 }
-function topLevelBlockTexts(doc) {
+function topLevelBlocks(doc) {
     const out = [];
-    doc.forEach((node) => { out.push(node.textContent); });
+    doc.forEach((node) => { out.push({ text: node.textContent, node }); });
     return out;
 }
 /** Standard LCS walk over two block-text arrays, emitting tokens in
@@ -370,15 +432,18 @@ function lcsBlockDiffTokens(a, b) {
     out.reverse();
     return out;
 }
-function buildDeletedLinesWidget(text, prefix, id) {
+function buildDeletedLinesWidget(nodes, schema, prefix, id) {
     const root = document.createElement('div');
     root.className = `${prefix}-deleted-lines`;
     root.setAttribute('data-pilotiq-ai-diff-id', id);
     root.contentEditable = 'false';
-    for (const line of text.split('\n')) {
+    const serializer = DOMSerializer.fromSchema(schema);
+    for (const node of nodes) {
         const row = document.createElement('div');
         row.className = `${prefix}-deleted-line`;
-        row.textContent = line || ' ';
+        // Serialize the real node so a removed heading / list / faq keeps its
+        // structure (bug #91), instead of collapsing to one plain text row.
+        row.appendChild(serializer.serializeFragment(Fragment.from(node)));
         root.appendChild(row);
     }
     return root;

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export { AiInlineDiffExtension, aiInlineDiffPluginKey, getAiInlineDiffState, typ
 export { planReplaceBlock, planInsertBlockBefore, planDeleteBlock, planWrapBlocks, planUpdateBlockMark, 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';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -17,3 +17,4 @@ export { renderRichTextToHtml, isRichTextValue, } from './render.js';
 // editor — e.g. to parse the content-block HTML or drive the surgical-op
 // planners (`planInsertBlockBefore` & co.) in a test, without mounting React.
 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, } from './extensions/contentBlocks.js';
+export { shouldShowFloatingToolbar, TOOLBAR_MARKS } from './react/floatingToolbarVisibility.js';

package/dist/react/FloatingToolbar.d.ts

@@ -3,10 +3,12 @@ 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.
+ * Selection-based formatting toolbar. Visible on a non-empty range inside
+ * text content, AND on a bare caret sitting inside a formatting mark (so a
+ * link / bold span can be edited without selecting it first — #156). Inline
+ * marks (B/I/S/Code) are grouped together; Link sits after a separator since
+ * it's a different kind of action. Visibility is decided by the pure
+ * `shouldShowFloatingToolbar` predicate; this component only positions.
  */
 export declare function FloatingToolbar({ editor }: FloatingToolbarProps): import("react").JSX.Element;
 export {};

package/dist/react/FloatingToolbar.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 import { Dialog } from '@base-ui/react/dialog';
-import { isSelectionInAlert } from '../extensions/contentBlocks.js';
+import { shouldShowFloatingToolbar } from './floatingToolbarVisibility.js';
 /**
- * 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.
+ * Selection-based formatting toolbar. Visible on a non-empty range inside
+ * text content, AND on a bare caret sitting inside a formatting mark (so a
+ * link / bold span can be edited without selecting it first — #156). Inline
+ * marks (B/I/S/Code) are grouped together; Link sits after a separator since
+ * it's a different kind of action. Visibility is decided by the pure
+ * `shouldShowFloatingToolbar` predicate; this component only positions.
  */
 export function FloatingToolbar({ editor }) {
     const [pos, setPos] = useState(null);
@@ -15,24 +17,13 @@ export function FloatingToolbar({ editor }) {
     const [linkUrl, setLinkUrl] = useState('');
     useEffect(() => {
         const update = () => {
-            const { from, to, empty } = editor.state.selection;
-            if (empty) {
-                setPos(null);
-                return;
-            }
-            // The callout/alert block owns its content + chrome (the in-block gear
-            // menu); the inline mark toolbar shouldn't appear inside it — or when the
-            // whole block is picked via the drag handle (a NodeSelection) (#155).
-            if (isSelectionInAlert(editor.state.selection)) {
-                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) {
+            if (!shouldShowFloatingToolbar(editor.state)) {
                 setPos(null);
                 return;
             }
+            const { from, to } = editor.state.selection;
+            // For a bare caret `from === to`, so both coords resolve to the caret
+            // point and the toolbar centers above it.
             const start = editor.view.coordsAtPos(from);
             const end = editor.view.coordsAtPos(to);
             // Viewport-relative — pair with `position: fixed` below. The wrapper

package/dist/react/floatingToolbarVisibility.d.ts

@@ -0,0 +1,20 @@
+import type { EditorState } from '@tiptap/pm/state';
+/**
+ * Inline marks the `FloatingToolbar` can toggle — bold / italic / strike /
+ * code / link. A caret (empty selection) sitting inside any of these surfaces
+ * the toolbar so the formatting can be edited in place, without first
+ * selecting the text (#156).
+ */
+export declare const TOOLBAR_MARKS: readonly ["bold", "italic", "strike", "code", "link"];
+/**
+ * Whether the selection-based `FloatingToolbar` should be visible. A PURE
+ * decision (no DOM / coords) so it's unit-testable against the real schema:
+ *
+ *  - never inside a callout/alert block — it owns its own chrome (#155);
+ *  - a caret (empty selection) shows ONLY when it sits inside a formatting
+ *    mark (link / bold / …) so the mark can be edited without selecting (#156);
+ *  - a non-empty range shows whenever it actually spans inline content (the
+ *    `childCount === 0` guard skips degenerate full-block selections).
+ */
+export declare function shouldShowFloatingToolbar(state: EditorState): boolean;
+//# sourceMappingURL=floatingToolbarVisibility.d.ts.map

package/dist/react/floatingToolbarVisibility.js

@@ -0,0 +1,39 @@
+import { isSelectionInAlert } from '../extensions/contentBlocks.js';
+/**
+ * Inline marks the `FloatingToolbar` can toggle — bold / italic / strike /
+ * code / link. A caret (empty selection) sitting inside any of these surfaces
+ * the toolbar so the formatting can be edited in place, without first
+ * selecting the text (#156).
+ */
+export const TOOLBAR_MARKS = ['bold', 'italic', 'strike', 'code', 'link'];
+const TOOLBAR_MARK_SET = new Set(TOOLBAR_MARKS);
+/**
+ * True when the caret (an EMPTY selection) sits inside one of the toolbar's
+ * formatting marks. Reads `storedMarks` first (so the active mark at a typed
+ * boundary still counts), then the marks resolved at the cursor.
+ */
+function caretInToolbarMark(state) {
+    const sel = state.selection;
+    if (!sel.empty)
+        return false;
+    const marks = state.storedMarks ?? sel.$from.marks();
+    return marks.some((m) => TOOLBAR_MARK_SET.has(m.type.name));
+}
+/**
+ * Whether the selection-based `FloatingToolbar` should be visible. A PURE
+ * decision (no DOM / coords) so it's unit-testable against the real schema:
+ *
+ *  - never inside a callout/alert block — it owns its own chrome (#155);
+ *  - a caret (empty selection) shows ONLY when it sits inside a formatting
+ *    mark (link / bold / …) so the mark can be edited without selecting (#156);
+ *  - a non-empty range shows whenever it actually spans inline content (the
+ *    `childCount === 0` guard skips degenerate full-block selections).
+ */
+export function shouldShowFloatingToolbar(state) {
+    if (isSelectionInAlert(state.selection))
+        return false;
+    if (state.selection.empty)
+        return caretInToolbarMark(state);
+    const { from, to } = state.selection;
+    return state.doc.slice(from, to).content.childCount > 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pilotiq/tiptap",
-  "version": "3.19.0",
+  "version": "3.19.2",
   "description": "Tiptap rich-text editor adapter for @pilotiq/pilotiq — slash menu, draggable blocks, custom-block API",
   "license": "MIT",
   "repository": {