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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-help-dialog
 
+## 0.3.9
+
+### Patch Changes
+
+- [#68572](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68572) [`15d407fe5143`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/15d407fe5143) - Upgrading @atlaskit/editor-prosemirror dependency
+
+## 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

@@ -25,64 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 /** @jsx jsx */
 
-var messages = (0, _reactIntlNext.defineMessages)({
-  editorHelp: {
-    id: 'fabric.editor.editorHelp',
-    defaultMessage: 'Editor help',
-    description: 'Title of editor help dialog.'
-  },
-  helpDialogTips: {
-    id: 'fabric.editor.helpDialogTips',
-    defaultMessage: 'Press {keyMap} to quickly open this dialog at any time',
-    description: 'Hint about how to open a dialog quickly using a shortcut.'
-  },
-  keyboardShortcuts: {
-    id: 'fabric.editor.keyboardShortcuts',
-    defaultMessage: 'Keyboard shortcuts',
-    description: ''
-  },
-  markdown: {
-    id: 'fabric.editor.markdown',
-    defaultMessage: 'Markdown',
-    description: 'It is a name of popular markup language.'
-  },
-  pastePlainText: {
-    id: 'fabric.editor.pastePlainText',
-    defaultMessage: 'Paste plain text',
-    description: ''
-  },
-  CheckUncheckActionItem: {
-    id: 'fabric.editor.checkUncheckActionItem',
-    defaultMessage: 'Toggle action item',
-    description: 'For Check/Uncheck Action item use shortcut'
-  },
-  altText: {
-    id: 'fabric.editor.altText',
-    defaultMessage: 'Alt text',
-    description: 'Alternative text for image.'
-  },
-  selectTableRow: {
-    id: 'fabric.editor.selectTableRow',
-    defaultMessage: 'Select table row',
-    description: 'Hint for selecting a table row using a shortcut'
-  },
-  selectTableColumn: {
-    id: 'fabric.editor.selectTableColumn',
-    defaultMessage: 'Select table column',
-    description: 'Hint for selecting a table column using a shortcut'
-  },
-  closeHelpDialog: {
-    id: 'fabric.editor.closeHelpDialog',
-    defaultMessage: 'Close help dialog',
-    description: ''
-  },
-  // TODO: Move it inside quick insert plugin
-  quickInsert: {
-    id: 'fabric.editor.quickInsert',
-    defaultMessage: 'Quick insert',
-    description: 'Name of a feature, which let you insert items quickly.'
-  }
-});
 var navigationKeymaps = function navigationKeymaps(_ref) {
   var formatMessage = _ref.formatMessage;
   return [{
@@ -385,7 +327,7 @@ var otherFormatting = function otherFormatting(_ref3) {
       return _keymaps.redo;
     }
   }, {
-    name: formatMessage(messages.pastePlainText),
+    name: formatMessage(_messages.helpDialogMessages.pastePlainText),
     type: 'paste',
     keymap: function keymap() {
       return _keymaps.pastePlainText;
@@ -397,13 +339,13 @@ var otherFormatting = function otherFormatting(_ref3) {
       return _keymaps.addInlineComment;
     }
   }, {
-    name: formatMessage(messages.CheckUncheckActionItem),
+    name: formatMessage(_messages.helpDialogMessages.CheckUncheckActionItem),
     type: 'checkbox',
     keymap: function keymap() {
       return _keymaps.toggleTaskItemCheckbox;
     }
   }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y.table-selection_9uv33') ? [{
-    name: formatMessage(messages.selectTableRow),
+    name: formatMessage(_messages.helpDialogMessages.selectTableRow),
     type: 'table',
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", {
@@ -427,7 +369,7 @@ var otherFormatting = function otherFormatting(_ref3) {
       }, "\u2192")));
     }
   }, {
-    name: formatMessage(messages.selectTableColumn),
+    name: formatMessage(_messages.helpDialogMessages.selectTableColumn),
     type: 'table',
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", {
@@ -452,19 +394,45 @@ var otherFormatting = function otherFormatting(_ref3) {
     }
   }] : []));
 };
+var resizeInformationFormatting = function resizeInformationFormatting(_ref4) {
+  var formatMessage = _ref4.formatMessage;
+  return [{
+    name: formatMessage(_messages.helpDialogMessages.increaseSize),
+    type: 'media',
+    keymap: function keymap() {
+      return _keymaps.increaseMediaSize;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.decreaseSize),
+    type: 'media',
+    keymap: function keymap() {
+      return _keymaps.decreaseMediaSize;
+    }
+  }];
+};
+var focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting(_ref5) {
+  var formatMessage = _ref5.formatMessage;
+  return [{
+    name: formatMessage(_messages.helpDialogMessages.focusTableResizeHandle),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.focusTableResizer;
+    }
+  }];
+};
 var imageAutoFormat = {
   name: 'Image',
   type: 'image',
   autoFormatting: function autoFormatting() {
     return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
       css: _styles.codeLg
-    }, "![", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.altText), "](http://www.image.com)"));
+    }, "![", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.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),
+    name: formatMessage(_messages.helpDialogMessages.quickInsert),
     type: 'quickInsert',
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
@@ -480,15 +448,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,22 +491,22 @@ 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", {
     css: _styles.header
   }, (0, _react2.jsx)("h1", {
     css: _styles.dialogHeader
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.editorHelp)), (0, _react2.jsx)("div", null, (0, _react2.jsx)(_uiMenu.ToolbarButton
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.editorHelp)), (0, _react2.jsx)("div", null, (0, _react2.jsx)(_uiMenu.ToolbarButton
   // @ts-ignore
   , {
     onClick: onClose,
-    title: formatMessage(messages.closeHelpDialog),
+    title: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
     spacing: "compact",
     iconBefore: (0, _react2.jsx)(_cross.default, {
-      label: formatMessage(messages.closeHelpDialog),
+      label: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
       size: "medium"
     })
   })));
@@ -543,17 +514,17 @@ var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref5) {
 var ModalFooter = function ModalFooter() {
   return (0, _react2.jsx)("div", {
     css: _styles.footer
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.helpDialogTips, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.helpDialogMessages.helpDialogTips, {
     values: {
       keyMap: getComponentFromKeymap(_keymaps.openHelp)
     }
   })));
 };
-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 () {
@@ -587,7 +558,7 @@ var HelpDialog = function HelpDialog(_ref6) {
     css: _styles.column
   }, (0, _react2.jsx)("h2", {
     css: _styles.title
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.keyboardShortcuts)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.keyboardShortcuts)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
     var keymap = form.keymap && form.keymap();
     return keymap && keymap[_utils.browser.mac ? 'mac' : 'windows'];
   }).map(function (form) {
@@ -610,7 +581,7 @@ var HelpDialog = function HelpDialog(_ref6) {
     css: _styles.column
   }, (0, _react2.jsx)("h2", {
     css: _styles.title
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.markdown)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.markdown)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
     return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
   }).map(function (form) {
     return form.autoFormatting && (0, _react2.jsx)("li", {

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

@@ -2,75 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useEffect } from 'react';
 import { jsx } from '@emotion/react';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl-next';
+import { 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 { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
+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, helpDialogMessages as messages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { browser } from '@atlaskit/editor-common/utils';
 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';
-const messages = defineMessages({
-  editorHelp: {
-    id: 'fabric.editor.editorHelp',
-    defaultMessage: 'Editor help',
-    description: 'Title of editor help dialog.'
-  },
-  helpDialogTips: {
-    id: 'fabric.editor.helpDialogTips',
-    defaultMessage: 'Press {keyMap} to quickly open this dialog at any time',
-    description: 'Hint about how to open a dialog quickly using a shortcut.'
-  },
-  keyboardShortcuts: {
-    id: 'fabric.editor.keyboardShortcuts',
-    defaultMessage: 'Keyboard shortcuts',
-    description: ''
-  },
-  markdown: {
-    id: 'fabric.editor.markdown',
-    defaultMessage: 'Markdown',
-    description: 'It is a name of popular markup language.'
-  },
-  pastePlainText: {
-    id: 'fabric.editor.pastePlainText',
-    defaultMessage: 'Paste plain text',
-    description: ''
-  },
-  CheckUncheckActionItem: {
-    id: 'fabric.editor.checkUncheckActionItem',
-    defaultMessage: 'Toggle action item',
-    description: 'For Check/Uncheck Action item use shortcut'
-  },
-  altText: {
-    id: 'fabric.editor.altText',
-    defaultMessage: 'Alt text',
-    description: 'Alternative text for image.'
-  },
-  selectTableRow: {
-    id: 'fabric.editor.selectTableRow',
-    defaultMessage: 'Select table row',
-    description: 'Hint for selecting a table row using a shortcut'
-  },
-  selectTableColumn: {
-    id: 'fabric.editor.selectTableColumn',
-    defaultMessage: 'Select table column',
-    description: 'Hint for selecting a table column using a shortcut'
-  },
-  closeHelpDialog: {
-    id: 'fabric.editor.closeHelpDialog',
-    defaultMessage: 'Close help dialog',
-    description: ''
-  },
-  // TODO: Move it inside quick insert plugin
-  quickInsert: {
-    id: 'fabric.editor.quickInsert',
-    defaultMessage: 'Quick insert',
-    description: 'Name of a feature, which let you insert items quickly.'
-  }
-});
+import { codeLg, codeMd, codeSm, column, componentFromKeymapWrapperStyles, content, contentWrapper, dialogHeader, footer, header, line, row, shortcutsArray, title } from './styles';
 const navigationKeymaps = ({
   formatMessage
 }) => [{
@@ -337,6 +279,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 +320,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

@@ -3,75 +3,17 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /** @jsx jsx */
 import { useCallback, useEffect } from 'react';
 import { jsx } from '@emotion/react';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl-next';
+import { 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 { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
+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, helpDialogMessages as messages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { browser } from '@atlaskit/editor-common/utils';
 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';
-var messages = defineMessages({
-  editorHelp: {
-    id: 'fabric.editor.editorHelp',
-    defaultMessage: 'Editor help',
-    description: 'Title of editor help dialog.'
-  },
-  helpDialogTips: {
-    id: 'fabric.editor.helpDialogTips',
-    defaultMessage: 'Press {keyMap} to quickly open this dialog at any time',
-    description: 'Hint about how to open a dialog quickly using a shortcut.'
-  },
-  keyboardShortcuts: {
-    id: 'fabric.editor.keyboardShortcuts',
-    defaultMessage: 'Keyboard shortcuts',
-    description: ''
-  },
-  markdown: {
-    id: 'fabric.editor.markdown',
-    defaultMessage: 'Markdown',
-    description: 'It is a name of popular markup language.'
-  },
-  pastePlainText: {
-    id: 'fabric.editor.pastePlainText',
-    defaultMessage: 'Paste plain text',
-    description: ''
-  },
-  CheckUncheckActionItem: {
-    id: 'fabric.editor.checkUncheckActionItem',
-    defaultMessage: 'Toggle action item',
-    description: 'For Check/Uncheck Action item use shortcut'
-  },
-  altText: {
-    id: 'fabric.editor.altText',
-    defaultMessage: 'Alt text',
-    description: 'Alternative text for image.'
-  },
-  selectTableRow: {
-    id: 'fabric.editor.selectTableRow',
-    defaultMessage: 'Select table row',
-    description: 'Hint for selecting a table row using a shortcut'
-  },
-  selectTableColumn: {
-    id: 'fabric.editor.selectTableColumn',
-    defaultMessage: 'Select table column',
-    description: 'Hint for selecting a table column using a shortcut'
-  },
-  closeHelpDialog: {
-    id: 'fabric.editor.closeHelpDialog',
-    defaultMessage: 'Close help dialog',
-    description: ''
-  },
-  // TODO: Move it inside quick insert plugin
-  quickInsert: {
-    id: 'fabric.editor.quickInsert',
-    defaultMessage: 'Quick insert',
-    description: 'Name of a feature, which let you insert items quickly.'
-  }
-});
+import { codeLg, codeMd, codeSm, column, componentFromKeymapWrapperStyles, content, contentWrapper, dialogHeader, footer, header, line, row, shortcutsArray, title } from './styles';
 var navigationKeymaps = function navigationKeymaps(_ref) {
   var formatMessage = _ref.formatMessage;
   return [{
@@ -441,6 +383,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 +418,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 +437,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 +480,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 +509,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.9",
   "description": "Help Dialog plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -32,16 +32,16 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^77.0.0",
+    "@atlaskit/editor-common": "^77.3.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-quick-insert": "^0.2.0",
-    "@atlaskit/editor-prosemirror": "1.1.0",
+    "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/icon": "^22.0.0",
     "@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"
     }
   }
 }