@atlaskit/editor-plugin-block-controls 3.1.8 → 3.1.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.1.9
+
+### Patch Changes
+
+- [#121235](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121235)
+  [`fd5c842595a2f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd5c842595a2f) -
+  [ux] Adds moveLeft and moveRight items to the Block menu and updates the tooltip
+
 ## 3.1.8
 
 ### Patch Changes

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

@@ -10,6 +10,8 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
+var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"));
+var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/core/arrow-right"));
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
 var _moveNode = require("../editor-commands/move-node");
 var _consts = require("../pm-plugins/utils/consts");
@@ -49,6 +51,32 @@ var getBlockMenuItems = exports.getBlockMenuItems = function getBlockMenuItems(f
       elemAfter: (0, _react.jsx)("div", {
         css: _shortcut.shortcutStyle
       }, (0, _keymaps.tooltip)(_keymaps.dragToMoveDown))
+    }, {
+      content: formatMessage(_messages.blockControlsMessages.moveLeft),
+      elemBefore: (0, _react.jsx)(_arrowLeft.default, {
+        label: ""
+      }),
+      value: {
+        name: 'moveLeft'
+      },
+      key: 'move_left',
+      // 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.dragToMoveLeft))
+    }, {
+      content: formatMessage(_messages.blockControlsMessages.moveRight),
+      elemBefore: (0, _react.jsx)(_arrowRight.default, {
+        label: ""
+      }),
+      value: {
+        name: 'moveRight'
+      },
+      key: 'move_right',
+      // 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.dragToMoveRight))
     }]
   }];
 };

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

@@ -620,6 +620,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       description: formatMessage(_messages.blockControlsMessages.dragToMove)
     }];
   }
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    helpDescriptors = [{
+      description: formatMessage(_messages.blockControlsMessages.dragToMove)
+    }];
+  }
   var message = helpDescriptors.map(function (descriptor) {
     return descriptor.keymap ? [descriptor.description, (0, _keymaps.getAriaKeyshortcuts)(descriptor.keymap)] : [descriptor.description];
   }).join('. ');
@@ -665,6 +670,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       helpDescriptors: helpDescriptors
     }),
     ignoreTooltipPointerEvents: true,
+    position: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'top' : undefined,
     onShow: function onShow() {
       var _api$accessibilityUti;
       api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {

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

@@ -6,10 +6,12 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { dragToMoveDown, dragToMoveUp, tooltip } from '@atlaskit/editor-common/keymaps';
+import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, tooltip } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
+import ArrowRightnIcon from '@atlaskit/icon/core/arrow-right';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
 import { moveNodeViaShortcut } from '../editor-commands/move-node';
 import { DIRECTION } from '../pm-plugins/utils/consts';
@@ -41,6 +43,32 @@ export const getBlockMenuItems = formatMessage => {
       elemAfter: jsx("div", {
         css: shortcutStyle
       }, tooltip(dragToMoveDown))
+    }, {
+      content: formatMessage(blockControlsMessages.moveLeft),
+      elemBefore: jsx(ArrowLeftIcon, {
+        label: ""
+      }),
+      value: {
+        name: 'moveLeft'
+      },
+      key: 'move_left',
+      // 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(dragToMoveLeft))
+    }, {
+      content: formatMessage(blockControlsMessages.moveRight),
+      elemBefore: jsx(ArrowRightnIcon, {
+        label: ""
+      }),
+      value: {
+        name: 'moveRight'
+      },
+      key: 'move_right',
+      // 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(dragToMoveRight))
     }]
   }];
 };

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

@@ -604,6 +604,11 @@ export const DragHandle = ({
       description: formatMessage(blockControlsMessages.dragToMove)
     }];
   }
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    helpDescriptors = [{
+      description: formatMessage(blockControlsMessages.dragToMove)
+    }];
+  }
   const message = helpDescriptors.map(descriptor => {
     return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
   }).join('. ');
@@ -646,6 +651,7 @@ export const DragHandle = ({
       helpDescriptors: helpDescriptors
     }),
     ignoreTooltipPointerEvents: true,
+    position: editorExperiment('platform_editor_controls', 'variant1') ? 'top' : undefined,
     onShow: () => {
       var _api$accessibilityUti;
       api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify(message, {

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

@@ -6,10 +6,12 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { dragToMoveDown, dragToMoveUp, tooltip } from '@atlaskit/editor-common/keymaps';
+import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, tooltip } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
+import ArrowRightnIcon from '@atlaskit/icon/core/arrow-right';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
 import { moveNodeViaShortcut } from '../editor-commands/move-node';
 import { DIRECTION } from '../pm-plugins/utils/consts';
@@ -41,6 +43,32 @@ export var getBlockMenuItems = function getBlockMenuItems(formatMessage) {
       elemAfter: jsx("div", {
         css: shortcutStyle
       }, tooltip(dragToMoveDown))
+    }, {
+      content: formatMessage(blockControlsMessages.moveLeft),
+      elemBefore: jsx(ArrowLeftIcon, {
+        label: ""
+      }),
+      value: {
+        name: 'moveLeft'
+      },
+      key: 'move_left',
+      // 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(dragToMoveLeft))
+    }, {
+      content: formatMessage(blockControlsMessages.moveRight),
+      elemBefore: jsx(ArrowRightnIcon, {
+        label: ""
+      }),
+      value: {
+        name: 'moveRight'
+      },
+      key: 'move_right',
+      // 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(dragToMoveRight))
     }]
   }];
 };

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

@@ -615,6 +615,11 @@ export var DragHandle = function DragHandle(_ref) {
       description: formatMessage(blockControlsMessages.dragToMove)
     }];
   }
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    helpDescriptors = [{
+      description: formatMessage(blockControlsMessages.dragToMove)
+    }];
+  }
   var message = helpDescriptors.map(function (descriptor) {
     return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
   }).join('. ');
@@ -660,6 +665,7 @@ export var DragHandle = function DragHandle(_ref) {
       helpDescriptors: helpDescriptors
     }),
     ignoreTooltipPointerEvents: true,
+    position: editorExperiment('platform_editor_controls', 'variant1') ? 'top' : undefined,
     onShow: function onShow() {
       var _api$accessibilityUti;
       api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.1.8",
+	"version": "3.1.9",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^17.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.3.0",
-		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",