neuphlo-editor 2.5.0 → 2.6.0

package/dist/react/menus/VideoBlock/VideoBlockMenu.js

@@ -0,0 +1,72 @@
+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 "../ImageBlock/ImageBlockWidth";
+import { IconAlignLeft, IconAlignCenter, IconAlignRight, IconTrash, } from "@tabler/icons-react";
+export const VideoBlockMenu = ({ editor, getPos }) => {
+    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 };
+            const isNodeSel = selection instanceof NodeSelection;
+            const isThisNode = isNodeSel && selection.from === getPos();
+            let currentAlign = "center";
+            let currentWidth = 100;
+            if (isThisNode) {
+                const attrs = ctx.editor.getAttributes("videoBlock");
+                currentAlign = attrs.align || "center";
+                const widthStr = attrs.width || "100%";
+                currentWidth = parseInt(widthStr) || 100;
+            }
+            return { isVisible: isThisNode, align: currentAlign, width: currentWidth };
+        },
+    });
+    const onAlignLeft = useCallback(() => {
+        editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .setVideoBlockAlign("left")
+            .run();
+    }, [editor]);
+    const onAlignCenter = useCallback(() => {
+        editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .setVideoBlockAlign("center")
+            .run();
+    }, [editor]);
+    const onAlignRight = useCallback(() => {
+        editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .setVideoBlockAlign("right")
+            .run();
+    }, [editor]);
+    const onWidthChange = useCallback((value) => {
+        editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .setVideoBlockWidth(value)
+            .run();
+    }, [editor]);
+    const onRemove = 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: onAlignLeft, 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: onAlignCenter, 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: onAlignRight, 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 video", onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: _jsx(IconTrash, { size: 16 }) })] }));
+};
+export default VideoBlockMenu;

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

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

package/dist/react/menus/VideoBlock/VideoBlockView.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeSelection } from "@tiptap/pm/state";
+import { NodeViewWrapper, useEditorState } from "@tiptap/react";
+import { useCallback, useRef, useState } from "react";
+import { VideoBlockMenu } from "./VideoBlockMenu";
+import { IconVideo, IconVideoOff } from "@tabler/icons-react";
+function toEmbedUrl(url) {
+    // Already an embed URL — return as-is
+    if (url.includes("/embed/") || url.includes("player.vimeo.com") || url.includes("loom.com/embed")) {
+        return url;
+    }
+    // YouTube: youtube.com/watch?v=ID, youtu.be/ID, youtube.com/shorts/ID
+    const ytMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([\w-]+)/);
+    if (ytMatch) {
+        return `https://www.youtube.com/embed/${ytMatch[1]}`;
+    }
+    // Vimeo: vimeo.com/ID or vimeo.com/channels/.../ID
+    const vimeoMatch = url.match(/vimeo\.com\/(?:channels\/[\w-]+\/)?(\d+)/);
+    if (vimeoMatch) {
+        return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
+    }
+    // Loom: loom.com/share/ID
+    const loomMatch = url.match(/loom\.com\/share\/([\w-]+)/);
+    if (loomMatch) {
+        return `https://www.loom.com/embed/${loomMatch[1]}`;
+    }
+    return url;
+}
+export const VideoBlockView = (props) => {
+    const { editor, getPos, node, updateAttributes } = props;
+    const wrapperRef = useRef(null);
+    const { src, width, align } = node.attrs;
+    const [inputUrl, setInputUrl] = useState("");
+    const [videoError, setVideoError] = useState(false);
+    const isSelected = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (!ctx.editor)
+                return false;
+            const { selection } = ctx.editor.state;
+            return selection instanceof NodeSelection && selection.from === getPos();
+        },
+    });
+    const handleEmbed = useCallback(() => {
+        if (!inputUrl.trim())
+            return;
+        const embedUrl = toEmbedUrl(inputUrl.trim());
+        updateAttributes({ src: embedUrl });
+    }, [inputUrl, updateAttributes]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            handleEmbed();
+        }
+    }, [handleEmbed]);
+    const onClick = useCallback(() => {
+        editor.commands.setNodeSelection(getPos());
+    }, [getPos, editor.commands]);
+    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" };
+        }
+    };
+    // Show URL input if no src (only when editable)
+    if (!src || src === "") {
+        if (!editor.isEditable)
+            return _jsx(NodeViewWrapper, {});
+        return (_jsx(NodeViewWrapper, { style: getWrapperStyle(), children: _jsx("div", { ref: wrapperRef, children: _jsxs("div", { className: "nph-video-placeholder", onClick: onClick, children: [_jsx("div", { className: "nph-video-placeholder__icon", children: _jsx(IconVideo, { size: 28, stroke: 1.5 }) }), _jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px" }, children: [_jsx("div", { style: { fontSize: "14px", fontWeight: 600, lineHeight: "20px" }, children: "Add a video" }), _jsx("div", { style: { fontSize: "13px", opacity: 0.5, lineHeight: "18px" }, children: "Paste a URL to embed" })] }), _jsxs("div", { className: "nph-video-placeholder__input", children: [_jsx("input", { type: "text", className: "nph-video-input__field", placeholder: "YouTube, Vimeo, or Loom URL...", value: inputUrl, onChange: (e) => setInputUrl(e.target.value), onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation() }), _jsx("button", { type: "button", className: "nph-video-input__button", onClick: (e) => { e.stopPropagation(); handleEmbed(); }, disabled: !inputUrl.trim(), children: "Embed" })] })] }) }) }));
+    }
+    // Show error state for broken video
+    if (videoError) {
+        return (_jsx(NodeViewWrapper, { style: getWrapperStyle(), children: _jsxs("div", { contentEditable: false, ref: wrapperRef, style: { position: "relative" }, children: [_jsxs("div", { className: "nph-video-block-error", onClick: onClick, children: [_jsx(IconVideoOff, { size: 32 }), _jsx("span", { children: "Video could not be loaded" }), _jsx("span", { className: "nph-video-block-error__url", children: src })] }), editor.isEditable && _jsx(VideoBlockMenu, { editor: editor, getPos: getPos })] }) }));
+    }
+    // Show the embedded video
+    return (_jsx(NodeViewWrapper, { style: getWrapperStyle(), children: _jsxs("div", { contentEditable: false, ref: wrapperRef, style: { position: "relative" }, children: [_jsxs("div", { className: "nph-video-block", children: [_jsx("iframe", { src: src, className: "nph-video-block__iframe", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, onError: () => setVideoError(true) }), !isSelected && (_jsx("div", { className: "nph-video-block__overlay", onClick: onClick }))] }), editor.isEditable && _jsx(VideoBlockMenu, { editor: editor, getPos: getPos })] }) }));
+};
+export default VideoBlockView;

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

@@ -0,0 +1,2 @@
+export { VideoBlockView } from "./VideoBlockView";
+export { VideoBlockMenu } from "./VideoBlockMenu";

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

@@ -0,0 +1,2 @@
+export { VideoBlockView } from "./VideoBlockView";
+export { VideoBlockMenu } from "./VideoBlockMenu";

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

@@ -0,0 +1,15 @@
+export { TextMenu } from "./TextMenu";
+export type { TextMenuProps } from "./TextMenu";
+export { SlashMenu } from "./SlashMenu";
+export type { SlashMenuProps } from "./SlashMenu";
+export { LinkMenu } from "./LinkMenu";
+export { ImagePopover } from "./ImagePopover";
+export type { ImagePopoverProps } from "./ImagePopover";
+export { ImageMenu } from "./ImageMenu";
+export type { ImageMenuProps } from "./ImageMenu";
+export { ImageBlockView, ImageBlockMenu, ImageBlockWidth, ImageUploader } from "./ImageBlock";
+export { VideoBlockView, VideoBlockMenu } from "./VideoBlock";
+export { BlockActionMenu } from "./DragHandle/BlockActionMenu";
+export type { BlockActionMenuProps } from "./DragHandle/BlockActionMenu";
+export { TableMenu } from "./TableMenu";
+export type { TableMenuProps } from "./TableMenu";

package/dist/react/menus/index.js

@@ -0,0 +1,9 @@
+export { TextMenu } from "./TextMenu";
+export { SlashMenu } from "./SlashMenu";
+export { LinkMenu } from "./LinkMenu";
+export { ImagePopover } from "./ImagePopover";
+export { ImageMenu } from "./ImageMenu";
+export { ImageBlockView, ImageBlockMenu, ImageBlockWidth, ImageUploader } from "./ImageBlock";
+export { VideoBlockView, VideoBlockMenu } from "./VideoBlock";
+export { BlockActionMenu } from "./DragHandle/BlockActionMenu";
+export { TableMenu } from "./TableMenu";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neuphlo-editor",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "private": false,
   "description": "A lightweight React wrapper around Tiptap with sensible defaults and image upload support.",
   "type": "module",
@@ -72,6 +72,7 @@
     "@tiptap/pm": "3.20.2",
     "@tiptap/react": "3.20.2",
     "@tiptap/suggestion": "3.20.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.0.0",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.5",
@@ -121,6 +122,7 @@
     "highlight.js": "^11.11.1",
     "jotai": "^2.11.0",
     "lowlight": "^3.3.0",
+    "markdown-it": "^14.1.0",
     "tunnel-rat": "^0.1.2",
     "yjs": "^13.6.0"
   }