feat: add extension

outerbase · Apr 16, 2024 · 1b1a310 · 1b1a310
1 parent b52e684
commit 1b1a310
Show file tree

Hide file tree

Showing 27 changed files with 152 additions and 155 deletions.
diff --git a/gui/package.json b/gui/package.json
@@ -33,8 +33,6 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.1",
-    "@blocknote/react": "^0.12.2",
     "@codemirror/commands": "^6.3.3",
     "@codemirror/lang-sql": "^6.5.5",
     "@codemirror/view": "^6.26.3",
@@ -65,8 +63,6 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tiptap/core": "^2.3.0",
-    "@tiptap/react": "^2.3.0",
     "@uiw/codemirror-extensions-langs": "^4.21.24",
     "@uiw/codemirror-themes": "^4.21.21",
     "@uiw/react-codemirror": "^4.21.21",

diff --git a/gui/src/components/main-connection.tsx b/gui/src/components/main-connection.tsx
@@ -6,7 +6,6 @@ import { useDatabaseDriver } from "@gui/contexts/driver-provider";
 import DatabaseGui from "./database-gui";
 import { useConfig } from "@gui/contexts/config-provider";
 import { AutoCompleteProvider } from "@gui/contexts/auto-complete-provider";
-import { BlockEditorProvider } from "@gui/contexts/block-editor-provider";
 import InternalPubSub from "@gui/lib/internal-pubsub";
 import { SchemaProvider } from "@gui/contexts/schema-provider";
 
@@ -21,9 +20,7 @@ function MainConnection() {
 
   return (
     <SchemaProvider>
-      <BlockEditorProvider>
-        <DatabaseGui />
-      </BlockEditorProvider>
+      <DatabaseGui />
     </SchemaProvider>
   );
 }

diff --git a/gui/src/components/query-result-table.tsx b/gui/src/components/query-result-table.tsx
@@ -11,7 +11,10 @@ import {
   exportRowsToSqlInsert,
 } from "@gui/lib/export-helper";
 import { KEY_BINDING } from "@gui/lib/key-matcher";
-import { openContextMenuFromEvent } from "@gui/messages/open-context-menu";
+import {
+  StudioContextMenuItem,
+  openContextMenuFromEvent,
+} from "@gui/messages/open-context-menu";
 import {
   LucideChevronDown,
   LucidePin,
@@ -26,7 +29,6 @@ import {
   DatabaseValue,
   TableColumnDataType,
 } from "@gui/drivers/base-driver";
-import { useBlockEditor } from "@gui/contexts/block-editor-provider";
 import parseSafeJson from "@gui/lib/json-safe";
 import {
   DropdownMenu,
@@ -35,10 +37,9 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from "./ui/dropdown-menu";
-import { triggerSelectFiles, uploadFile } from "@gui/lib/file-upload";
-import { toast } from "sonner";
 import BigNumberCell from "./table-cell/BigNumberCell";
 import { useDatabaseDriver } from "@gui/contexts/driver-provider";
+import { useConfig } from "@gui/contexts/config-provider";
 
 interface ResultTableProps {
   data: OptimizeTableState;
@@ -96,8 +97,8 @@ export default function ResultTable({
   onSortColumnChange,
 }: ResultTableProps) {
   const [stickyHeaderIndex, setStickHeaderIndex] = useState<number>();
-  const { openBlockEditor } = useBlockEditor();
   const { databaseDriver } = useDatabaseDriver();
+  const { extensions } = useConfig();
 
   const renderHeader = useCallback(
     (header: OptimizeTableHeaderWithIndexProps) => {
@@ -260,14 +261,15 @@ export default function ResultTable({
         }
       }
 
-      function getFocusValue() {
-        const focusCell = state.getFocus();
-        if (focusCell) {
-          return state.getValue(focusCell.y, focusCell.x);
-        }
-
-        return undefined;
-      }
+      const extensionMenu = (extensions ?? []).reduce<StudioContextMenuItem[]>(
+        (menu, ext) => {
+          if (ext.contextMenu) {
+            return [...menu, ...ext.contextMenu(state)];
+          }
+          return menu;
+        },
+        []
+      );
 
       openContextMenuFromEvent([
         {
@@ -313,39 +315,7 @@ export default function ResultTable({
             },
           ],
         },
-        {
-          title: "Edit with Block Editor",
-          onClick: () => {
-            openBlockEditor({
-              initialContent: getFocusValue() as string,
-              onSave: setFocusValue,
-            });
-          },
-        },
-
-        {
-          title: "Upload File",
-          onClick: async () => {
-            const files = await triggerSelectFiles();
-
-            if (files.error) return toast.error(files.error.message);
-
-            const file = files.value[0];
-            if (!file) return;
-
-            const toastId = toast.loading("Uploading file...");
-            const { data, error } = await uploadFile(file);
-            if (error)
-              return toast.error("Upload failed!", {
-                id: toastId,
-                description: error.message,
-              });
-
-            setFocusValue(data.url);
-            return toast.success("File uploaded!", { id: toastId });
-          },
-        },
-
+        ...extensionMenu,
         {
           separator: true,
         },
@@ -418,7 +388,7 @@ export default function ResultTable({
         },
       ])(event);
     },
-    [data, tableName, copyCallback, pasteCallback, openBlockEditor]
+    [data, tableName, copyCallback, pasteCallback, extensions]
   );
 
   const onKeyDown = useCallback(

diff --git a/gui/src/components/table-cell/createEditableCell.tsx b/gui/src/components/table-cell/createEditableCell.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import GenericCell from "./GenericCell";
 import { DatabaseValue } from "@gui/drivers/base-driver";
-import { useBlockEditor } from "@gui/contexts/block-editor-provider";
 import OptimizeTableState from "../table-optimized/OptimizeTableState";
 
 export interface TableEditableCell<T = unknown> {
@@ -92,45 +91,6 @@ function InputCellEditor({
   );
 }
 
-function BlockEditCellEditor({
-  value,
-  discardChange,
-  applyChange,
-  onChange,
-}: Readonly<{
-  align?: "left" | "right";
-  applyChange: (v: DatabaseValue<string>) => void;
-  discardChange: () => void;
-  value: DatabaseValue<string>;
-  onChange: (v: string) => void;
-}>) {
-  const { openBlockEditor, closeBlockEditor } = useBlockEditor();
-
-  useEffect(() => {
-    openBlockEditor({
-      initialContent: value ?? "",
-      onSave: (v) => {
-        onChange(v);
-        applyChange(v);
-      },
-      onCancel: discardChange,
-    });
-
-    return () => {
-      closeBlockEditor();
-    };
-  }, [
-    value,
-    openBlockEditor,
-    closeBlockEditor,
-    applyChange,
-    discardChange,
-    onChange,
-  ]);
-
-  return null;
-}
-
 export default function createEditableCell<T = unknown>({
   toString,
   toValue,
@@ -143,7 +103,6 @@ export default function createEditableCell<T = unknown>({
     onChange,
     state,
     editMode,
-    editor,
   }: TableEditableCell<T>) {
     const [editValue, setEditValue] = useState<DatabaseValue<string>>(
       toString(value)
@@ -177,32 +136,18 @@ export default function createEditableCell<T = unknown>({
       .join(" ");
 
     if (editMode) {
-      if (editor === "blocknote") {
-        return (
-          <div className={className}>
-            <BlockEditCellEditor
-              align={align}
-              applyChange={applyChange}
-              discardChange={discardChange}
-              onChange={setEditValue}
-              value={editValue}
-            />
-          </div>
-        );
-      } else {
-        return (
-          <div className={className}>
-            <InputCellEditor
-              state={state}
-              align={align}
-              applyChange={applyChange}
-              discardChange={discardChange}
-              onChange={setEditValue}
-              value={editValue}
-            />
-          </div>
-        );
-      }
+      return (
+        <div className={className}>
+          <InputCellEditor
+            state={state}
+            align={align}
+            applyChange={applyChange}
+            discardChange={discardChange}
+            onChange={setEditValue}
+            value={editValue}
+          />
+        </div>
+      );
     }
 
     return (

diff --git a/gui/src/components/table-optimized/OptimizeTableState.tsx b/gui/src/components/table-optimized/OptimizeTableState.tsx
@@ -317,6 +317,22 @@ export default class OptimizeTableState {
       : null;
   }
 
+  getFocusValue(): unknown {
+    const focusCell = this.getFocus();
+    if (focusCell) {
+      return this.getValue(focusCell.y, focusCell.x);
+    }
+
+    return undefined;
+  }
+
+  setFocusValue(newValue: unknown) {
+    const focusCell = this.getFocus();
+    if (focusCell) {
+      this.changeValue(focusCell.y, focusCell.x, newValue);
+    }
+  }
+
   hasFocus(y: number, x: number): boolean {
     if (!this.focus) return false;
     return this.focus[0] === y && this.focus[1] === x;

diff --git a/gui/src/contexts/config-provider.tsx b/gui/src/contexts/config-provider.tsx
@@ -1,3 +1,4 @@
+import { StudioExtension } from "@gui/extension";
 import type { PropsWithChildren, ReactElement } from "react";
 import { createContext, useContext, useMemo } from "react";
 
@@ -6,6 +7,7 @@ interface ConfigContextProps {
   name: string;
   onBack: () => void;
   sideBarFooterComponent?: ReactElement;
+  extensions?: StudioExtension[];
 }
 
 const ConfigContext = createContext<ConfigContextProps>({
@@ -25,11 +27,12 @@ export function ConfigProvider({
   color,
   name,
   onBack,
+  extensions,
   sideBarFooterComponent,
 }: PropsWithChildren<ConfigContextProps>) {
   const memo = useMemo(
-    () => ({ color, name, onBack, sideBarFooterComponent }),
-    [name, color, onBack, sideBarFooterComponent]
+    () => ({ color, name, onBack, sideBarFooterComponent, extensions }),
+    [name, color, onBack, sideBarFooterComponent, extensions]
   );
 
   return (

diff --git a/gui/src/extension.ts b/gui/src/extension.ts
@@ -0,0 +1,6 @@
+import OptimizeTableState from "./components/table-optimized/OptimizeTableState";
+import { StudioContextMenuItem } from "./messages/open-context-menu";
+
+export interface StudioExtension {
+  contextMenu?: (state: OptimizeTableState) => StudioContextMenuItem[];
+}
diff --git a/gui/src/index.tsx b/gui/src/index.tsx
@@ -1 +1,2 @@
 export { Studio } from "./studio";
+export type { StudioExtension } from "./extension";
diff --git a/gui/src/messages/open-context-menu.tsx b/gui/src/messages/open-context-menu.tsx
@@ -1,7 +1,7 @@
 import { MessageChannelName } from "./const";
 import type { LucideIcon } from "lucide-react";
 
-export type OpenContextMenuList = Array<{
+export interface StudioContextMenuItem {
   type?: "check";
   checked?: boolean;
   title?: string | JSX.Element;
@@ -13,7 +13,9 @@ export type OpenContextMenuList = Array<{
   sub?: OpenContextMenuList;
   subWidth?: number;
   icon?: LucideIcon;
-}>;
+}
+
+export type OpenContextMenuList = Array<StudioContextMenuItem>;
 
 export interface OpenContextMenuOptions {
   contextMenu: OpenContextMenuList;

diff --git a/gui/src/studio.tsx b/gui/src/studio.tsx
@@ -7,6 +7,7 @@ import ThemeProvider from "./contexts/theme-provider";
 import type { BaseDriver } from "./drivers/base-driver";
 import { CollaborationDriver } from "./drivers/collaboration-driver";
 import { ReactElement } from "react";
+import { StudioExtension } from "./extension";
 
 interface StudioProps {
   driver: BaseDriver;
@@ -19,6 +20,8 @@ interface StudioProps {
 
   theme?: "dark" | "light";
   onThemeChange?: (theme: "dark" | "light") => void;
+
+  extensions?: StudioExtension[];
 }
 
 export function Studio({
@@ -28,13 +31,15 @@ export function Studio({
   collaboration,
   name,
   color,
+  extensions,
   sideBarFooterComponent,
   onBack,
 }: Readonly<StudioProps>) {
   return (
     <ThemeProvider theme={theme ?? "light"} onChange={onThemeChange}>
       <DriverProvider driver={driver} collaborationDriver={collaboration}>
         <ConfigProvider
+          extensions={extensions}
           name={name}
           color={color}
           onBack={onBack}

diff --git a/gui/tsconfig.json b/gui/tsconfig.json
@@ -15,6 +15,6 @@
     "*.js",
     "*.ts",
     "jest.config.cjs"
-  ],
+, "../studio/src/components/file-upload.ts"  ],
   "exclude": ["node_modules", "dist"]
 }