Skip to content

fix: set numbered list data-index on export to html #1174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 30, 2024
Merged

fix: set numbered list data-index on export to html #1174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/core/src/api/exporters/html/__snapshots__/lists/basic/internal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
<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>
2 changes: 1 addition & 1 deletion packages/core/src/api/exporters/html/__snapshots__/lists/nested/internal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
<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>
9 changes: 2 additions & 7 deletions packages/core/src/api/exporters/html/internalHTMLSerializer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,8 @@ export const createInternalHTMLSerializer = <
blocks: PartialBlock<BSchema, I, S>[],
options: { document?: Document }
) => {
return serializeBlocksInternalHTML(
editor,
blocks,
serializer,
false,
options
).outerHTML;
return serializeBlocksInternalHTML(editor, blocks, serializer, options)
.outerHTML;
},
};
};
35 changes: 20 additions & 15 deletions packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export function serializeInlineContentInternalHTML<
editor: BlockNoteEditor<any, I, S>,
blockContent: PartialBlock<BSchema, I, S>["content"],
serializer: DOMSerializer,
_toExternalHTML: boolean, // TODO, externalHTML for IC
options?: { document?: Document }
) {
let nodes: any;
Expand Down Expand Up @@ -67,7 +66,7 @@ function serializeBlock<
editor: BlockNoteEditor<BSchema, I, S>,
block: PartialBlock<BSchema, I, S>,
serializer: DOMSerializer,
toExternalHTML: boolean,
listIndex: number,
options?: { document?: Document }
) {
const BC_NODE = editor.pmSchema.nodes["blockContainer"];
Expand All @@ -94,16 +93,23 @@ function serializeBlock<
};

const impl = editor.blockImplementations[block.type as any].implementation;
const ret = toExternalHTML
? impl.toExternalHTML({ ...block, props } as any, editor as any)
: impl.toInternalHTML({ ...block, props } as any, editor as any);
const ret = impl.toInternalHTML({ ...block, props } as any, editor as any);

if (block.type === "numberedListItem") {
// This is a workaround to make sure there's a list index set.
// Normally, this is set on the internal prosemirror nodes by the NumberedListIndexingPlugin,
// but:
// - (a) this information is not available on the Blocks passed to the serializer. (we only have access to BlockNote Blocks)
// - (b) the NumberedListIndexingPlugin might not even have run, because we can manually call blocksToFullHTML
// with blocks that are not part of the active document
ret.dom.setAttribute("data-index", listIndex.toString());
}

if (ret.contentDOM && block.content) {
const ic = serializeInlineContentInternalHTML(
editor,
block.content as any, // TODO
serializer,
toExternalHTML,
options
);
ret.contentDOM.appendChild(ic);
Expand All @@ -113,13 +119,7 @@ function serializeBlock<

if (block.children && block.children.length > 0) {
bc.contentDOM?.appendChild(
serializeBlocksInternalHTML(
editor,
block.children,
serializer,
toExternalHTML,
options
)
serializeBlocksInternalHTML(editor, block.children, serializer, options)
);
}
return bc.dom;
Expand All @@ -133,7 +133,6 @@ export const serializeBlocksInternalHTML = <
editor: BlockNoteEditor<BSchema, I, S>,
blocks: PartialBlock<BSchema, I, S>[],
serializer: DOMSerializer,
toExternalHTML: boolean,
options?: { document?: Document }
) => {
const BG_NODE = editor.pmSchema.nodes["blockGroup"];
Expand All @@ -143,12 +142,18 @@ export const serializeBlocksInternalHTML = <
contentDOM?: HTMLElement;
};

let listIndex = 0;
for (const block of blocks) {
if (block.type === "numberedListItem") {
listIndex++;
} else {
listIndex = 0;
}
const blockDOM = serializeBlock(
editor,
block,
serializer,
toExternalHTML,
listIndex,
options
);
bg.contentDOM!.appendChild(blockDOM);
Expand Down
Loading