@pilotiq/tiptap 3.19.0 → 3.19.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pilotiq/tiptap
 
+## 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/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.1",
   "description": "Tiptap rich-text editor adapter for @pilotiq/pilotiq — slash menu, draggable blocks, custom-block API",
   "license": "MIT",
   "repository": {