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

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

@@ -1,9 +1,9 @@
 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 { bind } from 'bind-event-listener';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -40,11 +40,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 +61,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 +165,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 +206,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 +221,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
           });
@@ -218,7 +251,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     });
   }, [anchorName, api, nodeType, view, start]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
-  var positionStyles = useMemo(function () {
+  var calculatePosition = 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';
@@ -240,18 +273,71 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     }
     if (supportsAnchor) {
       return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
-        left: hasResizer || isExtension || isEmbedCard ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
+        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
         top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
         top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
-    return {
+    return 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(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
+      top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
+    } : {
       left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  var _useState5 = useState({
+      display: 'none'
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    newPositionStyles = _useState6[0],
+    setNewPositionStyles = _useState6[1];
+  useEffect(function () {
+    if (!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 = 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 = useMemo(function () {
+    if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      return newPositionStyles;
+    }
+    return calculatePosition();
+  }, [calculatePosition, newPositionStyles]);
+  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)
   }, {
@@ -268,9 +354,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: fg('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : 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>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.5.17",
+	"version": "1.5.19",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
-		"@atlaskit/editor-common": "^85.0.0",
+		"@atlaskit/editor-common": "^85.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",
@@ -113,6 +113,9 @@
 		"platform.editor.elements.drag-and-drop-ed-23892": {
 			"type": "boolean"
 		},
+		"platform_editor_elements_drag_and_drop_ed_24000": {
+			"type": "boolean"
+		},
 		"platform.editor.elements.drag-and-drop-ed-23816": {
 			"type": "boolean"
 		},
@@ -136,6 +139,12 @@
 		},
 		"platform_editor_elements_drag_and_drop_ed_23394": {
 			"type": "boolean"
+		},
+		"platform_editor_element_drag_and_drop_ed_24049": {
+			"type": "boolean"
+		},
+		"platform_editor_element_drag_and_drop_ed_23896": {
+			"type": "boolean"
 		}
 	}
 }