@atlaskit/editor-plugin-block-menu 0.0.7 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 0.0.8
+
+### Patch Changes
+
+- [`1bed58ba517b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1bed58ba517b7) -
+  [ux] BlockMenu will be opened to the left or the drag handle by default and to the right when
+  there is no enough space.
+
 ## 0.0.7
 
 ### Patch Changes

package/dist/cjs/ui/block-menu.js

@@ -23,6 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
 };
+var DEFAULT_MENU_WIDTH = 230;
 var DRAG_HANDLE_OFFSET_PADDING = 5;
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
 var BlockMenuContent = function BlockMenuContent(_ref) {
@@ -106,8 +107,9 @@ var BlockMenu = function BlockMenu(_ref2) {
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
-      alignX: 'left',
-      alignY: 'start',
+      alignX: 'right',
+      alignY: 'start' // respected when forcePlacement is true
+      ,
       handleClickOutside: closeMenu,
       handleEscapeKeydown: closeMenu,
       mountTo: mountTo,
@@ -115,7 +117,10 @@ var BlockMenu = function BlockMenu(_ref2) {
       scrollableElement: scrollableElement,
       target: targetHandleRef,
       zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
+      fitWidth: DEFAULT_MENU_WIDTH,
       forcePlacement: true,
+      preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
+      ,
       stick: true,
       offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {

package/dist/es2019/ui/block-menu.js

@@ -15,6 +15,7 @@ import { BlockMenuRenderer } from './block-menu-renderer';
 const styles = {
   base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
 };
+const DEFAULT_MENU_WIDTH = 230;
 const DRAG_HANDLE_OFFSET_PADDING = 5;
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 const BlockMenuContent = ({
@@ -96,8 +97,9 @@ const BlockMenu = ({
   const targetHandleRef = editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/React.createElement(PopupWithListeners, {
-      alignX: 'left',
-      alignY: 'start',
+      alignX: 'right',
+      alignY: 'start' // respected when forcePlacement is true
+      ,
       handleClickOutside: closeMenu,
       handleEscapeKeydown: closeMenu,
       mountTo: mountTo,
@@ -105,7 +107,10 @@ const BlockMenu = ({
       scrollableElement: scrollableElement,
       target: targetHandleRef,
       zIndex: akEditorFloatingOverlapPanelZIndex,
+      fitWidth: DEFAULT_MENU_WIDTH,
       forcePlacement: true,
+      preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
+      ,
       stick: true,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {

package/dist/esm/ui/block-menu.js

@@ -15,6 +15,7 @@ import { BlockMenuRenderer } from './block-menu-renderer';
 var styles = {
   base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
 };
+var DEFAULT_MENU_WIDTH = 230;
 var DRAG_HANDLE_OFFSET_PADDING = 5;
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 var BlockMenuContent = function BlockMenuContent(_ref) {
@@ -98,8 +99,9 @@ var BlockMenu = function BlockMenu(_ref2) {
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/React.createElement(PopupWithListeners, {
-      alignX: 'left',
-      alignY: 'start',
+      alignX: 'right',
+      alignY: 'start' // respected when forcePlacement is true
+      ,
       handleClickOutside: closeMenu,
       handleEscapeKeydown: closeMenu,
       mountTo: mountTo,
@@ -107,7 +109,10 @@ var BlockMenu = function BlockMenu(_ref2) {
       scrollableElement: scrollableElement,
       target: targetHandleRef,
       zIndex: akEditorFloatingOverlapPanelZIndex,
+      fitWidth: DEFAULT_MENU_WIDTH,
       forcePlacement: true,
+      preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
+      ,
       stick: true,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",