Skip to content

Commit 1c34ed6

Browse files
areknawomatthewlipski
areknawo
and
matthewlipski
authored
fix: Cache & reuse Shiki highlighter & parser for improved performance (#1363)
* fix: Cache & reuse Shiki highlighter & parser for improved performance * Updated multi editor example and reverted all blocks example due to unwanted changes in merged PR --------- Co-authored-by: matthewlipski <matthewlipski@gmail.com>
1 parent 82e068c commit 1c34ed6

File tree

11 files changed

+415
-177
lines changed

11 files changed

+415
-177
lines changed

‎examples/01-basic/04-all-blocks/App.tsx

+173-168
Original file line numberDiff line numberDiff line change
@@ -1,203 +1,208 @@
11
import {
2-
BlockNoteEditorOptions,
32
BlockNoteSchema,
3+
combineByGroup,
4+
filterSuggestionItems,
45
locales,
56
} from "@blocknote/core";
67
import "@blocknote/core/fonts/inter.css";
78
import { BlockNoteView } from "@blocknote/mantine";
89
import "@blocknote/mantine/style.css";
9-
import { useCreateBlockNote } from "@blocknote/react";
1010
import {
11+
SuggestionMenuController,
12+
getDefaultReactSlashMenuItems,
13+
useCreateBlockNote,
14+
} from "@blocknote/react";
15+
import {
16+
getMultiColumnSlashMenuItems,
1117
multiColumnDropCursor,
1218
locales as multiColumnLocales,
1319
withMultiColumn,
1420
} from "@blocknote/xl-multi-column";
21+
import { useMemo } from "react";
1522

16-
const schema = withMultiColumn(BlockNoteSchema.create());
17-
const options = {
18-
schema: withMultiColumn(BlockNoteSchema.create()),
19-
dropCursor: multiColumnDropCursor,
20-
dictionary: {
21-
...locales.en,
22-
multi_column: multiColumnLocales.en,
23-
},
24-
initialContent: [
25-
{
26-
type: "paragraph",
27-
content: "Welcome to this demo!",
28-
},
29-
{
30-
type: "paragraph",
31-
},
32-
{
33-
type: "paragraph",
34-
content: [
35-
{
36-
type: "text",
37-
text: "Blocks:",
38-
styles: { bold: true },
39-
},
40-
],
41-
},
42-
{
43-
type: "paragraph",
44-
content: "Paragraph",
45-
},
46-
{
47-
type: "columnList",
48-
children: [
49-
{
50-
type: "column",
51-
props: {
52-
width: 0.8,
23+
export default function App() {
24+
// Creates a new editor instance.
25+
const editor = useCreateBlockNote({
26+
schema: withMultiColumn(BlockNoteSchema.create()),
27+
dropCursor: multiColumnDropCursor,
28+
dictionary: {
29+
...locales.en,
30+
multi_column: multiColumnLocales.en,
31+
},
32+
initialContent: [
33+
{
34+
type: "paragraph",
35+
content: "Welcome to this demo!",
36+
},
37+
{
38+
type: "paragraph",
39+
},
40+
{
41+
type: "paragraph",
42+
content: [
43+
{
44+
type: "text",
45+
text: "Blocks:",
46+
styles: { bold: true },
5347
},
54-
children: [
55-
{
56-
type: "paragraph",
57-
content: "Hello to the left!",
48+
],
49+
},
50+
{
51+
type: "paragraph",
52+
content: "Paragraph",
53+
},
54+
{
55+
type: "columnList",
56+
children: [
57+
{
58+
type: "column",
59+
props: {
60+
width: 0.8,
5861
},
59-
],
60-
},
61-
{
62-
type: "column",
63-
props: {
64-
width: 1.2,
62+
children: [
63+
{
64+
type: "paragraph",
65+
content: "Hello to the left!",
66+
},
67+
],
6568
},
66-
children: [
69+
{
70+
type: "column",
71+
props: {
72+
width: 1.2,
73+
},
74+
children: [
75+
{
76+
type: "paragraph",
77+
content: "Hello to the right!",
78+
},
79+
],
80+
},
81+
],
82+
},
83+
{
84+
type: "heading",
85+
content: "Heading",
86+
},
87+
{
88+
type: "bulletListItem",
89+
content: "Bullet List Item",
90+
},
91+
{
92+
type: "numberedListItem",
93+
content: "Numbered List Item",
94+
},
95+
{
96+
type: "checkListItem",
97+
content: "Check List Item",
98+
},
99+
{
100+
type: "codeBlock",
101+
props: { language: "javascript" },
102+
content: "console.log('Hello, world!');",
103+
},
104+
{
105+
type: "table",
106+
content: {
107+
type: "tableContent",
108+
rows: [
109+
{
110+
cells: ["Table Cell", "Table Cell", "Table Cell"],
111+
},
112+
{
113+
cells: ["Table Cell", "Table Cell", "Table Cell"],
114+
},
67115
{
68-
type: "paragraph",
69-
content: "Hello to the right!",
116+
cells: ["Table Cell", "Table Cell", "Table Cell"],
70117
},
71118
],
72119
},
73-
],
74-
},
75-
{
76-
type: "heading",
77-
content: "Heading",
78-
},
79-
{
80-
type: "bulletListItem",
81-
content: "Bullet List Item",
82-
},
83-
{
84-
type: "numberedListItem",
85-
content: "Numbered List Item",
86-
},
87-
{
88-
type: "checkListItem",
89-
content: "Check List Item",
90-
},
91-
{
92-
type: "codeBlock",
93-
props: { language: "javascript" },
94-
content: "console.log('Hello, world!');",
95-
},
96-
{
97-
type: "table",
98-
content: {
99-
type: "tableContent",
100-
rows: [
120+
},
121+
{
122+
type: "file",
123+
},
124+
{
125+
type: "image",
126+
props: {
127+
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
128+
caption:
129+
"From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
130+
},
131+
},
132+
{
133+
type: "video",
134+
props: {
135+
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
136+
caption:
137+
"From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
138+
},
139+
},
140+
{
141+
type: "audio",
142+
props: {
143+
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
144+
caption:
145+
"From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
146+
},
147+
},
148+
{
149+
type: "paragraph",
150+
},
151+
{
152+
type: "paragraph",
153+
content: [
101154
{
102-
cells: ["Table Cell", "Table Cell", "Table Cell"],
155+
type: "text",
156+
text: "Inline Content:",
157+
styles: { bold: true },
103158
},
159+
],
160+
},
161+
{
162+
type: "paragraph",
163+
content: [
104164
{
105-
cells: ["Table Cell", "Table Cell", "Table Cell"],
165+
type: "text",
166+
text: "Styled Text",
167+
styles: {
168+
bold: true,
169+
italic: true,
170+
textColor: "red",
171+
backgroundColor: "blue",
172+
},
173+
},
174+
{
175+
type: "text",
176+
text: " ",
177+
styles: {},
106178
},
107179
{
108-
cells: ["Table Cell", "Table Cell", "Table Cell"],
180+
type: "link",
181+
content: "Link",
182+
href: "https://www.blocknotejs.org",
109183
},
110184
],
111185
},
112-
},
113-
{
114-
type: "file",
115-
},
116-
{
117-
type: "image",
118-
props: {
119-
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
120-
caption:
121-
"From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
122-
},
123-
},
124-
{
125-
type: "video",
126-
props: {
127-
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
128-
caption:
129-
"From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
130-
},
131-
},
132-
{
133-
type: "audio",
134-
props: {
135-
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
136-
caption:
137-
"From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
186+
{
187+
type: "paragraph",
138188
},
139-
},
140-
{
141-
type: "paragraph",
142-
},
143-
{
144-
type: "paragraph",
145-
content: [
146-
{
147-
type: "text",
148-
text: "Inline Content:",
149-
styles: { bold: true },
150-
},
151-
],
152-
},
153-
{
154-
type: "paragraph",
155-
content: [
156-
{
157-
type: "text",
158-
text: "Styled Text",
159-
styles: {
160-
bold: true,
161-
italic: true,
162-
textColor: "red",
163-
backgroundColor: "blue",
164-
},
165-
},
166-
{
167-
type: "text",
168-
text: " ",
169-
styles: {},
170-
},
171-
{
172-
type: "link",
173-
content: "Link",
174-
href: "https://www.blocknotejs.org",
175-
},
176-
],
177-
},
178-
{
179-
type: "paragraph",
180-
},
181-
],
182-
// sideMenuDetection: "editor",
183-
} satisfies Partial<
184-
BlockNoteEditorOptions<
185-
typeof schema.blockSchema,
186-
typeof schema.inlineContentSchema,
187-
typeof schema.styleSchema
188-
>
189-
>;
189+
],
190+
});
190191

191-
export default function App() {
192-
// Creates a new editor instance.
193-
const editor1 = useCreateBlockNote(options);
194-
const editor2 = useCreateBlockNote(options);
192+
const slashMenuItems = useMemo(() => {
193+
return combineByGroup(
194+
getDefaultReactSlashMenuItems(editor),
195+
getMultiColumnSlashMenuItems(editor)
196+
);
197+
}, [editor]);
195198

196199
// Renders the editor instance using a React component.
197200
return (
198-
<div style={{ display: "flex", gap: "10px" }}>
199-
<BlockNoteView editor={editor1} />
200-
{/*<BlockNoteView editor={editor2} />*/}
201-
</div>
201+
<BlockNoteView editor={editor} slashMenu={false}>
202+
<SuggestionMenuController
203+
triggerCharacter={"/"}
204+
getItems={async (query) => filterSuggestionItems(slashMenuItems, query)}
205+
/>
206+
</BlockNoteView>
202207
);
203208
}

‎examples/01-basic/12-multi-editor/.bnexample.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "areknawo",
5+
"tags": ["Basic"]
6+
}

0 commit comments

Comments
 (0)