feat: Better parsing of external HTML attributes & inline styles

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

@@ -126,7 +126,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
             const startIndex =
               parseInt(parent.getAttribute("start") || "1") || 1;
 
-            if (element.previousSibling || startIndex === 1) {
+            if (element.previousElementSibling || startIndex === 1) {
               return {};
             }
 

packages/core/src/blocks/defaultProps.ts

@@ -1,3 +1,5 @@
+import { Attribute } from "@tiptap/core";
+
 import type { Props, PropSchema } from "../schema/index.js";
 
 // TODO: this system should probably be moved / refactored.
@@ -22,3 +24,54 @@ export type DefaultProps = Props<typeof defaultProps>;
 // `blockContent` nodes. Ensures that they are not redundantly added to
 // a custom block's TipTap node attributes.
 export const inheritedProps = ["backgroundColor", "textColor"];
+
+export const getBackgroundColorAttribute = (
+  attributeName = "backgroundColor"
+): Attribute => ({
+  default: defaultProps.backgroundColor.default,
+  parseHTML: (element) => {
+    if (element.hasAttribute("data-background-color")) {
+      return element.getAttribute("data-background-color");
+    }
+
+    if (element.style.backgroundColor) {
+      return element.style.backgroundColor;
+    }
+
+    return defaultProps.backgroundColor.default;
+  },
+  renderHTML: (attributes) => {
+    if (attributes[attributeName] === defaultProps.backgroundColor.default) {
+      return {};
+    }
+
+    return {
+      "data-background-color": attributes[attributeName],
+    };
+  },
+});
+
+export const getTextColorAttribute = (
+  attributeName = "textColor"
+): Attribute => ({
+  default: defaultProps.textColor.default,
+  parseHTML: (element) => {
+    if (element.hasAttribute("data-text-color")) {
+      return element.getAttribute("data-text-color");
+    }
+
+    if (element.style.color) {
+      return element.style.color;
+    }
+
+    return defaultProps.textColor.default;
+  },
+  renderHTML: (attributes) => {
+    if (attributes[attributeName] === defaultProps.textColor.default) {
+      return {};
+    }
+    return {
+      "data-text-color": attributes[attributeName],
+    };
+  },
+});

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

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { defaultProps } from "../../blocks/defaultProps.js";
+import { getBackgroundColorAttribute } from "../../blocks/defaultProps.js";
 
 export const BackgroundColorExtension = Extension.create({
   name: "blockBackgroundColor",
@@ -9,24 +9,7 @@ export const BackgroundColorExtension = Extension.create({
       {
         types: ["blockContainer", "tableCell", "tableHeader"],
         attributes: {
-          backgroundColor: {
-            default: defaultProps.backgroundColor.default,
-            parseHTML: (element) =>
-              element.hasAttribute("data-background-color")
-                ? element.getAttribute("data-background-color")
-                : defaultProps.backgroundColor.default,
-            renderHTML: (attributes) => {
-              if (
-                attributes.backgroundColor ===
-                defaultProps.backgroundColor.default
-              ) {
-                return {};
-              }
-              return {
-                "data-background-color": attributes.backgroundColor,
-              };
-            },
-          },
+          backgroundColor: getBackgroundColorAttribute(),
         },
       },
     ];

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

@@ -1,18 +1,13 @@
 import { Mark } from "@tiptap/core";
+import { getBackgroundColorAttribute } from "../../blocks/defaultProps.js";
 import { createStyleSpecFromTipTapMark } from "../../schema/index.js";
 
 const BackgroundColorMark = Mark.create({
   name: "backgroundColor",
 
   addAttributes() {
     return {
-      stringValue: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute("data-background-color"),
-        renderHTML: (attributes) => ({
-          "data-background-color": attributes.stringValue,
-        }),
-      },
+      stringValue: getBackgroundColorAttribute("stringValue"),
     };
   },
 
@@ -25,10 +20,11 @@ const BackgroundColorMark = Mark.create({
             return false;
           }
 
-          if (element.hasAttribute("data-background-color")) {
-            return {
-              stringValue: element.getAttribute("data-background-color"),
-            };
+          if (
+            element.hasAttribute("data-background-color") ||
+            element.style.backgroundColor
+          ) {
+            return {};
           }
 
           return false;

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

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { defaultProps } from "../../blocks/defaultProps.js";
+import { getTextColorAttribute } from "../../blocks/defaultProps.js";
 
 export const TextColorExtension = Extension.create({
   name: "blockTextColor",
@@ -9,21 +9,7 @@ export const TextColorExtension = Extension.create({
       {
         types: ["blockContainer", "tableCell", "tableHeader"],
         attributes: {
-          textColor: {
-            default: defaultProps.textColor.default,
-            parseHTML: (element) =>
-              element.hasAttribute("data-text-color")
-                ? element.getAttribute("data-text-color")
-                : defaultProps.textColor.default,
-            renderHTML: (attributes) => {
-              if (attributes.textColor === defaultProps.textColor.default) {
-                return {};
-              }
-              return {
-                "data-text-color": attributes.textColor,
-              };
-            },
-          },
+          textColor: getTextColorAttribute(),
         },
       },
     ];

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

@@ -1,18 +1,14 @@
 import { Mark } from "@tiptap/core";
+import { getTextColorAttribute } from "../../blocks/defaultProps.js";
 import { createStyleSpecFromTipTapMark } from "../../schema/index.js";
 
 const TextColorMark = Mark.create({
   name: "textColor",
+  priority: 1000,
 
   addAttributes() {
     return {
-      stringValue: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute("data-text-color"),
-        renderHTML: (attributes) => ({
-          "data-text-color": attributes.stringValue,
-        }),
-      },
+      stringValue: getTextColorAttribute("stringValue"),
     };
   },
 
@@ -25,8 +21,8 @@ const TextColorMark = Mark.create({
             return false;
           }
 
-          if (element.hasAttribute("data-text-color")) {
-            return { stringValue: element.getAttribute("data-text-color") };
+          if (element.hasAttribute("data-text-color") || element.style.color) {
+            return {};
           }
 
           return false;

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

@@ -2,7 +2,7 @@
 
 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>"`;
 
-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>"`;
+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>"`;
 
 exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 2`] = `
 [
@@ -26,12 +26,12 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
         "type": "text",
       },
     ],
-    "id": "0",
+    "id": "1",
     "props": {
-      "backgroundColor": "default",
+      "backgroundColor": "blue",
       "level": 2,
       "textAlignment": "right",
-      "textColor": "default",
+      "textColor": "yellow",
     },
     "type": "heading",
   },
@@ -44,9 +44,9 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
         "type": "text",
       },
     ],
-    "id": "1",
+    "id": "2",
     "props": {
-      "backgroundColor": "default",
+      "backgroundColor": "red",
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -61,7 +61,7 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
         "type": "text",
       },
     ],
-    "id": "2",
+    "id": "3",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -72,7 +72,7 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
   {
     "children": [],
     "content": undefined,
-    "id": "3",
+    "id": "4",
     "props": {
       "backgroundColor": "default",
       "caption": "Caption",
@@ -86,43 +86,18 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
   },
   {
     "children": [],
-    "content": [
-      {
-        "content": [
-          {
-            "styles": {},
-            "text": "Example",
-            "type": "text",
-          },
-        ],
-        "href": "exampleURL",
-        "type": "link",
-      },
-    ],
-    "id": "4",
-    "props": {
-      "backgroundColor": "default",
-      "textAlignment": "left",
-      "textColor": "default",
-    },
-    "type": "paragraph",
-  },
-  {
-    "children": [],
-    "content": [
-      {
-        "styles": {},
-        "text": "Caption",
-        "type": "text",
-      },
-    ],
+    "content": undefined,
     "id": "5",
     "props": {
       "backgroundColor": "default",
+      "caption": "Caption",
+      "name": "Example",
+      "previewWidth": 256,
+      "showPreview": false,
       "textAlignment": "left",
-      "textColor": "default",
+      "url": "exampleURL",
     },
-    "type": "paragraph",
+    "type": "image",
   },
 ]
 `;

packages/xl-multi-column/src/test/conversions/__snapshots__/multi-column/undefined/external.html

@@ -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>
+<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>