@rebasepro/cms 0.17.3 → 0.18.0

package/src/editor/components/editor-bubble.tsx

@@ -1,143 +0,0 @@
-import { forwardRef, type ReactNode, useEffect, useRef, useState } from "react";
-import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import {
-    autoUpdate,
-    computePosition,
-    flip,
-    offset,
-    shift,
-    type VirtualElement,
-    type Placement
-} from "@floating-ui/dom";
-import { NodeSelection } from "prosemirror-state";
-
-export interface EditorBubbleProps {
-    children: ReactNode;
-    options?: { placement?: Placement; offset?: number };
-    className?: string;
-}
-
-export const EditorBubble = forwardRef<HTMLDivElement, EditorBubbleProps>(
-    ({
-         children,
-         options,
-         className
-     }, ref) => {
-        const {
-            view,
-            state
-        } = useProseMirrorContext();
-        const menuRef = useRef<HTMLDivElement>(null);
-        const [show, setShow] = useState(false);
-
-        useEffect(() => {
-            if (!view || !state) return;
-
-            // Delay evaluation slightly to let selection settle
-            const timer = setTimeout(() => {
-                const { selection } = state;
-                const { empty } = selection;
-
-                // check if image is selected
-                let isImage = false;
-                state.doc.nodesBetween(selection.from, selection.to, (node) => {
-                    if (node.type.name === "image") isImage = true;
-                });
-
-                if (isImage || empty || selection instanceof NodeSelection) {
-                    setShow(false);
-                    return;
-                }
-
-                setShow(true);
-            }, 0);
-
-            return () => clearTimeout(timer);
-        }, [view, state]);
-
-        useEffect(() => {
-            if (!show || !view || !state || !menuRef.current) return;
-
-            const {
-                from,
-                to
-            } = state.selection;
-
-            // Fallback for end selection coords
-            let start = view.coordsAtPos(from);
-            let end = view.coordsAtPos(to);
-
-            const virtualEl = {
-                getBoundingClientRect() {
-                    const top = Math.min(start.top, end.top);
-                    const bottom = Math.max(start.bottom, end.bottom);
-                    const left = Math.min(start.left, end.left);
-                    const right = Math.max(start.right, end.right);
-                    return {
-                        width: right - left,
-                        height: bottom - top,
-                        x: left,
-                        y: top,
-                        top,
-                        left,
-                        right,
-                        bottom
-                    };
-                }
-            };
-
-            const cleanup = autoUpdate(virtualEl as VirtualElement, menuRef.current, () => {
-                if (!menuRef.current) return;
-
-                // Recompute coords in case of scroll
-                try {
-                    start = view.coordsAtPos(state.selection.from);
-                    end = view.coordsAtPos(state.selection.to);
-                } catch (e) {
-                    // Ignore error if selection is out of bounds
-                }
-
-                computePosition(virtualEl as VirtualElement, menuRef.current, {
-                    placement: options?.placement || "top",
-                    middleware: [offset(options?.offset || 8), flip(), shift()],
-                    strategy: "fixed"
-                }).then(({
-                             x,
-                             y
-                         }) => {
-                    if (menuRef.current) {
-                        Object.assign(menuRef.current.style, {
-                            left: `${x}px`,
-                            top: `${y}px`,
-                            visibility: "visible"
-                        });
-                    }
-                });
-            });
-            return () => cleanup();
-        }, [show, view, state, options]);
-
-        if (!show) return null;
-
-        return (
-            <div
-                ref={menuRef}
-                className={className}
-                style={{
-                    position: "fixed",
-                    zIndex: 9999,
-                    visibility: "hidden"
-                }}
-                onMouseDown={(e) => {
-                    e.preventDefault(); // Don't lose focus inside ProseMirror
-                }}
-            >
-                {children}
-            </div>
-        );
-    }
-);
-
-EditorBubble.displayName = "EditorBubble";
-
-export default EditorBubble;

package/src/editor/components/image-bubble.tsx

@@ -1,183 +0,0 @@
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import { autoUpdate, computePosition, flip, offset, shift, type VirtualElement, type Placement } from "@floating-ui/dom";
-import { NodeSelection } from "prosemirror-state";
-import { TextField, defaultBorderMixin, Typography, cls } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-
-export interface ImageBubbleProps {
-    options?: { placement?: Placement; offset?: number };
-    className?: string;
-}
-
-export const ImageBubble = forwardRef<HTMLDivElement, ImageBubbleProps>(
-    ({
-         options,
-         className
-     }, ref) => {
-        const {
-            view,
-            state
-        } = useProseMirrorContext();
-        const { t } = useTranslation();
-        const menuRef = useRef<HTMLDivElement>(null);
-        const [show, setShow] = useState(false);
-        const [alt, setAlt] = useState("");
-        const [title, setTitle] = useState("");
-        const [imagePos, setImagePos] = useState<number | null>(null);
-
-        useEffect(() => {
-            if (!view) return;
-            const handleContextMenu = (e: MouseEvent) => {
-                const posInfo = view.posAtCoords({
-                    left: e.clientX,
-                    top: e.clientY
-                });
-                if (posInfo && posInfo.inside >= 0) {
-                    const node = view.state.doc.nodeAt(posInfo.inside);
-                    if (node && node.type.name === "image") {
-                        e.preventDefault();
-                        const tr = view.state.tr.setSelection(NodeSelection.create(view.state.doc, posInfo.inside));
-                        view.dispatch(tr);
-                        setShow(true);
-                        setAlt(node.attrs.alt || "");
-                        setTitle(node.attrs.title || "");
-                        setImagePos(posInfo.inside);
-                    }
-                }
-            };
-            view.dom.addEventListener("contextmenu", handleContextMenu);
-
-            const handleMousedown = (e: MouseEvent) => {
-                if (menuRef.current && !menuRef.current.contains(e.target as Node) && e.button !== 2) {
-                    setShow(false);
-                }
-            };
-            document.addEventListener("mousedown", handleMousedown);
-
-            return () => {
-                view.dom.removeEventListener("contextmenu", handleContextMenu);
-                document.removeEventListener("mousedown", handleMousedown);
-            };
-        }, [view]);
-
-        useEffect(() => {
-            if (!show || !view || !state || !menuRef.current) return;
-
-            const {
-                from,
-                to
-            } = state.selection;
-            let start = view.coordsAtPos(from);
-            let end = view.coordsAtPos(to);
-
-            const virtualEl = {
-                getBoundingClientRect() {
-                    const top = Math.min(start.top, end.top);
-                    const bottom = Math.max(start.bottom, end.bottom);
-                    const left = Math.min(start.left, end.left);
-                    const right = Math.max(start.right, end.right);
-                    return {
-                        width: right - left,
-                        height: bottom - top,
-                        x: left,
-                        y: top,
-                        top,
-                        left,
-                        right,
-                        bottom
-                    };
-                }
-            };
-
-            const cleanup = autoUpdate(virtualEl as VirtualElement, menuRef.current, () => {
-                if (!menuRef.current) return;
-                try {
-                    start = view.coordsAtPos(state.selection.from);
-                    end = view.coordsAtPos(state.selection.to);
-                } catch (e) {
-                    // Ignore errors during fast remounts/updates
-                }
-
-                computePosition(virtualEl as VirtualElement, menuRef.current, {
-                    placement: options?.placement || "bottom",
-                    middleware: [offset(options?.offset || 8), flip(), shift()],
-                    strategy: "fixed"
-                }).then(({
-                             x,
-                             y
-                         }) => {
-                    if (menuRef.current) {
-                        Object.assign(menuRef.current.style, {
-                            left: `${x}px`,
-                            top: `${y}px`,
-                            visibility: "visible"
-                        });
-                    }
-                });
-            });
-            return () => cleanup();
-        }, [show, view, state, options]);
-
-        const handleSave = (newAlt: string, newTitle: string) => {
-            if (imagePos !== null && view) {
-                const node = view.state.doc.nodeAt(imagePos);
-                if (node && node.type.name === "image") {
-                    const tr = view.state.tr.setNodeMarkup(imagePos, undefined, {
-                        ...node.attrs,
-                        alt: newAlt,
-                        title: newTitle
-                    });
-                    // Preserve the node selection so the bubble stays open!
-                    tr.setSelection(NodeSelection.create(tr.doc, imagePos));
-                    view.dispatch(tr);
-                }
-            }
-        };
-
-        if (!show) return null;
-
-        return (
-            <div
-                ref={menuRef}
-                style={{
-                    visibility: "hidden",
-                    position: "fixed",
-                    zIndex: 50
-                }}
-                className={cls("flex flex-col gap-1.5 p-2 w-56 max-w-[90vw] rounded-lg border bg-white dark:bg-surface-800 shadow-lg", defaultBorderMixin, className)}
-                onMouseDown={(e) => {
-                    // Prevent mousedown from stealing focus from inputs
-                    // but we don't want to prevent typing
-                    // Only prevent if clicking on the container background
-                    if (e.target === e.currentTarget) {
-                        e.preventDefault();
-                    }
-                }}
-            >
-                <TextField
-                    size={"small"}
-                    aria-label={t("alt_text")}
-                    placeholder={t("alt_text")}
-                    value={alt}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                        setAlt(e.target.value);
-                        handleSave(e.target.value, title);
-                    }}
-                />
-                <TextField
-                    size={"small"}
-                    aria-label={t("title")}
-                    placeholder={t("title")}
-                    value={title}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                        setTitle(e.target.value);
-                        handleSave(alt, e.target.value);
-                    }}
-                />
-            </div>
-        );
-    }
-);
-
-ImageBubble.displayName = "ImageBubble";

package/src/editor/components/index.ts

@@ -1,14 +0,0 @@
-export { EditorBubble } from "./editor-bubble";
-export { EditorBubbleItem } from "./editor-bubble-item";
-export { SlashCommandMenu } from "./SlashCommandMenu";
-export { ImageBubble } from "./image-bubble";
-export { TableBubble } from "./table-bubble";
-
-export type JSONContent = {
-    type?: string;
-    attrs?: Record<string, unknown>;
-    content?: JSONContent[];
-    marks?: { type: string; attrs?: Record<string, unknown> }[];
-    text?: string;
-    [key: string]: unknown;
-};

package/src/editor/components/table-bubble.tsx

@@ -1,233 +0,0 @@
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import {
-    autoUpdate,
-    computePosition,
-    flip,
-    offset,
-    shift,
-    type VirtualElement,
-    type Placement
-} from "@floating-ui/dom";
-import { IconButton, Tooltip, defaultBorderMixin, cls } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-import {
-    addColumnBefore,
-    addColumnAfter,
-    deleteColumn,
-    addRowBefore,
-    addRowAfter,
-    deleteRow,
-    deleteTable
-} from "prosemirror-tables";
-import { EditorState } from "prosemirror-state";
-
-export interface TableBubbleProps {
-    options?: { placement?: Placement; offset?: number };
-    className?: string;
-}
-
-const isSelectionInTable = (state: EditorState) => {
-    const { $from } = state.selection;
-    for (let d = $from.depth; d > 0; d--) {
-        if ($from.node(d).type.name === "table") {
-            return true;
-        }
-    }
-    return false;
-};
-
-// We create separate icon components if they don't exist in @rebasepro/ui
-// using basic SVGs for now, or we can use existing ones if we know them.
-// Wait, I will use generic SVGs for these since I don't know if @rebasepro/ui has them.
-
-export const TableBubble = forwardRef<HTMLDivElement, TableBubbleProps>(
-    ({
-         options,
-         className
-     }, ref) => {
-        const {
-            view,
-            state
-        } = useProseMirrorContext();
-        const { t } = useTranslation();
-        const menuRef = useRef<HTMLDivElement>(null);
-        const [show, setShow] = useState(false);
-
-        useEffect(() => {
-            if (!state) return;
-            setShow(isSelectionInTable(state));
-        }, [state?.selection]);
-
-        useEffect(() => {
-            if (!show || !view || !state || !menuRef.current) return;
-
-            const {
-                from,
-                to
-            } = state.selection;
-
-            // Safety measure: if view.docView is destroyed, coordsAtPos might crash
-            if (view.isDestroyed) return;
-
-            let start = view.coordsAtPos(from);
-            let end = view.coordsAtPos(to);
-
-            const virtualEl = {
-                getBoundingClientRect() {
-                    const top = Math.min(start.top, end.top);
-                    const bottom = Math.max(start.bottom, end.bottom);
-                    const left = Math.min(start.left, end.left);
-                    const right = Math.max(start.right, end.right);
-
-                    return {
-                        width: right - left,
-                        height: bottom - top,
-                        x: left,
-                        y: top,
-                        top,
-                        bottom,
-                        left,
-                        right
-                    } as DOMRect;
-                }
-            };
-
-            const cleanup = autoUpdate(virtualEl as VirtualElement, menuRef.current, () => {
-                if (!menuRef.current || view.isDestroyed) return;
-                try {
-                    start = view.coordsAtPos(state.selection.from);
-                    end = view.coordsAtPos(state.selection.to);
-                } catch (e) {
-                    // Ignore errors during fast remounts/updates
-                }
-
-                computePosition(virtualEl as VirtualElement, menuRef.current, {
-                    placement: options?.placement || "top",
-                    middleware: [offset(options?.offset || 8), flip(), shift()],
-                    strategy: "fixed"
-                }).then(({
-                             x,
-                             y
-                         }) => {
-                    if (menuRef.current) {
-                        Object.assign(menuRef.current.style, {
-                            left: `${x}px`,
-                            top: `${y}px`,
-                            visibility: "visible"
-                        });
-                    }
-                });
-            });
-            return () => cleanup();
-        }, [show, view, state, options]);
-
-        if (!show || !view || !state) return null;
-
-        const executeCommand = (cmd: (state: EditorState, dispatch?: (tr: import("prosemirror-state").Transaction) => void) => boolean) => {
-            cmd(state, view.dispatch);
-            view.focus();
-        };
-
-        return (
-            <div
-                ref={menuRef}
-                style={{
-                    visibility: "hidden",
-                    position: "fixed",
-                    zIndex: 50
-                }}
-                className={cls("flex flex-row gap-1 p-1 rounded-lg border bg-white dark:bg-surface-800 shadow-lg", defaultBorderMixin, className)}
-                onMouseDown={(e) => {
-                    // Prevent mousedown from stealing focus from the editor
-                    e.preventDefault();
-                }}
-            >
-                <div className="flex gap-1 border-r pr-1 mr-1 dark:border-gray-700">
-                    <Tooltip title={t("add_row_before")}>
-                        <IconButton size="small" onClick={() => executeCommand(addRowBefore)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                                <line x1="12" y1="8" x2="12" y2="16"></line>
-                                <line x1="8" y1="12" x2="16" y2="12"></line>
-                                <line x1="3" y1="9" x2="21" y2="9"></line>
-                            </svg>
-                        </IconButton>
-                    </Tooltip>
-                    <Tooltip title={t("add_row_after")}>
-                        <IconButton size="small" onClick={() => executeCommand(addRowAfter)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                                <line x1="12" y1="12" x2="12" y2="20"></line>
-                                <line x1="8" y1="16" x2="16" y2="16"></line>
-                                <line x1="3" y1="15" x2="21" y2="15"></line>
-                            </svg>
-                        </IconButton>
-                    </Tooltip>
-                    <Tooltip title={t("delete_row")}>
-                        <IconButton size="small" onClick={() => executeCommand(deleteRow)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                                <line x1="3" y1="12" x2="21" y2="12"></line>
-                                <line x1="8" y1="12" x2="16" y2="12"></line>
-                            </svg>
-                        </IconButton>
-                    </Tooltip>
-                </div>
-
-                <div className="flex gap-1 border-r pr-1 mr-1 dark:border-gray-700">
-                    <Tooltip title={t("add_column_before")}>
-                        <IconButton size="small" onClick={() => executeCommand(addColumnBefore)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                                <line x1="8" y1="12" x2="16" y2="12"></line>
-                                <line x1="12" y1="8" x2="12" y2="16"></line>
-                                <line x1="9" y1="3" x2="9" y2="21"></line>
-                            </svg>
-                        </IconButton>
-                    </Tooltip>
-                    <Tooltip title={t("add_column_after")}>
-                        <IconButton size="small" onClick={() => executeCommand(addColumnAfter)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                                <line x1="12" y1="12" x2="20" y2="12"></line>
-                                <line x1="16" y1="8" x2="16" y2="16"></line>
-                                <line x1="15" y1="3" x2="15" y2="21"></line>
-                            </svg>
-                        </IconButton>
-                    </Tooltip>
-                    <Tooltip title={t("delete_column")}>
-                        <IconButton size="small" onClick={() => executeCommand(deleteColumn)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                                <line x1="12" y1="3" x2="12" y2="21"></line>
-                                <line x1="12" y1="8" x2="12" y2="16"></line>
-                            </svg>
-                        </IconButton>
-                    </Tooltip>
-                </div>
-
-                <Tooltip title={t("delete_table")}>
-                    <IconButton size="small" onClick={() => executeCommand(deleteTable)}>
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                             strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                            <polyline points="3 6 5 6 21 6"></polyline>
-                            <path
-                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                            <line x1="10" y1="11" x2="10" y2="17"></line>
-                            <line x1="14" y1="11" x2="14" y2="17"></line>
-                        </svg>
-                    </IconButton>
-                </Tooltip>
-            </div>
-        );
-    }
-);
-
-TableBubble.displayName = "TableBubble";