neuphlo-editor 2.5.0 → 2.6.0

package/dist/react/menus/DragHandle/BlockActionMenu.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from "@tiptap/react";
+export type BlockActionMenuProps = {
+    editor: Editor;
+    onClose: () => void;
+};
+export declare function BlockActionMenu({ editor, onClose }: BlockActionMenuProps): import("react/jsx-runtime").JSX.Element;
+export default BlockActionMenu;

package/dist/react/menus/DragHandle/BlockActionMenu.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCopy, IconTrash, IconArrowUp, IconArrowDown, IconClipboard, } from "@tabler/icons-react";
+import { useCallback } from "react";
+export function BlockActionMenu({ editor, onClose }) {
+    const executeAndClose = useCallback((fn) => {
+        fn();
+        onClose();
+    }, [onClose]);
+    const handleDelete = useCallback(() => {
+        executeAndClose(() => {
+            editor.commands.deleteSelection();
+        });
+    }, [editor, executeAndClose]);
+    const handleDuplicate = useCallback(() => {
+        executeAndClose(() => {
+            const { state } = editor;
+            const { selection } = state;
+            const { $anchor } = selection;
+            // Find the top-level block
+            const depth = $anchor.depth > 0 ? 1 : 0;
+            const start = $anchor.start(depth);
+            const end = $anchor.end(depth);
+            const node = state.doc.nodeAt(start - 1);
+            if (node) {
+                const insertPos = end + 1;
+                editor
+                    .chain()
+                    .focus()
+                    .insertContentAt(insertPos, node.toJSON())
+                    .run();
+            }
+        });
+    }, [editor, executeAndClose]);
+    const handleMoveUp = useCallback(() => {
+        executeAndClose(() => {
+            const { state } = editor;
+            const { selection } = state;
+            const { $anchor } = selection;
+            const depth = $anchor.depth > 0 ? 1 : 0;
+            const blockStart = $anchor.start(depth) - 1;
+            if (blockStart <= 0)
+                return; // Already at top
+            const node = state.doc.nodeAt(blockStart);
+            if (!node)
+                return;
+            // Find previous sibling
+            const $pos = state.doc.resolve(blockStart);
+            const index = $pos.index($pos.depth);
+            if (index === 0)
+                return; // First child
+            const prevNode = $pos.node($pos.depth).child(index - 1);
+            const prevStart = blockStart - prevNode.nodeSize;
+            editor.chain().focus()
+                .command(({ tr }) => {
+                const currentSlice = state.doc.slice(blockStart, blockStart + node.nodeSize);
+                tr.delete(blockStart, blockStart + node.nodeSize);
+                tr.insert(prevStart, currentSlice.content);
+                return true;
+            })
+                .run();
+        });
+    }, [editor, executeAndClose]);
+    const handleMoveDown = useCallback(() => {
+        executeAndClose(() => {
+            const { state } = editor;
+            const { selection } = state;
+            const { $anchor } = selection;
+            const depth = $anchor.depth > 0 ? 1 : 0;
+            const blockStart = $anchor.start(depth) - 1;
+            const node = state.doc.nodeAt(blockStart);
+            if (!node)
+                return;
+            const blockEnd = blockStart + node.nodeSize;
+            // Check if there's a next sibling
+            const $pos = state.doc.resolve(blockStart);
+            const parent = $pos.node($pos.depth);
+            const index = $pos.index($pos.depth);
+            if (index >= parent.childCount - 1)
+                return; // Last child
+            const nextNode = parent.child(index + 1);
+            const nextEnd = blockEnd + nextNode.nodeSize;
+            editor.chain().focus()
+                .command(({ tr }) => {
+                const currentSlice = state.doc.slice(blockStart, blockEnd);
+                tr.delete(blockStart, blockEnd);
+                const insertPos = blockStart + nextNode.nodeSize;
+                tr.insert(insertPos, currentSlice.content);
+                return true;
+            })
+                .run();
+        });
+    }, [editor, executeAndClose]);
+    const handleCopyToClipboard = useCallback(() => {
+        executeAndClose(() => {
+            const { state } = editor;
+            const { selection } = state;
+            const { $anchor } = selection;
+            const depth = $anchor.depth > 0 ? 1 : 0;
+            const start = $anchor.start(depth) - 1;
+            const node = state.doc.nodeAt(start);
+            if (node) {
+                const text = node.textContent;
+                navigator.clipboard.writeText(text).catch(() => {
+                    // Fallback: silently fail
+                });
+            }
+        });
+    }, [editor, executeAndClose]);
+    return (_jsx("div", { className: "nph-block-action-menu nph-command", children: _jsxs("div", { className: "nph-command__list", style: { maxHeight: "none" }, children: [_jsxs("button", { type: "button", className: "nph-command__item", onClick: handleDelete, onMouseDown: (e) => e.preventDefault(), children: [_jsx(IconTrash, { size: 16 }), _jsx("span", { children: "Delete" })] }), _jsxs("button", { type: "button", className: "nph-command__item", onClick: handleDuplicate, onMouseDown: (e) => e.preventDefault(), children: [_jsx(IconCopy, { size: 16 }), _jsx("span", { children: "Duplicate" })] }), _jsxs("button", { type: "button", className: "nph-command__item", onClick: handleCopyToClipboard, onMouseDown: (e) => e.preventDefault(), children: [_jsx(IconClipboard, { size: 16 }), _jsx("span", { children: "Copy to clipboard" })] }), _jsxs("button", { type: "button", className: "nph-command__item", onClick: handleMoveUp, onMouseDown: (e) => e.preventDefault(), children: [_jsx(IconArrowUp, { size: 16 }), _jsx("span", { children: "Move up" })] }), _jsxs("button", { type: "button", className: "nph-command__item", onClick: handleMoveDown, onMouseDown: (e) => e.preventDefault(), children: [_jsx(IconArrowDown, { size: 16 }), _jsx("span", { children: "Move down" })] })] }) }));
+}
+export default BlockActionMenu;

package/dist/react/menus/DragHandle/DragHandleMenu.d.ts

@@ -0,0 +1,7 @@
+export declare function DragHandleMenu(): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Creates the drag handle DOM element with + and grip buttons.
+ * Called by the DragHandle extension's render() option.
+ */
+export declare function createDragHandleElement(onAddBlock: () => void, onGripClick: () => void): HTMLElement;
+export default DragHandleMenu;

package/dist/react/menus/DragHandle/DragHandleMenu.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCurrentEditor } from "@tiptap/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BlockActionMenu } from "./BlockActionMenu";
+export function DragHandleMenu() {
+    const { editor } = useCurrentEditor();
+    const [hoveredNode, setHoveredNode] = useState(null);
+    const [showActions, setShowActions] = useState(false);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const handler = ({ node }) => {
+            setHoveredNode(node);
+            if (!node)
+                setShowActions(false);
+        };
+        // The drag handle extension calls onNodeChange
+        // We use the editor's storage to communicate
+        const ext = editor.extensionManager.extensions.find((e) => e.name === "dragHandle");
+        if (ext) {
+            const origOnNodeChange = ext.options.onNodeChange;
+            ext.options.onNodeChange = (opts) => {
+                origOnNodeChange?.(opts);
+                handler(opts);
+            };
+        }
+        return () => {
+            // Cleanup
+        };
+    }, [editor]);
+    const handleAddBlock = useCallback(() => {
+        if (!editor)
+            return;
+        // Get current position and insert a new paragraph after the current block
+        const { state } = editor;
+        const { selection } = state;
+        const pos = selection.$anchor.end();
+        editor
+            .chain()
+            .focus()
+            .insertContentAt(pos + 1, { type: "paragraph" })
+            .focus(pos + 2)
+            .run();
+    }, [editor]);
+    const handleGripClick = useCallback(() => {
+        setShowActions((prev) => !prev);
+    }, []);
+    // Close action menu on click outside
+    useEffect(() => {
+        if (!showActions)
+            return;
+        const handleClick = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                setShowActions(false);
+            }
+        };
+        document.addEventListener("pointerdown", handleClick);
+        return () => document.removeEventListener("pointerdown", handleClick);
+    }, [showActions]);
+    if (!editor)
+        return null;
+    return (_jsx("div", { ref: menuRef, style: { position: "relative" }, children: showActions && editor && (_jsx(BlockActionMenu, { editor: editor, onClose: () => setShowActions(false) })) }));
+}
+/**
+ * Creates the drag handle DOM element with + and grip buttons.
+ * Called by the DragHandle extension's render() option.
+ */
+export function createDragHandleElement(onAddBlock, onGripClick) {
+    const container = document.createElement("div");
+    container.className = "nph-drag-handle";
+    const plusBtn = document.createElement("button");
+    plusBtn.className = "nph-drag-handle__btn";
+    plusBtn.type = "button";
+    plusBtn.setAttribute("aria-label", "Add block");
+    plusBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>`;
+    plusBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onAddBlock();
+    });
+    const gripBtn = document.createElement("button");
+    gripBtn.className = "nph-drag-handle__btn nph-drag-handle__grip";
+    gripBtn.type = "button";
+    gripBtn.setAttribute("aria-label", "Drag to reorder");
+    gripBtn.setAttribute("draggable", "true");
+    gripBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/></svg>`;
+    gripBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onGripClick();
+    });
+    container.appendChild(plusBtn);
+    container.appendChild(gripBtn);
+    return container;
+}
+export default DragHandleMenu;

package/dist/react/menus/ImageBlock/ImageBlockLoading.d.ts

@@ -0,0 +1,2 @@
+export declare const ImageBlockLoading: () => import("react/jsx-runtime").JSX.Element;
+export default ImageBlockLoading;

package/dist/react/menus/ImageBlock/ImageBlockLoading.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconLoader2 } from "@tabler/icons-react";
+export const ImageBlockLoading = () => {
+    return (_jsxs("div", { className: "nph-image-block-loading", children: [_jsx("div", { className: "nph-image-block-loading__overlay", children: _jsxs("div", { className: "nph-image-block-loading__content", children: [_jsx(IconLoader2, { size: 24, className: "nph-image-block-loading__spinner" }), _jsx("p", { className: "nph-image-block-loading__text", children: "Uploading image..." })] }) }), _jsx("div", { className: "nph-image-block-loading__placeholder" })] }));
+};
+export default ImageBlockLoading;

package/dist/react/menus/ImageBlock/ImageBlockMenu.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from "@tiptap/react";
+export type ImageBlockMenuProps = {
+    editor: Editor;
+    getPos: () => number;
+    appendTo?: React.RefObject<HTMLElement | null>;
+};
+export declare const ImageBlockMenu: ({ editor, getPos, appendTo }: ImageBlockMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ImageBlockMenu;

package/dist/react/menus/ImageBlock/ImageBlockMenu.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeSelection } from "@tiptap/pm/state";
+import { useEditorState } from "@tiptap/react";
+import { useCallback, useRef } from "react";
+import { ImageBlockWidth } from "./ImageBlockWidth";
+import { IconAlignLeft, IconAlignCenter, IconAlignRight, IconTrash, } from "@tabler/icons-react";
+export const ImageBlockMenu = ({ editor, getPos, appendTo }) => {
+    const menuRef = useRef(null);
+    const { isVisible, align, width } = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (!ctx.editor)
+                return { isVisible: false, align: "center", width: 100 };
+            const { state } = ctx.editor;
+            const { selection } = state;
+            if (!ctx.editor.isEditable)
+                return { isVisible: false, align: "center", width: 100 };
+            if (!ctx.editor.isFocused)
+                return { isVisible: false, align: "center", width: 100 };
+            const isNodeSel = selection instanceof NodeSelection;
+            const isThisNode = isNodeSel && selection.from === getPos();
+            const visible = isThisNode;
+            let currentAlign = "center";
+            let currentWidth = 100;
+            if (visible) {
+                const attrs = ctx.editor.getAttributes("imageBlock");
+                currentAlign = attrs.align || "center";
+                const widthStr = attrs.width || "100%";
+                currentWidth = parseInt(widthStr) || 100;
+            }
+            return { isVisible: visible, align: currentAlign, width: currentWidth };
+        },
+    });
+    const onAlignImageLeft = useCallback(() => {
+        editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .setImageBlockAlign("left")
+            .run();
+    }, [editor]);
+    const onAlignImageCenter = useCallback(() => {
+        editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .setImageBlockAlign("center")
+            .run();
+    }, [editor]);
+    const onAlignImageRight = useCallback(() => {
+        editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .setImageBlockAlign("right")
+            .run();
+    }, [editor]);
+    const onWidthChange = useCallback((value) => {
+        editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .setImageBlockWidth(value)
+            .run();
+    }, [editor]);
+    const onRemoveImage = useCallback(() => {
+        editor.chain().focus(undefined, { scrollIntoView: false }).deleteSelection().run();
+    }, [editor]);
+    if (!isVisible)
+        return null;
+    return (_jsxs("div", { className: "bubble-menu", ref: menuRef, style: {
+            position: "absolute",
+            top: "-40px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: "var(--nph-z, 50)",
+        }, children: [_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: onAlignImageLeft, 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: onAlignImageCenter, 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: onAlignImageRight, children: _jsx(IconAlignRight, { size: 16 }) }), _jsx("div", { className: "nph-link-popover__divider", style: { margin: "0 4px" } }), _jsx(ImageBlockWidth, { onChange: onWidthChange, value: width }), _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: "Remove image", onMouseDown: (e) => e.preventDefault(), onClick: onRemoveImage, children: _jsx(IconTrash, { size: 16 }) })] }));
+};
+export default ImageBlockMenu;

package/dist/react/menus/ImageBlock/ImageBlockView.d.ts

@@ -0,0 +1,10 @@
+import { Node } from "@tiptap/pm/model";
+import { Editor } from "@tiptap/react";
+interface ImageBlockViewProps {
+    editor: Editor;
+    getPos: () => number;
+    node: Node;
+    updateAttributes: (attrs: Record<string, any>) => void;
+}
+export declare const ImageBlockView: (props: ImageBlockViewProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageBlockView;

package/dist/react/menus/ImageBlock/ImageBlockView.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewWrapper } from "@tiptap/react";
+import { useCallback, useRef, useState } from "react";
+import { IconPhotoOff } from "@tabler/icons-react";
+import { ImageBlockMenu } from "./ImageBlockMenu";
+import { ImageUploader } from "./ImageUploader";
+import { ImageBlockLoading } from "./ImageBlockLoading";
+import { ImageResizeHandle } from "./ImageResizeHandle";
+export const ImageBlockView = (props) => {
+    const { editor, getPos, node, updateAttributes } = props;
+    const imageWrapperRef = useRef(null);
+    const [imageError, setImageError] = useState(false);
+    const { src, width, align, alt, loading } = node.attrs;
+    const handleUpload = useCallback((url) => {
+        updateAttributes({ src: url, loading: false });
+    }, [updateAttributes]);
+    const onClick = useCallback(() => {
+        editor.commands.setNodeSelection(getPos());
+    }, [getPos, editor.commands]);
+    const handleResize = useCallback((widthPercent) => {
+        updateAttributes({ width: `${widthPercent}%` });
+    }, [updateAttributes]);
+    // Calculate wrapper style based on alignment and width
+    const getWrapperStyle = () => {
+        const baseStyle = {
+            width: width || "100%",
+            maxWidth: "100%",
+        };
+        if (align === "left") {
+            return { ...baseStyle, marginLeft: 0, marginRight: "auto" };
+        }
+        else if (align === "right") {
+            return { ...baseStyle, marginLeft: "auto", marginRight: 0 };
+        }
+        else {
+            return { ...baseStyle, marginLeft: "auto", marginRight: "auto" };
+        }
+    };
+    // The inner content wrapper for positioning the menu
+    const getContentStyle = () => ({
+        position: "relative",
+    });
+    // Show uploader if no src (only when editable)
+    if (!src || src === "") {
+        if (!editor.isEditable)
+            return _jsx(NodeViewWrapper, {});
+        return (_jsx(NodeViewWrapper, { style: { width: "100%", marginTop: "0.5rem", marginBottom: "0.5rem" }, children: _jsx("div", { ref: imageWrapperRef, children: _jsx(ImageUploader, { onUpload: handleUpload, editor: editor }) }) }));
+    }
+    // Show loading placeholder
+    if (loading) {
+        return (_jsx(NodeViewWrapper, { style: getWrapperStyle(), children: _jsx("div", { ref: imageWrapperRef, children: _jsx(ImageBlockLoading, {}) }) }));
+    }
+    // Show error state for broken images
+    if (imageError) {
+        return (_jsx(NodeViewWrapper, { style: getWrapperStyle(), children: _jsxs("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [_jsxs("div", { className: "nph-image-block-error", onClick: onClick, children: [_jsx(IconPhotoOff, { size: 32 }), _jsx("span", { children: "Image could not be loaded" })] }), editor.isEditable && _jsx(ImageBlockMenu, { editor: editor, getPos: getPos, appendTo: imageWrapperRef })] }) }));
+    }
+    // Show the actual image
+    return (_jsx(NodeViewWrapper, { style: getWrapperStyle(), children: _jsxs("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [editor.isEditable ? (_jsx(ImageResizeHandle, { onResize: handleResize, currentWidth: width, children: _jsx("img", { src: src, alt: alt || "", onClick: onClick, onError: () => setImageError(true), className: "nph-image-block" }) })) : (_jsx("img", { src: src, alt: alt || "", onError: () => setImageError(true), className: "nph-image-block" })), editor.isEditable && _jsx(ImageBlockMenu, { editor: editor, getPos: getPos, appendTo: imageWrapperRef })] }) }));
+};
+export default ImageBlockView;

package/dist/react/menus/ImageBlock/ImageBlockWidth.d.ts

@@ -0,0 +1,6 @@
+export type ImageBlockWidthProps = {
+    onChange: (value: number) => void;
+    value: number;
+};
+export declare const ImageBlockWidth: import("react").MemoExoticComponent<({ onChange, value }: ImageBlockWidthProps) => import("react/jsx-runtime").JSX.Element>;
+export default ImageBlockWidth;

package/dist/react/menus/ImageBlock/ImageBlockWidth.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useState } from "react";
+export const ImageBlockWidth = memo(({ onChange, value }) => {
+    const [currentValue, setCurrentValue] = useState(value);
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    const handleChange = useCallback((e) => {
+        const nextValue = parseInt(e.target.value);
+        onChange(nextValue);
+        setCurrentValue(nextValue);
+    }, [onChange]);
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            minWidth: 140,
+        }, children: [_jsxs("span", { style: { fontSize: "12px", whiteSpace: "nowrap", width: 40 }, children: [currentValue, "%"] }), _jsx("input", { type: "range", min: "25", max: "100", step: "25", value: currentValue, onChange: handleChange, onMouseDown: (e) => e.stopPropagation(), style: {
+                    flex: 1,
+                    height: 3,
+                    borderRadius: 9999,
+                    appearance: "none",
+                    background: "linear-gradient(to right, #333 0%, #333 " + currentValue + "%, #ddd " + currentValue + "%, #ddd 100%)",
+                    outline: "none",
+                    cursor: "pointer",
+                }, className: "nph-image-width-slider" })] }));
+});
+ImageBlockWidth.displayName = "ImageBlockWidth";
+export default ImageBlockWidth;

package/dist/react/menus/ImageBlock/ImageResizeHandle.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type ImageResizeHandleProps = {
+    children: ReactNode;
+    onResize: (widthPercent: number) => void;
+    currentWidth?: string;
+};
+export declare function ImageResizeHandle({ children, onResize, currentWidth, }: ImageResizeHandleProps): import("react/jsx-runtime").JSX.Element;
+export default ImageResizeHandle;

package/dist/react/menus/ImageBlock/ImageResizeHandle.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+export function ImageResizeHandle({ children, onResize, currentWidth, }) {
+    const containerRef = useRef(null);
+    const [isResizing, setIsResizing] = useState(false);
+    const handleMouseDown = useCallback((e, side) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsResizing(true);
+        const startX = e.clientX;
+        const containerEl = containerRef.current;
+        if (!containerEl)
+            return;
+        const editorEl = containerEl.closest(".nph-editor") || containerEl.parentElement;
+        if (!editorEl)
+            return;
+        const editorWidth = editorEl.getBoundingClientRect().width;
+        const startWidth = containerEl.getBoundingClientRect().width;
+        const startPercent = (startWidth / editorWidth) * 100;
+        const handleMouseMove = (moveEvent) => {
+            const deltaX = moveEvent.clientX - startX;
+            const direction = side === "right" ? 1 : -1;
+            const deltaPercent = (deltaX * direction / editorWidth) * 100 * 2; // *2 because resizing from center
+            const newPercent = Math.max(10, Math.min(100, startPercent + deltaPercent));
+            onResize(Math.round(newPercent));
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }, [onResize]);
+    return (_jsxs("div", { ref: containerRef, className: `nph-resize-wrapper${isResizing ? " nph-resize-wrapper--active" : ""}`, children: [children, _jsx("div", { className: "nph-resize-handle nph-resize-handle--left", onMouseDown: (e) => handleMouseDown(e, "left") }), _jsx("div", { className: "nph-resize-handle nph-resize-handle--right", onMouseDown: (e) => handleMouseDown(e, "right") })] }));
+}
+export default ImageResizeHandle;

package/dist/react/menus/ImageBlock/ImageUploader.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from "@tiptap/react";
+export type ImageUploaderProps = {
+    onUpload: (url: string) => void;
+    editor: Editor;
+};
+export declare const ImageUploader: ({ onUpload, editor }: ImageUploaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageUploader;

package/dist/react/menus/ImageBlock/ImageUploader.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPhoto, IconUpload } from "@tabler/icons-react";
+import { useCallback, useRef, useState } from "react";
+import { ImageBlockLoading } from "./ImageBlockLoading";
+export const ImageUploader = ({ onUpload, editor }) => {
+    const [loading, setLoading] = useState(false);
+    const [draggedInside, setDraggedInside] = useState(false);
+    const fileInputRef = useRef(null);
+    const imageExtension = editor.extensionManager.extensions.find((ext) => ext.name === "imageBlock");
+    const browseAssets = imageExtension?.options?.browseAssets;
+    const uploadFile = useCallback(async (file) => {
+        setLoading(true);
+        try {
+            const uploadImage = imageExtension?.options?.uploadImage;
+            if (uploadImage) {
+                const url = await uploadImage(file);
+                onUpload(url);
+            }
+            else {
+                console.error("No uploadImage handler provided");
+            }
+        }
+        catch (error) {
+            console.error("Failed to upload image:", error);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [imageExtension, onUpload]);
+    const handleUploadClick = useCallback(() => {
+        fileInputRef.current?.click();
+    }, []);
+    const onFileChange = useCallback((e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            uploadFile(file);
+        }
+    }, [uploadFile]);
+    const onDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraggedInside(false);
+        const file = e.dataTransfer.files[0];
+        if (file && /image/i.test(file.type)) {
+            uploadFile(file);
+        }
+    }, [uploadFile]);
+    const onDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraggedInside(true);
+    }, []);
+    const onDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraggedInside(false);
+    }, []);
+    if (loading) {
+        return _jsx(ImageBlockLoading, {});
+    }
+    // When browseAssets is provided, show a clean asset browser CTA
+    if (browseAssets) {
+        return (_jsx("div", { className: "nph-image-uploader nph-image-uploader--browse-only", contentEditable: false, onClick: () => browseAssets(onUpload), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    browseAssets(onUpload);
+                }
+            }, children: _jsxs("div", { className: "nph-image-uploader__browse-cta", children: [_jsx("div", { className: "nph-image-uploader__browse-icon-wrapper", children: _jsx(IconPhoto, { size: 28 }) }), _jsxs("div", { className: "nph-image-uploader__browse-text", children: [_jsx("span", { className: "nph-image-uploader__browse-title", children: "Choose from assets" }), _jsx("span", { className: "nph-image-uploader__browse-subtitle", children: "Select an image from your library" })] })] }) }));
+    }
+    // Fallback: standard drag-and-drop / upload flow
+    return (_jsxs("div", { className: `nph-image-uploader${draggedInside ? " nph-image-uploader--dragging" : ""}`, onDrop: onDrop, onDragOver: onDragEnter, onDragLeave: onDragLeave, contentEditable: false, children: [_jsx(IconPhoto, { size: 48, className: "nph-image-uploader__icon" }), _jsxs("div", { className: "nph-image-uploader__content", children: [_jsx("div", { className: "nph-image-uploader__text", children: draggedInside ? "Drop image here" : "Drag and drop or" }), _jsx("div", { className: "nph-image-uploader__actions", children: _jsxs("button", { type: "button", disabled: draggedInside, onClick: handleUploadClick, className: "nph-btn nph-btn-ghost nph-btn-sm nph-image-uploader__button", children: [_jsx(IconUpload, { size: 16 }), "Upload an image"] }) })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: ".jpg,.jpeg,.png,.webp,.gif", onChange: onFileChange, className: "nph-image-uploader__input" })] }));
+};
+export default ImageUploader;

package/dist/react/menus/ImageBlock/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageBlockView } from "./ImageBlockView";
+export { ImageBlockMenu } from "./ImageBlockMenu";
+export { ImageBlockWidth } from "./ImageBlockWidth";
+export { ImageUploader } from "./ImageUploader";

package/dist/react/menus/ImageBlock/index.js

@@ -0,0 +1,4 @@
+export { ImageBlockView } from "./ImageBlockView";
+export { ImageBlockMenu } from "./ImageBlockMenu";
+export { ImageBlockWidth } from "./ImageBlockWidth";
+export { ImageUploader } from "./ImageUploader";

package/dist/react/menus/ImageMenu.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 ImageMenuProps = {
+    className?: string;
+    leadingExtras?: ExtraRenderer[];
+    trailingExtras?: ExtraRenderer[];
+};
+export declare function ImageMenu({ className, leadingExtras, trailingExtras, }: ImageMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default ImageMenu;