fix: External HTML parse/export cases (#1991)

* WIP parse export fixes

* Fixed color style parsing

* Made default props get exported to inline styles in external HTML

* Small fix

* Updated snapshots

* Updated snapshot

* Updated e2e snaps

* Fixed snapshot???

* fix: External HTML parse/export cases cont. (#1998)

* Added plugin for collab schema migration

* Moved color props to block content nodes

* Fixed export for list items and updated unit test snapshots

* Rename

* Updated test snapshots

* Implemented PR feedback

* Fixed build

Author: matthewlipski

examples/03-ui-components/13-custom-ui/src/MUIFormattingToolbar.tsx

@@ -303,6 +303,10 @@ function MUITextAlignButton(props: {
     editor.focus();
   }, [editor, props.textAlignment]);
 
+  if (!activeTextAlignment) {
+    return null;
+  }
+
   return (
     <MUIToolbarButton
       tooltip={tooltip}

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

@@ -232,9 +232,7 @@ function serializeBlock<
       }
       fragment.append(list);
     }
-    const li = doc.createElement("li");
-    li.append(elementFragment);
-    fragment.lastChild!.appendChild(li);
+    fragment.lastChild!.appendChild(elementFragment);
   } else {
     fragment.append(elementFragment);
   }

packages/core/src/blocks/Audio/block.ts

@@ -4,7 +4,7 @@ import {
   createBlockConfig,
   createBlockSpec,
 } from "../../schema/index.js";
-import { defaultProps } from "../defaultProps.js";
+import { defaultProps, parseDefaultProps } from "../defaultProps.js";
 import { parseFigureElement } from "../File/helpers/parse/parseFigureElement.js";
 import { createFileBlockWrapper } from "../File/helpers/render/createFileBlockWrapper.js";
 import { createFigureWithCaption } from "../File/helpers/toExternalHTML/createFigureWithCaption.js";
@@ -56,7 +56,12 @@ export const audioParse =
         return undefined;
       }
 
-      return parseAudioElement(element as HTMLAudioElement);
+      const { backgroundColor } = parseDefaultProps(element);
+
+      return {
+        ...parseAudioElement(element as HTMLAudioElement),
+        backgroundColor,
+      };
     }
 
     if (element.tagName === "FIGURE") {
@@ -67,8 +72,11 @@ export const audioParse =
 
       const { targetElement, caption } = parsedFigure;
 
+      const { backgroundColor } = parseDefaultProps(element);
+
       return {
         ...parseAudioElement(targetElement as HTMLAudioElement),
+        backgroundColor,
         caption,
       };
     }

packages/core/src/blocks/File/block.ts

@@ -1,5 +1,5 @@
 import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
-import { defaultProps } from "../defaultProps.js";
+import { defaultProps, parseDefaultProps } from "../defaultProps.js";
 import { parseEmbedElement } from "./helpers/parse/parseEmbedElement.js";
 import { parseFigureElement } from "./helpers/parse/parseFigureElement.js";
 import { createFileBlockWrapper } from "./helpers/render/createFileBlockWrapper.js";
@@ -37,7 +37,12 @@ export const fileParse = () => (element: HTMLElement) => {
       return undefined;
     }
 
-    return parseEmbedElement(element as HTMLEmbedElement);
+    const { backgroundColor } = parseDefaultProps(element);
+
+    return {
+      ...parseEmbedElement(element as HTMLEmbedElement),
+      backgroundColor,
+    };
   }
 
   if (element.tagName === "FIGURE") {
@@ -48,8 +53,11 @@ export const fileParse = () => (element: HTMLElement) => {
 
     const { targetElement, caption } = parsedFigure;
 
+    const { backgroundColor } = parseDefaultProps(element);
+
     return {
       ...parseEmbedElement(targetElement as HTMLEmbedElement),
+      backgroundColor,
       caption,
     };
   }

packages/core/src/blocks/Heading/block.ts

@@ -1,6 +1,10 @@
 import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
 import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-import { defaultProps } from "../defaultProps.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../defaultProps.js";
 import { createToggleWrapper } from "../ToggleWrapper/createToggleWrapper.js";
 
 const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
@@ -65,6 +69,7 @@ export const createHeadingBlockSpec = createBlockSpec(
       }
 
       return {
+        ...parseDefaultProps(e),
         level,
       };
     },
@@ -83,6 +88,7 @@ export const createHeadingBlockSpec = createBlockSpec(
     },
     toExternalHTML(block) {
       const dom = document.createElement(`h${block.props.level}`);
+      addDefaultPropsExternalHTML(block.props, dom);
 
       return {
         dom,

packages/core/src/blocks/Image/block.ts

@@ -4,7 +4,7 @@ import {
   createBlockConfig,
   createBlockSpec,
 } from "../../schema/index.js";
-import { defaultProps } from "../defaultProps.js";
+import { defaultProps, parseDefaultProps } from "../defaultProps.js";
 import { parseFigureElement } from "../File/helpers/parse/parseFigureElement.js";
 import { createResizableFileBlockWrapper } from "../File/helpers/render/createResizableFileBlockWrapper.js";
 import { createFigureWithCaption } from "../File/helpers/toExternalHTML/createFigureWithCaption.js";
@@ -62,7 +62,12 @@ export const imageParse =
         return undefined;
       }
 
-      return parseImageElement(element as HTMLImageElement);
+      const { backgroundColor } = parseDefaultProps(element);
+
+      return {
+        ...parseImageElement(element as HTMLImageElement),
+        backgroundColor,
+      };
     }
 
     if (element.tagName === "FIGURE") {
@@ -73,8 +78,11 @@ export const imageParse =
 
       const { targetElement, caption } = parsedFigure;
 
+      const { backgroundColor } = parseDefaultProps(element);
+
       return {
         ...parseImageElement(targetElement as HTMLImageElement),
+        backgroundColor,
         caption,
       };
     }

packages/core/src/blocks/ListItem/BulletListItem/block.ts

@@ -1,6 +1,10 @@
 import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
 import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
-import { defaultProps } from "../../defaultProps.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../../defaultProps.js";
 import { handleEnter } from "../../utils/listItemEnterHandler.js";
 import { getListItemContent } from "../getListItemContent.js";
 
@@ -27,23 +31,23 @@ export const createBulletListItemBlockSpec = createBlockSpec(
     },
     parse(element) {
       if (element.tagName !== "LI") {
-        return false;
+        return undefined;
       }
 
       const parent = element.parentElement;
 
       if (parent === null) {
-        return false;
+        return undefined;
       }
 
       if (
         parent.tagName === "UL" ||
         (parent.tagName === "DIV" && parent.parentElement?.tagName === "UL")
       ) {
-        return {};
+        return parseDefaultProps(element);
       }
 
-      return false;
+      return undefined;
     },
     // As `li` elements can contain multiple paragraphs, we need to merge their contents
     // into a single one so that ProseMirror can parse everything correctly.
@@ -60,6 +64,17 @@ export const createBulletListItemBlockSpec = createBlockSpec(
         contentDOM: dom,
       };
     },
+    toExternalHTML(block) {
+      const li = document.createElement("li");
+      const p = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, li);
+      li.appendChild(p);
+
+      return {
+        dom: li,
+        contentDOM: p,
+      };
+    },
   },
   [
     createBlockNoteExtension({

packages/core/src/blocks/ListItem/CheckListItem/block.ts

@@ -1,6 +1,10 @@
 import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
 import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
-import { defaultProps } from "../../defaultProps.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../../defaultProps.js";
 import { handleEnter } from "../../utils/listItemEnterHandler.js";
 import { getListItemContent } from "../getListItemContent.js";
 
@@ -30,22 +34,22 @@ export const createCheckListItemBlockSpec = createBlockSpec(
       if (element.tagName === "input") {
         // Ignore if we already parsed an ancestor list item to avoid double-parsing.
         if (element.closest("[data-content-type]") || element.closest("li")) {
-          return;
+          return undefined;
         }
 
         if ((element as HTMLInputElement).type === "checkbox") {
           return { checked: (element as HTMLInputElement).checked };
         }
-        return;
+        return undefined;
       }
       if (element.tagName !== "LI") {
-        return;
+        return undefined;
       }
 
       const parent = element.parentElement;
 
       if (parent === null) {
-        return;
+        return undefined;
       }
 
       if (
@@ -57,10 +61,10 @@ export const createCheckListItemBlockSpec = createBlockSpec(
           null;
 
         if (checkbox === null) {
-          return;
+          return undefined;
         }
 
-        return { checked: checkbox.checked };
+        return { ...parseDefaultProps(element), checked: checkbox.checked };
       }
 
       return;
@@ -69,14 +73,17 @@ export const createCheckListItemBlockSpec = createBlockSpec(
     // into a single one so that ProseMirror can parse everything correctly.
     parseContent: ({ el, schema }) =>
       getListItemContent(el, schema, "checkListItem"),
-    render(block) {
+    render(block, editor) {
       const dom = document.createDocumentFragment();
       const checkbox = document.createElement("input");
       checkbox.type = "checkbox";
       checkbox.checked = block.props.checked;
       if (block.props.checked) {
         checkbox.setAttribute("checked", "");
       }
+      checkbox.addEventListener("change", () => {
+        editor.updateBlock(block, { props: { checked: !block.props.checked } });
+      });
       // We use a <p> tag, because for <li> tags we'd need a <ul> element to put
       // them in to be semantically correct, which we can't have due to the
       // schema.
@@ -90,6 +97,28 @@ export const createCheckListItemBlockSpec = createBlockSpec(
         contentDOM: paragraph,
       };
     },
+    toExternalHTML(block) {
+      const dom = document.createElement("li");
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = block.props.checked;
+      if (block.props.checked) {
+        checkbox.setAttribute("checked", "");
+      }
+      // We use a <p> tag, because for <li> tags we'd need a <ul> element to put
+      // them in to be semantically correct, which we can't have due to the
+      // schema.
+      const paragraph = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, dom);
+
+      dom.appendChild(checkbox);
+      dom.appendChild(paragraph);
+
+      return {
+        dom,
+        contentDOM: paragraph,
+      };
+    },
     runsBefore: ["bulletListItem"],
   },
   [

packages/core/src/blocks/ListItem/NumberedListItem/block.ts

@@ -1,6 +1,10 @@
 import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
 import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
-import { defaultProps } from "../../defaultProps.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../../defaultProps.js";
 import { handleEnter } from "../../utils/listItemEnterHandler.js";
 import { getListItemContent } from "../getListItemContent.js";
 import { NumberedListIndexingDecorationPlugin } from "./IndexingPlugin.js";
@@ -29,23 +33,34 @@ export const createNumberedListItemBlockSpec = createBlockSpec(
     },
     parse(element) {
       if (element.tagName !== "LI") {
-        return false;
+        return undefined;
       }
 
       const parent = element.parentElement;
 
       if (parent === null) {
-        return false;
+        return undefined;
       }
 
       if (
         parent.tagName === "OL" ||
         (parent.tagName === "DIV" && parent.parentElement?.tagName === "OL")
       ) {
-        return {};
+        const startIndex = parseInt(parent.getAttribute("start") || "1");
+
+        const defaultProps = parseDefaultProps(element);
+
+        if (element.previousElementSibling || startIndex === 1) {
+          return defaultProps;
+        }
+
+        return {
+          ...defaultProps,
+          start: startIndex,
+        };
       }
 
-      return false;
+      return undefined;
     },
     // As `li` elements can contain multiple paragraphs, we need to merge their contents
     // into a single one so that ProseMirror can parse everything correctly.
@@ -62,6 +77,17 @@ export const createNumberedListItemBlockSpec = createBlockSpec(
         contentDOM: dom,
       };
     },
+    toExternalHTML(block) {
+      const li = document.createElement("li");
+      const p = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, li);
+      li.appendChild(p);
+
+      return {
+        dom: li,
+        contentDOM: p,
+      };
+    },
   },
   [
     createBlockNoteExtension({
@@ -70,10 +96,11 @@ export const createNumberedListItemBlockSpec = createBlockSpec(
         {
           find: new RegExp(`^(\\d+)\\.\\s$`),
           replace({ match }) {
+            const start = parseInt(match[1]);
             return {
               type: "numberedListItem",
               props: {
-                start: parseInt(match[1]),
+                start: start !== 1 ? start : undefined,
               },
             };
           },