@rebasepro/cms 0.17.3 → 0.18.1

package/src/editor/components/SlashCommandMenu.tsx

@@ -1,532 +0,0 @@
-
-import React, { useEffect, useRef, useState, ReactNode } from "react";
-import { Fragment, DOMParser } from "prosemirror-model";
-import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import { autoUpdate, computePosition, flip, offset, shift, type VirtualElement } from "@floating-ui/dom";
-import { SlashCommandPluginKey } from "../plugins/slashCommandPlugin";
-import {
-    CheckSquareIcon,
-    cls,
-    CodeIcon,
-    defaultBorderMixin,
-    Heading1Icon,
-    Heading2Icon,
-    Heading3Icon,
-    iconSize,
-    ImageIcon,
-    ListIcon,
-    ListOrderedIcon,
-    QuoteIcon,
-    TableIcon,
-    TypeIcon,
-    Wand2Icon
-} from "@rebasepro/ui";
-import { setBlockType, wrapIn } from "prosemirror-commands";
-import { wrapInList } from "prosemirror-schema-list";
-import { schema } from "../schema";
-import { EditorView } from "prosemirror-view";
-import { TextSelection } from "prosemirror-state";
-import type { EditorAIController } from "../types";
-import { onFileRead, UploadFn } from "../extensions/Image";
-import { textLoadingCommands } from "../extensions/TextLoadingDecorationExtension";
-import { parser } from "../markdown";
-
-interface SuggestionItem {
-    title: string;
-    description: string;
-    icon: ReactNode;
-    searchTerms?: string[];
-    command: (
-        view: EditorView,
-        range: { from: number; to: number },
-        upload: UploadFn,
-        aiController?: EditorAIController,
-        setSubView?: (viewId: string | null) => void
-    ) => void;
-}
-
-const suggestionItems: SuggestionItem[] = [
-    {
-        title: "Text",
-        description: "Just start typing with plain text.",
-        searchTerms: ["p", "paragraph"],
-        icon: <TypeIcon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            setBlockType(schema.nodes.paragraph)(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "To-do List",
-        description: "Track tasks with a to-do list.",
-        searchTerms: ["todo", "task", "list", "check", "checkbox"],
-        icon: <CheckSquareIcon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            wrapInList(schema.nodes.task_list)(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "Heading 1",
-        description: "Big section heading.",
-        searchTerms: ["title", "big", "large"],
-        icon: <Heading1Icon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            setBlockType(schema.nodes.heading, { level: 1 })(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "Heading 2",
-        description: "Medium section heading.",
-        searchTerms: ["subtitle", "medium"],
-        icon: <Heading2Icon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            setBlockType(schema.nodes.heading, { level: 2 })(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "Heading 3",
-        description: "Small section heading.",
-        searchTerms: ["subtitle", "small"],
-        icon: <Heading3Icon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            setBlockType(schema.nodes.heading, { level: 3 })(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "Bullet List",
-        description: "Create a simple bullet list.",
-        searchTerms: ["unordered", "point"],
-        icon: <ListIcon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            wrapInList(schema.nodes.bullet_list)(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "Numbered List",
-        description: "Create a list with numbering.",
-        searchTerms: ["ordered"],
-        icon: <ListOrderedIcon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            wrapInList(schema.nodes.ordered_list)(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "Quote",
-        description: "Capture a quote.",
-        searchTerms: ["blockquote"],
-        icon: <QuoteIcon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            wrapIn(schema.nodes.blockquote)(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "Code",
-        description: "Capture a code snippet.",
-        searchTerms: ["codeblock"],
-        icon: <CodeIcon size={iconSize.small}/>,
-        command: (view, range) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-            setBlockType(schema.nodes.code_block)(view.state, view.dispatch);
-        }
-    },
-    {
-        title: "Image",
-        description: "Upload an image from your computer.",
-        searchTerms: ["photo", "picture", "media", "upload", "file"],
-        icon: <ImageIcon size={iconSize.small}/>,
-        command: (view, range, upload) => {
-            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-
-            const input = document.createElement("input");
-            input.type = "file";
-            input.accept = "image/*";
-            input.onchange = async () => {
-                if (input.files?.length) {
-                    const file = input.files[0];
-                    if (!file) return;
-                    const pos = view.state.selection.from;
-
-                    const images = Array.from(input.files).filter(f => /image/i.test(f.type));
-                    if (images.length === 0) return false;
-
-                    images.forEach(image => {
-                        const reader = new FileReader();
-                        reader.onload = async (readerEvent) => {
-                            await onFileRead(view, readerEvent, pos, upload, image);
-                        };
-                        reader.readAsDataURL(image);
-                    });
-                }
-                return true;
-            };
-            input.click();
-        }
-    },
-    {
-        title: "Table",
-        description: "Insert a custom grid table.",
-        searchTerms: ["table", "grid", "row", "col"],
-        icon: <TableIcon size={iconSize.small}/>,
-        command: (view, range, upload, aiController, setSubView) => {
-            if (setSubView) setSubView("table-grid");
-        }
-    }
-];
-
-const autocompleteSuggestionItem: SuggestionItem = {
-    title: "Autocomplete",
-    description: "Add text based on the context.",
-    searchTerms: ["ai"],
-    icon: <Wand2Icon size={iconSize.small}/>,
-    command: async (view, range, upload, aiController) => {
-        if (!aiController) throw Error("No AiController");
-
-        view.dispatch(view.state.tr.deleteRange(range.from, range.to));
-        setBlockType(schema.nodes.paragraph)(view.state, view.dispatch);
-
-        const { state } = view;
-        const { from, to } = state.selection;
-
-        const textBeforeCursor = state.doc.textBetween(0, from, "\n");
-        const textAfterCursor = state.doc.textBetween(to, state.doc.content.size, "\n");
-
-        let buffer = "";
-        const result = await aiController.autocomplete(textBeforeCursor, textAfterCursor, (delta) => {
-            buffer += delta;
-            if (delta.length !== 0) {
-                textLoadingCommands.toggleLoadingDecoration(view.state, view.dispatch, buffer);
-            }
-        });
-
-        // Insert parsed text result at cursor natively
-        try {
-            // The AI controller might stream literal "\n" characters depending on its JSON decoding layer.
-            // We need to un-escape these back to genuine newlines so MarkdownIt block-parsing works.
-            const unescapedResult = result.replace(/\\n/g, "\n").replace(/\\t/g, "\t");
-
-            const isHTML = /<\/?[a-z][\s\S]*>/i.test(unescapedResult);
-            let parsedDoc;
-
-            if (isHTML) {
-                const div = document.createElement("div");
-                div.innerHTML = unescapedResult;
-                parsedDoc = DOMParser.fromSchema(view.state.schema).parse(div);
-            } else {
-                parsedDoc = parser.parse(unescapedResult);
-            }
-
-            if (parsedDoc) {
-                const tr = view.state.tr.replaceWith(view.state.selection.from, view.state.selection.from, parsedDoc.content);
-                view.dispatch(tr);
-            } else {
-                view.dispatch(view.state.tr.insertText(unescapedResult));
-            }
-        } catch (e) {
-            console.error(e);
-            view.dispatch(view.state.tr.insertText(result));
-        }
-    }
-};
-
-export const SlashCommandMenu = ({ upload, aiController }: { upload: UploadFn, aiController?: EditorAIController }) => {
-    const { view, state } = useProseMirrorContext();
-    const menuRef = useRef<HTMLDivElement>(null);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [subView, setSubView] = useState<string | null>(null);
-    const [tableGridCoords, setTableGridCoords] = useState({ r: 0,
-c: 0 });
-
-    const pluginState = state ? SlashCommandPluginKey.getState(state) : null;
-    const isActive = pluginState?.active;
-    const query = pluginState?.query || "";
-    const range = pluginState?.range;
-
-    const filteredItems = React.useMemo(() => {
-        if (!isActive) return [];
-        const availableItems = [...suggestionItems];
-        if (aiController) availableItems.push(autocompleteSuggestionItem);
-
-        return availableItems.filter(item => {
-            const inTitle = item.title.toLowerCase().includes(query.toLowerCase());
-            if (inTitle) return inTitle;
-            return item.searchTerms?.some(term => term.toLowerCase().includes(query.toLowerCase()));
-        });
-    }, [query, isActive, aiController]);
-
-    useEffect(() => {
-        setSelectedIndex(0);
-    }, [query]);
-
-    useEffect(() => {
-        if (!isActive) setSubView(null);
-    }, [isActive]);
-
-    useEffect(() => {
-        if (!view || !isActive || !range || !menuRef.current) return;
-
-        const start = view.coordsAtPos(range.from);
-        const virtualEl = {
-            getBoundingClientRect() {
-                return {
-                    width: 0,
-                    height: start.bottom - start.top,
-                    x: start.left,
-                    y: start.top,
-                    top: start.top,
-                    left: start.left,
-                    right: start.left,
-                    bottom: start.bottom
-                };
-            }
-        };
-
-        const cleanup = autoUpdate(virtualEl as VirtualElement, menuRef.current, () => {
-            if (!menuRef.current) return;
-            computePosition(virtualEl as VirtualElement, menuRef.current, {
-                placement: "bottom-start",
-                middleware: [offset(4), 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();
-    }, [view, isActive, range]);
-
-    useEffect(() => {
-        if (!isActive || !view) return;
-
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (subView === "table-grid") {
-                if (e.key === "Escape") {
-                    e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
-                    setSubView(null);
-                    setTableGridCoords({ r: 0,
-c: 0 });
-                } else if (e.key === "ArrowUp") {
-                    e.preventDefault(); e.stopPropagation();
-                    setTableGridCoords(prev => ({ r: Math.max(0, prev.r - 1),
-c: prev.c }));
-                } else if (e.key === "ArrowDown") {
-                    e.preventDefault(); e.stopPropagation();
-                    setTableGridCoords(prev => ({ r: Math.min(4, prev.r + 1),
-c: prev.c }));
-                } else if (e.key === "ArrowLeft") {
-                    e.preventDefault(); e.stopPropagation();
-                    setTableGridCoords(prev => ({ r: prev.r,
-c: Math.max(0, prev.c - 1) }));
-                } else if (e.key === "ArrowRight") {
-                    e.preventDefault(); e.stopPropagation();
-                    setTableGridCoords(prev => ({ r: prev.r,
-c: Math.min(4, prev.c + 1) }));
-                } else if (e.key === "Enter") {
-                    e.preventDefault(); e.stopPropagation();
-                    if (range) {
-                        const tableNode = createTableNode(view.state.schema, tableGridCoords.r + 1, tableGridCoords.c + 1);
-                        const tr = view.state.tr.replaceWith(range.from, range.to, tableNode);
-                        try {
-                            const selection = TextSelection.create(tr.doc, range.from + 4);
-                            tr.setSelection(selection);
-                        } catch (e) {
-                            console.warn("Could not select first cell", e);
-                        }
-                        tr.setMeta(SlashCommandPluginKey, { active: false });
-                        view.dispatch(tr);
-                        view.focus();
-                        setSubView(null);
-                        setTableGridCoords({ r: 0,
-c: 0 });
-                    }
-                }
-                return;
-            }
-
-            if (e.key === "ArrowUp") {
-                e.preventDefault();
-                e.stopPropagation();
-                setSelectedIndex(prev => (prev + filteredItems.length - 1) % filteredItems.length);
-            } else if (e.key === "ArrowDown") {
-                e.preventDefault();
-                e.stopPropagation();
-                setSelectedIndex(prev => (prev + 1) % filteredItems.length);
-            } else if (e.key === "Enter") {
-                e.preventDefault();
-                e.stopPropagation();
-                if (filteredItems[selectedIndex] && range) {
-                    filteredItems[selectedIndex].command(view, range, upload, aiController, setSubView);
-                    // Do not focus view if a subview opened
-                    setTimeout(() => {
-                        // Focus is managed by the caller
-                    }, 0);
-                }
-            } else if (e.key === "Escape") {
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-                // Close menu gracefully and keep it dismissed
-                view.dispatch(view.state.tr.setMeta(SlashCommandPluginKey, { active: false,
-dismissed: true }));
-            }
-        };
-
-        window.addEventListener("keydown", handleKeyDown, { capture: true });
-        return () => window.removeEventListener("keydown", handleKeyDown, { capture: true });
-    }, [isActive, selectedIndex, filteredItems, view, range, upload, aiController, subView, tableGridCoords]);
-
-    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
-
-    useEffect(() => {
-        if (itemRefs.current[selectedIndex]) {
-            itemRefs.current[selectedIndex]?.scrollIntoView({ block: "nearest" });
-        }
-    }, [selectedIndex]);
-
-    useEffect(() => {
-        if (!subView) {
-            setTableGridCoords({ r: 0,
-c: 0 });
-        }
-    }, [subView]);
-
-    if (!isActive || filteredItems.length === 0) return null;
-
-    if (subView === "table-grid" && range && view) {
-        return (
-            <div
-                ref={menuRef}
-                onMouseDown={(e) => e.preventDefault()}
-                style={{ position: "fixed",
-zIndex: 9999,
-visibility: "hidden" }}
-                className={cls("text-surface-900 dark:text-white rounded-md border bg-white dark:bg-surface-800 p-2 shadow transition-none", defaultBorderMixin)}
-            >
-                <TableGridPicker
-                    hoveredRow={tableGridCoords.r}
-                    hoveredCol={tableGridCoords.c}
-                    onHover={(r, c) => setTableGridCoords({ r,
-c })}
-                    onSelect={(rows, cols) => {
-                        const tableNode = createTableNode(view.state.schema, rows, cols);
-                        const tr = view.state.tr.replaceWith(range.from, range.to, tableNode);
-                        try {
-                            const selection = TextSelection.create(tr.doc, range.from + 4);
-                            tr.setSelection(selection);
-                        } catch (e) {
-                            console.warn("Could not select first cell", e);
-                        }
-                        tr.setMeta(SlashCommandPluginKey, { active: false });
-                        view.dispatch(tr);
-                        view.focus();
-                        setSubView(null);
-                    }}
-                />
-            </div>
-        );
-    }
-
-    return (
-        <div
-            ref={menuRef}
-            style={{ position: "fixed",
-zIndex: 9999,
-visibility: "hidden" }}
-            className={cls("text-surface-900 dark:text-white max-h-[280px] w-72 overflow-y-auto rounded-md border bg-white dark:bg-surface-800 px-1 py-2 shadow transition-none", defaultBorderMixin)}
-        >
-            {filteredItems.map((item, index) => (
-                <button
-                    key={item.title}
-                    ref={el => { itemRefs.current[index] = el; }}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        if (range && view) {
-                            item.command(view, range, upload, aiController, setSubView);
-                            // Only focus back to editor if it didn't open a sub-view
-                            if (!subView) view.focus();
-                        }
-                    }}
-                    onMouseDown={(e) => e.preventDefault()}
-                    className={cls("flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-surface-700",
-                        index === selectedIndex ? "bg-blue-100 dark:bg-surface-accent-950" : "")}
-                >
-                    <div className={cls("flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-white dark:bg-surface-800", defaultBorderMixin)}>
-                        {item.icon}
-                    </div>
-                    <div className="flex flex-col overflow-hidden">
-                        <p className="font-medium truncate">{item.title}</p>
-                        <p className="text-xs text-surface-700 dark:text-surface-accent-300 truncate">
-                            {item.description}
-                        </p>
-                    </div>
-                </button>
-            ))}
-        </div>
-    );
-};
-
-const createTableNode = (schema: import("prosemirror-model").Schema, rowsCount: number, colsCount: number) => {
-    const rows = [];
-    for (let r = 0; r < rowsCount; r++) {
-        const cells = [];
-        for (let c = 0; c < colsCount; c++) {
-            const isHeader = r === 0;
-            const cellType = isHeader ? schema.nodes.table_header : schema.nodes.table_cell;
-            const cell = cellType.createAndFill();
-            if (cell) cells.push(cell);
-        }
-        const row = schema.nodes.table_row.create(null, Fragment.from(cells));
-        rows.push(row);
-    }
-    return schema.nodes.table.create(null, Fragment.from(rows));
-};
-
-const TableGridPicker = ({
-    hoveredRow,
-    hoveredCol,
-    onHover,
-    onSelect
-}: {
-    hoveredRow: number;
-    hoveredCol: number;
-    onHover: (r: number, c: number) => void;
-    onSelect: (r: number, c: number) => void;
-}) => {
-    return (
-        <div className="flex flex-col gap-1 items-center justify-center p-1 w-fit">
-            <span className="text-xs text-gray-500 font-medium mb-1">
-                {hoveredCol + 1} x {hoveredRow + 1} Table
-            </span>
-            <div className="flex flex-col gap-1">
-                {Array.from({ length: 5 }).map((_, r) => (
-                    <div key={r} className="flex gap-1">
-                        {Array.from({ length: 5 }).map((_, c) => (
-                            <div
-                                key={c}
-                                className={cls(
-                                    "w-5 h-5 border rounded-sm cursor-pointer transition-colors duration-75",
-                                    r <= hoveredRow && c <= hoveredCol
-                                        ? "bg-blue-100 border-blue-400 dark:bg-blue-900 dark:border-blue-500"
-                                        : "bg-white dark:bg-surface-800 border-gray-200 dark:border-gray-700 hover:border-blue-300"
-                                )}
-                                onMouseEnter={() => onHover(r, c)}
-                                onClick={() => onSelect(hoveredRow + 1, hoveredCol + 1)}
-                            />
-                        ))}
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

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

@@ -1,32 +0,0 @@
-import { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from "react";
-import { Slot } from "@rebasepro/ui";
-import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-
-interface EditorBubbleItemProps {
-  children: ReactNode;
-  asChild?: boolean;
-  onSelect?: () => void;
-}
-
-export const EditorBubbleItem = forwardRef<
-  HTMLDivElement,
-  EditorBubbleItemProps & Omit<ComponentPropsWithoutRef<"div">, "onSelect">
->(({ children, asChild, onSelect, ...rest }, ref) => {
-  const { view } = useProseMirrorContext();
-  const Comp = asChild ? Slot : "div";
-
-  if (!view) return null;
-
-  return (
-    <Comp ref={ref} {...rest} onMouseDown={(e: React.MouseEvent) => {
-      // Prevent default to avoid losing focus
-      e.preventDefault();
-    }} onClick={() => onSelect?.()}>
-      {children}
-    </Comp>
-  );
-});
-
-EditorBubbleItem.displayName = "EditorBubbleItem";
-
-export default EditorBubbleItem;