feat(base): inline base embed — node registration, slash command, and renderer view

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -52,6 +52,7 @@ import {
   VimeoIcon,
   YoutubeIcon,
 } from "@/components/icons";
+import api from "@/lib/api-client";
 
 const CommandGroups: SlashMenuGroupedItemsType = {
   basic: [
@@ -477,6 +478,25 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         editor.chain().focus().deleteRange(range).insertSubpages().run();
       },
     },
+    {
+      title: "Database",
+      description: "Insert an inline database on this page",
+      searchTerms: ["database", "base", "table", "grid", "spreadsheet"],
+      icon: IconTable,
+      command: async ({ editor, range }: CommandProps) => {
+        // @ts-ignore
+        const parentPageId = editor.storage?.pageId as string | undefined;
+        if (!parentPageId) return;
+
+        editor.chain().focus().deleteRange(range).run();
+
+        const res = await api.post<{ id: string }>("/bases/inline-embed", {
+          parentPageId,
+        });
+
+        editor.commands.insertBaseEmbed({ pageId: res.data.id });
+      },
+    },
     {
       title: "2 Columns",
       description: "Split content into two columns.",