@atlaskit/editor-plugin-block-controls 1.5.17 → 1.5.19

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.5.19
+
+### Patch Changes
+
+- [#119849](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119849)
+  [`5178d3ebdd7db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5178d3ebdd7db) -
+  ED-23896 Fix responsiveness of extensions, macros, table alignment
+- Updated dependencies
+
+## 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

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,13 +136,16 @@ 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
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
+      unmountDecorations('data-blocks-drag-handle-container');
+    }
     if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
@@ -155,14 +158,17 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       api: api,
       getPos: getPos,
       anchorName: anchorName,
-      nodeType: nodeType
+      nodeType: nodeType,
+      handleOptions: handleOptions
     })), element);
     return element;
   }, {
     side: -1,
     id: 'drag-handle',
     destroy: function destroy(node) {
-      _reactDom.default.unmountComponentAtNode(node);
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
+        _reactDom.default.unmountComponentAtNode(node);
+      }
     }
   });
 };

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

@@ -8,6 +8,7 @@ exports.DragHandle = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _bindEventListener = require("bind-event-listener");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -48,11 +49,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 +70,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 +174,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 +215,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 +230,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
           });
@@ -226,7 +260,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     });
   }, [anchorName, api, nodeType, view, start]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
-  var positionStyles = (0, _react.useMemo)(function () {
+  var calculatePosition = (0, _react.useCallback)(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
@@ -248,18 +282,71 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     }
     if (supportsAnchor) {
       return (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
-        left: hasResizer || isExtension || isEmbedCard ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
+        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
         top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
         top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
-    return {
+    return (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
+      top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
+    } : {
       left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  var _useState5 = (0, _react.useState)({
+      display: 'none'
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    newPositionStyles = _useState6[0],
+    setNewPositionStyles = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
+      return;
+    }
+    var cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = (0, _bindEventListener.bind)(dom, {
+        type: 'transitionend',
+        listener: function listener() {
+          setNewPositionStyles(calculatePosition());
+        }
+      });
+    }
+    var calcPos = requestAnimationFrame(function () {
+      setNewPositionStyles(calculatePosition());
+    });
+    return function () {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, anchorName, nodeType]);
+  var positionStyles = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
+      return newPositionStyles;
+    }
+    return calculatePosition();
+  }, [calculatePosition, newPositionStyles]);
+  (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)
   }, {
@@ -276,9 +363,10 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       ref: buttonRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: positionStyles,
+      style: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : 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,13 +130,16 @@ 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
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      unmountDecorations('data-blocks-drag-handle-container');
+    }
     if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
@@ -149,14 +152,17 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api, getIntl) =>
       api,
       getPos,
       anchorName,
-      nodeType
+      nodeType,
+      handleOptions
     })), element);
     return element;
   }, {
     side: -1,
     id: 'drag-handle',
     destroy: node => {
-      ReactDOM.unmountComponentAtNode(node);
+      if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
     }
   });
 };

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));