@blocknote/core 0.29.1 → 0.30.0

package/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -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;

package/src/blocks/QuoteBlockContent/QuoteBlockContent.ts

@@ -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",

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 }) {
@@ -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,9 +202,31 @@ 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,
   ]

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -37,7 +37,8 @@ export const videoPropSchema = {
   },
   // File preview width in px.
   previewWidth: {
-    default: 512,
+    default: undefined,
+    type: "number",
   },
 } satisfies PropSchema;
 
@@ -88,6 +89,11 @@ export const videoParse = (
   element: HTMLElement
 ): Partial<Props<typeof videoBlockConfig.propSchema>> | undefined => {
   if (element.tagName === "VIDEO") {
+    // Ignore if parent figure has already been parsed.
+    if (element.closest("figure")) {
+      return undefined;
+    }
+
     return parseVideoElement(element as HTMLVideoElement);
   }
 
@@ -124,7 +130,9 @@ export const videoToExternalHTML = (
   if (block.props.showPreview) {
     video = document.createElement("video");
     video.src = block.props.url;
-    video.width = block.props.previewWidth;
+    if (block.props.previewWidth) {
+      video.width = block.props.previewWidth;
+    }
   } else {
     video = document.createElement("a");
     video.href = block.props.url;

package/src/blocks/defaultBlockHelpers.ts

@@ -95,3 +95,19 @@ export const defaultBlockToHTML = <
     contentDOM?: HTMLElement;
   };
 };
+
+// Function that merges all paragraphs into a single one separated by line breaks.
+// This is used when parsing blocks like list items and table cells, as they may
+// contain multiple paragraphs that ProseMirror will not be able to handle
+// properly.
+export function mergeParagraphs(element: HTMLElement) {
+  const paragraphs = element.querySelectorAll("p");
+  if (paragraphs.length > 1) {
+    const firstParagraph = paragraphs[0];
+    for (let i = 1; i < paragraphs.length; i++) {
+      const paragraph = paragraphs[i];
+      firstParagraph.innerHTML += "<br>" + paragraph.innerHTML;
+      paragraph.remove();
+    }
+  }
+}

package/src/editor/Block.css

@@ -14,7 +14,6 @@ BASIC STYLES
 }
 
 .bn-block-content {
-  display: flex;
   padding: 3px 0;
   transition: font-size 0.2s;
   width: 100%;
@@ -163,6 +162,7 @@ NESTED BLOCKS
 .bn-block-content::before {
   margin-right: 0;
   content: "";
+  display: inline;
 }
 
 /* Ordered */
@@ -411,6 +411,7 @@ NESTED BLOCKS
   display: flex;
   align-items: center;
   position: relative;
+  max-width: 100%;
 }
 
 [data-file-block] .bn-visual-media {