Skip to content

Commit 6db4b93

Browse files
matthewlipskimatthewlipski
committed
Made external HTML export/import less lossy
1 parent 97068ee commit 6db4b93

File tree

81 files changed

+1109
-164
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+1109
-164
lines changed

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

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -128,26 +128,30 @@ function serializeBlock<
128128
block.type as any
129129
].implementation.toExternalHTML({ ...block, props } as any, editor as any);
130130

131+
const blockContentDataAttributes = [
132+
...attrs,
133+
...Array.from(ret.dom.attributes),
134+
];
135+
136+
let listType = undefined;
137+
if (orderedListItemBlockTypes.has(block.type!)) {
138+
listType = "OL";
139+
} else if (unorderedListItemBlockTypes.has(block.type!)) {
140+
listType = "UL";
141+
}
142+
131143
const elementFragment = doc.createDocumentFragment();
132144
if (ret.dom.classList.contains("bn-block-content")) {
133-
const blockContentDataAttributes = [...attrs, ...Array.from(ret.dom.attributes)].filter(
134-
(attr) =>
135-
attr.name.startsWith("data") &&
136-
attr.name !== "data-content-type" &&
137-
attr.name !== "data-file-block" &&
138-
attr.name !== "data-node-view-wrapper" &&
139-
attr.name !== "data-node-type" &&
140-
attr.name !== "data-id" &&
141-
attr.name !== "data-index" &&
142-
attr.name !== "data-editable"
143-
);
144-
145-
// ret.dom = ret.dom.firstChild! as any;
146-
for (const attr of blockContentDataAttributes) {
147-
(ret.dom.firstChild! as HTMLElement).setAttribute(attr.name, attr.value);
145+
if (!listType) {
146+
for (const attr of blockContentDataAttributes) {
147+
(ret.dom.firstChild! as HTMLElement).setAttribute(
148+
attr.name,
149+
attr.value
150+
);
151+
}
148152
}
149153

150-
addAttributesAndRemoveClasses(ret.dom.firstChild! as HTMLElement);
154+
addAttributesAndRemoveClasses(ret.dom as HTMLElement);
151155
elementFragment.append(...Array.from(ret.dom.childNodes));
152156
} else {
153157
elementFragment.append(ret.dom);
@@ -164,13 +168,6 @@ function serializeBlock<
164168
ret.contentDOM.appendChild(ic);
165169
}
166170

167-
let listType = undefined;
168-
if (orderedListItemBlockTypes.has(block.type!)) {
169-
listType = "OL";
170-
} else if (unorderedListItemBlockTypes.has(block.type!)) {
171-
listType = "UL";
172-
}
173-
174171
if (listType) {
175172
if (fragment.lastChild?.nodeName !== listType) {
176173
const list = doc.createElement(listType);
@@ -181,6 +178,9 @@ function serializeBlock<
181178
fragment.append(list);
182179
}
183180
const li = doc.createElement("li");
181+
for (const attr of blockContentDataAttributes) {
182+
li.setAttribute(attr.name, attr.value);
183+
}
184184
li.append(elementFragment);
185185
fragment.lastChild!.appendChild(li);
186186
} else {

‎packages/core/src/blocks/QuoteBlockContent/QuoteBlockContent.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { updateBlockCommand } from "../../api/blockManipulation/commands/updateB
99
import { InputRule } from "@tiptap/core";
1010

1111
export const quotePropSchema = {
12-
...defaultProps,
12+
backgroundColor: defaultProps.backgroundColor,
13+
textColor: defaultProps.textColor,
1314
};
1415

1516
export const QuoteBlockContent = createStronglyTypedTiptapNode({

‎packages/core/src/pm-nodes/BlockContainer.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { mergeCSSClasses } from "../util/browser.js";
66

77
// Object containing all possible block attributes.
88
const BlockAttributes: Record<string, string> = {
9-
blockColor: "data-block-color",
10-
blockStyle: "data-block-style",
9+
textColor: "data-text-color",
10+
backgroundColor: "data-background-color",
1111
id: "data-id",
1212
depth: "data-depth",
1313
depthChange: "data-depth-change",
@@ -31,7 +31,10 @@ export const BlockContainer = Node.create<{
3131
parseHTML() {
3232
return [
3333
{
34-
tag: "div",
34+
// Not only `div`s as this way props from exported HTML can also be
35+
// parsed correctly.
36+
tag: "*",
37+
priority: 500,
3538
getAttrs: (element) => {
3639
if (typeof element === "string") {
3740
return false;
@@ -44,12 +47,18 @@ export const BlockContainer = Node.create<{
4447
}
4548
}
4649

47-
if (element.getAttribute("data-node-type") === "blockContainer") {
50+
if (
51+
element.getAttribute("data-node-type") === "blockContainer" ||
52+
element.getAttribute("data-node-type") === "blockOuter"
53+
) {
4854
return attrs;
4955
}
5056

5157
return false;
5258
},
59+
// Allows exported HTML to be parsed as both a `blockContainer` with a
60+
// `blockContent` child, preserving all block data.
61+
consuming: false,
5362
},
5463
];
5564
},

‎tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocks.html

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,54 @@
1-
<p>Paragraph 1</p>
2-
<h1>Heading 1</h1>
1+
<p
2+
class="bn-block-content"
3+
data-node-type="blockOuter"
4+
data-id="1"
5+
data-content-type="paragraph"
6+
>Paragraph 1</p>
7+
<h1 class="bn-block-content" data-node-type="blockOuter" data-id="2" data-content-type="heading">Heading 1</h1>
38
<ol>
4-
<li>
5-
<p>Numbered List Item 1</p>
9+
<li
10+
class="bn-block-content"
11+
data-node-type="blockOuter"
12+
data-id="3"
13+
data-content-type="numberedListItem"
14+
data-index="null"
15+
>
16+
<p class="bn-inline-content">Numbered List Item 1</p>
617
</li>
718
</ol>
819
<ul>
9-
<li>
10-
<p>Bullet List Item 1</p>
20+
<li
21+
class="bn-block-content"
22+
data-node-type="blockOuter"
23+
data-id="4"
24+
data-content-type="bulletListItem"
25+
>
26+
<p class="bn-inline-content">Bullet List Item 1</p>
1127
</li>
12-
<li>
28+
<li
29+
class="bn-block-content"
30+
data-node-type="blockOuter"
31+
data-id="5"
32+
data-content-type="checkListItem"
33+
>
1334
<input type="checkbox" />
1435
<p class="bn-inline-content">Check List Item 1</p>
1536
</li>
1637
</ul>
17-
<pre>
38+
<pre
39+
class="bn-block-content"
40+
data-node-type="blockOuter"
41+
data-id="6"
42+
data-content-type="codeBlock"
43+
>
1844
<code class="bn-inline-content language-text" data-language="text">console.log("Hello World");</code>
1945
</pre>
20-
<table>
46+
<table
47+
class="bn-block-content"
48+
data-node-type="blockOuter"
49+
data-id="7"
50+
data-content-type="table"
51+
>
2152
<tr>
2253
<td colspan="1" rowspan="1">
2354
<p>Table Cell 1</p>
@@ -35,5 +66,16 @@ <h1>Heading 1</h1>
3566
</td>
3667
</tr>
3768
</table>
38-
<p>Add image</p>
39-
<p>Paragraph 2</p>
69+
<p
70+
class="bn-block-content"
71+
data-node-type="blockOuter"
72+
data-id="8"
73+
data-content-type="image"
74+
data-file-block=""
75+
>Add image</p>
76+
<p
77+
class="bn-block-content"
78+
data-node-type="blockOuter"
79+
data-id="9"
80+
data-content-type="paragraph"
81+
>Paragraph 2</p>

‎tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html

Lines changed: 56 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,58 @@
1-
<p data-text-color="red">Paragraph 1</p>
2-
<h2 data-level="2">Heading 1</h2>
1+
<p
2+
class="bn-block-content"
3+
data-node-type="blockOuter"
4+
data-id="1"
5+
data-text-color="red"
6+
data-content-type="paragraph"
7+
>Paragraph 1</p>
8+
<h2 class="bn-block-content" data-node-type="blockOuter" data-id="2" data-content-type="heading" data-level="2">Heading 1</h2>
39
<ol start="2">
4-
<li>
5-
<p data-start="2">Numbered List Item 1</p>
10+
<li
11+
class="bn-block-content"
12+
data-node-type="blockOuter"
13+
data-id="3"
14+
data-content-type="numberedListItem"
15+
data-start="2"
16+
data-index="null"
17+
>
18+
<p class="bn-inline-content">Numbered List Item 1</p>
619
</li>
720
</ol>
821
<ul>
9-
<li>
10-
<p data-background-color="red">Bullet List Item 1</p>
22+
<li
23+
class="bn-block-content"
24+
data-node-type="blockOuter"
25+
data-id="4"
26+
data-background-color="red"
27+
data-content-type="bulletListItem"
28+
>
29+
<p class="bn-inline-content">Bullet List Item 1</p>
1130
</li>
12-
<li>
13-
<input type="checkbox" checked="" data-checked="true" />
31+
<li
32+
class="bn-block-content"
33+
data-node-type="blockOuter"
34+
data-id="5"
35+
data-content-type="checkListItem"
36+
data-checked="true"
37+
>
38+
<input type="checkbox" checked="" />
1439
<p class="bn-inline-content">Check List Item 1</p>
1540
</li>
1641
</ul>
17-
<pre>
42+
<pre
43+
class="bn-block-content"
44+
data-node-type="blockOuter"
45+
data-id="6"
46+
data-content-type="codeBlock"
47+
>
1848
<code class="bn-inline-content language-typescript" data-language="typescript">console.log("Hello World");</code>
1949
</pre>
20-
<table>
50+
<table
51+
class="bn-block-content"
52+
data-node-type="blockOuter"
53+
data-id="7"
54+
data-content-type="table"
55+
>
2156
<tr>
2257
<td colspan="1" rowspan="1">
2358
<p>Table Cell 1</p>
@@ -36,10 +71,15 @@ <h2 data-level="2">Heading 1</h2>
3671
</tr>
3772
</table>
3873
<figure
74+
class="bn-block-content"
75+
data-node-type="blockOuter"
76+
data-id="8"
77+
data-content-type="image"
3978
data-name="1280px-Placeholder_view_vector.svg.png"
4079
data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/1280px-Placeholder_view_vector.svg.png"
4180
data-caption="Placeholder"
4281
data-preview-width="256"
82+
data-file-block=""
4383
>
4484
<img
4585
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/1280px-Placeholder_view_vector.svg.png"
@@ -48,4 +88,9 @@ <h2 data-level="2">Heading 1</h2>
4888
/>
4989
<figcaption>Placeholder</figcaption>
5090
</figure>
51-
<p>Paragraph 2</p>
91+
<p
92+
class="bn-block-content"
93+
data-node-type="blockOuter"
94+
data-id="9"
95+
data-content-type="paragraph"
96+
>Paragraph 2</p>

‎tests/src/unit/core/clipboard/copy/__snapshots__/text/html/childToParent.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,12 @@
1-
<p>Paragraph 1</p>
2-
<p>Nested Paragraph 1</p>
1+
<p
2+
class="bn-block-content"
3+
data-node-type="blockOuter"
4+
data-id="1"
5+
data-content-type="paragraph"
6+
>Paragraph 1</p>
7+
<p
8+
class="bn-block-content"
9+
data-node-type="blockOuter"
10+
data-id="2"
11+
data-content-type="paragraph"
12+
>Nested Paragraph 1</p>

‎tests/src/unit/core/clipboard/copy/__snapshots__/text/html/childrenToNextParent.html

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,24 @@
1-
<p>Nested Paragraph 1</p>
2-
<p>Nested Paragraph 2</p>
3-
<p>Nested Paragraph 3</p>
4-
<p>Paragraph 2</p>
1+
<p
2+
class="bn-block-content"
3+
data-node-type="blockOuter"
4+
data-id="2"
5+
data-content-type="paragraph"
6+
>Nested Paragraph 1</p>
7+
<p
8+
class="bn-block-content"
9+
data-node-type="blockOuter"
10+
data-id="3"
11+
data-content-type="paragraph"
12+
>Nested Paragraph 2</p>
13+
<p
14+
class="bn-block-content"
15+
data-node-type="blockOuter"
16+
data-id="4"
17+
data-content-type="paragraph"
18+
>Nested Paragraph 3</p>
19+
<p
20+
class="bn-block-content"
21+
data-node-type="blockOuter"
22+
data-id="5"
23+
data-content-type="paragraph"
24+
>Paragraph 2</p>

0 commit comments

Comments
 (0)