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

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.27.4
+
+### Patch Changes
+
+- [#115469](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115469)
+  [`ab16802b3f404`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab16802b3f404) -
+  Implement move functionality in block menu
+- Updated dependencies
+
+## 2.27.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.27.2
+
+### Patch Changes
+
+- [#114482](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114482)
+  [`4f000d73e6b03`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f000d73e6b03) -
+  Patch to fix page crash in drag handle tooltip logic
+- [#110314](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110314)
+  [`63ac551fb3345`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/63ac551fb3345) -
+  [ux] ED-26271: Content preview for multi-select
+- [#114618](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114618)
+  [`9976feceb2007`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9976feceb2007) -
+  [ux] Implement initial UI for Block menu
+- Updated dependencies
+
 ## 2.27.1
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -9,9 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./editor-commands/move-node");
 var _moveToLayout = require("./editor-commands/move-to-layout");
 var _main = require("./pm-plugins/main");
+var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
 var _dragHandleMenu = require("./ui/drag-handle-menu");
 var _globalStyles = require("./ui/global-styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -43,14 +45,31 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
               anchorName: anchorName,
               nodeType: nodeType,
               handleOptions: handleOptions
-            }
+            },
+            closeMenu: (0, _experiments.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(_main.key);
+          if (options !== null && options !== void 0 && options.closeMenu) {
+            tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
+              closeMenu: true
+            }));
+            return tr;
+          }
+          tr.setMeta(_main.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;
@@ -68,9 +87,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       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;
@@ -118,8 +137,18 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         multiSelectDnD: (_key$getState$multiSe = (_key$getState5 = _main.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dragHandleMenu.DragHandleMenu, {
+    contentComponent: function contentComponent(_ref7) {
+      var editorView = _ref7.editorView,
+        popupsMountPoint = _ref7.popupsMountPoint,
+        popupsBoundariesElement = _ref7.popupsBoundariesElement,
+        popupsScrollableElement = _ref7.popupsScrollableElement;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? /*#__PURE__*/_react.default.createElement(_blockMenu.default, {
+        editorView: editorView,
+        mountPoint: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement,
+        api: api
+      }) : /*#__PURE__*/_react.default.createElement(_dragHandleMenu.DragHandleMenu, {
         api: api
       }), /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null));
     }

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

@@ -282,11 +282,12 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     }
   }
   var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.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 = (0, _experiments.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/cjs/ui/block-menu-items.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuItemsCallback = exports.getBlockMenuItems = void 0;
+var _react = require("@emotion/react");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
+var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
+var _delete2 = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _moveNode = require("../editor-commands/move-node");
+var _consts = require("../pm-plugins/utils/consts");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* 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
+
+var getBlockMenuItems = exports.getBlockMenuItems = function getBlockMenuItems(formatMessage) {
+  return [{
+    items: [{
+      content: formatMessage(_messages.blockControlsMessages.moveUp),
+      elemBefore: (0, _react.jsx)(_arrowUp.default, {
+        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: (0, _react.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.dragToMoveUp))
+    }, {
+      content: formatMessage(_messages.blockControlsMessages.moveDown),
+      elemBefore: (0, _react.jsx)(_arrowDown.default, {
+        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: (0, _react.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.dragToMoveDown))
+    }]
+  }, {
+    items: [{
+      content: formatMessage(_messages.default.copyToClipboard),
+      value: {
+        name: 'copy'
+      },
+      elemBefore: (0, _react.jsx)(_copy.default, {
+        label: ""
+      }),
+      key: 'copy',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: (0, _react.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.copy))
+    }, {
+      content: formatMessage(_messages.blockControlsMessages.delete),
+      value: {
+        name: 'delete'
+      },
+      elemBefore: (0, _react.jsx)(_delete2.default, {
+        label: ""
+      }),
+      key: 'delete',
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      elemAfter: (0, _react.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.deleteKey))
+    }]
+  }];
+};
+var menuItemsCallback = exports.menuItemsCallback = {
+  moveUp: function moveUp(api, formatMessage) {
+    return (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage);
+  },
+  moveDown: function moveDown(api, formatMessage) {
+    return (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage);
+  },
+  copy: function copy() {
+    // TODO: implement copy
+    // console.log('copy');
+  },
+  delete: function _delete() {
+    // TODO: implement delete
+    // console.log('delete');
+  }
+};

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _blockMenuItems = require("./block-menu-items");
+var _consts = require("./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 = (0, _hooks.useSharedPluginState)(api, ['blockControls']),
+    blockControlsState = _useSharedPluginState.blockControlsState;
+  if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen)) {
+    return null;
+  }
+  var targetHandleRef = document.querySelector(dragHandleSelector);
+  var items = (0, _blockMenuItems.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 = _blockMenuItems.menuItemsCallback[item.value.name]) === null || _menuItemsCallback === void 0 || (_menuItemsCallback$ca = _menuItemsCallback.call(_blockMenuItems.menuItemsCallback, api, formatMessage)) === null || _menuItemsCallback$ca === void 0 || _menuItemsCallback$ca(editorView.state, editorView.dispatch, editorView);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    alignX: 'right',
+    alignY: 'start'
+    // Ignored via go/ees005
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    ,
+    target: targetHandleRef,
+    mountTo: undefined,
+    zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
+    forcePlacement: true,
+    stick: true,
+    offset: [-18, 8]
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.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: _uiMenu.ArrowKeyNavigationType.MENU
+    },
+    items: items,
+    isOpen: true,
+    fitWidth: _consts.BLOCK_MENU_WIDTH,
+    section: {
+      hasSeparator: true
+    },
+    onOpenChange: handleOpenChange,
+    onItemActivated: onMenuItemActivated
+  }));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(BlockMenu);

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -111,6 +111,104 @@ Array.from({
   }, 1000);
   return [currKeyValue, dropTargetMarginMap[value]];
 }));
+var spacingBetweenNodesForPreview = exports.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,
@@ -212,4 +310,5 @@ var DEFAULT_COLUMN_DISTRIBUTIONS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = {
   3: 33.33,
   4: 25,
   5: 20
-};
+};
+var BLOCK_MENU_WIDTH = exports.BLOCK_MENU_WIDTH = 220;