@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/cjs/ui/ToolbarFeedback/styles.js

@@ -15,8 +15,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -25,11 +23,11 @@ var buttonContent = (0, _react.css)(_templateObject || (_templateObject = (0, _t
 exports.buttonContent = buttonContent;
 var wrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 0;\n"])));
 exports.wrapper = wrapper;
-var confirmationPopup = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), (0, _tokens.token)('elevation.surface.overlay', '#fff'), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A)));
+var confirmationPopup = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), "var(--ds-surface-overlay, #fff)", (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"));
 exports.confirmationPopup = confirmationPopup;
-var confirmationText = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), (0, _tokens.token)('color.text.subtle', _colors.N400));
+var confirmationText = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-text-subtle, ".concat(_colors.N400, ")"));
 exports.confirmationText = confirmationText;
-var confirmationHeader = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), (0, _tokens.token)('color.background.discovery.bold', _colors.P400));
+var confirmationHeader = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), "var(--ds-background-discovery-bold, ".concat(_colors.P400, ")"));
 exports.confirmationHeader = confirmationHeader;
 var confirmationImg = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));
 exports.confirmationImg = confirmationImg;

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

@@ -29,16 +29,14 @@ var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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; } }
 
-var pulseBackground = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  50% {\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.blanket.danger', _colors.R100));
-var pulseBackgroundReverse = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.blanket.danger', _colors.R100), (0, _tokens.token)('color.blanket.danger', _colors.R100));
+var pulseBackground = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  50% {\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, ".concat(_colors.R100, ")"));
+var pulseBackgroundReverse = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, ".concat(_colors.R100, ")"), "var(--ds-blanket-danger, ".concat(_colors.R100, ")"));
 var flashWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: 'none';\n  }\n"])), pulseBackgroundReverse);
 var flashWrapperAnimated = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  & > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n"])), flashWrapper, pulseBackground);
 

package/dist/cjs/ui/styles.js

@@ -27,8 +27,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
@@ -37,7 +35,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 var buttonGroupStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
 exports.buttonGroupStyle = buttonGroupStyle;
-var separatorStyles = (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 separatorStyles = (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.separatorStyles = separatorStyles;
 var wrapperStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n\n  margin-left: 0;\n  min-width: auto;\n"])));
 exports.wrapperStyle = wrapperStyle;
@@ -52,7 +50,7 @@ exports.buttonContentStyle = buttonContentStyle;
 var buttonContentReducedSpacingStyle = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n"]))); // Taken from the style of inline dialog components
 
 exports.buttonContentReducedSpacingStyle = buttonContentReducedSpacingStyle;
-var dropShadow = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: ", ";\n"])), (0, _tokens.token)('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)"));
+var dropShadow = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: ", ";\n"])), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"));
 exports.dropShadow = dropShadow;
 var clickSelectWrapperStyle = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: all;\n"])));
 exports.clickSelectWrapperStyle = clickSelectWrapperStyle;

package/dist/cjs/utils/commands.js

@@ -142,12 +142,27 @@ var applyMarkOnRange = function applyMarkOnRange(from, to, removeMark, mark, tr)
 
 exports.applyMarkOnRange = applyMarkOnRange;
 
+var entireSelectionContainsMark = function entireSelectionContainsMark(mark, doc, fromPos, toPos) {
+  var onlyContainsMark = true;
+  doc.nodesBetween(fromPos, toPos, function (node) {
+    // Skip recursion once we've found text which doesn't include the mark
+    if (!onlyContainsMark) {
+      return false;
+    }
+
+    if (node.isText) {
+      onlyContainsMark && (onlyContainsMark = mark.isInSet(node.marks));
+    }
+  });
+  return onlyContainsMark;
+};
+
 var toggleMarkInRange = function toggleMarkInRange(mark) {
   return function (state, dispatch) {
     var tr = state.tr;
 
     if (state.selection instanceof _cellSelection.CellSelection) {
-      var markInRange = false;
+      var removeMark = true;
       var cells = [];
       state.selection.forEachCell(function (cell, cellPos) {
         cells.push({
@@ -156,30 +171,27 @@ var toggleMarkInRange = function toggleMarkInRange(mark) {
         });
         var from = cellPos;
         var to = cellPos + cell.nodeSize;
-
-        if (!markInRange) {
-          markInRange = state.doc.rangeHasMark(from, to, mark);
-        }
+        removeMark && (removeMark = entireSelectionContainsMark(mark, state.doc, from, to));
       });
 
       for (var i = cells.length - 1; i >= 0; i--) {
         var cell = cells[i];
         var from = cell.pos;
         var to = from + cell.node.nodeSize;
-        applyMarkOnRange(from, to, markInRange, mark, tr);
+        applyMarkOnRange(from, to, removeMark, mark, tr);
       }
     } else {
       var _state$selection3 = state.selection,
           $from = _state$selection3.$from,
-          $to = _state$selection3.$to; // The type for `rangeHasMark` only accepts a `MarkType` as a third param,
-      // Yet the internals use a method that exists on both MarkType and Mark (one checks attributes the other doesnt)
-      // For example, with our subsup mark: We use the same mark with different attributes to convert
-      // different formatting but when using `MarkType.isInSet(marks)` it returns true for both.
-      // Calling `Mark.isInSet(marks)` compares attributes as well.
+          $to = _state$selection3.$to; // We decide to remove the mark only if the entire selection contains the mark
+      // Examples with *bold* text
+      // Scenario 1: Selection contains both bold and non-bold text -> bold entire selection
+      // Scenario 2: Selection contains only bold text -> un-bold entire selection
+      // Scenario 3: Selection contains no bold text -> bold entire selection
 
-      var _markInRange = state.doc.rangeHasMark($from.pos, $to.pos, mark);
+      var _removeMark = entireSelectionContainsMark(mark, state.doc, $from.pos, $to.pos);
 
-      applyMarkOnRange($from.pos, $to.pos, _markInRange, mark, tr);
+      applyMarkOnRange($from.pos, $to.pos, _removeMark, mark, tr);
     }
 
     if (tr.docChanged) {

package/dist/cjs/utils/input-rules.js

@@ -9,8 +9,6 @@ exports.ruleWithTransform = exports.ruleWithAnalytics = exports.createWrappingTe
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _prosemirrorHistory = require("prosemirror-history");
-
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorTransform = require("prosemirror-transform");
@@ -21,6 +19,12 @@ var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
 
 var _analytics = require("../plugins/analytics");
 
+var _prosemirrorHistory = require("prosemirror-history");
+
+var _prosemirrorUtils = require("prosemirror-utils");
+
+var _featureFlagsContext = require("../plugins/feature-flags-context");
+
 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; }
@@ -158,6 +162,26 @@ var createWrappingJoinRule = function createWrappingJoinRule(_ref3) {
     }
 
     tr.wrap(range, wrapping);
+    var featureFlags = (0, _featureFlagsContext.getFeatureFlags)(state);
+
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists && nodeType === state.schema.nodes.orderedList) {
+      // if an orderedList node would be inserted by the input rule match, and
+      // that orderedList node is being added directly before another orderedList
+      // node, then join those nodes
+      var $end = tr.doc.resolve(tr.mapping.map(end));
+
+      var _node = (0, _prosemirrorUtils.findParentNodeOfTypeClosestToPos)($end, nodeType);
+
+      if (_node) {
+        var nodeEnd = _node.pos + _node.node.nodeSize;
+        var after = tr.doc.resolve(nodeEnd).nodeAfter;
+
+        if (after && after.type === nodeType && (0, _prosemirrorTransform.canJoin)(tr.doc, nodeEnd) && (!joinPredicate || joinPredicate(match, after))) {
+          tr.join(nodeEnd);
+        }
+      }
+    }
+
     var before = tr.doc.resolve(fixedStart - 1).nodeBefore;
 
     if (before && before.type === nodeType && (0, _prosemirrorTransform.canJoin)(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before))) {

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "176.0.3";
+var version = "177.0.1";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "176.0.3",
+	"version": "177.0.1",
 	"sideEffects": false
 }

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { EditorState, Selection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { injectIntl } from 'react-intl-next';
+import { editorMessages } from './messages';
 import { browser, getAnalyticsEventSeverity, getResponseEndTime, measureRender, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common/utils';
 import { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
@@ -586,7 +587,7 @@ export class ReactEditorView extends React.Component {
       className: getUAPrefix(),
       key: "ProseMirror",
       ref: this.handleEditorViewRef,
-      "aria-label": "Main content area",
+      "aria-label": this.props.intl.formatMessage(editorMessages.editorAssistiveLabel),
       role: "textbox"
     }));
 

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

@@ -69,7 +69,6 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     },
     placeholder: {
       placeholder: props.placeholder,
-      placeholderHints: props.placeholderHints,
       placeholderBracketHint: props.placeholderBracketHint
     },
     textFormatting: { ...(props.textFormatting || {}),
@@ -146,7 +145,11 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   } // Needs to be after allowTextColor as order of buttons in toolbar depends on it
 
 
-  preset.add(listPlugin);
+  preset.add([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(rulePlugin);
@@ -233,10 +236,10 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   }
 
   if (props.allowHelpDialog) {
-    preset.add([helpDialogPlugin, props.legacyImageUploadProvider]);
+    preset.add([helpDialogPlugin, !!props.legacyImageUploadProvider]);
   }
 
-  if (props.saveOnEnter) {
+  if (props.saveOnEnter && props.onSave) {
     preset.add([saveOnEnterPlugin, props.onSave]);
   }
 
@@ -306,7 +309,7 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
 
 
   if (!props.annotationProviders && props.allowConfluenceInlineComment) {
-    preset.add(annotationPlugin);
+    preset.add([annotationPlugin, undefined]);
   }
 
   if (props.allowDate) {
@@ -423,7 +426,7 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   }
 
   if (featureFlags.enableViewUpdateSubscription) {
-    preset.add([viewUpdateSubscriptionPlugin]);
+    preset.add(viewUpdateSubscriptionPlugin);
   }
 
   preset.add([codeBidiWarningPlugin, {

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const editorMessages = 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'
+  }
+});

package/dist/es2019/i18n/en.js

@@ -100,8 +100,8 @@ export 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/es2019/i18n/en_GB.js

@@ -100,8 +100,8 @@ export 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/es2019/i18n/en_ZZ.js

@@ -100,8 +100,8 @@ export 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/es2019/i18n/index.js

@@ -1,13 +1,15 @@
 /**
  * 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
  */
 export { default as zh } from './zh';
 export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
 export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
@@ -29,7 +31,5 @@ export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
 export { default as is } from './is';
 export { default as ro } from './ro';

package/dist/es2019/i18n/languages.js

@@ -1,14 +1,15 @@
 /**
  * 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
  */
 export default {
   zh: 'Chinese',
+  zh_TW: 'Chinese (Traditional)',
   cs: 'Czech',
-  da: 'Danish',
   nl: 'Dutch',
+  da: 'Danish',
   en: 'English',
   en_GB: 'English (United Kingdom)',
   et: 'Estonian',
@@ -28,5 +29,9 @@ export default {
   ru: 'Russian',
   sk: 'Slovak',
   es: 'Spanish',
-  sv: 'Swedish'
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
 };

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

@@ -5,7 +5,6 @@ import rafSchedule from 'raf-schd';
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaseTheme } from '@atlaskit/editor-common/ui';
 import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
@@ -93,7 +92,7 @@ const mainToolbar = css`
   display: flex;
   height: 80px;
   flex-shrink: 0;
-  background-color: ${token('elevation.surface', 'white')};
+  background-color: ${"var(--ds-surface, white)"};
 
   & object {
     height: 0 !important;
@@ -101,7 +100,7 @@ const mainToolbar = css`
 `;
 const mainToolbarWithKeyline = css`
   ${mainToolbar}
-  box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${token('color.border', N30)}
+  box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${`var(--ds-border, ${N30})`}
 `;
 const mainToolbarCustomComponentsSlot = css`
   display: flex;

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

@@ -79,8 +79,8 @@ export function useMobilePreset({
     allowBlockCards: true,
     platform: 'mobile'
   }]);
-  preset.add([mentionsPlugin]);
-  preset.add([emojiPlugin]); // End
+  preset.add(mentionsPlugin);
+  preset.add(emojiPlugin); // End
 
   if (maxContentSize) {
     preset.add([maxContentSizePlugin, maxContentSize]);

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

@@ -1,15 +1,31 @@
 export class Preset {
-  constructor() {
-    this.plugins = [];
+  constructor(...more) {
+    this.data = [...more] || [];
   }
 
-  add(plugin) {
-    this.plugins.push(plugin);
-    return this;
+  add(nextOrTuple) {
+    const newPreset = new Preset(nextOrTuple, ...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;
   }
 
   has(plugin) {
-    return this.plugins.some(pluginPreset => {
+    return this.data.some(pluginPreset => {
       if (Array.isArray(pluginPreset)) {
         return pluginPreset[0] === plugin;
       }
@@ -25,7 +41,7 @@ export class Preset {
 
   processEditorPlugins() {
     const cache = new Map();
-    this.plugins.forEach(pluginEntry => {
+    this.data.forEach(pluginEntry => {
       if (Array.isArray(pluginEntry)) {
         const [fn, options] = pluginEntry;
         cache.set(fn, options);
@@ -49,6 +65,11 @@ export class Preset {
     cache.forEach((options, fn) => {
       plugins.push(fn(options));
     });
+
+    if (plugins.some(plugin => typeof plugin === 'function')) {
+      throw new Error("!!! NextEditorPluginWithDependencies detected in presets. That's an unsupported runtime use case right now.");
+    }
+
     return plugins;
   }
 

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

@@ -1,11 +1,10 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const triggerWrapper = css`
   display: flex;
 `;
 export const separator = css`
-  background: ${token('color.border', N30)};
+  background: ${`var(--ds-border, ${N30})`};
   width: 1px;
   height: 24px;
   display: inline-block;

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

@@ -19,6 +19,7 @@ export class AnnotationNodeView extends ReactNodeView {
       /*#__PURE__*/
       // all inline comment states are now set in decorations at ../pm-plugins/inline-comment.ts
       React.createElement("span", {
+        "data-mark-type": "annotation",
         ref: forwardRef
       })
     );

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

@@ -11,6 +11,7 @@ import { NORMAL_TEXT } from '../../types';
 import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect } from './styled';
 import { tooltip, findKeymapByDescription } from '../../../../keymaps';
 import { BlockTypeButton } from './blocktype-button';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 class ToolbarBlockType extends React.PureComponent {
   constructor(...args) {
@@ -46,16 +47,19 @@ class ToolbarBlockType extends React.PureComponent {
         const isActive = currentBlockType === blockType;
         const tagName = blockType.tagName || 'p';
         const Tag = tagName;
+        const keyMap = findKeymapByDescription(blockType.title.defaultMessage);
         return {
           content: jsx("div", {
             css: blockTypeMenuItemStyle(tagName, isActive)
           }, jsx(Tag, null, formatMessage(blockType.title))),
           value: blockType,
           label: formatMessage(blockType.title),
+          'aria-label': tooltip(keyMap, formatMessage(blockType.title)),
+          keyShortcuts: getAriaKeyshortcuts(keyMap),
           key: `${blockType.name}-${index}`,
           elemAfter: jsx("div", {
             css: [keyboardShortcut, isActive && keyboardShortcutSelect]
-          }, tooltip(findKeymapByDescription(blockType.title.defaultMessage))),
+          }, tooltip(keyMap)),
           isActive
         };
       });

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

@@ -3,10 +3,9 @@ import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { shortcutStyle } from '../../../../ui/styles';
-import { token } from '@atlaskit/tokens';
 export const blockTypeMenuItemStyle = (tagName, selected) => {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  const selectedStyle = selected ? `${tagName} { color: ${token('color.text', 'white')} !important; }` : '';
+  const selectedStyle = selected ? `${tagName} { color: ${"var(--ds-text, white)"} !important; }` : '';
   return themeProps => css`
     ${headingsSharedStyles(themeProps)};
     > {
@@ -27,5 +26,5 @@ export const keyboardShortcut = css`
   margin-left: 16px;
 `;
 export const keyboardShortcutSelect = css`
-  color: ${token('color.icon', N400)};
+  color: ${`var(--ds-icon, ${N400})`};
 `;

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

@@ -19,14 +19,14 @@ import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
-import { token } from '@atlaskit/tokens';
+import { layers } from '@atlaskit/theme/constants';
 const toolbarButtonWrapper = css`
   && button {
-    background: ${token('color.background.neutral', N20A)};
-    color: ${token('color.icon', N300)};
+    background: ${`var(--ds-background-neutral, ${N20A})`};
+    color: ${`var(--ds-icon, ${N300})`};
     :hover {
-      background: ${token('color.background.neutral.hovered', B300)};
-      color: ${token('color.icon', 'white')} !important;
+      background: ${`var(--ds-background-neutral-hovered, ${B300})`};
+      color: ${"var(--ds-icon, white)"} !important;
     }
   }
 `;
@@ -108,6 +108,7 @@ class LayoutButton extends React.Component {
     const titleMessage = getTitle(breakoutMode);
     const title = formatMessage(titleMessage);
     const nextBreakoutMode = getNextBreakoutMode(breakoutMode);
+    const belowOtherPopupsZIndex = layers.layer() - 1;
     let pluginState = getPluginState(state);
     let element = getBreakoutNodeElement(pluginState, state.selection, editorView);
 
@@ -131,7 +132,8 @@ class LayoutButton extends React.Component {
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       stick: true,
-      forcePlacement: true
+      forcePlacement: true,
+      zIndex: belowOtherPopupsZIndex
     }, jsx("div", {
       css: toolbarButtonWrapper
     }, jsx(ToolbarButton, {