fix: resolve several drag & drop issues (#1845)

Author: nperez0111

docs/pages/docs/editor-basics/setup.mdx

@@ -46,7 +46,6 @@ type BlockNoteEditorOptions = {
   resolveFileUrl: (url: string) => Promise<string>;
   schema?: BlockNoteSchema;
   setIdAttribute?: boolean;
-  sideMenuDetection?: "viewport" | "editor";
   tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
   tables?: TableFeatures;
   trailingBlock?: boolean;
@@ -88,8 +87,6 @@ The hook takes two optional parameters:
 
 `setIdAttribute`: Whether to render an `id` HTML attribute on blocks as well as a `data-id` attribute. Defaults to `false`.
 
-`sideMenuDetection`: Determines whether the mouse cursor position is locked to the editor bounding box for showing the [Block Side Menu](/docs/ui-components/side-menu) and block drag & drop. When set to `viewport`, the Side Menu will be shown next to the nearest block to the cursor, regardless of where it is in the viewport. Dropping blocks will also be locked to the editor bounding box. Otherwise, the Side Menu will only be shown when the cursor is within the editor bounds, and blocks can only be dropped when hovering the editor. In order to use multiple editors, must be set to `editor`. Defaults to `viewport`.
-
 `tabBehavior`: Determines whether pressing the tab key should navigate toolbars for keyboard accessibility. When set to `"prefer-navigate-ui`, the user can navigate toolbars using Tab. Pressing Escape re-focuses the editor, and Tab now indents blocks. `"prefer-indent"` causes Tab to always indent blocks. Defaults to `prefer-navigate-ui`.
 
 `tables`: Configuration for table features. Allowing you to enable more advanced table features like `splitCells`, `cellBackgroundColor`, `cellTextColor`, and `headers`.

examples/01-basic/12-multi-editor/App.tsx

@@ -8,7 +8,6 @@ import { useCreateBlockNote } from "@blocknote/react";
 function Editor(props: { initialContent?: PartialBlock[] }) {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
-    sideMenuDetection: "editor",
     initialContent: props.initialContent,
   });
 

packages/core/package.json

@@ -93,7 +93,7 @@
     "@tiptap/pm": "^2.12.0",
     "emoji-mart": "^5.6.0",
     "hast-util-from-dom": "^5.0.1",
-    "prosemirror-dropcursor": "^1.8.1",
+    "prosemirror-dropcursor": "^1.8.2",
     "prosemirror-highlight": "^0.13.0",
     "prosemirror-model": "^1.25.1",
     "prosemirror-state": "^1.4.3",

packages/core/src/editor/BlockNoteEditor.ts

@@ -312,15 +312,6 @@ export type BlockNoteEditorOptions<
    */
   setIdAttribute?: boolean;
 
-  /**
-   * The detection mode for showing the side menu - "viewport" always shows the
-   * side menu for the block next to the mouse cursor, while "editor" only shows
-   * it when hovering the editor or the side menu itself.
-   *
-   * @default "viewport"
-   */
-  sideMenuDetection: "viewport" | "editor";
-
   /**
    Select desired behavior when pressing `Tab` (or `Shift-Tab`). Specifically,
    what should happen when a user has selected multiple blocks while a toolbar
@@ -639,7 +630,6 @@ export class BlockNoteEditor<
       dropCursor: this.options.dropCursor ?? dropCursor,
       placeholders: newOptions.placeholders,
       tabBehavior: newOptions.tabBehavior,
-      sideMenuDetection: newOptions.sideMenuDetection || "viewport",
       comments: newOptions.comments,
       pasteHandler: newOptions.pasteHandler,
     });

packages/core/src/editor/BlockNoteExtensions.ts

@@ -90,7 +90,6 @@ type ExtensionOptions<
     string | undefined
   >;
   tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
-  sideMenuDetection: "viewport" | "editor";
   comments?: {
     threadStore: ThreadStore;
   };
@@ -133,10 +132,7 @@ export const getBlockNoteExtensions = <
     opts.editor,
   );
   ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor);
-  ret["sideMenu"] = new SideMenuProsemirrorPlugin(
-    opts.editor,
-    opts.sideMenuDetection,
-  );
+  ret["sideMenu"] = new SideMenuProsemirrorPlugin(opts.editor);
   ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor);
   ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any);
   ret["placeholder"] = new PlaceholderPlugin(opts.editor, opts.placeholders);