1
- import {
2
- BlockNoteSchema ,
3
- combineByGroup ,
4
- filterSuggestionItems ,
5
- locales ,
6
- } from "@blocknote/core" ;
7
1
import "@blocknote/core/fonts/inter.css" ;
8
2
import { BlockNoteView } from "@blocknote/mantine" ;
9
3
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" ;
4
+ import { useCreateBlockNote } from "@blocknote/react" ;
5
+
22
6
export default function App ( ) {
23
7
// Creates a new editor instance.
24
8
const editor = useCreateBlockNote ( {
25
- schema : withMultiColumn ( BlockNoteSchema . create ( ) ) ,
26
- dropCursor : multiColumnDropCursor ,
27
- dictionary : {
28
- ...locales . en ,
29
- multi_column : multiColumnLocales . en ,
30
- } ,
31
9
initialContent : [
32
10
{
33
11
type : "paragraph" ,
@@ -50,35 +28,6 @@ export default function App() {
50
28
type : "paragraph" ,
51
29
content : "Paragraph" ,
52
30
} ,
53
- {
54
- type : "columnList" ,
55
- children : [
56
- {
57
- type : "column" ,
58
- props : {
59
- width : 0.8 ,
60
- } ,
61
- children : [
62
- {
63
- type : "paragraph" ,
64
- content : "Hello to the left!" ,
65
- } ,
66
- ] ,
67
- } ,
68
- {
69
- type : "column" ,
70
- props : {
71
- width : 1.2 ,
72
- } ,
73
- children : [
74
- {
75
- type : "paragraph" ,
76
- content : "Hello to the right!" ,
77
- } ,
78
- ] ,
79
- } ,
80
- ] ,
81
- } ,
82
31
{
83
32
type : "heading" ,
84
33
content : "Heading" ,
@@ -188,20 +137,6 @@ export default function App() {
188
137
] ,
189
138
} ) ;
190
139
191
- const slashMenuItems = useMemo ( ( ) => {
192
- return combineByGroup (
193
- getDefaultReactSlashMenuItems ( editor ) ,
194
- getMultiColumnSlashMenuItems ( editor )
195
- ) ;
196
- } , [ editor ] ) ;
197
-
198
140
// Renders the editor instance using a React component.
199
- return (
200
- < BlockNoteView editor = { editor } slashMenu = { false } >
201
- < SuggestionMenuController
202
- triggerCharacter = { "/" }
203
- getItems = { async ( query ) => filterSuggestionItems ( slashMenuItems , query ) }
204
- />
205
- </ BlockNoteView >
206
- ) ;
141
+ return < BlockNoteView editor = { editor } /> ;
207
142
}
0 commit comments