diff --git a/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts b/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts
index 61a657ed7..a39c2d7b9 100644
--- a/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts
+++ b/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 {
diff --git a/packages/core/src/blocks/defaultBlockHelpers.ts b/packages/core/src/blocks/defaultBlockHelpers.ts
index fbba956c8..b8220e310 100644
--- a/packages/core/src/blocks/defaultBlockHelpers.ts
+++ b/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;
diff --git a/packages/core/src/blocks/defaultProps.ts b/packages/core/src/blocks/defaultProps.ts
index a524b19a9..44193cd01 100644
--- a/packages/core/src/blocks/defaultProps.ts
+++ b/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;
     }
 
diff --git a/packages/core/src/schema/blocks/internal.ts b/packages/core/src/schema/blocks/internal.ts
index 9669f3db9..bbbb75b44 100644
--- a/packages/core/src/schema/blocks/internal.ts
+++ b/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
     }
   );
diff --git a/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap b/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap
index 7a991c453..c31fa3130 100644
--- a/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap
+++ b/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`] = `
 [
diff --git a/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html b/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html
index aa29f7463..5c496bbf0 100644
--- a/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html
+++ b/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>
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/html/complex/misc.html b/tests/src/unit/core/formatConversion/export/__snapshots__/html/complex/misc.html
index 0df8a1834..a5fd6fe7e 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/html/complex/misc.html
+++ b/tests/src/unit/core/formatConversion/export/__snapshots__/html/complex/misc.html
@@ -1,4 +1,4 @@
-<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>
@@ -6,7 +6,9 @@ <h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="r
     <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>
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/basic.html b/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/basic.html
index aee1048a8..6d3b10f9a 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/basic.html
+++ b/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>
\ No newline at end of file
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html b/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html
index b2497ae93..a708d5bb3 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html
+++ b/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>
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/html/paragraph/styled.html b/tests/src/unit/core/formatConversion/export/__snapshots__/html/paragraph/styled.html
index 65e55c08b..032aa7b89 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/html/paragraph/styled.html
+++ b/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>
diff --git a/tests/src/unit/core/formatConversion/exportParseEquality/exportParseEqualityTestInstances.ts b/tests/src/unit/core/formatConversion/exportParseEquality/exportParseEqualityTestInstances.ts
index 63d3552df..74654d55e 100644
--- a/tests/src/unit/core/formatConversion/exportParseEquality/exportParseEqualityTestInstances.ts
+++ b/tests/src/unit/core/formatConversion/exportParseEquality/exportParseEqualityTestInstances.ts
@@ -1,5 +1,8 @@
 import { ExportParseEqualityTestCase } from "../../../shared/formatConversion/exportParseEquality/exportParseEqualityTestCase.js";
-import { testExportParseEqualityBlockNoteHTML } from "../../../shared/formatConversion/exportParseEquality/exportParseEqualityTestExecutors.js";
+import {
+  testExportParseEqualityBlockNoteHTML,
+  testExportParseEqualityHTML,
+} from "../../../shared/formatConversion/exportParseEquality/exportParseEqualityTestExecutors.js";
 import { TestInstance } from "../../../types.js";
 import {
   TestBlockSchema,
@@ -21,3 +24,291 @@ export const exportParseEqualityTestInstancesBlockNoteHTML: TestInstance<
   testCase,
   executeTest: testExportParseEqualityBlockNoteHTML,
 }));
+
+export const exportParseEqualityTestInstancesHTML: TestInstance<
+  ExportParseEqualityTestCase<
+    TestBlockSchema,
+    TestInlineContentSchema,
+    TestStyleSchema
+  >,
+  TestBlockSchema,
+  TestInlineContentSchema,
+  TestStyleSchema
+>[] = [
+  {
+    testCase: {
+      name: "schema/blocks",
+      content: [
+        {
+          type: "paragraph",
+          content: "Paragraph",
+        },
+        {
+          type: "heading",
+          content: "Heading",
+        },
+        {
+          type: "quote",
+          content: "Quote",
+        },
+        {
+          type: "bulletListItem",
+          content: "Bullet List Item",
+        },
+        {
+          type: "numberedListItem",
+          content: "Numbered List Item",
+        },
+        {
+          type: "checkListItem",
+          content: "Check List Item",
+        },
+        {
+          type: "codeBlock",
+          content: "Code",
+        },
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            rows: [
+              {
+                cells: ["Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell"],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    executeTest: testExportParseEqualityHTML,
+  },
+  {
+    testCase: {
+      name: "schema/blockProps",
+      content: [
+        {
+          type: "paragraph",
+          content: "Paragraph",
+          props: {
+            textColor: "red",
+            backgroundColor: "blue",
+            textAlignment: "center",
+          },
+        },
+        {
+          type: "heading",
+          content: "Heading",
+          props: {
+            level: 2,
+          },
+        },
+        {
+          type: "checkListItem",
+          content: "Check List Item",
+          props: {
+            checked: true,
+            textColor: "red",
+            backgroundColor: "blue",
+            textAlignment: "center",
+          },
+        },
+        {
+          type: "codeBlock",
+          content: "Code",
+          props: { language: "javascript" },
+        },
+      ],
+    },
+    executeTest: testExportParseEqualityHTML,
+  },
+  {
+    testCase: {
+      name: "schema/inlineContent",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "Text ",
+              styles: {},
+            },
+            {
+              type: "link",
+              content: "Link",
+              href: "https://example.com",
+            },
+          ],
+        },
+      ],
+    },
+    executeTest: testExportParseEqualityHTML,
+  },
+  {
+    testCase: {
+      name: "schema/styles",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "T",
+              styles: {
+                bold: true,
+                italic: true,
+                underline: true,
+                strike: true,
+                // Code cannot be applied on top of other styles.
+                // code: true,
+                textColor: "red",
+                backgroundColor: "blue",
+              },
+            },
+          ],
+        },
+      ],
+    },
+    executeTest: testExportParseEqualityHTML,
+  },
+  {
+    testCase: {
+      name: "lists/nested",
+      content: [
+        {
+          type: "bulletListItem",
+          content: "List Item 1",
+          children: [
+            {
+              type: "bulletListItem",
+              content: "Nested List Item 1",
+            },
+            {
+              type: "bulletListItem",
+              content: "Nested List Item 2",
+            },
+          ],
+        },
+        {
+          type: "bulletListItem",
+          content: "List Item 2",
+        },
+      ],
+    },
+    executeTest: testExportParseEqualityHTML,
+  },
+  {
+    testCase: {
+      name: "tables/advanced",
+      content: [
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            columnWidths: [199, 148, 201],
+            headerRows: 1,
+            rows: [
+              {
+                cells: [
+                  {
+                    type: "tableCell",
+                    content: "This row has headers",
+                    props: {
+                      textAlignment: "center",
+                    },
+                  },
+                  {
+                    type: "tableCell",
+                    content: [
+                      {
+                        type: "text",
+                        text: "This is ",
+                        styles: {},
+                      },
+                      {
+                        type: "text",
+                        text: "RED",
+                        styles: {
+                          bold: true,
+                        },
+                      },
+                    ],
+                    props: {
+                      backgroundColor: "red",
+                      textAlignment: "center",
+                    },
+                  },
+                  {
+                    type: "tableCell",
+                    content: "Text is Blue",
+                    props: {
+                      textColor: "blue",
+                      textAlignment: "center",
+                    },
+                  },
+                ],
+              },
+              {
+                cells: [
+                  {
+                    type: "tableCell",
+                    content: "This spans 2 columns\nand 2 rows",
+                    props: {
+                      colspan: 2,
+                      rowspan: 2,
+                      backgroundColor: "yellow",
+                    },
+                  },
+                  {
+                    type: "tableCell",
+                    content: "Sooo many features",
+                    props: {
+                      backgroundColor: "gray",
+                      textColor: "default",
+                      textAlignment: "left",
+                    },
+                  },
+                ],
+              },
+              {
+                cells: [
+                  {
+                    type: "tableCell",
+                    content: [],
+                    props: {
+                      backgroundColor: "gray",
+                      textColor: "purple",
+                    },
+                  },
+                ],
+              },
+              {
+                cells: [
+                  {
+                    type: "tableCell",
+                    content: "A cell",
+                  },
+                  {
+                    type: "tableCell",
+                    content: "Another Cell",
+                  },
+                  {
+                    type: "tableCell",
+                    content: "Aligned center",
+                    props: {
+                      textAlignment: "center",
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    executeTest: testExportParseEqualityHTML,
+  },
+];
diff --git a/tests/src/unit/core/formatConversion/exportParseEquality/runTests.test.ts b/tests/src/unit/core/formatConversion/exportParseEquality/runTests.test.ts
index 3970bb02d..948a80d4e 100644
--- a/tests/src/unit/core/formatConversion/exportParseEquality/runTests.test.ts
+++ b/tests/src/unit/core/formatConversion/exportParseEquality/runTests.test.ts
@@ -2,7 +2,10 @@ import { describe, it } from "vitest";
 
 import { setupTestEditor } from "../../setupTestEditor.js";
 import { testSchema } from "../../testSchema.js";
-import { exportParseEqualityTestInstancesBlockNoteHTML } from "./exportParseEqualityTestInstances.js";
+import {
+  exportParseEqualityTestInstancesBlockNoteHTML,
+  exportParseEqualityTestInstancesHTML,
+} from "./exportParseEqualityTestInstances.js";
 
 // Tests for verifying that exporting blocks to another format, then importing
 // them back results in the same blocks as the original. Used for as many cases
@@ -20,3 +23,16 @@ describe("Export/parse equality tests (BlockNote HTML)", () => {
     });
   }
 });
+
+describe("Export/parse equality tests (HTML)", () => {
+  const getEditor = setupTestEditor(testSchema);
+
+  for (const {
+    testCase,
+    executeTest,
+  } of exportParseEqualityTestInstancesHTML) {
+    it(`${testCase.name}`, async () => {
+      await executeTest(getEditor(), testCase);
+    });
+  }
+});
diff --git a/tests/src/unit/core/formatConversion/formatConversionTestUtil.ts b/tests/src/unit/core/formatConversion/formatConversionTestUtil.ts
index a71cdbda0..70ec3fc34 100644
--- a/tests/src/unit/core/formatConversion/formatConversionTestUtil.ts
+++ b/tests/src/unit/core/formatConversion/formatConversionTestUtil.ts
@@ -9,6 +9,7 @@ import {
   PartialBlock,
   PartialInlineContent,
   PartialTableCell,
+  PartialTableContent,
   StyledText,
   StyleSchema,
   TableCell,
@@ -153,10 +154,10 @@ export function partialBlockToBlockForTesting<
   );
 
   if (contentType === "inline") {
-    const content = withDefaults.content as InlineContent<I, S>[] | undefined;
+    const content = withDefaults.content as PartialInlineContent<I, S>;
     withDefaults.content = partialContentToInlineContent(content) as any;
   } else if (contentType === "table") {
-    const content = withDefaults.content as TableContent<I, S> | undefined;
+    const content = withDefaults.content as PartialTableContent<I, S>;
     withDefaults.content = {
       type: "tableContent",
       columnWidths:
@@ -167,7 +168,34 @@ export function partialBlockToBlockForTesting<
       headerCols: content?.headerCols || undefined,
       rows:
         content?.rows.map((row) => ({
-          cells: row.cells.map((cell) => partialContentToInlineContent(cell)),
+          cells: row.cells.map((cell) =>
+            typeof cell === "object" &&
+            "type" in cell &&
+            cell.type === "tableCell"
+              ? {
+                  type: "tableCell",
+                  props: {
+                    backgroundColor: "default",
+                    colspan: 1,
+                    rowspan: 1,
+                    textAlignment: "left",
+                    textColor: "default",
+                    ...cell.props,
+                  },
+                  content: partialContentToInlineContent(cell.content),
+                }
+              : {
+                  type: "tableCell",
+                  props: {
+                    backgroundColor: "default",
+                    colspan: 1,
+                    rowspan: 1,
+                    textAlignment: "left",
+                    textColor: "default",
+                  },
+                  content: partialContentToInlineContent(cell),
+                }
+          ),
         })) || [],
     } as any;
   }
diff --git a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/backgroundColorProp.json b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/backgroundColorProp.json
index f2ebc5ed9..15f5d0729 100644
--- a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/backgroundColorProp.json
+++ b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/backgroundColorProp.json
@@ -4,30 +4,13 @@
     "content": [
       {
         "styles": {},
-        "text": "Red Background",
+        "text": "Blue Background",
         "type": "text",
       },
     ],
     "id": "1",
     "props": {
-      "backgroundColor": "red",
-      "textAlignment": "left",
-      "textColor": "default",
-    },
-    "type": "paragraph",
-  },
-  {
-    "children": [],
-    "content": [
-      {
-        "styles": {},
-        "text": "Green Background",
-        "type": "text",
-      },
-    ],
-    "id": "2",
-    "props": {
-      "backgroundColor": "green",
+      "backgroundColor": "blue",
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -42,7 +25,7 @@
         "type": "text",
       },
     ],
-    "id": "3",
+    "id": "2",
     "props": {
       "backgroundColor": "blue",
       "textAlignment": "left",
diff --git a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/backgroundColorStyle.json b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/backgroundColorStyle.json
index 0f1dfc15e..8afe915ba 100644
--- a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/backgroundColorStyle.json
+++ b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/backgroundColorStyle.json
@@ -4,21 +4,9 @@
     "content": [
       {
         "styles": {
-          "backgroundColor": "red",
-        },
-        "text": "Red Background",
-        "type": "text",
-      },
-      {
-        "styles": {},
-        "text": " ",
-        "type": "text",
-      },
-      {
-        "styles": {
-          "backgroundColor": "green",
+          "backgroundColor": "blue",
         },
-        "text": "Green Background",
+        "text": "Blue Background",
         "type": "text",
       },
       {
diff --git a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/textColorProp.json b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/textColorProp.json
index 7480fcab3..4211362bf 100644
--- a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/textColorProp.json
+++ b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/textColorProp.json
@@ -4,7 +4,7 @@
     "content": [
       {
         "styles": {},
-        "text": "Red Paragraph",
+        "text": "Blue Text",
         "type": "text",
       },
     ],
@@ -12,7 +12,7 @@
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
-      "textColor": "red",
+      "textColor": "blue",
     },
     "type": "paragraph",
   },
@@ -21,28 +21,11 @@
     "content": [
       {
         "styles": {},
-        "text": "Green Paragraph",
+        "text": "Blue Text",
         "type": "text",
       },
     ],
     "id": "2",
-    "props": {
-      "backgroundColor": "default",
-      "textAlignment": "left",
-      "textColor": "green",
-    },
-    "type": "paragraph",
-  },
-  {
-    "children": [],
-    "content": [
-      {
-        "styles": {},
-        "text": "Blue Paragraph",
-        "type": "text",
-      },
-    ],
-    "id": "3",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
diff --git a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/textColorStyle.json b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/textColorStyle.json
index faeeee527..e78e1a4b3 100644
--- a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/textColorStyle.json
+++ b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/textColorStyle.json
@@ -4,21 +4,9 @@
     "content": [
       {
         "styles": {
-          "textColor": "red",
-        },
-        "text": "Red Text",
-        "type": "text",
-      },
-      {
-        "styles": {},
-        "text": " ",
-        "type": "text",
-      },
-      {
-        "styles": {
-          "textColor": "green",
+          "textColor": "blue",
         },
-        "text": "Green Text",
+        "text": "Blue Text",
         "type": "text",
       },
       {
diff --git a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/twoTables.json b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/twoTables.json
index 3ffbb3ead..1def7a8e3 100644
--- a/tests/src/unit/core/formatConversion/parse/__snapshots__/html/twoTables.json
+++ b/tests/src/unit/core/formatConversion/parse/__snapshots__/html/twoTables.json
@@ -45,7 +45,7 @@
                 {
                   "styles": {},
                   "text": "
-        
+          
 Name: [Company Representative]
 Title: Chief Executive Officer",
                   "type": "text",
diff --git a/tests/src/unit/core/formatConversion/parse/parseTestInstances.ts b/tests/src/unit/core/formatConversion/parse/parseTestInstances.ts
index 375bfd098..2ec30e07d 100644
--- a/tests/src/unit/core/formatConversion/parse/parseTestInstances.ts
+++ b/tests/src/unit/core/formatConversion/parse/parseTestInstances.ts
@@ -20,11 +20,11 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "basicBlockTypes",
       content: `<h1>Heading 1</h1>
-<h2>Heading 2</h2>
-<h3>Heading 3</h3>
-<p>Paragraph</p>
-<figure><img src="exampleURL" /><figcaption>Image Caption</figcaption></figure>
-<p>None <strong>Bold </strong><em>Italic </em><u>Underline </u><s>Strikethrough </s><strong><em><s><u>All</u></s></em></strong></p>`,
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <p>Paragraph</p>
+  <figure><img src="exampleURL" /><figcaption>Image Caption</figcaption></figure>
+  <p>None <strong>Bold </strong><em>Italic </em><u>Underline </u><s>Strikethrough </s><strong><em><s><u>All</u></s></em></strong></p>`,
     },
     executeTest: testParseHTML,
   },
@@ -32,82 +32,82 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "lists",
       content: `<ul>
-<li>First</li>
-<li>Second</li>
-<li>Third</li>
-<li>
-  <input type="checkbox">
-  Fourth
-</li>
-<li>
-  <input type="checkbox">
-  Fifth
-</li>
-<li>Five Parent
-  <ul>
-    <li>Child 1</li>
-    <li>Child 2</li>
-    <li>
-      <input type="checkbox">
-      Child 3
-    </li>
-    <li>
-      <input type="checkbox">
-      Child 4
-    </li>
-  </ul>
-</li>
-</ul>`,
-    },
-    executeTest: testParseHTML,
-  },
-  {
-    testCase: {
-      name: "nestedLists",
-      content: `<ul>
-  <li>Bullet List Item</li>
-  <li>Bullet List Item
-    <ul>
-      <li>Nested Bullet List Item</li>
-      <li>Nested Bullet List Item</li>
-    </ul>
-  </li>
-  <li>Bullet List Item</li>
-</ul>
-<ol>
-  <li>Numbered List Item</li>
-  <li>Numbered List Item
-    <ol>
-      <li>Nested Numbered List Item</li>
-      <li>Nested Numbered List Item</li>
-    </ol>
-  </li>
-  <li>Numbered List Item</li>
-</ol>
-<ul>
+  <li>First</li>
+  <li>Second</li>
+  <li>Third</li>
   <li>
     <input type="checkbox">
-    Check List Item
+    Fourth
   </li>
   <li>
     <input type="checkbox">
-    Check List Item
+    Fifth
+  </li>
+  <li>Five Parent
     <ul>
+      <li>Child 1</li>
+      <li>Child 2</li>
       <li>
         <input type="checkbox">
-        Nested Check List Item
+        Child 3
       </li>
       <li>
         <input type="checkbox">
-        Nested Check List Item
+        Child 4
       </li>
     </ul>
   </li>
-  <li>
-    <input type="checkbox">
-    Nested Check List Item
-  </li>
-</ul>`,
+  </ul>`,
+    },
+    executeTest: testParseHTML,
+  },
+  {
+    testCase: {
+      name: "nestedLists",
+      content: `<ul>
+    <li>Bullet List Item</li>
+    <li>Bullet List Item
+      <ul>
+        <li>Nested Bullet List Item</li>
+        <li>Nested Bullet List Item</li>
+      </ul>
+    </li>
+    <li>Bullet List Item</li>
+  </ul>
+  <ol>
+    <li>Numbered List Item</li>
+    <li>Numbered List Item
+      <ol>
+        <li>Nested Numbered List Item</li>
+        <li>Nested Numbered List Item</li>
+      </ol>
+    </li>
+    <li>Numbered List Item</li>
+  </ol>
+  <ul>
+    <li>
+      <input type="checkbox">
+      Check List Item
+    </li>
+    <li>
+      <input type="checkbox">
+      Check List Item
+      <ul>
+        <li>
+          <input type="checkbox">
+          Nested Check List Item
+        </li>
+        <li>
+          <input type="checkbox">
+          Nested Check List Item
+        </li>
+      </ul>
+    </li>
+    <li>
+      <input type="checkbox">
+      Nested Check List Item
+    </li>
+  </ul>`,
     },
     executeTest: testParseHTML,
   },
@@ -115,67 +115,67 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "nestedListsWithParagraphs",
       content: `<ul>
-  <li>
-    <p>Bullet List Item</p>
-  </li>
-  <li>
-    <p>Bullet List Item</p>
-    <ul>
-      <li>
-        <p>Nested Bullet List Item</p>
-      </li>
-      <li>
-        <p>Nested Bullet List Item</p>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <p>Bullet List Item</p>
-  </li>
-</ul>
-<ol>
-  <li>
-    <p>Numbered List Item</p>
-  </li>
-  <li>
-    <p>Numbered List Item</p>
-    <ol>
-      <li>
-        <p>Nested Numbered List Item</p>
-      </li>
-      <li>
-        <p>Nested Numbered List Item</p>
-      </li>
-    </ol>
-  </li>
-  <li>
-    <p>Numbered List Item</p>
-  </li>
-</ol>
-<ul>
-  <li>
-    <input type="checkbox">
-    <p>Checked List Item</p>
-  </li>
-  <li>
-    <input type="checkbox">
-    <p>Checked List Item</p>
-    <ul>
-      <li>
-        <input type="checkbox">
-        <p>Nested Checked List Item</p>
-      </li>
-      <li>
-        <label><input type="checkbox"></label>
-        <p>Nested Checked List Item</p>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <input type="checkbox">
-    <p>Checked List Item</p>
-  </li>
-</ul>`,
+    <li>
+      <p>Bullet List Item</p>
+    </li>
+    <li>
+      <p>Bullet List Item</p>
+      <ul>
+        <li>
+          <p>Nested Bullet List Item</p>
+        </li>
+        <li>
+          <p>Nested Bullet List Item</p>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <p>Bullet List Item</p>
+    </li>
+  </ul>
+  <ol>
+    <li>
+      <p>Numbered List Item</p>
+    </li>
+    <li>
+      <p>Numbered List Item</p>
+      <ol>
+        <li>
+          <p>Nested Numbered List Item</p>
+        </li>
+        <li>
+          <p>Nested Numbered List Item</p>
+        </li>
+      </ol>
+    </li>
+    <li>
+      <p>Numbered List Item</p>
+    </li>
+  </ol>
+  <ul>
+    <li>
+      <input type="checkbox">
+      <p>Checked List Item</p>
+    </li>
+    <li>
+      <input type="checkbox">
+      <p>Checked List Item</p>
+      <ul>
+        <li>
+          <input type="checkbox">
+          <p>Nested Checked List Item</p>
+        </li>
+        <li>
+          <label><input type="checkbox"></label>
+          <p>Nested Checked List Item</p>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <input type="checkbox">
+      <p>Checked List Item</p>
+    </li>
+  </ul>`,
     },
     executeTest: testParseHTML,
   },
@@ -183,49 +183,49 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "mixedNestedLists",
       content: `<ul>
-  <li>Bullet List Item</li>
-  <li>Bullet List Item
-    <ol>
-      <li>Nested Numbered List Item</li>
-      <li>Nested Numbered List Item</li>
-    </ol>
-  </li>
-  <li>Bullet List Item</li>
-</ul>
-<ol>
-  <li>Numbered List Item</li>
-  <li>Numbered List Item
-    <ul>
-      <li>
-        <input type="checkbox" checked>
-        Nested Check List Item
-      </li>
-      <li>
-        <input type="checkbox">
-        Nested Check List Item
-      </li>
-    </ul>
-  </li>
-  <li>Numbered List Item</li>
-</ol>
-<ul>
-  <li>
-    <input type="checkbox" checked>
-    Check List Item
-  </li>
-  <li>
-    <input type="checkbox">
-    Check List Item
-    <ul>
-      <li>Nested Bullet List Item</li>
-      <li>Nested Bullet List Item</li>
-    </ul>
-  </li>
-  <li>
-    <input type="checkbox" checked>
-    Nested Check List Item
-  </li>
-</ul>`,
+    <li>Bullet List Item</li>
+    <li>Bullet List Item
+      <ol>
+        <li>Nested Numbered List Item</li>
+        <li>Nested Numbered List Item</li>
+      </ol>
+    </li>
+    <li>Bullet List Item</li>
+  </ul>
+  <ol>
+    <li>Numbered List Item</li>
+    <li>Numbered List Item
+      <ul>
+        <li>
+          <input type="checkbox" checked>
+          Nested Check List Item
+        </li>
+        <li>
+          <input type="checkbox">
+          Nested Check List Item
+        </li>
+      </ul>
+    </li>
+    <li>Numbered List Item</li>
+  </ol>
+  <ul>
+    <li>
+      <input type="checkbox" checked>
+      Check List Item
+    </li>
+    <li>
+      <input type="checkbox">
+      Check List Item
+      <ul>
+        <li>Nested Bullet List Item</li>
+        <li>Nested Bullet List Item</li>
+      </ul>
+    </li>
+    <li>
+      <input type="checkbox" checked>
+      Nested Check List Item
+    </li>
+  </ul>`,
     },
     executeTest: testParseHTML,
   },
@@ -233,16 +233,16 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "divs",
       content: `<div>Single Div</div>
-<div>
-  Div
-  <div>Nested Div</div>
-  <div>Nested Div</div>
-</div>
-<div>Single Div 2</div>
-<div>
-  <div>Nested Div</div>
-  <div>Nested Div</div>
-</div>`,
+  <div>
+    Div
+    <div>Nested Div</div>
+    <div>Nested Div</div>
+  </div>
+  <div>Single Div 2</div>
+  <div>
+    <div>Nested Div</div>
+    <div>Nested Div</div>
+  </div>`,
     },
     executeTest: testParseHTML,
   },
@@ -257,8 +257,8 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "imageInParagraph",
       content: `<p>
-  <img src="exampleURL">
-</p>`,
+    <img src="exampleURL">
+  </p>`,
     },
     executeTest: testParseHTML,
   },
@@ -266,9 +266,9 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "fakeImageCaption",
       content: `<div>
-  <img src="exampleURL">
-  <p>Image Caption</p>
-</div>`,
+    <img src="exampleURL">
+    <p>Image Caption</p>
+  </div>`,
     },
     executeTest: testParseHTML,
   },
@@ -276,27 +276,27 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "deepNestedContent",
       content: `<div>
-    Outer 1 Div Before
-  <div>
-    Outer 2 Div Before
+      Outer 1 Div Before
     <div>
-      Outer 3 Div Before
+      Outer 2 Div Before
       <div>
-        Outer 4 Div Before
-        <h1>Heading 1</h1>
-        <h2>Heading 2</h2>
-        <h3>Heading 3</h3>
-        <p>Paragraph</p>
-        <figure><img src="exampleURL"><figcaption>Image Caption</figcaption></figure>
-        <p><strong>Bold</strong> <em>Italic</em> <u>Underline</u> <s>Strikethrough</s> <strong><em><s><u>All</u></s></em></strong></p>
-        Outer 4 Div After
+        Outer 3 Div Before
+        <div>
+          Outer 4 Div Before
+          <h1>Heading 1</h1>
+          <h2>Heading 2</h2>
+          <h3>Heading 3</h3>
+          <p>Paragraph</p>
+          <figure><img src="exampleURL"><figcaption>Image Caption</figcaption></figure>
+          <p><strong>Bold</strong> <em>Italic</em> <u>Underline</u> <s>Strikethrough</s> <strong><em><s><u>All</u></s></em></strong></p>
+          Outer 4 Div After
+        </div>
+        Outer 3 Div After
       </div>
-      Outer 3 Div After
+      Outer 2 Div After
     </div>
-    Outer 2 Div After
-  </div>
-  Outer 1 Div After
-</div>`,
+    Outer 1 Div After
+  </div>`,
     },
     executeTest: testParseHTML,
   },
@@ -304,10 +304,10 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "inlineContentAndNestedBlocks",
       content: `<div>
-  None <strong>Bold </strong><em>Italic </em><u>Underline </u><s>Strikethrough </s><strong><em><s><u>All</u></s></em></strong>
-  <div>Nested Div</div>
-  <p>Nested Paragraph</p>
-</div>`,
+    None <strong>Bold </strong><em>Italic </em><u>Underline </u><s>Strikethrough </s><strong><em><s><u>All</u></s></em></strong>
+    <div>Nested Div</div>
+    <p>Nested Paragraph</p>
+  </div>`,
     },
     executeTest: testParseHTML,
   },
@@ -315,21 +315,21 @@ export const parseTestInstancesHTML: TestInstance<
     testCase: {
       name: "twoTables",
       content: `<table style="border-collapse:collapse;margin-left:255.478pt" cellspacing="0">
-  <tr style="height:22pt">
-    <td style="width:203pt">
-      <p data-text-alignment="left" data-text-indent="0pt"><u>Company</u></p>
-    </td>
-  </tr>
-  <tr style="height:86pt">
-    <td style="width:203pt">
-      <p data-text-alignment="left" data-text-indent="0pt"><b>Example Company Inc.</b></p>
-      <p data-text-alignment="left" data-text-indent="0pt">
-        <p>Name: [Company Representative]</p>
-      </p>
-      <p data-text-alignment="left" data-text-indent="0pt">Title: Chief Executive Officer</p>
-    </td>
-  </tr>
-</table>
+    <tr style="height:22pt">
+      <td style="width:203pt">
+        <p data-text-alignment="left" data-text-indent="0pt"><u>Company</u></p>
+      </td>
+    </tr>
+    <tr style="height:86pt">
+      <td style="width:203pt">
+        <p data-text-alignment="left" data-text-indent="0pt"><b>Example Company Inc.</b></p>
+        <p data-text-alignment="left" data-text-indent="0pt">
+          <p>Name: [Company Representative]</p>
+        </p>
+        <p data-text-alignment="left" data-text-indent="0pt">Title: Chief Executive Officer</p>
+      </td>
+    </tr>
+  </table>
 
 <table style="border-collapse:collapse;margin-left:256.5pt" cellspacing="0">
   <tr style="height:58pt">
@@ -543,14 +543,14 @@ With Hard Break</p>
   {
     testCase: {
       name: "textColorStyle",
-      content: `<p><span style="color: red">Red Text</span> <span style="color: green">Green Text</span> <span style="color: blue">Blue Text</span></p>`,
+      content: `<p><span style="color: blue">Blue Text</span> <span style="color: var(--blocknote-text-blue)">Blue Text</span></p>`,
     },
     executeTest: testParseHTML,
   },
   {
     testCase: {
       name: "backgroundColorStyle",
-      content: `<p><span style="background-color: red">Red Background</span> <span style="background-color: green">Green Background</span> <span style="background-color: blue">Blue Background</span></p>`,
+      content: `<p><span style="background-color: blue">Blue Background</span> <span style="background-color: var(--blocknote-background-blue)">Blue Background</span></p>`,
     },
     executeTest: testParseHTML,
   },
@@ -558,9 +558,9 @@ With Hard Break</p>
     testCase: {
       name: "orderedListStart",
       content: `<ol start="2">
-    <li>List Item 2</li>
-    <li>List Item 3</li>
-    <li>List Item 4</li>
+  <li>List Item 2</li>
+  <li>List Item 3</li>
+  <li>List Item 4</li>
 </ol>`,
     },
     executeTest: testParseHTML,
@@ -582,18 +582,16 @@ With Hard Break</p>
   {
     testCase: {
       name: "textColorProp",
-      content: `<p style="color: red">Red Paragraph</p>
-<p style="color: green">Green Paragraph</p>
-<p style="color: blue">Blue Paragraph</p>`,
+      content: `<p style="color: blue">Blue Text</p>
+<p style="color: var(--blocknote-text-blue)">Blue Text</p>`,
     },
     executeTest: testParseHTML,
   },
   {
     testCase: {
       name: "backgroundColorProp",
-      content: `<p style="background-color: red">Red Background</p>
-<p style="background-color: green">Green Background</p>
-<p style="background-color: blue">Blue Background</p>`,
+      content: `<p style="background-color: blue">Blue Background</p>
+<p style="background-color: var(--blocknote-background-blue)">Blue Background</p>`,
     },
     executeTest: testParseHTML,
   },
diff --git a/tests/src/unit/core/setupTestEditor.ts b/tests/src/unit/core/setupTestEditor.ts
index 5df422680..b98eaae56 100644
--- a/tests/src/unit/core/setupTestEditor.ts
+++ b/tests/src/unit/core/setupTestEditor.ts
@@ -36,6 +36,12 @@ export const setupTestEditor = <
         },
       },
       schema,
+      tables: {
+        splitCells: true,
+        cellBackgroundColor: true,
+        cellTextColor: true,
+        headers: true,
+      },
       trailingBlock: false,
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
     });
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/html/contextParagraph/basic.html b/tests/src/unit/react/formatConversion/export/__snapshots__/html/contextParagraph/basic.html
index ca43744a1..f7b852f0f 100644
--- a/tests/src/unit/react/formatConversion/export/__snapshots__/html/contextParagraph/basic.html
+++ b/tests/src/unit/react/formatConversion/export/__snapshots__/html/contextParagraph/basic.html
@@ -1 +1 @@
-<div data-editable="">React Context Paragraph</div>
\ No newline at end of file
+<div data-editable="" style="white-space: normal;">React Context Paragraph</div>
\ No newline at end of file
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/basic.html b/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/basic.html
index 2971f1105..ff100b250 100644
--- a/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/basic.html
+++ b/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/basic.html
@@ -1 +1 @@
-<p class="react-custom-paragraph">Hello World</p>
\ No newline at end of file
+<p class="react-custom-paragraph" style="white-space: normal;">Hello World</p>
\ No newline at end of file
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/lineBreaks.html b/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/lineBreaks.html
index 2971f1105..ff100b250 100644
--- a/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/lineBreaks.html
+++ b/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/lineBreaks.html
@@ -1 +1 @@
-<p class="react-custom-paragraph">Hello World</p>
\ No newline at end of file
+<p class="react-custom-paragraph" style="white-space: normal;">Hello World</p>
\ No newline at end of file
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/nested.html b/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/nested.html
index 6b2e1554c..863e2204e 100644
--- a/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/nested.html
+++ b/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/nested.html
@@ -1,3 +1,3 @@
-<p class="react-custom-paragraph">Hello World</p>
-<p class="react-custom-paragraph">Hello World</p>
-<p class="react-custom-paragraph">Hello World</p>
\ No newline at end of file
+<p class="react-custom-paragraph" style="white-space: normal;">Hello World</p>
+<p class="react-custom-paragraph" style="white-space: normal;">Hello World</p>
+<p class="react-custom-paragraph" style="white-space: normal;">Hello World</p>
\ No newline at end of file
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/styled.html b/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/styled.html
index 7e7e60707..962c4cea9 100644
--- a/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/styled.html
+++ b/tests/src/unit/react/formatConversion/export/__snapshots__/html/customParagraph/styled.html
@@ -1,5 +1,6 @@
 <p
   class="react-custom-paragraph"
+  style="white-space: normal;"
   data-text-alignment="center"
   data-text-color="orange"
   data-background-color="pink"
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/basic.html b/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/basic.html
index e60c23faa..669095fc5 100644
--- a/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/basic.html
+++ b/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/basic.html
@@ -1 +1,5 @@
-<p class="simple-react-custom-paragraph" data-editable="">React Custom Paragraph</p>
\ No newline at end of file
+<p
+  class="simple-react-custom-paragraph"
+  data-editable=""
+  style="white-space: normal;"
+>React Custom Paragraph</p>
\ No newline at end of file
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/nested.html b/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/nested.html
index 68e209191..677ec39d3 100644
--- a/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/nested.html
+++ b/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/nested.html
@@ -1,3 +1,15 @@
-<p class="simple-react-custom-paragraph" data-editable="">Custom React Paragraph</p>
-<p class="simple-react-custom-paragraph" data-editable="">Nested React Custom Paragraph 1</p>
-<p class="simple-react-custom-paragraph" data-editable="">Nested React Custom Paragraph 2</p>
\ No newline at end of file
+<p
+  class="simple-react-custom-paragraph"
+  data-editable=""
+  style="white-space: normal;"
+>Custom React Paragraph</p>
+<p
+  class="simple-react-custom-paragraph"
+  data-editable=""
+  style="white-space: normal;"
+>Nested React Custom Paragraph 1</p>
+<p
+  class="simple-react-custom-paragraph"
+  data-editable=""
+  style="white-space: normal;"
+>Nested React Custom Paragraph 2</p>
\ No newline at end of file
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/styled.html b/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/styled.html
index aff3d3abc..4d0b88207 100644
--- a/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/styled.html
+++ b/tests/src/unit/react/formatConversion/export/__snapshots__/html/simpleCustomParagraph/styled.html
@@ -1,6 +1,7 @@
 <p
   class="simple-react-custom-paragraph"
   data-editable=""
+  style="white-space: normal;"
   data-text-alignment="center"
   data-text-color="orange"
   data-background-color="pink"
diff --git a/tests/src/unit/shared/formatConversion/exportParseEquality/exportParseEqualityTestExecutors.ts b/tests/src/unit/shared/formatConversion/exportParseEquality/exportParseEqualityTestExecutors.ts
index 42a75f61c..847ffee2b 100644
--- a/tests/src/unit/shared/formatConversion/exportParseEquality/exportParseEqualityTestExecutors.ts
+++ b/tests/src/unit/shared/formatConversion/exportParseEquality/exportParseEqualityTestExecutors.ts
@@ -33,6 +33,29 @@ export const testExportParseEqualityBlockNoteHTML = async <
   );
 };
 
+export const testExportParseEqualityHTML = async <
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<B, I, S>,
+  testCase: ExportParseEqualityTestCase<B, I, S>
+) => {
+  (window as any).__TEST_OPTIONS.mockID = 0;
+
+  addIdsToBlocks(testCase.content);
+
+  const exported = await editor.blocksToHTMLLossy(testCase.content);
+
+  // Reset mock ID as we don't expect block IDs to be preserved in this
+  // conversion.
+  (window as any).__TEST_OPTIONS.mockID = 0;
+
+  expect(await editor.tryParseHTMLToBlocks(exported)).toStrictEqual(
+    partialBlocksToBlocksForTesting(editor.schema, testCase.content)
+  );
+};
+
 export const testExportParseEqualityNodes = async <
   B extends BlockSchema,
   I extends InlineContentSchema,