@atlaskit/editor-core 180.1.0 → 181.0.1

package/dist/esm/labs/next/presets/useUniversalPreset.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useLayoutEffect, useState } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { createPreset } from '../../../create-editor/create-plugins-list';
+import { shouldRecreatePreset } from '../../../create-editor/preset-utils';
+export default function useUniversalPreset(_ref) {
+  var props = _ref.props;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var previousEditorProps = usePreviousState(props);
+  var _useState = useState(function () {
+      return createPreset(props, previousEditorProps);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    preset = _useState2[0],
+    setPreset = _useState2[1];
+  useLayoutEffect(function () {
+    if (!previousEditorProps) {
+      return;
+    }
+    var recreate = shouldRecreatePreset(previousEditorProps, props);
+    if (!recreate) {
+      return;
+    }
+    setPreset(createPreset(props, previousEditorProps, createAnalyticsEvent));
+  }, [props, previousEditorProps, createAnalyticsEvent]);
+  return preset;
+}

package/dist/esm/plugins/analytics/plugin.js

@@ -28,6 +28,12 @@ function createPlugin(options) {
       },
       apply: function apply(tr, pluginState, _, state) {
         var _getFeatureFlags;
+        if (pluginState.createAnalyticsEvent !== options.createAnalyticsEvent) {
+          // When the plugin state is reconfigured, the init function isn't called again
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            createAnalyticsEvent: options.createAnalyticsEvent
+          });
+        }
         if ((_getFeatureFlags = getFeatureFlags(state)) !== null && _getFeatureFlags !== void 0 && _getFeatureFlags.catchAllTracking) {
           var analyticsEventWithChannel = getAnalyticsEventsFromTransaction(tr);
           if (analyticsEventWithChannel.length > 0) {

package/dist/esm/plugins/annotation/utils.js

@@ -22,7 +22,7 @@ export var surroundingMarks = function surroundingMarks($pos) {
  * Finds annotation marks, and returns their IDs.
  * @param marks Array of marks to search in
  */
-export var filterAnnotationIds = function filterAnnotationIds(marks) {
+var filterAnnotationIds = function filterAnnotationIds(marks) {
   if (!marks.length) {
     return [];
   }
@@ -44,7 +44,7 @@ export var filterAnnotationIds = function filterAnnotationIds(marks) {
  * @param annotations annotation metadata
  * @param $from location to look around (usually the selection)
  */
-export var reorderAnnotations = function reorderAnnotations(annotations, $from) {
+var reorderAnnotations = function reorderAnnotations(annotations, $from) {
   var idSet = surroundingMarks($from).map(filterAnnotationIds);
   annotations.sort(function (a, b) {
     return sum(idSet, function (ids) {
@@ -93,36 +93,6 @@ var validateAnnotationMark = function validateAnnotationMark(annotationMark) {
   }
 };
 
-// helper function: return the first selection range for the window
-var getSelectionRange = function getSelectionRange() {
-  var selection = window.getSelection();
-
-  // no selection made in browser
-  if (!selection || selection.isCollapsed) {
-    return null;
-  }
-  var selectionRange = selection.getRangeAt(0);
-  return selectionRange;
-};
-
-// helper function: find the bounds of first part within selected content
-export var getSelectionStartRect = function getSelectionStartRect() {
-  var range = getSelectionRange();
-  if (!range) {
-    return null;
-  }
-  var rects = range.getClientRects();
-  if (!rects.length) {
-    return null;
-  }
-  // Find first selection area that width is not 0
-  // Sometimes there is a chance that user is selecting an empty DOM node.
-  var firstRect = Array.from(rects).find(function (rect) {
-    return rect.width !== 0 && rect.height !== 0;
-  });
-  return firstRect || null;
-};
-
 /*
  * add decoration for the comment selection in draft state
  * (when creating new comment)

package/dist/esm/plugins/base/pm-plugins/react-nodeview.js

@@ -59,8 +59,4 @@ export var plugin = new SafePlugin({
       }
     };
   }
-});
-var plugins = function plugins() {
-  return [plugin];
-};
-export default plugins;
+});

package/dist/esm/plugins/block-type/pm-plugins/input-rule.js

@@ -11,22 +11,16 @@ function getHeadingLevel(match) {
     level: match[1].length
   };
 }
-export function headingRule(nodeType, maxLevel) {
+function headingRule(nodeType, maxLevel) {
   return createWrappingTextBlockRule({
     match: new RegExp('^(#{1,' + maxLevel + '})\\s$'),
     nodeType: nodeType,
     getAttrs: getHeadingLevel
   });
 }
-export function blockQuoteRule(nodeType) {
+function blockQuoteRule(nodeType) {
   return createJoinNodesRule(/^\s*>\s$/, nodeType);
 }
-export function codeBlockRule(nodeType) {
-  return createWrappingTextBlockRule({
-    match: /^```$/,
-    nodeType: nodeType
-  });
-}
 
 /**
  * Get heading rules
@@ -135,7 +129,7 @@ function getCodeBlockRules(schema) {
   });
   return [ruleAnalytics(threeTildeRule), ruleAnalytics(leftNodeReplacementThreeTildeRule)];
 }
-export function inputRulePlugin(schema, featureFlags) {
+function inputRulePlugin(schema, featureFlags) {
   var rules = [];
   if (schema.nodes.heading) {
     rules.push.apply(rules, _toConsumableArray(getHeadingRules(schema)));

package/dist/esm/plugins/caption/index.js

@@ -1,8 +1,6 @@
 import { caption } from '@atlaskit/adf-schema';
 import { default as createCaptionPlugin } from './pm-plugins/main';
-import { pluginKey } from './pm-plugins/plugin-key';
 import { captionKeymap } from './pm-plugins/keymap';
-export { pluginKey };
 var captionPlugin = function captionPlugin() {
   return {
     name: 'caption',

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

@@ -76,7 +76,8 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = this.props,
         node = _this$props2.node,
         cardContext = _this$props2.cardContext,
-        platform = _this$props2.platform;
+        platform = _this$props2.platform,
+        showServerActions = _this$props2.showServerActions;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
         data = _node$attrs.data;
@@ -89,7 +90,8 @@ export var BlockCardComponent = /*#__PURE__*/function (_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
@@ -126,12 +128,15 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      var platform = this.reactComponentProps.platform;
+      var _this$reactComponentP = this.reactComponentProps,
+        platform = _this$reactComponentP.platform,
+        showServerActions = _this$reactComponentP.showServerActions;
       return /*#__PURE__*/React.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
         getPos: this.getPos,
-        platform: platform
+        platform: platform,
+        showServerActions: showServerActions
       });
     }
   }]);

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

@@ -66,6 +66,7 @@ export var InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = this.props,
         node = _this$props2.node,
         cardContext = _this$props2.cardContext,
+        showServerActions = _this$props2.showServerActions,
         useAlternativePreloader = _this$props2.useAlternativePreloader;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
@@ -81,7 +82,8 @@ export var InlineCardComponent = /*#__PURE__*/function (_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
@@ -100,11 +102,13 @@ export function InlineCardNodeView(props) {
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
     view = props.view,
-    getPos = props.getPos;
+    getPos = props.getPos,
+    showServerActions = props.showServerActions;
   return /*#__PURE__*/React.createElement(WrappedInlineCard, {
     node: node,
     view: view,
     getPos: getPos,
+    showServerActions: showServerActions,
     useAlternativePreloader: useAlternativePreloader
   });
 }

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

@@ -16,7 +16,8 @@ export var createPlugin = function createPlugin(options) {
       allowResizing = options.allowResizing,
       useAlternativePreloader = options.useAlternativePreloader,
       fullWidthMode = options.fullWidthMode,
-      createAnalyticsEvent = options.createAnalyticsEvent;
+      createAnalyticsEvent = options.createAnalyticsEvent,
+      showServerActions = options.showServerActions;
     return new SafePlugin({
       state: {
         init: function init() {
@@ -97,14 +98,16 @@ export var createPlugin = function createPlugin(options) {
             pmPluginFactoryParams: pmPluginFactoryParams,
             Component: InlineCardNodeView,
             extraComponentProps: {
-              useAlternativePreloader: useAlternativePreloader
+              useAlternativePreloader: useAlternativePreloader,
+              showServerActions: showServerActions
             }
           }),
           blockCard: function blockCard(node, view, getPos) {
             var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
               eventDispatcher = pmPluginFactoryParams.eventDispatcher;
             var reactComponentProps = {
-              platform: platform
+              platform: platform,
+              showServerActions: showServerActions
             };
             var hasIntlContext = true;
             return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();

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

@@ -21,6 +21,10 @@ export var resolveWithProvider = function resolveWithProvider(view, outstandingR
 };
 var updateCardType = function 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/esm/plugins/code-block/pm-plugins/main-state.js

@@ -1,14 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { pluginKey } from '../plugin-key';
 export var getPluginState = function getPluginState(state) {
   return pluginKey.getState(state);
-};
-export var setPluginState = function setPluginState(stateProps) {
-  return function (state, dispatch) {
-    var pluginState = getPluginState(state);
-    dispatch(state.tr.setMeta(pluginKey, _objectSpread(_objectSpread({}, pluginState), stateProps)));
-    return true;
-  };
 };

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

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

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

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

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

@@ -4,9 +4,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 export var pluginKey = new PluginKey('contextPanelPluginKey');
-export function getPluginState(state) {
-  return pluginKey.getState(state);
-}
 function contextPanelPluginFactory(contextPanels, dispatch) {
   return new SafePlugin({
     key: pluginKey,

package/dist/esm/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
-  });
-}
 var dataConsumerMarkPlugin = function dataConsumerMarkPlugin() {
   return {
     name: 'dataConsumerPlugin',

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

@@ -5,9 +5,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".concat(number).slice(-2) : "".concat(number);
-}
 function isDigit(c) {
   if (c === undefined) {
     return false;

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

@@ -42,12 +42,6 @@ export var forceAutoSave = function forceAutoSave(resolve, reject) {
     }
   }, applyChange);
 };
-export var showContextPanel = createCommand({
-  type: 'UPDATE_STATE',
-  data: {
-    showContextPanel: true
-  }
-}, applyChange);
 export var updateExtensionLayout = function updateExtensionLayout(layout) {
   return createCommand({
     type: 'UPDATE_STATE',

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

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["type"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -45,7 +47,10 @@ function ExtensionWithPluginState(props) {
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
-  var customContainerStyles = {};
+  var customContainerStyles = {
+    width: '100%'
+  };
+  var newContentStyles = {};
   if (shouldBreakout) {
     var _calculateBreakoutSty = calculateBreakoutStyles({
         mode: node.attrs.layout,
@@ -54,8 +59,10 @@ function ExtensionWithPluginState(props) {
       }),
       type = _calculateBreakoutSty.type,
       breakoutStyles = _objectWithoutProperties(_calculateBreakoutSty, _excluded);
+    newContentStyles = _objectSpread({}, breakoutStyles);
     customContainerStyles = breakoutStyles;
   }
+  newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), contentWrapper);
   return jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout,
@@ -74,7 +81,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/esm/plugins/extension/ui/Extension/Extension/styles.js

@@ -11,11 +11,11 @@ export var wrapperStyle = function wrapperStyle(theme) {
 };
 export var header = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0px;\n  vertical-align: middle;\n\n  &.with-children:not(.without-frame) {\n    padding: 4px 8px 8px;\n  }\n  &.without-frame {\n    padding: 0;\n  }\n"])), padding / 2, padding / 2);
 export var content = function content(theme) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  cursor: initial;\n"])), padding, themed({
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  cursor: initial;\n  width: 100%;\n"])), padding, themed({
     light: "var(--ds-surface, white)",
     dark: "var(--ds-surface, ".concat(DN30, ")")
   })(theme), themed({
     dark: "var(--ds-text, ".concat(DN900, ")")
   })(theme), "var(--ds-border, ".concat(N30, ")"), borderRadius());
 };
-export var contentWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", "px ", "px;\n"])), padding, padding);
+export var contentWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", "px ", "px;\n  display: flex;\n  justify-content: center;\n"])), padding, padding);

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

@@ -69,6 +69,7 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
       var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
       var isBlockExtension = name === 'extension';
       return jsx("div", {
+        "data-testid": "lozenge-fallback",
         css: placeholderFallback
       }, lozengeData && !isBlockExtension ? this.renderImage(_objectSpread({
         height: ICON_SIZE,

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

@@ -5,13 +5,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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 var pluginKey = new PluginKey('feedbackDialogPlugin');
 var showJiraCollectorDialog;
 var feedbackInfoHash;
 var defaultFeedbackInfo;

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

@@ -30,7 +30,9 @@ export default (function (_ref) {
     _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
     hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli,
     ariaHasPopup = _ref.ariaHasPopup,
-    tabIndex = _ref.tabIndex;
+    tabIndex = _ref.tabIndex,
+    areaControls = _ref.areaControls,
+    ariaLabel = _ref.ariaLabel;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? iconOnlySpacing : {};
@@ -55,8 +57,10 @@ export default (function (_ref) {
         }))
       }, 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,

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

@@ -80,9 +80,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "hideOnEsc", function () {
       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=".concat(_this.props.buttonTestId, "]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
+      _this.hide();
     });
     _defineProperty(_assertThisInitialized(_this), "onOpenChanged", function (openChangedEvent) {
       if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
@@ -109,7 +110,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         tooltip = _this$props2.tooltip,
         buttonTestId = _this$props2.buttonTestId,
         dropdownWidth = _this$props2.dropdownWidth,
-        editorView = _this$props2.editorView;
+        editorView = _this$props2.editorView,
+        dropdownListId = _this$props2.dropdownListId;
       var trigger;
       if (icon) {
         var TriggerIcon = hideExpandIcon ? icon : jsx(CompositeIcon, {
@@ -137,7 +139,9 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
-          tooltipContent: tooltip
+          tooltipContent: tooltip,
+          ariaHasPopup: true,
+          areaControls: dropdownListId
         }, title);
       }
 
@@ -160,7 +164,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         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: dispatchCommand

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import React from 'react';
@@ -14,11 +14,6 @@ import withOuterListeners from '../../../ui/with-outer-listeners';
 
 // helps adjusts position of popup
 var emojiPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-
-// helps to vertically align emoji picker
-// both top and bottom margin should be 2px
-// https://product-fabric.atlassian.net/browse/CETI-148
-var emojiPickerWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
 var EmojiPickerWithListener = withOuterListeners(EmojiPicker);
 export var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = React.useRef(null);
@@ -78,13 +73,11 @@ export var EmojiPickerButton = function 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
-    })));
+    }));
   };
   var title = props.title || '';
   return jsx("div", {

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

@@ -84,6 +84,7 @@ var ExtensionButton = function ExtensionButton(props) {
   };
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
+    ariaLabel: item.tooltip,
     icon: ButtonIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
       label: item.label || ''
     }) : undefined,

package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -29,6 +29,7 @@ import Separator from './Separator';
 import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import ColorPickerButton from '../../../ui/ColorPickerButton';
+import { backgroundPaletteTooltipMessages } from '../../../ui/ColorPalette';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
@@ -54,6 +55,10 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
     setDisableScroll = _ref.setDisableScroll,
     mountRef = _ref.mountRef;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
+  var _ref2 = editorView ? getFeatureFlags(editorView.state) : {
+      useSomewhatSemanticTextColorNames: false
+    },
+    useSomewhatSemanticTextColorNames = _ref2.useSomewhatSemanticTextColorNames;
   return jsx(ButtonGroup, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
@@ -139,7 +144,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           showSelected: item.showSelected,
           buttonTestId: item.testId,
           editorView: editorView,
-          setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList")
         });
       case 'select':
         if (item.selectType === 'list') {
@@ -178,12 +184,22 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
             // Currently in floating toolbar, color picker is only
             //  used in panel and table cell background color.
             // Both uses same color palette.
-            // That's why hard-coding hexToEditorBackgroundPaletteColor.
+            // That's why hard-coding hexToEditorBackgroundPaletteColor
+            //  and paletteColorTooltipMessages.
             // When we need to support different color palette
             //  in floating toolbar, we need to set hexToPaletteColor
-            //  in item options.
+            //  and paletteColorTooltipMessages in item options.
             ,
-            hexToPaletteColor: hexToEditorBackgroundPaletteColor
+            hexToPaletteColor: hexToEditorBackgroundPaletteColor,
+            paletteColorTooltipMessages: backgroundPaletteTooltipMessages
+            // We did not want to create new FF or update
+            //  useSomewhatSemanticTextColorNames name
+            //  because it is temporary and require extra work.
+            // So even though it says text color names,
+            //  we are going to use for all color pickers
+            //  such as text, background and table charts.
+            ,
+            showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
           });
         }
         if (item.selectType === 'emoji') {
@@ -205,8 +221,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         if (!editorView || !extensionsProvider) {
           return null;
         }
-        var _ref2 = getFeatureFlags(editorView.state) || {},
-          extendFloatingToolbar = _ref2.extendFloatingToolbar;
+        var _ref3 = getFeatureFlags(editorView.state) || {},
+          extendFloatingToolbar = _ref3.extendFloatingToolbar;
         if (!extendFloatingToolbar) {
           return null;
         }
@@ -343,8 +359,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
   _createClass(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref3) {
-      var table = _ref3.table;
+    value: function resetStyling(_ref4) {
+      var table = _ref4.table;
       if (this.props.editorView) {
         var _this$props$editorVie2 = this.props.editorView,
           state = _this$props$editorVie2.state,

package/dist/esm/plugins/floating-toolbar/utils.js

@@ -50,14 +50,4 @@ export function findNode(parent, predicate) {
     return true;
   });
   return matchedNode;
-}
-export function getFocusableElements(rootNode) {
-  if (!rootNode) {
-    return [];
-  }
-  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return Array.from(focusableModalElements) || [];
-}
-export function getFirstFocusableElement(rootNode) {
-  return getFocusableElements(rootNode)[0];
 }