feat: Custom styles API update

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

@@ -60,23 +60,38 @@ export function serializeInlineContentExternalHTML<
 
   for (const node of nodes) {
     // Check if this is a custom inline content node with toExternalHTML
-    if (editor.schema.inlineContentSchema[node.type.name]) {
+    if (
+      node.type.name !== "text" &&
+      editor.schema.inlineContentSchema[node.type.name]
+    ) {
       const inlineContentImplementation =
         editor.schema.inlineContentSpecs[node.type.name].implementation;
 
-      if (inlineContentImplementation?.toExternalHTML) {
+      if (inlineContentImplementation) {
         // Convert the node to inline content format
         const inlineContent = nodeToCustomInlineContent(
           node,
           editor.schema.inlineContentSchema,
           editor.schema.styleSchema,
         );
 
-        // Use the custom toExternalHTML method
-        const output = inlineContentImplementation.toExternalHTML(
-          inlineContent as any,
-          editor as any,
-        );
+        // Use the custom toExternalHTML method or fallback to `render`
+        const output = inlineContentImplementation.toExternalHTML
+          ? inlineContentImplementation.toExternalHTML(
+              inlineContent as any,
+              editor as any,
+            )
+          : inlineContentImplementation.render.call(
+              {
+                renderType: "dom",
+                props: undefined,
+              },
+              inlineContent as any,
+              () => {
+                // No-op
+              },
+              editor as any,
+            );
 
         if (output) {
           fragment.appendChild(output.dom);
@@ -93,14 +108,40 @@ export function serializeInlineContentExternalHTML<
           continue;
         }
       }
-    }
+    } else if (node.type.name === "text") {
+      // We serialize text nodes manually as we need to serialize the styles/
+      // marks using `styleSpec.implementation.render`. When left up to
+      // ProseMirror, it'll use `toDOM` which is incorrect.
+      let dom: globalThis.Node | Text = document.createTextNode(
+        node.textContent,
+      );
+      // Reverse the order of marks to maintain the correct priority.
+      for (const mark of node.marks.toReversed()) {
+        if (mark.type.name in editor.schema.styleSpecs) {
+          const newDom = (
+            editor.schema.styleSpecs[mark.type.name].implementation
+              .toExternalHTML ??
+            editor.schema.styleSpecs[mark.type.name].implementation.render
+          )(mark.attrs["stringValue"], editor);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        } else {
+          const domOutputSpec = mark.type.spec.toDOM!(mark, true);
+          const newDom = DOMSerializer.renderSpec(document, domOutputSpec);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        }
+      }
 
-    // Fall back to default serialization for this node
-    const nodeFragment = serializer.serializeFragment(
-      Fragment.from([node]),
-      options,
-    );
-    fragment.appendChild(nodeFragment);
+      fragment.appendChild(dom);
+    } else {
+      // Fall back to default serialization for this node
+      const nodeFragment = serializer.serializeFragment(
+        Fragment.from([node]),
+        options,
+      );
+      fragment.appendChild(nodeFragment);
+    }
   }
 
   if (

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

@@ -48,7 +48,6 @@ export function serializeInlineContentInternalHTML<
     // Check if this is a custom inline content node with toExternalHTML
     if (
       node.type.name !== "text" &&
-      node.type.name !== "link" &&
       editor.schema.inlineContentSchema[node.type.name]
     ) {
       const inlineContentImplementation =
@@ -90,14 +89,38 @@ export function serializeInlineContentInternalHTML<
           continue;
         }
       }
-    }
+    } else if (node.type.name === "text") {
+      // We serialize text nodes manually as we need to serialize the styles/
+      // marks using `styleSpec.implementation.render`. When left up to
+      // ProseMirror, it'll use `toDOM` which is incorrect.
+      let dom: globalThis.Node | Text = document.createTextNode(
+        node.textContent,
+      );
+      // Reverse the order of marks to maintain the correct priority.
+      for (const mark of node.marks.toReversed()) {
+        if (mark.type.name in editor.schema.styleSpecs) {
+          const newDom = editor.schema.styleSpecs[
+            mark.type.name
+          ].implementation.render(mark.attrs["stringValue"], editor);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        } else {
+          const domOutputSpec = mark.type.spec.toDOM!(mark, true);
+          const newDom = DOMSerializer.renderSpec(document, domOutputSpec);
+          newDom.contentDOM!.appendChild(dom);
+          dom = newDom.dom;
+        }
+      }
 
-    // Fall back to default serialization for this node
-    const nodeFragment = serializer.serializeFragment(
-      Fragment.from([node]),
-      options,
-    );
-    fragment.appendChild(nodeFragment);
+      fragment.appendChild(dom);
+    } else {
+      // Fall back to default serialization for this node
+      const nodeFragment = serializer.serializeFragment(
+        Fragment.from([node]),
+        options,
+      );
+      fragment.appendChild(nodeFragment);
+    }
   }
 
   return fragment;

packages/core/src/blocks/defaultBlocks.ts

@@ -16,9 +16,8 @@ import {
   createQuoteBlockSpec,
   createToggleListItemBlockSpec,
   createVideoBlockSpec,
+  defaultProps,
 } from "./index.js";
-import { BackgroundColor } from "../extensions/BackgroundColor/BackgroundColorMark.js";
-import { TextColor } from "../extensions/TextColor/TextColorMark.js";
 import {
   BlockNoDefaults,
   BlockSchema,
@@ -27,11 +26,13 @@ import {
   PartialBlockNoDefaults,
   StyleSchema,
   StyleSpecs,
+  createStyleSpec,
   createStyleSpecFromTipTapMark,
   getInlineContentSchemaFromSpecs,
   getStyleSchemaFromSpecs,
 } from "../schema/index.js";
 import { createTableBlockSpec } from "./Table/block.js";
+import { COLORS_DEFAULT } from "../editor/defaultColors.js";
 
 export const defaultBlockSpecs = {
   audio: createAudioBlockSpec(),
@@ -56,6 +57,78 @@ export type _DefaultBlockSchema = {
 };
 export type DefaultBlockSchema = _DefaultBlockSchema;
 
+const TextColor = createStyleSpec(
+  {
+    type: "textColor",
+    propSchema: "string",
+  },
+  {
+    render: () => {
+      const span = document.createElement("span");
+
+      return {
+        dom: span,
+        contentDOM: span,
+      };
+    },
+    toExternalHTML: (value) => {
+      const span = document.createElement("span");
+      if (value !== defaultProps.textColor.default) {
+        span.style.color =
+          value in COLORS_DEFAULT ? COLORS_DEFAULT[value].text : value;
+      }
+
+      return {
+        dom: span,
+        contentDOM: span,
+      };
+    },
+    parse: (element) => {
+      if (element.tagName === "SPAN" && element.style.color) {
+        return element.style.color;
+      }
+
+      return undefined;
+    },
+  },
+);
+
+const BackgroundColor = createStyleSpec(
+  {
+    type: "backgroundColor",
+    propSchema: "string",
+  },
+  {
+    render: () => {
+      const span = document.createElement("span");
+
+      return {
+        dom: span,
+        contentDOM: span,
+      };
+    },
+    toExternalHTML: (value) => {
+      const span = document.createElement("span");
+      if (value !== defaultProps.backgroundColor.default) {
+        span.style.backgroundColor =
+          value in COLORS_DEFAULT ? COLORS_DEFAULT[value].background : value;
+      }
+
+      return {
+        dom: span,
+        contentDOM: span,
+      };
+    },
+    parse: (element) => {
+      if (element.tagName === "SPAN" && element.style.backgroundColor) {
+        return element.style.backgroundColor;
+      }
+
+      return undefined;
+    },
+  },
+);
+
 export const defaultStyleSpecs = {
   bold: createStyleSpecFromTipTapMark(Bold, "boolean"),
   italic: createStyleSpecFromTipTapMark(Italic, "boolean"),

packages/core/src/blocks/defaultProps.ts

@@ -92,20 +92,10 @@ export const getBackgroundColorAttribute = (
   default: defaultProps.backgroundColor.default,
   parseHTML: (element) => {
     if (element.hasAttribute("data-background-color")) {
-      return element.getAttribute("data-background-color");
+      return element.getAttribute("data-background-color")!;
     }
 
     if (element.style.backgroundColor) {
-      // Check if `element.style.backgroundColor` matches the string:
-      // `var(--blocknote-background-<color>)`. If it does, return the color
-      // name only. Otherwise, return `element.style.backgroundColor`.
-      const match = element.style.backgroundColor.match(
-        /var\(--blocknote-background-(.+)\)/,
-      );
-      if (match) {
-        return match[1];
-      }
-
       return element.style.backgroundColor;
     }
 
@@ -128,18 +118,10 @@ export const getTextColorAttribute = (
   default: defaultProps.textColor.default,
   parseHTML: (element) => {
     if (element.hasAttribute("data-text-color")) {
-      return element.getAttribute("data-text-color");
+      return element.getAttribute("data-text-color")!;
     }
 
     if (element.style.color) {
-      // Check if `element.style.color` matches the string:
-      // `var(--blocknote-text-<color>)`. If it does, return the color name
-      // only. Otherwise, return `element.style.color`.
-      const match = element.style.color.match(/var\(--blocknote-text-(.+)\)/);
-      if (match) {
-        return match[1];
-      }
-
       return element.style.color;
     }
 
@@ -149,6 +131,7 @@ export const getTextColorAttribute = (
     if (attributes[attributeName] === defaultProps.textColor.default) {
       return {};
     }
+
     return {
       "data-text-color": attributes[attributeName],
     };
@@ -174,6 +157,7 @@ export const getTextAlignmentAttribute = (
     if (attributes[attributeName] === defaultProps.textAlignment.default) {
       return {};
     }
+
     return {
       "data-text-alignment": attributes[attributeName],
     };