feat: support for react custom inline content

Author: nperez0111

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

@@ -1,4 +1,4 @@
-import { DOMSerializer, Fragment } from "prosemirror-model";
+import { DOMSerializer, Fragment, Node } from "prosemirror-model";
 
 import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
@@ -39,7 +39,7 @@ export function serializeInlineContentExternalHTML<
   serializer: DOMSerializer,
   options?: { document?: Document },
 ) {
-  let nodes: any;
+  let nodes: Node[];
 
   // TODO: reuse function from nodeconversions?
   if (!blockContent) {
@@ -84,6 +84,16 @@ export function serializeInlineContentExternalHTML<
 
         if (output) {
           fragment.appendChild(output.dom);
+
+          // If contentDOM exists, render the inline content into it
+          if (output.contentDOM) {
+            const contentFragment = serializer.serializeFragment(
+              node.content,
+              options,
+            );
+            output.contentDOM.dataset.editable = "";
+            output.contentDOM.appendChild(contentFragment);
+          }
           continue;
         }
       }

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

@@ -1,4 +1,4 @@
-import { DOMSerializer, Fragment } from "prosemirror-model";
+import { DOMSerializer, Fragment, Node } from "prosemirror-model";
 
 import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
@@ -25,7 +25,7 @@ export function serializeInlineContentInternalHTML<
   blockType?: string,
   options?: { document?: Document },
 ) {
-  let nodes: any;
+  let nodes: Node[];
 
   // TODO: reuse function from nodeconversions?
   if (!blockContent) {
@@ -70,6 +70,16 @@ export function serializeInlineContentInternalHTML<
 
         if (output) {
           fragment.appendChild(output.dom);
+
+          // If contentDOM exists, render the inline content into it
+          if (output.contentDOM) {
+            const contentFragment = serializer.serializeFragment(
+              node.content,
+              options,
+            );
+            output.contentDOM.dataset.editable = "";
+            output.contentDOM.appendChild(contentFragment);
+          }
           continue;
         }
       }

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

@@ -73,10 +73,9 @@ export function addInlineContentKeyboardShortcuts<
 
 // This helper function helps to instantiate a InlineContentSpec with a
 // config and implementation that conform to the type of Config
-export function createInternalInlineContentSpec<T extends InlineContentConfig>(
-  config: T,
-  implementation: InlineContentImplementation<T>,
-) {
+export function createInternalInlineContentSpec<
+  const T extends InlineContentConfig,
+>(config: T, implementation: InlineContentImplementation<NoInfer<T>>) {
   return {
     config,
     implementation,

packages/react/src/schema/ReactInlineContentSpec.tsx

@@ -51,11 +51,7 @@ export type ReactInlineContentImplementation<
   S extends StyleSchema,
 > = {
   render: FC<ReactCustomInlineContentRenderProps<T, S>>;
-  // TODO?
-  // toExternalHTML?: FC<{
-  //   block: BlockFromConfig<T, I, S>;
-  //   editor: BlockNoteEditor<BlockSchemaWithBlock<T["type"], T>, I, S>;
-  // }>;
+  toExternalHTML?: FC<ReactCustomInlineContentRenderProps<T, S>>;
 };
 
 // Function that adds a wrapper with necessary classes and attributes to the
@@ -99,7 +95,7 @@ export function InlineContentWrapper<
 // A function to create custom block for API consumers
 // we want to hide the tiptap node from API consumers and provide a simpler API surface instead
 export function createReactInlineContentSpec<
-  T extends CustomInlineContentConfig,
+  const T extends CustomInlineContentConfig,
   // I extends InlineContentSchema,
   S extends StyleSchema,
 >(
@@ -137,16 +133,23 @@ export function createReactInlineContentSpec<
         editor.schema.inlineContentSchema,
         editor.schema.styleSchema,
       ) as any as InlineContentFromConfig<T, S>; // TODO: fix cast
-      const Content = inlineContentImplementation.render;
+      const Content =
+        inlineContentImplementation.toExternalHTML ||
+        inlineContentImplementation.render;
       const output = renderToDOMSpec(
-        (refCB) => (
+        (ref) => (
           <Content
+            contentRef={(element) => {
+              ref(element);
+              if (element) {
+                element.dataset.editable = "";
+              }
+            }}
             inlineContent={ic}
             updateInlineContent={() => {
               // No-op
             }}
             editor={editor}
-            contentRef={refCB}
           />
         ),
         editor,
@@ -160,7 +163,6 @@ export function createReactInlineContentSpec<
       );
     },
 
-    // TODO: needed?
     addNodeView() {
       const editor: BlockNoteEditor<any, any, any> = this.options.editor;
       return (props) =>
@@ -180,7 +182,12 @@ export function createReactInlineContentSpec<
                 propSchema={inlineContentConfig.propSchema}
               >
                 <Content
-                  contentRef={ref}
+                  contentRef={(element) => {
+                    ref(element);
+                    if (element) {
+                      element.dataset.editable = "";
+                    }
+                  }}
                   editor={editor}
                   inlineContent={
                     nodeToCustomInlineContent(
@@ -216,7 +223,39 @@ export function createReactInlineContentSpec<
     },
   });
 
-  return createInternalInlineContentSpec(inlineContentConfig, {
-    node: node,
-  } as any);
+  return createInternalInlineContentSpec(
+    inlineContentConfig as CustomInlineContentConfig,
+    {
+      node,
+      toExternalHTML(inlineContent, editor) {
+        const Content =
+          inlineContentImplementation.toExternalHTML ||
+          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={() => {
+                  // no-op
+                }}
+              />
+            </InlineContentWrapper>
+          );
+        }, editor);
+        return output as any;
+      },
+    },
+  );
 }

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

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

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

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

tests/src/unit/core/testSchema.ts

@@ -147,6 +147,22 @@ const Tag = createInlineContentSpec(
         contentDOM,
       };
     },
+
+    toExternalHTML: () => {
+      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);
+
+      return {
+        dom,
+        contentDOM,
+      };
+    },
   },
 );
 

tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/mention/basic.html

@@ -4,7 +4,20 @@
       <div class="bn-block-content" data-content-type="paragraph">
         <p class="bn-inline-content">
           I enjoy working with
-          <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span>
+          <span
+            as="span"
+            class="bn-inline-content-section"
+            data-inline-content-type="mention"
+            data-user="Matthew"
+            data-node-view-wrapper=""
+            style="white-space: normal;"
+          >
+            <span
+              data-external="true"
+              data-inline-content-type="mention"
+              data-user="Matthew"
+            >@Matthew</span>
+          </span>
         </p>
       </div>
     </div>

tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/tag/basic.html

@@ -4,9 +4,17 @@
       <div class="bn-block-content" data-content-type="paragraph">
         <p class="bn-inline-content">
           I love
-          <span data-inline-content-type="tag">
-            #
-            <span data-editable="">BlockNote</span>
+          <span
+            as="span"
+            class="bn-inline-content-section"
+            data-inline-content-type="tag"
+            data-node-view-wrapper=""
+            style="white-space: normal;"
+          >
+            <span>
+              #
+              <span data-editable="">BlockNote</span>
+            </span>
           </span>
         </p>
       </div>

tests/src/unit/react/formatConversion/export/__snapshots__/html/mention/basic.html

@@ -1,4 +1,17 @@
 <p>
   I enjoy working with
-  <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span>
+  <span
+    as="span"
+    class="bn-inline-content-section"
+    data-inline-content-type="mention"
+    data-user="Matthew"
+    data-node-view-wrapper=""
+    style="white-space: normal;"
+  >
+    <span
+      data-external="true"
+      data-inline-content-type="mention"
+      data-user="Matthew"
+    >@Matthew</span>
+  </span>
 </p>