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

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
@@ -39,11 +38,15 @@ const dragHandleButtonStyles = 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: 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 ${"var(--ds-border-focused, #388BFF)"}`
   }
 });
 const selectedStyles = css({
@@ -58,7 +61,8 @@ const DragHandleInternal = ({
   nodeType,
   intl: {
     formatMessage
-  }
+  },
+  handleOptions
 }) => {
   const start = getPos();
   const buttonRef = useRef(null);
@@ -158,6 +162,35 @@ const DragHandleInternal = ({
       return tr;
     });
   }, [start, api]);
+  const handleKeyDown = useCallback(e => {
+    if (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 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+          tr
+        }) => {
+          if (start === undefined) {
+            return tr;
+          }
+          const node = tr.doc.nodeAt(start);
+          if (!node) {
+            return tr;
+          }
+          const $startPos = tr.doc.resolve(start + node.nodeSize);
+          const selection = new TextSelection($startPos);
+          tr.setSelection(selection);
+          tr.setMeta(key, {
+            pos: start
+          });
+          return tr;
+        });
+      } else {
+        // return focus to editor to resume editing from caret positon
+        view.focus();
+      }
+    }
+  }, [start, api, view]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -186,11 +219,11 @@ const DragHandleInternal = ({
         });
       },
       onDragStart() {
-        var _api$core4;
+        var _api$core5;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
           tr
         }) => {
           var _api$blockControls, _api$analytics2;
@@ -251,6 +284,18 @@ const DragHandleInternal = ({
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  useEffect(() => {
+    if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+      const id = requestAnimationFrame(() => {
+        var _buttonRef$current;
+        (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      });
+      return () => {
+        cancelAnimationFrame(id);
+        view.focus();
+      };
+    }
+  }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   const helpDescriptors = [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
@@ -269,6 +314,7 @@ const DragHandleInternal = ({
     style: positionStyles,
     onClick: handleOnClick,
     onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+    onKeyDown: handleKeyDown,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "",

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

@@ -0,0 +1,18 @@
+export var 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/esm/plugin.js

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

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

@@ -129,7 +129,7 @@ export var mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(ne
   });
   return decs;
 };
-export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api, getIntl) {
+export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, pos, anchorName, nodeType, handleOptions) {
   return 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
@@ -148,7 +148,8 @@ export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName,
       api: api,
       getPos: getPos,
       anchorName: anchorName,
-      nodeType: nodeType
+      nodeType: nodeType,
+      handleOptions: handleOptions
     })), element);
     return element;
   }, {

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

@@ -0,0 +1,18 @@
+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) {
+  var keymapList = {};
+  if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+    bindKeymapWithCommand(showElementDragHandle.common, function (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 var boundKeydownHandler = function boundKeydownHandler(api) {
+  return keydownHandler(keymapList(api));
+};

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

@@ -12,6 +12,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 var key = new PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
   var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
@@ -85,7 +86,7 @@ export var 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 (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -118,9 +119,15 @@ export var 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 (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';
@@ -156,7 +163,15 @@ export var 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 = DecorationSet.create(newState.doc, []);
+          if (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 = DecorationSet.create(newState.doc, []);
+          }
           var nodeDecs = nodeDecorations(newState);
           if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             decorations = decorations.add(newState.doc, _toConsumableArray(nodeDecs));
@@ -173,7 +188,9 @@ export var 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 = 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);
@@ -188,31 +205,31 @@ export var createPlugin = function createPlugin(api, getIntl) {
                 anchorName: anchorName
               };
             }
-            var draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api, getIntl);
+            var 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) {
-          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 = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api, getIntl);
+          var 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')) {
           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 = dragHandleDecoration(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api, getIntl);
+            var _decs = dragHandleDecoration(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
             decorations = decorations.add(newState.doc, [_decs]);
           }
         }
@@ -228,8 +245,8 @@ export var 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);
@@ -237,9 +254,9 @@ export var 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)
@@ -252,8 +269,8 @@ export var 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) {
@@ -372,6 +389,15 @@ export var createPlugin = function 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;
         }
       }
@@ -384,7 +410,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
       if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
         // Use ResizeObserver to observe height changes
         resizeObserverHeight = new ResizeObserver(rafSchedule(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);
@@ -394,7 +421,7 @@ export var 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/esm/ui/drag-handle.js

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
@@ -40,11 +39,15 @@ var dragHandleButtonStyles = 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: 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 = css({
@@ -57,7 +60,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 = useRef(null);
   var _useState = useState(768),
@@ -160,6 +164,34 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       return tr;
     });
   }, [start, api]);
+  var handleKeyDown = useCallback(function (e) {
+    if (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 TextSelection($startPos);
+          tr.setSelection(selection);
+          tr.setMeta(key, {
+            pos: start
+          });
+          return tr;
+        });
+      } else {
+        // return focus to editor to resume editing from caret positon
+        view.focus();
+      }
+    }
+  }, [start, api, view]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -173,11 +205,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
-        var nativeSetDragImage = _ref5.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
+        var nativeSetDragImage = _ref6.nativeSetDragImage;
         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;
@@ -188,13 +220,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
           });
@@ -252,6 +284,18 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  useEffect(function () {
+    if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && 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(blockControlsMessages.dragToMove)
   }, {
@@ -271,6 +315,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       style: positionStyles,
       onClick: handleOnClick,
       onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+      onKeyDown: handleKeyDown,
       "data-testid": "block-ctrl-drag-handle"
     }, jsx(DragHandlerIcon, {
       label: "",

package/dist/types/commands/show-drag-handle.d.ts

@@ -0,0 +1,3 @@
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => Command;

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState } from './types';
+export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, } from './types';

package/dist/types/pm-plugins/decorations.d.ts

@@ -2,7 +2,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin } from '../types';
+import type { BlockControlsPlugin, HandleOptions } from '../types';
 export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
     decs: Decoration[];
     decorationState: {
@@ -18,4 +18,4 @@ export declare const nodeDecorations: (newState: EditorState) => Decoration[];
  * And show the drag handle
  */
 export declare const mouseMoveWrapperDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
-export declare const dragHandleDecoration: (pos: number, anchorName: string, nodeType: string, api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape) => Decoration;
+export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/dist/types/pm-plugins/keymap.d.ts

@@ -0,0 +1,3 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export declare const boundKeydownHandler: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (view: import("prosemirror-view").EditorView, event: KeyboardEvent) => boolean;

package/dist/types/types.d.ts

@@ -35,6 +35,9 @@ export type BlockControlsSharedState = {
     isDragging: boolean;
     isPMDragging: boolean;
 } | undefined;
+export type HandleOptions = {
+    isFocused: boolean;
+} | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
         OptionalPlugin<EditorDisabledPlugin>,
@@ -45,7 +48,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     sharedState: BlockControlsSharedState;
     commands: {
         moveNode: (start: number, to: number) => EditorCommand;
-        showDragHandleAt: (pos: number, anchorName: string, nodeType: string) => EditorCommand;
+        showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
     };
 }>;

package/dist/types/ui/drag-handle.d.ts

@@ -2,13 +2,14 @@
 import { type WrappedComponentProps } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin } from '../types';
+import type { BlockControlsPlugin, HandleOptions } from '../types';
 export declare const DragHandle: import("react").FC<import("react-intl-next").WithIntlProps<{
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;
     anchorName: string;
     nodeType: string;
+    handleOptions?: HandleOptions;
 } & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<{
         view: EditorView;
@@ -16,5 +17,6 @@ export declare const DragHandle: import("react").FC<import("react-intl-next").Wi
         getPos: () => number | undefined;
         anchorName: string;
         nodeType: string;
+        handleOptions?: HandleOptions;
     } & WrappedComponentProps>;
 };

package/dist/types-ts4.5/commands/show-drag-handle.d.ts

@@ -0,0 +1,3 @@
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => Command;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState } from './types';
+export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, } from './types';

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -2,7 +2,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin } from '../types';
+import type { BlockControlsPlugin, HandleOptions } from '../types';
 export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
     decs: Decoration[];
     decorationState: {
@@ -18,4 +18,4 @@ export declare const nodeDecorations: (newState: EditorState) => Decoration[];
  * And show the drag handle
  */
 export declare const mouseMoveWrapperDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
-export declare const dragHandleDecoration: (pos: number, anchorName: string, nodeType: string, api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape) => Decoration;
+export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -0,0 +1,3 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export declare const boundKeydownHandler: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (view: import("prosemirror-view").EditorView, event: KeyboardEvent) => boolean;

package/dist/types-ts4.5/types.d.ts

@@ -35,6 +35,9 @@ export type BlockControlsSharedState = {
     isDragging: boolean;
     isPMDragging: boolean;
 } | undefined;
+export type HandleOptions = {
+    isFocused: boolean;
+} | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
         OptionalPlugin<EditorDisabledPlugin>,
@@ -45,7 +48,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     sharedState: BlockControlsSharedState;
     commands: {
         moveNode: (start: number, to: number) => EditorCommand;
-        showDragHandleAt: (pos: number, anchorName: string, nodeType: string) => EditorCommand;
+        showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
     };
 }>;

package/dist/types-ts4.5/ui/drag-handle.d.ts

@@ -2,13 +2,14 @@
 import { type WrappedComponentProps } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin } from '../types';
+import type { BlockControlsPlugin, HandleOptions } from '../types';
 export declare const DragHandle: import("react").FC<import("react-intl-next").WithIntlProps<{
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;
     anchorName: string;
     nodeType: string;
+    handleOptions?: HandleOptions;
 } & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<{
         view: EditorView;
@@ -16,5 +17,6 @@ export declare const DragHandle: import("react").FC<import("react-intl-next").Wi
         getPos: () => number | undefined;
         anchorName: string;
         nodeType: string;
+        handleOptions?: HandleOptions;
     } & WrappedComponentProps>;
 };