53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
|
"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} />,
|
||
|
|
}
|
||
|
|
);
|