@blocknote/core 0.9.3 → 0.9.4

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "files": [
     "dist",
     "types",
@@ -109,5 +109,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "3a3ca4dfc448556f9796ce884b6ba61f036dfe1a"
+  "gitHead": "31e3c53bdcc082e3793bbb5517462cc18abd9e22"
 }

package/src/BlockNoteEditor.ts

@@ -11,9 +11,9 @@ import {
   updateBlock,
 } from "./api/blockManipulation/blockManipulation";
 import {
+  HTMLToBlocks,
   blocksToHTML,
   blocksToMarkdown,
-  HTMLToBlocks,
   markdownToBlocks,
 } from "./api/formatConversions/formatConversions";
 import {
@@ -44,6 +44,7 @@ import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFro
 
 import { FormattingToolbarProsemirrorPlugin } from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
 import { HyperlinkToolbarProsemirrorPlugin } from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
+import { ImageToolbarProsemirrorPlugin } from "./extensions/ImageToolbar/ImageToolbarPlugin";
 import { SideMenuProsemirrorPlugin } from "./extensions/SideMenu/SideMenuPlugin";
 import { BaseSlashMenuItem } from "./extensions/SlashMenu/BaseSlashMenuItem";
 import { SlashMenuProsemirrorPlugin } from "./extensions/SlashMenu/SlashMenuPlugin";
@@ -106,6 +107,13 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
    */
   blockSchema: BSchema;
 
+  /**
+   * A custom function to handle file uploads.
+   * @param file The file that should be uploaded.
+   * @returns The URL of the uploaded file.
+   */
+  uploadFile: (file: File) => Promise<string>;
+
   /**
    * When enabled, allows for collaboration between multiple users.
    */
@@ -151,6 +159,9 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
   public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin<BSchema>;
   public readonly slashMenu: SlashMenuProsemirrorPlugin<BSchema, any>;
   public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<BSchema>;
+  public readonly imageToolbar: ImageToolbarProsemirrorPlugin<BSchema>;
+
+  public readonly uploadFile: ((file: File) => Promise<string>) | undefined;
 
   constructor(
     private readonly options: Partial<BlockNoteEditorOptions<BSchema>> = {}
@@ -178,6 +189,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
         getDefaultSlashMenuItems(newOptions.blockSchema)
     );
     this.hyperlinkToolbar = new HyperlinkToolbarProsemirrorPlugin(this);
+    this.imageToolbar = new ImageToolbarProsemirrorPlugin(this);
 
     const extensions = getBlockNoteExtensions<BSchema>({
       editor: this,
@@ -195,6 +207,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
           this.formattingToolbar.plugin,
           this.slashMenu.plugin,
           this.hyperlinkToolbar.plugin,
+          this.imageToolbar.plugin,
         ];
       },
     });
@@ -202,6 +215,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
 
     this.schema = newOptions.blockSchema;
 
+    this.uploadFile = newOptions.uploadFile;
+
     const initialContent =
       newOptions.initialContent ||
       (options.collaboration
@@ -216,28 +231,36 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     const tiptapOptions: EditorOptions = {
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
-      onCreate: () => {
-        newOptions.onEditorReady?.(this);
-        this.ready = true;
-      },
       onBeforeCreate(editor) {
         if (!initialContent) {
           // when using collaboration
           return;
         }
-        // we have to set the initial content here, because now we can use the editor schema
-        // which has been created at this point
-        const schema = editor.editor.schema;
-        const ic = initialContent.map((block) => blockToNode(block, schema));
 
+        // We always set the initial content to a single paragraph block. This
+        // allows us to easily replace it with the actual initial content once
+        // the TipTap editor is initialized.
+        const schema = editor.editor.schema;
         const root = schema.node(
           "doc",
           undefined,
-          schema.node("blockGroup", undefined, ic)
+          schema.node("blockGroup", undefined, [
+            blockToNode({ id: "initialBlock", type: "paragraph" }, schema),
+          ])
         );
-        // override the initialcontent
         editor.editor.options.content = root.toJSON();
       },
+      onCreate: () => {
+        // We need to wait for the TipTap editor to init before we can set the
+        // initial content, as the schema may contain custom blocks which need
+        // it to render.
+        if (initialContent !== undefined) {
+          this.replaceBlocks(this.topLevelBlocks, initialContent);
+        }
+
+        newOptions.onEditorReady?.(this);
+        this.ready = true;
+      },
       onUpdate: () => {
         // This seems to be necessary due to a bug in TipTap:
         // https://github.com/ueberdosis/tiptap/issues/2583
@@ -460,6 +483,12 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       posBeforeNode + 2
     )!;
 
+    // For blocks without inline content
+    if (contentNode.type.spec.content === "") {
+      this._tiptapEditor.commands.setNodeSelection(startPos);
+      return;
+    }
+
     if (placement === "start") {
       this._tiptapEditor.commands.setTextSelection(startPos + 1);
     } else {
@@ -473,9 +502,12 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * Gets a snapshot of the current selection.
    */
   public getSelection(): Selection<BSchema> | undefined {
+    // Either the TipTap selection is empty, or it's a node selection. In either
+    // case, it only spans one block, so we return undefined.
     if (
       this._tiptapEditor.state.selection.from ===
-      this._tiptapEditor.state.selection.to
+        this._tiptapEditor.state.selection.to ||
+      "node" in this._tiptapEditor.state.selection
     ) {
       return undefined;
     }

package/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blocks 1`] = `
 [
@@ -16,7 +16,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "id": "2",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -33,7 +33,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -53,7 +53,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "id": "4",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -70,7 +70,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
     "id": "3",
     "props": {
       "backgroundColor": "default",
-      "level": "2",
+      "level": 2,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -106,7 +106,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "id": "2",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -142,7 +142,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "id": "4",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -159,7 +159,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
     "id": "3",
     "props": {
       "backgroundColor": "default",
-      "level": "2",
+      "level": 2,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -286,7 +286,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "3",
+      "level": 3,
       "textAlignment": "right",
       "textColor": "default",
     },
@@ -349,7 +349,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
         "id": "2",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -366,7 +366,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -386,7 +386,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
         "id": "4",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -403,7 +403,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
     "id": "3",
     "props": {
       "backgroundColor": "default",
-      "level": "2",
+      "level": 2,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -439,7 +439,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
         "id": "2",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -456,7 +456,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -476,7 +476,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
         "id": "4",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -493,7 +493,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
     "id": "3",
     "props": {
       "backgroundColor": "default",
-      "level": "2",
+      "level": 2,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -531,7 +531,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
             "id": "2",
             "props": {
               "backgroundColor": "default",
-              "level": "1",
+              "level": 1,
               "textAlignment": "left",
               "textColor": "default",
             },
@@ -548,7 +548,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
         "id": "1",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -568,7 +568,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
             "id": "4",
             "props": {
               "backgroundColor": "default",
-              "level": "2",
+              "level": 2,
               "textAlignment": "left",
               "textColor": "default",
             },
@@ -585,7 +585,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
         "id": "3",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },

package/src/api/blockManipulation/blockManipulation.test.ts

@@ -1,6 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { Block, BlockNoteEditor, PartialBlock } from "../..";
-import { DefaultBlockSchema } from "../../extensions/Blocks/api/defaultBlocks";
 
 let editor: BlockNoteEditor;
 
@@ -15,13 +14,11 @@ function waitForEditor() {
   });
 }
 
-let singleBlock: PartialBlock<DefaultBlockSchema>;
+let singleBlock: PartialBlock;
 
-let multipleBlocks: PartialBlock<DefaultBlockSchema>[];
+let multipleBlocks: PartialBlock[];
 
-let insert: (
-  placement: "before" | "nested" | "after"
-) => Block<DefaultBlockSchema>[];
+let insert: (placement: "before" | "nested" | "after") => Block[];
 
 beforeEach(() => {
   (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
@@ -37,14 +34,14 @@ beforeEach(() => {
     {
       type: "heading",
       props: {
-        level: "1",
+        level: 1,
       },
       content: "Heading 1",
       children: [
         {
           type: "heading",
           props: {
-            level: "1",
+            level: 1,
           },
           content: "Nested Heading 1",
         },
@@ -53,14 +50,14 @@ beforeEach(() => {
     {
       type: "heading",
       props: {
-        level: "2",
+        level: 2,
       },
       content: "Heading 2",
       children: [
         {
           type: "heading",
           props: {
-            level: "2",
+            level: 2,
           },
           content: "Nested Heading 2",
         },
@@ -123,7 +120,7 @@ describe("Insert, Update, & Delete Blocks", () => {
       type: "heading",
       props: {
         textAlignment: "right",
-        level: "3",
+        level: 3,
       },
       content: [
         {

package/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Complex Block/HTML/Markdown Conversions > Convert complex blocks to HTML 1`] = `"<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p><span data-text-color=\\"purple\\"><span data-background-color=\\"green\\">Paragraph</span></span></p><p>P<strong>ara</strong><em>grap</em>h</p><p>P<u>ara</u><s>grap</s>h</p><ul><li><p>Bullet List Item</p></li><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p></li></ul><p>Paragraph</p><ol><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p><ol><li><p>Numbered List Item</p></li></ol></li></ol><ul><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul>"`;
 
@@ -68,7 +68,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -142,7 +142,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },

package/src/api/formatConversions/formatConversions.test.ts

@@ -12,7 +12,7 @@ const getNonNestedBlocks = (): Block[] => [
       backgroundColor: "default",
       textColor: "default",
       textAlignment: "left",
-      level: "1",
+      level: 1,
     },
     content: [
       {
@@ -84,7 +84,7 @@ const getNestedBlocks = (): Block[] => [
       backgroundColor: "default",
       textColor: "default",
       textAlignment: "left",
-      level: "1",
+      level: 1,
     },
     content: [
       {
@@ -224,7 +224,7 @@ const getComplexBlocks = (): Block[] => [
       backgroundColor: "red",
       textColor: "yellow",
       textAlignment: "right",
-      level: "1",
+      level: 1,
     },
     content: [
       {
@@ -241,7 +241,7 @@ const getComplexBlocks = (): Block[] => [
           backgroundColor: "orange",
           textColor: "orange",
           textAlignment: "center",
-          level: "2",
+          level: 2,
         },
         content: [
           {
@@ -258,7 +258,7 @@ const getComplexBlocks = (): Block[] => [
               backgroundColor: "yellow",
               textColor: "red",
               textAlignment: "left",
-              level: "3",
+              level: 3,
             },
             content: [
               {

package/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`] = `
 {
@@ -10,7 +10,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`
   "content": [
     {
       "attrs": {
-        "level": "2",
+        "level": 2,
         "textAlignment": "right",
       },
       "content": [
@@ -142,7 +142,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex node to block 1`
   "id": "1",
   "props": {
     "backgroundColor": "blue",
-    "level": "2",
+    "level": 2,
     "textAlignment": "right",
     "textColor": "yellow",
   },

package/src/api/nodeConversions/nodeConversions.test.ts

@@ -49,7 +49,10 @@ describe("Simple ProseMirror Node Conversions", () => {
 
     expect(firstBlockConversion).toMatchSnapshot();
 
-    const firstNodeConversion = blockToNode(firstBlockConversion, tt.schema);
+    const firstNodeConversion = blockToNode<DefaultBlockSchema>(
+      firstBlockConversion,
+      tt.schema
+    );
 
     expect(firstNodeConversion).toStrictEqual(node);
   });
@@ -63,7 +66,7 @@ describe("Complex ProseMirror Node Conversions", () => {
         backgroundColor: "blue",
         textColor: "yellow",
         textAlignment: "right",
-        level: "2",
+        level: 2,
       },
       content: [
         {
@@ -111,7 +114,7 @@ describe("Complex ProseMirror Node Conversions", () => {
       },
       [
         tt.schema.nodes["heading"].create(
-          { textAlignment: "right", level: "2" },
+          { textAlignment: "right", level: 2 },
           [
             tt.schema.text("Heading ", [
               tt.schema.mark("bold"),
@@ -147,7 +150,10 @@ describe("Complex ProseMirror Node Conversions", () => {
 
     expect(firstBlockConversion).toMatchSnapshot();
 
-    const firstNodeConversion = blockToNode(firstBlockConversion, tt.schema);
+    const firstNodeConversion = blockToNode<DefaultBlockSchema>(
+      firstBlockConversion,
+      tt.schema
+    );
 
     expect(firstNodeConversion).toStrictEqual(node);
   });

package/src/api/nodeConversions/nodeConversions.ts

@@ -5,8 +5,7 @@ import {
   BlockSchema,
   PartialBlock,
 } from "../../extensions/Blocks/api/blockTypes";
-
-import { defaultProps } from "../../extensions/Blocks/api/defaultBlocks";
+import { defaultProps } from "../../extensions/Blocks/api/defaultProps";
 import {
   ColorStyle,
   InlineContent,
@@ -16,9 +15,9 @@ import {
   Styles,
   ToggledStyle,
 } from "../../extensions/Blocks/api/inlineContentTypes";
+import { getBlockInfo } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
 import { UnreachableCaseError } from "../../shared/utils";
-import { getBlockInfo } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
 
 const toggleStyles = new Set<ToggledStyle>([
   "bold",
@@ -409,7 +408,7 @@ export function nodeToBlock<BSchema extends BlockSchema>(
     }
   }
 
-  const content = contentNodeToInlineContent(blockInfo.contentNode);
+  const blockSpec = blockSchema[blockInfo.contentType.name];
 
   const children: Block<BSchema>[] = [];
   for (let i = 0; i < blockInfo.numChildBlocks; i++) {
@@ -420,11 +419,14 @@ export function nodeToBlock<BSchema extends BlockSchema>(
 
   const block: Block<BSchema> = {
     id,
-    type: blockInfo.contentType.name,
+    type: blockSpec.node.name,
     props,
-    content,
+    content:
+      blockSpec.node.config.content === "inline*"
+        ? contentNodeToInlineContent(blockInfo.contentNode)
+        : undefined,
     children,
-  };
+  } as Block<BSchema>;
 
   blockCache?.set(node, block);
 

package/src/api/nodeConversions/testUtil.ts

@@ -48,14 +48,14 @@ export function partialBlockToBlockForTesting<BSchema extends BlockSchema>(
 ): Block<BSchema> {
   const withDefaults = {
     id: "",
-    type: "paragraph" as any,
+    type: "paragraph",
     // because at this point we don't have an easy way to access default props at runtime,
     // partialBlockToBlockForTesting will not set them.
     props: {} as any,
-    content: [],
+    content: [] as any,
     children: [],
     ...partialBlock,
-  };
+  } satisfies PartialBlock<BSchema>;
 
   return {
     ...withDefaults,

package/src/editor.module.css

@@ -36,7 +36,7 @@ Tippy popups that are appended to document.body directly
 .defaultStyles h2,
 .defaultStyles h3,
 .defaultStyles li {
-  all: unset !important;
+  all: unset;
   margin: 0;
   padding: 0;
   font-size: inherit;

package/src/extensions/BackgroundColor/BackgroundColorExtension.ts

@@ -1,5 +1,6 @@
 import { Extension } from "@tiptap/core";
 import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
+import { defaultProps } from "../Blocks/api/defaultProps";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -21,13 +22,14 @@ export const BackgroundColorExtension = Extension.create({
         types: ["blockContainer"],
         attributes: {
           backgroundColor: {
-            default: "default",
+            default: defaultProps.backgroundColor.default,
             parseHTML: (element) =>
               element.hasAttribute("data-background-color")
                 ? element.getAttribute("data-background-color")
-                : "default",
+                : defaultProps.backgroundColor.default,
             renderHTML: (attributes) =>
-              attributes.backgroundColor !== "default" && {
+              attributes.backgroundColor !==
+                defaultProps.backgroundColor.default && {
                 "data-background-color": attributes.backgroundColor,
               },
           },

package/src/extensions/BackgroundColor/BackgroundColorMark.ts

@@ -1,4 +1,5 @@
 import { Mark } from "@tiptap/core";
+import { defaultProps } from "../Blocks/api/defaultProps";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -51,7 +52,7 @@ export const BackgroundColorMark = Mark.create({
       setBackgroundColor:
         (color) =>
         ({ commands }) => {
-          if (color !== "default") {
+          if (color !== defaultProps.backgroundColor.default) {
             return commands.setMark(this.name, { color: color });
           }
 

package/src/extensions/Blocks/NonEditableBlockPlugin.ts

@@ -0,0 +1,17 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+
+const PLUGIN_KEY = new PluginKey("non-editable-block");
+// Prevent typing for blocks without inline content, as this would otherwise
+// convert them into paragraph blocks.
+export const NonEditableBlockPlugin = () => {
+  return new Plugin({
+    key: PLUGIN_KEY,
+    props: {
+      handleKeyDown: (view, event) => {
+        if ("node" in view.state.selection) {
+          event.preventDefault();
+        }
+      },
+    },
+  });
+};