Skip to content

Commit 8cad7bd

Browse files
matthewlipskinperez0111
matthewlipski
authored and
nperez0111
committed
Fixed parsing of numbered list start index, background color mark, and text color mark
1 parent b884b61 commit 8cad7bd

File tree

17 files changed

+460
-253
lines changed

17 files changed

+460
-253
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
126126
const startIndex =
127127
parseInt(parent.getAttribute("start") || "1") || 1;
128128

129-
if (element.previousSibling || startIndex === 1) {
129+
if (element.previousElementSibling || startIndex === 1) {
130130
return {};
131131
}
132132

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Attribute } from "@tiptap/core";
2+
13
import type { Props, PropSchema } from "../schema/index.js";
24

35
// TODO: this system should probably be moved / refactored.
@@ -22,3 +24,54 @@ export type DefaultProps = Props<typeof defaultProps>;
2224
// `blockContent` nodes. Ensures that they are not redundantly added to
2325
// a custom block's TipTap node attributes.
2426
export const inheritedProps = ["backgroundColor", "textColor"];
27+
28+
export const getBackgroundColorAttribute = (
29+
attributeName = "backgroundColor"
30+
): Attribute => ({
31+
default: defaultProps.backgroundColor.default,
32+
parseHTML: (element) => {
33+
if (element.hasAttribute("data-background-color")) {
34+
return element.getAttribute("data-background-color");
35+
}
36+
37+
if (element.style.backgroundColor) {
38+
return element.style.backgroundColor;
39+
}
40+
41+
return defaultProps.backgroundColor.default;
42+
},
43+
renderHTML: (attributes) => {
44+
if (attributes[attributeName] === defaultProps.backgroundColor.default) {
45+
return {};
46+
}
47+
48+
return {
49+
"data-background-color": attributes[attributeName],
50+
};
51+
},
52+
});
53+
54+
export const getTextColorAttribute = (
55+
attributeName = "textColor"
56+
): Attribute => ({
57+
default: defaultProps.textColor.default,
58+
parseHTML: (element) => {
59+
if (element.hasAttribute("data-text-color")) {
60+
return element.getAttribute("data-text-color");
61+
}
62+
63+
if (element.style.color) {
64+
return element.style.color;
65+
}
66+
67+
return defaultProps.textColor.default;
68+
},
69+
renderHTML: (attributes) => {
70+
if (attributes[attributeName] === defaultProps.textColor.default) {
71+
return {};
72+
}
73+
return {
74+
"data-text-color": attributes[attributeName],
75+
};
76+
},
77+
});

‎packages/core/src/extensions/BackgroundColor/BackgroundColorExtension.ts‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Extension } from "@tiptap/core";
2-
import { defaultProps } from "../../blocks/defaultProps.js";
2+
import { getBackgroundColorAttribute } from "../../blocks/defaultProps.js";
33

44
export const BackgroundColorExtension = Extension.create({
55
name: "blockBackgroundColor",
@@ -9,24 +9,7 @@ export const BackgroundColorExtension = Extension.create({
99
{
1010
types: ["blockContainer", "tableCell", "tableHeader"],
1111
attributes: {
12-
backgroundColor: {
13-
default: defaultProps.backgroundColor.default,
14-
parseHTML: (element) =>
15-
element.hasAttribute("data-background-color")
16-
? element.getAttribute("data-background-color")
17-
: defaultProps.backgroundColor.default,
18-
renderHTML: (attributes) => {
19-
if (
20-
attributes.backgroundColor ===
21-
defaultProps.backgroundColor.default
22-
) {
23-
return {};
24-
}
25-
return {
26-
"data-background-color": attributes.backgroundColor,
27-
};
28-
},
29-
},
12+
backgroundColor: getBackgroundColorAttribute(),
3013
},
3114
},
3215
];

‎packages/core/src/extensions/BackgroundColor/BackgroundColorMark.ts‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
11
import { Mark } from "@tiptap/core";
2+
import { getBackgroundColorAttribute } from "../../blocks/defaultProps.js";
23
import { createStyleSpecFromTipTapMark } from "../../schema/index.js";
34

45
const BackgroundColorMark = Mark.create({
56
name: "backgroundColor",
67

78
addAttributes() {
89
return {
9-
stringValue: {
10-
default: undefined,
11-
parseHTML: (element) => element.getAttribute("data-background-color"),
12-
renderHTML: (attributes) => ({
13-
"data-background-color": attributes.stringValue,
14-
}),
15-
},
10+
stringValue: getBackgroundColorAttribute("stringValue"),
1611
};
1712
},
1813

@@ -25,10 +20,11 @@ const BackgroundColorMark = Mark.create({
2520
return false;
2621
}
2722

28-
if (element.hasAttribute("data-background-color")) {
29-
return {
30-
stringValue: element.getAttribute("data-background-color"),
31-
};
23+
if (
24+
element.hasAttribute("data-background-color") ||
25+
element.style.backgroundColor
26+
) {
27+
return {};
3228
}
3329

3430
return false;

‎packages/core/src/extensions/TextColor/TextColorExtension.ts‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Extension } from "@tiptap/core";
2-
import { defaultProps } from "../../blocks/defaultProps.js";
2+
import { getTextColorAttribute } from "../../blocks/defaultProps.js";
33

44
export const TextColorExtension = Extension.create({
55
name: "blockTextColor",
@@ -9,21 +9,7 @@ export const TextColorExtension = Extension.create({
99
{
1010
types: ["blockContainer", "tableCell", "tableHeader"],
1111
attributes: {
12-
textColor: {
13-
default: defaultProps.textColor.default,
14-
parseHTML: (element) =>
15-
element.hasAttribute("data-text-color")
16-
? element.getAttribute("data-text-color")
17-
: defaultProps.textColor.default,
18-
renderHTML: (attributes) => {
19-
if (attributes.textColor === defaultProps.textColor.default) {
20-
return {};
21-
}
22-
return {
23-
"data-text-color": attributes.textColor,
24-
};
25-
},
26-
},
12+
textColor: getTextColorAttribute(),
2713
},
2814
},
2915
];

‎packages/core/src/extensions/TextColor/TextColorMark.ts‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import { Mark } from "@tiptap/core";
2+
import { getTextColorAttribute } from "../../blocks/defaultProps.js";
23
import { createStyleSpecFromTipTapMark } from "../../schema/index.js";
34

45
const TextColorMark = Mark.create({
56
name: "textColor",
7+
priority: 1000,
68

79
addAttributes() {
810
return {
9-
stringValue: {
10-
default: undefined,
11-
parseHTML: (element) => element.getAttribute("data-text-color"),
12-
renderHTML: (attributes) => ({
13-
"data-text-color": attributes.stringValue,
14-
}),
15-
},
11+
stringValue: getTextColorAttribute("stringValue"),
1612
};
1713
},
1814

@@ -25,8 +21,8 @@ const TextColorMark = Mark.create({
2521
return false;
2622
}
2723

28-
if (element.hasAttribute("data-text-color")) {
29-
return { stringValue: element.getAttribute("data-text-color") };
24+
if (element.hasAttribute("data-text-color") || element.style.color) {
25+
return {};
3026
}
3127

3228
return false;

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

Lines changed: 15 additions & 40 deletions
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" data-text-color="yellow" data-background-color="blue"><div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="yellow" data-background-color="blue"><div class="bn-block-content" data-content-type="heading" 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" data-background-color="red"><div class="bn-block" data-node-type="blockContainer" data-id="2" data-background-color="red"><div class="bn-block-content" data-content-type="paragraph"><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="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"><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 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p data-background-color="red">Paragraph</p><ul><li><p>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 class="bn-block-content" data-node-type="blockOuter" data-id="1" data-text-color="yellow" data-background-color="blue" data-content-type="heading" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p class="bn-block-content" data-node-type="blockOuter" data-id="2" data-background-color="red" data-content-type="paragraph">Paragraph</p><ul><li class="bn-block-content" data-node-type="blockOuter" data-id="3" data-content-type="bulletListItem"><p class="bn-inline-content">list item</p></li></ul><figure class="bn-block-content" data-node-type="blockOuter" data-id="4" data-content-type="image" data-name="Example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><img src="exampleURL" alt="Example" width="256"><figcaption>Caption</figcaption></figure><div class="bn-block-content" data-node-type="blockOuter" data-id="5" data-content-type="image" data-name="Example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-file-block=""><a href="exampleURL">Example</a><p>Caption</p></div>"`;
66

77
exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 2`] = `
88
[
@@ -26,12 +26,12 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
2626
"type": "text",
2727
},
2828
],
29-
"id": "0",
29+
"id": "1",
3030
"props": {
31-
"backgroundColor": "default",
31+
"backgroundColor": "blue",
3232
"level": 2,
3333
"textAlignment": "right",
34-
"textColor": "default",
34+
"textColor": "yellow",
3535
},
3636
"type": "heading",
3737
},
@@ -44,9 +44,9 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
4444
"type": "text",
4545
},
4646
],
47-
"id": "1",
47+
"id": "2",
4848
"props": {
49-
"backgroundColor": "default",
49+
"backgroundColor": "red",
5050
"textAlignment": "left",
5151
"textColor": "default",
5252
},
@@ -61,7 +61,7 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
6161
"type": "text",
6262
},
6363
],
64-
"id": "2",
64+
"id": "3",
6565
"props": {
6666
"backgroundColor": "default",
6767
"textAlignment": "left",
@@ -72,7 +72,7 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
7272
{
7373
"children": [],
7474
"content": undefined,
75-
"id": "3",
75+
"id": "4",
7676
"props": {
7777
"backgroundColor": "default",
7878
"caption": "Caption",
@@ -86,43 +86,18 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
8686
},
8787
{
8888
"children": [],
89-
"content": [
90-
{
91-
"content": [
92-
{
93-
"styles": {},
94-
"text": "Example",
95-
"type": "text",
96-
},
97-
],
98-
"href": "exampleURL",
99-
"type": "link",
100-
},
101-
],
102-
"id": "4",
103-
"props": {
104-
"backgroundColor": "default",
105-
"textAlignment": "left",
106-
"textColor": "default",
107-
},
108-
"type": "paragraph",
109-
},
110-
{
111-
"children": [],
112-
"content": [
113-
{
114-
"styles": {},
115-
"text": "Caption",
116-
"type": "text",
117-
},
118-
],
89+
"content": undefined,
11990
"id": "5",
12091
"props": {
12192
"backgroundColor": "default",
93+
"caption": "Caption",
94+
"name": "Example",
95+
"previewWidth": 256,
96+
"showPreview": false,
12297
"textAlignment": "left",
123-
"textColor": "default",
98+
"url": "exampleURL",
12499
},
125-
"type": "paragraph",
100+
"type": "image",
126101
},
127102
]
128103
`;

‎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;"><p class="bn-block-content" data-node-type="blockOuter" data-id="3" data-content-type="paragraph">Column Paragraph 0</p><p class="bn-block-content" data-node-type="blockOuter" data-id="4" data-content-type="paragraph">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 class="bn-block-content" data-node-type="blockOuter" data-id="6" data-content-type="paragraph">Column Paragraph 2</p><p class="bn-block-content" data-node-type="blockOuter" data-id="7" data-content-type="paragraph">Column Paragraph 3</p></div></div>

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
[
2+
{
3+
"children": [],
4+
"content": [
5+
{
6+
"styles": {
7+
"backgroundColor": "red",
8+
},
9+
"text": "Red Background",
10+
"type": "text",
11+
},
12+
{
13+
"styles": {},
14+
"text": " ",
15+
"type": "text",
16+
},
17+
{
18+
"styles": {
19+
"backgroundColor": "green",
20+
},
21+
"text": "Green Background",
22+
"type": "text",
23+
},
24+
{
25+
"styles": {},
26+
"text": " ",
27+
"type": "text",
28+
},
29+
{
30+
"styles": {
31+
"backgroundColor": "blue",
32+
},
33+
"text": "Blue Background",
34+
"type": "text",
35+
},
36+
],
37+
"id": "1",
38+
"props": {
39+
"backgroundColor": "default",
40+
"textAlignment": "left",
41+
"textColor": "default",
42+
},
43+
"type": "paragraph",
44+
},
45+
]

0 commit comments

Comments
 (0)