neuphlo-editor 2.5.0 → 2.6.0

package/dist/react/menus/ImageMenu.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeSelection } from "@tiptap/pm/state";
+import { useCurrentEditor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { IconUpload, IconTrash, IconAlignLeft, IconAlignCenter, IconAlignRight, } from "@tabler/icons-react";
+import { Fragment, useEffect, useState } from "react";
+export function ImageMenu({ className, leadingExtras, trailingExtras, }) {
+    const { editor } = useCurrentEditor();
+    const [size, setSize] = useState(100);
+    const [align, setAlign] = useState("left");
+    useEffect(() => {
+        if (!editor)
+            return;
+        const update = () => {
+            if (!editor.isActive("imageBlock"))
+                return;
+            const attrs = editor.getAttributes("imageBlock") ?? {
+                width: "",
+                align: "left",
+            };
+            const width = attrs.width ?? "";
+            if (width.includes("%")) {
+                setSize(parseInt(width) || 100);
+            }
+            else {
+                setSize(100);
+            }
+            setAlign(attrs.align ?? "left");
+        };
+        update();
+        editor.on("selectionUpdate", update);
+        editor.on("transaction", update);
+        editor.on("update", update);
+        return () => {
+            editor.off("selectionUpdate", update);
+            editor.off("transaction", update);
+            editor.off("update", update);
+        };
+    }, [editor]);
+    if (!editor)
+        return null;
+    const updateImageSize = (newSize) => {
+        setSize(newSize);
+        editor.commands.setImageBlockWidth(newSize);
+    };
+    const updateImageAlign = (newAlign) => {
+        setAlign(newAlign);
+        editor.commands.setImageBlockAlign(newAlign);
+    };
+    const removeImage = () => {
+        editor.chain().focus().deleteSelection().run();
+    };
+    const triggerUpload = () => {
+        editor.commands.updateAttributes("imageBlock", { src: "", loading: false });
+    };
+    return (_jsx(BubbleMenu, { editor: editor, pluginKey: "imageBubbleMenu", shouldShow: ({ editor: e, state }) => {
+            // Only show when an image node is selected
+            if (!e.isActive("imageBlock"))
+                return false;
+            // Check if we have a node selection (clicking on image)
+            const { selection } = state;
+            const isNodeSelection = selection instanceof NodeSelection;
+            // Only show for node selections (when clicking directly on the image)
+            // This prevents showing when there's a text selection that includes an image
+            return isNodeSelection;
+        }, updateDelay: 0, children: _jsxs("div", { className: className ? `bubble-menu ${className}` : "bubble-menu", children: [leadingExtras && editor
+                    ? leadingExtras.map((renderExtra, index) => (_jsx(Fragment, { children: renderExtra(editor) }, `image-leading-extra-${index}`)))
+                    : null, _jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                        minWidth: 140,
+                    }, children: [_jsxs("span", { style: { fontSize: "12px", whiteSpace: "nowrap" }, children: [size, "%"] }), _jsx("input", { type: "range", min: "25", max: "100", step: "5", value: size, onChange: (e) => updateImageSize(parseInt(e.target.value)), onMouseDown: (e) => e.stopPropagation(), style: { flex: 1 } })] }), _jsx("div", { className: "nph-link-popover__divider", style: { margin: "0 4px" } }), _jsx("button", { type: "button", className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "left" ? " is-active" : ""}`, title: "Align left", onMouseDown: (e) => e.preventDefault(), onClick: () => updateImageAlign("left"), children: _jsx(IconAlignLeft, { size: 16 }) }), _jsx("button", { type: "button", className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "center" ? " is-active" : ""}`, title: "Align center", onMouseDown: (e) => e.preventDefault(), onClick: () => updateImageAlign("center"), children: _jsx(IconAlignCenter, { size: 16 }) }), _jsx("button", { type: "button", className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "right" ? " is-active" : ""}`, title: "Align right", onMouseDown: (e) => e.preventDefault(), onClick: () => updateImageAlign("right"), children: _jsx(IconAlignRight, { size: 16 }) }), _jsx("div", { className: "nph-link-popover__divider", style: { margin: "0 4px" } }), _jsx("button", { type: "button", className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", title: "Upload new image", onMouseDown: (e) => e.preventDefault(), onClick: triggerUpload, children: _jsx(IconUpload, { size: 16 }) }), _jsx("button", { type: "button", className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", title: "Remove image", onMouseDown: (e) => e.preventDefault(), onClick: removeImage, children: _jsx(IconTrash, { size: 16 }) }), trailingExtras && editor
+                    ? trailingExtras.map((renderExtra, index) => (_jsx(Fragment, { children: renderExtra(editor) }, `image-trailing-extra-${index}`)))
+                    : null] }) }));
+}
+export default ImageMenu;

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

@@ -0,0 +1,8 @@
+export type ImagePopoverProps = {
+    editor: any | null;
+    hideWhenUnavailable?: boolean;
+    onSetImage?: () => void;
+    onOpenChange?: (isOpen: boolean) => void;
+};
+export declare function ImagePopover({ editor, hideWhenUnavailable, onSetImage, onOpenChange, }: ImagePopoverProps): import("react/jsx-runtime").JSX.Element | null;
+export default ImagePopover;

package/dist/react/menus/ImagePopover.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { IconPhoto, IconTrash, IconAlignLeft, IconAlignCenter, IconAlignRight, } from "@tabler/icons-react";
+export function ImagePopover({ editor, hideWhenUnavailable = false, onSetImage, onOpenChange, }) {
+    const [open, setOpen] = useState(false);
+    const [alt, setAlt] = useState("");
+    const [size, setSize] = useState(100); // Size as percentage (25-200%)
+    const [align, setAlign] = useState("left");
+    const inputRef = useRef(null);
+    const rootRef = useRef(null);
+    const isActive = !!editor?.isActive?.("image");
+    const currentAttrs = useMemo(() => {
+        if (!editor?.getAttributes)
+            return { alt: "", width: "", align: "left" };
+        return (editor.getAttributes("image") ?? {
+            alt: "",
+            width: "",
+            align: "left",
+        });
+    }, [editor, editor?.state?.selection?.from, editor?.state?.selection?.to]);
+    const canSet = useMemo(() => {
+        if (!editor)
+            return false;
+        try {
+            return editor
+                .can()
+                .chain()
+                .focus()
+                .setImage({ src: "https://example.com/image.jpg" })
+                .run();
+        }
+        catch (_) {
+            return false;
+        }
+    }, [editor]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const update = () => {
+            const attrs = editor.getAttributes("image") ?? {
+                alt: "",
+                width: "",
+                align: "left",
+            };
+            setAlt(attrs.alt ?? "");
+            // Parse width to extract percentage or convert px to percentage
+            const width = attrs.width ?? "";
+            if (width.includes("%")) {
+                setSize(parseInt(width) || 100);
+            }
+            else if (width.includes("px")) {
+                setSize(100); // Default to 100% if px is used
+            }
+            else {
+                setSize(100);
+            }
+            setAlign(attrs.align ?? "left");
+        };
+        update();
+        editor.on("selectionUpdate", update);
+        editor.on("transaction", update);
+        editor.on("update", update);
+        return () => {
+            editor.off("selectionUpdate", update);
+            editor.off("transaction", update);
+            editor.off("update", update);
+        };
+    }, [editor]);
+    useEffect(() => {
+        if (open)
+            inputRef.current?.focus();
+        onOpenChange?.(open);
+    }, [open, onOpenChange]);
+    if (!editor)
+        return null;
+    if (hideWhenUnavailable && !canSet && !isActive)
+        return null;
+    const updateImageSize = (newSize) => {
+        setSize(newSize);
+        if (isActive) {
+            ;
+            editor.commands.updateAttributes("image", {
+                width: `${newSize}%`,
+            });
+        }
+    };
+    const updateImageAlign = (newAlign) => {
+        setAlign(newAlign);
+        if (isActive) {
+            ;
+            editor.commands.updateAttributes("image", { align: newAlign });
+        }
+    };
+    const updateAltText = (newAlt) => {
+        setAlt(newAlt);
+        if (isActive) {
+            ;
+            editor.commands.updateAttributes("image", { alt: newAlt });
+        }
+    };
+    const removeImage = () => {
+        ;
+        editor.chain().focus().deleteSelection().run();
+        setOpen(false);
+    };
+    const triggerUpload = () => {
+        ;
+        editor.chain().focus().uploadImage().run();
+        setOpen(false);
+    };
+    // Close when clicking outside of the popover/button container
+    useEffect(() => {
+        const handler = (e) => {
+            if (!open)
+                return;
+            const el = rootRef.current;
+            if (!el)
+                return;
+            if (!el.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", handler);
+        return () => document.removeEventListener("pointerdown", handler);
+    }, [open]);
+    return (_jsxs("div", { ref: rootRef, className: "nph-dropdown", style: { position: "relative" }, children: [_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => setOpen((v) => !v), className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${isActive ? " is-active" : ""}`, "aria-label": isActive ? "Edit image" : "Add image", "aria-pressed": isActive, "aria-expanded": open, title: isActive ? "Edit image" : "Add image", children: _jsx(IconPhoto, { size: 16 }) }), open ? (_jsx("div", { className: "nph-dropdown__panel", style: {
+                    padding: 0,
+                    minWidth: 320,
+                    background: "transparent",
+                    boxShadow: "none",
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                }, role: "dialog", "aria-label": "Image editor", children: _jsxs("div", { className: "nph-link-popover", children: [_jsx("input", { ref: inputRef, type: "text", value: alt, onChange: (e) => updateAltText(e.target.value), placeholder: "Alt text", className: "nph-link-popover__input", onMouseDown: (e) => {
+                                e.stopPropagation();
+                            }, onKeyDown: (e) => {
+                                if (e.key === "Escape") {
+                                    e.preventDefault();
+                                    setOpen(false);
+                                }
+                            } }), _jsx("div", { className: "nph-link-popover__divider" }), _jsxs("div", { style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 8,
+                                minWidth: 180,
+                            }, children: [_jsxs("span", { style: { fontSize: "12px", whiteSpace: "nowrap" }, children: [size, "%"] }), _jsx("input", { type: "range", min: "25", max: "100", step: "5", value: size, onChange: (e) => updateImageSize(parseInt(e.target.value)), onMouseDown: (e) => e.stopPropagation(), style: { flex: 1 } })] }), _jsx("div", { className: "nph-link-popover__divider" }), _jsx("button", { type: "button", className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "left" ? " is-active" : ""}`, title: "Align left", onMouseDown: (e) => e.preventDefault(), onClick: () => updateImageAlign("left"), children: _jsx(IconAlignLeft, { size: 16 }) }), _jsx("button", { type: "button", className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "center" ? " is-active" : ""}`, title: "Align center", onMouseDown: (e) => e.preventDefault(), onClick: () => updateImageAlign("center"), children: _jsx(IconAlignCenter, { size: 16 }) }), _jsx("button", { type: "button", className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "right" ? " is-active" : ""}`, title: "Align right", onMouseDown: (e) => e.preventDefault(), onClick: () => updateImageAlign("right"), children: _jsx(IconAlignRight, { size: 16 }) }), _jsx("button", { type: "button", className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", title: "Upload image", onMouseDown: (e) => e.preventDefault(), onClick: triggerUpload, children: _jsx(IconPhoto, { size: 16 }) }), _jsx("button", { type: "button", className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", title: "Remove image", onMouseDown: (e) => e.preventDefault(), onClick: removeImage, disabled: !isActive, children: _jsx(IconTrash, { size: 16 }) })] }) })) : null] }));
+}
+export default ImagePopover;

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

@@ -0,0 +1,2 @@
+export declare function LinkMenu(): import("react/jsx-runtime").JSX.Element | null;
+export default LinkMenu;

package/dist/react/menus/LinkMenu.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentEditor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { useCallback, useState, useRef, useEffect } from "react";
+import { IconLink, IconExternalLink, IconTrash, IconCheck, IconX, } from "@tabler/icons-react";
+export function LinkMenu() {
+    const { editor } = useCurrentEditor();
+    const [url, setUrl] = useState("");
+    const [isEditing, setIsEditing] = useState(false);
+    const inputRef = useRef(null);
+    const currentUrl = editor?.getAttributes("link")?.href || "";
+    useEffect(() => {
+        setUrl(currentUrl);
+    }, [currentUrl]);
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditing]);
+    const handleSetLink = useCallback(() => {
+        if (!editor || !url)
+            return;
+        editor
+            .chain()
+            .focus()
+            .extendMarkRange("link")
+            .setLink({ href: url })
+            .run();
+        setIsEditing(false);
+    }, [editor, url]);
+    const handleRemoveLink = useCallback(() => {
+        if (!editor)
+            return;
+        editor.chain().focus().unsetLink().run();
+        setIsEditing(false);
+    }, [editor]);
+    const handleOpenLink = useCallback(() => {
+        if (url || currentUrl) {
+            window.open(url || currentUrl, "_blank", "noopener,noreferrer");
+        }
+    }, [url, currentUrl]);
+    if (!editor)
+        return null;
+    return (_jsx(BubbleMenu, { editor: editor, pluginKey: "linkBubbleMenu", shouldShow: ({ editor: e, state }) => {
+            // Show when link is active (whether selection is empty or not)
+            return e.isActive("link");
+        }, updateDelay: 0, children: _jsx("div", { className: "bubble-menu", children: !isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => setIsEditing(true), className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", "aria-label": "Edit link", title: currentUrl, children: _jsx(IconLink, { size: 16 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: handleOpenLink, className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", "aria-label": "Open link", title: "Open link in new tab", children: _jsx(IconExternalLink, { size: 16 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: handleRemoveLink, className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", "aria-label": "Remove link", title: "Remove link", children: _jsx(IconTrash, { size: 16 }) })] })) : (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, type: "url", value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                handleSetLink();
+                            }
+                            else if (e.key === "Escape") {
+                                e.preventDefault();
+                                setUrl(currentUrl);
+                                setIsEditing(false);
+                            }
+                        }, 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: !url, children: _jsx(IconCheck, { size: 16 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                            setUrl(currentUrl);
+                            setIsEditing(false);
+                        }, className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon", "aria-label": "Cancel", title: "Cancel", children: _jsx(IconX, { size: 16 }) })] })) }) }));
+}
+export default LinkMenu;

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

@@ -0,0 +1,10 @@
+import React from "react";
+export type MenuListProps = {
+    editor: any;
+    className?: string;
+    style?: React.CSSProperties;
+    onSelect?: () => void;
+    buttonClassName?: string;
+};
+export declare function MenuList({ editor, className, style, onSelect, buttonClassName, }: MenuListProps): import("react/jsx-runtime").JSX.Element;
+export default MenuList;

package/dist/react/menus/MenuList.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { IconTypography, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconBlockquote, IconCode, IconChevronDown, IconSourceCode, } from "@tabler/icons-react";
+export function MenuList({ editor, className, style, onSelect, buttonClassName, }) {
+    const [open, setOpen] = useState(false);
+    const [label, setLabel] = useState("Paragraph");
+    const rootRef = useRef(null);
+    const computeLabel = useCallback(() => {
+        if (!editor)
+            return "Paragraph";
+        if (editor.isActive("heading", { level: 1 }))
+            return "Heading 1";
+        if (editor.isActive("heading", { level: 2 }))
+            return "Heading 2";
+        if (editor.isActive("heading", { level: 3 }))
+            return "Heading 3";
+        if (editor.isActive("heading", { level: 4 }))
+            return "Heading 4";
+        if (editor.isActive("bulletList"))
+            return "Bullet list";
+        if (editor.isActive("orderedList"))
+            return "Ordered list";
+        if (editor.isActive("blockquote"))
+            return "Quote";
+        if (editor.isActive("code"))
+            return "Code";
+        if (editor.isActive("codeBlock"))
+            return "Code Block";
+        return "Paragraph";
+    }, [editor]);
+    useEffect(() => {
+        setLabel(computeLabel());
+        if (!editor)
+            return;
+        const update = () => setLabel(computeLabel());
+        editor.on("selectionUpdate", update);
+        editor.on("transaction", update);
+        editor.on("update", update);
+        return () => {
+            editor.off("selectionUpdate", update);
+            editor.off("transaction", update);
+            editor.off("update", update);
+        };
+    }, [editor, computeLabel]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const close = () => setOpen(false);
+        editor.on("selectionUpdate", close);
+        editor.on("blur", close);
+        return () => {
+            editor.off("selectionUpdate", close);
+            editor.off("blur", close);
+        };
+    }, [editor]);
+    useEffect(() => {
+        const handlePointerDown = (e) => {
+            if (!open)
+                return;
+            const el = rootRef.current;
+            if (!el)
+                return;
+            if (!el.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [open]);
+    const handle = (fn) => () => {
+        fn();
+        onSelect?.();
+        setOpen(false);
+    };
+    const isActive = useCallback((name) => label === name, [label]);
+    return (_jsxs("div", { ref: rootRef, className: "nph-dropdown", children: [_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => setOpen((v) => !v), className: buttonClassName ??
+                    `nph-btn nph-btn-ghost nph-btn-xs${open || label !== "Paragraph" ? " is-active" : ""}`, "aria-expanded": open, "aria-label": "Change block type", children: _jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [_jsx("span", { style: { fontSize: 12 }, children: label }), _jsx(IconChevronDown, { size: 16 })] }) }), open ? (_jsx("div", { className: "nph-dropdown__panel nph-command", onMouseDown: (e) => e.preventDefault(), children: _jsxs("div", { className: className ? className : "nph-command__list", style: { maxHeight: 240, ...(style ?? {}) }, children: [_jsxs("button", { type: "button", className: `nph-command__item${isActive("Paragraph") ? " is-active" : ""}`, "aria-selected": isActive("Paragraph"), onClick: handle(() => editor.chain().focus().setParagraph().run()), children: [_jsx(IconTypography, { size: 16 }), _jsx("span", { children: "Paragraph" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Heading 1") ? " is-active" : ""}`, "aria-selected": isActive("Heading 1"), onClick: handle(() => editor
+                                .chain()
+                                .focus()
+                                .toggleHeading({ level: 1 })
+                                .run()), children: [_jsx(IconH1, { size: 16 }), _jsx("span", { children: "Heading 1" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Heading 2") ? " is-active" : ""}`, "aria-selected": isActive("Heading 2"), onClick: handle(() => editor
+                                .chain()
+                                .focus()
+                                .toggleHeading({ level: 2 })
+                                .run()), children: [_jsx(IconH2, { size: 16 }), _jsx("span", { children: "Heading 2" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Heading 3") ? " is-active" : ""}`, "aria-selected": isActive("Heading 3"), onClick: handle(() => editor
+                                .chain()
+                                .focus()
+                                .toggleHeading({ level: 3 })
+                                .run()), children: [_jsx(IconH3, { size: 16 }), _jsx("span", { children: "Heading 3" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Heading 4") ? " is-active" : ""}`, "aria-selected": isActive("Heading 4"), onClick: handle(() => editor
+                                .chain()
+                                .focus()
+                                .toggleHeading({ level: 4 })
+                                .run()), children: [_jsx(IconH4, { size: 16 }), _jsx("span", { children: "Heading 4" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Bullet list") ? " is-active" : ""}`, "aria-selected": isActive("Bullet list"), onClick: handle(() => editor.chain().focus().toggleBulletList().run()), children: [_jsx(IconList, { size: 16 }), _jsx("span", { children: "Bullet list" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Ordered list") ? " is-active" : ""}`, "aria-selected": isActive("Ordered list"), onClick: handle(() => editor.chain().focus().toggleOrderedList().run()), children: [_jsx(IconListNumbers, { size: 16 }), _jsx("span", { children: "Ordered list" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Quote") ? " is-active" : ""}`, "aria-selected": isActive("Quote"), onClick: handle(() => editor.chain().focus().toggleBlockquote().run()), children: [_jsx(IconBlockquote, { size: 16 }), _jsx("span", { children: "Quote" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Code") ? " is-active" : ""}`, "aria-selected": isActive("Code"), onClick: handle(() => editor.chain().focus().toggleCode().run()), children: [_jsx(IconCode, { size: 16 }), _jsx("span", { children: "Code" })] }), _jsxs("button", { type: "button", className: `nph-command__item${isActive("Code Block") ? " is-active" : ""}`, "aria-selected": isActive("Code Block"), onClick: handle(() => editor.chain().focus().toggleCodeBlock().run()), children: [_jsx(IconSourceCode, { size: 16 }), _jsx("span", { children: "Code Block" })] })] }) })) : null] }));
+}
+export default MenuList;

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

@@ -0,0 +1,5 @@
+export type SlashMenuProps = {
+    className?: string;
+};
+export declare function SlashMenu({ className }: SlashMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default SlashMenu;

package/dist/react/menus/SlashMenu.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentEditor } from "@tiptap/react";
+import { useAtomValue } from "jotai";
+import { EditorCommand, EditorCommandList, EditorCommandItem, } from "../../headless";
+import { queryAtom } from "../../headless/utils/atoms";
+import { novelStore } from "../../headless/utils/store";
+import { IconTypography, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconBlockquote, IconCode, IconSourceCode, IconPhoto, IconVideo, IconMinus, IconTable, IconListCheck, } from "@tabler/icons-react";
+import { useMemo } from "react";
+const SLASH_COMMANDS = [
+    {
+        group: "Format",
+        items: [
+            {
+                value: "paragraph text",
+                label: "Paragraph",
+                description: "Plain text block",
+                icon: IconTypography,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setParagraph().run(),
+            },
+            {
+                value: "heading1 h1",
+                label: "Heading 1",
+                description: "Large section heading",
+                icon: IconH1,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 1 }).run(),
+            },
+            {
+                value: "heading2 h2",
+                label: "Heading 2",
+                description: "Medium section heading",
+                icon: IconH2,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 2 }).run(),
+            },
+            {
+                value: "heading3 h3",
+                label: "Heading 3",
+                description: "Small section heading",
+                icon: IconH3,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 3 }).run(),
+            },
+            {
+                value: "heading4 h4",
+                label: "Heading 4",
+                description: "Subsection heading",
+                icon: IconH4,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 4 }).run(),
+            },
+        ],
+    },
+    {
+        group: "Lists",
+        items: [
+            {
+                value: "bullet list ul",
+                label: "Bullet List",
+                description: "Unordered list of items",
+                icon: IconList,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleBulletList().run(),
+            },
+            {
+                value: "ordered list ol numbered",
+                label: "Numbered List",
+                description: "Ordered list of items",
+                icon: IconListNumbers,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleOrderedList().run(),
+            },
+            {
+                value: "task list todo checklist",
+                label: "Task List",
+                description: "Checklist of to-do items",
+                icon: IconListCheck,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleTaskList().run(),
+            },
+            {
+                value: "quote blockquote",
+                label: "Blockquote",
+                description: "Highlight a quote or excerpt",
+                icon: IconBlockquote,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleBlockquote().run(),
+            },
+        ],
+    },
+    {
+        group: "Insert",
+        items: [
+            {
+                value: "image photo picture",
+                label: "Image",
+                description: "Upload or embed an image",
+                icon: IconPhoto,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setImageBlock({ src: "" }).run(),
+            },
+            {
+                value: "video embed youtube vimeo",
+                label: "Video",
+                description: "Embed a YouTube or Vimeo video",
+                icon: IconVideo,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setVideoBlock({ src: "" }).run(),
+            },
+            {
+                value: "table grid",
+                label: "Table",
+                description: "Insert a table with rows and columns",
+                icon: IconTable,
+                onCommand: ({ editor, range }) => {
+                    editor.chain().focus().deleteRange(range).run();
+                    if (editor.commands.insertTable) {
+                        editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true });
+                    }
+                },
+            },
+            {
+                value: "code block codeblock",
+                label: "Code Block",
+                description: "Syntax-highlighted code block",
+                icon: IconSourceCode,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+            },
+            {
+                value: "code inline",
+                label: "Inline Code",
+                description: "Mark text as inline code",
+                icon: IconCode,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCode().run(),
+            },
+            {
+                value: "divider horizontal rule separator",
+                label: "Divider",
+                description: "Horizontal separator line",
+                icon: IconMinus,
+                onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
+            },
+        ],
+    },
+];
+export function SlashMenu({ className }) {
+    const { editor } = useCurrentEditor();
+    const query = useAtomValue(queryAtom, { store: novelStore });
+    // Pre-filter groups to determine if we should show empty state
+    const filteredGroups = useMemo(() => {
+        if (!query)
+            return SLASH_COMMANDS;
+        const q = query.toLowerCase();
+        return SLASH_COMMANDS.map((group) => ({
+            ...group,
+            items: group.items.filter((item) => item.value.toLowerCase().includes(q)),
+        })).filter((group) => group.items.length > 0);
+    }, [query]);
+    if (!editor)
+        return null;
+    return (_jsx(EditorCommand, { className: className ?? "nph-command", children: _jsx(EditorCommandList, { className: "nph-command__list", style: { display: "flex", flexDirection: "column", gap: 2 }, children: filteredGroups.length === 0 ? (_jsx("div", { style: { padding: "8px 12px", fontSize: 14, color: "var(--muted-foreground, #6b7280)" }, children: "No commands found" })) : (filteredGroups.map((group) => (_jsxs("div", { children: [_jsx("div", { className: "nph-command__group-header", children: group.group }), group.items.map((item) => {
+                        const Icon = item.icon;
+                        return (_jsxs(EditorCommandItem, { value: item.value, className: "nph-command__item", onCommand: item.onCommand, children: [_jsx("div", { className: "nph-command__item-icon", children: _jsx(Icon, { size: 18 }) }), _jsxs("div", { className: "nph-command__item-content", children: [_jsx("span", { className: "nph-command__item-title", children: item.label }), _jsx("span", { className: "nph-command__item-description", children: item.description })] })] }, item.value));
+                    })] }, group.group)))) }) }));
+}
+export default SlashMenu;

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

@@ -0,0 +1,5 @@
+export type TableMenuProps = {
+    className?: string;
+};
+export declare function TableMenu({ className: _className }: TableMenuProps): import("react").ReactPortal | null;
+export default TableMenu;