257 lines
8.2 KiB
TypeScript
257 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import { BlockNoteEditor, Block } from "@blocknote/core";
|
|
import { createReactBlockSpec } from "@blocknote/react";
|
|
import React, { useCallback, useMemo, useState } from "react";
|
|
import type { CustomBlockSchema } from "../schema";
|
|
import CompactTablePreview from "@/components/online-table/CompactTablePreview";
|
|
import { useEditorBridgeStore } from "@/store/editor-bridge";
|
|
|
|
const DEFAULT_WIDTH = 960;
|
|
const DEFAULT_HEIGHT = 520;
|
|
const MIN_WIDTH = 420;
|
|
const MAX_WIDTH = 1400;
|
|
const MIN_HEIGHT = 320;
|
|
const MAX_HEIGHT = 900;
|
|
|
|
type ResizeHandle =
|
|
| "left"
|
|
| "right"
|
|
| "top"
|
|
| "bottom"
|
|
| "top-left"
|
|
| "top-right"
|
|
| "bottom-left"
|
|
| "bottom-right";
|
|
|
|
const handleMapping: Record<
|
|
ResizeHandle,
|
|
{ horizontal?: "left" | "right"; vertical?: "top" | "bottom" }
|
|
> = {
|
|
left: { horizontal: "left" },
|
|
right: { horizontal: "right" },
|
|
top: { vertical: "top" },
|
|
bottom: { vertical: "bottom" },
|
|
"top-left": { horizontal: "left", vertical: "top" },
|
|
"top-right": { horizontal: "right", vertical: "top" },
|
|
"bottom-left": { horizontal: "left", vertical: "bottom" },
|
|
"bottom-right": { horizontal: "right", vertical: "bottom" },
|
|
};
|
|
|
|
// 占位符组件：在紧凑模式下渲染表格块
|
|
const OnlineTableBlockComponent = ({
|
|
block,
|
|
editor,
|
|
}: any) => {
|
|
const { tableId } = block.props;
|
|
const openTableFullScreen = useEditorBridgeStore((state) => state.bridge?.openTableFullScreen);
|
|
const storedWidth = typeof block.props.width === "number" ? block.props.width : undefined;
|
|
const storedHeight = typeof block.props.height === "number" ? block.props.height : undefined;
|
|
const [activeHandle, setActiveHandle] = useState<ResizeHandle | null>(null);
|
|
const [draftSize, setDraftSize] = useState({
|
|
width: storedWidth ?? DEFAULT_WIDTH,
|
|
height: storedHeight ?? DEFAULT_HEIGHT,
|
|
});
|
|
|
|
const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
|
|
|
|
const committedSize = useMemo(
|
|
() => ({
|
|
width: clamp(storedWidth ?? DEFAULT_WIDTH, MIN_WIDTH, MAX_WIDTH),
|
|
height: clamp(storedHeight ?? DEFAULT_HEIGHT, MIN_HEIGHT, MAX_HEIGHT),
|
|
}),
|
|
[storedHeight, storedWidth],
|
|
);
|
|
|
|
const commitSize = useCallback(
|
|
(next: { width: number; height: number }) => {
|
|
setDraftSize(next);
|
|
editor.updateBlock(block, {
|
|
props: {
|
|
...block.props,
|
|
width: next.width,
|
|
height: next.height,
|
|
},
|
|
});
|
|
},
|
|
[block, editor],
|
|
);
|
|
|
|
// 阶段三：实现双击/按钮进入全屏编辑
|
|
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]);
|
|
|
|
const startResize = useCallback(
|
|
(handle: ResizeHandle) => (event: React.MouseEvent) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const startX = event.clientX;
|
|
const startY = event.clientY;
|
|
const startWidth = committedSize.width;
|
|
const startHeight = committedSize.height;
|
|
let nextWidth = startWidth;
|
|
let nextHeight = startHeight;
|
|
const axes = handleMapping[handle];
|
|
setActiveHandle(handle);
|
|
setDraftSize({ width: startWidth, height: startHeight });
|
|
document.body.style.userSelect = "none";
|
|
const cursor =
|
|
axes.horizontal && axes.vertical
|
|
? axes.horizontal === "left"
|
|
? axes.vertical === "top"
|
|
? "nwse-resize"
|
|
: "nesw-resize"
|
|
: axes.vertical === "top"
|
|
? "nesw-resize"
|
|
: "nwse-resize"
|
|
: axes.horizontal
|
|
? "ew-resize"
|
|
: "ns-resize";
|
|
document.body.style.cursor = cursor;
|
|
|
|
const handleMove = (moveEvent: MouseEvent) => {
|
|
const deltaX = moveEvent.clientX - startX;
|
|
const deltaY = moveEvent.clientY - startY;
|
|
if (axes.horizontal === "left") {
|
|
nextWidth = clamp(startWidth - deltaX, MIN_WIDTH, MAX_WIDTH);
|
|
} else if (axes.horizontal === "right") {
|
|
nextWidth = clamp(startWidth + deltaX, MIN_WIDTH, MAX_WIDTH);
|
|
} else {
|
|
nextWidth = startWidth;
|
|
}
|
|
|
|
if (axes.vertical === "top") {
|
|
nextHeight = clamp(startHeight - deltaY, MIN_HEIGHT, MAX_HEIGHT);
|
|
} else if (axes.vertical === "bottom") {
|
|
nextHeight = clamp(startHeight + deltaY, MIN_HEIGHT, MAX_HEIGHT);
|
|
} else {
|
|
nextHeight = startHeight;
|
|
}
|
|
setDraftSize({
|
|
width: nextWidth,
|
|
height: nextHeight,
|
|
});
|
|
};
|
|
|
|
const handleUp = () => {
|
|
window.removeEventListener("mousemove", handleMove);
|
|
window.removeEventListener("mouseup", handleUp);
|
|
document.body.style.userSelect = "";
|
|
document.body.style.cursor = "";
|
|
setActiveHandle(null);
|
|
commitSize({
|
|
width: Math.round(nextWidth),
|
|
height: Math.round(nextHeight),
|
|
});
|
|
};
|
|
|
|
window.addEventListener("mousemove", handleMove);
|
|
window.addEventListener("mouseup", handleUp);
|
|
},
|
|
[commitSize, committedSize.height, committedSize.width],
|
|
);
|
|
|
|
const size = useMemo(() => {
|
|
const src = activeHandle ? draftSize : committedSize;
|
|
return {
|
|
width: clamp(src.width, MIN_WIDTH, MAX_WIDTH),
|
|
height: clamp(src.height, MIN_HEIGHT, MAX_HEIGHT),
|
|
};
|
|
}, [activeHandle, committedSize, draftSize]);
|
|
|
|
const handleClass = (handle: ResizeHandle) =>
|
|
`wolai-table-resize-handle wolai-table-resize-handle--${handle} ${
|
|
activeHandle === handle ? "is-dragging" : ""
|
|
}`;
|
|
|
|
return (
|
|
<div className="w-full overflow-auto" contentEditable={false}>
|
|
<div
|
|
className="online-table-block group relative mx-auto"
|
|
style={{ width: size.width, minWidth: MIN_WIDTH }}
|
|
>
|
|
<CompactTablePreview
|
|
tableId={tableId}
|
|
onFullScreen={handleFullScreen}
|
|
onDelete={handleDelete}
|
|
height={size.height}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="向左拖拽以调整宽度"
|
|
className={handleClass("left")}
|
|
onMouseDown={startResize("left")}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="向右拖拽以调整宽度"
|
|
className={handleClass("right")}
|
|
onMouseDown={startResize("right")}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="向上拖拽以调整高度"
|
|
className={handleClass("top")}
|
|
onMouseDown={startResize("top")}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="向下拖拽以调整高度"
|
|
className={handleClass("bottom")}
|
|
onMouseDown={startResize("bottom")}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="拖拽以调整宽高"
|
|
className={handleClass("top-left")}
|
|
onMouseDown={startResize("top-left")}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="拖拽以调整宽高"
|
|
className={handleClass("top-right")}
|
|
onMouseDown={startResize("top-right")}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="拖拽以调整宽高"
|
|
className={handleClass("bottom-left")}
|
|
onMouseDown={startResize("bottom-left")}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="拖拽以调整宽高"
|
|
className={handleClass("bottom-right")}
|
|
onMouseDown={startResize("bottom-right")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Block Spec 定义
|
|
export const onlineTableBlock = createReactBlockSpec(
|
|
{
|
|
type: "onlineTable",
|
|
propSchema: {
|
|
tableId: { default: "new-table-id" }, // 应该在创建时被覆盖
|
|
title: { default: "未命名表格" },
|
|
width: { default: DEFAULT_WIDTH },
|
|
height: { default: DEFAULT_HEIGHT },
|
|
},
|
|
content: "inline", // 允许内联内容，但通常表格块不会有太多内联内容
|
|
},
|
|
{
|
|
render: (props) => <OnlineTableBlockComponent {...props} />,
|
|
}
|
|
);
|