Skip to content

Commit 7afa72a

Browse files
YousefEDYousefED
authored
feat: add data-nesting-level to HTML export (#2329)
1 parent eb48e3e commit 7afa72a

18 files changed

Lines changed: 70 additions & 287 deletions

File tree

‎packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ function serializeBlock<
170170
serializer: DOMSerializer,
171171
orderedListItemBlockTypes: Set<string>,
172172
unorderedListItemBlockTypes: Set<string>,
173+
nestingLevel: number,
173174
options?: { document?: Document },
174175
) {
175176
const doc = options?.document ?? document;
@@ -236,9 +237,21 @@ function serializeBlock<
236237
}
237238

238239
addAttributesAndRemoveClasses(ret.dom.firstChild! as HTMLElement);
240+
if (nestingLevel > 0) {
241+
(ret.dom.firstChild! as HTMLElement).setAttribute(
242+
"data-nesting-level",
243+
nestingLevel.toString(),
244+
);
245+
}
239246
elementFragment.append(...Array.from(ret.dom.childNodes));
240247
} else {
241248
elementFragment.append(ret.dom);
249+
if (nestingLevel > 0) {
250+
(ret.dom as HTMLElement).setAttribute(
251+
"data-nesting-level",
252+
nestingLevel.toString(),
253+
);
254+
}
242255
}
243256

244257
if (ret.contentDOM && block.content) {
@@ -287,6 +300,7 @@ function serializeBlock<
287300
serializer,
288301
orderedListItemBlockTypes,
289302
unorderedListItemBlockTypes,
303+
nestingLevel + 1,
290304
options,
291305
);
292306
if (
@@ -323,6 +337,7 @@ const serializeBlocksToFragment = <
323337
serializer: DOMSerializer,
324338
orderedListItemBlockTypes: Set<string>,
325339
unorderedListItemBlockTypes: Set<string>,
340+
nestingLevel = 0,
326341
options?: { document?: Document },
327342
) => {
328343
for (const block of blocks) {
@@ -333,6 +348,7 @@ const serializeBlocksToFragment = <
333348
serializer,
334349
orderedListItemBlockTypes,
335350
unorderedListItemBlockTypes,
351+
nestingLevel,
336352
options,
337353
);
338354
}
@@ -360,6 +376,7 @@ export const serializeBlocksExternalHTML = <
360376
serializer,
361377
orderedListItemBlockTypes,
362378
unorderedListItemBlockTypes,
379+
0,
363380
options,
364381
);
365382
return fragment;

‎packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`Test ServerBlockNoteEditor > converts to HTML (blocksToFullHTML) 1`] = `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="heading" data-background-color="blue" data-text-color="yellow" data-text-alignment="right" data-level="2"><h2 class="bn-inline-content"><strong><u>Heading </u></strong><em><s>2</s></em></h2></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="paragraph" data-background-color="red"><p class="bn-inline-content">Paragraph</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">list item</p></div></div></div></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="4"><div class="bn-block" data-node-type="blockContainer" data-id="4"><div class="bn-block-content" data-content-type="image" data-name="Example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper" style="position: relative; width: 256px;"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="5"><div class="bn-block" data-node-type="blockContainer" data-id="5"><div class="bn-block-content" data-content-type="image" data-name="Example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper" style="position: relative;"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg></div><p class="bn-file-name">Example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>"`;
44

5-
exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 1`] = `"<h2 style="background-color: rgb(221, 235, 241); color: rgb(223, 171, 1); text-align: right;" data-background-color="blue" data-text-color="yellow" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p style="background-color: rgb(251, 228, 228);" data-background-color="red">Paragraph</p><ul><li><p class="bn-inline-content">list item</p></li></ul><figure data-name="Example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><img src="exampleURL" alt="Example" width="256"><figcaption>Caption</figcaption></figure><div data-name="Example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><a href="exampleURL">Example</a><p>Caption</p></div>"`;
5+
exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 1`] = `"<h2 style="background-color: rgb(221, 235, 241); color: rgb(223, 171, 1); text-align: right;" data-background-color="blue" data-text-color="yellow" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p style="background-color: rgb(251, 228, 228);" data-background-color="red" data-nesting-level="1">Paragraph</p><ul><li data-nesting-level="1"><p class="bn-inline-content">list item</p></li></ul><figure data-name="Example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><img src="exampleURL" alt="Example" width="256"><figcaption>Caption</figcaption></figure><div data-name="Example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><a href="exampleURL">Example</a><p>Caption</p></div>"`;
66
77
exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 2`] = `
88
[

‎packages/xl-multi-column/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,8 @@
6464
"devDependencies": {
6565
"@types/react": "^19.2.2",
6666
"@types/react-dom": "^19.2.2",
67-
"@vitest/ui": "^2.1.9",
6867
"eslint": "^8.57.1",
69-
"jsdom": "^21.1.2",
68+
"jsdom": "^25.0.1",
7069
"react": "^19.2.1",
7170
"react-dom": "^19.2.1",
7271
"rimraf": "^5.0.10",

‎packages/xl-multi-column/src/test/conversions/__snapshots__/multi-column/undefined/external.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div class="bn-block-column-list" data-node-type="columnList" data-id="1" style="display: flex;"><div class="bn-block-column" data-node-type="column" data-id="2" data-width="1" style="flex-grow: 1;"><p>Column Paragraph 0</p><p>Column Paragraph 1</p></div><div class="bn-block-column" data-node-type="column" data-id="5" data-width="1" style="flex-grow: 1;"><p>Column Paragraph 2</p><p>Column Paragraph 3</p></div></div>
1+
<div class="bn-block-column-list" data-node-type="columnList" data-id="1" style="display: flex;"><div class="bn-block-column" data-node-type="column" data-id="2" data-width="1" style="flex-grow: 1;" data-nesting-level="1"><p data-nesting-level="2">Column Paragraph 0</p><p data-nesting-level="2">Column Paragraph 1</p></div><div class="bn-block-column" data-node-type="column" data-id="5" data-width="1" style="flex-grow: 1;" data-nesting-level="1"><p data-nesting-level="2">Column Paragraph 2</p><p data-nesting-level="2">Column Paragraph 3</p></div></div>

0 commit comments

Comments
 (0)