@pilotiq/tiptap 3.18.0 → 3.19.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @pilotiq/tiptap
 
+## 3.19.0
+
+### Minor Changes
+
+- 75875da: Slash menu: remove the Align left/center/right, Lead, Small, and Clear formatting
+  entries. These remain available as toolbar buttons; dropping them from the `/`
+  menu keeps it focused on real content blocks (closes #151, #152).
+
+### Patch Changes
+
+- 4b82d23: Don't show the inline mark toolbar inside the callout (alert) block.
+
+  The selection-based `FloatingToolbar` (bold / italic / strike / code / link) was appearing when text was selected inside an `alert` block, even though the callout owns its own content + chrome through the in-block gear menu (#155). Its `shouldShow` now bails when either selection endpoint sits inside an `alert` at any ancestor depth.
+
+- 4013010: Also hide the inline mark toolbar when the whole callout block is "picked".
+
+  Follow-up to the previous callout fix (#155): the `FloatingToolbar` still appeared when the entire `alert` block was selected via the drag handle, because that is a `NodeSelection` whose `$from` resolves to _before_ the node — so walking ancestors from `$from` never sees the `alert`. The alert-detection is now an exported `isSelectionInAlert(selection)` predicate that handles both a text/range selection inside the alert AND a whole-block `NodeSelection` on it, pinned by `contentBlockAlertSelection.dom.test.ts` against the real schema (including a real `NodeSelection` on the alert).
+
+- d09373b: Fix double-Enter trapping an empty node inside landmark blocks (`keyTakeaways` / `summary` / `intro`).
+
+  These blocks use `content: 'block+'`, so the default list-exit on double-Enter only _lifted_ the empty list item into a paragraph — a valid `block+` child — which stayed trapped inside the block instead of escaping it (#150). A new `LabeledBlockExitKeymap` (high priority, so it runs before `ListItem`'s `splitListItem`) intercepts the gesture: an empty trailing node (a paragraph, or the empty paragraph of a last list item) inside a landmark block is dropped and the cursor lands in a fresh paragraph _after_ the block, mirroring the FAQ block's Enter-flow. The empty-chain-only case replaces the now-useless block with a paragraph. The logic is exported as `planExitLabeledBlock` and pinned by a `contentBlockExit.dom.test.ts` contract test against the real schema.
+
 ## 3.18.0
 
 ### Minor Changes

package/dist/extensions/SlashCommandExtension.js

@@ -231,41 +231,6 @@ export function buildSlashItems(blocks, mergeTags, query, insert) {
                     insert.onInsertImage();
                 },
             }] : []),
-        {
-            key: 'align-left', label: 'Align left', icon: '⇤', group: 'Align',
-            searchKey: 'align left start',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setTextAlign('left').run(),
-        },
-        {
-            key: 'align-center', label: 'Align center', icon: '⇔', group: 'Align',
-            searchKey: 'align center middle',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setTextAlign('center').run(),
-        },
-        {
-            key: 'align-right', label: 'Align right', icon: '⇥', group: 'Align',
-            searchKey: 'align right end',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setTextAlign('right').run(),
-        },
-        {
-            key: 'clear-format', label: 'Clear formatting', icon: '⌫', group: 'Basic',
-            searchKey: 'clear formatting reset',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).clearNodes().unsetAllMarks().run(),
-        },
-        // Inline-mark size variants. Slash-menu form leaves the slash range in
-        // place rather than swallowing it, so the user runs the command on the
-        // word they were just typing — the alternative ("/lead" deletes the
-        // range, then user types more) requires re-positioning the cursor and
-        // breaks the "type-toggle-keep-typing" rhythm authors use most.
-        {
-            key: 'lead', label: 'Lead', icon: 'P+', group: 'Style',
-            searchKey: 'lead lede intro paragraph emphasis',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleMark('lead').run(),
-        },
-        {
-            key: 'small', label: 'Small', icon: 'P-', group: 'Style',
-            searchKey: 'small fine print footnote caption',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleMark('small').run(),
-        },
     ];
     const customs = blocks.map((b) => ({
         key: `block:${b.name}`,

package/dist/extensions/contentBlocks.d.ts

@@ -1,4 +1,5 @@
 import { Node, Extension } from '@tiptap/core';
+import { type EditorState, type Transaction, type Selection } from '@tiptap/pm/state';
 export { ALERT_VARIANTS, ALERT_VARIANT_LABEL, coerceAlertType, type AlertType } from './alertVariants.js';
 export declare const KeyTakeaways: Node<any, any>;
 export declare const Summary: Node<any, any>;
@@ -26,10 +27,40 @@ export declare const Alert: Node<any, any>;
 export declare const AlertTitle: Node<any, any>;
 /** The Alert body — the editable description (`block+`). */
 export declare const AlertBody: Node<any, any>;
+/**
+ * True when `selection` is the callout (`alert`) block or sits inside it.
+ * Used by `FloatingToolbar` to suppress the inline mark toolbar in callouts
+ * (#155). Two distinct cases:
+ *  - a text/range selection WITHIN the alert — its endpoints resolve to an
+ *    `alert` ancestor;
+ *  - the whole block PICKED via the drag handle — a `NodeSelection` on the
+ *    alert, whose `$from` resolves to *before* the node, so its ancestors are
+ *    the doc (not the alert) and the endpoint walk alone would miss it.
+ */
+export declare function isSelectionInAlert(selection: Selection): boolean;
 export declare const ProsCons: Node<any, any>;
 export declare const ProsColumn: Node<any, any>;
 export declare const ConsColumn: Node<any, any>;
 export declare const ContentBlockKeymap: Extension<any, any>;
+/**
+ * Plan the "exit a landmark block" Enter gesture. Returns a transaction
+ * modifier when the cursor sits in an EMPTY trailing node (a paragraph, or the
+ * empty paragraph of a last list item) inside a `block+` landmark block — the
+ * modifier removes that empty node and places the cursor in a paragraph after
+ * the block. Returns `null` when the gesture doesn't apply, so the keymap
+ * yields to the default Enter / list-split behaviour. Exported (alongside the
+ * `surgicalOps` planners) so it can be exercised against a real editor in a
+ * test without mounting React.
+ */
+export declare function planExitLabeledBlock(state: EditorState): ((tr: Transaction) => void) | null;
+/**
+ * Enter-to-exit for landmark blocks. A dedicated keymap at high priority so it
+ * runs BEFORE `ListItem`'s Enter (`splitListItem`, default priority 100) — and
+ * kept separate from `ContentBlockKeymap` so it doesn't change that keymap's
+ * Backspace priority (which would alter delete-block behaviour). Returns
+ * `false` when `planExitLabeledBlock` declines, yielding to the default Enter.
+ */
+export declare const LabeledBlockExitKeymap: Extension<any, any>;
 /** All inline content-block extensions — registered in the editor's list. */
 export declare const contentBlockNodes: (Node<any, any> | Extension<any, any>)[];
 //# sourceMappingURL=contentBlocks.d.ts.map

package/dist/extensions/contentBlocks.js

@@ -1,5 +1,6 @@
 import { Node, Extension, mergeAttributes } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
+import { TextSelection, NodeSelection } from '@tiptap/pm/state';
 import { AlertNodeView } from '../react/AlertNodeView.js';
 import { FaqNodeView } from '../react/FaqNodeView.js';
 import { FaqItemNodeView } from '../react/FaqItemNodeView.js';
@@ -501,6 +502,29 @@ export const AlertBody = Node.create({
         return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'alertBody', class: 'pilotiq-alert-description' }), 0];
     },
 });
+/** True when `$pos` sits inside an `alert` (callout) block at any ancestor depth. */
+function isInsideAlert($pos) {
+    for (let d = $pos.depth; d > 0; d--) {
+        if ($pos.node(d).type.name === 'alert')
+            return true;
+    }
+    return false;
+}
+/**
+ * True when `selection` is the callout (`alert`) block or sits inside it.
+ * Used by `FloatingToolbar` to suppress the inline mark toolbar in callouts
+ * (#155). Two distinct cases:
+ *  - a text/range selection WITHIN the alert — its endpoints resolve to an
+ *    `alert` ancestor;
+ *  - the whole block PICKED via the drag handle — a `NodeSelection` on the
+ *    alert, whose `$from` resolves to *before* the node, so its ancestors are
+ *    the doc (not the alert) and the endpoint walk alone would miss it.
+ */
+export function isSelectionInAlert(selection) {
+    if (selection instanceof NodeSelection && selection.node.type.name === 'alert')
+        return true;
+    return isInsideAlert(selection.$from) || isInsideAlert(selection.$to);
+}
 // ── Pros & cons — two labelled columns (each a `block+` body, list by default) ──
 export const ProsCons = Node.create({
     name: 'prosCons',
@@ -591,6 +615,111 @@ export const ContentBlockKeymap = Extension.create({
         };
     },
 });
+// ── Keyboard: Enter exits a landmark block from an empty trailing node ──
+//
+// Landmark blocks (`keyTakeaways` / `summary` / `intro`) use `content: 'block+'`.
+// The default double-Enter list-exit only *lifts* the empty list item into a
+// paragraph, which is a valid `block+` child — so it stays trapped inside the
+// block instead of escaping it (#150). This handler intercepts the gesture: an
+// empty trailing node (a paragraph, or an empty last list item) inside a
+// landmark block → drop it and land the cursor in a fresh paragraph AFTER the
+// block, mirroring the FAQ block's Enter-flow.
+const LANDMARK_BLOCKS = new Set(['keyTakeaways', 'summary', 'intro']);
+const LIST_CONTAINERS = new Set(['bulletList', 'orderedList', 'taskList']);
+const LIST_ITEMS = new Set(['listItem', 'taskItem']);
+/**
+ * Plan the "exit a landmark block" Enter gesture. Returns a transaction
+ * modifier when the cursor sits in an EMPTY trailing node (a paragraph, or the
+ * empty paragraph of a last list item) inside a `block+` landmark block — the
+ * modifier removes that empty node and places the cursor in a paragraph after
+ * the block. Returns `null` when the gesture doesn't apply, so the keymap
+ * yields to the default Enter / list-split behaviour. Exported (alongside the
+ * `surgicalOps` planners) so it can be exercised against a real editor in a
+ * test without mounting React.
+ */
+export function planExitLabeledBlock(state) {
+    const { $from, empty } = state.selection;
+    if (!empty)
+        return null;
+    // Cursor must be in an empty textblock (an empty paragraph / list-item body).
+    if (!$from.parent.isTextblock || $from.parent.content.size !== 0)
+        return null;
+    // Nearest landmark-block ancestor.
+    let blockDepth = -1;
+    for (let d = $from.depth - 1; d > 0; d--) {
+        if (LANDMARK_BLOCKS.has($from.node(d).type.name)) {
+            blockDepth = d;
+            break;
+        }
+    }
+    if (blockDepth === -1)
+        return null;
+    // The empty textblock must be the LAST descendant at every level down from
+    // the block — i.e. genuinely trailing, not an empty node mid-block.
+    for (let d = $from.depth; d > blockDepth; d--) {
+        if ($from.index(d - 1) !== $from.node(d - 1).childCount - 1)
+            return null;
+    }
+    // Climb past only-child LIST wrappers (the listItem / list holding the empty
+    // paragraph) so we drop the whole empty item, not just its inner paragraph —
+    // but never past a non-list single-child wrapper (e.g. a blockquote), which
+    // we'd leave illegally empty; bail to the default Enter in that case.
+    let removeDepth = $from.depth;
+    while (removeDepth > blockDepth + 1 &&
+        $from.node(removeDepth - 1).childCount === 1 &&
+        (LIST_ITEMS.has($from.node(removeDepth - 1).type.name) ||
+            LIST_CONTAINERS.has($from.node(removeDepth - 1).type.name))) {
+        removeDepth--;
+    }
+    // Removing this node would strand an empty non-list parent → let the default
+    // Enter handle it.
+    if (removeDepth > blockDepth + 1 && $from.node(removeDepth - 1).childCount === 1)
+        return null;
+    const block = $from.node(blockDepth);
+    const blockStart = $from.before(blockDepth);
+    const blockEnd = blockStart + block.nodeSize;
+    const paragraph = state.schema.nodes['paragraph']?.createAndFill();
+    if (!paragraph)
+        return null;
+    // The empty chain is the block's ONLY content → replace the whole (now
+    // useless) block with the empty paragraph.
+    if (removeDepth === blockDepth + 1 && block.childCount === 1) {
+        return (tr) => {
+            tr.replaceWith(blockStart, blockEnd, paragraph);
+            tr.setSelection(TextSelection.create(tr.doc, blockStart + 1));
+        };
+    }
+    // Otherwise drop the trailing empty node and add a paragraph after the block.
+    const removeStart = $from.before(removeDepth);
+    const removeEnd = removeStart + $from.node(removeDepth).nodeSize;
+    return (tr) => {
+        tr.delete(removeStart, removeEnd);
+        const after = tr.mapping.map(blockEnd);
+        tr.insert(after, paragraph);
+        tr.setSelection(TextSelection.create(tr.doc, after + 1));
+    };
+}
+/**
+ * Enter-to-exit for landmark blocks. A dedicated keymap at high priority so it
+ * runs BEFORE `ListItem`'s Enter (`splitListItem`, default priority 100) — and
+ * kept separate from `ContentBlockKeymap` so it doesn't change that keymap's
+ * Backspace priority (which would alter delete-block behaviour). Returns
+ * `false` when `planExitLabeledBlock` declines, yielding to the default Enter.
+ */
+export const LabeledBlockExitKeymap = Extension.create({
+    name: 'pilotiqLabeledBlockExitKeymap',
+    priority: 1000,
+    addKeyboardShortcuts() {
+        return {
+            Enter: ({ editor }) => {
+                const plan = planExitLabeledBlock(editor.state);
+                if (!plan)
+                    return false;
+                return editor.commands.command(({ tr }) => { plan(tr); return true; });
+            },
+        };
+    },
+});
 /** All inline content-block extensions — registered in the editor's list. */
 export const contentBlockNodes = [
     KeyTakeaways,
@@ -607,4 +736,5 @@ export const contentBlockNodes = [
     ProsColumn,
     ConsColumn,
     ContentBlockKeymap,
+    LabeledBlockExitKeymap,
 ];

package/dist/index.d.ts

@@ -11,5 +11,5 @@ 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 { 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, ALERT_VARIANTS, ALERT_VARIANT_LABEL, coerceAlertType, type AlertType, } from './extensions/contentBlocks.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';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -16,4 +16,4 @@ export { renderRichTextToHtml, isRichTextValue, } from './render.js';
 // so a consumer can build a headless editor whose schema matches the live
 // 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, ALERT_VARIANTS, ALERT_VARIANT_LABEL, coerceAlertType, } from './extensions/contentBlocks.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, } from './extensions/contentBlocks.js';

package/dist/react/FloatingToolbar.js

@@ -2,6 +2,7 @@ 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';
 /**
  * Selection-based formatting toolbar. Visible whenever the editor has a
  * non-empty range selection inside text content. Inline marks (B/I/S/Code)
@@ -19,6 +20,13 @@ export function FloatingToolbar({ editor }) {
                 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) {

package/package.json

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