@atlaskit/editor-plugin-block-controls 4.1.11 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 4.2.0
+
+### Minor Changes
+
+- [`353075175e7ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/353075175e7ff) -
+  [ux] ED-28584 Register move up and down options in block menu
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.12
+
+### Patch Changes
+
+- [`20d3223b57972`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/20d3223b57972) -
+  Opted out of debounced portal provider
+- [`e33be5daddd2b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e33be5daddd2b) -
+  ED-28892 Limited mode: adjust how we're triggering cleanup logic for block control plugin. Hook up
+  banner. Other misc setup.
+- Updated dependencies
+
 ## 4.1.11
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -13,7 +13,9 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./editor-commands/move-node");
+var _moveNodeWithBlockMenu2 = require("./editor-commands/move-node-with-block-menu");
 var _moveToLayout = require("./editor-commands/move-to-layout");
+var _moveNodeUtils = require("./editor-commands/utils/move-node-utils");
 var _firstNodeDecPlugin = require("./pm-plugins/first-node-dec-plugin");
 var _pmPlugin = require("./pm-plugins/interaction-tracking/pm-plugin");
 var _main = require("./pm-plugins/main");
@@ -89,12 +91,22 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             }));
             return tr;
           }
+          var toggleMenuMeta = {
+            anchorName: options === null || options === void 0 ? void 0 : options.anchorName
+          };
+          var menuTriggerBy = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.menuTriggerBy;
+          if (options !== null && options !== void 0 && options.anchorName) {
+            var _canMoveNodeUpOrDown = (0, _moveNodeUtils.canMoveNodeUpOrDown)(tr),
+              moveUp = _canMoveNodeUpOrDown.moveUp,
+              moveDown = _canMoveNodeUpOrDown.moveDown;
+            toggleMenuMeta = _objectSpread(_objectSpread({}, toggleMenuMeta), {}, {
+              moveUp: moveUp,
+              moveDown: moveDown
+            });
+          }
           tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
-            toggleMenu: {
-              anchorName: options === null || options === void 0 ? void 0 : options.anchorName
-            }
+            toggleMenu: toggleMenuMeta
           }));
-          var menuTriggerBy = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.menuTriggerBy;
           if (menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) {
             var _api$userIntent;
             // Toggled from drag handle
@@ -197,25 +209,29 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             isSelectedViaDragHandle: isSelectedViaDragHandle
           }));
         };
+      },
+      moveNodeWithBlockMenu: function moveNodeWithBlockMenu(direction) {
+        return (0, _moveNodeWithBlockMenu2.moveNodeWithBlockMenu)(api, direction);
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$activeD, _key$getState4, _key$getState$isDragg, _key$getState5, _key$getState$isPMDra, _key$getState6, _key$getState$multiSe, _key$getState7, _key$getState$isShift, _key$getState8, _key$getState$lastDra, _key$getState9, _interactionTrackingP, _key$getState$isSelec, _key$getState0;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$blockMe, _key$getState3, _key$getState$activeN, _key$getState4, _key$getState$activeD, _key$getState5, _key$getState$isDragg, _key$getState6, _key$getState$isPMDra, _key$getState7, _key$getState$multiSe, _key$getState8, _key$getState$isShift, _key$getState9, _key$getState$lastDra, _key$getState0, _interactionTrackingP, _key$getState$isSelec, _key$getState1;
       if (!editorState) {
         return undefined;
       }
       var sharedState = {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
-        activeNode: (_key$getState$activeN = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
-        activeDropTargetNode: (_key$getState$activeD = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeDropTargetNode) !== null && _key$getState$activeD !== void 0 ? _key$getState$activeD : undefined,
-        isDragging: (_key$getState$isDragg = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-        isPMDragging: (_key$getState$isPMDra = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
-        multiSelectDnD: (_key$getState$multiSe = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-        isShiftDown: (_key$getState$isShift = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
-        lastDragCancelled: (_key$getState$lastDra = (_key$getState9 = _main.key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
+        blockMenuOptions: (_key$getState$blockMe = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.blockMenuOptions) !== null && _key$getState$blockMe !== void 0 ? _key$getState$blockMe : undefined,
+        activeNode: (_key$getState$activeN = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
+        activeDropTargetNode: (_key$getState$activeD = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.activeDropTargetNode) !== null && _key$getState$activeD !== void 0 ? _key$getState$activeD : undefined,
+        isDragging: (_key$getState$isDragg = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+        isPMDragging: (_key$getState$isPMDra = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
+        multiSelectDnD: (_key$getState$multiSe = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
+        isShiftDown: (_key$getState$isShift = (_key$getState9 = _main.key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
+        lastDragCancelled: (_key$getState$lastDra = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
-        isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
+        isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState1 = _main.key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3;

package/dist/cjs/editor-commands/move-node-with-block-menu.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveNodeWithBlockMenu = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _types = require("@atlaskit/editor-common/types");
+var _moveNode = require("./move-node");
+var _moveNodeUtils = require("./utils/move-node-utils");
+var moveNodeWithBlockMenu = exports.moveNodeWithBlockMenu = function moveNodeWithBlockMenu(api, direction) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    // Nodes like lists nest within themselves, we need to find the top most position
+    var currentNodePos = (0, _moveNodeUtils.getCurrentNodePosFromDragHandleSelection)({
+      selection: tr.selection,
+      schema: tr.doc.type.schema,
+      resolve: tr.doc.resolve.bind(tr.doc)
+    });
+    if (currentNodePos > -1) {
+      var $currentNodePos = tr.doc.resolve(currentNodePos);
+      var nodeAfterPos = $currentNodePos.posAtIndex($currentNodePos.index() + 1);
+      var moveToPos = direction === _types.DIRECTION.UP ? (0, _moveNodeUtils.getPosWhenMoveNodeUp)($currentNodePos, currentNodePos) : (0, _moveNodeUtils.getPosWhenMoveNodeDown)({
+        $currentNodePos: $currentNodePos,
+        nodeAfterPos: nodeAfterPos,
+        tr: tr
+      });
+
+      // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
+      var shouldMoveNode = (0, _moveNodeUtils.getShouldMoveNode)({
+        currentNodePos: currentNodePos,
+        moveToPos: moveToPos,
+        tr: tr
+      });
+      if (shouldMoveNode) {
+        (0, _moveNode.moveNode)(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.BLOCK_MENU)({
+          tr: tr
+        });
+        tr.scrollIntoView();
+      }
+    }
+    return tr;
+  };
+};

package/dist/cjs/editor-commands/move-node.js

@@ -11,6 +11,7 @@ var _expand = require("@atlaskit/editor-common/expand");
 var _messages = require("@atlaskit/editor-common/messages");
 var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
+var _types = require("@atlaskit/editor-common/types");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -20,13 +21,13 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _main = require("../pm-plugins/main");
 var _analytics2 = require("../pm-plugins/utils/analytics");
-var _consts = require("../pm-plugins/utils/consts");
 var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
 var _getSelection = require("../pm-plugins/utils/getSelection");
 var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
 var _selection2 = require("../pm-plugins/utils/selection");
 var _updateSelection = require("../pm-plugins/utils/update-selection");
 var _validation = require("../pm-plugins/utils/validation");
+var _moveNodeUtils = require("./utils/move-node-utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -118,7 +119,11 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
     // 3. the start of the selection is inside the node
     currentNodePos = selection.$from.before(1);
     if (selection.$from.depth > 0) {
-      currentNodePos = (0, _getNestedNodePosition.getNestedNodePosition)(state);
+      currentNodePos = (0, _getNestedNodePosition.getNestedNodePosition)({
+        selection: selection,
+        schema: state.schema,
+        resolve: state.doc.resolve.bind(state.doc)
+      });
     }
   }
   return currentNodePos;
@@ -151,9 +156,8 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       var nodeAfterPos = isMultiSelectEnabled && !getFocusedHandle(state) ? Math.max(expandedAnchor, expandedHead) : $currentNodePos.posAtIndex($currentNodePos.index() + 1);
       var isTopLevelNode = $currentNodePos.depth === 0;
       var moveToPos = -1;
-      var nodeIndex = $currentNodePos.index();
       var isLayoutColumnSelected = selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn';
-      if (direction === _consts.DIRECTION.LEFT) {
+      if (direction === _types.DIRECTION.LEFT) {
         if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
           var _api$core, _api$core2;
           var nodeBefore = $currentNodePos.nodeBefore;
@@ -197,7 +201,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
           moveToPos = $currentNodePos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
         }
-      } else if (direction === _consts.DIRECTION.RIGHT) {
+      } else if (direction === _types.DIRECTION.RIGHT) {
         if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
           var _api$core4, _api$core5;
           var endOfDoc = $currentNodePos.end();
@@ -245,14 +249,11 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           }
           moveToPos = $currentNodePos.after($currentNodePos.depth) + 1;
         }
-      } else if (direction === _consts.DIRECTION.UP) {
+      } else if (direction === _types.DIRECTION.UP) {
         if (isLayoutColumnSelected) {
           moveToPos = $currentNodePos.start() - 1;
         } else {
-          var _nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
-          if (_nodeBefore) {
-            moveToPos = currentNodePos - _nodeBefore.nodeSize;
-          }
+          moveToPos = (0, _moveNodeUtils.getPosWhenMoveNodeUp)($currentNodePos, currentNodePos);
         }
       } else {
         var _endOfDoc = $currentNodePos.end();
@@ -262,11 +263,11 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         if (isLayoutColumnSelected) {
           moveToPos = state.selection.$from.end() + 1;
         } else {
-          var nodeAfter = state.doc.nodeAt(nodeAfterPos);
-          if (nodeAfter) {
-            // if not the last node, move to the end of the next node
-            moveToPos = nodeAfterPos + nodeAfter.nodeSize;
-          }
+          moveToPos = (0, _moveNodeUtils.getPosWhenMoveNodeDown)({
+            $currentNodePos: $currentNodePos,
+            nodeAfterPos: nodeAfterPos,
+            tr: state.tr
+          });
         }
       }
       var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;

package/dist/cjs/editor-commands/show-drag-handle.js

@@ -37,7 +37,11 @@ var findParentPosForHandle = function findParentPosForHandle(state) {
   }
 
   // else find closest parent node
-  return (0, _getNestedNodePosition.getNestedNodePosition)(state);
+  return (0, _getNestedNodePosition.getNestedNodePosition)({
+    selection: state.selection,
+    schema: state.schema,
+    resolve: state.doc.resolve.bind(state.doc)
+  });
 };
 var findNextAnchorDecoration = function findNextAnchorDecoration(state) {
   var decorations = (0, _main.getDecorations)(state);

package/dist/cjs/editor-commands/utils/move-node-utils.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getShouldMoveNode = exports.getPosWhenMoveNodeUp = exports.getPosWhenMoveNodeDown = exports.getCurrentNodePosFromDragHandleSelection = exports.canMoveNodeUpOrDown = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _getNestedNodePosition = require("../../pm-plugins/utils/getNestedNodePosition");
+var getCurrentNodePosFromDragHandleSelection = exports.getCurrentNodePosFromDragHandleSelection = function getCurrentNodePosFromDragHandleSelection(_ref) {
+  var selection = _ref.selection,
+    schema = _ref.schema,
+    resolve = _ref.resolve;
+  var currentNodePos = -1;
+  if ((0, _utils.isTableSelected)(selection)) {
+    var _findTable$pos, _findTable;
+    // We only move table node if it's fully selected
+    // to avoid shortcut collision with table drag and drop
+    currentNodePos = (_findTable$pos = (_findTable = (0, _utils.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+  } else if (!(selection instanceof _selection.GapCursorSelection)) {
+    // 2. caret cursor is inside the node
+    // 3. the start of the selection is inside the node
+    currentNodePos = selection.$from.before(1);
+    if (selection.$from.depth > 0) {
+      currentNodePos = (0, _getNestedNodePosition.getNestedNodePosition)({
+        selection: selection,
+        schema: schema,
+        resolve: resolve
+      });
+    }
+  }
+  return currentNodePos;
+};
+var getPosWhenMoveNodeUp = exports.getPosWhenMoveNodeUp = function getPosWhenMoveNodeUp($currentNodePos, currentNodePos) {
+  var nodeIndex = $currentNodePos.index();
+  var nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
+  return nodeBefore ? currentNodePos - nodeBefore.nodeSize : -1;
+};
+var getPosWhenMoveNodeDown = exports.getPosWhenMoveNodeDown = function getPosWhenMoveNodeDown(_ref2) {
+  var $currentNodePos = _ref2.$currentNodePos,
+    nodeAfterPos = _ref2.nodeAfterPos,
+    tr = _ref2.tr;
+  var endOfDoc = $currentNodePos.end();
+  if (nodeAfterPos > endOfDoc) {
+    return -1;
+  }
+  var nodeAfter = tr.doc.nodeAt(nodeAfterPos);
+
+  // if not the last node, move to the end of the next node
+  return nodeAfter ? nodeAfterPos + nodeAfter.nodeSize : -1;
+};
+var getShouldMoveNode = exports.getShouldMoveNode = function getShouldMoveNode(_ref3) {
+  var currentNodePos = _ref3.currentNodePos,
+    moveToPos = _ref3.moveToPos,
+    tr = _ref3.tr;
+  // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
+  return moveToPos > -1 && tr.doc.resolve(currentNodePos).depth === tr.doc.resolve(moveToPos).depth;
+};
+var canMoveNodeUpOrDown = exports.canMoveNodeUpOrDown = function canMoveNodeUpOrDown(tr) {
+  var currentNodePos = getCurrentNodePosFromDragHandleSelection({
+    selection: tr.selection,
+    schema: tr.doc.type.schema,
+    resolve: tr.doc.resolve.bind(tr.doc)
+  });
+  if (currentNodePos <= -1) {
+    return {
+      moveUp: false,
+      moveDown: false
+    };
+  }
+  var $currentNodePos = tr.doc.resolve(currentNodePos);
+  var nodeAfterPos = $currentNodePos.posAtIndex($currentNodePos.index() + 1);
+  var moveUpPos = getPosWhenMoveNodeUp($currentNodePos, currentNodePos);
+  var moveDownPos = getPosWhenMoveNodeDown({
+    $currentNodePos: $currentNodePos,
+    nodeAfterPos: nodeAfterPos,
+    tr: tr
+  });
+  return {
+    moveUp: getShouldMoveNode({
+      currentNodePos: currentNodePos,
+      moveToPos: moveUpPos,
+      tr: tr
+    }),
+    moveDown: getShouldMoveNode({
+      currentNodePos: currentNodePos,
+      moveToPos: moveDownPos,
+      tr: tr
+    })
+  };
+};

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -109,7 +109,9 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
         anchorRectCache: anchorRectCache,
         isSameLayout: isSameLayout
       }));
-    }, element, key);
+    }, element, key, undefined,
+    // @portal-render-immediately
+    true);
     return element;
   }, {
     type: _decorationsCommon.TYPE_DROP_TARGET_DEC,
@@ -140,7 +142,9 @@ var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration
         getPos: getPos,
         anchorRectCache: anchorRectCache
       }));
-    }, element, key);
+    }, element, key, undefined,
+    // @portal-render-immediately
+    true);
     return element;
   }, {
     type: _decorationsCommon.TYPE_DROP_TARGET_DEC,

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -100,7 +100,9 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
         rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
         anchorRectCache: anchorRectCache
       });
-    }, element, key);
+    }, element, key, undefined,
+    // @portal-render-immediately
+    true);
     return element;
   }, widgetSpec);
 };

package/dist/cjs/pm-plugins/keymap.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.boundKeydownHandler = void 0;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _types = require("@atlaskit/editor-common/types");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _moveNode = require("../editor-commands/move-node");
 var _showDragHandle = require("../editor-commands/show-drag-handle");
-var _consts = require("./utils/consts");
 function keymapList(api, formatMessage) {
   var keymapList = {};
   if (api && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
@@ -24,19 +24,19 @@ function keymapList(api, formatMessage) {
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage), keymapList);
+    _keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.UP, formatMessage), keymapList);
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage), keymapList);
+    _keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.DOWN, formatMessage), keymapList);
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.LEFT, formatMessage), keymapList);
+    _keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.LEFT, formatMessage), keymapList);
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.RIGHT, formatMessage), keymapList);
+    _keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.RIGHT, formatMessage), keymapList);
   }
   return keymapList;
 }

package/dist/cjs/pm-plugins/main.js

@@ -76,7 +76,6 @@ var destroyFn = function destroyFn(api, editorView) {
         if ((0, _performanceMeasures.isMeasuring)(EDITOR_BLOCKS_DRAG_INIT)) {
           (0, _performanceMeasures.stopMeasure)(EDITOR_BLOCKS_DRAG_INIT, function (duration, startTime) {
             var _api$analytics;
-            var state = editorView.state;
             api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
               action: _analytics.ACTION.BLOCKS_DRAG_INIT,
               actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
@@ -84,7 +83,7 @@ var destroyFn = function destroyFn(api, editorView) {
               attributes: {
                 duration: duration,
                 startTime: startTime,
-                nodesCount: state.doc.nodeSize
+                nodesCount: editorView === null || editorView === void 0 ? void 0 : editorView.state.doc.nodeSize
               }
             });
           });
@@ -196,7 +195,7 @@ var destroyFn = function destroyFn(api, editorView) {
                   dragInitializationDuration: dragInitializationDuration,
                   dropProcessingDuration: duration,
                   isCancelled: isCancelled,
-                  nodesCount: editorView.state.doc.nodeSize
+                  nodesCount: editorView === null || editorView === void 0 ? void 0 : editorView.state.doc.nodeSize
                 }
               });
             });
@@ -239,8 +238,8 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
   var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-var _apply = exports.apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+var _apply = exports.apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache, resizeObserverWidth, pragmaticCleanup) {
+  var _api$limitedMode, _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -251,6 +250,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     isDragging = currentState.isDragging,
     isMenuOpen = currentState.isMenuOpen,
     menuTriggerBy = currentState.menuTriggerBy,
+    blockMenuOptions = currentState.blockMenuOptions,
     isPMDragging = currentState.isPMDragging,
     isShiftDown = currentState.isShiftDown,
     lastDragCancelled = currentState.lastDragCancelled,
@@ -263,6 +263,18 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     isAllText = _getTrMetadata.isAllText,
     isReplacedWithSameSize = _getTrMetadata.isReplacedWithSameSize;
   var meta = tr.getMeta(key);
+  var hasDocumentSizeBreachedThreshold = api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.limitedModePluginKey.getState(newState)) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.documentSizeBreachesThreshold;
+  if (hasDocumentSizeBreachedThreshold) {
+    /**
+     * INFO: This if statement is a duplicate of the logic in destroy(). When the threshold is breached and we enter limited mode, we want to trigger the cleanup logic in destroy().
+     */
+    var editorContentArea = document.querySelector('.fabric-editor-popup-scroll-parent');
+    if (editorContentArea && resizeObserverWidth) {
+      resizeObserverWidth.unobserve(editorContentArea);
+    }
+    pragmaticCleanup === null || pragmaticCleanup === void 0 || pragmaticCleanup();
+    return currentState;
+  }
 
   // When steps exist, remap existing decorations, activeNode and multi select positions
   if (tr.docChanged) {
@@ -529,6 +541,10 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     isDragging: (_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging,
     isMenuOpen: isMenuOpenNew,
     menuTriggerBy: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? (meta === null || meta === void 0 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy : undefined,
+    blockMenuOptions: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? {
+      canMoveUp: (meta === null || meta === void 0 || (_meta$toggleMenu2 = meta.toggleMenu) === null || _meta$toggleMenu2 === void 0 ? void 0 : _meta$toggleMenu2.moveUp) !== undefined ? meta === null || meta === void 0 || (_meta$toggleMenu3 = meta.toggleMenu) === null || _meta$toggleMenu3 === void 0 ? void 0 : _meta$toggleMenu3.moveUp : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveUp,
+      canMoveDown: (meta === null || meta === void 0 || (_meta$toggleMenu4 = meta.toggleMenu) === null || _meta$toggleMenu4 === void 0 ? void 0 : _meta$toggleMenu4.moveDown) !== undefined ? meta === null || meta === void 0 || (_meta$toggleMenu5 = meta.toggleMenu) === null || _meta$toggleMenu5 === void 0 ? void 0 : _meta$toggleMenu5.moveDown : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveDown
+    } : undefined,
     editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : editorHeight,
     editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : editorWidthLeft,
     editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,
@@ -557,6 +573,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   if (!(0, _anchorUtils.isAnchorSupported)()) {
     anchorRectCache = new _anchorUtils.AnchorRectCache();
   }
+  var resizeObserverWidth;
+  var pragmaticCleanup = null;
   return new _safePlugin.SafePlugin({
     key: key,
     state: {
@@ -564,13 +582,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         return initialState;
       },
       apply: function apply(tr, currentState, _, newState) {
-        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache);
+        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache, resizeObserverWidth, pragmaticCleanup);
       }
     },
     props: {
       decorations: function decorations(state) {
-        var _api$limitedMode, _api$editorDisabled, _key$getState2;
-        if (api !== null && api !== void 0 && (_api$limitedMode = api.limitedMode) !== null && _api$limitedMode !== void 0 && (_api$limitedMode = _api$limitedMode.sharedState.currentState()) !== null && _api$limitedMode !== void 0 && _api$limitedMode.enabled) {
+        var _api$limitedMode2, _api$editorDisabled, _key$getState2;
+        if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2 !== void 0 && _api$limitedMode2.enabled) {
           return;
         }
         var isDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
@@ -629,8 +647,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           return false;
         },
         dragenter: function dragenter(view, event) {
-          var _api$limitedMode2;
-          if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2 !== void 0 && _api$limitedMode2.enabled) {
+          var _api$limitedMode3;
+          if (api !== null && api !== void 0 && (_api$limitedMode3 = api.limitedMode) !== null && _api$limitedMode3 !== void 0 && (_api$limitedMode3 = _api$limitedMode3.sharedState.currentState()) !== null && _api$limitedMode3 !== void 0 && _api$limitedMode3.enabled) {
             return;
           }
           if (isHTMLElement(event.target) && (0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
@@ -663,8 +681,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
         },
         dragstart: function dragstart(view) {
-          var _api$limitedMode3, _anchorRectCache2;
-          if (api !== null && api !== void 0 && (_api$limitedMode3 = api.limitedMode) !== null && _api$limitedMode3 !== void 0 && (_api$limitedMode3 = _api$limitedMode3.sharedState.currentState()) !== null && _api$limitedMode3 !== void 0 && _api$limitedMode3.enabled) {
+          var _api$limitedMode4, _anchorRectCache2;
+          if (api !== null && api !== void 0 && (_api$limitedMode4 = api.limitedMode) !== null && _api$limitedMode4 !== void 0 && (_api$limitedMode4 = _api$limitedMode4.sharedState.currentState()) !== null && _api$limitedMode4 !== void 0 && _api$limitedMode4.enabled) {
             return;
           }
           (0, _performanceMeasures.startMeasure)(EDITOR_BLOCKS_DRAG_INIT);
@@ -681,8 +699,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           })));
         },
         dragend: function dragend(view) {
-          var _api$limitedMode4, _key$getState3;
-          if (api !== null && api !== void 0 && (_api$limitedMode4 = api.limitedMode) !== null && _api$limitedMode4 !== void 0 && (_api$limitedMode4 = _api$limitedMode4.sharedState.currentState()) !== null && _api$limitedMode4 !== void 0 && _api$limitedMode4.enabled) {
+          var _api$limitedMode5, _key$getState3;
+          if (api !== null && api !== void 0 && (_api$limitedMode5 = api.limitedMode) !== null && _api$limitedMode5 !== void 0 && (_api$limitedMode5 = _api$limitedMode5.sharedState.currentState()) !== null && _api$limitedMode5 !== void 0 && _api$limitedMode5.enabled) {
             return;
           }
           var state = view.state,
@@ -702,23 +720,23 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
         },
         mouseover: function mouseover(view, event) {
-          var _api$limitedMode5;
-          if (api !== null && api !== void 0 && (_api$limitedMode5 = api.limitedMode) !== null && _api$limitedMode5 !== void 0 && (_api$limitedMode5 = _api$limitedMode5.sharedState.currentState()) !== null && _api$limitedMode5 !== void 0 && _api$limitedMode5.enabled) {
+          var _api$limitedMode6;
+          if (api !== null && api !== void 0 && (_api$limitedMode6 = api.limitedMode) !== null && _api$limitedMode6 !== void 0 && (_api$limitedMode6 = _api$limitedMode6.sharedState.currentState()) !== null && _api$limitedMode6 !== void 0 && _api$limitedMode6.enabled) {
             return;
           }
           (0, _handleMouseOver.handleMouseOver)(view, event, api);
           return false;
         },
         mousedown: function mousedown(view, event) {
-          var _api$limitedMode6;
-          if (api !== null && api !== void 0 && (_api$limitedMode6 = api.limitedMode) !== null && _api$limitedMode6 !== void 0 && (_api$limitedMode6 = _api$limitedMode6.sharedState.currentState()) !== null && _api$limitedMode6 !== void 0 && _api$limitedMode6.enabled) {
+          var _api$limitedMode7;
+          if (api !== null && api !== void 0 && (_api$limitedMode7 = api.limitedMode) !== null && _api$limitedMode7 !== void 0 && (_api$limitedMode7 = _api$limitedMode7.sharedState.currentState()) !== null && _api$limitedMode7 !== void 0 && _api$limitedMode7.enabled) {
             return;
           }
           return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _handleMouseDown.handleMouseDown)(api)(view, event) : undefined;
         },
         keydown: function keydown(view, event) {
-          var _api$limitedMode7;
-          if (api !== null && api !== void 0 && (_api$limitedMode7 = api.limitedMode) !== null && _api$limitedMode7 !== void 0 && (_api$limitedMode7 = _api$limitedMode7.sharedState.currentState()) !== null && _api$limitedMode7 !== void 0 && _api$limitedMode7.enabled) {
+          var _api$limitedMode8;
+          if (api !== null && api !== void 0 && (_api$limitedMode8 = api.limitedMode) !== null && _api$limitedMode8 !== void 0 && (_api$limitedMode8 = _api$limitedMode8.sharedState.currentState()) !== null && _api$limitedMode8 !== void 0 && _api$limitedMode8.enabled) {
             return;
           }
           if (isMultiSelectEnabled) {
@@ -793,8 +811,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
         },
         keyup: function keyup(view, event) {
-          var _api$limitedMode8;
-          if (api !== null && api !== void 0 && (_api$limitedMode8 = api.limitedMode) !== null && _api$limitedMode8 !== void 0 && (_api$limitedMode8 = _api$limitedMode8.sharedState.currentState()) !== null && _api$limitedMode8 !== void 0 && _api$limitedMode8.enabled) {
+          var _api$limitedMode9;
+          if (api !== null && api !== void 0 && (_api$limitedMode9 = api.limitedMode) !== null && _api$limitedMode9 !== void 0 && (_api$limitedMode9 = _api$limitedMode9.sharedState.currentState()) !== null && _api$limitedMode9 !== void 0 && _api$limitedMode9.enabled) {
             return;
           }
           if (!event.repeat && event.key === 'Shift') {
@@ -804,8 +822,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
         },
         blur: function blur(view, event) {
-          var _api$limitedMode9;
-          if (api !== null && api !== void 0 && (_api$limitedMode9 = api.limitedMode) !== null && _api$limitedMode9 !== void 0 && (_api$limitedMode9 = _api$limitedMode9.sharedState.currentState()) !== null && _api$limitedMode9 !== void 0 && _api$limitedMode9.enabled) {
+          var _api$limitedMode0;
+          if (api !== null && api !== void 0 && (_api$limitedMode0 = api.limitedMode) !== null && _api$limitedMode0 !== void 0 && (_api$limitedMode0 = _api$limitedMode0.sharedState.currentState()) !== null && _api$limitedMode0 !== void 0 && _api$limitedMode0.enabled) {
             return;
           }
           if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -835,7 +853,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
       var editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
 
       // Use ResizeObserver to observe resizer (scroll-parent typically grows when resizing) and editor width changes
-      var resizeObserverWidth = new ResizeObserver((0, _rafSchd.default)(function (entries) {
+      resizeObserverWidth = new ResizeObserver((0, _rafSchd.default)(function (entries) {
         var pluginState = key.getState(editorView.state);
         if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
           var isResizerResizing = !!dom.querySelector('.is-resizing');
@@ -864,13 +882,14 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
       }
 
       // Start pragmatic monitors
-      var pragmaticCleanup = destroyFn(api, editorView);
+      pragmaticCleanup = destroyFn(api, editorView);
       return {
         destroy: function destroy() {
+          var _pragmaticCleanup;
           if (editorContentArea) {
             resizeObserverWidth.unobserve(editorContentArea);
           }
-          pragmaticCleanup();
+          (_pragmaticCleanup = pragmaticCleanup) === null || _pragmaticCleanup === void 0 || _pragmaticCleanup();
         }
       };
     }