Skip to content

Commit ea372c9

Browse files
authored
fix numbered list data-index export (#1174)
1 parent a5e82dd commit ea372c9

File tree

4 files changed

+24
-24
lines changed

4 files changed

+24
-24
lines changed
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
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="bulletListItem"><p class="bn-inline-content">Bullet List Item 1</p></div></div></div><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="bulletListItem"><p class="bn-inline-content">Bullet List Item 2</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="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 1</p></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="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 2</p></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="checkListItem"><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="checkListItem" data-checked="true"><input type="checkbox" checked=""><p class="bn-inline-content">Check List Item 2</p></div></div></div></div>
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="bulletListItem"><p class="bn-inline-content">Bullet List Item 1</p></div></div></div><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="bulletListItem"><p class="bn-inline-content">Bullet List Item 2</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="numberedListItem" data-index="1"><p class="bn-inline-content">Numbered List Item 1</p></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="numberedListItem" data-index="2"><p class="bn-inline-content">Numbered List Item 2</p></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="checkListItem"><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="checkListItem" data-checked="true"><input type="checkbox" checked=""><p class="bn-inline-content">Check List Item 2</p></div></div></div></div>
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
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="bulletListItem"><p class="bn-inline-content">Bullet List Item 1</p></div></div></div><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="bulletListItem"><p class="bn-inline-content">Bullet List Item 2</p></div><div class="bn-block-group" data-node-type="blockGroup"><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="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 1</p></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="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 2</p></div><div class="bn-block-group" data-node-type="blockGroup"><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="checkListItem"><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="checkListItem" data-checked="true"><input type="checkbox" checked=""><p class="bn-inline-content">Check List Item 2</p></div></div></div></div></div></div></div></div></div></div>
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="bulletListItem"><p class="bn-inline-content">Bullet List Item 1</p></div></div></div><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="bulletListItem"><p class="bn-inline-content">Bullet List Item 2</p></div><div class="bn-block-group" data-node-type="blockGroup"><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="numberedListItem" data-index="1"><p class="bn-inline-content">Numbered List Item 1</p></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="numberedListItem" data-index="2"><p class="bn-inline-content">Numbered List Item 2</p></div><div class="bn-block-group" data-node-type="blockGroup"><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="checkListItem"><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="checkListItem" data-checked="true"><input type="checkbox" checked=""><p class="bn-inline-content">Check List Item 2</p></div></div></div></div></div></div></div></div></div></div>

packages/core/src/api/exporters/html/internalHTMLSerializer.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,8 @@ export const createInternalHTMLSerializer = <
3131
blocks: PartialBlock<BSchema, I, S>[],
3232
options: { document?: Document }
3333
) => {
34-
return serializeBlocksInternalHTML(
35-
editor,
36-
blocks,
37-
serializer,
38-
false,
39-
options
40-
).outerHTML;
34+
return serializeBlocksInternalHTML(editor, blocks, serializer, options)
35+
.outerHTML;
4136
},
4237
};
4338
};

packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

+20-15
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export function serializeInlineContentInternalHTML<
2121
editor: BlockNoteEditor<any, I, S>,
2222
blockContent: PartialBlock<BSchema, I, S>["content"],
2323
serializer: DOMSerializer,
24-
_toExternalHTML: boolean, // TODO, externalHTML for IC
2524
options?: { document?: Document }
2625
) {
2726
let nodes: any;
@@ -67,7 +66,7 @@ function serializeBlock<
6766
editor: BlockNoteEditor<BSchema, I, S>,
6867
block: PartialBlock<BSchema, I, S>,
6968
serializer: DOMSerializer,
70-
toExternalHTML: boolean,
69+
listIndex: number,
7170
options?: { document?: Document }
7271
) {
7372
const BC_NODE = editor.pmSchema.nodes["blockContainer"];
@@ -94,16 +93,23 @@ function serializeBlock<
9493
};
9594

9695
const impl = editor.blockImplementations[block.type as any].implementation;
97-
const ret = toExternalHTML
98-
? impl.toExternalHTML({ ...block, props } as any, editor as any)
99-
: impl.toInternalHTML({ ...block, props } as any, editor as any);
96+
const ret = impl.toInternalHTML({ ...block, props } as any, editor as any);
97+
98+
if (block.type === "numberedListItem") {
99+
// This is a workaround to make sure there's a list index set.
100+
// Normally, this is set on the internal prosemirror nodes by the NumberedListIndexingPlugin,
101+
// but:
102+
// - (a) this information is not available on the Blocks passed to the serializer. (we only have access to BlockNote Blocks)
103+
// - (b) the NumberedListIndexingPlugin might not even have run, because we can manually call blocksToFullHTML
104+
// with blocks that are not part of the active document
105+
ret.dom.setAttribute("data-index", listIndex.toString());
106+
}
100107

101108
if (ret.contentDOM && block.content) {
102109
const ic = serializeInlineContentInternalHTML(
103110
editor,
104111
block.content as any, // TODO
105112
serializer,
106-
toExternalHTML,
107113
options
108114
);
109115
ret.contentDOM.appendChild(ic);
@@ -113,13 +119,7 @@ function serializeBlock<
113119

114120
if (block.children && block.children.length > 0) {
115121
bc.contentDOM?.appendChild(
116-
serializeBlocksInternalHTML(
117-
editor,
118-
block.children,
119-
serializer,
120-
toExternalHTML,
121-
options
122-
)
122+
serializeBlocksInternalHTML(editor, block.children, serializer, options)
123123
);
124124
}
125125
return bc.dom;
@@ -133,7 +133,6 @@ export const serializeBlocksInternalHTML = <
133133
editor: BlockNoteEditor<BSchema, I, S>,
134134
blocks: PartialBlock<BSchema, I, S>[],
135135
serializer: DOMSerializer,
136-
toExternalHTML: boolean,
137136
options?: { document?: Document }
138137
) => {
139138
const BG_NODE = editor.pmSchema.nodes["blockGroup"];
@@ -143,12 +142,18 @@ export const serializeBlocksInternalHTML = <
143142
contentDOM?: HTMLElement;
144143
};
145144

145+
let listIndex = 0;
146146
for (const block of blocks) {
147+
if (block.type === "numberedListItem") {
148+
listIndex++;
149+
} else {
150+
listIndex = 0;
151+
}
147152
const blockDOM = serializeBlock(
148153
editor,
149154
block,
150155
serializer,
151-
toExternalHTML,
156+
listIndex,
152157
options
153158
);
154159
bg.contentDOM!.appendChild(blockDOM);

0 commit comments

Comments
 (0)