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

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/ListItem/BulletListItem/block.ts

@@ -65,12 +65,14 @@ export const createBulletListItemBlockSpec = createBlockSpec(
       };
     },
     toExternalHTML(block) {
-      const dom = document.createElement("p");
-      addDefaultPropsExternalHTML(block.props, dom);
+      const li = document.createElement("li");
+      const p = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, li);
+      li.appendChild(p);
 
       return {
-        dom,
-        contentDOM: dom,
+        dom: li,
+        contentDOM: p,
       };
     },
   },

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

@@ -73,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.
@@ -95,7 +98,7 @@ export const createCheckListItemBlockSpec = createBlockSpec(
       };
     },
     toExternalHTML(block) {
-      const dom = document.createDocumentFragment();
+      const dom = document.createElement("li");
       const checkbox = document.createElement("input");
       checkbox.type = "checkbox";
       checkbox.checked = block.props.checked;
@@ -106,7 +109,7 @@ export const createCheckListItemBlockSpec = createBlockSpec(
       // them in to be semantically correct, which we can't have due to the
       // schema.
       const paragraph = document.createElement("p");
-      addDefaultPropsExternalHTML(block.props, paragraph);
+      addDefaultPropsExternalHTML(block.props, dom);
 
       dom.appendChild(checkbox);
       dom.appendChild(paragraph);

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

@@ -78,12 +78,14 @@ export const createNumberedListItemBlockSpec = createBlockSpec(
       };
     },
     toExternalHTML(block) {
-      const dom = document.createElement("p");
-      addDefaultPropsExternalHTML(block.props, dom);
+      const li = document.createElement("li");
+      const p = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, li);
+      li.appendChild(p);
 
       return {
-        dom,
-        contentDOM: dom,
+        dom: li,
+        contentDOM: p,
       };
     },
   },

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

@@ -38,9 +38,15 @@ export const createToggleListItemBlockSpec = createBlockSpec(
       return { ...toggleWrapper, contentDOM: paragraphEl };
     },
     toExternalHTML(block) {
-      const paragraphEl = document.createElement("p");
-      addDefaultPropsExternalHTML(block.props, paragraphEl);
-      return { dom: paragraphEl, contentDOM: paragraphEl };
+      const li = document.createElement("li");
+      const p = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, li);
+      li.appendChild(p);
+
+      return {
+        dom: li,
+        contentDOM: p,
+      };
     },
   },
   [

packages/core/src/blocks/defaultProps.ts

@@ -21,16 +21,27 @@ export const defaultProps = {
 
 export type DefaultProps = Props<typeof defaultProps>;
 
-// Default props which are set on `blockContainer` nodes rather than
-// `blockContent` nodes. Ensures that they are not redundantly added to
-// a custom block's TipTap node attributes.
-export const inheritedProps = ["backgroundColor", "textColor"];
-
-// TODO: Move text/background color props from `blockContainer` node to
-// `blockContent`.
 export const parseDefaultProps = (element: HTMLElement) => {
   const props: Partial<DefaultProps> = {};
 
+  // If the `data-` attribute is found, set the prop to the value, as this most
+  // likely means the parsed element was exported by BlockNote originally.
+  // Otherwise, just use whatever is found in the inline styles, if anything.
+  if (element.hasAttribute("data-background-color")) {
+    props.backgroundColor = element.getAttribute("data-background-color")!;
+  } else if (element.style.backgroundColor) {
+    props.backgroundColor = element.style.backgroundColor;
+  }
+
+  // If the `data-` attribute is found, set the prop to the value, as this most
+  // likely means the parsed element was exported by BlockNote originally.
+  // Otherwise, just use whatever is found in the inline styles, if anything.
+  if (element.hasAttribute("data-text-color")) {
+    props.textColor = element.getAttribute("data-text-color")!;
+  } else if (element.style.color) {
+    props.textColor = element.style.color;
+  }
+
   props.textAlignment = defaultProps.textAlignment.values.includes(
     element.style.textAlign as DefaultProps["textAlignment"],
   )
@@ -48,27 +59,23 @@ export const addDefaultPropsExternalHTML = (
     props.backgroundColor &&
     props.backgroundColor !== defaultProps.backgroundColor.default
   ) {
-    if (props.backgroundColor in COLORS_DEFAULT) {
-      element.style.setProperty(
-        `--blocknote-background-${props.backgroundColor}`,
-        COLORS_DEFAULT[props.backgroundColor].background,
-      );
-      element.style.backgroundColor = `var(--blocknote-background-${props.backgroundColor})`;
-    } else {
-      element.style.backgroundColor = props.backgroundColor;
-    }
+    // The color can be any string. If the string matches one of the default
+    // theme color names, set the theme color. Otherwise, set the color as-is
+    // (may be a CSS color name, hex value, RGB value, etc).
+    element.style.backgroundColor =
+      props.backgroundColor in COLORS_DEFAULT
+        ? COLORS_DEFAULT[props.backgroundColor].background
+        : props.backgroundColor;
   }
 
   if (props.textColor && props.textColor !== defaultProps.textColor.default) {
-    if (props.textColor in COLORS_DEFAULT) {
-      element.style.setProperty(
-        `--blocknote-text-${props.textColor}`,
-        COLORS_DEFAULT[props.textColor].text,
-      );
-      element.style.color = `var(--blocknote-text-${props.textColor})`;
-    } else {
-      element.style.color = props.textColor;
-    }
+    // The color can be any string. If the string matches one of the default
+    // theme color names, set the theme color. Otherwise, set the color as-is
+    // (may be a CSS color name, hex value, RGB value, etc).
+    element.style.color =
+      props.textColor in COLORS_DEFAULT
+        ? COLORS_DEFAULT[props.textColor].text
+        : props.textColor;
   }
 
   if (

packages/core/src/editor/Block.css

@@ -559,76 +559,94 @@ NESTED BLOCKS
 /* TODO: should this be here? */
 
 /* TEXT COLORS */
-[data-text-color="gray"] {
+[data-text-color="gray"],
+.bn-block:has(> .bn-block-content[data-text-color="gray"]) {
   color: #9b9a97;
 }
 
-[data-text-color="brown"] {
+[data-text-color="brown"],
+.bn-block:has(> .bn-block-content[data-text-color="brown"]) {
   color: #64473a;
 }
 
-[data-text-color="red"] {
+[data-text-color="red"],
+.bn-block:has(> .bn-block-content[data-text-color="red"]) {
   color: #e03e3e;
 }
 
-[data-text-color="orange"] {
+[data-text-color="orange"],
+.bn-block:has(> .bn-block-content[data-text-color="orange"]) {
   color: #d9730d;
 }
 
-[data-text-color="yellow"] {
+[data-text-color="yellow"],
+.bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
   color: #dfab01;
 }
 
-[data-text-color="green"] {
+[data-text-color="green"],
+.bn-block:has(> .bn-block-content[data-text-color="green"]) {
   color: #4d6461;
 }
 
-[data-text-color="blue"] {
+[data-text-color="blue"],
+.bn-block:has(> .bn-block-content[data-text-color="blue"]) {
   color: #0b6e99;
 }
 
-[data-text-color="purple"] {
+[data-text-color="purple"],
+.bn-block:has(> .bn-block-content[data-text-color="purple"]) {
   color: #6940a5;
 }
 
-[data-text-color="pink"] {
+[data-text-color="pink"],
+.bn-block:has(> .bn-block-content[data-text-color="pink"]) {
   color: #ad1a72;
 }
 
 /* BACKGROUND COLORS */
-[data-background-color="gray"] {
+[data-background-color="gray"],
+.bn-block:has(> .bn-block-content[data-background-color="gray"]) {
   background-color: #ebeced;
 }
 
-[data-background-color="brown"] {
+[data-background-color="brown"],
+.bn-block:has(> .bn-block-content[data-background-color="brown"]) {
   background-color: #e9e5e3;
 }
 
-[data-background-color="red"] {
+[data-background-color="red"],
+.bn-block:has(> .bn-block-content[data-background-color="red"]) {
   background-color: #fbe4e4;
 }
 
-[data-background-color="orange"] {
+[data-background-color="orange"],
+.bn-block:has(> .bn-block-content[data-background-color="orange"]) {
   background-color: #f6e9d9;
 }
 
-[data-background-color="yellow"] {
+[data-background-color="yellow"],
+.bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
   background-color: #fbf3db;
 }
 
-[data-background-color="green"] {
+[data-background-color="green"],
+.bn-block:has(> .bn-block-content[data-background-color="green"]) {
   background-color: #ddedea;
 }
 
-[data-background-color="blue"] {
+[data-background-color="blue"],
+.bn-block:has(> .bn-block-content[data-background-color="blue"]) {
   background-color: #ddebf1;
 }
 
-[data-background-color="purple"] {
+[data-background-color="purple"],
+.bn-block:has(> .bn-block-content[data-background-color="purple"]) {
   background-color: #eae4f2;
 }
 
-[data-background-color="pink"] {
+[data-background-color="pink"],
+.bn-block:has(> .bn-block-content[data-background-color="pink"]) {
   background-color: #f4dfeb;
 }
 

packages/core/src/editor/BlockNoteEditor.ts

@@ -571,7 +571,6 @@ export class BlockNoteEditor<
       headers: boolean;
     };
   };
-
   public static create<
     Options extends Partial<BlockNoteEditorOptions<any, any, any>> | undefined,
   >(

packages/core/src/editor/BlockNoteExtensions.ts

@@ -13,8 +13,10 @@ import type { ThreadStore } from "../comments/index.js";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension.js";
 import { BlockChangePlugin } from "../extensions/BlockChange/BlockChangePlugin.js";
 import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
+import { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
 import { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
 import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
+import { SchemaMigrationPlugin } from "../extensions/Collaboration/schemaMigration/SchemaMigrationPlugin.js";
 import { CommentMark } from "../extensions/Comments/CommentMark.js";
 import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
@@ -58,7 +60,6 @@ import type {
   SupportedExtension,
 } from "./BlockNoteEditor.js";
 import { BlockNoteSchema } from "../blocks/BlockNoteSchema.js";
-import { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
 
 type ExtensionOptions<
   BSchema extends BlockSchema,
@@ -127,6 +128,9 @@ export const getBlockNoteExtensions = <
       editor: opts.editor,
       collaboration: opts.collaboration,
     });
+    ret["schemaMigrationPlugin"] = new SchemaMigrationPlugin(
+      opts.collaboration.fragment,
+    );
   }
 
   // Note: this is pretty hardcoded and will break when user provides plugins with same keys.

packages/core/src/extensions/BackgroundColor/BackgroundColorExtension.ts

@@ -7,7 +7,7 @@ export const BackgroundColorExtension = Extension.create({
   addGlobalAttributes() {
     return [
       {
-        types: ["blockContainer", "tableCell", "tableHeader"],
+        types: ["tableCell", "tableHeader"],
         attributes: {
           backgroundColor: getBackgroundColorAttribute(),
         },