@atlaskit/editor-core 176.0.3 → 177.0.1

package/.eslintrc.js

@@ -8,13 +8,13 @@ module.exports = {
             target: 'packages/editor/editor-core/src/**/*',
             from: `packages/editor/editor-core/src/plugins/*/!(types)*`,
             message:
-              '[ELR101] Avoid importing dependencies from editor plugins. Move shared code to a common location. https://developer.atlassian.com/cloud/framework/atlassian-frontend/editor/lint#elr101',
+              '[ELR101] Avoid importing dependencies from editor plugins. Move shared code to a common location. go/elr101',
           },
           {
             target: 'packages/editor/editor-core/src/**/*',
             from: `packages/editor/editor-core/src/plugins/*/!(types)**/*`,
             message:
-              '[ELR101] Avoid importing dependencies from editor plugins. Move shared code to a common location. https://developer.atlassian.com/cloud/framework/atlassian-frontend/editor/lint#elr101',
+              '[ELR101] Avoid importing dependencies from editor plugins. Move shared code to a common location. go/elr101',
           },
         ],
       },

package/CHANGELOG.md

@@ -1,5 +1,119 @@
 # @atlaskit/editor-core
 
+## 177.0.1
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
+## 177.0.0
+
+### Major Changes
+
+- [`ac1c880cf4c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac1c880cf4c) - [ux] ED-12395 - Remove the keyboard accessible date picker feature flag, which has been 100% rolled out
+
+  ## **DEPRECATION WARNING:**
+
+  There's two deprecations in this change:
+
+  ### 1. Remove `keyboardAccessibleDatepicker` and the `allowKeyboardAccessibleDatepicker` feature flag
+
+  Now that this has been fully rolled out, this feature flag is no longer required. The if-statement that depends on this feature flag was also removed in point 2 below:
+
+  ### 2. Remove the `showTextField` prop on the DatePicker
+
+  This was exclusively used to conditionally render the `DatePickerInput`. Its usage was always set to `true` in code or through the feature flag that has now been rolled out. Thus, this deprecation simplifies the API.
+
+  Since no code related to this feature flag remains, there are no inline deprecation warnings.
+
+- [`5d317ed8aa3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5d317ed8aa3) - [ux] ED-15882: Implement custom starting numbers for orderedList nodes in adf-schema, editor, renderer, transformers behind restartNumberedLists feature flag. Users will be able to set a custom starting number when typing to create a numbered list in the Editor and this will be persisted across Renderer and other format transformations.
+
+  Note: restartNumberedLists will be off by default. To enable it, consumers will need to set <Editor featureFlags={{ restartNumberedLists: true }}> or <Renderer featureFlags={{ restartNumberedLists: true }}>
+
+### Minor Changes
+
+- [`5307b130e91`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5307b130e91) - Cleaned up placeholder lint feature as it was no longer being used
+- [`fe0fa175ab6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe0fa175ab6) - Add support to prevent Editor Popup overflowing top of the viewport.
+  To enable the behaviour use the feature flag `prevent-popup-overflow` as follows:
+
+  ```tsx
+  <Editor
+    featureFlags={{
+      'prevent-popup-overflow': true,
+    }}
+  />
+  ```
+
+- [`3ca38fe77c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ca38fe77c1) - [ux] ED-16206 Fixed - Tooltip for “Sort column Z-A“ option isn’t displayed if you first hover over the “Sort column A-Z“ option
+- [`c42a0344d32`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c42a0344d32) - The linking view changing experiment toolbar style will be removed, including the feature flag. All variants will be removed except for toolbarIcons which will be the only view of the toolbar of the linking view switcher.
+- [`c253ecf5377`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c253ecf5377) - Use preventPopupOverflow ff to prevent the link picker going off the screen horizontally in the inline comment Editor
+- [`8820442c2b2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8820442c2b2) - [ux] ED-15709: add feature for delete element if it is `isReferencedSource` is `true`
+
+  - add checkbox confirmation dialog when then config have `isReferentiality.`
+  - add referentiality helper functions.
+  - update confirmDialog config to a handler to reduce traverse times.
+  - user can now tick checkbox to delete descendent nodes or only selected node when user click the delete icon in floating toolbar.
+
+- [`1d41bbc2965`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1d41bbc2965) - This changeset introduces non breaking changes to support ssr within the loader emoji component
+- [`d2c62b69a6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2c62b69a6a) - [ux] Adds support to floating toolbar configuration to enable trapping focus within the Popup.
+- [`92613b1f023`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92613b1f023) - ED-15018 and ED-13913 - Remove all circular dependencies and ignored warnings in editor
+
+### Patch Changes
+
+- [`2fd53283b55`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2fd53283b55) - Updated i18n language files
+- [`dfb5f68a5c3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfb5f68a5c3) - [ux] ED-16187: prevent CollapsedEditor from crashing when IntlProvider isn't provided
+- [`b03147b4b1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b03147b4b1e) - [ux] editor copy paste block cards as inline where allowBlockCards is false
+- [`1ea235bf3f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1ea235bf3f5) - ED-15489 Changes to improve the assistive text for emoji and mention typeaheads
+- [`4a79928bc16`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4a79928bc16) - Updated aria label for editor content area according to content design recommendations.
+- [`4c80b42a754`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c80b42a754) - [ED-16245] Make sure the Media dom nodes are mounted before scroll into
+- [`0d5dfdc07bc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d5dfdc07bc) - Refactored Typeahead component to be compatible with VoiceOver in Safari.
+- [`873ba4d6ae1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/873ba4d6ae1) - Fix task ticks updates not being reflected in the editor.
+- [`aa3c130c43a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aa3c130c43a) - Changes the annotation mark to inclusive in order to fix the annotation being deleted when doing composition
+- [`9f142486837`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f142486837) - ED-14867 updated zIndex for width toggle breakout btn to be below other popups
+- [`b616ba20f04`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b616ba20f04) - [ux] The height of the panel stays the same when the emoji is removed
+- [`c1eedb6a5e1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1eedb6a5e1) - [ux] Removed extra span and it's related styles from Placeholder plugin to align height of flashing cursor with height of text line
+- [`f608bc44cf2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f608bc44cf2) - [ux] ED-16177 Added new text color labels. These new labels are disabled by default and only present when useSomewhatSemanticTextColorNames feature flag is set to true.
+- [`62789954243`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62789954243) - react-virutlaized has been replaced with @tanstack/react-virutal in @atlaskit/emoji
+- [`224a2482244`](https://bitbucket.org/atlassian/atlassian-frontend/commits/224a2482244) - [ED-16166] Changes the renderer prop document type from any to DocNode
+
+  BREAKING for `@atlaskit/renderer`: Previously the `document` prop for the renderer component had the type of `any`. This has now been changed to `DocNode` which comes from `@atlaskit/adf-schema`.
+
+  Documents being passed into the renderer component will need to be updated to use this type.
+
+  Example Usage:
+
+  ```tsx
+  import { DocNode } from '@atlaskit/adf-schema';
+
+  const emptyDoc: DocNode = {
+    type: 'doc',
+    version: 1,
+    content: [],
+  };
+  ```
+
+- [`41810bb081d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41810bb081d) - [ux] ED-15897 fixed unexpected behaviour when using scroll buttons
+- [`76183098160`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76183098160) - [ux] ED-15285 - fix initial visibility of edit icon on extension floating toolbar when selecting an editable extension at the first node in the document
+- [`bb9a5f9d77d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bb9a5f9d77d) - [ux] ED-16176 Added useSomewhatSemanticTextColorNames feature flag. This is part of COMMIT-5058 work to unblock dark mode for Jira. The intention of the flag is to show semantic names in tooltips when hovering over colors in the text color palette in token light/dark mode. Note that the flag is 'somewhat semantic' due to white/dark-gray not being semantic names.
+- [`233e03b2d92`](https://bitbucket.org/atlassian/atlassian-frontend/commits/233e03b2d92) - ED-16007 To highlight the table rows and columns when the 'Delete Row' and 'Delete Column' options are highlighted in the 'cell options' menu of floating toolbar
+- [`7fd5785d37d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7fd5785d37d) - [ESS-2752] Fix clientId type derived from prosemirror-collab
+- [`651dee737d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/651dee737d2) - ED-15301 Added initial preset builder types
+- [`3a35da6c331`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a35da6c331) - DTR-825 ED-9775: added jamfselfservice:// to whitelistedURLPatterns
+- [`069fe0a9aa4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/069fe0a9aa4) - [ux] When trying to apply a mark and the selection contains a mix of the selected mark and other content it will apply the mark rather than removing the mark from the selection.
+- [`3a236cfd8d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a236cfd8d3) - refactor typeahead emoji plugin by removing usage of legacy context provider
+- [`129c07f042d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/129c07f042d) - ED-16271 To skip the scroll buttons when user uses arrow keys to navigate in floating toolbar as it is not keyboard user friendly (changes are not feature falgged)
+- [`1267ffe2c42`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1267ffe2c42) - Add media traceId into copy/paste operations
+- [`b2fa6d3e611`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2fa6d3e611) - [ED-16106] Fix margin top when paragraph has alignment marks
+- [`0745d7b54df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0745d7b54df) - Updated containsClass method to be more robust, to prevent console errors
+- [`97eb6fb59c8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/97eb6fb59c8) - [ux] Fixes focus being lost when closing the new link picker user interface when inserting via shortcut or toolbar. Focus instead now returns to the editor.
+- [`f451c36becf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f451c36becf) - Fixed reconciliation issue causing emoji picker in floating-toolbar to re-mount on parent component update
+- [`e4089f2c471`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4089f2c471) - Modified toolbar buttons to read out keyboard shortcuts by screen readers.
+- [`968ac659016`](https://bitbucket.org/atlassian/atlassian-frontend/commits/968ac659016) - [ux] ED-16274 fixed typeahead query line height issue
+- [`53b8ef2ab95`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53b8ef2ab95) - Updates link picker feature flag to be the only logic to determine if the new link picker UI should be used.
+- [`e3c011d1c03`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3c011d1c03) - [ux] Fixed issue where z-index of stickyToolbar was way to high, which meant popups were under the toolbar instead of over it
+- [`60068f7fcbe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60068f7fcbe) - [ED-16007] Changes made to improve the floating toolbar's keyboard accessibility
+- Updated dependencies
+
 ## 176.0.3
 
 ### Patch Changes

package/dist/cjs/create-editor/ReactEditorView.js

@@ -36,6 +36,8 @@ var _prosemirrorView = require("prosemirror-view");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _messages = require("./messages");
+
 var _utils = require("@atlaskit/editor-common/utils");
 
 var _ufo = require("@atlaskit/editor-common/ufo");
@@ -664,7 +666,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       className: getUAPrefix(),
       key: "ProseMirror",
       ref: _this.handleEditorViewRef,
-      "aria-label": "Main content area",
+      "aria-label": _this.props.intl.formatMessage(_messages.editorMessages.editorAssistiveLabel),
       role: "textbox"
     }));
     _this.eventDispatcher = new _eventDispatcher.EventDispatcher();

package/dist/cjs/create-editor/create-plugins-list.js

@@ -98,7 +98,6 @@ function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEvent) {
     },
     placeholder: {
       placeholder: props.placeholder,
-      placeholderHints: props.placeholderHints,
       placeholderBracketHint: props.placeholderBracketHint
     },
     textFormatting: _objectSpread(_objectSpread({}, props.textFormatting || {}), {}, {
@@ -176,7 +175,11 @@ function createPluginsList(props, prevProps, createAnalyticsEvent, insertNodeAPI
   } // Needs to be after allowTextColor as order of buttons in toolbar depends on it
 
 
-  preset.add(_plugins.listPlugin);
+  preset.add([_plugins.listPlugin, {
+    restartNumberedLists: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.restartNumberedLists,
+    restartNumberedListsToolbar: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.restartNumberedListsToolbar,
+    listNumberContinuity: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.listNumberContinuity
+  }]);
 
   if (props.allowRule) {
     preset.add(_plugins.rulePlugin);
@@ -263,10 +266,10 @@ function createPluginsList(props, prevProps, createAnalyticsEvent, insertNodeAPI
   }
 
   if (props.allowHelpDialog) {
-    preset.add([_plugins.helpDialogPlugin, props.legacyImageUploadProvider]);
+    preset.add([_plugins.helpDialogPlugin, !!props.legacyImageUploadProvider]);
   }
 
-  if (props.saveOnEnter) {
+  if (props.saveOnEnter && props.onSave) {
     preset.add([_plugins.saveOnEnterPlugin, props.onSave]);
   }
 
@@ -334,7 +337,7 @@ function createPluginsList(props, prevProps, createAnalyticsEvent, insertNodeAPI
 
 
   if (!props.annotationProviders && props.allowConfluenceInlineComment) {
-    preset.add(_plugins.annotationPlugin);
+    preset.add([_plugins.annotationPlugin, undefined]);
   }
 
   if (props.allowDate) {
@@ -449,7 +452,7 @@ function createPluginsList(props, prevProps, createAnalyticsEvent, insertNodeAPI
   }
 
   if (featureFlags.enableViewUpdateSubscription) {
-    preset.add([_plugins.viewUpdateSubscriptionPlugin]);
+    preset.add(_plugins.viewUpdateSubscriptionPlugin);
   }
 
   preset.add([_plugins.codeBidiWarningPlugin, {

package/dist/cjs/create-editor/messages.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editorMessages = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var editorMessages = (0, _reactIntlNext.defineMessages)({
+  editorAssistiveLabel: {
+    id: 'fabric.editor.editorAssistiveLabel',
+    defaultMessage: 'Main content area, start typing to enter text.',
+    description: 'Text that is read out by screen reader when the main editor is in focus'
+  }
+});
+exports.editorMessages = editorMessages;

package/dist/cjs/i18n/en.js

@@ -107,8 +107,8 @@ var _default = {
   'fabric.editor.error': 'Error',
   'fabric.editor.errorPanel': 'Error panel',
   'fabric.editor.errorPanel.description': 'Call out errors in a colored panel',
-  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Removing this extension will break anything connected to it.',
-  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': 'Remove extension',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
+  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': 'Delete',
   'fabric.editor.extensions.config-panel.save-indicator': 'All changes are always autosaved',
   'fabric.editor.find': 'Find',
   'fabric.editor.findNext': 'Find next',

package/dist/cjs/i18n/en_GB.js

@@ -107,8 +107,8 @@ var _default = {
   'fabric.editor.error': 'Error',
   'fabric.editor.errorPanel': 'Error panel',
   'fabric.editor.errorPanel.description': 'Call out errors in a coloured panel',
-  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Removing this extension will break anything connected to it.',
-  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': 'Remove extension',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
+  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': 'Delete',
   'fabric.editor.extensions.config-panel.save-indicator': 'All changes are always autosaved',
   'fabric.editor.find': 'Find',
   'fabric.editor.findNext': 'Find next',

package/dist/cjs/i18n/en_ZZ.js

@@ -107,8 +107,8 @@ var _default = {
   'fabric.editor.error': '⁣⁢Error؜‌⁡‌؜⁡‌⁣⁤',
   'fabric.editor.errorPanel': '⁣⁢Error panel⁠‍؜⁠⁠؜‍⁠⁠⁡⁣⁤',
   'fabric.editor.errorPanel.description': '⁣⁢Call out errors in a colored panel⁡⁠؜⁡‍‌‍؜‍⁣⁤',
-  'fabric.editor.extension.confirmDeleteLinkedModalMessage': '⁣⁢Removing this extension will break anything connected to it.⁠؜⁡‌‌‍‌⁡⁠⁡⁡⁡⁡⁣⁤',
-  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': '⁣⁢Remove extension⁡‍‌‍⁠‌‍‍⁠⁠⁣⁤',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.⁠؜⁡‌‌‍‌⁡⁠⁡⁡⁡⁡⁣⁤',
+  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': '⁣Delete⁡⁤',
   'fabric.editor.extensions.config-panel.save-indicator': '⁣⁢All changes are always autosaved⁠‍؜‌‌‍‍⁡‌‌‍‌‌⁣⁤',
   'fabric.editor.find': '⁣⁢Find⁠‌⁠‌⁠‍؜⁣⁤',
   'fabric.editor.findNext': '⁣⁢Find next؜‌؜‌؜⁠⁣⁤',

package/dist/cjs/i18n/index.js

@@ -188,6 +188,10 @@ var _cs = _interopRequireDefault(require("./cs"));
 
 var _da = _interopRequireDefault(require("./da"));
 
+var _en = _interopRequireDefault(require("./en"));
+
+var _en_GB = _interopRequireDefault(require("./en_GB"));
+
 var _nl = _interopRequireDefault(require("./nl"));
 
 var _et = _interopRequireDefault(require("./et"));
@@ -230,10 +234,6 @@ var _uk = _interopRequireDefault(require("./uk"));
 
 var _vi = _interopRequireDefault(require("./vi"));
 
-var _en = _interopRequireDefault(require("./en"));
-
-var _en_GB = _interopRequireDefault(require("./en_GB"));
-
 var _is = _interopRequireDefault(require("./is"));
 
 var _ro = _interopRequireDefault(require("./ro"));

package/dist/cjs/i18n/languages.js

@@ -8,14 +8,15 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
- * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
  */
 var _default = {
   zh: 'Chinese',
+  zh_TW: 'Chinese (Traditional)',
   cs: 'Czech',
-  da: 'Danish',
   nl: 'Dutch',
+  da: 'Danish',
   en: 'English',
   en_GB: 'English (United Kingdom)',
   et: 'Estonian',
@@ -35,6 +36,10 @@ var _default = {
   ru: 'Russian',
   sk: 'Slovak',
   es: 'Spanish',
-  sv: 'Swedish'
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
 };
 exports.default = _default;

package/dist/cjs/labs/next/full-page.js

@@ -21,8 +21,6 @@ var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _ui = require("@atlaskit/editor-common/ui");
@@ -65,8 +63,8 @@ var editorContentArea = function editorContentArea(theme) {
   return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), theme.layoutMaxWidth + GUTTER_PADDING * 2, _commonStyles.tableFullPageEditorStyles);
 };
 
-var mainToolbar = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n"])), _editorSharedStyles.akEditorMenuZIndex, (0, _tokens.token)('elevation.surface', 'white'));
-var mainToolbarWithKeyline = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, _editorSharedStyles.akEditorToolbarKeylineHeight, (0, _tokens.token)('color.border', _colors.N30));
+var mainToolbar = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n"])), _editorSharedStyles.akEditorMenuZIndex, "var(--ds-surface, white)");
+var mainToolbarWithKeyline = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(_colors.N30, ")"));
 var mainToolbarCustomComponentsSlot = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
 var sidebarArea = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
 

package/dist/cjs/labs/next/presets/mobile.js

@@ -122,8 +122,8 @@ function useMobilePreset(_ref) {
     allowBlockCards: true,
     platform: 'mobile'
   }]);
-  preset.add([_mentions.default]);
-  preset.add([_emoji.default]); // End
+  preset.add(_mentions.default);
+  preset.add(_emoji.default); // End
 
   if (maxContentSize) {
     preset.add([_maxContentSize.default, maxContentSize]);

package/dist/cjs/labs/next/presets/preset.js

@@ -9,6 +9,10 @@ exports.Preset = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _construct2 = _interopRequireDefault(require("@babel/runtime/helpers/construct"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -16,19 +20,40 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var Preset = /*#__PURE__*/function () {
   function Preset() {
     (0, _classCallCheck2.default)(this, Preset);
-    this.plugins = [];
+
+    for (var _len = arguments.length, more = new Array(_len), _key = 0; _key < _len; _key++) {
+      more[_key] = arguments[_key];
+    }
+
+    this.data = [].concat(more) || [];
   }
 
   (0, _createClass2.default)(Preset, [{
     key: "add",
-    value: function add(plugin) {
-      this.plugins.push(plugin);
-      return this;
+    value: function add(nextOrTuple) {
+      var newPreset = (0, _construct2.default)(Preset, [nextOrTuple].concat((0, _toConsumableArray2.default)(this.data))); // TODO: remove this `this.data.push`,
+      // once refactoring `create-plugins-list` to address this complexity:
+
+      /**
+       * preset.add(x)
+       * preset.add(y)
+       * preset.add(z)
+       */
+      // to:
+
+      /**
+       * immutablePreset = preset.add(x).add(foo).add(bar)
+       * presetWithY = presetWithY.add(y)
+       * presetWithZ = preset.add(z)
+       */
+
+      this.data.push(nextOrTuple);
+      return newPreset;
     }
   }, {
     key: "has",
     value: function has(plugin) {
-      return this.plugins.some(function (pluginPreset) {
+      return this.data.some(function (pluginPreset) {
         if (Array.isArray(pluginPreset)) {
           return pluginPreset[0] === plugin;
         }
@@ -46,7 +71,7 @@ var Preset = /*#__PURE__*/function () {
     key: "processEditorPlugins",
     value: function processEditorPlugins() {
       var cache = new Map();
-      this.plugins.forEach(function (pluginEntry) {
+      this.data.forEach(function (pluginEntry) {
         if (Array.isArray(pluginEntry)) {
           var _pluginEntry = (0, _slicedToArray2.default)(pluginEntry, 2),
               fn = _pluginEntry[0],
@@ -73,6 +98,13 @@ var Preset = /*#__PURE__*/function () {
       cache.forEach(function (options, fn) {
         plugins.push(fn(options));
       });
+
+      if (plugins.some(function (plugin) {
+        return typeof plugin === 'function';
+      })) {
+        throw new Error("!!! NextEditorPluginWithDependencies detected in presets. That's an unsupported runtime use case right now.");
+      }
+
       return plugins;
     }
   }, {

package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/styles.js

@@ -13,13 +13,11 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var triggerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 exports.triggerWrapper = triggerWrapper;
-var separator = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), (0, _tokens.token)('color.border', _colors.N30));
+var separator = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), "var(--ds-border, ".concat(_colors.N30, ")"));
 exports.separator = separator;
 var wrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
 exports.wrapper = wrapper;

package/dist/cjs/plugins/annotation/nodeviews/index.js

@@ -58,6 +58,7 @@ var AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
         /*#__PURE__*/
         // all inline comment states are now set in decorations at ../pm-plugins/inline-comment.ts
         _react.default.createElement("span", {
+          "data-mark-type": "annotation",
           ref: forwardRef
         })
       );

package/dist/cjs/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -43,6 +43,8 @@ var _keymaps = require("../../../../keymaps");
 
 var _blocktypeButton = require("./blocktype-button");
 
+var _keymaps2 = require("@atlaskit/editor-common/keymaps");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -84,16 +86,19 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         var isActive = currentBlockType === blockType;
         var tagName = blockType.tagName || 'p';
         var Tag = tagName;
+        var keyMap = (0, _keymaps.findKeymapByDescription)(blockType.title.defaultMessage);
         return {
           content: (0, _react2.jsx)("div", {
             css: (0, _styled.blockTypeMenuItemStyle)(tagName, isActive)
           }, (0, _react2.jsx)(Tag, null, formatMessage(blockType.title))),
           value: blockType,
           label: formatMessage(blockType.title),
+          'aria-label': (0, _keymaps.tooltip)(keyMap, formatMessage(blockType.title)),
+          keyShortcuts: (0, _keymaps2.getAriaKeyshortcuts)(keyMap),
           key: "".concat(blockType.name, "-").concat(index),
           elemAfter: (0, _react2.jsx)("div", {
             css: [_styled.keyboardShortcut, isActive && _styled.keyboardShortcutSelect]
-          }, (0, _keymaps.tooltip)((0, _keymaps.findKeymapByDescription)(blockType.title.defaultMessage))),
+          }, (0, _keymaps.tooltip)(keyMap)),
           isActive: isActive
         };
       });

package/dist/cjs/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -17,13 +17,11 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _styles2 = require("../../../../ui/styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected) {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  var selectedStyle = selected ? "".concat(tagName, " { color: ").concat((0, _tokens.token)('color.text', 'white'), " !important; }") : '';
+  var selectedStyle = selected ? "".concat(tagName, " { color: ", "var(--ds-text, white)", " !important; }") : '';
   return function (themeProps) {
     return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), (0, _styles.headingsSharedStyles)(themeProps), selectedStyle);
   };
@@ -32,5 +30,5 @@ var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected)
 exports.blockTypeMenuItemStyle = blockTypeMenuItemStyle;
 var keyboardShortcut = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin-left: 16px;\n"])), _styles2.shortcutStyle);
 exports.keyboardShortcut = keyboardShortcut;
-var keyboardShortcutSelect = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.icon', _colors.N400));
+var keyboardShortcutSelect = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-icon, ".concat(_colors.N400, ")"));
 exports.keyboardShortcutSelect = keyboardShortcutSelect;

package/dist/cjs/plugins/breakout/ui/LayoutButton.js

@@ -59,7 +59,7 @@ var _prosemirrorState = require("prosemirror-state");
 
 var _isSupportedNode = require("../utils/is-supported-node");
 
-var _tokens = require("@atlaskit/tokens");
+var _constants2 = require("@atlaskit/theme/constants");
 
 var _templateObject;
 
@@ -67,7 +67,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20A), (0, _tokens.token)('color.icon', _colors.N300), (0, _tokens.token)('color.background.neutral.hovered', _colors.B300), (0, _tokens.token)('color.icon', 'white'));
+var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)");
 var BREAKOUT_MODE = {
   FULL_WIDTH: 'full-width',
   CENTER: 'center',
@@ -156,6 +156,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
       var titleMessage = getTitle(breakoutMode);
       var title = formatMessage(titleMessage);
       var nextBreakoutMode = getNextBreakoutMode(breakoutMode);
+      var belowOtherPopupsZIndex = _constants2.layers.layer() - 1;
       var pluginState = (0, _pluginKey.getPluginState)(state);
       var element = getBreakoutNodeElement(pluginState, state.selection, editorView);
 
@@ -179,7 +180,8 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         stick: true,
-        forcePlacement: true
+        forcePlacement: true,
+        zIndex: belowOtherPopupsZIndex
       }, (0, _react2.jsx)("div", {
         css: toolbarButtonWrapper
       }, (0, _react2.jsx)(_ToolbarButton.default, {