>;
}) => {
@@ -75,7 +78,7 @@ export const TableHandlesController = <
state?.draggingState?.mousePos,
]);
- const { rowHandle, colHandle } = useTableHandlesPositioning(
+ const { rowHandle, colHandle, cellHandle } = useTableHandlesPositioning(
state?.show || false,
state?.referencePosCell || null,
state?.referencePosTable || null,
@@ -98,6 +101,7 @@ export const TableHandlesController = <
const TableHandleComponent = props.tableHandle || TableHandle;
const ExtendButtonComponent = props.extendButton || ExtendButton;
+ const TableCellHandleComponent = props.tableCellHandle || TableCellButton;
return (
<>
@@ -148,6 +152,23 @@ export const TableHandlesController = <
)}
+ {menuContainerRef &&
+ cellHandle.isMounted &&
+ state.colIndex !== undefined &&
+ state.rowIndex !== undefined && (
+
+ )}
+
{/* note that the extend buttons are always shown (we don't look at isMounted etc,
because otherwise the table slightly shifts when they unmount */}
{
// Will be null on initial render when used in UI component controllers.
- if (referencePosCell === null || referencePosTable === null) {
+ if (
+ referencePosCell === null ||
+ referencePosTable === null ||
+ // Ignore cell handle when dragging
+ (draggingState && orientation === "cell")
+ ) {
return;
}
@@ -84,7 +111,9 @@ function useTableHandlePosition(
const fn =
orientation === "row"
? getBoundingClientRectRow
- : getBoundingClientRectCol;
+ : orientation === "col"
+ ? getBoundingClientRectCol
+ : getBoundingClientRectCell;
return fn(referencePosCell, referencePosTable, draggingState);
},
});
@@ -115,6 +144,7 @@ export function useTableHandlesPositioning(
): {
rowHandle: ReturnType;
colHandle: ReturnType;
+ cellHandle: ReturnType;
} {
const rowHandle = useTableHandlePosition(
"row",
@@ -130,12 +160,20 @@ export function useTableHandlesPositioning(
referencePosTable,
draggingState
);
+ const cellHandle = useTableHandlePosition(
+ "cell",
+ show,
+ referencePosCell,
+ referencePosTable,
+ draggingState
+ );
return useMemo(
() => ({
rowHandle,
colHandle,
+ cellHandle,
}),
- [colHandle, rowHandle]
+ [colHandle, rowHandle, cellHandle]
);
}
diff --git a/packages/react/src/editor/ComponentsContext.tsx b/packages/react/src/editor/ComponentsContext.tsx
index 38ef7765fd..0bbd6d4dcb 100644
--- a/packages/react/src/editor/ComponentsContext.tsx
+++ b/packages/react/src/editor/ComponentsContext.tsx
@@ -34,6 +34,19 @@ type ToolbarButtonType = {
| { children: ReactNode; label?: string }
| { children?: undefined; label: string }
);
+
+type MenuButtonType = {
+ className?: string;
+ onClick?: (e: MouseEvent) => void;
+ icon?: ReactNode;
+ onDragStart?: (e: React.DragEvent) => void;
+ onDragEnd?: (e: React.DragEvent) => void;
+ draggable?: boolean;
+} & (
+ | { children: ReactNode; label?: string }
+ | { children?: undefined; label: string }
+);
+
export type ComponentProps = {
FormattingToolbar: {
Root: ToolbarRootType;
@@ -279,6 +292,7 @@ export type ComponentProps = {
children?: ReactNode;
sub?: boolean;
};
+ Button: MenuButtonType;
};
Popover: {
Root: {
diff --git a/packages/shadcn/src/components.ts b/packages/shadcn/src/components.ts
index c365118537..0b719e4fbe 100644
--- a/packages/shadcn/src/components.ts
+++ b/packages/shadcn/src/components.ts
@@ -10,6 +10,7 @@ import {
MenuLabel,
MenuTrigger,
} from "./menu/Menu.js";
+import { MenuButton } from "./menu/Button.js";
import { Panel } from "./panel/Panel.js";
import { PanelTab } from "./panel/PanelTab.js";
import { PanelTextInput } from "./panel/PanelTextInput.js";
@@ -101,6 +102,7 @@ export const components: Components = {
Divider: MenuDivider,
Label: MenuLabel,
Item: MenuItem,
+ Button: MenuButton,
},
Popover: {
Root: Popover,
diff --git a/packages/shadcn/src/menu/Button.tsx b/packages/shadcn/src/menu/Button.tsx
new file mode 100644
index 0000000000..1ac021e553
--- /dev/null
+++ b/packages/shadcn/src/menu/Button.tsx
@@ -0,0 +1,45 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { cn } from "../lib/utils.js";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
+
+export const MenuButton = forwardRef<
+ HTMLButtonElement,
+ ComponentProps["Generic"]["Menu"]["Button"]
+>((props, ref) => {
+ const {
+ className,
+ children,
+ icon,
+ onClick,
+ onDragEnd,
+ onDragStart,
+ draggable,
+ label,
+ ...rest
+ } = props;
+
+ // false, because rest props can be added by ariakit when button is used as a trigger
+ // assertEmpty in this case is only used at typescript level, not runtime level
+ assertEmpty(rest, false);
+
+ const ShadCNComponents = useShadCNComponentsContext()!;
+
+ return (
+
+ {icon}
+ {children}
+
+ );
+});
diff --git a/packages/shadcn/src/menu/Menu.tsx b/packages/shadcn/src/menu/Menu.tsx
index 5e1f4ae135..6ed2cc3b48 100644
--- a/packages/shadcn/src/menu/Menu.tsx
+++ b/packages/shadcn/src/menu/Menu.tsx
@@ -149,7 +149,7 @@ export const MenuItem = forwardRef<
if (checked !== undefined) {
return (
- {props.transformer.transformInlineContent(cell)}
+ {props.transformer.transformInlineContent(
+ mapTableCell(cell).content
+ )}
))}
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index 32bb88d44b..442c480b5c 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -657,6 +657,27 @@
"slug": "ui-components"
}
},
+ {
+ "projectSlug": "advanced-tables",
+ "fullSlug": "ui-components/advanced-tables",
+ "pathFromRoot": "examples/03-ui-components/15-advanced-tables",
+ "config": {
+ "playground": true,
+ "docs": true,
+ "author": "nperez0111",
+ "tags": [
+ "Intermediate",
+ "UI Components",
+ "Tables",
+ "Appearance & Styling"
+ ]
+ },
+ "title": "Advanced Tables",
+ "group": {
+ "pathFromRoot": "examples/03-ui-components",
+ "slug": "ui-components"
+ }
+ },
{
"projectSlug": "link-toolbar-buttons",
"fullSlug": "ui-components/link-toolbar-buttons",
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 0000000000..4c3c4592c1
--- /dev/null
+++ b/vitest.workspace.ts
@@ -0,0 +1,13 @@
+import { defineWorkspace } from "vitest/config";
+
+export default defineWorkspace([
+ "./packages/xl-docx-exporter/vite.config.ts",
+ "./packages/react/vite.config.ts",
+ "./packages/shadcn/vite.config.ts",
+ "./packages/server-util/vite.config.ts",
+ "./packages/xl-pdf-exporter/vite.config.ts",
+ "./packages/mantine/vite.config.ts",
+ "./packages/core/vite.config.ts",
+ "./packages/xl-multi-column/vite.config.ts",
+ "./packages/ariakit/vite.config.ts",
+]);