@firecms/core 3.1.0-canary.24c8270 → 3.1.0-canary.501d471

package/src/core/EntitySidePanel.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
 import { EntityCollection, EntitySidePanelProps } from "../types";
-import { useNavigationController, useSideEntityController } from "../hooks";
+import { useNavigationController, useSideEntityController, useTranslation } from "../hooks";
 
 import { ErrorBoundary } from "../components";
 import { EntityEditView, OnUpdateParams } from "./EntityEditView";
@@ -41,6 +41,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
     const sideDialogsController = useSideDialogContext();
+    const { t } = useTranslation();
 
     const onClose = () => {
         if (props.onClose) {
@@ -77,7 +78,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         return navigationController.getParentCollectionIds(path);
     }, [navigationController, path]);
 
-    const collection = navigationController.getCollection(fullIdPath ?? path) ?? props.collection;
+    const collection = props.collection ?? navigationController.getCollection(fullIdPath ?? path);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -99,10 +100,10 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     const onValuesModified = useCallback((modified: boolean) => {
         setBlockedNavigationMessage(modified
-            ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
+            ? t("unsaved_changes", { collectionName: collection?.singularName ?? collection?.name ?? "" })
             : undefined)
         setBlocked(modified);
-    }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
+    }, [collection?.name, setBlocked, setBlockedNavigationMessage, t]);
 
     if (!props || !collection) {
         return <div className={"w-full"} />;
@@ -111,6 +112,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     return (
         <>
             <ErrorBoundary>
+
                 <EntityEditView
                     {...props}
                     fullIdPath={fullIdPath}

package/src/core/FireCMS.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { CenteredView, Typography } from "@firecms/ui";
+import { AuthController } from "../types";
 import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext } from "../contexts";
+import { AuthControllerContext, ModeControllerProvider } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
-import { useCustomizationController, useFireCMSContext } from "../hooks";
+import { useCustomizationController, useFireCMSContext, useTranslation, ModeController } from "../hooks";
+import { useBuildModeController } from "../hooks/useBuildModeController";
 import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
 import { ErrorView } from "../components";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
@@ -59,6 +61,10 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
     }
 
+    const { t, i18n } = useTranslation();
+
+    const modeController = useBuildModeController();
+
     const plugins = navigationController.plugins ?? _pluginsProp;
     const userManagement = plugins?.find(p => p.userManagement)?.userManagement
         ?? _userManagement
@@ -106,6 +112,24 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController
     });
 
+    // Inject plugin translations into the existing i18next instance
+    useEffect(() => {
+        if (!i18n) return;
+        plugins?.forEach(plugin => {
+            if (plugin.i18n) {
+                Object.keys(plugin.i18n).forEach(locale => {
+                    i18n.addResourceBundle(
+                        locale,
+                        "firecms_core",
+                        plugin.i18n![locale],
+                        true,  // deep merge
+                        true   // overwrite
+                    );
+                });
+            }
+        });
+    }, [i18n, plugins]);
+
     if (accessResponse?.message) {
         console.warn(accessResponse.message);
     }
@@ -133,12 +157,15 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
     if (accessResponse?.blocked) {
         return (
             <CenteredView maxWidth={"md"} fullScreen={true} className={"flex flex-col gap-2"}>
+                {/* eslint-disable-next-line i18next/no-literal-string */}
                 <Typography variant={"h4"} gutterBottom>
-                    License needed
+                    {t("license_needed")}
                 </Typography>
                 <Typography>
-                    You need a valid license to use FireCMS PRO. Please reach out at <a
-                    href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
+                    {(() => {
+                        const parts = t("license_description", { email: "%%EMAIL%%" }).split("%%EMAIL%%");
+                        return <>{parts[0]}<a href={"mailto:hello@firecms.co"}>hello@firecms.co</a>{parts[1]}</>;
+                    })()}
                 </Typography>
                 {accessResponse?.message &&
                     <Typography>{accessResponse?.message}</Typography>}

package/src/core/field_configs.tsx

@@ -8,16 +8,18 @@ import {
     DateTimeFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
-    MarkdownEditorFieldBinding,
     MultiSelectFieldBinding,
     ReferenceAsStringFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
-    StorageUploadFieldBinding,
     SwitchFieldBinding,
     TextFieldBinding
 } from "../form";
+import { lazyEager } from "../util/lazy_eager";
+
+const MarkdownEditorFieldBinding = lazyEager<typeof import("../form/field_bindings/MarkdownEditorFieldBinding")["MarkdownEditorFieldBinding"]>(() => import("../form/field_bindings/MarkdownEditorFieldBinding"), "MarkdownEditorFieldBinding");
+const StorageUploadFieldBinding = lazyEager<typeof import("../form/field_bindings/StorageUploadFieldBinding")["StorageUploadFieldBinding"]>(() => import("../form/field_bindings/StorageUploadFieldBinding"), "StorageUploadFieldBinding");
 import { isPropertyBuilder, mergeDeep } from "../util";
 
 import {

package/src/editor/components/SlashCommandMenu.tsx

@@ -0,0 +1,516 @@
+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 } from "@floating-ui/dom";
+import { SlashCommandPluginKey } from "../plugins/slashCommandPlugin";
+import {
+    cls,
+    defaultBorderMixin,
+    TextFieldsIcon,
+    CheckBoxIcon,
+    LooksOneIcon,
+    LooksTwoIcon,
+    Looks3Icon,
+    FormatListBulletedIcon,
+    FormatListNumberedIcon,
+    FormatQuoteIcon,
+    CodeIcon,
+    ImageIcon,
+    AutoFixHighIcon,
+    TableChartIcon
+} from "@firecms/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 { 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: <TextFieldsIcon size={18} />,
+        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: <CheckBoxIcon size={18} />,
+        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: <LooksOneIcon size={18} />,
+        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: <LooksTwoIcon size={18} />,
+        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: <Looks3Icon size={18} />,
+        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: <FormatListBulletedIcon size={18} />,
+        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: <FormatListNumberedIcon size={18} />,
+        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: <FormatQuoteIcon size={18} />,
+        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={18} />,
+        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={18} />,
+        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: <TableChartIcon size={18} />,
+        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: <AutoFixHighIcon size={18} />,
+    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 any, menuRef.current, () => {
+            if (!menuRef.current) return;
+            computePosition(virtualEl as any, 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-900 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-900 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-900", 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: any, 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

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+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;