fix: Multi-editor drag & drop

examples/01-basic/04-all-blocks/App.tsx

@@ -1,207 +1,203 @@
 import {
+  BlockNoteEditorOptions,
   BlockNoteSchema,
-  combineByGroup,
-  filterSuggestionItems,
   locales,
 } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
 import {
-  SuggestionMenuController,
-  getDefaultReactSlashMenuItems,
-  useCreateBlockNote,
-} from "@blocknote/react";
-import {
-  getMultiColumnSlashMenuItems,
   multiColumnDropCursor,
   locales as multiColumnLocales,
   withMultiColumn,
 } from "@blocknote/xl-multi-column";
-import { useMemo } from "react";
-export default function App() {
-  // Creates a new editor instance.
-  const editor = useCreateBlockNote({
-    schema: withMultiColumn(BlockNoteSchema.create()),
-    dropCursor: multiColumnDropCursor,
-    dictionary: {
-      ...locales.en,
-      multi_column: multiColumnLocales.en,
-    },
-    initialContent: [
-      {
-        type: "paragraph",
-        content: "Welcome to this demo!",
-      },
-      {
-        type: "paragraph",
-      },
-      {
-        type: "paragraph",
-        content: [
-          {
-            type: "text",
-            text: "Blocks:",
-            styles: { bold: true },
-          },
-        ],
-      },
-      {
-        type: "paragraph",
-        content: "Paragraph",
-      },
-      {
-        type: "columnList",
-        children: [
-          {
-            type: "column",
-            props: {
-              width: 0.8,
-            },
-            children: [
-              {
-                type: "paragraph",
-                content: "Hello to the left!",
-              },
-            ],
-          },
-          {
-            type: "column",
-            props: {
-              width: 1.2,
-            },
-            children: [
-              {
-                type: "paragraph",
-                content: "Hello to the right!",
-              },
-            ],
+
+const schema = withMultiColumn(BlockNoteSchema.create());
+const options = {
+  schema: withMultiColumn(BlockNoteSchema.create()),
+  dropCursor: multiColumnDropCursor,
+  dictionary: {
+    ...locales.en,
+    multi_column: multiColumnLocales.en,
+  },
+  initialContent: [
+    {
+      type: "paragraph",
+      content: "Welcome to this demo!",
+    },
+    {
+      type: "paragraph",
+    },
+    {
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "Blocks:",
+          styles: { bold: true },
+        },
+      ],
+    },
+    {
+      type: "paragraph",
+      content: "Paragraph",
+    },
+    {
+      type: "columnList",
+      children: [
+        {
+          type: "column",
+          props: {
+            width: 0.8,
           },
-        ],
-      },
-      {
-        type: "heading",
-        content: "Heading",
-      },
-      {
-        type: "bulletListItem",
-        content: "Bullet List Item",
-      },
-      {
-        type: "numberedListItem",
-        content: "Numbered List Item",
-      },
-      {
-        type: "checkListItem",
-        content: "Check List Item",
-      },
-      {
-        type: "codeBlock",
-        props: { language: "javascript" },
-        content: "console.log('Hello, world!');",
-      },
-      {
-        type: "table",
-        content: {
-          type: "tableContent",
-          rows: [
-            {
-              cells: ["Table Cell", "Table Cell", "Table Cell"],
-            },
+          children: [
             {
-              cells: ["Table Cell", "Table Cell", "Table Cell"],
+              type: "paragraph",
+              content: "Hello to the left!",
             },
+          ],
+        },
+        {
+          type: "column",
+          props: {
+            width: 1.2,
+          },
+          children: [
             {
-              cells: ["Table Cell", "Table Cell", "Table Cell"],
+              type: "paragraph",
+              content: "Hello to the right!",
             },
           ],
         },
-      },
-      {
-        type: "file",
-      },
-      {
-        type: "image",
-        props: {
-          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
-          caption:
-            "From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
-        },
-      },
-      {
-        type: "video",
-        props: {
-          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
-          caption:
-            "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
-        },
-      },
-      {
-        type: "audio",
-        props: {
-          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
-          caption:
-            "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
-        },
-      },
-      {
-        type: "paragraph",
-      },
-      {
-        type: "paragraph",
-        content: [
-          {
-            type: "text",
-            text: "Inline Content:",
-            styles: { bold: true },
-          },
-        ],
-      },
-      {
-        type: "paragraph",
-        content: [
+      ],
+    },
+    {
+      type: "heading",
+      content: "Heading",
+    },
+    {
+      type: "bulletListItem",
+      content: "Bullet List Item",
+    },
+    {
+      type: "numberedListItem",
+      content: "Numbered List Item",
+    },
+    {
+      type: "checkListItem",
+      content: "Check List Item",
+    },
+    {
+      type: "codeBlock",
+      props: { language: "javascript" },
+      content: "console.log('Hello, world!');",
+    },
+    {
+      type: "table",
+      content: {
+        type: "tableContent",
+        rows: [
           {
-            type: "text",
-            text: "Styled Text",
-            styles: {
-              bold: true,
-              italic: true,
-              textColor: "red",
-              backgroundColor: "blue",
-            },
+            cells: ["Table Cell", "Table Cell", "Table Cell"],
           },
           {
-            type: "text",
-            text: " ",
-            styles: {},
+            cells: ["Table Cell", "Table Cell", "Table Cell"],
           },
           {
-            type: "link",
-            content: "Link",
-            href: "https://www.blocknotejs.org",
+            cells: ["Table Cell", "Table Cell", "Table Cell"],
           },
         ],
       },
-      {
-        type: "paragraph",
+    },
+    {
+      type: "file",
+    },
+    {
+      type: "image",
+      props: {
+        url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+        caption:
+          "From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+      },
+    },
+    {
+      type: "video",
+      props: {
+        url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+        caption:
+          "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+      },
+    },
+    {
+      type: "audio",
+      props: {
+        url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
+        caption:
+          "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
       },
-    ],
-  });
+    },
+    {
+      type: "paragraph",
+    },
+    {
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "Inline Content:",
+          styles: { bold: true },
+        },
+      ],
+    },
+    {
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "Styled Text",
+          styles: {
+            bold: true,
+            italic: true,
+            textColor: "red",
+            backgroundColor: "blue",
+          },
+        },
+        {
+          type: "text",
+          text: " ",
+          styles: {},
+        },
+        {
+          type: "link",
+          content: "Link",
+          href: "https://www.blocknotejs.org",
+        },
+      ],
+    },
+    {
+      type: "paragraph",
+    },
+  ],
+  // sideMenuDetection: "editor",
+} satisfies Partial<
+  BlockNoteEditorOptions<
+    typeof schema.blockSchema,
+    typeof schema.inlineContentSchema,
+    typeof schema.styleSchema
+  >
+>;
 
-  const slashMenuItems = useMemo(() => {
-    return combineByGroup(
-      getDefaultReactSlashMenuItems(editor),
-      getMultiColumnSlashMenuItems(editor)
-    );
-  }, [editor]);
+export default function App() {
+  // Creates a new editor instance.
+  const editor1 = useCreateBlockNote(options);
+  const editor2 = useCreateBlockNote(options);
 
   // Renders the editor instance using a React component.
   return (
-    <BlockNoteView editor={editor} slashMenu={false}>
-      <SuggestionMenuController
-        triggerCharacter={"/"}
-        getItems={async (query) => filterSuggestionItems(slashMenuItems, query)}
-      />
-    </BlockNoteView>
+    <div style={{ display: "flex", gap: "10px" }}>
+      <BlockNoteView editor={editor1} />
+      {/*<BlockNoteView editor={editor2} />*/}
+    </div>
   );
 }

packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -93,6 +93,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           );
         },
         renderHTML: (attributes) => {
+          // TODO: Use `data-language="..."` instead for easier parsing
           return attributes.language && attributes.language !== "text"
             ? {
                 class: `language-${attributes.language}`,

packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -130,7 +130,9 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
           }
 
           return {
-            level: element.getAttribute("data-level"),
+            level:
+              element.getAttribute("data-level") ||
+              headingPropSchema.level.default,
           };
         },
       },