@atlaskit/editor-plugin-help-dialog 0.3.7 → 0.3.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-help-dialog
 
+## 0.3.8
+
+### Patch Changes
+
+- [#65334](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65334) [`089979f0308f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/089979f0308f) - [ux] ECA11Y-111/ECA11Y-86 Help dialog - resize table and media information
+
 ## 0.3.7
 
 ### Patch Changes

package/dist/cjs/ui/index.js

@@ -71,6 +71,21 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Select table column',
     description: 'Hint for selecting a table column using a shortcut'
   },
+  increaseSize: {
+    id: 'fabric.editor.increaseSize',
+    defaultMessage: 'Increase size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
+  },
+  decreaseSize: {
+    id: 'fabric.editor.decreaseSize',
+    defaultMessage: 'Decrease size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
+  },
+  focusTableResizeHandle: {
+    id: 'fabric.editor.focusTableResizeHandle',
+    defaultMessage: 'Focus table resize handle',
+    description: 'Focus table resize handle'
+  },
   closeHelpDialog: {
     id: 'fabric.editor.closeHelpDialog',
     defaultMessage: 'Close help dialog',
@@ -452,6 +467,32 @@ var otherFormatting = function otherFormatting(_ref3) {
     }
   }] : []));
 };
+var resizeInformationFormatting = function resizeInformationFormatting(_ref4) {
+  var formatMessage = _ref4.formatMessage;
+  return [{
+    name: formatMessage(messages.increaseSize),
+    type: 'media',
+    keymap: function keymap() {
+      return _keymaps.increaseMediaSize;
+    }
+  }, {
+    name: formatMessage(messages.decreaseSize),
+    type: 'media',
+    keymap: function keymap() {
+      return _keymaps.decreaseMediaSize;
+    }
+  }];
+};
+var focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting(_ref5) {
+  var formatMessage = _ref5.formatMessage;
+  return [{
+    name: formatMessage(messages.focusTableResizeHandle),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.focusTableResizer;
+    }
+  }];
+};
 var imageAutoFormat = {
   name: 'Image',
   type: 'image',
@@ -461,8 +502,8 @@ var imageAutoFormat = {
     }, "![", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.altText), "](http://www.image.com)"));
   }
 };
-var quickInsertAutoFormat = function quickInsertAutoFormat(_ref4) {
-  var formatMessage = _ref4.formatMessage;
+var quickInsertAutoFormat = function quickInsertAutoFormat(_ref6) {
+  var formatMessage = _ref6.formatMessage;
   return {
     name: formatMessage(messages.quickInsert),
     type: 'quickInsert',
@@ -480,15 +521,18 @@ var getKeyParts = function getKeyParts(keymap) {
   }
   return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
 };
+var isAnyA11yResizeFeatureFlagEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-media-resizing_b5v0o') || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv');
 var getSupportedFormatting = exports.getSupportedFormatting = function getSupportedFormatting(schema, intl, imageEnabled, quickInsertEnabled) {
   var supportedBySchema = formatting(intl).filter(function (format) {
     return schema.nodes[format.type] || schema.marks[format.type];
   });
-  return [].concat((0, _toConsumableArray2.default)(navigationKeymaps(intl)), (0, _toConsumableArray2.default)(supportedBySchema), (0, _toConsumableArray2.default)(imageEnabled ? [imageAutoFormat] : []), (0, _toConsumableArray2.default)(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), (0, _toConsumableArray2.default)(otherFormatting(intl)));
+  return [].concat((0, _toConsumableArray2.default)(navigationKeymaps(intl)), (0, _toConsumableArray2.default)(supportedBySchema), (0, _toConsumableArray2.default)(imageEnabled ? [imageAutoFormat] : []), (0, _toConsumableArray2.default)(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), (0, _toConsumableArray2.default)(otherFormatting(intl)), (0, _toConsumableArray2.default)(isAnyA11yResizeFeatureFlagEnabled ? resizeInformationFormatting(intl) : []), (0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv') ? focusTableResizeHandleFormatting(intl) : []));
 };
 var getComponentFromKeymap = exports.getComponentFromKeymap = function getComponentFromKeymap(keymap) {
   var keyParts = getKeyParts(keymap);
-  return (0, _react2.jsx)("span", null, keyParts.map(function (part, index) {
+  return (0, _react2.jsx)("span", {
+    css: _styles.componentFromKeymapWrapperStyles
+  }, keyParts.map(function (part, index) {
     if (part === '+') {
       return (0, _react2.jsx)("span", {
         key: "".concat(keyParts, "-").concat(index)
@@ -520,8 +564,8 @@ var getComponentFromKeymap = exports.getComponentFromKeymap = function getCompon
     }, part.toUpperCase());
   }));
 };
-var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref5) {
-  var formatMessage = _ref5.intl.formatMessage;
+var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref7) {
+  var formatMessage = _ref7.intl.formatMessage;
   var _useModal = (0, _modalDialog.useModal)(),
     onClose = _useModal.onClose;
   return (0, _react2.jsx)("div", {
@@ -549,11 +593,11 @@ var ModalFooter = function ModalFooter() {
     }
   })));
 };
-var HelpDialog = function HelpDialog(_ref6) {
-  var pluginInjectionApi = _ref6.pluginInjectionApi,
-    editorView = _ref6.editorView,
-    quickInsertEnabled = _ref6.quickInsertEnabled,
-    intl = _ref6.intl;
+var HelpDialog = function HelpDialog(_ref8) {
+  var pluginInjectionApi = _ref8.pluginInjectionApi,
+    editorView = _ref8.editorView,
+    quickInsertEnabled = _ref8.quickInsertEnabled,
+    intl = _ref8.intl;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['helpDialog']),
     helpDialogState = _useSharedPluginState.helpDialogState;
   var closeDialog = (0, _react.useCallback)(function () {

package/dist/cjs/ui/styles.js

@@ -5,14 +5,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.title = exports.shortcutsArray = exports.row = exports.line = exports.header = exports.footer = exports.dialogHeader = exports.contentWrapper = exports.content = exports.column = exports.codeSm = exports.codeMd = exports.codeLg = void 0;
+exports.title = exports.shortcutsArray = exports.row = exports.line = exports.header = exports.footer = exports.dialogHeader = exports.contentWrapper = exports.content = exports.componentFromKeymapWrapperStyles = exports.column = exports.codeSm = exports.codeMd = exports.codeLg = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var colors = _colors;
 var _constants = require("@atlaskit/theme/constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var header = exports.header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: ", " ", ";\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", (0, _editorSharedStyles.relativeFontSizeToBase16)(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), (0, _constants.borderRadius)());
@@ -48,4 +48,5 @@ var title = exports.title = {
 var codeSm = exports.codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
 var codeMd = exports.codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
 var codeLg = exports.codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
-var shortcutsArray = exports.shortcutsArray = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: ", ";\n"])), "var(--ds-space-150, 12px)");
+var shortcutsArray = exports.shortcutsArray = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: ", ";\n"])), "var(--ds-space-150, 12px)");
+var componentFromKeymapWrapperStyles = exports.componentFromKeymapWrapperStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  flex-shrink: 0;\n"])));

package/dist/es2019/ui/index.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { addInlineComment, addLink, alignLeft, clearFormatting, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
+import { addInlineComment, addLink, alignLeft, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
 import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -12,7 +12,7 @@ import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkModalDialog, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { closeHelpCommand } from '../commands';
-import { codeLg, codeMd, codeSm, column, content, contentWrapper, dialogHeader, footer, header, line, row, shortcutsArray, title } from './styles';
+import { codeLg, codeMd, codeSm, column, componentFromKeymapWrapperStyles, content, contentWrapper, dialogHeader, footer, header, line, row, shortcutsArray, title } from './styles';
 const messages = defineMessages({
   editorHelp: {
     id: 'fabric.editor.editorHelp',
@@ -59,6 +59,21 @@ const messages = defineMessages({
     defaultMessage: 'Select table column',
     description: 'Hint for selecting a table column using a shortcut'
   },
+  increaseSize: {
+    id: 'fabric.editor.increaseSize',
+    defaultMessage: 'Increase size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
+  },
+  decreaseSize: {
+    id: 'fabric.editor.decreaseSize',
+    defaultMessage: 'Decrease size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
+  },
+  focusTableResizeHandle: {
+    id: 'fabric.editor.focusTableResizeHandle',
+    defaultMessage: 'Focus table resize handle',
+    description: 'Focus table resize handle'
+  },
   closeHelpDialog: {
     id: 'fabric.editor.closeHelpDialog',
     defaultMessage: 'Close help dialog',
@@ -337,6 +352,24 @@ const otherFormatting = ({
     css: codeSm
   }, "\u2193")))
 }] : [])];
+const resizeInformationFormatting = ({
+  formatMessage
+}) => [{
+  name: formatMessage(messages.increaseSize),
+  type: 'media',
+  keymap: () => increaseMediaSize
+}, {
+  name: formatMessage(messages.decreaseSize),
+  type: 'media',
+  keymap: () => decreaseMediaSize
+}];
+const focusTableResizeHandleFormatting = ({
+  formatMessage
+}) => [{
+  name: formatMessage(messages.focusTableResizeHandle),
+  type: 'navigation',
+  keymap: () => focusTableResizer
+}];
 const imageAutoFormat = {
   name: 'Image',
   type: 'image',
@@ -360,13 +393,16 @@ const getKeyParts = keymap => {
   }
   return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
 };
+const isAnyA11yResizeFeatureFlagEnabled = getBooleanFF('platform.editor.a11y-media-resizing_b5v0o') || getBooleanFF('platform.editor.a11y-table-resizing_uapcv');
 export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled) => {
   const supportedBySchema = formatting(intl).filter(format => schema.nodes[format.type] || schema.marks[format.type]);
-  return [...navigationKeymaps(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...otherFormatting(intl)];
+  return [...navigationKeymaps(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...otherFormatting(intl), ...(isAnyA11yResizeFeatureFlagEnabled ? resizeInformationFormatting(intl) : []), ...(getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? focusTableResizeHandleFormatting(intl) : [])];
 };
 export const getComponentFromKeymap = keymap => {
   const keyParts = getKeyParts(keymap);
-  return jsx("span", null, keyParts.map((part, index) => {
+  return jsx("span", {
+    css: componentFromKeymapWrapperStyles
+  }, keyParts.map((part, index) => {
     if (part === '+') {
       return jsx("span", {
         key: `${keyParts}-${index}`

package/dist/es2019/ui/styles.js

@@ -113,4 +113,7 @@ export const shortcutsArray = css`
   flex-direction: column;
   flex-shrink: 0;
   gap: ${"var(--ds-space-150, 12px)"};
+`;
+export const componentFromKeymapWrapperStyles = css`
+  flex-shrink: 0;
 `;

package/dist/esm/ui/index.js

@@ -5,7 +5,7 @@ import { useCallback, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { addInlineComment, addLink, alignLeft, clearFormatting, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
+import { addInlineComment, addLink, alignLeft, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
 import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -13,7 +13,7 @@ import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkModalDialog, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { closeHelpCommand } from '../commands';
-import { codeLg, codeMd, codeSm, column, content, contentWrapper, dialogHeader, footer, header, line, row, shortcutsArray, title } from './styles';
+import { codeLg, codeMd, codeSm, column, componentFromKeymapWrapperStyles, content, contentWrapper, dialogHeader, footer, header, line, row, shortcutsArray, title } from './styles';
 var messages = defineMessages({
   editorHelp: {
     id: 'fabric.editor.editorHelp',
@@ -60,6 +60,21 @@ var messages = defineMessages({
     defaultMessage: 'Select table column',
     description: 'Hint for selecting a table column using a shortcut'
   },
+  increaseSize: {
+    id: 'fabric.editor.increaseSize',
+    defaultMessage: 'Increase size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
+  },
+  decreaseSize: {
+    id: 'fabric.editor.decreaseSize',
+    defaultMessage: 'Decrease size',
+    description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
+  },
+  focusTableResizeHandle: {
+    id: 'fabric.editor.focusTableResizeHandle',
+    defaultMessage: 'Focus table resize handle',
+    description: 'Focus table resize handle'
+  },
   closeHelpDialog: {
     id: 'fabric.editor.closeHelpDialog',
     defaultMessage: 'Close help dialog',
@@ -441,6 +456,32 @@ var otherFormatting = function otherFormatting(_ref3) {
     }
   }] : []));
 };
+var resizeInformationFormatting = function resizeInformationFormatting(_ref4) {
+  var formatMessage = _ref4.formatMessage;
+  return [{
+    name: formatMessage(messages.increaseSize),
+    type: 'media',
+    keymap: function keymap() {
+      return increaseMediaSize;
+    }
+  }, {
+    name: formatMessage(messages.decreaseSize),
+    type: 'media',
+    keymap: function keymap() {
+      return decreaseMediaSize;
+    }
+  }];
+};
+var focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting(_ref5) {
+  var formatMessage = _ref5.formatMessage;
+  return [{
+    name: formatMessage(messages.focusTableResizeHandle),
+    type: 'navigation',
+    keymap: function keymap() {
+      return focusTableResizer;
+    }
+  }];
+};
 var imageAutoFormat = {
   name: 'Image',
   type: 'image',
@@ -450,8 +491,8 @@ var imageAutoFormat = {
     }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"));
   }
 };
-var quickInsertAutoFormat = function quickInsertAutoFormat(_ref4) {
-  var formatMessage = _ref4.formatMessage;
+var quickInsertAutoFormat = function quickInsertAutoFormat(_ref6) {
+  var formatMessage = _ref6.formatMessage;
   return {
     name: formatMessage(messages.quickInsert),
     type: 'quickInsert',
@@ -469,15 +510,18 @@ var getKeyParts = function getKeyParts(keymap) {
   }
   return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
 };
+var isAnyA11yResizeFeatureFlagEnabled = getBooleanFF('platform.editor.a11y-media-resizing_b5v0o') || getBooleanFF('platform.editor.a11y-table-resizing_uapcv');
 export var getSupportedFormatting = function getSupportedFormatting(schema, intl, imageEnabled, quickInsertEnabled) {
   var supportedBySchema = formatting(intl).filter(function (format) {
     return schema.nodes[format.type] || schema.marks[format.type];
   });
-  return [].concat(_toConsumableArray(navigationKeymaps(intl)), _toConsumableArray(supportedBySchema), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(otherFormatting(intl)));
+  return [].concat(_toConsumableArray(navigationKeymaps(intl)), _toConsumableArray(supportedBySchema), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(otherFormatting(intl)), _toConsumableArray(isAnyA11yResizeFeatureFlagEnabled ? resizeInformationFormatting(intl) : []), _toConsumableArray(getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? focusTableResizeHandleFormatting(intl) : []));
 };
 export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
   var keyParts = getKeyParts(keymap);
-  return jsx("span", null, keyParts.map(function (part, index) {
+  return jsx("span", {
+    css: componentFromKeymapWrapperStyles
+  }, keyParts.map(function (part, index) {
     if (part === '+') {
       return jsx("span", {
         key: "".concat(keyParts, "-").concat(index)
@@ -509,8 +553,8 @@ export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
     }, part.toUpperCase());
   }));
 };
-var ModalHeader = injectIntl(function (_ref5) {
-  var formatMessage = _ref5.intl.formatMessage;
+var ModalHeader = injectIntl(function (_ref7) {
+  var formatMessage = _ref7.intl.formatMessage;
   var _useModal = useModal(),
     onClose = _useModal.onClose;
   return jsx("div", {
@@ -538,11 +582,11 @@ var ModalFooter = function ModalFooter() {
     }
   })));
 };
-var HelpDialog = function HelpDialog(_ref6) {
-  var pluginInjectionApi = _ref6.pluginInjectionApi,
-    editorView = _ref6.editorView,
-    quickInsertEnabled = _ref6.quickInsertEnabled,
-    intl = _ref6.intl;
+var HelpDialog = function HelpDialog(_ref8) {
+  var pluginInjectionApi = _ref8.pluginInjectionApi,
+    editorView = _ref8.editorView,
+    quickInsertEnabled = _ref8.quickInsertEnabled,
+    intl = _ref8.intl;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['helpDialog']),
     helpDialogState = _useSharedPluginState.helpDialogState;
   var closeDialog = useCallback(function () {

package/dist/esm/ui/styles.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 import { css } from '@emotion/react';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
@@ -38,4 +38,5 @@ export var title = {
 export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
 export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
 export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
-export var shortcutsArray = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: ", ";\n"])), "var(--ds-space-150, 12px)");
+export var shortcutsArray = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: ", ";\n"])), "var(--ds-space-150, 12px)");
+export var componentFromKeymapWrapperStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n"])));

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

@@ -32,3 +32,4 @@ export declare const codeSm: import("@emotion/react").SerializedStyles;
 export declare const codeMd: import("@emotion/react").SerializedStyles;
 export declare const codeLg: import("@emotion/react").SerializedStyles;
 export declare const shortcutsArray: import("@emotion/react").SerializedStyles;
+export declare const componentFromKeymapWrapperStyles: import("@emotion/react").SerializedStyles;

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

@@ -32,3 +32,4 @@ export declare const codeSm: import("@emotion/react").SerializedStyles;
 export declare const codeMd: import("@emotion/react").SerializedStyles;
 export declare const codeLg: import("@emotion/react").SerializedStyles;
 export declare const shortcutsArray: import("@emotion/react").SerializedStyles;
+export declare const componentFromKeymapWrapperStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-help-dialog",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Help Dialog plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -32,7 +32,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^77.0.0",
+    "@atlaskit/editor-common": "^77.1.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-quick-insert": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
@@ -41,7 +41,7 @@
     "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "react-intl-next": "npm:react-intl@^5.18.1",
@@ -90,6 +90,12 @@
   "platform-feature-flags": {
     "platform.editor.a11y.table-selection_9uv33": {
       "type": "boolean"
+    },
+    "platform.editor.a11y-media-resizing_b5v0o": {
+      "type": "boolean"
+    },
+    "platform.editor.a11y-table-resizing_uapcv": {
+      "type": "boolean"
     }
   }
 }