fix: Lossy html conversion equality (#1635)

* Added lossy HTML export/parse equality tests

* Fixed list item props in external HTML

* Fixed tables in `partialBlockToBlockForTesting`

* Added advanced table test

* Added comment

* feat: Inline style props in external HTML (#1636)

* Made default props on default blocks get rendered to inline styles for lossy HTML

* Updated unit test snapshots

* Implemented PR feedback

* Small fix

Author: matthewlipski

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

@@ -117,28 +117,55 @@ function serializeBlock<
   ].implementation.toExternalHTML({ ...block, props } as any, editor as any);
 
   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);
+  let listType = undefined;
+  if (orderedListItemBlockTypes.has(block.type!)) {
+    listType = "OL";
+  } else if (unorderedListItemBlockTypes.has(block.type!)) {
+    listType = "UL";
+  }
+
+  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"
+  );
+
+  if (ret.dom.classList.contains("bn-block-content")) {
+    // We wrap the output in an `li` element for list items, and so we want to
+    // add the attributes to that element instead as it is the "root".
+    if (!listType) {
+      // Copies the styles and prop-related attributes from the `blockContent`
+      // element onto its first child, as the `blockContent` element is omitted
+      // from external HTML. This is so prop data is preserved via `data-*`
+      // attributes or inline styles.
+      //
+      // The styles are specifically for default props on default blocks, as
+      // they get converted from `data-*` attributes for external HTML. Will
+      // need to revisit this when we convert default blocks to use the custom
+      // block API.
+      const style = ret.dom.getAttribute("style");
+      if (style) {
+        (ret.dom.firstChild! as HTMLElement).setAttribute("style", style);
+      }
+      for (const attr of blockContentDataAttributes) {
+        (ret.dom.firstChild! as HTMLElement).setAttribute(
+          attr.name,
+          attr.value
+        );
+      }
     }
 
-    addAttributesAndRemoveClasses(ret.dom.firstChild! as HTMLElement);
+    addAttributesAndRemoveClasses(ret.dom.firstChild as HTMLElement);
     elementFragment.append(...Array.from(ret.dom.childNodes));
   } else {
     elementFragment.append(ret.dom);
@@ -155,13 +182,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);
@@ -172,6 +192,24 @@ function serializeBlock<
       fragment.append(list);
     }
     const li = doc.createElement("li");
+
+    // Copies the styles and prop-related attributes from the `blockContent`
+    // element onto its first child, as the `blockContent` element is omitted
+    // from external HTML. This is so prop data is preserved via `data-*`
+    // attributes or inline styles.
+    //
+    // The styles are specifically for default props on default blocks, as
+    // they get converted from `data-*` attributes for external HTML. Will
+    // need to revisit this when we convert default blocks to use the custom
+    // block API.
+    const style = ret.dom.getAttribute("style");
+    if (style) {
+      li.setAttribute("style", style);
+    }
+    for (const attr of blockContentDataAttributes) {
+      li.setAttribute(attr.name, attr.value);
+    }
+
     li.append(elementFragment);
     fragment.lastChild!.appendChild(li);
   } else {

packages/core/src/blocks/defaultBlockHelpers.ts

@@ -1,5 +1,6 @@
 import { blockToNode } from "../api/nodeConversions/blockToNode.js";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+import { COLORS_DEFAULT } from "../editor/defaultColors.js";
 import type {
   BlockNoDefaults,
   BlockSchema,
@@ -55,14 +56,17 @@ export function createDefaultBlockDOMOutputSpec(
 
 // Function used to convert default blocks to HTML. It uses the corresponding
 // node's `renderHTML` method to do the conversion by using a default
-// `DOMSerializer`.
+// `DOMSerializer`. The `external` flag is used to modify the resulting HTML for
+// external use. This just involves changing props being rendered from `data-*`
+// attributes to inline styles.
 export const defaultBlockToHTML = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
   block: BlockNoDefaults<BSchema, I, S>,
-  editor: BlockNoteEditor<BSchema, I, S>
+  editor: BlockNoteEditor<BSchema, I, S>,
+  external = false
 ): {
   dom: HTMLElement;
   contentDOM?: HTMLElement;
@@ -90,6 +94,74 @@ export const defaultBlockToHTML = <
     );
   }
 
+  // When exporting to external HTML, we convert from `data-*` attributes to
+  // inline styles properties which can be understood by external applications.
+  //
+  // Note: This is a bit hacky to do this here as we're just hardcoding this for
+  // props on default blocks. We should revisit this when we migrate internal
+  // blocks to use the custom blocks API.
+  if (external) {
+    const dom = renderSpec.dom as HTMLElement;
+
+    if (dom.hasAttribute("data-background-color")) {
+      const backgroundColor = dom.getAttribute("data-background-color")!;
+
+      // If the background color is one of the default colors, we set the
+      // color's hex code from the default theme, as this will look nicer than
+      // using regular CSS colors. For example, instead of
+      // `background-color: red`, we use `background-color: #fbe4e4`.
+      if (backgroundColor in COLORS_DEFAULT) {
+        const cssVariableName =
+          `--blocknote-background-${backgroundColor}` as any;
+
+        dom.style.setProperty(
+          cssVariableName,
+          COLORS_DEFAULT[backgroundColor as keyof typeof COLORS_DEFAULT]
+            .background
+        );
+        dom.style.backgroundColor = `var(${cssVariableName})`;
+      } else {
+        dom.style.backgroundColor = backgroundColor;
+      }
+
+      dom.removeAttribute("data-background-color");
+    }
+
+    if (dom.hasAttribute("data-text-color")) {
+      const textColor = dom.getAttribute("data-text-color")!;
+
+      // If the text color is one of the default colors, we set the color's hex
+      // code from the default theme, as this will look nicer than using regular
+      // CSS colors. For example, instead of `color: red`, we use
+      // `color: #e03e3e`.
+      if (textColor in COLORS_DEFAULT) {
+        const cssVariableName = `--blocknote-text-${textColor}` as any;
+
+        dom.style.setProperty(
+          cssVariableName,
+          COLORS_DEFAULT[textColor as keyof typeof COLORS_DEFAULT].text
+        );
+        dom.style.color = `var(${cssVariableName})`;
+      } else {
+        dom.style.color = textColor;
+      }
+
+      dom.removeAttribute("data-text-color");
+    }
+
+    if (dom.hasAttribute("data-text-alignment")) {
+      dom.style.textAlign = dom.getAttribute("data-text-alignment")!;
+      dom.removeAttribute("data-text-alignment");
+    }
+
+    // We also remove the `data-level` attribute for heading blocks, as this
+    // information can be inferred from whether a `h1`, `h2`, or `h3 tag is
+    // used.
+    if (dom.hasAttribute("data-level")) {
+      dom.removeAttribute("data-level");
+    }
+  }
+
   return renderSpec as {
     dom: HTMLElement;
     contentDOM?: HTMLElement;

packages/core/src/blocks/defaultProps.ts

@@ -30,6 +30,16 @@ const getBackgroundColorAttribute = (
     }
 
     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;
     }
 
@@ -54,6 +64,14 @@ const getTextColorAttribute = (attributeName = "textColor"): Attribute => ({
     }
 
     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;
     }
 

packages/core/src/schema/blocks/internal.ts

@@ -267,7 +267,8 @@ export function createBlockSpecFromStronglyTypedTiptapNode<
       node,
       requiredExtensions,
       toInternalHTML: defaultBlockToHTML,
-      toExternalHTML: defaultBlockToHTML,
+      toExternalHTML: (block, editor) =>
+        defaultBlockToHTML(block, editor, true),
       // parse: () => undefined, // parse rules are in node already
     }
   );

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"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="heading" data-text-color="yellow" data-background-color="blue" 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"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="paragraph" data-background-color="red"><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 style="--blocknote-background-blue: #ddebf1; background-color: var(--blocknote-background-blue); --blocknote-text-yellow: #dfab01; color: var(--blocknote-text-yellow); text-align: right;"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p style="--blocknote-background-red: #fbe4e4; background-color: var(--blocknote-background-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) 2`] = `
 [

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

@@ -1,16 +1,18 @@
-<p data-text-color="red">Paragraph 1</p>
-<h2 data-level="2">Heading 1</h2>
+<p style="--blocknote-text-red: #e03e3e; color: var(--blocknote-text-red);">Paragraph 1</p>
+<h2>Heading 1</h2>
 <ol start="2">
-  <li>
-    <p data-start="2">Numbered List Item 1</p>
+  <li data-start="2">
+    <p>Numbered List Item 1</p>
   </li>
 </ol>
 <ul>
-  <li>
-    <p data-background-color="red">Bullet List Item 1</p>
+  <li
+    style="--blocknote-background-red: #fbe4e4; background-color: var(--blocknote-background-red);"
+  >
+    <p>Bullet List Item 1</p>
   </li>
-  <li>
-    <input type="checkbox" checked="" data-checked="true" />
+  <li data-checked="true">
+    <input type="checkbox" checked="" />
     <p class="bn-inline-content">Check List Item 1</p>
   </li>
 </ul>

tests/src/unit/core/formatConversion/export/__snapshots__/html/complex/misc.html

@@ -1,12 +1,14 @@
-<h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2">
+<h2 style="--blocknote-background-blue: #ddebf1; background-color: var(--blocknote-background-blue); --blocknote-text-yellow: #dfab01; color: var(--blocknote-text-yellow); text-align: right;">
   <strong>
     <u>Heading</u>
   </strong>
   <em>
     <s>2</s>
   </em>
 </h2>
-<p data-background-color="red">Paragraph</p>
+<p
+  style="--blocknote-background-red: #fbe4e4; background-color: var(--blocknote-background-red);"
+>Paragraph</p>
 <ul>
   <li>
     <p></p>

tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/basic.html

@@ -19,8 +19,8 @@
     <input type="checkbox" />
     <p class="bn-inline-content">Check List Item 1</p>
   </li>
-  <li>
-    <input type="checkbox" checked="" data-checked="true" />
+  <li data-checked="true">
+    <input type="checkbox" checked="" />
     <p class="bn-inline-content">Check List Item 2</p>
   </li>
 </ul>

tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html

@@ -15,8 +15,8 @@
             <input type="checkbox" />
             <p class="bn-inline-content">Check List Item 1</p>
           </li>
-          <li>
-            <input type="checkbox" checked="" data-checked="true" />
+          <li data-checked="true">
+            <input type="checkbox" checked="" />
             <p class="bn-inline-content">Check List Item 2</p>
           </li>
         </ul>

tests/src/unit/core/formatConversion/export/__snapshots__/html/paragraph/styled.html

@@ -1,7 +1,5 @@
 <p
-  data-text-color="orange"
-  data-background-color="pink"
-  data-text-alignment="center"
+  style="--blocknote-background-pink: #f4dfeb; background-color: var(--blocknote-background-pink); --blocknote-text-orange: #d9730d; color: var(--blocknote-text-orange); text-align: center;"
 >
   Plain
   <span data-text-color="red">Red Text</span>