feat: integrate luckysheet inline and fullscreen

wolai-frontend/src/components/editor/blocknote-editor.tsx

@@ -26,6 +26,7 @@ import { DocumentToc, type TocEntry } from "@/components/editor/document-toc";
 import { useSearchPaletteStore } from "@/store/search-palette";
 import { useEditorBridgeStore } from "@/store/editor-bridge";
 import type { ReferenceTarget } from "@/types/search";
+import FullScreenTableEditor from "@/components/online-table/FullScreenTableEditor";
 
 interface BlockNoteEditorProps {
   documentId: string;
@@ -168,6 +169,8 @@ export function BlockNoteEditor({
 }: BlockNoteEditorProps) {
   const [isSaving, setIsSaving] = useState(false);
   const [tocEntries, setTocEntries] = useState<TocEntry[]>([]);
+  const [fullScreenTableId, setFullScreenTableId] = useState<string | null>(null);
+  
   const openReferencePalette = useSearchPaletteStore((state) => state.openReference);
   const registerEditorBridge = useEditorBridgeStore((state) => state.registerBridge);
 
@@ -423,6 +426,9 @@ const computeDocumentStats = (blocks: Block<CustomBlockSchema>[]): DocumentStats
       return;
     }
     const bridge = {
+      openTableFullScreen: (tableId: string) => {
+        setFullScreenTableId(tableId);
+      },
       insertInlineReference: (target: ReferenceTarget, aliasText?: string) => {
         editor.focus();
         const cursor = editor.getTextCursorPosition();
@@ -559,27 +565,37 @@ const computeDocumentStats = (blocks: Block<CustomBlockSchema>[]): DocumentStats
   );
 
   return (
-    <div className={layoutClass}>
-      <div className={editorWrapperClass}>
-        <BlockNoteView
-          editor={editor}
-          theme="light"
-          data-heading-numbering={pageOptions.showHeadingNumbers ? "true" : "false"}
-          editable={!pageOptions.protectEditing}
-          className={blocknoteClass}
-        >
-        <SideMenuController
-          sideMenu={(props: SideMenuProps<CustomBlockSchema>) => (
-            <CustomSideMenu {...props} currentDocumentId={documentId} />
-          )}
-        />
-        <CustomSlashMenu editor={editor} currentDocumentId={documentId} />
-        </BlockNoteView>
-        <div className="pointer-events-none absolute right-4 top-3 text-xs text-gray-400">
-          {isSaving ? "保存中..." : "已保存"}
+    <>
+      <div className={layoutClass}>
+        <div className={editorWrapperClass}>
+          <BlockNoteView
+            editor={editor}
+            theme="light"
+            data-heading-numbering={pageOptions.showHeadingNumbers ? "true" : "false"}
+            editable={!pageOptions.protectEditing}
+            className={blocknoteClass}
+          >
+          <SideMenuController
+            sideMenu={(props: SideMenuProps<CustomBlockSchema>) => (
+              <CustomSideMenu {...props} currentDocumentId={documentId} />
+            )}
+          />
+          <CustomSlashMenu editor={editor} currentDocumentId={documentId} />
+          </BlockNoteView>
+          <div className="pointer-events-none absolute right-4 top-3 text-xs text-gray-400">
+            {isSaving ? "保存中..." : "已保存"}
+          </div>
         </div>
+        <DocumentToc entries={tocEntries} visible={pageOptions.showToc} onJump={jumpToHeading} />
       </div>
-      <DocumentToc entries={tocEntries} visible={pageOptions.showToc} onJump={jumpToHeading} />
-    </div>
+      
+      {/* 全屏表格编辑器 Modal */}
+      {fullScreenTableId && (
+        <FullScreenTableEditor
+          tableId={fullScreenTableId}
+          onClose={() => setFullScreenTableId(null)}
+        />
+      )}
+    </>
   );
 }

wolai-frontend/src/components/editor/blocks/OnlineTableBlock.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { BlockNoteEditor, Block } from "@blocknote/core";
+import { createReactBlockSpec } from "@blocknote/react";
+import { OnlineTableBlockProps } from "@/types/online-table";
+import { Table } from "lucide-react";
+import React from "react";
+import type { CustomBlockSchema } from "../schema";
+import CompactTablePreview from "@/components/online-table/CompactTablePreview";
+import { useEditorBridgeStore } from "@/store/editor-bridge";
+
+// 占位符组件：在紧凑模式下渲染表格块
+const OnlineTableBlockComponent = ({
+  block,
+  editor,
+}: {
+  block: Block<CustomBlockSchema, "onlineTable">;
+  editor: BlockNoteEditor<CustomBlockSchema>;
+}) => {
+  const { tableId } = block.props;
+  const openTableFullScreen = useEditorBridgeStore((state) => state.bridge?.openTableFullScreen);
+
+  // 阶段三：实现双击/按钮进入全屏编辑
+  const handleFullScreen = () => {
+    if (openTableFullScreen) {
+        openTableFullScreen(tableId);
+    } else {
+        console.error("Editor bridge not ready or openTableFullScreen missing.");
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <CompactTablePreview tableId={tableId} onFullScreen={handleFullScreen} />
+    </div>
+  );
+};
+
+// Block Spec 定义
+export const onlineTableBlock = createReactBlockSpec(
+  {
+    type: "onlineTable",
+    propSchema: {
+      tableId: { default: "new-table-id" }, // 应该在创建时被覆盖
+      title: { default: "未命名表格" },
+    },
+    content: "inline", // 允许内联内容，但通常表格块不会有太多内联内容
+  },
+  {
+    render: (props) => <OnlineTableBlockComponent {...props} />,
+  }
+);

wolai-frontend/src/components/editor/menus/CustomSlashMenu.tsx

@@ -20,10 +20,12 @@ import {
   Play,
   Sparkles,
   SquareCheckBig,
+  Table,
 } from "lucide-react";
 import type { CustomBlockSchema } from "../schema";
 import { useImagePicker } from "@/components/media/image-picker-context";
 import type { MediaKind, MediaSelection } from "@/types/media";
+import { createOnlineTable } from "@/lib/online-table";
 
 type Props = {
   editor: BlockNoteEditor<CustomBlockSchema>;
@@ -134,6 +136,33 @@ export const CustomSlashMenu = ({ editor, currentDocumentId }: Props) => {
       const cursor = editor.getTextCursorPosition();
       const referenceBlock = cursor?.block ?? editor.topLevelBlocks[0];
 
+      const createTableItem: DefaultReactSuggestionItem = {
+        title: "在线表格",
+        group: "高级",
+        aliases: ["online table", "bg", "表格"],
+        icon: <Table className="h-4 w-4 text-[#0f172a]" />,
+        onItemClick: async () => {
+          const documentId = currentDocumentId;
+
+          try {
+            const newTable = await createOnlineTable(documentId);
+            editor.insertBlocks(
+              [
+                {
+                  type: "onlineTable",
+                  props: { tableId: newTable.id, title: newTable.title },
+                },
+              ],
+              referenceBlock,
+              "after",
+            );
+          } catch (error) {
+            console.error("Failed to create table:", error);
+            // TODO: 插入错误提示块
+          }
+        },
+      };
+
       const createPageItem: DefaultReactSuggestionItem = {
         title: "嵌入页面",
         group: "嵌入",
@@ -268,6 +297,7 @@ export const CustomSlashMenu = ({ editor, currentDocumentId }: Props) => {
         ...headingItems,
         foldHeading,
         createPageItem,
+        createTableItem,
         advancedTodo,
         foldAdvancedTodo,
         progressMeter,

wolai-frontend/src/components/editor/schema.ts

@@ -11,6 +11,7 @@ import { pageReferenceBlock } from "./blocks/PageReferenceBlock";
 import { advancedTodoBlock } from "./blocks/AdvancedTodoBlock";
 import { progressBlock } from "./blocks/ProgressBlock";
 import { mediaBlock } from "./blocks/MediaBlock";
+import { onlineTableBlock } from "./blocks/OnlineTableBlock";
 
 const headingSpec =
   typeof window === "undefined"
@@ -28,6 +29,7 @@ export const customBlockSchema = BlockNoteSchema.create({
     advancedTodo: advancedTodoBlock,
     progressMeter: progressBlock,
     media: mediaBlock,
+    onlineTable: onlineTableBlock(),
   },
   inlineContentSpecs: defaultInlineContentSpecs,
   styleSpecs: defaultStyleSpecs,