neuphlo-editor 2.5.1 → 2.6.0

package/dist/react/menus/TableMenu.js

@@ -0,0 +1,462 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCurrentEditor, useEditorState } from "@tiptap/react";
+import { IconRowInsertBottom, IconColumnInsertRight, IconColumnInsertLeft, IconRowRemove, IconColumnRemove, IconTableRow, IconTableColumn, IconArrowMerge, IconArrowsSplit, IconTableOff, IconGripVertical, IconGripHorizontal, IconRowInsertTop, } from "@tabler/icons-react";
+import { useState, useEffect, useRef, useCallback, } from "react";
+import { createPortal } from "react-dom";
+export function TableMenu({ className: _className }) {
+    const { editor } = useCurrentEditor();
+    const tableInfo = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (!ctx.editor)
+                return null;
+            const { $from } = ctx.editor.state.selection;
+            for (let d = $from.depth; d > 0; d--) {
+                if ($from.node(d).type.name === "table") {
+                    return { pos: $from.start(d) - 1, depth: d };
+                }
+            }
+            return null;
+        },
+    });
+    const [colGrips, setColGrips] = useState([]);
+    const [rowGrips, setRowGrips] = useState([]);
+    const [dropdown, setDropdown] = useState(null);
+    const [tableRect, setTableRect] = useState(null);
+    const [isHovering, setIsHovering] = useState(false);
+    const [drag, setDrag] = useState(null);
+    const dropdownRef = useRef(null);
+    const dragRef = useRef(null);
+    // Find the table DOM element
+    const getTableDom = useCallback(() => {
+        if (!editor || !tableInfo)
+            return null;
+        return editor.view.nodeDOM(tableInfo.pos);
+    }, [editor, tableInfo]);
+    // Measure grip positions from the table DOM
+    const measureGrips = useCallback(() => {
+        const tableDom = getTableDom();
+        if (!tableDom) {
+            setColGrips([]);
+            setRowGrips([]);
+            setTableRect(null);
+            return;
+        }
+        const rect = tableDom.getBoundingClientRect();
+        setTableRect(rect);
+        // Get first row cells for column positions
+        const firstRow = tableDom.querySelector("tr");
+        if (!firstRow)
+            return;
+        const cells = firstRow.querySelectorAll("th, td");
+        const newColGrips = [];
+        cells.forEach((cell) => {
+            const cellRect = cell.getBoundingClientRect();
+            newColGrips.push({
+                left: cellRect.left,
+                top: rect.top,
+                width: cellRect.width,
+                height: 0,
+            });
+        });
+        setColGrips(newColGrips);
+        // Get all rows for row positions
+        const rows = tableDom.querySelectorAll("tr");
+        const newRowGrips = [];
+        rows.forEach((row) => {
+            const rowRect = row.getBoundingClientRect();
+            newRowGrips.push({
+                left: rect.left,
+                top: rowRect.top,
+                width: 0,
+                height: rowRect.height,
+            });
+        });
+        setRowGrips(newRowGrips);
+    }, [getTableDom]);
+    // Observe table geometry changes
+    useEffect(() => {
+        if (!tableInfo) {
+            setColGrips([]);
+            setRowGrips([]);
+            setTableRect(null);
+            setDropdown(null);
+            return;
+        }
+        measureGrips();
+        const tableDom = getTableDom();
+        if (!tableDom)
+            return;
+        const ro = new ResizeObserver(() => measureGrips());
+        ro.observe(tableDom);
+        // Track hover state — expand hit area to include grip zones around the table
+        const HOVER_PAD = 32; // px beyond table edges to keep grips visible
+        const handleMouseMove = (e) => {
+            const r = tableDom.getBoundingClientRect();
+            const inside = e.clientX >= r.left - HOVER_PAD &&
+                e.clientX <= r.right + HOVER_PAD &&
+                e.clientY >= r.top - HOVER_PAD &&
+                e.clientY <= r.bottom + HOVER_PAD;
+            setIsHovering(inside);
+        };
+        document.addEventListener("mousemove", handleMouseMove, { passive: true });
+        // Also re-measure on scroll
+        const scrollParent = tableDom.closest(".nph-editor") || window;
+        const handleScroll = () => {
+            measureGrips();
+            setDropdown(null);
+        };
+        scrollParent.addEventListener("scroll", handleScroll, { passive: true });
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        return () => {
+            ro.disconnect();
+            document.removeEventListener("mousemove", handleMouseMove);
+            scrollParent.removeEventListener("scroll", handleScroll);
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, [tableInfo, getTableDom, measureGrips]);
+    // Close dropdown on click outside
+    useEffect(() => {
+        if (!dropdown)
+            return;
+        const handlePointerDown = (e) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setDropdown(null);
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [dropdown]);
+    // Close dropdown on editor transaction (typing, etc.)
+    useEffect(() => {
+        if (!editor || !dropdown)
+            return;
+        const handleTransaction = () => setDropdown(null);
+        editor.on("transaction", handleTransaction);
+        return () => { editor.off("transaction", handleTransaction); };
+    }, [editor, dropdown]);
+    const handleColGripClick = useCallback((index, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!editor || !tableInfo)
+            return;
+        // Select the column by clicking the first cell in this column
+        const tableDom = getTableDom();
+        if (!tableDom)
+            return;
+        const firstRow = tableDom.querySelector("tr");
+        if (!firstRow)
+            return;
+        const cells = firstRow.querySelectorAll("th, td");
+        const cell = cells[index];
+        if (!cell)
+            return;
+        // Find ProseMirror position for this cell
+        const pos = editor.view.posAtDOM(cell, 0);
+        editor.chain().focus().setTextSelection(pos).run();
+        const rect = cell.getBoundingClientRect();
+        setDropdown({
+            type: "column",
+            index,
+            x: rect.left,
+            y: rect.top - 4,
+        });
+    }, [editor, tableInfo, getTableDom]);
+    const handleRowGripClick = useCallback((index, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!editor || !tableInfo)
+            return;
+        // Select the row by clicking the first cell in this row
+        const tableDom = getTableDom();
+        if (!tableDom)
+            return;
+        const rows = tableDom.querySelectorAll("tr");
+        const row = rows[index];
+        if (!row)
+            return;
+        const firstCell = row.querySelector("th, td");
+        if (!firstCell)
+            return;
+        const pos = editor.view.posAtDOM(firstCell, 0);
+        editor.chain().focus().setTextSelection(pos).run();
+        // Position dropdown below the grip button
+        const gripEl = e.currentTarget;
+        const gripRect = gripEl.getBoundingClientRect();
+        setDropdown({
+            type: "row",
+            index,
+            x: gripRect.left,
+            y: gripRect.bottom + 4,
+        });
+    }, [editor, tableInfo, getTableDom]);
+    // --- Drag-to-reorder logic ---
+    const moveColumn = useCallback((from, to) => {
+        if (!editor || !tableInfo || from === to)
+            return;
+        const { state } = editor;
+        const tableStart = tableInfo.pos;
+        const tableNode = state.doc.nodeAt(tableStart);
+        if (!tableNode)
+            return;
+        const tr = state.tr;
+        // For each row, move the cell from `from` to `to`
+        tableNode.forEach((row, rowOffset) => {
+            if (row.type.name !== "tableRow")
+                return;
+            const cells = [];
+            row.forEach((cell, cellOffset) => {
+                cells.push({ node: cell, pos: tableStart + 1 + rowOffset + 1 + cellOffset });
+            });
+            if (from >= cells.length || to >= cells.length)
+                return;
+            // Build new row content with reordered cells
+            const reordered = [...cells];
+            const [moved] = reordered.splice(from, 1);
+            reordered.splice(to, 0, moved);
+            const rowPos = tableStart + 1 + rowOffset;
+            const mappedRowPos = tr.mapping.map(rowPos);
+            // Replace the row content
+            const newRow = row.type.create(row.attrs, reordered.map((c) => c.node));
+            tr.replaceWith(mappedRowPos, mappedRowPos + row.nodeSize, newRow);
+        });
+        editor.view.dispatch(tr);
+    }, [editor, tableInfo]);
+    const moveRow = useCallback((from, to) => {
+        if (!editor || !tableInfo || from === to)
+            return;
+        const { state } = editor;
+        const tableStart = tableInfo.pos;
+        const tableNode = state.doc.nodeAt(tableStart);
+        if (!tableNode)
+            return;
+        const rows = [];
+        tableNode.forEach((row) => rows.push(row));
+        if (from >= rows.length || to >= rows.length)
+            return;
+        const reordered = [...rows];
+        const [moved] = reordered.splice(from, 1);
+        reordered.splice(to, 0, moved);
+        const tr = state.tr;
+        tr.replaceWith(tableStart + 1, tableStart + 1 + tableNode.content.size, reordered);
+        editor.view.dispatch(tr);
+    }, [editor, tableInfo]);
+    const handleGripDragStart = useCallback((type, index, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDropdown(null);
+        const startX = e.clientX;
+        const startY = e.clientY;
+        let hasMoved = false;
+        const dragState = { type, fromIndex: index, toIndex: index };
+        dragRef.current = dragState;
+        setDrag(dragState);
+        const handleMouseMove = (ev) => {
+            const dx = ev.clientX - startX;
+            const dy = ev.clientY - startY;
+            if (!hasMoved && Math.abs(type === "column" ? dx : dy) < 5)
+                return;
+            hasMoved = true;
+            let newIndex = index;
+            if (type === "column") {
+                for (let i = 0; i < colGrips.length; i++) {
+                    const mid = colGrips[i].left + colGrips[i].width / 2;
+                    if (ev.clientX < mid) {
+                        newIndex = i;
+                        break;
+                    }
+                    newIndex = i;
+                }
+            }
+            else {
+                for (let i = 0; i < rowGrips.length; i++) {
+                    const mid = rowGrips[i].top + rowGrips[i].height / 2;
+                    if (ev.clientY < mid) {
+                        newIndex = i;
+                        break;
+                    }
+                    newIndex = i;
+                }
+            }
+            const updated = { type, fromIndex: index, toIndex: newIndex };
+            dragRef.current = updated;
+            setDrag(updated);
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            const finalDrag = dragRef.current;
+            dragRef.current = null;
+            setDrag(null);
+            if (finalDrag && hasMoved && finalDrag.fromIndex !== finalDrag.toIndex) {
+                if (type === "column") {
+                    moveColumn(finalDrag.fromIndex, finalDrag.toIndex);
+                }
+                else {
+                    moveRow(finalDrag.fromIndex, finalDrag.toIndex);
+                }
+            }
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }, [colGrips, rowGrips, moveColumn, moveRow]);
+    if (!editor || !tableInfo || colGrips.length === 0)
+        return null;
+    const GRIP_SIZE = 20;
+    const GRIP_GAP = 4;
+    const gripsVisible = isHovering || !!dropdown;
+    const columnDropdownItems = [
+        {
+            label: "Toggle header column",
+            icon: _jsx(IconTableColumn, { size: 16 }),
+            action: () => {
+                editor.chain().focus().toggleHeaderColumn().run();
+                setDropdown(null);
+            },
+        },
+        {
+            label: "Insert column before",
+            icon: _jsx(IconColumnInsertLeft, { size: 16 }),
+            action: () => {
+                editor.chain().focus().addColumnBefore().run();
+                setDropdown(null);
+            },
+            separator: true,
+        },
+        {
+            label: "Insert column after",
+            icon: _jsx(IconColumnInsertRight, { size: 16 }),
+            action: () => {
+                editor.chain().focus().addColumnAfter().run();
+                setDropdown(null);
+            },
+        },
+        {
+            label: "Merge cells",
+            icon: _jsx(IconArrowMerge, { size: 16 }),
+            action: () => {
+                editor.chain().focus().mergeCells().run();
+                setDropdown(null);
+            },
+            separator: true,
+        },
+        {
+            label: "Split cell",
+            icon: _jsx(IconArrowsSplit, { size: 16 }),
+            action: () => {
+                editor.chain().focus().splitCell().run();
+                setDropdown(null);
+            },
+        },
+        {
+            label: "Delete column",
+            icon: _jsx(IconColumnRemove, { size: 16 }),
+            action: () => {
+                editor.chain().focus().deleteColumn().run();
+                setDropdown(null);
+            },
+            destructive: true,
+            separator: true,
+        },
+    ];
+    const rowDropdownItems = [
+        {
+            label: "Toggle header row",
+            icon: _jsx(IconTableRow, { size: 16 }),
+            action: () => {
+                editor.chain().focus().toggleHeaderRow().run();
+                setDropdown(null);
+            },
+        },
+        {
+            label: "Insert row above",
+            icon: _jsx(IconRowInsertTop, { size: 16 }),
+            action: () => {
+                editor.chain().focus().addRowBefore().run();
+                setDropdown(null);
+            },
+            separator: true,
+        },
+        {
+            label: "Insert row below",
+            icon: _jsx(IconRowInsertBottom, { size: 16 }),
+            action: () => {
+                editor.chain().focus().addRowAfter().run();
+                setDropdown(null);
+            },
+        },
+        {
+            label: "Merge cells",
+            icon: _jsx(IconArrowMerge, { size: 16 }),
+            action: () => {
+                editor.chain().focus().mergeCells().run();
+                setDropdown(null);
+            },
+            separator: true,
+        },
+        {
+            label: "Split cell",
+            icon: _jsx(IconArrowsSplit, { size: 16 }),
+            action: () => {
+                editor.chain().focus().splitCell().run();
+                setDropdown(null);
+            },
+        },
+        {
+            label: "Delete row",
+            icon: _jsx(IconRowRemove, { size: 16 }),
+            action: () => {
+                editor.chain().focus().deleteRow().run();
+                setDropdown(null);
+            },
+            destructive: true,
+            separator: true,
+        },
+    ];
+    const dropdownItems = dropdown?.type === "column" ? columnDropdownItems : rowDropdownItems;
+    return createPortal(_jsxs(_Fragment, { children: [colGrips.map((grip, i) => (_jsx("button", { type: "button", className: `nph-table-grip nph-table-grip--col${gripsVisible ? " nph-table-grip--visible" : ""}${drag?.type === "column" && drag.fromIndex === i ? " nph-table-grip--dragging" : ""}`, style: {
+                    position: "fixed",
+                    left: grip.left + grip.width / 2 - GRIP_SIZE / 2,
+                    top: grip.top - GRIP_SIZE - GRIP_GAP,
+                    width: GRIP_SIZE,
+                    height: GRIP_SIZE,
+                    cursor: "grab",
+                }, onMouseDown: (e) => handleGripDragStart("column", i, e), onClick: (e) => handleColGripClick(i, e), "aria-label": `Column ${i + 1} options`, children: _jsx(IconGripHorizontal, { size: 14 }) }, `col-${i}`))), rowGrips.map((grip, i) => (_jsx("button", { type: "button", className: `nph-table-grip nph-table-grip--row${gripsVisible ? " nph-table-grip--visible" : ""}${drag?.type === "row" && drag.fromIndex === i ? " nph-table-grip--dragging" : ""}`, style: {
+                    position: "fixed",
+                    left: grip.left - GRIP_SIZE - GRIP_GAP,
+                    top: grip.top + grip.height / 2 - GRIP_SIZE / 2,
+                    width: GRIP_SIZE,
+                    height: GRIP_SIZE,
+                    cursor: "grab",
+                }, onMouseDown: (e) => handleGripDragStart("row", i, e), onClick: (e) => handleRowGripClick(i, e), "aria-label": `Row ${i + 1} options`, children: _jsx(IconGripVertical, { size: 14 }) }, `row-${i}`))), tableRect && (_jsxs("button", { type: "button", className: `nph-table-grip nph-table-grip--delete${gripsVisible ? " nph-table-grip--visible" : ""}`, style: {
+                    position: "fixed",
+                    left: tableRect.left + tableRect.width / 2 - 60,
+                    top: tableRect.bottom + GRIP_GAP,
+                    width: 120,
+                    height: 24,
+                }, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                    editor.chain().focus().deleteTable().run();
+                }, "aria-label": "Delete table", children: [_jsx(IconTableOff, { size: 14 }), _jsx("span", { style: { fontSize: 12 }, children: "Delete table" })] })), dropdown && (_jsx("div", { ref: dropdownRef, className: "nph-table-dropdown", style: {
+                    position: "fixed",
+                    left: dropdown.x,
+                    top: dropdown.y,
+                    transform: dropdown.type === "column" ? "translateY(-100%)" : undefined,
+                }, children: dropdownItems.map((item, i) => (_jsxs("div", { children: [item.separator && i > 0 && _jsx("div", { className: "nph-table-dropdown__separator" }), _jsxs("button", { type: "button", className: `nph-table-dropdown__item ${item.destructive ? "nph-table-dropdown__item--destructive" : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: item.action, children: [item.icon, _jsx("span", { children: item.label })] })] }, i))) })), drag && drag.fromIndex !== drag.toIndex && tableRect && (drag.type === "column" ? (_jsx("div", { className: "nph-table-drop-indicator nph-table-drop-indicator--col", style: {
+                    position: "fixed",
+                    left: drag.toIndex < colGrips.length
+                        ? colGrips[drag.toIndex].left - 1
+                        : colGrips[colGrips.length - 1].left + colGrips[colGrips.length - 1].width,
+                    top: tableRect.top,
+                    width: 2,
+                    height: tableRect.height,
+                } })) : (_jsx("div", { className: "nph-table-drop-indicator nph-table-drop-indicator--row", style: {
+                    position: "fixed",
+                    left: tableRect.left,
+                    top: drag.toIndex < rowGrips.length
+                        ? rowGrips[drag.toIndex].top - 1
+                        : rowGrips[rowGrips.length - 1].top + rowGrips[rowGrips.length - 1].height,
+                    width: tableRect.width,
+                    height: 2,
+                } })))] }), document.body);
+}
+export default TableMenu;

package/dist/react/menus/TaskItem/TaskItemView.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType } from "react";
+import { type NodeViewProps } from "@tiptap/react";
+export type TaskItemCheckboxProps = {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    className?: string;
+};
+export type TaskItemCheckboxComponent = ComponentType<TaskItemCheckboxProps>;
+export declare const createTaskItemView: (Checkbox: TaskItemCheckboxComponent) => {
+    ({ node, updateAttributes }: NodeViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/react/menus/TaskItem/TaskItemView.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper, } from "@tiptap/react";
+export const createTaskItemView = (Checkbox) => {
+    const TaskItemView = ({ node, updateAttributes }) => {
+        const checked = !!node.attrs.checked;
+        return (_jsxs(NodeViewWrapper, { as: "li", "data-checked": checked, className: "nph-task-item", children: [_jsx("label", { contentEditable: false, className: "nph-task-item__checkbox", children: _jsx(Checkbox, { checked: checked, onCheckedChange: (value) => updateAttributes({ checked: value === true }) }) }), _jsx(NodeViewContent, { as: "div", className: "nph-task-item__content" +
+                        (checked ? " nph-task-item__content--checked" : "") })] }));
+    };
+    TaskItemView.displayName = "TaskItemView";
+    return TaskItemView;
+};

package/dist/react/menus/TextMenu.d.ts

@@ -0,0 +1,10 @@
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import type { ReactNode } from "react";
+type ExtraRenderer = (editor: TiptapEditor) => ReactNode;
+export type TextMenuProps = {
+    className?: string;
+    leadingExtras?: ExtraRenderer[];
+    trailingExtras?: ExtraRenderer[];
+};
+export declare function TextMenu({ className, leadingExtras, trailingExtras, }: TextMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default TextMenu;

package/dist/react/menus/TextMenu.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeSelection } from "@tiptap/pm/state";
+import { useCurrentEditor, useEditorState } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconCode, IconArrowBackUp, IconLink, IconCheck, IconX, } from "@tabler/icons-react";
+import { Fragment, useState, useRef, useEffect } from "react";
+import { MenuList } from "./MenuList";
+function Separator() {
+    return _jsx("div", { className: "nph-bubble-separator" });
+}
+export function TextMenu({ className, leadingExtras, trailingExtras, }) {
+    const { editor } = useCurrentEditor();
+    const [isAddingLink, setIsAddingLink] = useState(false);
+    const [linkUrl, setLinkUrl] = useState("");
+    const linkInputRef = useRef(null);
+    const editorState = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (!ctx.editor)
+                return null;
+            return {
+                isBold: ctx.editor.isActive("bold"),
+                isItalic: ctx.editor.isActive("italic"),
+                isUnderline: ctx.editor.isActive("underline"),
+                isStrike: ctx.editor.isActive("strike"),
+                isCode: ctx.editor.isActive("code"),
+                isCodeBlock: ctx.editor.isActive("codeBlock"),
+                isParagraph: ctx.editor.isActive("paragraph"),
+                isHeading: ctx.editor.isActive("heading"),
+                isList: ctx.editor.isActive("bulletList") ||
+                    ctx.editor.isActive("orderedList"),
+                isBlockquote: ctx.editor.isActive("blockquote"),
+            };
+        },
+    });
+    useEffect(() => {
+        if (isAddingLink && linkInputRef.current) {
+            linkInputRef.current.focus();
+        }
+    }, [isAddingLink]);
+    if (!editor || !editorState)
+        return null;
+    const handleSetLink = () => {
+        if (!linkUrl)
+            return;
+        editor.chain().focus().extendMarkRange("link").setLink({ href: linkUrl }).run();
+        setIsAddingLink(false);
+        setLinkUrl("");
+    };
+    const handleCancelLink = () => {
+        setIsAddingLink(false);
+        setLinkUrl("");
+        editor.chain().focus().run();
+    };
+    const hasAnyMarksInSelection = () => {
+        const anyEditor = editor;
+        const state = anyEditor.state;
+        const sel = state.selection;
+        let has = false;
+        state.doc.nodesBetween(sel.from, sel.to, (node) => {
+            if (node.isText && node.marks && node.marks.length > 0) {
+                has = true;
+                return false;
+            }
+            return undefined;
+        });
+        if (!has && sel.empty) {
+            const marks = state.storedMarks || sel.$from.marks();
+            if (marks && marks.length > 0)
+                has = true;
+        }
+        return has;
+    };
+    const isInCode = editorState.isCode || editorState.isCodeBlock;
+    return (_jsx(BubbleMenu, { editor: editor, pluginKey: "textBubbleMenu", shouldShow: ({ editor: e, state, from, to, view }) => {
+            // Don't show if imageBlock or videoBlock is active
+            if (e.isActive("imageBlock"))
+                return false;
+            if (e.isActive("videoBlock"))
+                return false;
+            // Don't show for node selections
+            const { selection } = state;
+            if (selection instanceof NodeSelection)
+                return false;
+            // Don't show if selection is empty
+            if (from === to)
+                return false;
+            // Don't show if link is active (LinkMenu will handle this)
+            if (e.isActive("link"))
+                return false;
+            // Check if the selection contains an imageBlock node
+            let hasImage = false;
+            state.doc.nodesBetween(from, to, (node) => {
+                if (node.type.name === "imageBlock" || node.type.name === "videoBlock") {
+                    hasImage = true;
+                    return false;
+                }
+            });
+            if (hasImage)
+                return false;
+            // Show only for text selections
+            return true;
+        }, children: _jsxs("div", { className: className ? `bubble-menu ${className}` : "bubble-menu", children: [leadingExtras && editor
+                    ? leadingExtras.map((renderExtra, index) => (_jsx(Fragment, { children: renderExtra(editor) }, `leading-extra-${index}`)))
+                    : null, _jsx(MenuList, { editor: editor }), _jsx(Separator, {}), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => editor.chain().focus().toggleBold().run(), className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isBold ? " is-active" : ""}`, disabled: isInCode, "aria-disabled": isInCode, "aria-pressed": editorState.isBold, "aria-label": "Toggle bold", children: _jsx(IconBold, { size: 16 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => editor.chain().focus().toggleItalic().run(), className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isItalic ? " is-active" : ""}`, disabled: isInCode, "aria-disabled": isInCode, "aria-pressed": editorState.isItalic, "aria-label": "Toggle italic", children: _jsx(IconItalic, { size: 16 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => editor.chain().focus().toggleUnderline().run(), className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isUnderline ? " is-active" : ""}`, disabled: isInCode, "aria-disabled": isInCode, "aria-pressed": editorState.isUnderline, "aria-label": "Toggle underline", children: _jsx(IconUnderline, { size: 16 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => editor.chain().focus().toggleStrike().run(), className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isStrike ? " is-active" : ""}`, disabled: isInCode, "aria-disabled": isInCode, "aria-pressed": editorState.isStrike, "aria-label": "Toggle strike", children: _jsx(IconStrikethrough, { size: 16 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => editor.chain().focus().toggleCode().run(), className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isCode ? " is-active" : ""}`, disabled: editorState.isCodeBlock, "aria-disabled": editorState.isCodeBlock, "aria-pressed": editorState.isCode, "aria-label": "Toggle inline code", children: _jsx(IconCode, { size: 16 }) }), _jsx(Separator, {}), !isAddingLink ? (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => setIsAddingLink(true), className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editor.isActive("link") ? " is-active" : ""}`, disabled: isInCode, "aria-disabled": isInCode, "aria-pressed": editor.isActive("link"), "aria-label": "Add link", children: _jsx(IconLink, { size: 16 }) })) : (_jsxs(_Fragment, { children: [_jsx("input", { ref: linkInputRef, type: "url", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                    e.preventDefault();
+                                    handleSetLink();
+                                }
+                                else if (e.key === "Escape") {
+                                    e.preventDefault();
+                                    handleCancelLink();
+                                }
+                            }, placeholder: "https://example.com", className: "nph-link-input", style: {
+                                padding: "4px 8px",
+                                border: "1px solid #ccc",
+                                borderRadius: "4px",
+                                minWidth: "200px",
+                                fontSize: "14px",
+                            } }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: handleSetLink, className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", "aria-label": "Apply", title: "Apply", disabled: !linkUrl, children: _jsx(IconCheck, { size: 16 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: handleCancelLink, className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", "aria-label": "Cancel", title: "Cancel", children: _jsx(IconX, { size: 16 }) })] })), (() => {
+                    const hasInlineMarks = hasAnyMarksInSelection();
+                    const isPlainParagraph = editorState.isParagraph &&
+                        !editorState.isHeading &&
+                        !editorState.isList &&
+                        !editorState.isBlockquote &&
+                        !editorState.isCodeBlock &&
+                        !hasInlineMarks;
+                    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => editor
+                                    .chain()
+                                    .focus()
+                                    .clearNodes()
+                                    .setParagraph()
+                                    .unsetAllMarks()
+                                    .run(), className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", "aria-label": "Revert to paragraph", title: "Revert to paragraph", disabled: isPlainParagraph, "aria-disabled": isPlainParagraph, children: _jsx(IconArrowBackUp, { size: 16 }) })] }));
+                })(), trailingExtras && editor
+                    ? trailingExtras.map((renderExtra, index) => (_jsx(Fragment, { children: renderExtra(editor) }, `trailing-extra-${index}`)))
+                    : null] }) }));
+}
+export default TextMenu;

package/dist/react/menus/VideoBlock/VideoBlockMenu.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from "@tiptap/react";
+export type VideoBlockMenuProps = {
+    editor: Editor;
+    getPos: () => number;
+};
+export declare const VideoBlockMenu: ({ editor, getPos }: VideoBlockMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export default VideoBlockMenu;