@blocknote/core 0.8.2 → 0.8.4-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/README.md +4 -0
  2. package/dist/blocknote.js +1777 -1849
  3. package/dist/blocknote.js.map +1 -1
  4. package/dist/blocknote.umd.cjs +4 -4
  5. package/dist/blocknote.umd.cjs.map +1 -1
  6. package/dist/style.css +1 -1
  7. package/package.json +4 -4
  8. package/src/BlockNoteEditor.ts +89 -39
  9. package/src/BlockNoteExtensions.ts +1 -58
  10. package/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap +10 -10
  11. package/src/api/formatConversions/formatConversions.test.ts +587 -605
  12. package/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap +15 -15
  13. package/src/api/nodeConversions/nodeConversions.test.ts +90 -94
  14. package/src/extensions/Blocks/api/blockTypes.ts +3 -2
  15. package/src/extensions/Blocks/helpers/getBlockInfoFromPos.ts +6 -0
  16. package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +101 -114
  17. package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts +184 -149
  18. package/src/extensions/Placeholder/PlaceholderExtension.ts +2 -2
  19. package/src/extensions/{DraggableBlocks/DraggableBlocksPlugin.ts → SideMenu/SideMenuPlugin.ts} +181 -164
  20. package/src/extensions/SlashMenu/BaseSlashMenuItem.ts +7 -30
  21. package/src/extensions/SlashMenu/SlashMenuPlugin.ts +51 -0
  22. package/src/extensions/SlashMenu/defaultSlashMenuItems.ts +109 -0
  23. package/src/extensions/UniqueID/UniqueID.ts +29 -30
  24. package/src/index.ts +9 -8
  25. package/src/shared/BaseUiElementTypes.ts +8 -0
  26. package/src/shared/EditorElement.ts +0 -16
  27. package/src/shared/EventEmitter.ts +58 -0
  28. package/src/shared/plugins/suggestion/SuggestionItem.ts +3 -6
  29. package/src/shared/plugins/suggestion/SuggestionPlugin.ts +341 -403
  30. package/types/src/BlockNoteEditor.d.ts +18 -11
  31. package/types/src/BlockNoteExtensions.d.ts +0 -19
  32. package/types/src/extensions/Blocks/api/blockTypes.d.ts +3 -2
  33. package/types/src/extensions/FormattingToolbar/FormattingToolbarPlugin.d.ts +18 -24
  34. package/types/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.d.ts +37 -10
  35. package/types/src/extensions/SideMenu/SideMenuPlugin.d.ts +79 -0
  36. package/types/src/extensions/SlashMenu/BaseSlashMenuItem.d.ts +5 -18
  37. package/types/src/extensions/SlashMenu/SlashMenuPlugin.d.ts +13 -0
  38. package/types/src/extensions/SlashMenu/defaultSlashMenuItems.d.ts +1 -69
  39. package/types/src/index.d.ts +9 -8
  40. package/types/src/shared/BaseUiElementTypes.d.ts +7 -0
  41. package/types/src/shared/EditorElement.d.ts +0 -10
  42. package/types/src/shared/EventEmitter.d.ts +11 -0
  43. package/types/src/shared/plugins/suggestion/SuggestionItem.d.ts +2 -7
  44. package/types/src/shared/plugins/suggestion/SuggestionPlugin.d.ts +12 -43
  45. package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts +0 -29
  46. package/src/extensions/DraggableBlocks/DraggableBlocksExtension.ts +0 -37
  47. package/src/extensions/FormattingToolbar/FormattingToolbarExtension.ts +0 -37
  48. package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts +0 -18
  49. package/src/extensions/HyperlinkToolbar/HyperlinkMark.ts +0 -28
  50. package/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.ts +0 -19
  51. package/src/extensions/SlashMenu/SlashMenuExtension.ts +0 -53
  52. package/src/extensions/SlashMenu/defaultSlashMenuItems.tsx +0 -195
  53. package/src/extensions/SlashMenu/index.ts +0 -5
  54. package/src/shared/plugins/suggestion/SuggestionsMenuFactoryTypes.ts +0 -21
  55. package/types/src/CustomBlock.d.ts +0 -15
  56. package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableCol.d.ts +0 -2
  57. package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableContent.d.ts +0 -2
  58. package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableRow.d.ts +0 -2
  59. package/types/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.d.ts +0 -17
  60. package/types/src/extensions/DraggableBlocks/DraggableBlocksExtension.d.ts +0 -16
  61. package/types/src/extensions/DraggableBlocks/DraggableBlocksPlugin.d.ts +0 -49
  62. package/types/src/extensions/FormattingToolbar/FormattingToolbarExtension.d.ts +0 -11
  63. package/types/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.d.ts +0 -10
  64. package/types/src/extensions/HyperlinkToolbar/HyperlinkMark.d.ts +0 -8
  65. package/types/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.d.ts +0 -12
  66. package/types/src/extensions/Placeholder/localisation/index.d.ts +0 -2
  67. package/types/src/extensions/Placeholder/localisation/translation.d.ts +0 -51
  68. package/types/src/extensions/SlashMenu/SlashMenuExtension.d.ts +0 -13
  69. package/types/src/extensions/SlashMenu/index.d.ts +0 -4
  70. package/types/src/shared/plugins/suggestion/SuggestionsMenuFactoryTypes.d.ts +0 -12
  71. /package/src/extensions/{DraggableBlocks → SideMenu}/MultipleNodeSelection.ts +0 -0
  72. /package/types/src/extensions/{DraggableBlocks → SideMenu}/MultipleNodeSelection.d.ts +0 -0
package/src/api/formatConversions/formatConversions.test.ts CHANGED
@@ -1,662 +1,587 @@
1
1
  import { afterEach, beforeEach, describe, expect, it } from "vitest";
2
2
  import { Block, BlockNoteEditor } from "../..";
3
3
  import UniqueID from "../../extensions/UniqueID/UniqueID";
4
- import { DefaultBlockSchema } from "../../extensions/Blocks/api/defaultBlocks";
5
4
 
6
5
  let editor: BlockNoteEditor;
7
6
 
8
- let nonNestedBlocks: Block<DefaultBlockSchema>[];
9
- let nonNestedHTML: string;
10
- let nonNestedMarkdown: string;
11
-
12
- let nestedBlocks: Block<DefaultBlockSchema>[];
13
- // let nestedHTML: string;
14
- // let nestedMarkdown: string;
15
-
16
- let styledBlocks: Block<DefaultBlockSchema>[];
17
- let styledHTML: string;
18
- let styledMarkdown: string;
19
-
20
- let complexBlocks: Block<DefaultBlockSchema>[];
21
- // let complexHTML: string;
22
- // let complexMarkdown: string;
23
-
24
- function removeInlineContentClass(html: string) {
25
- return html.replace(/ class="_inlineContent_1c48ad"/g, "");
26
- }
27
-
28
- beforeEach(() => {
29
- (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
30
-
31
- editor = new BlockNoteEditor();
32
-
33
- nonNestedBlocks = [
34
- {
35
- id: UniqueID.options.generateID(),
36
- type: "heading",
37
- props: {
38
- backgroundColor: "default",
39
- textColor: "default",
40
- textAlignment: "left",
41
- level: "1",
7
+ const getNonNestedBlocks = (): Block[] => [
8
+ {
9
+ id: UniqueID.options.generateID(),
10
+ type: "heading",
11
+ props: {
12
+ backgroundColor: "default",
13
+ textColor: "default",
14
+ textAlignment: "left",
15
+ level: "1",
16
+ },
17
+ content: [
18
+ {
19
+ type: "text",
20
+ text: "Heading",
21
+ styles: {},
42
22
  },
43
- content: [
44
- {
45
- type: "text",
46
- text: "Heading",
47
- styles: {},
48
- },
49
- ],
50
- children: [],
23
+ ],
24
+ children: [],
25
+ },
26
+ {
27
+ id: UniqueID.options.generateID(),
28
+ type: "paragraph",
29
+ props: {
30
+ backgroundColor: "default",
31
+ textColor: "default",
32
+ textAlignment: "left",
51
33
  },
52
- {
53
- id: UniqueID.options.generateID(),
54
- type: "paragraph",
55
- props: {
56
- backgroundColor: "default",
57
- textColor: "default",
58
- textAlignment: "left",
34
+ content: [
35
+ {
36
+ type: "text",
37
+ text: "Paragraph",
38
+ styles: {},
59
39
  },
60
- content: [
61
- {
62
- type: "text",
63
- text: "Paragraph",
64
- styles: {},
65
- },
66
- ],
67
- children: [],
40
+ ],
41
+ children: [],
42
+ },
43
+ {
44
+ id: UniqueID.options.generateID(),
45
+ type: "bulletListItem",
46
+ props: {
47
+ backgroundColor: "default",
48
+ textColor: "default",
49
+ textAlignment: "left",
68
50
  },
69
- {
70
- id: UniqueID.options.generateID(),
71
- type: "bulletListItem",
72
- props: {
73
- backgroundColor: "default",
74
- textColor: "default",
75
- textAlignment: "left",
51
+ content: [
52
+ {
53
+ type: "text",
54
+ text: "Bullet List Item",
55
+ styles: {},
76
56
  },
77
- content: [
78
- {
79
- type: "text",
80
- text: "Bullet List Item",
81
- styles: {},
82
- },
83
- ],
84
- children: [],
57
+ ],
58
+ children: [],
59
+ },
60
+ {
61
+ id: UniqueID.options.generateID(),
62
+ type: "numberedListItem",
63
+ props: {
64
+ backgroundColor: "default",
65
+ textColor: "default",
66
+ textAlignment: "left",
85
67
  },
86
- {
87
- id: UniqueID.options.generateID(),
88
- type: "numberedListItem",
89
- props: {
90
- backgroundColor: "default",
91
- textColor: "default",
92
- textAlignment: "left",
68
+ content: [
69
+ {
70
+ type: "text",
71
+ text: "Numbered List Item",
72
+ styles: {},
93
73
  },
94
- content: [
95
- {
96
- type: "text",
97
- text: "Numbered List Item",
98
- styles: {},
99
- },
100
- ],
101
- children: [],
74
+ ],
75
+ children: [],
76
+ },
77
+ ];
78
+
79
+ const getNestedBlocks = (): Block[] => [
80
+ {
81
+ id: UniqueID.options.generateID(),
82
+ type: "heading",
83
+ props: {
84
+ backgroundColor: "default",
85
+ textColor: "default",
86
+ textAlignment: "left",
87
+ level: "1",
102
88
  },
103
- ];
104
- nonNestedHTML = `<h1>Heading</h1><p>Paragraph</p><ul><li><p>Bullet List Item</p></li></ul><ol><li><p>Numbered List Item</p></li></ol>`;
105
- nonNestedMarkdown = `# Heading
106
-
107
- Paragraph
108
-
109
- * Bullet List Item
110
-
111
- 1. Numbered List Item
112
- `;
113
-
114
- nestedBlocks = [
115
- {
116
- id: UniqueID.options.generateID(),
117
- type: "heading",
118
- props: {
119
- backgroundColor: "default",
120
- textColor: "default",
121
- textAlignment: "left",
122
- level: "1",
89
+ content: [
90
+ {
91
+ type: "text",
92
+ text: "Heading",
93
+ styles: {},
123
94
  },
124
- content: [
125
- {
126
- type: "text",
127
- text: "Heading",
128
- styles: {},
95
+ ],
96
+ children: [
97
+ {
98
+ id: UniqueID.options.generateID(),
99
+ type: "paragraph",
100
+ props: {
101
+ backgroundColor: "default",
102
+ textColor: "default",
103
+ textAlignment: "left",
129
104
  },
130
- ],
131
- children: [
132
- {
133
- id: UniqueID.options.generateID(),
134
- type: "paragraph",
135
- props: {
136
- backgroundColor: "default",
137
- textColor: "default",
138
- textAlignment: "left",
105
+ content: [
106
+ {
107
+ type: "text",
108
+ text: "Paragraph",
109
+ styles: {},
139
110
  },
140
- content: [
141
- {
142
- type: "text",
143
- text: "Paragraph",
144
- styles: {},
111
+ ],
112
+ children: [
113
+ {
114
+ id: UniqueID.options.generateID(),
115
+ type: "bulletListItem",
116
+ props: {
117
+ backgroundColor: "default",
118
+ textColor: "default",
119
+ textAlignment: "left",
145
120
  },
146
- ],
147
- children: [
148
- {
149
- id: UniqueID.options.generateID(),
150
- type: "bulletListItem",
151
- props: {
152
- backgroundColor: "default",
153
- textColor: "default",
154
- textAlignment: "left",
121
+ content: [
122
+ {
123
+ type: "text",
124
+ text: "Bullet List Item",
125
+ styles: {},
155
126
  },
156
- content: [
157
- {
158
- type: "text",
159
- text: "Bullet List Item",
160
- styles: {},
127
+ ],
128
+ children: [
129
+ {
130
+ id: UniqueID.options.generateID(),
131
+ type: "numberedListItem",
132
+ props: {
133
+ backgroundColor: "default",
134
+ textColor: "default",
135
+ textAlignment: "left",
161
136
  },
162
- ],
163
- children: [
164
- {
165
- id: UniqueID.options.generateID(),
166
- type: "numberedListItem",
167
- props: {
168
- backgroundColor: "default",
169
- textColor: "default",
170
- textAlignment: "left",
137
+ content: [
138
+ {
139
+ type: "text",
140
+ text: "Numbered List Item",
141
+ styles: {},
171
142
  },
172
- content: [
173
- {
174
- type: "text",
175
- text: "Numbered List Item",
176
- styles: {},
177
- },
178
- ],
179
- children: [],
180
- },
181
- ],
182
- },
183
- ],
184
- },
185
- ],
186
- },
187
- ];
188
- // nestedHTML = `<h1>Heading</h1><p>Paragraph</p><ul><li><p>Bullet List Item</p><ol><li><p>Numbered List Item</p></li></ol></li></ul>`;
189
- // nestedMarkdown = `# Heading
190
- //
191
- // Paragraph
192
- //
193
- // * Bullet List Item
194
- //
195
- // 1. Numbered List Item
196
- // `;
197
-
198
- styledBlocks = [
199
- {
200
- id: UniqueID.options.generateID(),
201
- type: "paragraph",
202
- props: {
203
- backgroundColor: "default",
204
- textColor: "default",
205
- textAlignment: "left",
206
- },
207
- content: [
208
- {
209
- type: "text",
210
- text: "Bold",
211
- styles: {
212
- bold: true,
143
+ ],
144
+ children: [],
145
+ },
146
+ ],
213
147
  },
148
+ ],
149
+ },
150
+ ],
151
+ },
152
+ ];
153
+
154
+ const getStyledBlocks = (): Block[] => [
155
+ {
156
+ id: UniqueID.options.generateID(),
157
+ type: "paragraph",
158
+ props: {
159
+ backgroundColor: "default",
160
+ textColor: "default",
161
+ textAlignment: "left",
162
+ },
163
+ content: [
164
+ {
165
+ type: "text",
166
+ text: "Bold",
167
+ styles: {
168
+ bold: true,
214
169
  },
215
- {
216
- type: "text",
217
- text: "Italic",
218
- styles: {
219
- italic: true,
220
- },
170
+ },
171
+ {
172
+ type: "text",
173
+ text: "Italic",
174
+ styles: {
175
+ italic: true,
221
176
  },
222
- {
223
- type: "text",
224
- text: "Underline",
225
- styles: {
226
- underline: true,
227
- },
177
+ },
178
+ {
179
+ type: "text",
180
+ text: "Underline",
181
+ styles: {
182
+ underline: true,
228
183
  },
229
- {
230
- type: "text",
231
- text: "Strikethrough",
232
- styles: {
233
- strike: true,
234
- },
184
+ },
185
+ {
186
+ type: "text",
187
+ text: "Strikethrough",
188
+ styles: {
189
+ strike: true,
235
190
  },
236
- {
237
- type: "text",
238
- text: "TextColor",
239
- styles: {
240
- textColor: "red",
241
- },
191
+ },
192
+ {
193
+ type: "text",
194
+ text: "TextColor",
195
+ styles: {
196
+ textColor: "red",
242
197
  },
243
- {
244
- type: "text",
245
- text: "BackgroundColor",
246
- styles: {
247
- backgroundColor: "red",
248
- },
198
+ },
199
+ {
200
+ type: "text",
201
+ text: "BackgroundColor",
202
+ styles: {
203
+ backgroundColor: "red",
249
204
  },
250
- {
251
- type: "text",
252
- text: "Multiple",
253
- styles: {
254
- bold: true,
255
- italic: true,
256
- },
205
+ },
206
+ {
207
+ type: "text",
208
+ text: "Multiple",
209
+ styles: {
210
+ bold: true,
211
+ italic: true,
257
212
  },
258
- ],
259
- children: [],
213
+ },
214
+ ],
215
+ children: [],
216
+ },
217
+ ];
218
+
219
+ const getComplexBlocks = (): Block[] => [
220
+ {
221
+ id: UniqueID.options.generateID(),
222
+ type: "heading",
223
+ props: {
224
+ backgroundColor: "red",
225
+ textColor: "yellow",
226
+ textAlignment: "right",
227
+ level: "1",
260
228
  },
261
- ];
262
- styledHTML = `<p><strong>Bold</strong><em>Italic</em><u>Underline</u><s>Strikethrough</s><span data-text-color="red">TextColor</span><span data-background-color="red">BackgroundColor</span><strong><em>Multiple</em></strong></p>`;
263
- styledMarkdown = `**Bold***Italic*Underline~~Strikethrough~~TextColorBackgroundColor***Multiple***`;
264
-
265
- complexBlocks = [
266
- {
267
- id: UniqueID.options.generateID(),
268
- type: "heading",
269
- props: {
270
- backgroundColor: "red",
271
- textColor: "yellow",
272
- textAlignment: "right",
273
- level: "1",
229
+ content: [
230
+ {
231
+ type: "text",
232
+ text: "Heading 1",
233
+ styles: {},
274
234
  },
275
- content: [
276
- {
277
- type: "text",
278
- text: "Heading 1",
279
- styles: {},
235
+ ],
236
+ children: [
237
+ {
238
+ id: UniqueID.options.generateID(),
239
+ type: "heading",
240
+ props: {
241
+ backgroundColor: "orange",
242
+ textColor: "orange",
243
+ textAlignment: "center",
244
+ level: "2",
280
245
  },
281
- ],
282
- children: [
283
- {
284
- id: UniqueID.options.generateID(),
285
- type: "heading",
286
- props: {
287
- backgroundColor: "orange",
288
- textColor: "orange",
289
- textAlignment: "center",
290
- level: "2",
246
+ content: [
247
+ {
248
+ type: "text",
249
+ text: "Heading 2",
250
+ styles: {},
291
251
  },
292
- content: [
293
- {
294
- type: "text",
295
- text: "Heading 2",
296
- styles: {},
252
+ ],
253
+ children: [
254
+ {
255
+ id: UniqueID.options.generateID(),
256
+ type: "heading",
257
+ props: {
258
+ backgroundColor: "yellow",
259
+ textColor: "red",
260
+ textAlignment: "left",
261
+ level: "3",
297
262
  },
298
- ],
299
- children: [
300
- {
301
- id: UniqueID.options.generateID(),
302
- type: "heading",
303
- props: {
304
- backgroundColor: "yellow",
305
- textColor: "red",
306
- textAlignment: "left",
307
- level: "3",
263
+ content: [
264
+ {
265
+ type: "text",
266
+ text: "Heading 3",
267
+ styles: {},
308
268
  },
309
- content: [
310
- {
311
- type: "text",
312
- text: "Heading 3",
313
- styles: {},
314
- },
315
- ],
316
- children: [],
317
- },
318
- ],
319
- },
320
- ],
321
- },
322
- {
323
- id: UniqueID.options.generateID(),
324
- type: "paragraph",
325
- props: {
326
- backgroundColor: "default",
327
- textColor: "default",
328
- textAlignment: "left",
329
- },
330
- content: [
331
- {
332
- type: "text",
333
- text: "Paragraph",
334
- styles: {
335
- textColor: "purple",
336
- backgroundColor: "green",
269
+ ],
270
+ children: [],
337
271
  },
272
+ ],
273
+ },
274
+ ],
275
+ },
276
+ {
277
+ id: UniqueID.options.generateID(),
278
+ type: "paragraph",
279
+ props: {
280
+ backgroundColor: "default",
281
+ textColor: "default",
282
+ textAlignment: "left",
283
+ },
284
+ content: [
285
+ {
286
+ type: "text",
287
+ text: "Paragraph",
288
+ styles: {
289
+ textColor: "purple",
290
+ backgroundColor: "green",
338
291
  },
339
- ],
340
- children: [],
292
+ },
293
+ ],
294
+ children: [],
295
+ },
296
+ {
297
+ id: UniqueID.options.generateID(),
298
+ type: "paragraph",
299
+ props: {
300
+ backgroundColor: "default",
301
+ textColor: "default",
302
+ textAlignment: "left",
341
303
  },
342
- {
343
- id: UniqueID.options.generateID(),
344
- type: "paragraph",
345
- props: {
346
- backgroundColor: "default",
347
- textColor: "default",
348
- textAlignment: "left",
304
+ content: [
305
+ {
306
+ type: "text",
307
+ text: "P",
308
+ styles: {},
349
309
  },
350
- content: [
351
- {
352
- type: "text",
353
- text: "P",
354
- styles: {},
355
- },
356
- {
357
- type: "text",
358
- text: "ara",
359
- styles: {
360
- bold: true,
361
- },
310
+ {
311
+ type: "text",
312
+ text: "ara",
313
+ styles: {
314
+ bold: true,
362
315
  },
363
- {
364
- type: "text",
365
- text: "grap",
366
- styles: {
367
- italic: true,
368
- },
369
- },
370
- {
371
- type: "text",
372
- text: "h",
373
- styles: {},
316
+ },
317
+ {
318
+ type: "text",
319
+ text: "grap",
320
+ styles: {
321
+ italic: true,
374
322
  },
375
- ],
376
- children: [],
323
+ },
324
+ {
325
+ type: "text",
326
+ text: "h",
327
+ styles: {},
328
+ },
329
+ ],
330
+ children: [],
331
+ },
332
+ {
333
+ id: UniqueID.options.generateID(),
334
+ type: "paragraph",
335
+ props: {
336
+ backgroundColor: "default",
337
+ textColor: "default",
338
+ textAlignment: "left",
377
339
  },
378
- {
379
- id: UniqueID.options.generateID(),
380
- type: "paragraph",
381
- props: {
382
- backgroundColor: "default",
383
- textColor: "default",
384
- textAlignment: "left",
340
+ content: [
341
+ {
342
+ type: "text",
343
+ text: "P",
344
+ styles: {},
385
345
  },
386
- content: [
387
- {
388
- type: "text",
389
- text: "P",
390
- styles: {},
391
- },
392
- {
393
- type: "text",
394
- text: "ara",
395
- styles: {
396
- underline: true,
397
- },
398
- },
399
- {
400
- type: "text",
401
- text: "grap",
402
- styles: {
403
- strike: true,
404
- },
346
+ {
347
+ type: "text",
348
+ text: "ara",
349
+ styles: {
350
+ underline: true,
405
351
  },
406
- {
407
- type: "text",
408
- text: "h",
409
- styles: {},
352
+ },
353
+ {
354
+ type: "text",
355
+ text: "grap",
356
+ styles: {
357
+ strike: true,
410
358
  },
411
- ],
412
- children: [],
359
+ },
360
+ {
361
+ type: "text",
362
+ text: "h",
363
+ styles: {},
364
+ },
365
+ ],
366
+ children: [],
367
+ },
368
+ {
369
+ id: UniqueID.options.generateID(),
370
+ type: "bulletListItem",
371
+ props: {
372
+ backgroundColor: "default",
373
+ textColor: "default",
374
+ textAlignment: "left",
413
375
  },
414
- {
415
- id: UniqueID.options.generateID(),
416
- type: "bulletListItem",
417
- props: {
418
- backgroundColor: "default",
419
- textColor: "default",
420
- textAlignment: "left",
376
+ content: [
377
+ {
378
+ type: "text",
379
+ text: "Bullet List Item",
380
+ styles: {},
421
381
  },
422
- content: [
423
- {
424
- type: "text",
425
- text: "Bullet List Item",
426
- styles: {},
427
- },
428
- ],
429
- children: [],
382
+ ],
383
+ children: [],
384
+ },
385
+ {
386
+ id: UniqueID.options.generateID(),
387
+ type: "bulletListItem",
388
+ props: {
389
+ backgroundColor: "default",
390
+ textColor: "default",
391
+ textAlignment: "left",
430
392
  },
431
- {
432
- id: UniqueID.options.generateID(),
433
- type: "bulletListItem",
434
- props: {
435
- backgroundColor: "default",
436
- textColor: "default",
437
- textAlignment: "left",
393
+ content: [
394
+ {
395
+ type: "text",
396
+ text: "Bullet List Item",
397
+ styles: {},
438
398
  },
439
- content: [
440
- {
441
- type: "text",
442
- text: "Bullet List Item",
443
- styles: {},
399
+ ],
400
+ children: [
401
+ {
402
+ id: UniqueID.options.generateID(),
403
+ type: "bulletListItem",
404
+ props: {
405
+ backgroundColor: "default",
406
+ textColor: "default",
407
+ textAlignment: "left",
444
408
  },
445
- ],
446
- children: [
447
- {
448
- id: UniqueID.options.generateID(),
449
- type: "bulletListItem",
450
- props: {
451
- backgroundColor: "default",
452
- textColor: "default",
453
- textAlignment: "left",
409
+ content: [
410
+ {
411
+ type: "text",
412
+ text: "Bullet List Item",
413
+ styles: {},
454
414
  },
455
- content: [
456
- {
457
- type: "text",
458
- text: "Bullet List Item",
459
- styles: {},
415
+ ],
416
+ children: [
417
+ {
418
+ id: UniqueID.options.generateID(),
419
+ type: "bulletListItem",
420
+ props: {
421
+ backgroundColor: "default",
422
+ textColor: "default",
423
+ textAlignment: "left",
460
424
  },
461
- ],
462
- children: [
463
- {
464
- id: UniqueID.options.generateID(),
465
- type: "bulletListItem",
466
- props: {
467
- backgroundColor: "default",
468
- textColor: "default",
469
- textAlignment: "left",
425
+ content: [
426
+ {
427
+ type: "text",
428
+ text: "Bullet List Item",
429
+ styles: {},
470
430
  },
471
- content: [
472
- {
473
- type: "text",
474
- text: "Bullet List Item",
475
- styles: {},
476
- },
477
- ],
478
- children: [],
431
+ ],
432
+ children: [],
433
+ },
434
+ {
435
+ id: UniqueID.options.generateID(),
436
+ type: "paragraph",
437
+ props: {
438
+ backgroundColor: "default",
439
+ textColor: "default",
440
+ textAlignment: "left",
479
441
  },
480
- {
481
- id: UniqueID.options.generateID(),
482
- type: "paragraph",
483
- props: {
484
- backgroundColor: "default",
485
- textColor: "default",
486
- textAlignment: "left",
442
+ content: [
443
+ {
444
+ type: "text",
445
+ text: "Paragraph",
446
+ styles: {},
487
447
  },
488
- content: [
489
- {
490
- type: "text",
491
- text: "Paragraph",
492
- styles: {},
493
- },
494
- ],
495
- children: [],
448
+ ],
449
+ children: [],
450
+ },
451
+ {
452
+ id: UniqueID.options.generateID(),
453
+ type: "numberedListItem",
454
+ props: {
455
+ backgroundColor: "default",
456
+ textColor: "default",
457
+ textAlignment: "left",
496
458
  },
497
- {
498
- id: UniqueID.options.generateID(),
499
- type: "numberedListItem",
500
- props: {
501
- backgroundColor: "default",
502
- textColor: "default",
503
- textAlignment: "left",
459
+ content: [
460
+ {
461
+ type: "text",
462
+ text: "Numbered List Item",
463
+ styles: {},
504
464
  },
505
- content: [
506
- {
507
- type: "text",
508
- text: "Numbered List Item",
509
- styles: {},
510
- },
511
- ],
512
- children: [],
465
+ ],
466
+ children: [],
467
+ },
468
+ {
469
+ id: UniqueID.options.generateID(),
470
+ type: "numberedListItem",
471
+ props: {
472
+ backgroundColor: "default",
473
+ textColor: "default",
474
+ textAlignment: "left",
513
475
  },
514
- {
515
- id: UniqueID.options.generateID(),
516
- type: "numberedListItem",
517
- props: {
518
- backgroundColor: "default",
519
- textColor: "default",
520
- textAlignment: "left",
476
+ content: [
477
+ {
478
+ type: "text",
479
+ text: "Numbered List Item",
480
+ styles: {},
521
481
  },
522
- content: [
523
- {
524
- type: "text",
525
- text: "Numbered List Item",
526
- styles: {},
527
- },
528
- ],
529
- children: [],
482
+ ],
483
+ children: [],
484
+ },
485
+ {
486
+ id: UniqueID.options.generateID(),
487
+ type: "numberedListItem",
488
+ props: {
489
+ backgroundColor: "default",
490
+ textColor: "default",
491
+ textAlignment: "left",
530
492
  },
531
- {
532
- id: UniqueID.options.generateID(),
533
- type: "numberedListItem",
534
- props: {
535
- backgroundColor: "default",
536
- textColor: "default",
537
- textAlignment: "left",
493
+ content: [
494
+ {
495
+ type: "text",
496
+ text: "Numbered List Item",
497
+ styles: {},
538
498
  },
539
- content: [
540
- {
541
- type: "text",
542
- text: "Numbered List Item",
543
- styles: {},
499
+ ],
500
+ children: [
501
+ {
502
+ id: UniqueID.options.generateID(),
503
+ type: "numberedListItem",
504
+ props: {
505
+ backgroundColor: "default",
506
+ textColor: "default",
507
+ textAlignment: "left",
544
508
  },
545
- ],
546
- children: [
547
- {
548
- id: UniqueID.options.generateID(),
549
- type: "numberedListItem",
550
- props: {
551
- backgroundColor: "default",
552
- textColor: "default",
553
- textAlignment: "left",
509
+ content: [
510
+ {
511
+ type: "text",
512
+ text: "Numbered List Item",
513
+ styles: {},
554
514
  },
555
- content: [
556
- {
557
- type: "text",
558
- text: "Numbered List Item",
559
- styles: {},
560
- },
561
- ],
562
- children: [],
563
- },
564
- ],
565
- },
566
- {
567
- id: UniqueID.options.generateID(),
568
- type: "bulletListItem",
569
- props: {
570
- backgroundColor: "default",
571
- textColor: "default",
572
- textAlignment: "left",
515
+ ],
516
+ children: [],
573
517
  },
574
- content: [
575
- {
576
- type: "text",
577
- text: "Bullet List Item",
578
- styles: {},
579
- },
580
- ],
581
- children: [],
582
- },
583
- ],
584
- },
585
- {
586
- id: UniqueID.options.generateID(),
587
- type: "bulletListItem",
588
- props: {
589
- backgroundColor: "default",
590
- textColor: "default",
591
- textAlignment: "left",
518
+ ],
592
519
  },
593
- content: [
594
- {
595
- type: "text",
596
- text: "Bullet List Item",
597
- styles: {},
520
+ {
521
+ id: UniqueID.options.generateID(),
522
+ type: "bulletListItem",
523
+ props: {
524
+ backgroundColor: "default",
525
+ textColor: "default",
526
+ textAlignment: "left",
598
527
  },
599
- ],
600
- children: [],
601
- },
602
- ],
603
- },
604
- {
605
- id: UniqueID.options.generateID(),
606
- type: "bulletListItem",
607
- props: {
608
- backgroundColor: "default",
609
- textColor: "default",
610
- textAlignment: "left",
528
+ content: [
529
+ {
530
+ type: "text",
531
+ text: "Bullet List Item",
532
+ styles: {},
533
+ },
534
+ ],
535
+ children: [],
536
+ },
537
+ ],
611
538
  },
612
- content: [
613
- {
614
- type: "text",
615
- text: "Bullet List Item",
616
- styles: {},
539
+ {
540
+ id: UniqueID.options.generateID(),
541
+ type: "bulletListItem",
542
+ props: {
543
+ backgroundColor: "default",
544
+ textColor: "default",
545
+ textAlignment: "left",
617
546
  },
618
- ],
619
- children: [],
547
+ content: [
548
+ {
549
+ type: "text",
550
+ text: "Bullet List Item",
551
+ styles: {},
552
+ },
553
+ ],
554
+ children: [],
555
+ },
556
+ ],
557
+ },
558
+ {
559
+ id: UniqueID.options.generateID(),
560
+ type: "bulletListItem",
561
+ props: {
562
+ backgroundColor: "default",
563
+ textColor: "default",
564
+ textAlignment: "left",
620
565
  },
621
- ];
566
+ content: [
567
+ {
568
+ type: "text",
569
+ text: "Bullet List Item",
570
+ styles: {},
571
+ },
572
+ ],
573
+ children: [],
574
+ },
575
+ ];
622
576
 
623
- // complexHTML = `<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p><span data-text-color="purple"><span data-background-color="green">Paragraph</span></span></p><p>P<strong>ara</strong><em>grap</em>h</p><p>P<u>ara</u><s>grap</s>h</p><ul><li><p>Bullet List Item</p></li><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p></li></ul><p>Paragraph</p><ol><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p><ol><li><p>Numbered List Item</p></li></ol></li></ol><ul><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul>`;
624
- // complexMarkdown = `# Heading 1
625
- //
626
- // ## Heading 2
627
- //
628
- // ### Heading 3
629
- //
630
- // Paragraph
631
- //
632
- // P**ara***grap*h
633
- //
634
- // P*ara*~~grap~~h
635
- //
636
- // * Bullet List Item
637
- //
638
- // * Bullet List Item
639
- //
640
- // * Bullet List Item
641
- //
642
- // * Bullet List Item
643
- //
644
- // Paragraph
645
- //
646
- // 1. Numbered List Item
647
- //
648
- // 2. Numbered List Item
649
- //
650
- // 3. Numbered List Item
651
- //
652
- // 1. Numbered List Item
653
- //
654
- // * Bullet List Item
655
- //
656
- // * Bullet List Item
657
- //
658
- // * Bullet List Item
659
- // `;
577
+ function removeInlineContentClass(html: string) {
578
+ return html.replace(/ class="_inlineContent_([a-zA-Z0-9_-])+"/g, "");
579
+ }
580
+
581
+ beforeEach(() => {
582
+ (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
583
+
584
+ editor = new BlockNoteEditor();
660
585
  });
661
586
 
662
587
  afterEach(() => {
@@ -668,25 +593,34 @@ afterEach(() => {
668
593
 
669
594
  describe("Non-Nested Block/HTML/Markdown Conversions", () => {
670
595
  it("Convert non-nested blocks to HTML", async () => {
671
- const output = await editor.blocksToHTML(nonNestedBlocks);
596
+ const output = await editor.blocksToHTML(getNonNestedBlocks());
672
597
 
673
598
  expect(removeInlineContentClass(output)).toMatchSnapshot();
674
599
  });
675
600
 
676
601
  it("Convert non-nested blocks to Markdown", async () => {
677
- const output = await editor.blocksToMarkdown(nonNestedBlocks);
602
+ const output = await editor.blocksToMarkdown(getNonNestedBlocks());
678
603
 
679
604
  expect(output).toMatchSnapshot();
680
605
  });
681
606
 
682
607
  it("Convert non-nested HTML to blocks", async () => {
683
- const output = await editor.HTMLToBlocks(nonNestedHTML);
608
+ const html = `<h1>Heading</h1><p>Paragraph</p><ul><li><p>Bullet List Item</p></li></ul><ol><li><p>Numbered List Item</p></li></ol>`;
609
+ const output = await editor.HTMLToBlocks(html);
684
610
 
685
611
  expect(output).toMatchSnapshot();
686
612
  });
687
613
 
688
614
  it("Convert non-nested Markdown to blocks", async () => {
689
- const output = await editor.markdownToBlocks(nonNestedMarkdown);
615
+ const markdown = `# Heading
616
+
617
+ Paragraph
618
+
619
+ * Bullet List Item
620
+
621
+ 1. Numbered List Item
622
+ `;
623
+ const output = await editor.markdownToBlocks(markdown);
690
624
 
691
625
  expect(output).toMatchSnapshot();
692
626
  });
@@ -694,25 +628,34 @@ describe("Non-Nested Block/HTML/Markdown Conversions", () => {
694
628
 
695
629
  describe("Nested Block/HTML/Markdown Conversions", () => {
696
630
  it("Convert nested blocks to HTML", async () => {
697
- const output = await editor.blocksToHTML(nestedBlocks);
631
+ const output = await editor.blocksToHTML(getNestedBlocks());
698
632
 
699
633
  expect(removeInlineContentClass(output)).toMatchSnapshot();
700
634
  });
701
635
 
702
636
  it("Convert nested blocks to Markdown", async () => {
703
- const output = await editor.blocksToMarkdown(nestedBlocks);
637
+ const output = await editor.blocksToMarkdown(getNestedBlocks());
704
638
 
705
639
  expect(output).toMatchSnapshot();
706
640
  });
707
641
  // // Failing due to nested block parsing bug.
708
642
  // it("Convert nested HTML to blocks", async () => {
709
- // const output = await editor.HTMLToBlocks(nestedHTML);
643
+ // const html = `<h1>Heading</h1><p>Paragraph</p><ul><li><p>Bullet List Item</p><ol><li><p>Numbered List Item</p></li></ol></li></ul>`;
644
+ // const output = await editor.HTMLToBlocks(html);
710
645
  //
711
646
  // expect(output).toMatchSnapshot();
712
647
  // });
713
648
  // // Failing due to nested block parsing bug.
714
649
  // it("Convert nested Markdown to blocks", async () => {
715
- // const output = await editor.markdownToBlocks(nestedMarkdown);
650
+ // const markdown = `# Heading
651
+ //
652
+ // Paragraph
653
+ //
654
+ // * Bullet List Item
655
+ //
656
+ // 1. Numbered List Item
657
+ // `;
658
+ // const output = await editor.markdownToBlocks(markdown);
716
659
  //
717
660
  // expect(output).toMatchSnapshot();
718
661
  // });
@@ -720,25 +663,27 @@ describe("Nested Block/HTML/Markdown Conversions", () => {
720
663
 
721
664
  describe("Styled Block/HTML/Markdown Conversions", () => {
722
665
  it("Convert styled blocks to HTML", async () => {
723
- const output = await editor.blocksToHTML(styledBlocks);
666
+ const output = await editor.blocksToHTML(getStyledBlocks());
724
667
 
725
668
  expect(removeInlineContentClass(output)).toMatchSnapshot();
726
669
  });
727
670
 
728
671
  it("Convert styled blocks to Markdown", async () => {
729
- const output = await editor.blocksToMarkdown(styledBlocks);
672
+ const output = await editor.blocksToMarkdown(getStyledBlocks());
730
673
 
731
674
  expect(output).toMatchSnapshot();
732
675
  });
733
676
 
734
677
  it("Convert styled HTML to blocks", async () => {
735
- const output = await editor.HTMLToBlocks(styledHTML);
678
+ const html = `<p><strong>Bold</strong><em>Italic</em><u>Underline</u><s>Strikethrough</s><span data-text-color="red">TextColor</span><span data-background-color="red">BackgroundColor</span><strong><em>Multiple</em></strong></p>`;
679
+ const output = await editor.HTMLToBlocks(html);
736
680
 
737
681
  expect(output).toMatchSnapshot();
738
682
  });
739
683
 
740
684
  it("Convert styled Markdown to blocks", async () => {
741
- const output = await editor.markdownToBlocks(styledMarkdown);
685
+ const markdown = `**Bold***Italic*Underline~~Strikethrough~~TextColorBackgroundColor***Multiple***`;
686
+ const output = await editor.markdownToBlocks(markdown);
742
687
 
743
688
  expect(output).toMatchSnapshot();
744
689
  });
@@ -746,25 +691,62 @@ describe("Styled Block/HTML/Markdown Conversions", () => {
746
691
 
747
692
  describe("Complex Block/HTML/Markdown Conversions", () => {
748
693
  it("Convert complex blocks to HTML", async () => {
749
- const output = await editor.blocksToHTML(complexBlocks);
694
+ const output = await editor.blocksToHTML(getComplexBlocks());
750
695
 
751
696
  expect(removeInlineContentClass(output)).toMatchSnapshot();
752
697
  });
753
698
 
754
699
  it("Convert complex blocks to Markdown", async () => {
755
- const output = await editor.blocksToMarkdown(complexBlocks);
700
+ const output = await editor.blocksToMarkdown(getComplexBlocks());
756
701
 
757
702
  expect(output).toMatchSnapshot();
758
703
  });
759
704
  // // Failing due to nested block parsing bug.
760
705
  // it("Convert complex HTML to blocks", async () => {
761
- // const output = await editor.HTMLToBlocks(complexHTML);
706
+ // const html = `<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p><span data-text-color="purple"><span data-background-color="green">Paragraph</span></span></p><p>P<strong>ara</strong><em>grap</em>h</p><p>P<u>ara</u><s>grap</s>h</p><ul><li><p>Bullet List Item</p></li><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p></li></ul><p>Paragraph</p><ol><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p><ol><li><p>Numbered List Item</p></li></ol></li></ol><ul><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul>`;
707
+ // const output = await editor.HTMLToBlocks(html);
762
708
  //
763
709
  // expect(output).toMatchSnapshot();
764
710
  // });
765
711
  // // Failing due to nested block parsing bug.
766
712
  // it("Convert complex Markdown to blocks", async () => {
767
- // const output = await editor.markdownToBlocks(complexMarkdown);
713
+ // const markdown = `# Heading 1
714
+ //
715
+ // ## Heading 2
716
+ //
717
+ // ### Heading 3
718
+ //
719
+ // Paragraph
720
+ //
721
+ // P**ara***grap*h
722
+ //
723
+ // P*ara*~~grap~~h
724
+ //
725
+ // * Bullet List Item
726
+ //
727
+ // * Bullet List Item
728
+ //
729
+ // * Bullet List Item
730
+ //
731
+ // * Bullet List Item
732
+ //
733
+ // Paragraph
734
+ //
735
+ // 1. Numbered List Item
736
+ //
737
+ // 2. Numbered List Item
738
+ //
739
+ // 3. Numbered List Item
740
+ //
741
+ // 1. Numbered List Item
742
+ //
743
+ // * Bullet List Item
744
+ //
745
+ // * Bullet List Item
746
+ //
747
+ // * Bullet List Item
748
+ // `;
749
+ // const output = await editor.markdownToBlocks(markdown);
768
750
  //
769
751
  // expect(output).toMatchSnapshot();
770
752
  // });