Skip to content

Commit e5252db

Browse files
matthewlipskimatthewlipski
committed
Changed getListItemContent 
1 parent 35f620e commit e5252db

11 files changed

+146
-262
lines changed

‎packages/core/src/blocks/ListItemBlockContent/getListItemContent.ts

Lines changed: 32 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import { DOMParser, Fragment, Schema } from "prosemirror-model";
22

33
/**
4-
* This function is used to parse the content of a list item external HTML node.
4+
* This function is used to parse the content of a list item external HTML
5+
* node. Because the HTML spec supports having block-level elements in `li`
6+
* elements, but BlockNote only supports inline content within list items, we
7+
* merge the inline content from all elements within the `li` element.
58
*
6-
* Due to a change in how prosemirror-model handles parsing elements, we have additional flexibility in how we can "fit" content into a list item.
9+
* Ideally, we would instead parse any block-level elements within the `li` as
10+
* nested blocks of the list item. In fact, this is what we were previously
11+
* doing, see:
12+
* https://github.com/TypeCellOS/BlockNote/pull/1661
713
*
8-
* We've decided to take an approach that is similar to Notion. The core rules of the algorithm are:
14+
* However, this solution failed edge cases, namely when multiple `li` elements
15+
* with multiple block-level elements would be consecutively parsed. An example
16+
* case of this can be found here:
17+
* `tests/src/unit/core/formatConversion/parse/multipleQuoteListItems.json`
918
*
10-
* - If the first child of an `li` has ONLY text content, take the text content, and flatten it into the list item. Subsequent siblings are carried over as is, as children of the list item.
11-
* - e.g. `<li><h1>Hello</h1><p>World</p></li> -> <li>Hello<blockGroup><blockContainer><p>World</p></blockContainer></blockGroup></li>`
12-
* - Else, take the content and insert it as children instead.
13-
* - e.g. `<li><img src="url" /></li> -> <li><p></p><blockGroup><blockContainer><img src="url" /></blockContainer></blockGroup></li>`
14-
*
15-
* This ensures that a list item's content is always valid ProseMirror content. Smoothing over differences between how external HTML may be rendered, and how ProseMirror expects content to be structured.
19+
* It turns out that fixing these edge cases requires a different approach, and
20+
* a detailed write-up regarding this can be found here:
21+
* https://linear.app/blocknote/issue/ee0c4bde-341f-4773-8694-336e65e4a686
1622
*/
1723
export function getListItemContent(
1824
/**
@@ -23,30 +29,17 @@ export function getListItemContent(
2329
* The schema to use for parsing.
2430
*/
2531
schema: Schema,
26-
/**
27-
* The name of the list item node.
28-
*/
29-
name: string,
3032
): Fragment {
31-
/**
32-
* To actually implement this algorithm, we need to leverage ProseMirror's "fitting" algorithm.
33-
* Where, if content is parsed which doesn't fit into the current node, it will be moved into the parent node.
34-
*
35-
* This allows us to parse multiple pieces of content from within the list item (even though it normally would not match the list item's schema) and "throw" the excess content into the list item's children.
36-
*
37-
* The expected return value is a `Fragment` which contains the list item's content as the first element, and the children wrapped in a blockGroup node. Like so:
38-
* ```
39-
* Fragment<[Node<Text>, Node<BlockGroup<Node<BlockContainer<any>>>>]>
40-
* ```
41-
*/
4233
const parser = DOMParser.fromSchema(schema);
4334

44-
// TODO: This will be unnecessary in the future: https://github.com/ProseMirror/prosemirror-model/commit/166188d4f9db96eb86fb7de62e72049c86c9dd79
35+
// TODO: This will be unnecessary in the future:
36+
// https://github.com/ProseMirror/prosemirror-model/commit/166188d4f9db96eb86fb7de62e72049c86c9dd79
4537
const node = _node as HTMLElement;
4638

47-
// Move the `li` element's content into a new `div` element
48-
// This is a hacky workaround to not re-trigger list item parsing,
49-
// when we are looking to understand what the list item's content actually is, in terms of the schema.
39+
// Move the `li` element's content into a new `div` element. This is a hacky
40+
// workaround to not re-trigger list item parsing, when we are looking to
41+
// understand what the list item's content actually is, in terms of the
42+
// schema.
5043
const clonedNodeDiv = document.createElement("div");
5144
// Mark the `div` element as a `blockGroup` to make the parsing easier.
5245
clonedNodeDiv.setAttribute("data-node-type", "blockGroup");
@@ -55,61 +48,21 @@ export function getListItemContent(
5548
clonedNodeDiv.appendChild(child.cloneNode(true));
5649
}
5750

58-
// Parses children of the `li` element into a `blockGroup` with `blockContainer` node children
59-
// This is the structure of list item children, so parsing into this structure allows for
60-
// easy separation of list item content from child list item content.
61-
let blockGroupNode = parser.parse(clonedNodeDiv, {
51+
// Parses children of the `li` element into a `blockGroup` with
52+
// `blockContainer` node children.
53+
const blockGroupNode = parser.parse(clonedNodeDiv, {
6254
topNode: schema.nodes.blockGroup.create(),
6355
});
6456

65-
// There is an edge case where a list item's content may contain a `<input>` element.
66-
// Causing it to be recognized as a `checkListItem`.
67-
// We want to skip this, and just parse the list item's content as is.
68-
if (blockGroupNode.firstChild?.firstChild?.type.name === "checkListItem") {
69-
// We skip the first child, by cutting it out of the `blockGroup` node.
70-
// and continuing with the rest of the algorithm.
71-
blockGroupNode = blockGroupNode.copy(
72-
blockGroupNode.content.cut(
73-
blockGroupNode.firstChild.firstChild.nodeSize + 2,
74-
),
75-
);
76-
}
77-
78-
// Structure above is `blockGroup<blockContainer<any>[]>`
79-
// We want to extract the first `blockContainer` node's content, and see if it is a text block.
80-
const listItemsFirstChild = blockGroupNode.firstChild?.firstChild;
81-
82-
// If the first node is not a text block, then it's first child is not compatible with the list item node.
83-
if (!listItemsFirstChild?.isTextblock) {
84-
// So, we do not try inserting anything into the list item, and instead return anything we found as children for the list item.
85-
return Fragment.from(blockGroupNode);
86-
}
87-
88-
// If it is a text block, then we know it only contains text content.
89-
// So, we extract it, and insert its content into the `listItemNode`.
90-
// The remaining nodes in the `blockGroup` stay in-place.
91-
const listItemNode = schema.nodes[name].create(
92-
{},
93-
listItemsFirstChild.content,
57+
// Merges the inline content of all `blockContainer` nodes parsed.
58+
let listItemMergedContent = Fragment.from(
59+
blockGroupNode.firstChild?.firstChild?.content,
9460
);
95-
96-
// We have `blockGroup<listItemsFirstChild, ...blockContainer<any>[]>`
97-
// We want to extract out the rest of the nodes as `<...blockContainer<any>[]>`
98-
const remainingListItemChildren = blockGroupNode.content.cut(
99-
// +2 for the `blockGroup` node's start and end markers
100-
listItemsFirstChild.nodeSize + 2,
101-
);
102-
const hasRemainingListItemChildren = remainingListItemChildren.size > 0;
103-
104-
if (hasRemainingListItemChildren) {
105-
// Copy the remaining list item children back into the `blockGroup` node.
106-
// This will make it back into: `blockGroup<...blockContainer<any>[]>`
107-
const listItemsChildren = blockGroupNode.copy(remainingListItemChildren);
108-
109-
// Return the `listItem` node's content, then add the parsed children after to be lifted out by ProseMirror "fitting" algorithm.
110-
return listItemNode.content.addToEnd(listItemsChildren);
61+
for (let i = 1; i < blockGroupNode.childCount; i++) {
62+
listItemMergedContent = listItemMergedContent
63+
.append(Fragment.from(schema.nodes["hardBreak"].create()))
64+
.append(blockGroupNode.child(i).firstChild!.content);
11165
}
11266

113-
// Otherwise, just return the `listItem` node's content.
114-
return listItemNode.content;
67+
return listItemMergedContent;
11568
}

‎tests/src/unit/core/formatConversion/parse/__snapshots__/html/headingParagraphListItem.json

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,11 @@
11
[
22
{
3-
"children": [
4-
{
5-
"children": [],
6-
"content": [
7-
{
8-
"styles": {},
9-
"text": "Bullet List Item",
10-
"type": "text",
11-
},
12-
],
13-
"id": "2",
14-
"props": {
15-
"backgroundColor": "default",
16-
"textAlignment": "left",
17-
"textColor": "default",
18-
},
19-
"type": "paragraph",
20-
},
21-
],
3+
"children": [],
224
"content": [
235
{
246
"styles": {},
25-
"text": "Bullet List Item",
7+
"text": "Bullet List Item
8+
Bullet List Item",
269
"type": "text",
2710
},
2811
],
@@ -43,7 +26,7 @@
4326
"type": "text",
4427
},
4528
],
46-
"id": "3",
29+
"id": "2",
4730
"props": {
4831
"backgroundColor": "default",
4932
"textAlignment": "left",

‎tests/src/unit/core/formatConversion/parse/__snapshots__/html/imageWithParagraphListItem.json

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,14 @@
11
[
22
{
3-
"children": [
4-
{
5-
"children": [],
6-
"content": undefined,
7-
"id": "2",
8-
"props": {
9-
"backgroundColor": "default",
10-
"caption": "",
11-
"name": "",
12-
"showPreview": true,
13-
"textAlignment": "left",
14-
"url": "http://localhost:3000/exampleURL",
15-
},
16-
"type": "image",
17-
},
3+
"children": [],
4+
"content": [
185
{
19-
"children": [],
20-
"content": [
21-
{
22-
"styles": {},
23-
"text": "Bullet List Item",
24-
"type": "text",
25-
},
26-
],
27-
"id": "3",
28-
"props": {
29-
"backgroundColor": "default",
30-
"textAlignment": "left",
31-
"textColor": "default",
32-
},
33-
"type": "paragraph",
6+
"styles": {},
7+
"text": "
8+
Bullet List Item",
9+
"type": "text",
3410
},
3511
],
36-
"content": [],
3712
"id": "1",
3813
"props": {
3914
"backgroundColor": "default",
@@ -51,7 +26,7 @@
5126
"type": "text",
5227
},
5328
],
54-
"id": "4",
29+
"id": "2",
5530
"props": {
5631
"backgroundColor": "default",
5732
"textAlignment": "left",

‎tests/src/unit/core/formatConversion/parse/__snapshots__/html/imageWithTextListItem.json

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,14 @@
11
[
22
{
3-
"children": [
4-
{
5-
"children": [],
6-
"content": undefined,
7-
"id": "2",
8-
"props": {
9-
"backgroundColor": "default",
10-
"caption": "",
11-
"name": "",
12-
"showPreview": true,
13-
"textAlignment": "left",
14-
"url": "http://localhost:3000/exampleURL",
15-
},
16-
"type": "image",
17-
},
3+
"children": [],
4+
"content": [
185
{
19-
"children": [],
20-
"content": [
21-
{
22-
"styles": {},
23-
"text": " Bullet List Item",
24-
"type": "text",
25-
},
26-
],
27-
"id": "3",
28-
"props": {
29-
"backgroundColor": "default",
30-
"textAlignment": "left",
31-
"textColor": "default",
32-
},
33-
"type": "paragraph",
6+
"styles": {},
7+
"text": "
8+
Bullet List Item",
9+
"type": "text",
3410
},
3511
],
36-
"content": [],
3712
"id": "1",
3813
"props": {
3914
"backgroundColor": "default",
@@ -51,7 +26,7 @@
5126
"type": "text",
5227
},
5328
],
54-
"id": "4",
29+
"id": "2",
5530
"props": {
5631
"backgroundColor": "default",
5732
"textAlignment": "left",

‎tests/src/unit/core/formatConversion/parse/__snapshots__/html/multipleParagraphListItem.json

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,11 @@
11
[
22
{
3-
"children": [
4-
{
5-
"children": [],
6-
"content": [
7-
{
8-
"styles": {},
9-
"text": "Bullet List Item",
10-
"type": "text",
11-
},
12-
],
13-
"id": "2",
14-
"props": {
15-
"backgroundColor": "default",
16-
"textAlignment": "left",
17-
"textColor": "default",
18-
},
19-
"type": "paragraph",
20-
},
21-
],
3+
"children": [],
224
"content": [
235
{
246
"styles": {},
25-
"text": "Bullet List Item",
7+
"text": "Bullet List Item
8+
Bullet List Item",
269
"type": "text",
2710
},
2811
],
@@ -43,7 +26,7 @@
4326
"type": "text",
4427
},
4528
],
46-
"id": "3",
29+
"id": "2",
4730
"props": {
4831
"backgroundColor": "default",
4932
"textAlignment": "left",

‎tests/src/unit/core/formatConversion/parse/__snapshots__/html/multipleQuoteListItems.json

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
[
2+
{
3+
"children": [],
4+
"content": [
5+
{
6+
"styles": {},
7+
"text": "Bullet List Item 1
8+
Quote 1",
9+
"type": "text",
10+
},
11+
],
12+
"id": "1",
13+
"props": {
14+
"backgroundColor": "default",
15+
"textAlignment": "left",
16+
"textColor": "default",
17+
},
18+
"type": "bulletListItem",
19+
},
20+
{
21+
"children": [],
22+
"content": [
23+
{
24+
"styles": {},
25+
"text": "Bullet List Item 2
26+
Quote 2",
27+
"type": "text",
28+
},
29+
],
30+
"id": "2",
31+
"props": {
32+
"backgroundColor": "default",
33+
"textAlignment": "left",
34+
"textColor": "default",
35+
},
36+
"type": "bulletListItem",
37+
},
38+
{
39+
"children": [],
40+
"content": [
41+
{
42+
"styles": {},
43+
"text": "Bullet List Item 3
44+
Quote 3",
45+
"type": "text",
46+
},
47+
],
48+
"id": "3",
49+
"props": {
50+
"backgroundColor": "default",
51+
"textAlignment": "left",
52+
"textColor": "default",
53+
},
54+
"type": "bulletListItem",
55+
},
56+
]

0 commit comments

Comments
 (0)