fix: Block side menu flipping to right side (#225)

* Temp changes

* Updated test screenshots

* Made side menu positioning forced left

* Fixed side menu positioning on horizontal scroll

* Fixed type issue

Author: matthewlipski

packages/core/src/editor.module.css

@@ -2,7 +2,7 @@
 
 .bnEditor {
   outline: none;
-  padding-inline: 50px;
+  padding-inline: 54px;
   border-radius: 8px;
 
   /* Define a set of colors to be used throughout the app for consistency

packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -320,7 +320,7 @@ export class BlockMenuView<BSchema extends BlockSchema> {
   };
 
   /**
-   * If the event is outside of the editor contents,
+   * If the event is outside the editor contents,
    * we dispatch a fake event, so that we can still drop the content
    * when dragging / dropping to the side of the editor
    */
@@ -430,6 +430,14 @@ export class BlockMenuView<BSchema extends BlockSchema> {
   };
 
   onScroll = () => {
+    // Editor itself may have padding or other styling which affects size/position, so we get the boundingRect of
+    // the first child (i.e. the blockGroup that wraps all blocks in the editor) for a more accurate bounding box.
+    const editorBoundingBox = (
+      this.ttEditor.view.dom.firstChild! as HTMLElement
+    ).getBoundingClientRect();
+
+    this.horizontalPosAnchor = editorBoundingBox.x;
+
     if (this.menuOpen) {
       this.blockMenu.render(this.getDynamicParams(), false);
     }

packages/react/src/BlockSideMenu/BlockSideMenuFactory.tsx

@@ -28,5 +28,22 @@ export const createReactBlockSideMenuFactory = <BSchema extends BlockSchema>(
       animation: "fade",
       offset: [0, 0],
       placement: "left",
+      popperOptions: {
+        modifiers: [
+          {
+            name: "flip",
+            options: {
+              fallbackPlacements: [],
+            },
+          },
+          {
+            name: "preventOverflow",
+            options: {
+              mainAxis: false,
+              altAxis: false,
+            },
+          },
+        ],
+      },
     });
 };