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

"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, { useCallback } 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.");
    }
  };

  const handleDelete = useCallback(() => {
    editor.removeBlocks([block.id]);
  }, [block.id, editor]);

  return (
    <div className="w-full">
      <CompactTablePreview tableId={tableId} onFullScreen={handleFullScreen} onDelete={handleDelete} />
    </div>
  );
};

// Block Spec 定义
export const onlineTableBlock = createReactBlockSpec(
  {
    type: "onlineTable",
    propSchema: {
      tableId: { default: "new-table-id" }, // 应该在创建时被覆盖
      title: { default: "未命名表格" },
    },
    content: "inline", // 允许内联内容，但通常表格块不会有太多内联内容
  },
  {
    render: (props) => <OnlineTableBlockComponent {...props} />,
  }
);