@atlaskit/editor-plugin-block-controls 1.5.16 → 1.5.18

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.5.18
+
+### Patch Changes
+
+- [#119419](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119419)
+  [`a8b716b766200`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a8b716b766200) -
+  [ux] Add shortcut to show and focus drag handle at selection"
+- [#120359](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120359)
+  [`f18f6e6b7f52c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f18f6e6b7f52c) -
+  fix drop targets hiding while dragging
+- [#120426](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120426)
+  [`0aface5be4428`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0aface5be4428) -
+  Fix RangeErrors thrown by blocks plugin in prod
+- Updated dependencies
+
+## 1.5.17
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.5.16
 
 ### Patch Changes

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showDragHandleAtSelection = void 0;
+var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
+  return function (state, _, view) {
+    var rootPos = state.selection.$from.before(1);
+    var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
+    var rootNode = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
+    if (rootNode) {
+      var anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
+      var nodeType = rootNode.getAttribute('data-drag-handler-node-type');
+      if (api && anchorName && nodeType) {
+        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, anchorName, nodeType, {
+          isFocused: true
+        }));
+        return true;
+      }
+    }
+    return false;
+  };
+};

package/dist/cjs/plugin.js

@@ -58,14 +58,15 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return tr;
         };
       },
-      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType) {
+      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref4) {
           var tr = _ref4.tr;
           tr.setMeta(_main.key, {
             activeNode: {
               pos: pos,
               anchorName: anchorName,
-              nodeType: nodeType
+              nodeType: nodeType,
+              handleOptions: handleOptions
             }
           });
           return tr;

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

@@ -136,7 +136,7 @@ var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function
   });
   return decs;
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api, getIntl) {
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, getIntl, pos, anchorName, nodeType, handleOptions) {
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
     // Need to set it to inline to avoid text being split when merging two paragraphs
@@ -155,7 +155,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       api: api,
       getPos: getPos,
       anchorName: anchorName,
-      nodeType: nodeType
+      nodeType: nodeType,
+      handleOptions: handleOptions
     })), element);
     return element;
   }, {

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.boundKeydownHandler = void 0;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _showDragHandle = require("../commands/show-drag-handle");
+function keymapList(api) {
+  var keymapList = {};
+  if (api && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.showElementDragHandle.common, function (state, dispatch, view) {
+      (0, _showDragHandle.showDragHandleAtSelection)(api)(state, dispatch, view);
+      //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
+      return true;
+    }, keymapList);
+  }
+  return keymapList;
+}
+var boundKeydownHandler = exports.boundKeydownHandler = function boundKeydownHandler(api) {
+  return (0, _keymap.keydownHandler)(keymapList(api));
+};

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

@@ -19,6 +19,7 @@ var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _decorations = require("./decorations");
 var _handleMouseOver = require("./handle-mouse-over");
+var _keymap = require("./keymap");
 var key = exports.key = new _state.PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
   var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
@@ -92,7 +93,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -125,9 +126,15 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         var resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
         var nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
+        var shouldRemoveHandle = true;
+        if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_24000')) {
+          shouldRemoveHandle = !tr.getMeta('isRemote');
+        }
 
-        // During resize, remove the drag handle widget
-        if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
+        // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
+        // Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
+        // Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
+        if (isResizerResizing || nodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
           var oldHandle = decorations.find().filter(function (_ref5) {
             var spec = _ref5.spec;
             return spec.id === 'drag-handle';
@@ -163,7 +170,15 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          decorations = _view.DecorationSet.create(newState.doc, []);
+          if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_24000')) {
+            var oldNodeDecs = decorations.find().filter(function (_ref8) {
+              var spec = _ref8.spec;
+              return spec.type !== 'drop-target-decoration';
+            });
+            decorations = decorations.remove(oldNodeDecs);
+          } else {
+            decorations = _view.DecorationSet.create(newState.doc, []);
+          }
           var nodeDecs = (0, _decorations.nodeDecorations)(newState);
           if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(nodeDecs));
@@ -180,7 +195,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
             // When a node type changed to be nested inside another node, the position of the active node is off by 1
             // This is a workaround to fix the position of the active node when it is nested
-            if (mappedPosisiton === prevMappedPos + 1) {
+
+            var shouldUpdateNestedPosition = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24049') ? tr.docChanged && !nodeCountChanged : true;
+            if (shouldUpdateNestedPosition && mappedPosisiton === prevMappedPos + 1) {
               mappedPosisiton = prevMappedPos;
             }
             var newActiveNode = tr.doc.nodeAt(mappedPosisiton);
@@ -195,31 +212,31 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
                 anchorName: anchorName
               };
             }
-            var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, anchorName, nodeType, api, getIntl);
+            var draghandleDec = (0, _decorations.dragHandleDecoration)(api, getIntl, activeNode.pos, anchorName, nodeType);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
-        if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
-          var _oldHandle = decorations.find().filter(function (_ref8) {
-            var spec = _ref8.spec;
+        if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
+          var _oldHandle = decorations.find().filter(function (_ref9) {
+            var spec = _ref9.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
-          var decs = (0, _decorations.dragHandleDecoration)(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api, getIntl);
+          var decs = (0, _decorations.dragHandleDecoration)(api, getIntl, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
           decorations = decorations.add(newState.doc, [decs]);
         }
         if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23816')) {
           var _activeNodeWithNewNod;
           // Remove previous drag handle widget and draw new drag handle widget when node type changes
           if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
-            var _oldHandle2 = decorations.find().filter(function (_ref9) {
-              var spec = _ref9.spec;
+            var _oldHandle2 = decorations.find().filter(function (_ref10) {
+              var spec = _ref10.spec;
               return spec.id === 'drag-handle';
             });
             decorations = decorations.remove(_oldHandle2);
-            var _decs = (0, _decorations.dragHandleDecoration)(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api, getIntl);
+            var _decs = (0, _decorations.dragHandleDecoration)(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
             decorations = decorations.add(newState.doc, [_decs]);
           }
         }
@@ -235,8 +252,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Remove drop target decoration when dragging stops
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
-          var dropTargetDecs = decorations.find().filter(function (_ref10) {
-            var spec = _ref10.spec;
+          var dropTargetDecs = decorations.find().filter(function (_ref11) {
+            var spec = _ref11.spec;
             return spec.type === 'drop-target-decoration';
           });
           decorations = decorations.remove(dropTargetDecs);
@@ -244,9 +261,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Map drop target decoration positions when the document changes
         if (tr.docChanged && isDragging) {
-          decorationState = decorationState.map(function (_ref11) {
-            var index = _ref11.index,
-              pos = _ref11.pos;
+          decorationState = decorationState.map(function (_ref12) {
+            var index = _ref12.index,
+              pos = _ref12.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -259,8 +276,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
         var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-        var hasNodeDecoration = decorations.find().some(function (_ref12) {
-          var spec = _ref12.spec;
+        var hasNodeDecoration = decorations.find().some(function (_ref13) {
+          var spec = _ref13.spec;
           return spec.type === 'node-decoration';
         });
         if (!hasNodeDecoration && isEmptyDoc) {
@@ -379,6 +396,15 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
               return true;
             }
           }
+
+          //NOTE: altKey === 'option' on MacOS
+          if (event.altKey && event.shiftKey && event.ctrlKey && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+            //prevent holding down key combo from firing repeatedly
+            if (!event.repeat && (0, _keymap.boundKeydownHandler)(api)(view, event)) {
+              event.preventDefault();
+              return true;
+            }
+          }
           return false;
         }
       }
@@ -391,7 +417,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
       if (!(0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
         // Use ResizeObserver to observe height changes
         resizeObserverHeight = new ResizeObserver((0, _rafSchd.default)(function (entries) {
-          var editorHeight = entries[0].contentBoxSize[0].blockSize;
+          var _entries$;
+          var editorHeight = (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentBoxSize[0]) === null || _entries$ === void 0 ? void 0 : _entries$.blockSize;
 
           // Update the plugin state when the height changes
           var pluginState = key.getState(editorView.state);
@@ -401,7 +428,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
               transaction.setMeta('is-resizer-resizing', isResizerResizing);
             }
-            if (!isResizerResizing) {
+            if (!isResizerResizing && editorHeight) {
               transaction.setMeta(key, {
                 editorHeight: editorHeight
               });

package/dist/cjs/ui/drag-handle.js

@@ -48,11 +48,15 @@ var dragHandleButtonStyles = (0, _react2.css)({
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: _consts.DRAG_HANDLE_ZINDEX,
+  outline: 'none',
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
   },
   '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  },
+  '&:focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
   }
 });
 var selectedStyles = (0, _react2.css)({
@@ -65,7 +69,8 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     getPos = _ref.getPos,
     anchorName = _ref.anchorName,
     nodeType = _ref.nodeType,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    handleOptions = _ref.handleOptions;
   var start = getPos();
   var buttonRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(768),
@@ -168,6 +173,34 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       return tr;
     });
   }, [start, api]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+      // allow user to use spacebar to select the node
+      if (!e.repeat && e.key === ' ') {
+        var _api$core4;
+        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
+          var tr = _ref5.tr;
+          if (start === undefined) {
+            return tr;
+          }
+          var node = tr.doc.nodeAt(start);
+          if (!node) {
+            return tr;
+          }
+          var $startPos = tr.doc.resolve(start + node.nodeSize);
+          var selection = new _state.TextSelection($startPos);
+          tr.setSelection(selection);
+          tr.setMeta(_main.key, {
+            pos: start
+          });
+          return tr;
+        });
+      } else {
+        // return focus to editor to resume editing from caret positon
+        view.focus();
+      }
+    }
+  }, [start, api, view]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -181,11 +214,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
-        var nativeSetDragImage = _ref5.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
+        var nativeSetDragImage = _ref6.nativeSetDragImage;
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
-          render: function render(_ref6) {
-            var container = _ref6.container;
+          render: function render(_ref7) {
+            var container = _ref7.container;
             var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -196,13 +229,13 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core4;
+        var _api$core5;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref7) {
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref8) {
           var _api$blockControls, _api$analytics2;
-          var tr = _ref7.tr;
+          var tr = _ref8.tr;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
             tr: tr
           });
@@ -260,6 +293,18 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  (0, _react.useEffect)(function () {
+    if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+      var id = requestAnimationFrame(function () {
+        var _buttonRef$current;
+        (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
+      });
+      return function () {
+        cancelAnimationFrame(id);
+        view.focus();
+      };
+    }
+  }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   var helpDescriptors = [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)
   }, {
@@ -279,6 +324,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       style: positionStyles,
       onClick: handleOnClick,
       onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+      onKeyDown: handleKeyDown,
       "data-testid": "block-ctrl-drag-handle"
     }, (0, _react2.jsx)(_dragHandler.default, {
       label: "",

package/dist/es2019/commands/show-drag-handle.js

@@ -0,0 +1,16 @@
+export const showDragHandleAtSelection = api => (state, _, view) => {
+  const rootPos = state.selection.$from.before(1);
+  const dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
+  const rootNode = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
+  if (rootNode) {
+    const anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
+    const nodeType = rootNode.getAttribute('data-drag-handler-node-type');
+    if (api && anchorName && nodeType) {
+      api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, anchorName, nodeType, {
+        isFocused: true
+      }));
+      return true;
+    }
+  }
+  return false;
+};

package/dist/es2019/plugin.js

@@ -49,14 +49,15 @@ export const blockControlsPlugin = ({
       })(tr);
       return tr;
     },
-    showDragHandleAt: (pos, anchorName, nodeType) => ({
+    showDragHandleAt: (pos, anchorName, nodeType, handleOptions) => ({
       tr
     }) => {
       tr.setMeta(key, {
         activeNode: {
           pos,
           anchorName,
-          nodeType
+          nodeType,
+          handleOptions
         }
       });
       return tr;

package/dist/es2019/pm-plugins/decorations.js

@@ -130,7 +130,7 @@ export const mouseMoveWrapperDecorations = (newState, api) => {
   });
   return decs;
 };
-export const dragHandleDecoration = (pos, anchorName, nodeType, api, getIntl) => {
+export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, handleOptions) => {
   return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement('div');
     // Need to set it to inline to avoid text being split when merging two paragraphs
@@ -149,7 +149,8 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api, getIntl) =>
       api,
       getPos,
       anchorName,
-      nodeType
+      nodeType,
+      handleOptions
     })), element);
     return element;
   }, {

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

@@ -0,0 +1,16 @@
+import { bindKeymapWithCommand, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
+import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { showDragHandleAtSelection } from '../commands/show-drag-handle';
+function keymapList(api) {
+  let keymapList = {};
+  if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+    bindKeymapWithCommand(showElementDragHandle.common, (state, dispatch, view) => {
+      showDragHandleAtSelection(api)(state, dispatch, view);
+      //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
+      return true;
+    }, keymapList);
+  }
+  return keymapList;
+}
+export const boundKeydownHandler = api => keydownHandler(keymapList(api));

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

@@ -11,6 +11,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
+import { boundKeydownHandler } from './keymap';
 export const key = new PluginKey('blockControls');
 const destroyFn = api => {
   const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
@@ -86,7 +87,7 @@ export const createPlugin = (api, getIntl) => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -119,9 +120,15 @@ export const createPlugin = (api, getIntl) => {
         const resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
         const nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
+        let shouldRemoveHandle = true;
+        if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
+          shouldRemoveHandle = !tr.getMeta('isRemote');
+        }
 
-        // During resize, remove the drag handle widget
-        if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
+        // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
+        // Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
+        // Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
+        if (isResizerResizing || nodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
           const oldHandle = decorations.find().filter(({
             spec
           }) => spec.id === 'drag-handle');
@@ -154,7 +161,14 @@ export const createPlugin = (api, getIntl) => {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          decorations = DecorationSet.create(newState.doc, []);
+          if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
+            const oldNodeDecs = decorations.find().filter(({
+              spec
+            }) => spec.type !== 'drop-target-decoration');
+            decorations = decorations.remove(oldNodeDecs);
+          } else {
+            decorations = DecorationSet.create(newState.doc, []);
+          }
           const nodeDecs = nodeDecorations(newState);
           if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             decorations = decorations.add(newState.doc, [...nodeDecs]);
@@ -171,7 +185,9 @@ export const createPlugin = (api, getIntl) => {
 
             // When a node type changed to be nested inside another node, the position of the active node is off by 1
             // This is a workaround to fix the position of the active node when it is nested
-            if (mappedPosisiton === prevMappedPos + 1) {
+
+            const shouldUpdateNestedPosition = fg('platform_editor_element_drag_and_drop_ed_24049') ? tr.docChanged && !nodeCountChanged : true;
+            if (shouldUpdateNestedPosition && mappedPosisiton === prevMappedPos + 1) {
               mappedPosisiton = prevMappedPos;
             }
             const newActiveNode = tr.doc.nodeAt(mappedPosisiton);
@@ -186,18 +202,18 @@ export const createPlugin = (api, getIntl) => {
                 anchorName
               };
             }
-            const draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api, getIntl);
+            const draghandleDec = dragHandleDecoration(api, getIntl, activeNode.pos, anchorName, nodeType);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
-        if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
+        if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
           const oldHandle = decorations.find().filter(({
             spec
           }) => spec.id === 'drag-handle');
           decorations = decorations.remove(oldHandle);
-          const decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api, getIntl);
+          const decs = dragHandleDecoration(api, getIntl, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
           decorations = decorations.add(newState.doc, [decs]);
         }
         if (fg('platform.editor.elements.drag-and-drop-ed-23816')) {
@@ -208,7 +224,7 @@ export const createPlugin = (api, getIntl) => {
               spec
             }) => spec.id === 'drag-handle');
             decorations = decorations.remove(oldHandle);
-            const decs = dragHandleDecoration(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api, getIntl);
+            const decs = dragHandleDecoration(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
             decorations = decorations.add(newState.doc, [decs]);
           }
         }
@@ -373,6 +389,15 @@ export const createPlugin = (api, getIntl) => {
               return true;
             }
           }
+
+          //NOTE: altKey === 'option' on MacOS
+          if (event.altKey && event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+            //prevent holding down key combo from firing repeatedly
+            if (!event.repeat && boundKeydownHandler(api)(view, event)) {
+              event.preventDefault();
+              return true;
+            }
+          }
           return false;
         }
       }
@@ -385,7 +410,8 @@ export const createPlugin = (api, getIntl) => {
       if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
         // Use ResizeObserver to observe height changes
         resizeObserverHeight = new ResizeObserver(rafSchedule(entries => {
-          const editorHeight = entries[0].contentBoxSize[0].blockSize;
+          var _entries$, _entries$$contentBoxS;
+          const editorHeight = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : (_entries$$contentBoxS = _entries$.contentBoxSize[0]) === null || _entries$$contentBoxS === void 0 ? void 0 : _entries$$contentBoxS.blockSize;
 
           // Update the plugin state when the height changes
           const pluginState = key.getState(editorView.state);
@@ -395,7 +421,7 @@ export const createPlugin = (api, getIntl) => {
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
               transaction.setMeta('is-resizer-resizing', isResizerResizing);
             }
-            if (!isResizerResizing) {
+            if (!isResizerResizing && editorHeight) {
               transaction.setMeta(key, {
                 editorHeight
               });