@atlaskit/editor-plugin-help-dialog 8.0.33 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-help-dialog
 
+## 10.0.0
+
+### Major Changes
+
+- [`901c87a57486e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/901c87a57486e) -
+  Removed `react-intl-next` alias and replaced all usages with `react-intl` directly.
+
+  What changed: The `react-intl-next` npm alias (which resolved to `react-intl@^5`) has been
+  removed. All imports now reference `react-intl` directly, and `peerDependencies` have been updated
+  to `"^5.25.1 || ^6.0.0 || ^7.0.0"`.
+
+  How consumer should update their code: Ensure `react-intl` is installed at a version satisfying
+  `^5.25.1 || ^6.0.0 || ^7.0.0`. If your application was using `react-intl-next` as an npm alias, it
+  can be safely removed. Replace any remaining `react-intl-next` imports with `react-intl`.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.0.0
+
+### Patch Changes
+
+- [`d15da1c489b34`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d15da1c489b34) -
+  Add drag handle and move selection keyboard shortcuts to the editor help dialog, gated behind the
+  platform_editor_drag_handle_keyboard_a11y experiment
+- Updated dependencies
+
 ## 8.0.33
 
 ### Patch Changes

package/dist/cjs/ui/ModalContent.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ModalContent = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _browser = require("@atlaskit/editor-common/browser");
 var _messages = require("@atlaskit/editor-common/messages");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
@@ -29,7 +29,7 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
   var formatting = _ref.formatting,
     onClose = _ref.onClose;
   var browser = (0, _browser.getBrowserInfo)();
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   var isA11yFixEnabled = (0, _expValEquals.expValEquals)('platform_editor_a11y_eslint_fix', 'isEnabled', true);
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ModalHeader.default, {
     onClose: onClose
@@ -47,7 +47,7 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
     css: _styles.column
   }, (0, _react2.jsx)(_heading.default, {
     size: "medium"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
+  }, (0, _react2.jsx)(_reactIntl.FormattedMessage
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _messages.helpDialogMessages.keyboardShortcuts)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
@@ -85,7 +85,7 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
     css: _styles.column
   }, (0, _react2.jsx)(_heading.default, {
     size: "medium"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
+  }, (0, _react2.jsx)(_reactIntl.FormattedMessage
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _messages.helpDialogMessages.markdown)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {

package/dist/cjs/ui/ModalFooter.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("./styles");
@@ -23,7 +23,7 @@ var ModalFooter = function ModalFooter() {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     (0, _react.jsx)("div", {
       css: _styles.footer
-    }, (0, _react.jsx)(_reactIntlNext.FormattedMessage
+    }, (0, _react.jsx)(_reactIntl.FormattedMessage
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
     , (0, _extends2.default)({}, _messages.helpDialogMessages.helpDialogTips, {

package/dist/cjs/ui/ModalHeader.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
@@ -30,7 +30,7 @@ var toolbarFocusStyles = (0, _react.css)({
     outlineOffset: "var(--ds-space-025, 2px)"
   }
 });
-var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref) {
+var ModalHeader = (0, _reactIntl.injectIntl)(function (_ref) {
   var formatMessage = _ref.intl.formatMessage,
     onClose = _ref.onClose;
   return (
@@ -39,7 +39,7 @@ var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref) {
       css: _styles.header
     }, (0, _react.jsx)(_heading.default, {
       size: "large"
-    }, (0, _react.jsx)(_reactIntlNext.FormattedMessage
+    }, (0, _react.jsx)(_reactIntl.FormattedMessage
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
     , _messages.helpDialogMessages.editorHelp)), onClose ? (0, _react.jsx)("div", {

package/dist/cjs/ui/formatting.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getSupportedFormatting = exports.formatting = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _browser = require("@atlaskit/editor-common/browser");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -78,7 +78,7 @@ var formatting = exports.formatting = function formatting(_ref2) {
       return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
         as: "span",
         xcss: codeLg
-      }, "**", (0, _react.jsx)(_reactIntlNext.FormattedMessage
+      }, "**", (0, _react.jsx)(_reactIntl.FormattedMessage
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _messages.toolbarMessages.bold), "**"));
@@ -93,7 +93,7 @@ var formatting = exports.formatting = function formatting(_ref2) {
       return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
         as: "span",
         xcss: codeLg
-      }, "*", (0, _react.jsx)(_reactIntlNext.FormattedMessage
+      }, "*", (0, _react.jsx)(_reactIntl.FormattedMessage
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _messages.toolbarMessages.italic), "*"));
@@ -114,7 +114,7 @@ var formatting = exports.formatting = function formatting(_ref2) {
       return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
         as: "span",
         xcss: codeLg
-      }, "~~", (0, _react.jsx)(_reactIntlNext.FormattedMessage
+      }, "~~", (0, _react.jsx)(_reactIntl.FormattedMessage
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _messages.toolbarMessages.strike), "~~"));
@@ -309,7 +309,7 @@ var formatting = exports.formatting = function formatting(_ref2) {
       return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
         as: "span",
         xcss: codeLg
-      }, "[", (0, _react.jsx)(_reactIntlNext.FormattedMessage
+      }, "[", (0, _react.jsx)(_reactIntl.FormattedMessage
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _messages.toolbarInsertBlockMessages.link), "](http://a.com)"));
@@ -324,7 +324,7 @@ var formatting = exports.formatting = function formatting(_ref2) {
       return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
         as: "span",
         xcss: codeLg
-      }, "`", (0, _react.jsx)(_reactIntlNext.FormattedMessage
+      }, "`", (0, _react.jsx)(_reactIntl.FormattedMessage
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _messages.toolbarMessages.code), "`"));
@@ -641,8 +641,46 @@ var focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting
     }
   }];
 };
-var moveTableRowColumnFormatting = function moveTableRowColumnFormatting(_ref8) {
+
+// 'navigation' is used as the type for these entries because Format.type is designed to match ADF
+// schema node/mark names — these shortcuts have no corresponding ADF type, so 'navigation' acts as
+// a catch-all that passes the schema filter and routes entries to the keyboard shortcuts column in the UI.
+var blockControlsShortcutsFormatting = function blockControlsShortcutsFormatting(_ref8) {
   var formatMessage = _ref8.formatMessage;
+  return [{
+    name: formatMessage(_messages.helpDialogMessages.selectDragHandle),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.showElementDragHandle;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.moveSelectionUp),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.dragToMoveUp;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.moveSelectionDown),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.dragToMoveDown;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.moveSelectionLeft),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.dragToMoveLeft;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.moveSelectionRight),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.dragToMoveRight;
+    }
+  }];
+};
+var moveTableRowColumnFormatting = function moveTableRowColumnFormatting(_ref9) {
+  var formatMessage = _ref9.formatMessage;
   return [{
     name: formatMessage(_messages.tableMessages.moveColumnLeftHelpDialogLabel),
     type: 'table',
@@ -669,8 +707,8 @@ var moveTableRowColumnFormatting = function moveTableRowColumnFormatting(_ref8)
     }
   }];
 };
-var openCellOptionsFormattingtoFormat = function openCellOptionsFormattingtoFormat(_ref9) {
-  var formatMessage = _ref9.formatMessage;
+var openCellOptionsFormattingtoFormat = function openCellOptionsFormattingtoFormat(_ref0) {
+  var formatMessage = _ref0.formatMessage;
   return [{
     name: formatMessage(_messages.helpDialogMessages.openCellOptions),
     type: 'image',
@@ -686,14 +724,14 @@ var imageAutoFormat = {
     return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
       as: "span",
       xcss: codeLg
-    }, "![", (0, _react.jsx)(_reactIntlNext.FormattedMessage
+    }, "![", (0, _react.jsx)(_reactIntl.FormattedMessage
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
     , _messages.helpDialogMessages.altText), "](http://www.image.com)"));
   }
 };
-var quickInsertAutoFormat = function quickInsertAutoFormat(_ref0) {
-  var formatMessage = _ref0.formatMessage;
+var quickInsertAutoFormat = function quickInsertAutoFormat(_ref1) {
+  var formatMessage = _ref1.formatMessage;
   return {
     name: formatMessage(_messages.helpDialogMessages.quickInsert),
     type: 'quickInsert',
@@ -709,5 +747,5 @@ var getSupportedFormatting = exports.getSupportedFormatting = function getSuppor
   var supportedBySchema = formatting(intl).filter(function (format) {
     return schema.nodes[format.type] || schema.marks[format.type];
   });
-  return [].concat((0, _toConsumableArray2.default)(aiEnabled && (0, _experiments.editorExperiment)('platform_editor_ai_quickstart_command', true) ? [quickInsertAskAI(intl)] : []), (0, _toConsumableArray2.default)(navigationKeymaps(intl)), (0, _toConsumableArray2.default)(otherFormatting(intl)), (0, _toConsumableArray2.default)(supportedBySchema), (0, _toConsumableArray2.default)(imageEnabled ? [imageAutoFormat] : []), (0, _toConsumableArray2.default)(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), (0, _toConsumableArray2.default)(focusTableResizeHandleFormatting(intl)), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? newResizeInformationFormatting(intl) : resizeInformationFormatting(intl)), (0, _toConsumableArray2.default)(openCellOptionsFormattingtoFormat(intl)), (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveTableRowColumnFormatting(intl) : []));
+  return [].concat((0, _toConsumableArray2.default)(aiEnabled && (0, _experiments.editorExperiment)('platform_editor_ai_quickstart_command', true) ? [quickInsertAskAI(intl)] : []), (0, _toConsumableArray2.default)(navigationKeymaps(intl)), (0, _toConsumableArray2.default)(otherFormatting(intl)), (0, _toConsumableArray2.default)(supportedBySchema), (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) ? blockControlsShortcutsFormatting(intl) : []), (0, _toConsumableArray2.default)(imageEnabled ? [imageAutoFormat] : []), (0, _toConsumableArray2.default)(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), (0, _toConsumableArray2.default)(focusTableResizeHandleFormatting(intl)), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? newResizeInformationFormatting(intl) : resizeInformationFormatting(intl)), (0, _toConsumableArray2.default)(openCellOptionsFormattingtoFormat(intl)), (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveTableRowColumnFormatting(intl) : []));
 };

package/dist/cjs/ui/index.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
@@ -71,5 +71,5 @@ var HelpDialog = function HelpDialog(_ref) {
     formatting: formatting
   })) : null);
 };
-var _default_1 = (0, _reactIntlNext.injectIntl)(HelpDialog);
+var _default_1 = (0, _reactIntl.injectIntl)(HelpDialog);
 var _default = exports.default = _default_1;

package/dist/cjs/ui/utils.js

@@ -43,6 +43,12 @@ var codeSm = (0, _primitives.xcss)({
   lineHeight: "var(--ds-space-300, 24px)",
   textAlign: 'center'
 });
+var arrowSymbols = {
+  arrowup: '↑',
+  arrowdown: '↓',
+  arrowleft: '←',
+  arrowright: '→'
+};
 var getKeyParts = function getKeyParts(keymap) {
   var browser = (0, _browser.getBrowserInfo)();
   var shortcut = keymap[browser.mac ? 'mac' : 'windows'];
@@ -112,6 +118,16 @@ var getComponentFromKeymap = exports.getComponentFromKeymap = function getCompon
           ,
           key: "".concat(keyParts, "-").concat(index)
         }, '⏎');
+      } else if (['arrowup', 'arrowdown', 'arrowleft', 'arrowright'].indexOf(part.toLowerCase()) >= 0) {
+        return (
+          // Ignored via go/ees005
+          // eslint-disable-next-line react/no-array-index-key
+          (0, _react.jsx)(_primitives.Box, {
+            as: "span",
+            xcss: codeSm,
+            key: "".concat(keyParts, "-").concat(index)
+          }, arrowSymbols[part.toLowerCase()])
+        );
       }
       return (
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766

package/dist/es2019/ui/ModalContent.js

@@ -7,7 +7,7 @@ import { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
-import { FormattedMessage, useIntl } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import Heading from '@atlaskit/heading';

package/dist/es2019/ui/ModalFooter.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl';
 import { openHelp } from '@atlaskit/editor-common/keymaps';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import { footer } from './styles';

package/dist/es2019/ui/ModalHeader.js

@@ -5,7 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import Heading from '@atlaskit/heading';

package/dist/es2019/ui/formatting.js

@@ -4,9 +4,9 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, askAIQuickInsert, clearFormatting, decreaseMediaSize, focusTableResizer, focusToContextMenuTrigger, increaseMediaSize, insertRule, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redoAlt, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleSmallText, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
+import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, askAIQuickInsert, clearFormatting, decreaseMediaSize, dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, focusTableResizer, showElementDragHandle, focusToContextMenuTrigger, increaseMediaSize, insertRule, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redoAlt, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleSmallText, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
 import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, tableMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
@@ -495,6 +495,33 @@ const focusTableResizeHandleFormatting = ({
   type: 'navigation',
   keymap: () => focusTableResizer
 }];
+
+// 'navigation' is used as the type for these entries because Format.type is designed to match ADF
+// schema node/mark names — these shortcuts have no corresponding ADF type, so 'navigation' acts as
+// a catch-all that passes the schema filter and routes entries to the keyboard shortcuts column in the UI.
+const blockControlsShortcutsFormatting = ({
+  formatMessage
+}) => [{
+  name: formatMessage(messages.selectDragHandle),
+  type: 'navigation',
+  keymap: () => showElementDragHandle
+}, {
+  name: formatMessage(messages.moveSelectionUp),
+  type: 'navigation',
+  keymap: () => dragToMoveUp
+}, {
+  name: formatMessage(messages.moveSelectionDown),
+  type: 'navigation',
+  keymap: () => dragToMoveDown
+}, {
+  name: formatMessage(messages.moveSelectionLeft),
+  type: 'navigation',
+  keymap: () => dragToMoveLeft
+}, {
+  name: formatMessage(messages.moveSelectionRight),
+  type: 'navigation',
+  keymap: () => dragToMoveRight
+}];
 const moveTableRowColumnFormatting = ({
   formatMessage
 }) => [{
@@ -544,5 +571,5 @@ const quickInsertAutoFormat = ({
 });
 export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled, aiEnabled) => {
   const supportedBySchema = formatting(intl).filter(format => schema.nodes[format.type] || schema.marks[format.type]);
-  return [...(aiEnabled && editorExperiment('platform_editor_ai_quickstart_command', true) ? [quickInsertAskAI(intl)] : []), ...navigationKeymaps(intl), ...otherFormatting(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...focusTableResizeHandleFormatting(intl), ...(editorExperiment('platform_editor_breakout_resizing', true) ? newResizeInformationFormatting(intl) : resizeInformationFormatting(intl)), ...openCellOptionsFormattingtoFormat(intl), ...(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveTableRowColumnFormatting(intl) : [])];
+  return [...(aiEnabled && editorExperiment('platform_editor_ai_quickstart_command', true) ? [quickInsertAskAI(intl)] : []), ...navigationKeymaps(intl), ...otherFormatting(intl), ...supportedBySchema, ...(expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) ? blockControlsShortcutsFormatting(intl) : []), ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...focusTableResizeHandleFormatting(intl), ...(editorExperiment('platform_editor_breakout_resizing', true) ? newResizeInformationFormatting(intl) : resizeInformationFormatting(intl)), ...openCellOptionsFormattingtoFormat(intl), ...(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveTableRowColumnFormatting(intl) : [])];
 };

package/dist/es2019/ui/index.js

@@ -6,7 +6,7 @@ import { useCallback, useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
+import { injectIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import AkModalDialog, { ModalTransition } from '@atlaskit/modal-dialog';

package/dist/es2019/ui/utils.js

@@ -35,6 +35,12 @@ const codeSm = xcss({
   lineHeight: "var(--ds-space-300, 24px)",
   textAlign: 'center'
 });
+const arrowSymbols = {
+  arrowup: '↑',
+  arrowdown: '↓',
+  arrowleft: '←',
+  arrowright: '→'
+};
 const getKeyParts = keymap => {
   const browser = getBrowserInfo();
   let shortcut = keymap[browser.mac ? 'mac' : 'windows'];
@@ -104,6 +110,16 @@ export const getComponentFromKeymap = keymap => {
           ,
           key: `${keyParts}-${index}`
         }, '⏎');
+      } else if (['arrowup', 'arrowdown', 'arrowleft', 'arrowright'].indexOf(part.toLowerCase()) >= 0) {
+        return (
+          // Ignored via go/ees005
+          // eslint-disable-next-line react/no-array-index-key
+          jsx(Box, {
+            as: "span",
+            xcss: codeSm,
+            key: `${keyParts}-${index}`
+          }, arrowSymbols[part.toLowerCase()])
+        );
       }
       return (
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766

package/dist/esm/ui/ModalContent.js

@@ -7,7 +7,7 @@ import { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
-import { FormattedMessage, useIntl } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import Heading from '@atlaskit/heading';

package/dist/esm/ui/ModalFooter.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl';
 import { openHelp } from '@atlaskit/editor-common/keymaps';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import { footer } from './styles';

package/dist/esm/ui/ModalHeader.js

@@ -5,7 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import Heading from '@atlaskit/heading';

package/dist/esm/ui/formatting.js

@@ -5,9 +5,9 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, askAIQuickInsert, clearFormatting, decreaseMediaSize, focusTableResizer, focusToContextMenuTrigger, increaseMediaSize, insertRule, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redoAlt, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleSmallText, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
+import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, askAIQuickInsert, clearFormatting, decreaseMediaSize, dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, focusTableResizer, showElementDragHandle, focusToContextMenuTrigger, increaseMediaSize, insertRule, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redoAlt, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleSmallText, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
 import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, tableMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
@@ -632,8 +632,46 @@ var focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting
     }
   }];
 };
-var moveTableRowColumnFormatting = function moveTableRowColumnFormatting(_ref8) {
+
+// 'navigation' is used as the type for these entries because Format.type is designed to match ADF
+// schema node/mark names — these shortcuts have no corresponding ADF type, so 'navigation' acts as
+// a catch-all that passes the schema filter and routes entries to the keyboard shortcuts column in the UI.
+var blockControlsShortcutsFormatting = function blockControlsShortcutsFormatting(_ref8) {
   var formatMessage = _ref8.formatMessage;
+  return [{
+    name: formatMessage(messages.selectDragHandle),
+    type: 'navigation',
+    keymap: function keymap() {
+      return showElementDragHandle;
+    }
+  }, {
+    name: formatMessage(messages.moveSelectionUp),
+    type: 'navigation',
+    keymap: function keymap() {
+      return dragToMoveUp;
+    }
+  }, {
+    name: formatMessage(messages.moveSelectionDown),
+    type: 'navigation',
+    keymap: function keymap() {
+      return dragToMoveDown;
+    }
+  }, {
+    name: formatMessage(messages.moveSelectionLeft),
+    type: 'navigation',
+    keymap: function keymap() {
+      return dragToMoveLeft;
+    }
+  }, {
+    name: formatMessage(messages.moveSelectionRight),
+    type: 'navigation',
+    keymap: function keymap() {
+      return dragToMoveRight;
+    }
+  }];
+};
+var moveTableRowColumnFormatting = function moveTableRowColumnFormatting(_ref9) {
+  var formatMessage = _ref9.formatMessage;
   return [{
     name: formatMessage(tableMessages.moveColumnLeftHelpDialogLabel),
     type: 'table',
@@ -660,8 +698,8 @@ var moveTableRowColumnFormatting = function moveTableRowColumnFormatting(_ref8)
     }
   }];
 };
-var openCellOptionsFormattingtoFormat = function openCellOptionsFormattingtoFormat(_ref9) {
-  var formatMessage = _ref9.formatMessage;
+var openCellOptionsFormattingtoFormat = function openCellOptionsFormattingtoFormat(_ref0) {
+  var formatMessage = _ref0.formatMessage;
   return [{
     name: formatMessage(messages.openCellOptions),
     type: 'image',
@@ -683,8 +721,8 @@ var imageAutoFormat = {
     , messages.altText), "](http://www.image.com)"));
   }
 };
-var quickInsertAutoFormat = function quickInsertAutoFormat(_ref0) {
-  var formatMessage = _ref0.formatMessage;
+var quickInsertAutoFormat = function quickInsertAutoFormat(_ref1) {
+  var formatMessage = _ref1.formatMessage;
   return {
     name: formatMessage(messages.quickInsert),
     type: 'quickInsert',
@@ -700,5 +738,5 @@ export var getSupportedFormatting = function getSupportedFormatting(schema, intl
   var supportedBySchema = formatting(intl).filter(function (format) {
     return schema.nodes[format.type] || schema.marks[format.type];
   });
-  return [].concat(_toConsumableArray(aiEnabled && editorExperiment('platform_editor_ai_quickstart_command', true) ? [quickInsertAskAI(intl)] : []), _toConsumableArray(navigationKeymaps(intl)), _toConsumableArray(otherFormatting(intl)), _toConsumableArray(supportedBySchema), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(focusTableResizeHandleFormatting(intl)), _toConsumableArray(editorExperiment('platform_editor_breakout_resizing', true) ? newResizeInformationFormatting(intl) : resizeInformationFormatting(intl)), _toConsumableArray(openCellOptionsFormattingtoFormat(intl)), _toConsumableArray(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveTableRowColumnFormatting(intl) : []));
+  return [].concat(_toConsumableArray(aiEnabled && editorExperiment('platform_editor_ai_quickstart_command', true) ? [quickInsertAskAI(intl)] : []), _toConsumableArray(navigationKeymaps(intl)), _toConsumableArray(otherFormatting(intl)), _toConsumableArray(supportedBySchema), _toConsumableArray(expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) ? blockControlsShortcutsFormatting(intl) : []), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(focusTableResizeHandleFormatting(intl)), _toConsumableArray(editorExperiment('platform_editor_breakout_resizing', true) ? newResizeInformationFormatting(intl) : resizeInformationFormatting(intl)), _toConsumableArray(openCellOptionsFormattingtoFormat(intl)), _toConsumableArray(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveTableRowColumnFormatting(intl) : []));
 };

package/dist/esm/ui/index.js

@@ -6,7 +6,7 @@ import { useCallback, useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
+import { injectIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import AkModalDialog, { ModalTransition } from '@atlaskit/modal-dialog';

package/dist/esm/ui/utils.js

@@ -35,6 +35,12 @@ var codeSm = xcss({
   lineHeight: "var(--ds-space-300, 24px)",
   textAlign: 'center'
 });
+var arrowSymbols = {
+  arrowup: '↑',
+  arrowdown: '↓',
+  arrowleft: '←',
+  arrowright: '→'
+};
 var getKeyParts = function getKeyParts(keymap) {
   var browser = getBrowserInfo();
   var shortcut = keymap[browser.mac ? 'mac' : 'windows'];
@@ -104,6 +110,16 @@ export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
           ,
           key: "".concat(keyParts, "-").concat(index)
         }, '⏎');
+      } else if (['arrowup', 'arrowdown', 'arrowleft', 'arrowright'].indexOf(part.toLowerCase()) >= 0) {
+        return (
+          // Ignored via go/ees005
+          // eslint-disable-next-line react/no-array-index-key
+          jsx(Box, {
+            as: "span",
+            xcss: codeSm,
+            key: "".concat(keyParts, "-").concat(index)
+          }, arrowSymbols[part.toLowerCase()])
+        );
       }
       return (
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766

package/dist/types/ui/ModalHeader.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import type { ComponentType, FC } from 'react';
-import type { WithIntlProps, WrappedComponentProps } from 'react-intl-next';
+import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 interface ModalHeaderProps extends WrappedComponentProps {
     onClose: OnCloseHandler | undefined;

package/dist/types/ui/formatting.d.ts

@@ -1,4 +1,4 @@
-import type { IntlShape } from 'react-intl-next';
+import type { IntlShape } from 'react-intl';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { Format } from './Format';
 export declare const formatting: (intl: IntlShape) => Format[];

package/dist/types/ui/index.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type ComponentType, type FC } from 'react';
-import type { WithIntlProps, WrappedComponentProps } from 'react-intl-next';
+import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { HelpDialogPlugin } from '../helpDialogPluginType';

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

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import type { ComponentType, FC } from 'react';
-import type { WithIntlProps, WrappedComponentProps } from 'react-intl-next';
+import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 interface ModalHeaderProps extends WrappedComponentProps {
     onClose: OnCloseHandler | undefined;

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

@@ -1,4 +1,4 @@
-import type { IntlShape } from 'react-intl-next';
+import type { IntlShape } from 'react-intl';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { Format } from './Format';
 export declare const formatting: (intl: IntlShape) => Format[];

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

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type ComponentType, type FC } from 'react';
-import type { WithIntlProps, WrappedComponentProps } from 'react-intl-next';
+import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { HelpDialogPlugin } from '../helpDialogPluginType';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-help-dialog",
-	"version": "8.0.33",
+	"version": "10.0.0",
 	"description": "Help Dialog plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,29 +29,30 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/editor-plugin-analytics": "^8.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^8.0.0",
+		"@atlaskit/editor-plugin-analytics": "^10.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^10.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.1.0",
+		"@atlaskit/icon": "^34.2.0",
 		"@atlaskit/modal-dialog": "^14.15.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^62.0.0",
+		"@atlaskit/tmp-editor-statsig": "^62.4.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
-		"react-intl-next": "npm:react-intl@^5.18.1",
 		"react-loadable": "^5.1.0"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^16.3.0"
+		"@testing-library/react": "^16.3.0",
+		"react-intl": "^6.6.2"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.21.0",
-		"react": "^18.2.0"
+		"@atlaskit/editor-common": "^114.0.0",
+		"react": "^18.2.0",
+		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {