@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js

@@ -7,12 +7,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FullPageToolbar = void 0;
+exports.FullPageToolbar = exports.EditorToolbar = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _ui = _interopRequireDefault(require("../../../plugins/collab-edit/ui"));
 
 var _FindReplaceToolbarButtonWithState = _interopRequireDefault(require("../../../plugins/find-replace/FindReplaceToolbarButtonWithState"));
@@ -25,11 +27,13 @@ var _MainToolbar = require("./MainToolbar");
 
 var _context = require("../../ContextPanel/context");
 
+var _messages = _interopRequireDefault(require("./messages"));
+
 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 FullPageToolbar = /*#__PURE__*/_react.default.memo(function (props) {
+var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
 
   var _useState = (0, _react.useState)(false),
@@ -94,12 +98,18 @@ var FullPageToolbar = /*#__PURE__*/_react.default.memo(function (props) {
       showKeyline: props.showKeyline || contextPanelWidth > 0,
       twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
     }, /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbarFirstChild, {
-      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)
+      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar),
+      role: "region",
+      "aria-label": props.intl.formatMessage(_messages.default.toolbarLabel)
     }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbarSecondChild, {
       "data-testid": 'avatar-group-outside-plugin',
-      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)
+      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar),
+      role: "region",
+      "aria-label": props.intl.formatMessage(_messages.default.pageActionsLabel)
     }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
   });
 });
 
+exports.EditorToolbar = EditorToolbar;
+var FullPageToolbar = (0, _reactIntlNext.injectIntl)(EditorToolbar);
 exports.FullPageToolbar = FullPageToolbar;

package/dist/cjs/ui/Appearance/FullPage/messages.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactIntl = require("react-intl");
+
+var _default = (0, _reactIntl.defineMessages)({
+  toolbarLabel: {
+    id: 'fabric.editor.toolbarLabel',
+    defaultMessage: 'Editor toolbar',
+    description: 'Label for the ARIA region landmark'
+  },
+  pageActionsLabel: {
+    id: 'fabric.editor.pageActionsLabel',
+    defaultMessage: 'Page actions',
+    description: 'Label for the ARIA region landmark'
+  },
+  editableContentLabel: {
+    id: 'fabric.editor.editableContentLabel',
+    defaultMessage: 'Editable content',
+    description: 'Label for the ARIA region landmark'
+  }
+});
+
+exports.default = _default;

package/dist/cjs/ui/AppearanceComponents/Mobile.js

@@ -49,11 +49,13 @@ function MobileAppearance(_ref) {
         mobileDimensions = _ref2.mobileDimensions;
     var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
     var minHeight = 100;
+    var currentIsExpanded = true; // isExpanded prop should always be true for Hybrid Editor
 
     if (mobileDimensions) {
       var keyboardHeight = mobileDimensions.keyboardHeight,
           windowHeight = mobileDimensions.windowHeight,
-          mobilePaddingTop = mobileDimensions.mobilePaddingTop;
+          mobilePaddingTop = mobileDimensions.mobilePaddingTop,
+          isExpanded = mobileDimensions.isExpanded;
       /*
         We calculate the min-height based on the windowHeight - keyboardHeight - paddingTop.
         This is needed due to scrolling issues when there is no content to scroll (like, only having 1 paragraph),
@@ -61,9 +63,16 @@ function MobileAppearance(_ref) {
         is scrolled nevertheless, and it gives the sensation that the content was lost.
       */
 
-      var keyboardHeightVh = keyboardHeight * 100 / windowHeight;
-      var paddingVh = mobilePaddingTop * 100 / windowHeight;
-      minHeight = 100 - keyboardHeightVh - paddingVh;
+      if (!persistScrollGutter) {
+        // in iOS Hybrid Editor windowHeight doesn't exclude keyboardHeight
+        // in Android keyboardHeight is always set to -1;
+        minHeight = windowHeight - keyboardHeight - 2 * mobilePaddingTop;
+      } else {
+        // in iOS Compact Editor windowHeight excludes keyboardHeight
+        minHeight = windowHeight - mobilePaddingTop; // isExpanded can be true of false for Compact editor
+
+        currentIsExpanded = isExpanded;
+      }
     }
 
     return /*#__PURE__*/_react.default.createElement(_WithFlash.default, {
@@ -74,7 +83,8 @@ function MobileAppearance(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_Addon.ClickAreaMobile, {
       editorView: editorView || undefined,
       minHeight: minHeight,
-      persistScrollGutter: persistScrollGutter
+      persistScrollGutter: persistScrollGutter,
+      isExpanded: currentIsExpanded
     }, /*#__PURE__*/_react.default.createElement(ContentArea, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "ak-editor-content-area"
     }, children)))));

package/dist/cjs/ui/ChromeCollapsed/index.js

@@ -27,6 +27,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styles = require("./styles");
 
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("./messages");
+
 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; }
@@ -74,7 +78,7 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(ChromeCollapsed, [{
     key: "render",
     value: function render() {
-      var placeholder = this.props.text || 'Type something…';
+      var placeholder = this.props.text || this.props.intl.formatMessage(_messages.messages.chromeCollapsedPlaceholder);
       return /*#__PURE__*/_react.default.createElement(_styles.Input, {
         innerRef: this.handleInputRef,
         onFocus: this.focusHandler,
@@ -85,4 +89,6 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
   return ChromeCollapsed;
 }(_react.PureComponent);
 
-exports.default = ChromeCollapsed;
+var _default = (0, _reactIntlNext.injectIntl)(ChromeCollapsed);
+
+exports.default = _default;

package/dist/cjs/ui/ChromeCollapsed/messages.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var messages = (0, _reactIntlNext.defineMessages)({
+  chromeCollapsedPlaceholder: {
+    id: 'fabric.editor.chromeCollapsedPlaceholder',
+    defaultMessage: 'Type something…',
+    description: 'placeholder for an input where users insert text'
+  }
+});
+exports.messages = messages;

package/dist/cjs/ui/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.panelBackgroundPalette = void 0;
+exports.panelDarkModeBackgroundPalette = exports.panelBackgroundPalette = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -13,76 +13,147 @@ var _theme = require("@atlaskit/theme");
 
 var _common = require("./common");
 
+var _styles = require("@atlaskit/editor-common/styles");
+
 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) { (0, _defineProperty2.default)(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; }
 
 var panelBackgroundPalette = [{
-  label: 'Doctor',
+  label: 'White',
   value: _theme.colors.N0
 }, {
-  label: 'Pixie dust',
+  label: 'Light blue',
   value: _theme.colors.B50
 }, {
-  label: "Gram's sofa",
+  label: 'Light teal',
   value: _theme.colors.T50
 }, {
-  label: 'The smell',
+  label: 'Light green',
   value: _theme.colors.G50
 }, {
-  label: 'James blonde',
+  label: 'Light yellow',
   value: _theme.colors.Y50
 }, {
-  label: 'Rosie',
+  label: 'Light red',
   value: _theme.colors.R50
 }, {
-  label: 'Lavender secret',
+  label: 'Light purple',
   value: _theme.colors.P50
 }, {
-  label: "Gram's hair",
+  label: 'Light gray',
   value: _theme.colors.N20
 }, {
-  label: 'Schwag',
+  label: 'Blue',
   value: _theme.colors.B75
 }, {
-  label: 'Arctic chill',
+  label: 'Teal',
   value: _theme.colors.T75
 }, {
-  label: 'Mintie',
+  label: 'Green',
   value: _theme.colors.G75
 }, {
-  label: 'Dandelion whisper',
+  label: 'Yellow',
   value: _theme.colors.Y75
 }, {
-  label: 'Bondi sunburn',
+  label: 'Red',
   value: _theme.colors.R75
 }, {
-  label: 'Phantom mist',
+  label: 'Purple',
   value: _theme.colors.P75
 }, {
-  label: 'Sentinel',
+  label: 'Gray',
   value: _theme.colors.N60
 }, {
-  label: 'Arvo breeze',
+  label: 'Dark blue',
   value: _theme.colors.B100
 }, {
-  label: 'Hairy fairy',
+  label: 'Dark teal',
   value: _theme.colors.T100
 }, {
-  label: 'Green tea',
+  label: 'Dark green',
   value: _theme.colors.G200
 }, {
-  label: 'Pub mix',
+  label: 'Dark yellow',
   value: _theme.colors.Y200
 }, {
-  label: 'Alexandria',
+  label: 'Dark red',
   value: _theme.colors.R100
 }, {
-  label: 'Herky jerky',
+  label: 'Dark purple',
   value: _theme.colors.P100
 }].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
     border: _common.DEFAULT_BORDER_COLOR
   });
 });
-exports.panelBackgroundPalette = panelBackgroundPalette;
+exports.panelBackgroundPalette = panelBackgroundPalette;
+var panelDarkModeBackgroundPalette = [{
+  label: 'Dark gray',
+  value: _styles.darkPanelColors.DarkGray
+}, {
+  label: 'Dark blue',
+  value: _styles.darkPanelColors.B1200S
+}, {
+  label: 'Dark teal',
+  value: _styles.darkPanelColors.T1200S
+}, {
+  label: 'Dark green',
+  value: _styles.darkPanelColors.G1200S
+}, {
+  label: 'Dark yellow',
+  value: _styles.darkPanelColors.Y1200S
+}, {
+  label: 'Dark red',
+  value: _styles.darkPanelColors.R1200S
+}, {
+  label: 'Dark purple',
+  value: _styles.darkPanelColors.P1200S
+}, {
+  label: 'Gray',
+  value: _styles.darkPanelColors.Gray
+}, {
+  label: 'blue',
+  value: _styles.darkPanelColors.B900
+}, {
+  label: 'teal',
+  value: _styles.darkPanelColors.T900
+}, {
+  label: 'green',
+  value: _styles.darkPanelColors.G900
+}, {
+  label: 'yellow',
+  value: _styles.darkPanelColors.Y900
+}, {
+  label: 'red',
+  value: _styles.darkPanelColors.R900
+}, {
+  label: 'purple',
+  value: _styles.darkPanelColors.P900
+}, {
+  label: 'Light gray',
+  value: _styles.darkPanelColors.LightGray
+}, {
+  label: 'Light blue',
+  value: _styles.darkPanelColors.B800S
+}, {
+  label: 'Light teal',
+  value: _styles.darkPanelColors.T900S
+}, {
+  label: 'Light green',
+  value: _styles.darkPanelColors.G900S
+}, {
+  label: 'Light yellow',
+  value: _styles.darkPanelColors.Y800S
+}, {
+  label: 'Light red',
+  value: _styles.darkPanelColors.R800S
+}, {
+  label: 'Light purple',
+  value: _styles.darkPanelColors.P800S
+}].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: _common.DEFAULT_BORDER_COLOR
+  });
+});
+exports.panelDarkModeBackgroundPalette = panelDarkModeBackgroundPalette;

package/dist/cjs/ui/ColorPalette/index.js

@@ -40,7 +40,6 @@ var ColorPalette = function ColorPalette(props) {
       onClick = props.onClick,
       selectedColor = props.selectedColor,
       className = props.className,
-      isShowingMoreColors = props.isShowingMoreColors,
       formatMessage = props.intl.formatMessage;
 
   var colorsPerRow = _react.default.useMemo(function () {
@@ -70,8 +69,7 @@ var ColorPalette = function ColorPalette(props) {
         label: message ? formatMessage(message) : label,
         onClick: onClick,
         isSelected: value === selectedColor,
-        checkMarkColor: getContrastColor(value, [_colors.N0, _colors.N500]),
-        autoFocus: isShowingMoreColors && rowIdx === 1 && colorIdx === 0
+        checkMarkColor: getContrastColor(value, [_colors.N0, _colors.N500])
       });
     }));
   }));

package/dist/cjs/ui/ColorPickerButton/index.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 
@@ -57,7 +57,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
     setIsPopupOpen(!isPopupOpen);
   };
 
-  var ColorPaletteWithListeners = (0, _editorCommon.withOuterListeners)(_ColorPalette.default);
+  var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_ColorPalette.default);
 
   var onColorSelected = function onColorSelected(color, label) {
     setIsPopupOpen(false);
@@ -91,7 +91,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
       return;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+    return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -73,10 +73,13 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Item, null, /*#__PURE__*/_react.default.createElement(ItemIcon, null, /*#__PURE__*/_react.default.createElement(ResolvedIcon, {
     label: title
   })), /*#__PURE__*/_react.default.createElement(ItemBody, null, summary ? /*#__PURE__*/_react.default.createElement(ItemText, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "item-title"
+    className: "item-title",
+    id: "context-panel-title"
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: "item-summary"
-  }, summary)) : /*#__PURE__*/_react.default.createElement(CenteredItemTitle, null, title)), /*#__PURE__*/_react.default.createElement(CloseButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+  }, summary)) : /*#__PURE__*/_react.default.createElement(CenteredItemTitle, {
+    id: "context-panel-title"
+  }, title)), /*#__PURE__*/_react.default.createElement(CloseButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
     appearance: "subtle",
     iconBefore: /*#__PURE__*/_react.default.createElement(_cross.default, {
       label: intl.formatMessage(_messages.messages.close)

package/dist/cjs/ui/ContentStyles/index.js

@@ -79,7 +79,7 @@ var _featureFlagsContext = require("../../plugins/feature-flags-context");
 
 var _templateObject;
 
-var ContentStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _styles.inlineNodeSharedStyle, _styles6.blocktypeStyles, _styles16.textFormattingStyles, _styles17.placeholderTextStyles, _styles5.placeholderStyles, function (_ref) {
+var ContentStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _styles6.blocktypeStyles, _styles16.textFormattingStyles, _styles17.placeholderTextStyles, _styles5.placeholderStyles, function (_ref) {
   var featureFlags = _ref.featureFlags;
   return featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? _styles7.highlightingCodeBlockStyles : _styles7.codeBlockStyles;
 }, _styles.textColorStyles, _styles8.listsStyles, _styles9.ruleStyles, _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, _commonStyles.tableStyles, _styles12.panelStyles, _styles13.fakeCursorStyles, _styles14.mentionsStyles, function (_ref2) {

package/dist/cjs/ui/ContextPanel/index.js

@@ -201,7 +201,9 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
           panelWidth: width,
           visible: visible,
           positionPanelOverEditor: newPosition,
-          "data-testid": "context-panel-panel"
+          "data-testid": "context-panel-panel",
+          "aria-labelledby": "context-panel-title",
+          role: "dialog"
         }, /*#__PURE__*/_react.default.createElement(Content, {
           panelWidth: width,
           visible: visible

package/dist/cjs/ui/Dropdown/index.js

@@ -27,7 +27,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _droplist = _interopRequireDefault(require("@atlaskit/droplist"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _withOuterListeners = _interopRequireDefault(require("../with-outer-listeners"));
 
@@ -86,7 +86,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
           fitHeight = _this$props.fitHeight,
           fitWidth = _this$props.fitWidth,
           zIndex = _this$props.zIndex;
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
         target: target,
         mountTo: mountTo,
         boundariesElement: boundariesElement,

package/dist/cjs/ui/DropdownMenu/index.js

@@ -35,7 +35,7 @@ var _item = _interopRequireWildcard(require("@atlaskit/item"));
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -121,7 +121,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           onItemActivated = _this$props.onItemActivated,
           _onMouseEnter = _this$props.onMouseEnter,
-          _onMouseLeave = _this$props.onMouseLeave; // onClick and value.name are the action indicators in the handlers
+          _onMouseLeave = _this$props.onMouseLeave,
+          shouldUseDefaultRole = _this$props.shouldUseDefaultRole; // onClick and value.name are the action indicators in the handlers
       // If neither are present, don't wrap in an Item.
 
       if (!item.onClick && !item.value && !item.value.name) {
@@ -134,7 +135,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         key: item.key || item.content,
         isSelected: item.isActive
       }, /*#__PURE__*/_react.default.createElement(_item.default, {
-        role: "menuitem",
+        role: shouldUseDefaultRole ? 'button' : 'menuitem',
         elemBefore: item.elemBefore,
         elemAfter: item.elemAfter,
         isDisabled: item.isDisabled,
@@ -154,7 +155,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           });
         },
         className: item.className,
-        "aria-label": String(item.content)
+        "aria-label": item.label || String(item.content),
+        "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined
       }, /*#__PURE__*/_react.default.createElement(ItemContentWrapper, {
         hasElemBefore: !!item.elemBefore
       }, item.content)));
@@ -186,8 +188,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           fitHeight = _this$props2.fitHeight,
           fitWidth = _this$props2.fitWidth,
           isOpen = _this$props2.isOpen,
-          zIndex = _this$props2.zIndex;
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+          zIndex = _this$props2.zIndex,
+          shouldUseDefaultRole = _this$props2.shouldUseDefaultRole;
+      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
@@ -214,7 +217,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       }), items.map(function (group, index) {
         return /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
           key: index,
-          role: "menu"
+          role: shouldUseDefaultRole ? 'group' : 'menu'
         }, group.items.map(function (item) {
           return _this2.renderItem(item);
         }));

package/dist/cjs/ui/ElementBrowser/ModalElementBrowser.js

@@ -90,9 +90,8 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     onClick: onModalClick,
     onKeyDown: onKeyDown
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, props.isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
-    stackIndex: 1
-    /** setting stackIndex 1 disables focus control in the modal dialog which was causing conflicts with insertion methods from prosemirror */
-    ,
+    testId: "element-browser-modal-dialog",
+    stackIndex: 0,
     key: "element-browser-modal",
     onClose: props.onClose,
     height: "664px",

package/dist/cjs/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -266,7 +266,7 @@ function ElementItem(_ref4) {
     innerRef: ref,
     onKeyPress: onKeyPress,
     "data-testid": "element-item-".concat(index),
-    tabIndex: -1,
+    tabIndex: 0,
     style: inlineMode ? null : itemStyleOverrides
   }, /*#__PURE__*/_react.default.createElement(ItemContent, {
     title: title,

package/dist/cjs/ui/FloatingToolbar/index.js

@@ -39,7 +39,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _styles = require("./styles");
 
@@ -86,7 +86,7 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
         alignX: alignX,
         alignY: alignY,
         target: target,

package/dist/cjs/ui/LinkSearch/LinkSearchList.js

@@ -68,15 +68,21 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
           items = _this$props.items,
           selectedIndex = _this$props.selectedIndex,
           isLoading = _this$props.isLoading,
-          ariaControls = _this$props.ariaControls;
+          ariaControls = _this$props.ariaControls,
+          role = _this$props.role,
+          id = _this$props.id;
       var itemsContent;
       var loadingContent;
 
       if (items && items.length > 0) {
         itemsContent = /*#__PURE__*/_react.default.createElement(List, {
+          id: id,
+          role: role,
           "aria-controls": ariaControls
         }, items.map(function (item, index) {
           return /*#__PURE__*/_react.default.createElement(_LinkSearchListItem.default, {
+            id: "link-search-list-item-".concat(index),
+            role: role && 'option',
             item: item,
             selected: selectedIndex === index,
             onMouseMove: onMouseMove,