feat: getContent parsing for custom blocks

nperez0111 · nperez0111 · commit 92952e7b2ae2 · 2025-08-01T12:21:43.000+02:00
diff --git a/packages/core/src/blks/BulletListItem/definition.ts b/packages/core/src/blks/BulletListItem/definition.ts
@@ -1,6 +1,7 @@
 import { updateBlockTr } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import { getBlockInfoFromTransaction } from "../../api/getBlockInfoFromPos.js";
 import { defaultProps } from "../../blocks/defaultProps.js";
+import { getListItemContent } from "../../blocks/ListItemBlockContent/getListItemContent.js";
 import {
   createBlockConfig,
   createBlockNoteExtension,
@@ -38,12 +39,10 @@ export const definition = createBlockSpec(config).implementation(
 
       return false;
     },
-    // TODO how do we represent this??
-    //   // 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: "bulletListItem",
+    // As `li` elements can contain multiple paragraphs, we need to merge their contents
+    // into a single one so that ProseMirror can parse everything correctly.
+    parseContent: ({ el, schema }) =>
+      getListItemContent(el, schema, "bulletListItem"),
     render() {
       const div = document.createElement("div");
       // We use a <p> tag, because for <li> tags we'd need a <ul> element to put
diff --git a/packages/core/src/blks/CheckListItem/definition.ts b/packages/core/src/blks/CheckListItem/definition.ts
@@ -1,6 +1,7 @@
 import { updateBlockTr } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import { getBlockInfoFromTransaction } from "../../api/getBlockInfoFromPos.js";
 import { defaultProps } from "../../blocks/defaultProps.js";
+import { getListItemContent } from "../../blocks/ListItemBlockContent/getListItemContent.js";
 import {
   createBlockConfig,
   createBlockNoteExtension,
@@ -58,12 +59,10 @@ export const definition = createBlockSpec(config).implementation(
 
       return;
     },
-    // TODO how do we represent this??
-    //   // 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: "bulletListItem",
+    // As `li` elements can contain multiple paragraphs, we need to merge their contents
+    // into a single one so that ProseMirror can parse everything correctly.
+    parseContent: ({ el, schema }) =>
+      getListItemContent(el, schema, "checkListItem"),
     render(block) {
       const div = document.createElement("div");
       const checkbox = document.createElement("input");
@@ -116,7 +115,6 @@ export const definition = createBlockSpec(config).implementation(
         {
           find: new RegExp(`\\[\\s*\\]\\s$`),
           replace() {
-            console.log("trigger");
             return {
               type: "checkListItem",
               props: {
diff --git a/packages/core/src/blks/Code/definition.ts b/packages/core/src/blks/Code/definition.ts
@@ -80,8 +80,6 @@ export const definition = createBlockSpec(config).implementation(
       return {};
     },
 
-    // TODO parsecontent
-
     render(block, editor) {
       const wrapper = document.createDocumentFragment();
       const pre = document.createElement("pre");
diff --git a/packages/core/src/blks/NumberedListItem/definition.ts b/packages/core/src/blks/NumberedListItem/definition.ts
@@ -1,6 +1,7 @@
 import { updateBlockTr } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import { getBlockInfoFromTransaction } from "../../api/getBlockInfoFromPos.js";
 import { defaultProps } from "../../blocks/defaultProps.js";
+import { getListItemContent } from "../../blocks/ListItemBlockContent/getListItemContent.js";
 import {
   createBlockConfig,
   createBlockNoteExtension,
@@ -40,12 +41,10 @@ export const definition = createBlockSpec(config).implementation(
 
       return false;
     },
-    // TODO how do we represent this??
-    //   // 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: "bulletListItem",
+    // As `li` elements can contain multiple paragraphs, we need to merge their contents
+    // into a single one so that ProseMirror can parse everything correctly.
+    parseContent: ({ el, schema }) =>
+      getListItemContent(el, schema, "numberedListItem"),
     render() {
       const div = document.createElement("div");
       // We use a <p> tag, because for <li> tags we'd need a <ul> element to put
diff --git a/packages/core/src/blocks/defaultBlockHelpers.ts b/packages/core/src/blocks/defaultBlockHelpers.ts
@@ -100,13 +100,13 @@ export const defaultBlockToHTML = <
 // 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) {
+export function mergeParagraphs(element: HTMLElement, separator = "<br>") {
   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;
+      firstParagraph.innerHTML += separator + paragraph.innerHTML;
       paragraph.remove();
     }
   }
diff --git a/packages/core/src/schema/blocks/createSpec.ts b/packages/core/src/schema/blocks/createSpec.ts
@@ -1,6 +1,7 @@
 import { Editor } from "@tiptap/core";
-import { TagParseRule } from "@tiptap/pm/model";
+import { DOMParser, Fragment, TagParseRule } from "@tiptap/pm/model";
 import { NodeView, ViewMutationRecord } from "@tiptap/pm/view";
+import { mergeParagraphs } from "../../blocks/defaultBlockHelpers.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { InlineContentSchema } from "../inlineContent/types.js";
 import { StyleSchema } from "../styles/types.js";
@@ -87,6 +88,11 @@ export function applyNonSelectableBlockFix(nodeView: NodeView, editor: Editor) {
 export function getParseRules(
   config: BlockConfig,
   customParseFunction: CustomBlockImplementation<any, any, any>["parse"],
+  customParseContentFunction: CustomBlockImplementation<
+    any,
+    any,
+    any
+  >["parseContent"],
 ) {
   const rules: TagParseRule[] = [
     {
@@ -111,6 +117,37 @@ export function getParseRules(
 
         return props;
       },
+      getContent:
+        config.content === "inline" || config.content === "none"
+          ? (node, schema) => {
+              if (customParseContentFunction) {
+                return customParseContentFunction({
+                  el: node,
+                  schema,
+                });
+              }
+
+              if (config.content === "inline") {
+                // Parse the blockquote content as inline content
+                const element = node as HTMLElement;
+
+                // Clone to avoid modifying the original
+                const clone = element.cloneNode(true) as HTMLElement;
+
+                // Merge multiple paragraphs into one with line breaks
+                mergeParagraphs(clone, config.meta?.code ? "\n" : "<br>");
+
+                // Parse the content directly as a paragraph to extract inline content
+                const parser = DOMParser.fromSchema(schema);
+                const parsed = parser.parse(clone, {
+                  topNode: schema.nodes.paragraph.create(),
+                });
+
+                return parsed.content;
+              }
+              return Fragment.empty;
+            }
+          : undefined,
     });
   }
   //     getContent(node, schema) {
@@ -147,19 +184,27 @@ export function createBlockSpec<
     name: blockConfig.type as T["type"],
     content: (blockConfig.content === "inline"
       ? "inline*"
-      : "") as T["content"] extends "inline" ? "inline*" : "",
+      : blockConfig.content === "none"
+        ? ""
+        : blockConfig.content) as T["content"] extends "inline"
+      ? "inline*"
+      : "",
     group: "blockContent",
-    selectable: blockConfig.isSelectable ?? true,
+    selectable: blockConfig.meta?.selectable ?? true,
     isolating: true,
     code: blockConfig.meta?.code ?? false,
-    defining: blockConfig.meta?.defining ?? false,
+    defining: blockConfig.meta?.defining ?? true,
     priority,
     addAttributes() {
       return propsToAttributes(blockConfig.propSchema);
     },
 
     parseHTML() {
-      return getParseRules(blockConfig, blockImplementation.parse);
+      return getParseRules(
+        blockConfig,
+        blockImplementation.parse,
+        (blockImplementation as any).parseContent,
+      );
     },
 
     renderHTML({ HTMLAttributes }) {
diff --git a/packages/core/src/schema/blocks/playground.ts b/packages/core/src/schema/blocks/playground.ts
@@ -3,6 +3,7 @@ import type { Props, PropSchema } from "../../schema/index.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { Block } from "../../blocks/defaultBlocks.js";
 import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { Fragment, Schema } from "prosemirror-model";
 
 export type BlockDefs = Record<string, BlockConfig<string, PropSchema>>;
 
@@ -105,10 +106,11 @@ export interface BlockImplementation<
    */
   runsBefore?: string[];
 
-  // TODO there needs to be simper way to do this, it is a bit of a gap to force them to bridge html to block content
-  // parseContent?: (
-  //   el: HTMLElement,
-  // ) => Block<Record<TName, BlockConfig<TName, TProps>>>["children"];
+  /**
+   * Advanced parsing function that controls how content within the block is parsed.
+   * This is not recommended to use, and is only useful for advanced use cases.
+   */
+  parseContent?: (options: { el: HTMLElement; schema: Schema }) => Fragment;
 
   // // TODO this should be only on extensions, not on the block config
   // /**
