@blocknote/core 0.29.1 → 0.30.1

package/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts

@@ -12,6 +12,7 @@ import {
 } from "../../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
+import { getListItemContent } from "../getListItemContent.js";
 import { handleEnter } from "../ListItemKeyboardShortcuts.js";
 
 export const checkListItemPropSchema = {
@@ -51,7 +52,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
                 props: {
                   checked: false as any,
                 },
-              })
+              }),
             )
             // Removes the characters used to set the list.
             .deleteRange({ from: range.from, to: range.to });
@@ -76,7 +77,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
                 props: {
                   checked: true as any,
                 },
-              })
+              }),
             )
             // Removes the characters used to set the list.
             .deleteRange({ from: range.from, to: range.to });
@@ -101,7 +102,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
           updateBlockCommand(blockInfo.bnBlock.beforePos, {
             type: "checkListItem",
             props: {},
-          })
+          }),
         );
       },
     };
@@ -109,10 +110,12 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
 
   parseHTML() {
     return [
+      // Parse from internal HTML.
       {
         tag: "div[data-content-type=" + this.name + "]",
+        contentElement: ".bn-inline-content",
       },
-      // Checkbox only.
+      // Parse from external HTML.
       {
         tag: "input",
         getAttrs: (element) => {
@@ -120,6 +123,11 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
             return false;
           }
 
+          // Ignore if we already parsed an ancestor list item to avoid double-parsing.
+          if (element.closest("[data-content-type]") || element.closest("li")) {
+            return false;
+          }
+
           if ((element as HTMLInputElement).type === "checkbox") {
             return { checked: (element as HTMLInputElement).checked };
           }
@@ -128,7 +136,6 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
         },
         node: "checkListItem",
       },
-      // Container element for checkbox + label.
       {
         tag: "li",
         getAttrs: (element) => {
@@ -144,11 +151,11 @@ 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(
-                "input[type=checkbox]"
+                "input[type=checkbox]",
               ) as HTMLInputElement) || null;
 
             if (checkbox === null) {
@@ -160,6 +167,10 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
 
           return false;
         },
+        // 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) =>
+          getListItemContent(node, schema, this.name),
         node: "checkListItem",
       },
     ];
@@ -185,7 +196,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
       },
-      this.options.domAttributes?.inlineContent || {}
+      this.options.domAttributes?.inlineContent || {},
     );
 
     dom.insertBefore(checkbox, contentDOM);
@@ -223,12 +234,12 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
         if (typeof getPos !== "boolean") {
           const beforeBlockContainerPos = getNearestBlockPos(
             editor.state.doc,
-            getPos()
+            getPos(),
           );
 
           if (beforeBlockContainerPos.node.type.name !== "blockContainer") {
             throw new Error(
-              `Expected blockContainer node, got ${beforeBlockContainerPos.node.type.name}`
+              `Expected blockContainer node, got ${beforeBlockContainerPos.node.type.name}`,
             );
           }
 
@@ -238,7 +249,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
               props: {
                 checked: checkbox.checked as any,
               },
-            })
+            }),
           );
         }
       };
@@ -251,7 +262,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
           ...(this.options.domAttributes?.blockContent || {}),
           ...HTMLAttributes,
         },
-        this.options.domAttributes?.inlineContent || {}
+        this.options.domAttributes?.inlineContent || {},
       );
 
       if (typeof getPos !== "boolean") {
@@ -284,5 +295,5 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
 
 export const CheckListItem = createBlockSpecFromStronglyTypedTiptapNode(
   checkListItemBlockContent,
-  checkListItemPropSchema
+  checkListItemPropSchema,
 );

package/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -36,7 +36,7 @@ export const handleEnter = (editor: BlockNoteEditor<any, any, any>) => {
             updateBlockCommand(blockContainer.beforePos, {
               type: "paragraph",
               props: {},
-            })
+            }),
           );
         }
 

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts

@@ -35,7 +35,7 @@ export const NumberedListIndexingPlugin = () => {
           // first block in its nesting level, or the previous block is not an ordered list item.
 
           const prevBlock = tr.doc.resolve(
-            blockInfo.bnBlock.beforePos
+            blockInfo.bnBlock.beforePos,
           ).nodeBefore;
 
           if (prevBlock) {

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -9,6 +9,7 @@ import {
 } from "../../../schema/index.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";
 
@@ -64,7 +65,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
                   ({
                     start: startIndex,
                   } as any),
-              })
+              }),
             )
             // Removes the "1." characters used to set the list.
             .deleteRange({ from: range.from, to: range.to });
@@ -89,7 +90,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
           updateBlockCommand(blockInfo.bnBlock.beforePos, {
             type: "numberedListItem",
             props: {},
-          })
+          }),
         );
       },
     };
@@ -101,11 +102,12 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
 
   parseHTML() {
     return [
+      // Parse from internal HTML.
       {
         tag: "div[data-content-type=" + this.name + "]",
+        contentElement: ".bn-inline-content",
       },
-      // Case for regular HTML list structure.
-      // (e.g.: when pasting from other apps)
+      // Parse from external HTML.
       {
         tag: "li",
         getAttrs: (element) => {
@@ -121,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;
@@ -137,29 +139,10 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
 
           return false;
         },
-        node: "numberedListItem",
-      },
-      // Case for BlockNote list structure.
-      // (e.g.: when pasting from blocknote)
-      {
-        tag: "p",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          const parent = element.parentElement;
-
-          if (parent === null) {
-            return false;
-          }
-
-          if (parent.getAttribute("data-content-type") === "numberedListItem") {
-            return {};
-          }
-
-          return false;
-        },
+        // 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) =>
+          getListItemContent(node, schema, this.name),
         priority: 300,
         node: "numberedListItem",
       },
@@ -177,12 +160,12 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
       },
-      this.options.domAttributes?.inlineContent || {}
+      this.options.domAttributes?.inlineContent || {},
     );
   },
 });
 
 export const NumberedListItem = createBlockSpecFromStronglyTypedTiptapNode(
   NumberedListItemBlockContent,
-  numberedListItemPropSchema
+  numberedListItemPropSchema,
 );

package/src/blocks/ListItemBlockContent/getListItemContent.ts

@@ -0,0 +1,115 @@
+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);
+
+  // TODO: This will be unnecessary in the future: https://github.com/ProseMirror/prosemirror-model/commit/166188d4f9db96eb86fb7de62e72049c86c9dd79
+  const node = _node as 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;
+}

package/src/blocks/PageBreakBlockContent/PageBreakBlockContent.ts

@@ -22,7 +22,7 @@ export const pageBreakRender = () => {
   };
 };
 export const pageBreakParse = (
-  element: HTMLElement
+  element: HTMLElement,
 ): Partial<Props<typeof pageBreakConfig.propSchema>> | undefined => {
   if (element.tagName === "DIV" && element.hasAttribute("data-page-break")) {
     return {

package/src/blocks/PageBreakBlockContent/getPageBreakSlashMenuItems.ts

@@ -10,9 +10,9 @@ import { pageBreakSchema } from "./schema.js";
 
 export function checkPageBreakBlocksInSchema<
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
-  editor: BlockNoteEditor<any, I, S>
+  editor: BlockNoteEditor<any, I, S>,
 ): editor is BlockNoteEditor<typeof pageBreakSchema.blockSchema, I, S> {
   return (
     "pageBreak" in editor.schema.blockSchema &&
@@ -24,7 +24,7 @@ export function checkPageBreakBlocksInSchema<
 export function getPageBreakSlashMenuItems<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(editor: BlockNoteEditor<BSchema, I, S>) {
   const items: (Omit<DefaultSuggestionItem, "key"> & { key: "page_break" })[] =
     [];

package/src/blocks/PageBreakBlockContent/schema.ts

@@ -18,9 +18,9 @@ export const pageBreakSchema = BlockNoteSchema.create({
 export const withPageBreak = <
   B extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
-  schema: BlockNoteSchema<B, I, S>
+  schema: BlockNoteSchema<B, I, S>,
 ) => {
   return BlockNoteSchema.create({
     blockSpecs: {

package/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -31,7 +31,7 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
           updateBlockCommand(blockInfo.bnBlock.beforePos, {
             type: "paragraph",
             props: {},
-          })
+          }),
         );
       },
     };
@@ -39,10 +39,14 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
 
   parseHTML() {
     return [
-      { tag: "div[data-content-type=" + this.name + "]" },
+      // Parse from internal HTML.
+      {
+        tag: "div[data-content-type=" + this.name + "]",
+        contentElement: ".bn-inline-content",
+      },
+      // Parse from external HTML.
       {
         tag: "p",
-        priority: 200,
         getAttrs: (element) => {
           if (typeof element === "string" || !element.textContent?.trim()) {
             return false;
@@ -63,12 +67,12 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
       },
-      this.options.domAttributes?.inlineContent || {}
+      this.options.domAttributes?.inlineContent || {},
     );
   },
 });
 
 export const Paragraph = createBlockSpecFromStronglyTypedTiptapNode(
   ParagraphBlockContent,
-  paragraphPropSchema
+  paragraphPropSchema,
 );

package/src/blocks/QuoteBlockContent/QuoteBlockContent.ts

@@ -36,7 +36,7 @@ export const QuoteBlockContent = createStronglyTypedTiptapNode({
               updateBlockCommand(blockInfo.bnBlock.beforePos, {
                 type: "quote",
                 props: {},
-              })
+              }),
             )
             // Removes the ">" character used to set the list.
             .deleteRange({ from: range.from, to: range.to });
@@ -59,7 +59,7 @@ export const QuoteBlockContent = createStronglyTypedTiptapNode({
         return this.editor.commands.command(
           updateBlockCommand(blockInfo.bnBlock.beforePos, {
             type: "quote",
-          })
+          }),
         );
       },
     };
@@ -67,7 +67,12 @@ export const QuoteBlockContent = createStronglyTypedTiptapNode({
 
   parseHTML() {
     return [
-      { tag: "div[data-content-type=" + this.name + "]" },
+      // Parse from internal HTML.
+      {
+        tag: "div[data-content-type=" + this.name + "]",
+        contentElement: ".bn-inline-content",
+      },
+      // Parse from external HTML.
       {
         tag: "blockquote",
         node: "quote",
@@ -83,12 +88,12 @@ export const QuoteBlockContent = createStronglyTypedTiptapNode({
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
       },
-      this.options.domAttributes?.inlineContent || {}
+      this.options.domAttributes?.inlineContent || {},
     );
   },
 });
 
 export const Quote = createBlockSpecFromStronglyTypedTiptapNode(
   QuoteBlockContent,
-  quotePropSchema
+  quotePropSchema,
 );

package/src/blocks/README.md

@@ -1,3 +1,3 @@
 ### @blocknote/core/src/blocks
 
-The default built-in blocks that ship with BlockNote
+The default built-in blocks that ship with BlockNote

package/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 } from "prosemirror-model";
+import { DOMParser, Fragment, Node as PMNode, Schema } from "prosemirror-model";
 import { TableView } from "prosemirror-tables";
 
 import { NodeView } from "prosemirror-view";
@@ -27,7 +27,11 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
   isolating: true,
 
   parseHTML() {
-    return [{ tag: "table" }];
+    return [
+      {
+        tag: "table",
+      },
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {
@@ -38,7 +42,7 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
       },
-      this.options.domAttributes?.inlineContent || {}
+      this.options.domAttributes?.inlineContent || {},
     );
   },
 
@@ -55,18 +59,18 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
         constructor(
           public node: PMNode,
           public cellMinWidth: number,
-          public blockContentHTMLAttributes: Record<string, string>
+          public blockContentHTMLAttributes: Record<string, string>,
         ) {
           super(node, cellMinWidth);
 
           const blockContent = document.createElement("div");
           blockContent.className = mergeCSSClasses(
             "bn-block-content",
-            blockContentHTMLAttributes.class
+            blockContentHTMLAttributes.class,
           );
           blockContent.setAttribute("data-content-type", "table");
           for (const [attribute, value] of Object.entries(
-            blockContentHTMLAttributes
+            blockContentHTMLAttributes,
           )) {
             if (attribute !== "class") {
               blockContent.setAttribute(attribute, value);
@@ -113,17 +117,6 @@ const TableParagraph = createStronglyTypedTiptapNode({
 
   parseHTML() {
     return [
-      {
-        preserveWhitespace: "full",
-        // set this rule as high priority so it takes precedence over the default paragraph rule,
-        // but only if we're in the tableContent context
-        priority: 210,
-        context: "tableContent",
-        tag: "p",
-        getAttrs: (_element) => {
-          return {};
-        },
-      },
       {
         tag: "p",
         getAttrs: (element) => {
@@ -131,18 +124,24 @@ const TableParagraph = createStronglyTypedTiptapNode({
             return false;
           }
 
+          // Only parse in internal HTML.
+          if (!element.closest("[data-content-type]")) {
+            return false;
+          }
+
           const parent = element.parentElement;
 
           if (parent === null) {
             return false;
           }
 
-          if (parent.tagName === "TD") {
+          if (parent.tagName === "TD" || parent.tagName === "TH") {
             return {};
           }
 
           return false;
         },
+        node: "tableParagraph",
       },
     ];
   },
@@ -152,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,
@@ -167,10 +202,32 @@ export const Table = createBlockSpecFromStronglyTypedTiptapNode(
        * So, we manually fix this up when reading back in the `nodeToBlock` and only ever place a single tableContent back into the cell.
        */
       content: "tableContent+",
+      parseHTML() {
+        return [
+          {
+            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) =>
+              parseTableContent(node as HTMLElement, schema),
+          },
+        ];
+      },
     }),
     TableCell.extend({
       content: "tableContent+",
+      parseHTML() {
+        return [
+          {
+            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) =>
+              parseTableContent(node as HTMLElement, schema),
+          },
+        ];
+      },
     }),
     TableRow,
-  ]
+  ],
 );