@atlaskit/editor-core 180.0.0 → 181.0.0

package/dist/es2019/plugins/card/nodeviews/blockCard.js

@@ -59,7 +59,8 @@ export class BlockCardComponent extends React.PureComponent {
     const {
       node,
       cardContext,
-      platform
+      platform,
+      showServerActions
     } = this.props;
     const {
       url,
@@ -74,7 +75,8 @@ export class BlockCardComponent extends React.PureComponent {
       onClick: this.onClick,
       onResolve: this.onResolve,
       showActions: platform === 'web',
-      platform: platform
+      platform: platform,
+      showServerActions: showServerActions
     }), this.gapCursorSpan());
     // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
     // otherwise if we got data, we can render the card directly since it doesn't need the Provider
@@ -99,11 +101,16 @@ export class BlockCard extends ReactNodeView {
     return domRef;
   }
   render() {
+    const {
+      platform,
+      showServerActions
+    } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedBlockCard, {
       node: this.node,
       view: this.view,
       getPos: this.getPos,
-      platform: this.reactComponentProps.platform
+      platform: platform,
+      showServerActions: showServerActions
     });
   }
 }

package/dist/es2019/plugins/card/nodeviews/genericCard.js

@@ -5,6 +5,9 @@ import PropTypes from 'prop-types';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { titleUrlPairFromNode } from '../utils';
 import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getPluginState } from '../pm-plugins/util/state';
+import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
 export function Card(SmartCardComponent, UnsupportedComponent) {
   var _class;
   return _class = class extends React.Component {
@@ -15,6 +18,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
       });
     }
     render() {
+      var _getPluginState;
       const {
         url
       } = titleUrlPairFromNode(this.props.node);
@@ -34,10 +38,20 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
         }
       }
       const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
-      return /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+      const editorAppearance = (_getPluginState = getPluginState(this.props.view.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
+      const analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
+      return /*#__PURE__*/React.createElement(AnalyticsContext, {
+        data: {
+          attributes: {
+            location: analyticsEditorAppearance
+          },
+          // Below is added for the future implementation of Linking Platform namespaced analytics context
+          location: analyticsEditorAppearance
+        }
+      }, /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
         key: url,
         cardContext: cardContext
-      }, this.props));
+      }, this.props)));
     }
     componentDidCatch(error) {
       const maybeAPIError = error;

package/dist/es2019/plugins/card/nodeviews/inlineCard.js

@@ -51,6 +51,7 @@ export class InlineCardComponent extends React.PureComponent {
     const {
       node,
       cardContext,
+      showServerActions,
       useAlternativePreloader
     } = this.props;
     const {
@@ -68,7 +69,8 @@ export class InlineCardComponent extends React.PureComponent {
       container: this.scrollContainer,
       onResolve: this.onResolve,
       onError: this.onError,
-      inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined
+      inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+      showServerActions: showServerActions
     }));
     // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
     // otherwise if we got data, we can render the card directly since it doesn't need the Provider
@@ -86,12 +88,14 @@ export function InlineCardNodeView(props) {
     useAlternativePreloader,
     node,
     view,
-    getPos
+    getPos,
+    showServerActions
   } = props;
   return /*#__PURE__*/React.createElement(WrappedInlineCard, {
     node: node,
     view: view,
     getPos: getPos,
+    showServerActions: showServerActions,
     useAlternativePreloader: useAlternativePreloader
   });
 }

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

@@ -11,11 +11,13 @@ import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './
 export { pluginKey } from './plugin-key';
 export const createPlugin = options => pmPluginFactoryParams => {
   const {
+    editorAppearance,
     platform,
     allowResizing,
     useAlternativePreloader,
     fullWidthMode,
-    createAnalyticsEvent
+    createAnalyticsEvent,
+    showServerActions
   } = options;
   return new SafePlugin({
     state: {
@@ -26,7 +28,8 @@ export const createPlugin = options => pmPluginFactoryParams => {
           cards: [],
           showLinkingToolbar: false,
           smartLinkEvents: undefined,
-          createAnalyticsEvent
+          createAnalyticsEvent,
+          editorAppearance
         };
       },
       apply(tr, pluginState) {
@@ -90,7 +93,8 @@ export const createPlugin = options => pmPluginFactoryParams => {
           pmPluginFactoryParams,
           Component: InlineCardNodeView,
           extraComponentProps: {
-            useAlternativePreloader
+            useAlternativePreloader,
+            showServerActions
           }
         }),
         blockCard: (node, view, getPos) => {
@@ -99,7 +103,8 @@ export const createPlugin = options => pmPluginFactoryParams => {
             eventDispatcher
           } = pmPluginFactoryParams;
           const reactComponentProps = {
-            platform
+            platform,
+            showServerActions
           };
           const hasIntlContext = true;
           return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();

package/dist/es2019/plugins/card/pm-plugins/util/resolve.js

@@ -21,6 +21,10 @@ export const resolveWithProvider = (view, outstandingRequests, provider, request
 };
 const updateCardType = (resolvedCard, options) => {
   if ((resolvedCard === null || resolvedCard === void 0 ? void 0 : resolvedCard.type) === 'blockCard' && !options.allowBlockCards || (resolvedCard === null || resolvedCard === void 0 ? void 0 : resolvedCard.type) === 'embedCard' && !options.allowEmbeds) {
+    // clean out the 'layout' attr from an embedCard type that should be transformed into the inlineCard type.
+    if (resolvedCard.type === 'embedCard') {
+      delete resolvedCard.attrs.layout;
+    }
     resolvedCard.type = 'inlineCard';
   }
 };

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

@@ -73,8 +73,10 @@ export const createClipboardSerializer = (schema, getEditorView) => {
       const parentTable = findParentNodeOfType(schema.nodes.table)(selection);
       const attributes = parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs;
       const newTable = schema.nodes.table;
+      // Explicitly remove local id since we are creating a new table and it should have a unique local id which will be generated.
       const newTableNode = newTable.createChecked({
-        ...attributes
+        ...attributes,
+        localId: undefined
       }, content);
       const newContent = Fragment.from(newTableNode);
       // Pass updated content into original ProseMirror serializeFragment function.

package/dist/es2019/plugins/code-block/pm-plugins/main-state.js

@@ -1,10 +1,2 @@
 import { pluginKey } from '../plugin-key';
-export const getPluginState = state => pluginKey.getState(state);
-export const setPluginState = stateProps => (state, dispatch) => {
-  const pluginState = getPluginState(state);
-  dispatch(state.tr.setMeta(pluginKey, {
-    ...pluginState,
-    ...stateProps
-  }));
-  return true;
-};
+export const getPluginState = state => pluginKey.getState(state);

package/dist/es2019/plugins/collab-edit/plugin.js

@@ -3,8 +3,7 @@ import { initialize } from './events/initialize';
 import { PluginState } from './plugin-state';
 import { pluginKey } from './plugin-key';
 import { addSynchronyErrorAnalytics } from './analytics';
-import { fireAnalyticsEvent } from '../analytics/fire-analytics-event';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+import { fireAnalyticsEvent, ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 export { PluginState, pluginKey };
 export const createPlugin = (dispatch, providerFactory, collabProviderCallback, options) => {
   const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);

package/dist/es2019/plugins/collab-edit/provider/index.js

@@ -1 +1 @@
-export { PubSubSpecialEventType } from './types';
+export {};

package/dist/es2019/plugins/collab-edit/provider/types.js

@@ -1,10 +1 @@
-/**
- * Same as PubSub client types (don't want a direct dep though)
- */
-
-export let PubSubSpecialEventType;
-(function (PubSubSpecialEventType) {
-  PubSubSpecialEventType["ERROR"] = "ERROR";
-  PubSubSpecialEventType["CONNECTED"] = "CONNECTED";
-  PubSubSpecialEventType["RECONNECT"] = "RECONNECT";
-})(PubSubSpecialEventType || (PubSubSpecialEventType = {}));
+export {};

package/dist/es2019/plugins/context-panel/index.js

@@ -1,9 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 export const pluginKey = new PluginKey('contextPanelPluginKey');
-export function getPluginState(state) {
-  return pluginKey.getState(state);
-}
 function contextPanelPluginFactory(contextPanels, dispatch) {
   return new SafePlugin({
     key: pluginKey,

package/dist/es2019/plugins/data-consumer/index.js

@@ -1,11 +1,4 @@
 import { dataConsumer } from '@atlaskit/adf-schema';
-import { Plugin } from 'prosemirror-state';
-import { pluginKey } from './plugin-key';
-export function createPlugin() {
-  return new Plugin({
-    key: pluginKey
-  });
-}
 const dataConsumerMarkPlugin = () => ({
   name: 'dataConsumerPlugin',
   marks() {

package/dist/es2019/plugins/date/utils/internal.js

@@ -2,9 +2,6 @@ import { formatDateType, dateTypeToDate, dateToDateType } from './formatParse';
 import addDays from 'date-fns/addDays';
 import addMonths from 'date-fns/addMonths';
 import addYears from 'date-fns/addYears';
-export function padToTwo(number) {
-  return number <= 99 ? `0${number}`.slice(-2) : `${number}`;
-}
 function isDigit(c) {
   if (c === undefined) {
     return false;

package/dist/es2019/plugins/extension/commands.js

@@ -37,12 +37,6 @@ export const forceAutoSave = (resolve, reject) => createCommand({
     autoSaveReject: reject
   }
 }, applyChange);
-export const showContextPanel = createCommand({
-  type: 'UPDATE_STATE',
-  data: {
-    showContextPanel: true
-  }
-}, applyChange);
 export const updateExtensionLayout = layout => createCommand({
   type: 'UPDATE_STATE',
   data: {

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

@@ -24,6 +24,11 @@ export const messages = defineMessages({
     defaultMessage: 'Delete element',
     description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
   },
+  unnamedSource: {
+    id: 'fabric.editor.extension.sourceNoTitledName',
+    defaultMessage: 'this element',
+    description: 'The current element without preset name been selected'
+  },
   confirmDeleteLinkedModalOKButton: {
     id: 'fabric.editor.extension.confirmDeleteLinkedModalOKButton',
     defaultMessage: 'Delete',
@@ -129,11 +134,12 @@ export const getToolbarConfig = (breakoutEnabled = true) => (state, intl) => {
     let confirmDialog;
     if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
       confirmDialog = () => {
+        const localSourceName = formatMessage(messages.unnamedSource);
         return {
           title: formatMessage(messages.deleteElementTitle),
           okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
           message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
-            nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
+            nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
           }),
           isReferentialityDialog: true,
           getChildrenInfo: () => getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node),

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -44,7 +44,10 @@ function ExtensionWithPluginState(props) {
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
-  let customContainerStyles = {};
+  let customContainerStyles = {
+    width: '100%'
+  };
+  let newContentStyles = {};
   if (shouldBreakout) {
     const {
       type,
@@ -54,8 +57,15 @@ function ExtensionWithPluginState(props) {
       widthStateWidth: widthState.width,
       widthStateLineLength: widthState.lineLength
     });
+    newContentStyles = {
+      ...breakoutStyles
+    };
     customContainerStyles = breakoutStyles;
   }
+  newContentStyles = {
+    ...newContentStyles,
+    ...contentWrapper
+  };
   return jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout,
@@ -74,7 +84,7 @@ function ExtensionWithPluginState(props) {
   }, !removeBorder && jsx(ExtensionLozenge, {
     node: node
   }), children), hasBody && jsx("div", {
-    css: contentWrapper
+    css: newContentStyles
   }, jsx("div", {
     css: content,
     ref: handleContentDOMRef,

package/dist/es2019/plugins/extension/ui/Extension/Extension/styles.js

@@ -40,7 +40,10 @@ export const content = theme => css`
   border: 1px solid ${`var(--ds-border, ${N30})`};
   border-radius: ${borderRadius()}px;
   cursor: initial;
+  width: 100%;
 `;
 export const contentWrapper = css`
   padding: 0 ${padding}px ${padding}px;
+  display: flex;
+  justify-content: center;
 `;

package/dist/es2019/plugins/extension/ui/Extension/Lozenge.js

@@ -54,6 +54,7 @@ export default class ExtensionLozenge extends Component {
     const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
     const isBlockExtension = name === 'extension';
     return jsx("div", {
+      "data-testid": "lozenge-fallback",
       css: placeholderFallback
     }, lozengeData && !isBlockExtension ? this.renderImage({
       height: ICON_SIZE,

package/dist/es2019/plugins/feedback-dialog/index.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import { PluginKey } from 'prosemirror-state';
 import { IconFeedback } from '../quick-insert/assets';
 import { version as coreVersion } from '../../version-wrapper';
 import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE } from '../analytics';
 import loadJiraCollectorDialogScript from './loadJiraCollectorDialogScript';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
-export const pluginKey = new PluginKey('feedbackDialogPlugin');
 let showJiraCollectorDialog;
 let feedbackInfoHash;
 let defaultFeedbackInfo;

package/dist/es2019/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -12,6 +12,7 @@ import FindReplace from './FindReplace';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { ToolTipContent, findKeymapByDescription, tooltip } from '../../../keymaps';
 import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
+import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 const toolbarButtonWrapper = css`
   display: flex;
   flex: 1 1 auto;
@@ -86,7 +87,10 @@ class FindReplaceToolbarButton extends React.PureComponent {
       },
       fitWidth: 352,
       zIndex: stackBelowOtherEditorFloatingPanels,
-      disableArrowKeyNavigation: true,
+      arrowKeyNavigationProviderOptions: {
+        type: ArrowKeyNavigationType.MENU,
+        disableArrowKeyNavigation: true
+      },
       trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
         spacing: isReducedSpacing ? 'none' : 'default',

package/dist/es2019/plugins/floating-toolbar/ui/Button.js

@@ -7,6 +7,7 @@ export default (({
   icon,
   iconAfter,
   onClick,
+  onKeyDown,
   onMouseEnter,
   onMouseLeave,
   onFocus,
@@ -22,7 +23,9 @@ export default (({
   testId,
   hideTooltipOnClick = true,
   ariaHasPopup,
-  tabIndex
+  tabIndex,
+  areaControls,
+  ariaLabel
 }) => {
   // Check if there's only an icon and add additional styles
   const iconOnly = (icon || iconAfter) && !children;
@@ -54,8 +57,10 @@ export default (({
         ...rest
       };
     },
-    "aria-label": title,
-    "aria-pressed": selected,
+    "aria-label": ariaLabel || title,
+    "aria-pressed": !ariaHasPopup ? selected : undefined,
+    "aria-expanded": ariaHasPopup ? selected : undefined,
+    "aria-controls": ariaHasPopup ? areaControls : undefined,
     spacing: 'compact',
     href: href,
     target: target,
@@ -64,6 +69,7 @@ export default (({
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     isSelected: selected,
     isDisabled: disabled,
     testId: testId,

package/dist/es2019/plugins/floating-toolbar/ui/CheckboxModal.js

@@ -5,6 +5,7 @@ import { Checkbox } from '@atlaskit/checkbox';
 import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
 import messages from './messages';
 export const CheckboxModal = props => {
+  var _options$getChildrenI;
   const [isChecked, setCheckbox] = useState(false);
   const {
     onConfirm,
@@ -19,10 +20,11 @@ export const CheckboxModal = props => {
   const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
   const cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
   const checkboxlabel = options === null || options === void 0 ? void 0 : options.checkboxLabel;
+  const childrenInfo = options === null || options === void 0 ? void 0 : (_options$getChildrenI = options.getChildrenInfo) === null || _options$getChildrenI === void 0 ? void 0 : _options$getChildrenI.call(options);
   const ListComponent = ({
     nodes
   }) => {
-    if (!nodes) {
+    if (nodes.length === 0) {
       return null;
     }
     return /*#__PURE__*/React.createElement("ul", null, nodes.map(node => /*#__PURE__*/React.createElement(ListItem, _extends({}, node, {
@@ -47,8 +49,8 @@ export const CheckboxModal = props => {
     testId: testId
   }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
     appearance: "warning"
-  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), (options === null || options === void 0 ? void 0 : options.getChildrenInfo) && /*#__PURE__*/React.createElement(ListComponent, {
-    nodes: options === null || options === void 0 ? void 0 : options.getChildrenInfo()
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), !!(childrenInfo !== null && childrenInfo !== void 0 && childrenInfo.length) && /*#__PURE__*/React.createElement(ListComponent, {
+    nodes: childrenInfo
   }), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Checkbox, {
     isChecked: isChecked,
     onChange: () => setCheckbox(!isChecked),

package/dist/es2019/plugins/floating-toolbar/ui/Dropdown.js

@@ -25,8 +25,10 @@ export default class Dropdown extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
+    _defineProperty(this, "triggerRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "renderArrayOptions", options => {
       const {
         showSelected,
@@ -43,24 +45,36 @@ export default class Dropdown extends Component {
     });
     _defineProperty(this, "toggleOpen", () => {
       this.setState({
-        isOpen: !this.state.isOpen
+        isOpen: !this.state.isOpen,
+        isOpenedByKeyboard: false
       });
     });
+    _defineProperty(this, "toggleOpenByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.setState({
+          isOpen: !this.state.isOpen,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(this, "hide", () => {
       this.setState({
+        ...this.state,
         isOpen: false
       });
     });
-    _defineProperty(this, "hideonEsc", () => {
+    _defineProperty(this, "hideOnEsc", () => {
       var _document$querySelect;
-      this.hide();
-      //Focus the trigger button only on Escape
+      // Focus the trigger button only on Escape
+      // Focus is done before hiding to ensure onBlur is called
       (_document$querySelect = document.querySelector(`[data-testid=${this.props.buttonTestId}]`)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
+      this.hide();
     });
     _defineProperty(this, "onOpenChanged", openChangedEvent => {
       if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
         var _openChangedEvent$eve;
-        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? this.hideonEsc() : this.hide();
+        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? this.hideOnEsc() : this.hide();
       }
     });
   }
@@ -81,7 +95,8 @@ export default class Dropdown extends Component {
       tooltip,
       buttonTestId,
       dropdownWidth,
-      editorView
+      editorView,
+      dropdownListId
     } = this.props;
     let trigger;
     if (icon) {
@@ -93,6 +108,7 @@ export default class Dropdown extends Component {
         title: title,
         icon: TriggerIcon,
         onClick: this.toggleOpen,
+        onKeyDown: this.toggleOpenByKeyboard,
         selected: isOpen,
         disabled: disabled,
         tooltipContent: tooltip
@@ -106,9 +122,12 @@ export default class Dropdown extends Component {
           label: "Expand dropdown menu"
         })),
         onClick: this.toggleOpen,
+        onKeyDown: this.toggleOpenByKeyboard,
         selected: isOpen,
         disabled: disabled,
-        tooltipContent: tooltip
+        tooltipContent: tooltip,
+        ariaHasPopup: true,
+        areaControls: dropdownListId
       }, title);
     }
 
@@ -120,25 +139,39 @@ export default class Dropdown extends Component {
     const fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
     const fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
     return jsx(UiDropdown, {
+      ref: this.triggerRef,
       mountTo: mountPoint,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       isOpen: isOpen,
       handleClickOutside: this.hide,
-      handleEscapeKeydown: this.hideonEsc,
+      handleEscapeKeydown: this.hideOnEsc,
       onOpenChange: this.onOpenChanged,
       fitWidth: fitWidth + fitTolerance,
       fitHeight: fitHeight + fitTolerance,
       trigger: trigger,
-      editorView: editorView
+      editorView: editorView,
+      dropdownListId: dropdownListId
     }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
       hide: this.hide,
       dispatchCommand
     }));
   }
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.setDisableParentScroll && prevState.isOpen !== this.state.isOpen) {
-      this.props.setDisableParentScroll(this.state.isOpen);
+    if (prevState.isOpen !== this.state.isOpen) {
+      if (this.props.setDisableParentScroll) {
+        this.props.setDisableParentScroll(this.state.isOpen);
+      }
+      if (this.state.isOpen && this.state.isOpenedByKeyboard) {
+        const dropList = document.querySelector('[data-role="droplistContent"]');
+        if (dropList) {
+          const keyboardEvent = new KeyboardEvent('keydown', {
+            bubbles: true,
+            key: 'ArrowDown'
+          });
+          dropList.dispatchEvent(keyboardEvent);
+        }
+      }
     }
   }
 }

package/dist/es2019/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -13,14 +13,6 @@ import withOuterListeners from '../../../ui/with-outer-listeners';
 const emojiPickerButtonWrapper = css`
   position: relative;
 `;
-
-// helps to vertically align emoji picker
-// both top and bottom margin should be 2px
-// https://product-fabric.atlassian.net/browse/CETI-148
-const emojiPickerWrapper = css`
-  margin-bottom: -12px;
-  margin-top: -4px;
-`;
 const EmojiPickerWithListener = withOuterListeners(EmojiPicker);
 export const EmojiPickerButton = props => {
   const buttonRef = React.useRef(null);
@@ -75,13 +67,11 @@ export const EmojiPickerButton = props => {
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined
-    }, jsx("div", {
-      css: emojiPickerWrapper
     }, jsx(WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    })));
+    }));
   };
   const title = props.title || '';
   return jsx("div", {

package/dist/es2019/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -23,10 +23,10 @@ const ExtensionButton = props => {
     node,
     editorView
   } = props;
-  const ButtonIcon = item.icon ? Loadable({
+  const ButtonIcon = React.useMemo(() => item.icon ? Loadable({
     loader: async () => resolveExtensionIcon(item.icon),
     loading: noop
-  }) : undefined;
+  }) : undefined, [item.icon]);
   const onClick = () => {
     if (typeof item.action !== 'function') {
       throw new Error(`'action' of context toolbar item '${item.key}' is not a function`);
@@ -39,6 +39,7 @@ const ExtensionButton = props => {
   };
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
+    ariaLabel: item.tooltip,
     icon: ButtonIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
       label: item.label || ''
     }) : undefined,