Skip to content

Commit 75c4d03

Browse files
nperez0111must
nperez0111
and
must
committed
fix(core): maintain text selection across table updates (#1894)
Co-authored-by: Mustapha Ben Chaaben <mustapha3892@gmail.com>
1 parent cd37586 commit 75c4d03

File tree

11 files changed

+1053
-4
lines changed

11 files changed

+1053
-4
lines changed

‎examples/03-ui-components/17-advanced-tables-2/.bnexample.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "must",
5+
"tags": [
6+
"Intermediate",
7+
"UI Components",
8+
"Tables",
9+
"Appearance & Styling"
10+
]
11+
}

‎examples/03-ui-components/17-advanced-tables-2/README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Advanced Tables with Calculated Columns
2+
3+
This example demonstrates advanced table features including automatic calculations. It shows how to create a table with calculated columns that automatically update when values change.
4+
5+
## Features
6+
7+
- **Automatic Calculations**: Quantity × Price = Total for each row
8+
- **Grand Total**: Automatically calculated sum of all totals
9+
- **Real-time Updates**: Calculations update immediately when you change quantity or price values
10+
- **Split cells**: Merge and split table cells
11+
- **Cell background color**: Color individual cells
12+
- **Cell text color**: Change text color in cells
13+
- **Table row and column headers**: Use headers for better organization
14+
15+
## How It Works
16+
17+
The example uses the `onChange` event listener to detect when table content changes. When a table is updated, it automatically:
18+
19+
1. Extracts quantity and price values from each data row
20+
2. Calculates the total (quantity × price) for each row
21+
3. Updates the total column with the calculated values
22+
4. Calculates and updates the grand total
23+
24+
## Code Highlights
25+
26+
```tsx
27+
<BlockNoteView
28+
editor={editor}
29+
onChange={(editor, { getChanges }) => {
30+
const changes = getChanges();
31+
32+
changes.forEach((change) => {
33+
if (change.type === "update" && change.block.type === "table") {
34+
const updatedRows = calculateTableTotals(change.block);
35+
if (updatedRows) {
36+
editor.updateBlock(change.block, {
37+
type: "table",
38+
content: {
39+
...change.block.content,
40+
rows: updatedRows as any,
41+
} as any,
42+
});
43+
}
44+
}
45+
});
46+
}}
47+
></BlockNoteView>
48+
```
49+
50+
**Relevant Docs:**
51+
52+
- [Tables](/docs/features/blocks/tables)
53+
- [Editor Setup](/docs/getting-started/editor-setup)
54+
- [Events](/docs/reference/editor/events)

‎examples/03-ui-components/17-advanced-tables-2/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Advanced Tables with Calculated Columns</title>
6+
<script>
7+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
8+
</script>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/03-ui-components/17-advanced-tables-2/main.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import React from "react";
3+
import { createRoot } from "react-dom/client";
4+
import App from "./src/App.jsx";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>
11+
);

‎examples/03-ui-components/17-advanced-tables-2/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "@blocknote/example-ui-components-advanced-tables-2",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"private": true,
5+
"version": "0.12.4",
6+
"scripts": {
7+
"start": "vite",
8+
"dev": "vite",
9+
"build:prod": "tsc && vite build",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@blocknote/core": "latest",
14+
"@blocknote/react": "latest",
15+
"@blocknote/ariakit": "latest",
16+
"@blocknote/mantine": "latest",
17+
"@blocknote/shadcn": "latest",
18+
"react": "^19.1.0",
19+
"react-dom": "^19.1.0"
20+
},
21+
"devDependencies": {
22+
"@types/react": "^19.1.0",
23+
"@types/react-dom": "^19.1.0",
24+
"@vitejs/plugin-react": "^4.3.1",
25+
"vite": "^5.3.4"
26+
}
27+
}

0 commit comments

Comments
 (0)