feat: support internal HTML as different from external HTML for inline content

Author: nperez0111

packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts

@@ -60,13 +60,9 @@ export function serializeInlineContentExternalHTML<
 
   for (const node of nodes) {
     // Check if this is a custom inline content node with toExternalHTML
-    if (
-      node.type &&
-      node.type.name &&
-      node.type.name in editor.schema.inlineContentSchema
-    ) {
+    if (editor.schema.inlineContentSchema[node.type.name]) {
       const inlineContentImplementation =
-        editor.schema.inlineContentSpecs[node.type.name]?.implementation;
+        editor.schema.inlineContentSpecs[node.type.name].implementation;
 
       if (inlineContentImplementation?.toExternalHTML) {
         // Convert the node to inline content format

packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -47,14 +47,14 @@ export function serializeInlineContentInternalHTML<
   for (const node of nodes) {
     // Check if this is a custom inline content node with toExternalHTML
     if (
-      node.type &&
-      node.type.name &&
+      node.type.name !== "text" &&
+      node.type.name !== "link" &&
       editor.schema.inlineContentSchema[node.type.name]
     ) {
       const inlineContentImplementation =
-        editor.inlineContentImplementations[node.type.name]?.implementation;
+        editor.schema.inlineContentSpecs[node.type.name].implementation;
 
-      if (inlineContentImplementation?.toExternalHTML) {
+      if (inlineContentImplementation) {
         // Convert the node to inline content format
         const inlineContent = nodeToCustomInlineContent(
           node,
@@ -63,8 +63,15 @@ export function serializeInlineContentInternalHTML<
         );
 
         // Use the custom toExternalHTML method
-        const output = inlineContentImplementation.toExternalHTML(
+        const output = inlineContentImplementation.render.call(
+          {
+            renderType: "dom",
+            props: undefined,
+          },
           inlineContent as any,
+          () => {
+            // No-op
+          },
           editor as any,
         );
 
@@ -122,7 +129,14 @@ function serializeBlock<
   }
 
   const impl = editor.blockImplementations[block.type as any].implementation;
-  const ret = impl.render?.call({}, { ...block, props } as any, editor as any);
+  const ret = impl.render.call(
+    {
+      renderType: "dom",
+      props: undefined,
+    },
+    { ...block, props } as any,
+    editor as any,
+  );
 
   if (ret.contentDOM && block.content) {
     const ic = serializeInlineContentInternalHTML(

packages/core/src/schema/inlineContent/createSpec.ts

@@ -19,8 +19,6 @@ import {
   PartialCustomInlineContentFromConfig,
 } from "./types.js";
 
-// TODO: support serialization
-
 export type CustomInlineContentImplementation<
   T extends CustomInlineContentConfig,
   S extends StyleSchema,
@@ -154,7 +152,8 @@ export function createInlineContentSpec<
     renderHTML({ node }) {
       const editor = this.options.editor;
 
-      const output = inlineContentImplementation.render(
+      const output = inlineContentImplementation.render.call(
+        { renderType: "dom", props: undefined },
         nodeToCustomInlineContent(
           node,
           editor.schema.inlineContentSchema,
@@ -175,10 +174,12 @@ export function createInlineContentSpec<
     },
 
     addNodeView() {
-      return ({ node, getPos }) => {
+      return (props) => {
+        const { node, getPos } = props;
         const editor = this.options.editor as BlockNoteEditor<any, any, S>;
 
-        const output = inlineContentImplementation.render(
+        const output = inlineContentImplementation.render.call(
+          { renderType: "nodeView", props },
           nodeToCustomInlineContent(
             node,
             editor.schema.inlineContentSchema,
@@ -209,6 +210,22 @@ export function createInlineContentSpec<
   return createInlineContentSpecFromTipTapNode(
     node,
     inlineContentConfig.propSchema,
-    { toExternalHTML: inlineContentImplementation.toExternalHTML },
+    {
+      toExternalHTML: inlineContentImplementation.toExternalHTML,
+      render(inlineContent, updateInlineContent, editor) {
+        const output = inlineContentImplementation.render(
+          inlineContent,
+          updateInlineContent,
+          editor,
+        );
+
+        return addInlineContentAttributes(
+          output,
+          inlineContentConfig.type,
+          inlineContent.props,
+          inlineContentConfig.propSchema,
+        );
+      },
+    },
   ) as InlineContentSpec<T>;
 }

packages/core/src/schema/inlineContent/internal.ts

@@ -4,7 +4,6 @@ import { camelToDataKebab } from "../../util/string.js";
 import { PropSchema, Props } from "../propTypes.js";
 import {
   CustomInlineContentConfig,
-  InlineContentConfig,
   InlineContentImplementation,
   InlineContentSchemaFromSpecs,
   InlineContentSpec,
@@ -91,8 +90,8 @@ export function createInlineContentSpecFromTipTapNode<
 >(
   node: T,
   propSchema: P,
-  implementation?: Omit<
-    InlineContentImplementation<InlineContentConfig>,
+  implementation: Omit<
+    InlineContentImplementation<CustomInlineContentConfig>,
     "node"
   >,
 ) {

packages/core/src/schema/inlineContent/types.ts

@@ -2,6 +2,7 @@ import { Node } from "@tiptap/core";
 import { PropSchema, Props } from "../propTypes.js";
 import { StyleSchema, Styles } from "../styles/types.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { ViewMutationRecord } from "prosemirror-view";
 
 export type CustomInlineContentConfig = {
   type: string;
@@ -31,6 +32,16 @@ export type InlineContentImplementation<T extends InlineContentConfig> =
               contentDOM?: HTMLElement;
             }
           | undefined;
+        render: (
+          inlineContent: any,
+          updateInlineContent: (update: any) => void,
+          editor: BlockNoteEditor<any, any, any>,
+        ) => {
+          dom: HTMLElement | DocumentFragment;
+          contentDOM?: HTMLElement;
+          ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
+          destroy?: () => void;
+        };
       };
 
 export type InlineContentSchemaWithInlineContent<

packages/react/src/schema/ReactInlineContentSpec.tsx

@@ -5,6 +5,7 @@ import {
   camelToDataKebab,
   createInternalInlineContentSpec,
   CustomInlineContentConfig,
+  CustomInlineContentImplementation,
   getInlineContentParseRules,
   InlineContentFromConfig,
   InlineContentSchemaWithInlineContent,
@@ -53,7 +54,7 @@ export type ReactInlineContentImplementation<
 > = {
   render: FC<ReactCustomInlineContentRenderProps<T, S>>;
   toExternalHTML?: FC<ReactCustomInlineContentRenderProps<T, S>>;
-};
+} & Omit<CustomInlineContentImplementation<T, S>, "render" | "toExternalHTML">;
 
 // Function that adds a wrapper with necessary classes and attributes to the
 // component returned from a custom inline content's 'render' function, to
@@ -123,7 +124,10 @@ export function createReactInlineContentSpec<
     },
 
     parseHTML() {
-      return getInlineContentParseRules(inlineContentConfig);
+      return getInlineContentParseRules(
+        inlineContentConfig,
+        inlineContentImplementation.parse,
+      );
     },
 
     renderHTML({ node }) {
@@ -228,6 +232,31 @@ export function createReactInlineContentSpec<
     inlineContentConfig as CustomInlineContentConfig,
     {
       node,
+      render(inlineContent, updateInlineContent, editor) {
+        const Content = inlineContentImplementation.render;
+        const output = renderToDOMSpec((ref) => {
+          return (
+            <InlineContentWrapper
+              inlineContentProps={inlineContent.props}
+              inlineContentType={inlineContentConfig.type}
+              propSchema={inlineContentConfig.propSchema}
+            >
+              <Content
+                contentRef={(element) => {
+                  ref(element);
+                  if (element) {
+                    element.dataset.editable = "";
+                  }
+                }}
+                editor={editor}
+                inlineContent={inlineContent}
+                updateInlineContent={updateInlineContent}
+              />
+            </InlineContentWrapper>
+          );
+        }, editor);
+        return output;
+      },
       toExternalHTML(inlineContent, editor) {
         const Content =
           inlineContentImplementation.toExternalHTML ||
@@ -255,7 +284,7 @@ export function createReactInlineContentSpec<
             </InlineContentWrapper>
           );
         }, editor);
-        return output as any;
+        return output;
       },
     },
   ) as any;

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/inlineContent/mentionWithToExternalHTML.html

@@ -5,10 +5,9 @@
         <p class="bn-inline-content">
           I enjoy working with
           <span
-            class="mention-external"
-            data-external="true"
-            data-inline-content-type="mention"
+            class="mention-internal"
             data-user="Matthew"
+            data-inline-content-type="mention"
           >@Matthew</span>
         </p>
       </div>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/inlineContent/tagWithoutToExternalHTML.html

@@ -4,9 +4,9 @@
       <div class="bn-block-content" data-content-type="paragraph">
         <p class="bn-inline-content">
           I love
-          <span class="tag-external" data-external="true" data-inline-content-type="tag">
+          <span data-inline-content-type="tag">
             #
-            <span data-editable="">BlockNote</span>
+            <span data-tag="true" data-editable="">BlockNote</span>
           </span>
         </p>
       </div>

tests/src/unit/core/formatConversion/export/__snapshots__/html/inlineContent/tagWithoutToExternalHTML.html

@@ -1,7 +1,7 @@
 <p>
   I love
-  <span class="tag-external" data-external="true" data-inline-content-type="tag">
+  <span data-inline-content-type="tag">
     #
-    <span data-editable="">BlockNote</span>
+    <span data-tag="true" data-editable="">BlockNote</span>
   </span>
 </p>

tests/src/unit/core/testSchema.ts

@@ -98,6 +98,7 @@ const Mention = createInlineContentSpec(
       const dom = document.createElement("span");
       dom.appendChild(document.createTextNode("@" + ic.props.user));
       dom.className = "mention-internal";
+      dom.setAttribute("data-user", ic.props.user);
 
       return {
         dom,
@@ -135,28 +136,20 @@ const Tag = createInlineContentSpec(
     content: "styled",
   },
   {
-    render: () => {
-      const dom = document.createElement("span");
-      dom.textContent = "#";
-
-      const contentDOM = document.createElement("span");
-      dom.appendChild(contentDOM);
-
-      return {
-        dom,
-        contentDOM,
-      };
+    parse: (el) => {
+      const isTag = el.getAttribute("data-tag");
+      if (isTag) {
+        return {};
+      }
+      return undefined;
     },
-
-    toExternalHTML: () => {
+    render: () => {
       const dom = document.createElement("span");
       dom.textContent = "#";
-      dom.className = "tag-external";
-      dom.setAttribute("data-external", "true");
-      dom.setAttribute("data-inline-content-type", "tag");
 
       const contentDOM = document.createElement("span");
       dom.appendChild(contentDOM);
+      contentDOM.setAttribute("data-tag", "true");
 
       return {
         dom,