Changed custom block renderHTML implementation

Author: matthewlipski

packages/core/src/BlockNoteEditor.ts

@@ -141,7 +141,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     const blockNoteExtensions = getBlockNoteExtensions<BSchema>({
       editor: this,
       uiFactories: newOptions.uiFactories || {},
-      slashCommands: newOptions.slashCommands || (defaultSlashMenuItems as any),
+      slashCommands:
+        newOptions.slashCommands || (defaultSlashMenuItems() as any),
       blocks: newOptions.blockSchema,
     });
 

packages/core/src/extensions/Blocks/api/block.ts

@@ -110,9 +110,6 @@ export function createBlockSpec<
           ];
     },
 
-    // TODO: Do we need renderHTML if we have a node view? Doesn't seem like it
-    //  makes sense but throws an error if ctrl+A and ctrl+C if it's not
-    //  implemented.
     renderHTML({ HTMLAttributes }) {
       // Create blockContent element
       const blockContent = document.createElement("div");
@@ -123,34 +120,45 @@ export function createBlockSpec<
         blockContent.setAttribute(attribute, value);
       }
 
-      // Gets BlockNote editor instance
-      const editor = this.options.editor!;
-
-      // Quite hacky but don't think there's a better way to do this. Since the
-      // contentDOM can be anywhere inside the DOM, we don't know which element
-      // it is. Calling render() will give us the contentDOM, but we need to
-      // provide a block as a parameter.
-      const getDummyBlock: () => Block<BlockSchema> = () =>
-        ({
-          id: "",
-          type: "",
-          props: {},
-          content: [],
-          children: [],
-        } as Block<BlockSchema>);
-
-      // Render elements
-      const rendered = blockConfig.render(getDummyBlock, editor);
-      // Add elements to blockContent
-      blockContent.appendChild(rendered.dom);
+      // TODO: This only works for content copied within BlockNote.
+      // Creates contentDOM element to serialize inline content into.
+      let contentDOM: HTMLDivElement | undefined;
+      if (blockConfig.containsInlineContent) {
+        contentDOM = document.createElement("div");
+        blockContent.appendChild(contentDOM);
+      } else {
+        contentDOM = undefined;
+      }
+
+      // Alternative approach to serializing the block.
+      // // Gets BlockNote editor instance
+      // const editor = this.options.editor!;
+      //
+      // // Quite hacky but don't think there's a better way to do this. Since the
+      // // contentDOM can be anywhere inside the DOM, we don't know which element
+      // // it is. Calling render() will give us the contentDOM, but we need to
+      // // provide a block as a parameter.
+      // const getDummyBlock: () => Block<BlockSchema> = () =>
+      //   ({
+      //     id: "",
+      //     type: "",
+      //     props: {},
+      //     content: [],
+      //     children: [],
+      //   } as Block<BlockSchema>);
+      //
+      // // Render elements
+      // const rendered = blockConfig.render(getDummyBlock, editor);
+      // // Add elements to blockContent
+      // blockContent.appendChild(rendered.dom);
+      //
+      // const contentDOM = blockConfig.containsInlineContent
+      //   ? rendered.contentDOM
+      //   : undefined;
 
       return {
         dom: blockContent,
-        // I don't understand what's going on with the typing here
-        contentDOM:
-          "contentDOM" in rendered
-            ? (rendered.contentDOM as HTMLDivElement)
-            : undefined,
+        contentDOM: contentDOM,
       };
     },
 

packages/core/src/extensions/Blocks/api/blockTypes.ts

@@ -72,15 +72,13 @@ export type BlockConfig<
   // Additional attributes to help define block as a TipTap node.
   containsInlineContent: ContainsInlineContent;
   parse?: (element: HTMLElement) => Props<PSchema>;
-  render: ContainsInlineContent extends true
-    ? (
-        block: () => Block<BSchema>,
-        editor: BlockNoteEditor<BSchema>
-      ) => { dom: HTMLElement; contentDOM: HTMLElement }
-    : (
-        block: () => Block<BSchema>,
-        editor: BlockNoteEditor<BSchema>
-      ) => { dom: HTMLElement };
+  render: (
+    block: () => Block<BSchema>,
+    editor: BlockNoteEditor<BSchema>
+  ) => {
+    dom: HTMLElement;
+    contentDOM: ContainsInlineContent extends true ? HTMLElement : undefined;
+  };
 };
 
 // Defines a single block spec, which includes the props that the block has and

packages/react/src/hooks/useBlockNote.ts

@@ -35,7 +35,7 @@ export const useBlockNote = <BSchema extends BlockSchema = DefaultBlockSchema>(
     //  but it would have to be on several different classes (BlockNoteEditor, BlockNoteEditorOptions, UiFactories) and
     //  gets messy quick.
     let newOptions: Record<any, any> = {
-      slashCommands: defaultReactSlashMenuItems,
+      slashCommands: defaultReactSlashMenuItems(),
       ...options,
     };
     if (!newOptions.uiFactories) {