an attempt

packages/core/package.json

@@ -96,7 +96,7 @@
     "hast-util-from-dom": "^5.0.1",
     "prosemirror-dropcursor": "^1.8.1",
     "prosemirror-highlight": "^0.13.0",
-    "prosemirror-model": "^1.24.1",
+    "prosemirror-model": "^1.25.1",
     "prosemirror-state": "^1.4.3",
     "prosemirror-tables": "^1.6.4",
     "prosemirror-transform": "^1.10.2",

packages/core/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -1,17 +1,14 @@
 import { InputRule } from "@tiptap/core";
-import { DOMParser } from "@tiptap/pm/model";
 import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import { getBlockInfoFromSelection } from "../../../api/getBlockInfoFromPos.js";
 import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
 } from "../../../schema/index.js";
-import {
-  createDefaultBlockDOMOutputSpec,
-  mergeParagraphs,
-} from "../../defaultBlockHelpers.js";
+import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
+import { getListItemContent } from "../getListItemContent.js";
 import { handleEnter } from "../ListItemKeyboardShortcuts.js";
 
 export const bulletListItemPropSchema = {
@@ -98,7 +95,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
 
           if (
             parent.tagName === "UL" ||
-            (parent.tagName === "DIV" && parent.parentElement!.tagName === "UL")
+            (parent.tagName === "DIV" && parent.parentElement?.tagName === "UL")
           ) {
             return {};
           }
@@ -107,20 +104,8 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
         },
         // As `li` elements can contain multiple paragraphs, we need to merge their contents
         // into a single one so that ProseMirror can parse everything correctly.
-        getContent: (node, schema) => {
-          mergeParagraphs(node as HTMLElement);
-
-          const parser = DOMParser.fromSchema(schema);
-
-          const parentNode = parser.parse(
-            (node as HTMLElement).querySelector("p") || node,
-            {
-              topNode: schema.nodes[this.name].create(),
-            }
-          );
-
-          return parentNode.content;
-        },
+        getContent: (node, schema) =>
+          getListItemContent(node, schema, this.name),
         node: "bulletListItem",
       },
     ];

packages/core/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts

@@ -1,5 +1,4 @@
 import { InputRule } from "@tiptap/core";
-import { DOMParser } from "@tiptap/pm/model";
 import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import {
   getBlockInfoFromSelection,
@@ -11,11 +10,9 @@ import {
   createStronglyTypedTiptapNode,
   propsToAttributes,
 } from "../../../schema/index.js";
-import {
-  createDefaultBlockDOMOutputSpec,
-  mergeParagraphs,
-} from "../../defaultBlockHelpers.js";
+import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
+import { getListItemContent } from "../getListItemContent.js";
 import { handleEnter } from "../ListItemKeyboardShortcuts.js";
 
 export const checkListItemPropSchema = {
@@ -154,7 +151,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
 
           if (
             parent.tagName === "UL" ||
-            (parent.tagName === "DIV" && parent.parentElement!.tagName === "UL")
+            (parent.tagName === "DIV" && parent.parentElement?.tagName === "UL")
           ) {
             const checkbox =
               (element.querySelector(
@@ -172,20 +169,8 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
         },
         // As `li` elements can contain multiple paragraphs, we need to merge their contents
         // into a single one so that ProseMirror can parse everything correctly.
-        getContent: (node, schema) => {
-          mergeParagraphs(node as HTMLElement);
-
-          const parser = DOMParser.fromSchema(schema);
-
-          const parentNode = parser.parse(
-            (node as HTMLElement).querySelector("p") || node,
-            {
-              topNode: schema.nodes[this.name].create(),
-            }
-          );
-
-          return parentNode.content;
-        },
+        getContent: (node, schema) =>
+          getListItemContent(node, schema, this.name),
         node: "checkListItem",
       },
     ];

packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -1,5 +1,4 @@
 import { InputRule } from "@tiptap/core";
-import { DOMParser } from "@tiptap/pm/model";
 import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import { getBlockInfoFromSelection } from "../../../api/getBlockInfoFromPos.js";
 import {
@@ -8,11 +7,9 @@ import {
   createStronglyTypedTiptapNode,
   propsToAttributes,
 } from "../../../schema/index.js";
-import {
-  createDefaultBlockDOMOutputSpec,
-  mergeParagraphs,
-} from "../../defaultBlockHelpers.js";
+import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
+import { getListItemContent } from "../getListItemContent.js";
 import { handleEnter } from "../ListItemKeyboardShortcuts.js";
 import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin.js";
 
@@ -126,7 +123,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
 
           if (
             parent.tagName === "OL" ||
-            (parent.tagName === "DIV" && parent.parentElement!.tagName === "OL")
+            (parent.tagName === "DIV" && parent.parentElement?.tagName === "OL")
           ) {
             const startIndex =
               parseInt(parent.getAttribute("start") || "1") || 1;
@@ -144,20 +141,9 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
         },
         // As `li` elements can contain multiple paragraphs, we need to merge their contents
         // into a single one so that ProseMirror can parse everything correctly.
-        getContent: (node, schema) => {
-          mergeParagraphs(node as HTMLElement);
-
-          const parser = DOMParser.fromSchema(schema);
-
-          const parentNode = parser.parse(
-            (node as HTMLElement).querySelector("p") || node,
-            {
-              topNode: schema.nodes[this.name].create(),
-            }
-          );
-
-          return parentNode.content;
-        },
+        getContent: (node, schema) =>
+          getListItemContent(node, schema, this.name),
+        priority: 300,
         node: "numberedListItem",
       },
     ];

packages/core/src/blocks/ListItemBlockContent/getListItemContent.ts

@@ -0,0 +1,117 @@
+import { DOMParser, Fragment, Schema } from "prosemirror-model";
+
+/**
+ * This function is used to parse the content of a list item external HTML node.
+ *
+ * Due to a change in how prosemirror-model handles parsing elements, we have additional flexibility in how we can "fit" content into a list item.
+ *
+ * We've decided to take an approach that is similar to Notion. The core rules of the algorithm are:
+ *
+ *  - If the first child of an `li` has ONLY text content, take the text content, and flatten it into the list item. Subsequent siblings are carried over as is, as children of the list item.
+ *    - e.g. `<li><h1>Hello</h1><p>World</p></li> -> <li>Hello<blockGroup><blockContainer><p>World</p></blockContainer></blockGroup></li>`
+ *  - Else, take the content and insert it as children instead.
+ *    - e.g. `<li><img src="url" /></li> -> <li><p></p><blockGroup><blockContainer><img src="url" /></blockContainer></blockGroup></li>`
+ *
+ * This ensures that a list item's content is always valid ProseMirror content. Smoothing over differences between how external HTML may be rendered, and how ProseMirror expects content to be structured.
+ */
+export function getListItemContent(
+  /**
+   * The `li` element to parse.
+   */
+  node: Node,
+  /**
+   * The schema to use for parsing.
+   */
+  schema: Schema,
+  /**
+   * The name of the list item node.
+   */
+  name: string
+): Fragment {
+  /**
+   * To actually implement this algorithm, we need to leverage ProseMirror's "fitting" algorithm.
+   * Where, if content is parsed which doesn't fit into the current node, it will be moved into the parent node.
+   *
+   * This allows us to parse multiple pieces of content from within the list item (even though it normally would not match the list item's schema) and "throw" the excess content into the list item's children.
+   *
+   * The expected return value is a `Fragment` which contains the list item's content as the first element, and the children wrapped in a blockGroup node. Like so:
+   * ```
+   * Fragment<[Node<Text>, Node<BlockGroup<Node<BlockContainer<any>>>>]>
+   * ```
+   */
+  const parser = DOMParser.fromSchema(schema);
+
+  if (!(node instanceof HTMLElement)) {
+    // TODO: This will be unnecessary in the future: https://github.com/ProseMirror/prosemirror-model/commit/166188d4f9db96eb86fb7de62e72049c86c9dd79
+    throw new Error("Node is not an HTMLElement");
+  }
+
+  // Move the `li` element's content into a new `div` element
+  // This is a hacky workaround to not re-trigger list item parsing,
+  // when we are looking to understand what the list item's content actually is, in terms of the schema.
+  const clonedNodeDiv = document.createElement("div");
+  // Mark the `div` element as a `blockGroup` to make the parsing easier.
+  clonedNodeDiv.setAttribute("data-node-type", "blockGroup");
+  // Clone all children of the `li` element into the new `div` element
+  for (const child of Array.from(node.childNodes)) {
+    clonedNodeDiv.appendChild(child.cloneNode(true));
+  }
+
+  // Parses children of the `li` element into a `blockGroup` with `blockContainer` node children
+  // This is the structure of list item children, so parsing into this structure allows for
+  // easy separation of list item content from child list item content.
+  let blockGroupNode = parser.parse(clonedNodeDiv, {
+    topNode: schema.nodes.blockGroup.create(),
+  });
+
+  // There is an edge case where a list item's content may contain a `<input>` element.
+  // Causing it to be recognized as a `checkListItem`.
+  // We want to skip this, and just parse the list item's content as is.
+  if (blockGroupNode.firstChild?.firstChild?.type.name === "checkListItem") {
+    // We skip the first child, by cutting it out of the `blockGroup` node.
+    // and continuing with the rest of the algorithm.
+    blockGroupNode = blockGroupNode.copy(
+      blockGroupNode.content.cut(
+        blockGroupNode.firstChild.firstChild.nodeSize + 2
+      )
+    );
+  }
+
+  // Structure above is `blockGroup<blockContainer<any>[]>`
+  // We want to extract the first `blockContainer` node's content, and see if it is a text block.
+  const listItemsFirstChild = blockGroupNode.firstChild?.firstChild;
+
+  // If the first node is not a text block, then it's first child is not compatible with the list item node.
+  if (!listItemsFirstChild?.isTextblock) {
+    // So, we do not try inserting anything into the list item, and instead return anything we found as children for the list item.
+    return Fragment.from(blockGroupNode);
+  }
+
+  // If it is a text block, then we know it only contains text content.
+  // So, we extract it, and insert its content into the `listItemNode`.
+  // The remaining nodes in the `blockGroup` stay in-place.
+  const listItemNode = schema.nodes[name].create(
+    {},
+    listItemsFirstChild.content
+  );
+
+  // We have `blockGroup<listItemsFirstChild, ...blockContainer<any>[]>`
+  // We want to extract out the rest of the nodes as `<...blockContainer<any>[]>`
+  const remainingListItemChildren = blockGroupNode.content.cut(
+    // +2 for the `blockGroup` node's start and end markers
+    listItemsFirstChild.nodeSize + 2
+  );
+  const hasRemainingListItemChildren = remainingListItemChildren.size > 0;
+
+  if (hasRemainingListItemChildren) {
+    // Copy the remaining list item children back into the `blockGroup` node.
+    // This will make it back into: `blockGroup<...blockContainer<any>[]>`
+    const listItemsChildren = blockGroupNode.copy(remainingListItemChildren);
+
+    // Return the `listItem` node's content, then add the parsed children after to be lifted out by ProseMirror "fitting" algorithm.
+    return listItemNode.content.addToEnd(listItemsChildren);
+  }
+
+  // Otherwise, just return the `listItem` node's content.
+  return listItemNode.content;
+}

packages/core/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -1,7 +1,7 @@
 import { TableCell } from "@tiptap/extension-table-cell";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { TableRow } from "@tiptap/extension-table-row";
-import { Node as PMNode, DOMParser } from "prosemirror-model";
+import { DOMParser, Fragment, Node as PMNode, Schema } from "prosemirror-model";
 import { TableView } from "prosemirror-tables";
 
 import { NodeView } from "prosemirror-view";
@@ -10,10 +10,7 @@ import {
   createStronglyTypedTiptapNode,
 } from "../../schema/index.js";
 import { mergeCSSClasses } from "../../util/browser.js";
-import {
-  createDefaultBlockDOMOutputSpec,
-  mergeParagraphs,
-} from "../defaultBlockHelpers.js";
+import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
 import { EMPTY_CELL_WIDTH, TableExtension } from "./TableExtension.js";
 
@@ -154,6 +151,42 @@ const TableParagraph = createStronglyTypedTiptapNode({
   },
 });
 
+/**
+ * This will flatten a node's content to fit into a table cell's paragraph.
+ */
+function parseTableContent(node: HTMLElement, schema: Schema) {
+  const parser = DOMParser.fromSchema(schema);
+
+  // This will parse the content of the table paragraph as though it were a blockGroup.
+  // Resulting in a structure like:
+  // <blockGroup>
+  //   <blockContainer>
+  //     <p>Hello</p>
+  //   </blockContainer>
+  //   <blockContainer>
+  //     <p>Hello</p>
+  //   </blockContainer>
+  // </blockGroup>
+  const parsedContent = parser.parse(node, {
+    topNode: schema.nodes.blockGroup.create(),
+  });
+  const extractedContent: PMNode[] = [];
+
+  // Try to extract any content within the blockContainer.
+  parsedContent.content.descendants((child) => {
+    // As long as the child is an inline node, we can append it to the fragment.
+    if (child.isInline) {
+      // And append it to the fragment
+      extractedContent.push(child);
+      return false;
+    }
+
+    return undefined;
+  });
+
+  return Fragment.fromArray(extractedContent);
+}
+
 export const Table = createBlockSpecFromStronglyTypedTiptapNode(
   TableBlockContent,
   tablePropSchema,
@@ -175,20 +208,8 @@ export const Table = createBlockSpecFromStronglyTypedTiptapNode(
             tag: "th",
             // As `th` elements can contain multiple paragraphs, we need to merge their contents
             // into a single one so that ProseMirror can parse everything correctly.
-            getContent: (node, schema) => {
-              mergeParagraphs(node as HTMLElement);
-
-              const parser = DOMParser.fromSchema(schema);
-
-              const parentNode = parser.parse(
-                (node as HTMLElement).querySelector("p") || node,
-                {
-                  topNode: schema.nodes[this.name].create(),
-                }
-              );
-
-              return parentNode.content;
-            },
+            getContent: (node, schema) =>
+              parseTableContent(node as HTMLElement, schema),
           },
         ];
       },
@@ -201,20 +222,8 @@ export const Table = createBlockSpecFromStronglyTypedTiptapNode(
             tag: "td",
             // As `td` elements can contain multiple paragraphs, we need to merge their contents
             // into a single one so that ProseMirror can parse everything correctly.
-            getContent: (node, schema) => {
-              mergeParagraphs(node as HTMLElement);
-
-              const parser = DOMParser.fromSchema(schema);
-
-              const parentNode = parser.parse(
-                (node as HTMLElement).querySelector("p") || node,
-                {
-                  topNode: schema.nodes[this.name].create(),
-                }
-              );
-
-              return parentNode.content;
-            },
+            getContent: (node, schema) =>
+              parseTableContent(node as HTMLElement, schema),
           },
         ];
       },