Skip to content

Commit 8cc247c

Browse files
YousefEDmatthewlipski
YousefED
and
matthewlipski
authored
feature: Column based layouts (#1154)
* extract updateBlockCommand * Extracted remaining commands * extract keyboard shortcuts * move directory * remove createblockcommand * Added merge/split tests * Updated snapshots * Added update block tests and unified test setup * Added test cases for reverting props * Added additional test cases for changing content type * remove "nested" insert option * Split remaining commands & cleaned up * Added `getNearestBlockContainerPos` * Refactored `getBlockInfoFromPos` * Rewrote `splitBlockCommand` * Added text cursor position tests * Fixed lint issue * fix lint * Fixed `splitBlock` selection * Small fix * Added unit tests to check selection setting * simplify splitblocks * Fixed selection in `splitBlock` tests * wip: deprecate getBlockInfoFromPos * finish cleanup * Fixed `mergeBlocks` edge cases * fix build * clean nodeconversions * update prosemirror-model * basics wip * Implemented PR feedback * basics working * fix tabs * Finished review and remaining changes * separate package * Fixed bug in `insertOrUpdateBlock` * Removed log * update architecture * fix build * wip, play with transition style of sidemenu * show sidemenu for blocks inside columns * fix sidemenu * small fixes * Tiny changes * Fixed merge/delete behaviour on Backspace * cherry pick squash commit Refactor: clean blockcontainer (#1137) * extract updateBlockCommand * Extracted remaining commands * extract keyboard shortcuts * move directory * remove createblockcommand * Added merge/split tests * Updated snapshots * Added update block tests and unified test setup * Added test cases for reverting props * Added additional test cases for changing content type * remove "nested" insert option * Split remaining commands & cleaned up * Added `getNearestBlockContainerPos` * Refactored `getBlockInfoFromPos` * Rewrote `splitBlockCommand` * Added text cursor position tests * Fixed lint issue * fix lint * Fixed `splitBlock` selection * Small fix * Added unit tests to check selection setting * simplify splitblocks * Fixed selection in `splitBlock` tests * wip: deprecate getBlockInfoFromPos * finish cleanup * Fixed `mergeBlocks` edge cases * fix build * clean nodeconversions * Implemented PR feedback * Finished review and remaining changes * Fixed bug in `insertOrUpdateBlock` * Removed log * Tiny changes * Fixed merge/delete behaviour on Backspace --------- Co-authored-by: matthewlipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]> * update prosemirror-model * basics wip * basics working * fix tabs * separate package * update architecture * fix build * wip, play with transition style of sidemenu * show sidemenu for blocks inside columns * fix sidemenu * small fixes * cherry pick squash commit Refactor: clean blockcontainer (#1137) * extract updateBlockCommand * Extracted remaining commands * extract keyboard shortcuts * move directory * remove createblockcommand * Added merge/split tests * Updated snapshots * Added update block tests and unified test setup * Added test cases for reverting props * Added additional test cases for changing content type * remove "nested" insert option * Split remaining commands & cleaned up * Added `getNearestBlockContainerPos` * Refactored `getBlockInfoFromPos` * Rewrote `splitBlockCommand` * Added text cursor position tests * Fixed lint issue * fix lint * Fixed `splitBlock` selection * Small fix * Added unit tests to check selection setting * simplify splitblocks * Fixed selection in `splitBlock` tests * wip: deprecate getBlockInfoFromPos * finish cleanup * Fixed `mergeBlocks` edge cases * fix build * clean nodeconversions * Implemented PR feedback * Finished review and remaining changes * Fixed bug in `insertOrUpdateBlock` * Removed log * Tiny changes * Fixed merge/delete behaviour on Backspace --------- Co-authored-by: matthewlipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]> * fix * remove blockAtDocStart and clean mergeBlocks a bit further * implement multi-column backspace * feat: Multi-column resizing (#1186) * Added extension for resizing columns * small resize fixes * prevent columns from pushing document width * Implemented PR feedback * Fixed remaining UX issues * TODO fixes in column node * Updated emoji test screenshots --------- Co-authored-by: yousefed <[email protected]> * Implemented PR feedback * Implemented PR feedback * Fixed column list styles and `nestBlock` * Added column slash menu items * Added unit tests for multi column * Added unit tests for node & html conversions * Updated snapshots * fix internal serializer for bnBlock types * remove md from license * fix trailing node * fix bug * switch to createChecked and fix multicolumn tests * fix external html for multi-column * fix text/html on clipboard * improve copy / paste * remove unused snapshots and skip one test * fix text cursor * Fixed internationalization * remove scrollbar * fix dictionary as any * combineByGroup * clean examples * Fixed slash menu item cursor positioning * move package * Fixed type * Updated docs * remove as any --------- Co-authored-by: matthewlipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]>
1 parent ba19e55 commit 8cc247c

File tree

183 files changed

+7225
-918
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

183 files changed

+7225
-918
lines changed

‎docs/components/pages/landing/hero/DemoEditor.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
1+
import {
2+
BlockNoteSchema,
3+
uploadToTmpFilesDotOrg_DEV_ONLY,
4+
} from "@blocknote/core";
25
import "@blocknote/core/fonts/inter.css";
36
import { useCreateBlockNote } from "@blocknote/react";
47
import { BlockNoteView } from "@blocknote/mantine";
8+
import {
9+
multiColumnDropCursor,
10+
withMultiColumn,
11+
} from "@blocknote/xl-multi-column";
512
import "@blocknote/mantine/style.css";
613
import { useCallback, useMemo, useState } from "react";
714
import YPartyKitProvider from "y-partykit/provider";
@@ -67,6 +74,8 @@ export default function DemoEditor(props: { theme?: "light" | "dark" }) {
6774

6875
const editor = useCreateBlockNote(
6976
{
77+
schema: withMultiColumn(BlockNoteSchema.create()),
78+
dropCursor: multiColumnDropCursor,
7079
collaboration: {
7180
provider,
7281
fragment: doc.getXmlFragment("blocknote"),

‎docs/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@blocknote/mantine": "^0.18.1",
1515
"@blocknote/react": "^0.18.1",
1616
"@blocknote/shadcn": "^0.18.1",
17+
"@blocknote/xl-multi-column": "^0.18.1",
1718
"@headlessui/react": "^1.7.18",
1819
"@heroicons/react": "^2.1.4",
1920
"@mantine/core": "^7.10.1",

‎docs/pages/docs/editor-basics/document-structure.mdx

Lines changed: 28 additions & 0 deletions

‎examples/01-basic/03-all-blocks/.bnexample.json

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/01-basic/03-multi-column/.bnexample.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "yousefed",
5+
"tags": ["Basic", "Blocks"],
6+
"dependencies": {
7+
"@blocknote/xl-multi-column": "latest"
8+
}
9+
}

‎examples/01-basic/03-multi-column/App.tsx

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import {
2+
BlockNoteSchema,
3+
combineByGroup,
4+
filterSuggestionItems,
5+
locales,
6+
} from "@blocknote/core";
7+
import "@blocknote/core/fonts/inter.css";
8+
import { BlockNoteView } from "@blocknote/mantine";
9+
import "@blocknote/mantine/style.css";
10+
import {
11+
SuggestionMenuController,
12+
getDefaultReactSlashMenuItems,
13+
useCreateBlockNote,
14+
} from "@blocknote/react";
15+
import {
16+
getMultiColumnSlashMenuItems,
17+
multiColumnDropCursor,
18+
locales as multiColumnLocales,
19+
withMultiColumn,
20+
} from "@blocknote/xl-multi-column";
21+
import { useMemo } from "react";
22+
export default function App() {
23+
// Creates a new editor instance.
24+
const editor = useCreateBlockNote({
25+
// Adds column and column list blocks to the schema.
26+
schema: withMultiColumn(BlockNoteSchema.create()),
27+
// The default drop cursor only shows up above and below blocks - we replace
28+
// it with the multi-column one that also shows up on the sides of blocks.
29+
dropCursor: multiColumnDropCursor,
30+
// Merges the default dictionary with the multi-column dictionary.
31+
dictionary: {
32+
...locales.en,
33+
multi_column: multiColumnLocales.en,
34+
},
35+
initialContent: [
36+
{
37+
type: "paragraph",
38+
content: "Welcome to this demo!",
39+
},
40+
{
41+
type: "columnList",
42+
children: [
43+
{
44+
type: "column",
45+
props: {
46+
width: 0.8,
47+
},
48+
children: [
49+
{
50+
type: "paragraph",
51+
content: "This paragraph is in a column!",
52+
},
53+
],
54+
},
55+
{
56+
type: "column",
57+
props: {
58+
width: 1.4,
59+
},
60+
children: [
61+
{
62+
type: "heading",
63+
content: "So is this heading!",
64+
},
65+
],
66+
},
67+
{
68+
type: "column",
69+
props: {
70+
width: 0.8,
71+
},
72+
children: [
73+
{
74+
type: "paragraph",
75+
content: "You can have multiple blocks in a column too",
76+
},
77+
{
78+
type: "bulletListItem",
79+
content: "Block 1",
80+
},
81+
{
82+
type: "bulletListItem",
83+
content: "Block 2",
84+
},
85+
{
86+
type: "bulletListItem",
87+
content: "Block 3",
88+
},
89+
],
90+
},
91+
],
92+
},
93+
{
94+
type: "paragraph",
95+
},
96+
],
97+
});
98+
99+
// Merges the default slash menu items with the multi-column ones.
100+
const slashMenuItems = useMemo(() => {
101+
return combineByGroup(
102+
getDefaultReactSlashMenuItems(editor),
103+
getMultiColumnSlashMenuItems(editor)
104+
);
105+
}, [editor]);
106+
107+
// Renders the editor instance using a React component.
108+
return (
109+
<BlockNoteView editor={editor} slashMenu={false}>
110+
{/* Replaces the default slash menu with one that has both the default
111+
items and the multi-column ones. */}
112+
<SuggestionMenuController
113+
triggerCharacter={"/"}
114+
getItems={async (query) => filterSuggestionItems(slashMenuItems, query)}
115+
/>
116+
</BlockNoteView>
117+
);
118+
}

‎examples/01-basic/03-multi-column/README.md

Lines changed: 8 additions & 0 deletions

‎examples/01-basic/03-multi-column/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+
<script>
4+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
5+
</script>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Multi-Column Blocks</title>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/01-basic/03-all-blocks/main.tsx renamed to ‎examples/01-basic/03-multi-column/main.tsx

File renamed without changes.

‎examples/01-basic/03-multi-column/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@blocknote/example-multi-column",
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": "tsc && vite build",
10+
"preview": "vite preview",
11+
"lint": "eslint . --max-warnings 0"
12+
},
13+
"dependencies": {
14+
"@blocknote/core": "latest",
15+
"@blocknote/react": "latest",
16+
"@blocknote/ariakit": "latest",
17+
"@blocknote/mantine": "latest",
18+
"@blocknote/shadcn": "latest",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1",
21+
"@blocknote/xl-multi-column": "latest"
22+
},
23+
"devDependencies": {
24+
"@types/react": "^18.0.25",
25+
"@types/react-dom": "^18.0.9",
26+
"@vitejs/plugin-react": "^4.3.1",
27+
"eslint": "^8.10.0",
28+
"vite": "^5.3.4"
29+
},
30+
"eslintConfig": {
31+
"extends": [
32+
"../../../.eslintrc.js"
33+
]
34+
},
35+
"eslintIgnore": [
36+
"dist"
37+
]
38+
}

0 commit comments

Comments
 (0)