feat(core)!: rewrite side menu hover, add hoverMargin and dropMargin options

docs/content/docs/react/components/side-menu.mdx

@@ -50,3 +50,26 @@ You can also change the items in the Drag Handle Menu. The demo below adds an it
 <Example name="ui-components/side-menu-drag-handle-items" />
 
 Here, we use the `SideMenu` component but keep the default buttons (we don't pass any children). Instead, we pass our customized Drag Handle Menu using the `dragHandleMenu` prop.
+
+## Hover and Drop Areas
+
+By default, the Block Side Menu shows only while the mouse is over the editor, including its padding, where the menu sits. A dragged block can still be dropped when it is up to 250px outside the editor. You can change both distances with the `sideMenu` editor option:
+
+```tsx
+import { useCreateBlockNote } from "@blocknote/react";
+
+const editor = useCreateBlockNote({
+  sideMenu: {
+    // Also show the menu up to 100px left or right of the editor.
+    hoverMargin: 100,
+    // Accept drops up to 400px outside the editor.
+    dropMargin: 400,
+  },
+});
+```
+
+`hoverMargin:` How far left or right of the editor (in px) the mouse still shows the menu, for the block at the height of the mouse. Defaults to `0`.
+
+`dropMargin:` How far outside the editor (in px), on any side, a dragged block can still be dropped. The block goes to the nearest position in the editor. Defaults to `250`.
+
+Both distances count from the editor's edge, so with the same value, the menu shows left and right of the editor as far out as a block can be dropped.

packages/core/src/api/exporters/html/externalHTMLExporter.ts

@@ -27,7 +27,7 @@ import {
 // inside a list are un-nested and a new list is created after them.
 // 4. The HTML is wrapped in a single `div` element.
 
-// Needs to be sync because it's used in drag handler event (SideMenuPlugin)
+// Needs to be sync because it's used in drag handler event (SideMenuExtension)
 export const createExternalHTMLExporter = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,

packages/core/src/api/exporters/markdown/markdownExporter.ts

@@ -11,7 +11,7 @@ import { createExternalHTMLExporter } from "../html/externalHTMLExporter.js";
 import { EMPTY_BLOCK_PLACEHOLDER } from "../html/util/serializeBlocksExternalHTML.js";
 import { htmlToMarkdown } from "./htmlToMarkdown.js";
 
-// Needs to be sync because it's used in drag handler event (SideMenuPlugin)
+// Needs to be sync because it's used in drag handler event (SideMenuExtension)
 export function cleanHTMLToMarkdown(cleanHTMLString: string) {
   // The external HTML exporter fills empty inline-content blocks with a
   // placeholder character so they survive an HTML round trip (see

packages/core/src/editor/BlockNoteEditor.ts

@@ -21,6 +21,7 @@ import {
 import {
   BlockChangeExtension,
   DropCursorOptions,
+  SideMenuOptions,
 } from "../extensions/index.js";
 import { UniqueID } from "../extensions/tiptap-extensions/UniqueID/UniqueID.js";
 import type { Dictionary } from "../i18n/dictionary.js";
@@ -126,6 +127,13 @@ export interface BlockNoteEditorOptions<
    */
   dropCursor?: DropCursorOptions;
 
+  /**
+   * Options for the side menu, the menu with the drag handle and "+" button
+   * next to the block under the mouse.
+   * @remarks `SideMenuOptions`
+   */
+  sideMenu?: SideMenuOptions;
+
   /**
    * The content that should be in the editor when it's created, represented as an array of {@link PartialBlock} objects.
    *