@atlaskit/editor-core 176.0.2 → 177.0.0

package/dist/es2019/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -249,7 +249,7 @@ export class MediaNodeUpdater {
       })(this.props.view.state, this.props.view.dispatch);
     });
 
-    _defineProperty(this, "copyNode", async () => {
+    _defineProperty(this, "copyNode", async traceContext => {
       const mediaProvider = await this.props.mediaProvider;
       const {
         isMediaSingle,
@@ -283,7 +283,7 @@ export class MediaNodeUpdater {
           authProvider: uploadMediaClientConfig.authProvider,
           occurrenceKey: uuidV4()
         };
-        const mediaFile = await mediaClient.file.copyFile(source, destination);
+        const mediaFile = await mediaClient.file.copyFile(source, destination, undefined, traceContext);
         updateMediaNodeAttrs(source.id, {
           id: mediaFile.id,
           collection: currentCollectionName,

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -100,7 +100,9 @@ export default class MediaSingleNode extends Component {
         });
 
         try {
-          const copyNode = mediaNodeUpdater.copyNode();
+          const copyNode = mediaNodeUpdater.copyNode({
+            traceId: node.attrs.__mediaTraceId
+          });
           addPendingTask(copyNode);
           await copyNode;
         } catch (e) {

package/dist/es2019/plugins/media/pm-plugins/main.js

@@ -407,6 +407,13 @@ export class MediaPluginStateImplementation {
       }
     });
 
+    _defineProperty(this, "setMediaGroupNode", (node, getPos) => {
+      this.mediaGroupNodes[node.attrs.id] = {
+        node,
+        getPos
+      };
+    });
+
     _defineProperty(this, "removeNodeById", state => {
       const {
         id

package/dist/es2019/plugins/media/toolbar/index.js

@@ -103,6 +103,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration(mediaGroup, false),
@@ -178,6 +179,7 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration(mediaInline, false),
@@ -271,6 +273,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaSingle, true),
     onMouseLeave: hoverDecoration(mediaSingle, false),

package/dist/es2019/plugins/media/utils/media-single.js

@@ -10,6 +10,7 @@ import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '../../../uti
 import { getFeatureFlags } from '../../feature-flags-context';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
+import { getRandomHex } from '@atlaskit/media-common';
 
 const getInsertMediaAnalytics = (inputMethod, fileExtension) => ({
   action: ACTION.INSERTED,
@@ -185,6 +186,7 @@ export function transformSliceForMedia(slice, schema) {
     bulletList,
     orderedList,
     media,
+    mediaInline,
     expand
   } = schema.nodes;
   return selection => {
@@ -199,9 +201,24 @@ export function transformSliceForMedia(slice, schema) {
       });
     }
 
-    newSlice = mapSlice(newSlice, node => node.type.name === 'media' && node.attrs.type === 'external' ? media.createChecked({ ...node.attrs,
-      __external: true
-    }, node.content, node.marks) : node);
+    const __mediaTraceId = getRandomHex(8);
+
+    newSlice = mapSlice(newSlice, node => {
+      if (node.type.name === 'media') {
+        return media.createChecked({ ...node.attrs,
+          __external: node.attrs.type === 'external',
+          __mediaTraceId: node.attrs.type === 'external' ? null : __mediaTraceId
+        }, node.content, node.marks);
+      }
+
+      if (node.type.name === 'mediaInline') {
+        return mediaInline.createChecked({ ...node.attrs,
+          __mediaTraceId
+        }, node.content, node.marks);
+      }
+
+      return node;
+    });
     return newSlice;
   };
 }

package/dist/es2019/plugins/panel/toolbar.js

@@ -250,6 +250,7 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
     id: 'editor.panel.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onClick: removePanel(),
     onMouseEnter: hoverDecoration(panelNodeType, true),

package/dist/es2019/plugins/panel/utils.js

@@ -17,7 +17,7 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   } = attrs;
   const isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
   const hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
-  const style = [`${panelColor && isCustomPanel ? `background-color: ${panelColor};` : ''}`, `${hasIcon ? '' : 'padding: 12px;'}`].join('');
+  const style = [`${panelColor && isCustomPanel ? `background-color: ${panelColor};` : ''}`, `${hasIcon ? '' : 'padding-left: 12px;'}`].join('');
   let panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,

package/dist/es2019/plugins/paste/index.js

@@ -2,7 +2,8 @@ import { createPlugin } from './pm-plugins/main';
 
 const pastePlugin = ({
   cardOptions,
-  sanitizePrivateContent
+  sanitizePrivateContent,
+  plainTextPasteLinkification
 }) => ({
   name: 'paste',
 

package/dist/es2019/plugins/paste/pm-plugins/analytics.js

@@ -94,6 +94,17 @@ export function getContent(state, slice) {
   const pasteContent = contentToPasteContent[type];
   return pasteContent ? pasteContent : PasteContents.uncategorized;
 }
+export function getMediaTraceId(slice) {
+  let traceId;
+  mapSlice(slice, node => {
+    if (node.type.name === 'media' || node.type.name === 'mediaInline') {
+      traceId = node.attrs.__mediaTraceId;
+    }
+
+    return node;
+  });
+  return traceId;
+}
 
 function getActionSubjectId(view) {
   const {
@@ -163,7 +174,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
   const actionSubjectId = getActionSubjectId(view);
   const pasteSize = slice.size;
   const content = getContent(view.state, slice);
-  const linkUrls = []; // If we have a link among the pasted content, grab the
+  const linkUrls = [];
+  const mediaTraceId = getMediaTraceId(slice); // If we have a link among the pasted content, grab the
   // domain and send it up with the analytics event
 
   if (content === PasteContents.url || content === PasteContents.mixed) {
@@ -202,7 +214,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
     content,
     source,
     hyperlinkPasteOnText: !!pasteContext.hyperlinkPasteOnText,
-    linksInPasteCount: linkUrls.length
+    linksInPasteCount: linkUrls.length,
+    mediaTraceId
   }, linkDomains);
 } // TODO: ED-6612 We should not dispatch only analytics, it's preferred to wrap each command with his own analytics.
 // However, handlers like handleMacroAutoConvert dispatch multiple time,

package/dist/es2019/plugins/paste/pm-plugins/main.js

@@ -238,7 +238,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, cardOptio
           }
         }
 
-        slice = transformUnsupportedBlockCardToInline(slice, state); // Handles edge case so that when copying text from the top level of the document
+        slice = transformUnsupportedBlockCardToInline(slice, state, cardOptions); // Handles edge case so that when copying text from the top level of the document
         // it can be pasted into nodes like panels/actions/decisions without removing them.
         // Overriding openStart to be 1 when only pasting a paragraph makes the preferred
         // depth favour the text, rather than the paragraph node.

package/dist/es2019/plugins/paste/util/index.js

@@ -103,8 +103,8 @@ export function isCode(str) {
 // @see https://github.com/markdown-it/markdown-it/issues/38
 
 export function escapeLinks(text) {
-  return text.replace(/(\[([^\]]+)\]\()?((https?|ftp):\/\/[^\s]+)/g, str => {
-    return str.match(/^(https?|ftp):\/\/[^\s]+$/) ? `<${str}>` : str;
+  return text.replace(/(\[([^\]]+)\]\()?((https?|ftp|jamfselfservice):\/\/[^\s]+)/g, str => {
+    return str.match(/^(https?|ftp|jamfselfservice):\/\/[^\s]+$/) ? `<${str}>` : str;
   });
 }
 export function hasOnlyNodesOfType(...nodeTypes) {

package/dist/es2019/plugins/placeholder/index.js

@@ -2,9 +2,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { PluginKey } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
-import { isInEmptyLine, isEmptyDocument, bracketTyped } from '../../utils/document';
-import { pluginKey as alignmentPluginKey } from '../alignment/pm-plugins/main';
-import { placeHolderClassName } from './styles';
+import { isEmptyDocument, bracketTyped } from '../../utils/document';
 export const pluginKey = new PluginKey('placeholderPlugin');
 import { focusStateKey } from '../base/pm-plugins/focus-handler';
 import { isTypeAheadOpen } from '../type-ahead/utils';
@@ -14,21 +12,23 @@ function getPlaceholderState(editorState) {
   return pluginKey.getState(editorState);
 }
 
+export const placeholderTestId = 'placeholder-test-id';
 export function createPlaceholderDecoration(editorState, placeholderText, pos = 1) {
   const placeholderDecoration = document.createElement('span');
-  let placeHolderClass = placeHolderClassName;
-  const alignment = alignmentPluginKey.getState(editorState);
+  let placeholderNodeWithText = placeholderDecoration;
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration'; // PM sets contenteditable to false on Decorations so Firefox doesn't display the flashing cursor
+  // So adding an extra span which will contain the placeholder text
 
-  if (alignment && alignment.align === 'end') {
-    placeHolderClass = placeHolderClass + ' align-end';
-  } else if (alignment && alignment.align === 'center') {
-    placeHolderClass = placeHolderClass + ' align-center';
+  if (browser.gecko) {
+    const placeholderNode = document.createElement('span');
+    placeholderNode.setAttribute('contenteditable', 'true'); // explicitly overriding the default Decoration behaviour
+
+    placeholderDecoration.appendChild(placeholderNode);
+    placeholderNodeWithText = placeholderNode;
   }
 
-  placeholderDecoration.className = placeHolderClass;
-  const placeholderNode = document.createElement('span');
-  placeholderNode.textContent = placeholderText;
-  placeholderDecoration.appendChild(placeholderNode); // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
+  placeholderNodeWithText.textContent = placeholderText || ' '; // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
   // Add a editable buff node as the cursor moving forward is inevitable
   // when backspace in GBoard composition
 
@@ -40,7 +40,7 @@ export function createPlaceholderDecoration(editorState, placeholderText, pos =
   }
 
   return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
-    side: -1,
+    side: 0,
     key: 'placeholder'
   })]);
 }
@@ -57,7 +57,7 @@ const emptyPlaceholder = {
   hasPlaceholder: false
 };
 
-function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText) {
+function createPlaceHolderStateFrom(editorState, defaultPlaceholderText, bracketPlaceholderText) {
   const isEditorFocused = focusStateKey.getState(editorState);
 
   if (isTypeAheadOpen(editorState)) {
@@ -68,15 +68,6 @@ function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defa
     return setPlaceHolderState(defaultPlaceholderText);
   }
 
-  const placeholderHint = getPlaceholderHintMessage();
-
-  if (placeholderHint && isInEmptyLine(editorState) && isEditorFocused) {
-    const {
-      $from
-    } = editorState.selection;
-    return setPlaceHolderState(placeholderHint, $from.pos);
-  }
-
   if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
     const {
       $from
@@ -89,32 +80,15 @@ function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defa
   return emptyPlaceholder;
 }
 
-function createGetPlaceholderHintMessage(placeholderHints) {
-  let index = 0;
-  return () => {
-    if (!placeholderHints || placeholderHints.length === 0) {
-      return;
-    }
-
-    const {
-      length
-    } = placeholderHints;
-    const placeholder = placeholderHints[index++];
-    index = index % length;
-    return placeholder;
-  };
-}
-
-export function createPlugin(defaultPlaceholderText, placeholderHints, bracketPlaceholderText) {
-  if (!defaultPlaceholderText && !placeholderHints && !bracketPlaceholderText) {
+export function createPlugin(defaultPlaceholderText, bracketPlaceholderText) {
+  if (!defaultPlaceholderText && !bracketPlaceholderText) {
     return;
   }
 
-  const getPlaceholderHintMessage = createGetPlaceholderHintMessage(placeholderHints);
   return new SafePlugin({
     key: pluginKey,
     state: {
-      init: (_, state) => createPlaceHolderStateFrom(state, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText),
+      init: (_, state) => createPlaceHolderStateFrom(state, defaultPlaceholderText, bracketPlaceholderText),
       apply: (tr, _oldPluginState, _oldEditorState, newEditorState) => {
         const meta = tr.getMeta(pluginKey);
 
@@ -124,11 +98,11 @@ export function createPlugin(defaultPlaceholderText, placeholderHints, bracketPl
           }
 
           if (meta.applyPlaceholderIfEmpty) {
-            return createPlaceHolderStateFrom(newEditorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText);
+            return createPlaceHolderStateFrom(newEditorState, defaultPlaceholderText, bracketPlaceholderText);
           }
         }
 
-        return createPlaceHolderStateFrom(newEditorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText);
+        return createPlaceHolderStateFrom(newEditorState, defaultPlaceholderText, bracketPlaceholderText);
       }
     },
     props: {
@@ -156,7 +130,7 @@ const placeholderPlugin = options => ({
   pmPlugins() {
     return [{
       name: 'placeholder',
-      plugin: () => createPlugin(options && options.placeholder, options && options.placeholderHints, options && options.placeholderBracketHint)
+      plugin: () => createPlugin(options && options.placeholder, options && options.placeholderBracketHint)
     }];
   }
 

package/dist/es2019/plugins/placeholder/styles.js

@@ -1,29 +1,11 @@
 import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-export const placeHolderClassName = 'placeholder-decoration';
 export const placeholderStyles = css`
-  .ProseMirror .${placeHolderClassName} {
-    position: relative;
+  .ProseMirror .placeholder-decoration {
     color: ${token('color.text.subtlest', N200)};
     width: 100%;
-
     pointer-events: none;
-    display: block;
     user-select: none;
-
-    > span {
-      position: absolute;
-      pointer-events: none;
-      outline: none;
-    }
-
-    &.align-end > span {
-      right: 0;
-    }
-
-    &.align-center > span {
-      left: 0;
-    }
   }
 `;

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { AnalyticsListener } from '@atlaskit/analytics-next';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ReactNodeView } from '../../../nodeviews';
 import WithPluginState from '../../../ui/WithPluginState';
 import { stateKey as taskPluginKey } from '../pm-plugins/plugin-key';
@@ -15,11 +16,13 @@ class Task extends ReactNodeView {
       const {
         tr
       } = this.view.state;
-      const nodePos = this.getPos();
-      tr.setNodeMarkup(nodePos, undefined, {
+      const nodePos = this.getPos(); // SetAttrsStep should be used to prevent task updates from being dropped when mapping task ticks
+      // from a previous version of the document, such as a published page.
+
+      tr.step(new SetAttrsStep(nodePos, {
         state: isChecked ? 'DONE' : 'TODO',
         localId: taskId
-      });
+      }));
       tr.setMeta('scrollIntoView', false);
       this.view.dispatch(tr);
     });

package/dist/es2019/plugins/tasks-and-decisions/ui/ToolbarDecision/index.js

@@ -45,6 +45,7 @@ export class ToolbarDecision extends PureComponent {
       disabled: disabled || isDisabled,
       spacing: isReducedSpacing ? 'none' : 'default',
       title: `${label} <>`,
+      "aria-keyshortcuts": "Shift+, Shift+. space",
       iconBefore: /*#__PURE__*/React.createElement(DecisionIcon, {
         label: label
       })

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -15,6 +15,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../
 import * as commands from '../../commands/change-color';
 import { EditorTextColorIcon } from './icon';
 import { backgroundDisabled, textColorIconBar, textColorIconWrapper } from './styles';
+import { getFeatureFlags } from '../../../feature-flags-context/get-feature-flags';
 const EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 const EXPERIMENT_GROUP_CONTROL = 'control';
 export const messages = defineMessages({
@@ -51,12 +52,11 @@ export class ToolbarTextColor extends React.Component {
         const {
           pluginState: {
             palette,
-            paletteExpanded,
             defaultColor
           }
         } = this.props; // we store color names in analytics
 
-        const swatch = (paletteExpanded || palette).find(sw => sw.value === color);
+        const swatch = palette.find(sw => sw.value === color);
         const isNewColor = color !== defaultColor && !originalTextColors.some(col => col.value === color);
         this.dispatchAnalyticsEvent(this.buildAnalyticsSelectColor({
           color: (swatch ? swatch.label : color).toLowerCase(),
@@ -142,16 +142,16 @@ export class ToolbarTextColor extends React.Component {
       popupsScrollableElement,
       isReducedSpacing,
       pluginState,
-      pluginState: {
-        paletteExpanded
-      },
       intl: {
         formatMessage
       },
       disabled
     } = this.props;
     const labelTextColor = formatMessage(messages.textColor);
-    const palette = paletteExpanded || pluginState.palette;
+    const palette = pluginState.palette;
+    const {
+      useSomewhatSemanticTextColorNames
+    } = getFeatureFlags(this.props.editorView.state);
     let fitWidth;
 
     if (document.body.clientWidth <= 740) {
@@ -205,7 +205,8 @@ export class ToolbarTextColor extends React.Component {
       palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
       selectedColor: pluginState.color,
-      textPalette: true
+      textPalette: true,
+      useSomewhatSemanticTextColorNames: useSomewhatSemanticTextColorNames
     }))), jsx("span", {
       css: separatorStyles
     }));

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -11,6 +11,7 @@ import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin
 import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, ToolTipContent } from '../../../../../keymaps';
 import { INPUT_METHOD } from '../../../../analytics/types/enums';
 import { IconTypes } from '../types';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 const withToolbarInputMethod = func => func({
   inputMethod: INPUT_METHOD.TOOLBAR
@@ -91,7 +92,9 @@ const getIcon = ({
       name: iconType
     },
     isActive,
-    isDisabled
+    isDisabled,
+    'aria-label': tooltipKeymap ? tooltip(tooltipKeymap, String(content)) : String(content),
+    'aria-keyshortcuts': getAriaKeyshortcuts(tooltipKeymap)
   };
 };
 

package/dist/es2019/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js

@@ -16,16 +16,22 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
   }, [editorView.state, editorView.dispatch]);
   return jsx("span", {
     css: buttonGroupStyle
-  }, items.map(item => jsx(ToolbarButton, {
-    key: item.key,
-    buttonId: item.buttonId,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: onClick(item.command),
-    selected: item.isActive,
-    disabled: item.isDisabled,
-    title: item.tooltipElement,
-    iconBefore: item.iconElement,
-    "aria-pressed": item.isActive,
-    "aria-label": String(item.content)
-  })));
+  }, items.map(item => {
+    var _item$ariaLabel;
+
+    return jsx(ToolbarButton, {
+      key: item.key,
+      testId: `editor-toolbar__${String(item.content)}`,
+      buttonId: item.buttonId,
+      spacing: isReducedSpacing ? 'none' : 'default',
+      onClick: onClick(item.command),
+      selected: item.isActive,
+      disabled: item.isDisabled,
+      title: item.tooltipElement,
+      iconBefore: item.iconElement,
+      "aria-pressed": item.isActive,
+      "aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
+      "aria-keyshortcuts": item['aria-keyshortcuts']
+    });
+  }));
 });

package/dist/es2019/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -5,11 +5,12 @@ import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
 import NumberListIcon from '@atlaskit/icon/glyph/editor/number-list';
 import IndentIcon from '@atlaskit/icon/glyph/editor/indent';
 import OutdentIcon from '@atlaskit/icon/glyph/editor/outdent';
-import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, ToolTipContent } from '../../../keymaps';
+import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, ToolTipContent, tooltip } from '../../../keymaps';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
 import { messages } from '../../list/messages';
 import { messages as indentationMessages } from '../../indentation/messages';
 import { buttonGroupStyle, separatorStyles } from '../../../ui/styles';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 export function Toolbar(props) {
   const {
     formatMessage
@@ -28,6 +29,8 @@ export function Toolbar(props) {
   } = props;
   const labelUnorderedList = formatMessage(messages.unorderedList);
   const labelOrderedList = formatMessage(messages.orderedList);
+  const indentMessage = formatMessage(indentationMessages.indent);
+  const outdentMessage = formatMessage(indentationMessages.outdent);
 
   const handleOnItemActivated = buttonName => event => onItemActivated({
     editorView: props.editorView,
@@ -38,11 +41,13 @@ export function Toolbar(props) {
     css: buttonGroupStyle
   }, jsx(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.BULLET_LIST,
+    testId: labelUnorderedList,
     spacing: isReducedSpacing ? 'none' : 'default',
     onClick: handleOnItemActivated('bullet_list'),
     selected: bulletListActive,
     "aria-pressed": bulletListActive,
-    "aria-label": labelUnorderedList,
+    "aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
+    "aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
     disabled: bulletListDisabled || disabled,
     title: jsx(ToolTipContent, {
       description: labelUnorderedList,
@@ -53,11 +58,13 @@ export function Toolbar(props) {
     })
   }), jsx(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
+    testId: labelOrderedList,
     spacing: isReducedSpacing ? 'none' : 'default',
     onClick: handleOnItemActivated('ordered_list'),
     selected: orderedListActive,
     "aria-pressed": orderedListActive,
-    "aria-label": labelOrderedList,
+    "aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
+    "aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
     disabled: orderedListDisabled || disabled,
     title: jsx(ToolTipContent, {
       description: labelOrderedList,
@@ -75,9 +82,10 @@ export function Toolbar(props) {
       label: ""
     }),
     disabled: outdentDisabled || disabled,
-    "aria-label": formatMessage(indentationMessages.outdent),
+    "aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
+    "aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
     title: jsx(ToolTipContent, {
-      description: formatMessage(indentationMessages.outdent),
+      description: outdentMessage,
       keymap: toggleOutdentKeymap
     })
   }), showIndentationButtons && jsx(ToolbarButton, {
@@ -89,9 +97,10 @@ export function Toolbar(props) {
       label: ""
     }),
     disabled: indentDisabled || disabled,
-    "aria-label": formatMessage(indentationMessages.indent),
+    "aria-label": tooltip(toggleIndentKeymap, indentMessage),
+    "aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
     title: jsx(ToolTipContent, {
-      description: formatMessage(indentationMessages.indent),
+      description: indentMessage,
       keymap: toggleIndentKeymap
     })
   }), jsx("span", {

package/dist/es2019/plugins/type-ahead/index.js

@@ -6,7 +6,7 @@
  *
  *
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { createPlugin } from './pm-plugins/main';
 import { createPlugin as createInsertItemPlugin } from './pm-plugins/insert-item-plugin';
@@ -54,7 +54,7 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
       });
     });
   }, [onItemInsert, query]);
-  const cancel = useCallback(({
+  const cancel = React.useCallback(({
     setSelectionAt,
     addPrefixTrigger,
     forceFocusOnEditor