feat: integrate luckysheet inline and fullscreen

This commit is contained in:
liaibo
2025-11-23 17:22:35 +08:00
parent c8e479aeab
commit 994dd4e67c
529 changed files with 403413 additions and 201 deletions
@@ -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} />,
}
);