feat: Less data loss in external HTML

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

@@ -128,26 +128,30 @@ function serializeBlock<
     block.type as any
   ].implementation.toExternalHTML({ ...block, props } as any, editor as any);
 
+  const blockContentDataAttributes = [
+    ...attrs,
+    ...Array.from(ret.dom.attributes),
+  ];
+
+  let listType = undefined;
+  if (orderedListItemBlockTypes.has(block.type!)) {
+    listType = "OL";
+  } else if (unorderedListItemBlockTypes.has(block.type!)) {
+    listType = "UL";
+  }
+
   const elementFragment = doc.createDocumentFragment();
   if (ret.dom.classList.contains("bn-block-content")) {
-    const blockContentDataAttributes = [...attrs, ...Array.from(ret.dom.attributes)].filter(
-      (attr) =>
-        attr.name.startsWith("data") &&
-        attr.name !== "data-content-type" &&
-        attr.name !== "data-file-block" &&
-        attr.name !== "data-node-view-wrapper" &&
-        attr.name !== "data-node-type" &&
-        attr.name !== "data-id" &&
-        attr.name !== "data-index" &&
-        attr.name !== "data-editable"
-    );
-
-    // ret.dom = ret.dom.firstChild! as any;
-    for (const attr of blockContentDataAttributes) {
-      (ret.dom.firstChild! as HTMLElement).setAttribute(attr.name, attr.value);
+    if (!listType) {
+      for (const attr of blockContentDataAttributes) {
+        (ret.dom.firstChild! as HTMLElement).setAttribute(
+          attr.name,
+          attr.value
+        );
+      }
     }
 
-    addAttributesAndRemoveClasses(ret.dom.firstChild! as HTMLElement);
+    addAttributesAndRemoveClasses(ret.dom as HTMLElement);
     elementFragment.append(...Array.from(ret.dom.childNodes));
   } else {
     elementFragment.append(ret.dom);
@@ -164,13 +168,6 @@ function serializeBlock<
     ret.contentDOM.appendChild(ic);
   }
 
-  let listType = undefined;
-  if (orderedListItemBlockTypes.has(block.type!)) {
-    listType = "OL";
-  } else if (unorderedListItemBlockTypes.has(block.type!)) {
-    listType = "UL";
-  }
-
   if (listType) {
     if (fragment.lastChild?.nodeName !== listType) {
       const list = doc.createElement(listType);
@@ -181,6 +178,9 @@ function serializeBlock<
       fragment.append(list);
     }
     const li = doc.createElement("li");
+    for (const attr of blockContentDataAttributes) {
+      li.setAttribute(attr.name, attr.value);
+    }
     li.append(elementFragment);
     fragment.lastChild!.appendChild(li);
   } else {

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

@@ -130,7 +130,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/QuoteBlockContent/QuoteBlockContent.ts

@@ -9,7 +9,8 @@ import { updateBlockCommand } from "../../api/blockManipulation/commands/updateB
 import { InputRule } from "@tiptap/core";
 
 export const quotePropSchema = {
-  ...defaultProps,
+  backgroundColor: defaultProps.backgroundColor,
+  textColor: defaultProps.textColor,
 };
 
 export const QuoteBlockContent = createStronglyTypedTiptapNode({

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/core/src/pm-nodes/BlockContainer.ts

@@ -6,8 +6,8 @@ import { mergeCSSClasses } from "../util/browser.js";
 
 // Object containing all possible block attributes.
 const BlockAttributes: Record<string, string> = {
-  blockColor: "data-block-color",
-  blockStyle: "data-block-style",
+  textColor: "data-text-color",
+  backgroundColor: "data-background-color",
   id: "data-id",
   depth: "data-depth",
   depthChange: "data-depth-change",
@@ -31,7 +31,10 @@ export const BlockContainer = Node.create<{
   parseHTML() {
     return [
       {
-        tag: "div",
+        // Not only `div`s as this way props from exported HTML can also be
+        // parsed correctly.
+        tag: "*",
+        priority: 500,
         getAttrs: (element) => {
           if (typeof element === "string") {
             return false;
@@ -44,12 +47,18 @@ export const BlockContainer = Node.create<{
             }
           }
 
-          if (element.getAttribute("data-node-type") === "blockContainer") {
+          if (
+            element.getAttribute("data-node-type") === "blockContainer" ||
+            element.getAttribute("data-node-type") === "blockOuter"
+          ) {
             return attrs;
           }
 
           return false;
         },
+        // Allows exported HTML to be parsed as both a `blockContainer` with a
+        // `blockContent` child, preserving all block data.
+        consuming: false,
       },
     ];
   },