@firecms/core 3.1.0 → 3.2.0-canary.4c3b8f2

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

@@ -0,0 +1,156 @@
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { NodeSelection } from "prosemirror-state";
+import { TextField, defaultBorderMixin, Typography, cls } from "@firecms/ui";
+
+export interface ImageBubbleProps {
+    options?: any;
+    className?: string;
+}
+
+export const ImageBubble = forwardRef<HTMLDivElement, ImageBubbleProps>(
+    ({ options, className }, ref) => {
+        const { view, state } = useProseMirrorContext();
+        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 any, menuRef.current, () => {
+                if (!menuRef.current) return;
+                try {
+                    start = view.coordsAtPos(state.selection.from);
+                    end = view.coordsAtPos(state.selection.to);
+                } catch (e) {}
+
+                computePosition(virtualEl as any, 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-900 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"}
+                    placeholder="Alt text"
+                    value={alt}
+                    onChange={(e: any) => {
+                        setAlt(e.target.value);
+                        handleSave(e.target.value, title);
+                    }}
+                />
+                <TextField
+                    size={"small"}
+                    placeholder="Title"
+                    value={title}
+                    onChange={(e: any) => {
+                        setTitle(e.target.value);
+                        handleSave(alt, e.target.value);
+                    }}
+                />
+            </div>
+        );
+    }
+);

package/src/editor/components/index.ts

@@ -0,0 +1,14 @@
+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, any>;
+    content?: JSONContent[];
+    marks?: { type: string; attrs?: Record<string, any> }[];
+    text?: string;
+    [key: string]: any;
+};

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

@@ -0,0 +1,165 @@
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { IconButton, Tooltip, defaultBorderMixin, cls } from "@firecms/ui";
+import {
+    addColumnBefore,
+    addColumnAfter,
+    deleteColumn,
+    addRowBefore,
+    addRowAfter,
+    deleteRow,
+    deleteTable,
+} from "prosemirror-tables";
+import { EditorState } from "prosemirror-state";
+
+
+export interface TableBubbleProps {
+    options?: any;
+    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 @firecms/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 @firecms/ui has them.
+
+export const TableBubble = forwardRef<HTMLDivElement, TableBubbleProps>(
+    ({ options, className }, ref) => {
+        const { view, state } = useProseMirrorContext();
+        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 any, 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 any, 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: any) => {
+            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-900 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="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="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="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="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="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="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="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>
+        );
+    }
+);