@atlaskit/editor-plugin-block-controls 2.27.0 → 2.27.4

package/dist/esm/blockControlsPlugin.js

@@ -4,9 +4,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './editor-commands/move-node';
 import { moveToLayout } from './editor-commands/move-to-layout';
 import { createPlugin, key } from './pm-plugins/main';
+import BlockMenu from './ui/block-menu';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export var blockControlsPlugin = function blockControlsPlugin(_ref) {
@@ -36,14 +38,31 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
               anchorName: anchorName,
               nodeType: nodeType,
               handleOptions: handleOptions
-            }
+            },
+            closeMenu: editorExperiment('platform_editor_controls', 'variant1') ? true : undefined
           }));
           return tr;
         };
       },
-      setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
+      toggleBlockMenu: function toggleBlockMenu(options) {
         return function (_ref4) {
           var tr = _ref4.tr;
+          var currMeta = tr.getMeta(key);
+          if (options !== null && options !== void 0 && options.closeMenu) {
+            tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
+              closeMenu: true
+            }));
+            return tr;
+          }
+          tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
+            toggleMenu: true
+          }));
+          return tr;
+        };
+      },
+      setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
+        return function (_ref5) {
+          var tr = _ref5.tr;
           var pos = getPos();
           if (pos === undefined) {
             return tr;
@@ -61,9 +80,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
-        return function (_ref5) {
+        return function (_ref6) {
           var _api$selection;
-          var tr = _ref5.tr;
+          var tr = _ref6.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
@@ -111,8 +130,18 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         multiSelectDnD: (_key$getState$multiSe = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined
       };
     },
-    contentComponent: function contentComponent() {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragHandleMenu, {
+    contentComponent: function contentComponent(_ref7) {
+      var editorView = _ref7.editorView,
+        popupsMountPoint = _ref7.popupsMountPoint,
+        popupsBoundariesElement = _ref7.popupsBoundariesElement,
+        popupsScrollableElement = _ref7.popupsScrollableElement;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('platform_editor_controls', 'variant1') ? /*#__PURE__*/React.createElement(BlockMenu, {
+        editorView: editorView,
+        mountPoint: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement,
+        api: api
+      }) : /*#__PURE__*/React.createElement(DragHandleMenu, {
         api: api
       }), /*#__PURE__*/React.createElement(GlobalStylesWrapper, null));
     }

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

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createElement } from 'react';
 import uuid from 'uuid';
+import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -159,6 +160,15 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     prevNodeStack.push(node);
   };
   var isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true);
+
+  // For deciding to show drop targets or not when multiple nodes are selected
+  var selection = newState.selection;
+  var _expandSelectionBound = expandSelectionBounds(selection.$anchor, selection.$head),
+    expandedAnchor = _expandSelectionBound.$anchor,
+    expandedHead = _expandSelectionBound.$head;
+  var selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
+  var selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
+  var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
@@ -193,10 +203,6 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
 
       // When multi select is on, validate all the nodes in the selection instead of just the handle node
       if (isMultiSelect) {
-        var selection = newState.selection;
-        var selectionFrom = selection.$from.pos;
-        var selectionTo = selection.$to.pos;
-        var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom - 1 && activeNodePos <= selectionTo;
         var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
         var selectionSliceChildCount = selectionSlice.content.childCount;
         var canDropSingleNode = true;
@@ -204,7 +210,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
 
         // when there is only one node in the slice, use the same logic as when multi select is not on
         if (selectionSliceChildCount > 1 && handleInsideSelection) {
-          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, newState.doc, parent, index, $pos);
+          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, parent, index, $pos);
         } else {
           canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node));
         }

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

@@ -275,11 +275,12 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     }
   }
   var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
+  var isMenuOpenNew = editorExperiment('platform_editor_controls', 'variant1') ? meta !== null && meta !== void 0 && meta.closeMenu ? false : meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen : meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen;
   return {
     decorations: decorations,
     activeNode: newActiveNode,
     isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
-    isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
+    isMenuOpen: isMenuOpenNew,
     editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : editorHeight,
     editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : editorWidthLeft,
     editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,

package/dist/esm/pm-plugins/utils/getSelection.js

@@ -94,7 +94,7 @@ export var setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(
  * @param handlePos
  * @returns
  */
-export var isHandleInSelection = function isHandleInSelection(state, selection, handlePos) {
+export var isHandleCorrelatedToSelection = function isHandleCorrelatedToSelection(state, selection, handlePos) {
   if (selection.empty) {
     return false;
   }

package/dist/esm/pm-plugins/utils/validation.js

@@ -112,8 +112,9 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }
-export function canMoveSliceToIndex(slice, sliceFromPos, doc, destParent, indexIntoParent, $destNodePos, destNode) {
+export function canMoveSliceToIndex(slice, sliceFromPos, destParent, indexIntoParent, $destNodePos, destNode) {
   var canMoveNodes = true;
+  var doc = $destNodePos.doc;
   var nodesPos = [];
   for (var i = 0; i < slice.content.childCount; i++) {
     var node = slice.content.maybeChild(i);

package/dist/esm/ui/block-menu-items.js

@@ -0,0 +1,92 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { copy, deleteKey, dragToMoveDown, dragToMoveUp, tooltip } from '@atlaskit/editor-common/keymaps';
+import commonMessages, { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import CopyIcon from '@atlaskit/icon/core/copy';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import { moveNodeViaShortcut } from '../editor-commands/move-node';
+import { DIRECTION } from '../pm-plugins/utils/consts';
+export var getBlockMenuItems = function getBlockMenuItems(formatMessage) {
+  return [{
+    items: [{
+      content: formatMessage(blockControlsMessages.moveUp),
+      elemBefore: jsx(ArrowUpIcon, {
+        label: ""
+      }),
+      value: {
+        name: 'moveUp'
+      },
+      key: 'move_up',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(dragToMoveUp))
+    }, {
+      content: formatMessage(blockControlsMessages.moveDown),
+      elemBefore: jsx(ArrowDownIcon, {
+        label: ""
+      }),
+      value: {
+        name: 'moveDown'
+      },
+      key: 'move_down',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(dragToMoveDown))
+    }]
+  }, {
+    items: [{
+      content: formatMessage(commonMessages.copyToClipboard),
+      value: {
+        name: 'copy'
+      },
+      elemBefore: jsx(CopyIcon, {
+        label: ""
+      }),
+      key: 'copy',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(copy))
+    }, {
+      content: formatMessage(blockControlsMessages.delete),
+      value: {
+        name: 'delete'
+      },
+      elemBefore: jsx(DeleteIcon, {
+        label: ""
+      }),
+      key: 'delete',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(deleteKey))
+    }]
+  }];
+};
+export var menuItemsCallback = {
+  moveUp: function moveUp(api, formatMessage) {
+    return moveNodeViaShortcut(api, DIRECTION.UP, formatMessage);
+  },
+  moveDown: function moveDown(api, formatMessage) {
+    return moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage);
+  },
+  copy: function copy() {
+    // TODO: implement copy
+    // console.log('copy');
+  },
+  delete: function _delete() {
+    // TODO: implement delete
+    // console.log('delete');
+  }
+};

package/dist/esm/ui/block-menu.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { getBlockMenuItems, menuItemsCallback } from './block-menu-items';
+import { BLOCK_MENU_WIDTH } from './consts';
+var dragHandleSelector = '[data-blocks-drag-handle-container="true"] button';
+var BlockMenu = function BlockMenu(_ref) {
+  var editorView = _ref.editorView,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    api = _ref.api,
+    formatMessage = _ref.intl.formatMessage;
+  var _useSharedPluginState = useSharedPluginState(api, ['blockControls']),
+    blockControlsState = _useSharedPluginState.blockControlsState;
+  if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen)) {
+    return null;
+  }
+  var targetHandleRef = document.querySelector(dragHandleSelector);
+  var items = getBlockMenuItems(formatMessage);
+  var handleOpenChange = function handleOpenChange(payload) {
+    if (!(payload !== null && payload !== void 0 && payload.isOpen)) {
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      }));
+    }
+  };
+  var onMenuItemActivated = function onMenuItemActivated(_ref2) {
+    var item = _ref2.item;
+    if (editorView) {
+      var _menuItemsCallback, _menuItemsCallback$ca;
+      (_menuItemsCallback = menuItemsCallback[item.value.name]) === null || _menuItemsCallback === void 0 || (_menuItemsCallback$ca = _menuItemsCallback.call(menuItemsCallback, api, formatMessage)) === null || _menuItemsCallback$ca === void 0 || _menuItemsCallback$ca(editorView.state, editorView.dispatch, editorView);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Popup, {
+    alignX: 'right',
+    alignY: 'start'
+    // Ignored via go/ees005
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    ,
+    target: targetHandleRef,
+    mountTo: undefined,
+    zIndex: akEditorFloatingOverlapPanelZIndex,
+    forcePlacement: true,
+    stick: true,
+    offset: [-18, 8]
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
+    //This needs be removed when the a11y is completely handled
+    //Disabling key navigation now as it works only partially
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    },
+    items: items,
+    isOpen: true,
+    fitWidth: BLOCK_MENU_WIDTH,
+    section: {
+      hasSeparator: true
+    },
+    onOpenChange: handleOpenChange,
+    onItemActivated: onMenuItemActivated
+  }));
+};
+export default injectIntl(BlockMenu);

package/dist/esm/ui/consts.js

@@ -104,6 +104,104 @@ Array.from({
   }, 1000);
   return [currKeyValue, dropTargetMarginMap[value]];
 }));
+export var spacingBetweenNodesForPreview = {
+  paragraph: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  heading1: {
+    top: '1.45833em',
+    bottom: '0'
+  },
+  heading2: {
+    top: '1.4em',
+    bottom: '0'
+  },
+  heading3: {
+    top: '1.31249em',
+    bottom: '0'
+  },
+  heading4: {
+    top: '1.25em',
+    bottom: '0'
+  },
+  heading5: {
+    top: '1.45833em',
+    bottom: '0'
+  },
+  heading6: {
+    top: '1.59091em',
+    bottom: '0'
+  },
+  table: {
+    top: '0',
+    bottom: '0'
+  },
+  bulletList: {
+    top: '10px',
+    bottom: '0'
+  },
+  orderedList: {
+    top: '10px',
+    bottom: '0'
+  },
+  decisionList: {
+    top: '0.5rem',
+    bottom: '0'
+  },
+  taskList: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  codeBlock: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  panel: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  rule: {
+    top: '1.5rem',
+    bottom: '1.5rem'
+  },
+  mediaSingle: {
+    top: '24px',
+    bottom: '24px'
+  },
+  media: {
+    top: '24px',
+    bottom: '24px'
+  },
+  bodiedExtension: {
+    top: '0',
+    bottom: '0'
+  },
+  extension: {
+    top: '0',
+    bottom: '0'
+  },
+  layoutSection: {
+    top: '0',
+    bottom: '0'
+  },
+  blockquote: {
+    top: '0',
+    bottom: '0'
+  },
+  embedCard: {
+    top: '24px',
+    bottom: '24px'
+  },
+  blockCard: {
+    top: '0.75rem',
+    bottom: '0'
+  },
+  default: {
+    top: '0',
+    bottom: '0'
+  }
+};
 
 // This table contains the "margins" of different nodes
 // Note this is not the actually margin of the DOM elements,
@@ -205,4 +303,5 @@ export var DEFAULT_COLUMN_DISTRIBUTIONS = {
   3: 33.33,
   4: 25,
   5: 20
-};
+};
+export var BLOCK_MENU_WIDTH = 220;