@atlaskit/editor-common 60.2.0 → 62.0.0

package/dist/esm/styles/shared/panel.js

@@ -1,9 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject;
 
 import { css } from 'styled-components';
-import { hexToRgba, PanelType } from '@atlaskit/adf-schema';
+import { PanelType } from '@atlaskit/adf-schema';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
@@ -18,22 +19,67 @@ var lightPanelColor = {
   warning: colors.Y50,
   error: colors.R50
 };
-var darkPanelOpacity = 0.64;
-var darkPanelColor = {
-  info: colors.B500,
-  note: colors.P500,
-  tip: colors.G500,
-  success: colors.G500,
-  warning: colors.Y500,
-  error: colors.R500
-};
-var darkPanelBorderColor = {
-  info: colors.B400,
-  note: colors.P400,
-  tip: colors.G400,
-  success: colors.G400,
-  warning: colors.Y400,
-  error: colors.R400
+var darkPanelColors = {
+  // standard panels
+  info: '#0C294F',
+  error: "#441C13",
+  warning: "#413001",
+  tip: "#052E21",
+  success: "#052E21",
+  note: "#282249",
+  // Reds
+  R900: '#601D16',
+  // Red Saturated
+  R100S: "#FFEFEB",
+  R300S: "#FFB5A3",
+  R500S: "#FF6B47",
+  R800S: "#C4320E",
+  R1200S: "#441C13",
+  // Yellows
+  Y900: '#533F04',
+  // Yellow Saturated
+  Y100S: "#FFF3D1",
+  Y300S: "#FFDC7A",
+  Y500S: "#FFC933",
+  Y800S: "#D8A003",
+  Y1200S: "#413001",
+  // Greens
+  G900: '#164B35',
+  // Green Saturated
+  G100S: "#E3FCF0",
+  G300S: "#95EEC5",
+  G400S: "#60DCA8",
+  G900S: "#086848",
+  G1200S: "#052E21",
+  // Blues
+  B900: '#09326C',
+  // Saturated Blues
+  B100S: '#E5F0FF',
+  B300S: '#A3C9FF',
+  B500S: '#4794FF',
+  B800S: '#0055CC',
+  B1200S: '#0C294F',
+  // Purples
+  P900: "#352C63",
+  // Purple Saturated
+  P100S: "#EEEBFF",
+  P300S: "#CCC3FE",
+  P500S: "#A292F7",
+  P800S: "#5E49CA",
+  P1200S: "#282249",
+  // Teals
+  T900: '#1D474C',
+  // Teal Saturated
+  T100S: "#DBFAFF",
+  T300S: "#78EBFC",
+  T400S: "#3AD6EE",
+  T900S: "#056270",
+  T1200S: "#0B3037",
+  // Dark Mode Alpha
+  DNA20A: 'rgba(150, 176, 210, 0.53)',
+  DNA40A: 'rgba(134, 156, 180, 0.29)',
+  DNA80A: '#161A1D',
+  TextColor: '#D9DDE3'
 };
 var lightIconColor = {
   info: colors.B400,
@@ -50,16 +96,21 @@ var darkIconColor = {
   success: colors.G200,
   warning: colors.Y100,
   error: colors.R200
-};
-var darkTextColor = {
-  info: colors.B75,
-  note: colors.P75,
-  tip: colors.G75,
-  success: colors.G75,
-  warning: colors.Y75,
-  error: colors.R75
-};
-var verticalAlignment = -((gridSize() * 3 - akEditorCustomIconSize) / 2);
+}; // New custom icons are a little smaller than predefined icons.
+// To fix alignment issues with custom icons, vertical alignment is updated.
+
+var panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
+var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+export var getPanelBackgroundDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.DNA80A], [colors.N20, darkPanelColors.DNA40A], [colors.N60, darkPanelColors.DNA20A], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]].map(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+      colorName = _ref2[0],
+      colorValue = _ref2[1];
+
+  return getPanelDarkModeCSS(colorName, colorValue);
+}).join('\n');
+export function getPanelDarkModeCSS(colorName, colorValue) {
+  return "\n  &[data-panel-color=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n    color: ").concat(darkPanelColors.TextColor, ";\n  }\n  ");
+}
 var prefix = 'ak-editor-panel';
 export var PanelSharedCssClassName = {
   prefix: prefix,
@@ -97,7 +148,7 @@ var iconDynamicStyles = function iconDynamicStyles(panelType) {
 export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var light = lightPanelColor[panelType];
-  var dark = hexToRgba(darkPanelColor[panelType], darkPanelOpacity);
+  var dark = darkPanelColors[panelType];
   var background = themed({
     light: light,
     dark: dark
@@ -108,18 +159,14 @@ export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
 var mainDynamicStyles = function mainDynamicStyles(panelType) {
   return function (props) {
     var background = getPanelTypeBackground(panelType, props);
-    var darkText = darkTextColor[panelType];
-    var darkBorder = '1px solid ' + darkPanelBorderColor[panelType];
-    var border = themed({
-      light: 'none',
-      dark: darkBorder
-    })(props);
     var text = themed({
       light: 'inherit',
-      dark: darkText
+      dark: darkPanelColors.TextColor
     })(props);
-    return "\n    background-color: ".concat(background, ";\n    border: ").concat(border, ";\n    color: ").concat(text, ";\n  ");
+    return "\n    background-color: ".concat(background, ";\n    color: ").concat(text, ";\n  ");
   };
 };
 
-export var panelSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", "px;\n    margin: ", " 0 0;\n    padding: ", "px;\n    min-width: ", "px;\n    display: flex;\n    position: relative;\n    align-items: baseline;\n    word-break: break-word;\n\n    ", "\n\n    .", " {\n      flex-shrink: 0;\n      height: ", "px;\n      width: ", "px;\n      box-sizing: content-box;\n      padding-right: ", "px;\n      text-align: center;\n      user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      ", "\n\n      > span {\n        vertical-align: middle;\n        display: inline;\n      }\n\n      .", ", .", " {\n        vertical-align: ", "px;\n      }\n    }\n\n    .ak-editor-panel__content {\n      margin: 1px 0 1px;\n      flex: 1 0 0;\n      /*\n        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n      */\n      min-width: 0;\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n  }\n"])), PanelSharedCssClassName.prefix, borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO), emojiSprite, emojiImage, verticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
+export var panelSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", "px;\n    margin: ", " 0 0;\n    padding: ", "px;\n    min-width: ", "px;\n    display: flex;\n    position: relative;\n    align-items: baseline;\n    word-break: break-word;\n\n    ", "\n\n    .", " {\n      flex-shrink: 0;\n      height: ", "px;\n      width: ", "px;\n      box-sizing: content-box;\n      padding-right: ", "px;\n      text-align: center;\n      user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      ", "\n\n      > span {\n        vertical-align: middle;\n        display: inline;\n      }\n\n      .", " {\n        vertical-align: ", "px;\n      }\n\n      .", " {\n        vertical-align: ", "px;\n\n        // Vertical align only works for inline-block elements in Firefox\n        @-moz-document url-prefix() {\n          img {\n            display: inline-block;\n          }\n        }\n      }\n    }\n\n    .ak-editor-panel__content {\n      margin: 1px 0 1px;\n      flex: 1 0 0;\n      /*\n        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n      */\n      min-width: 0;\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", ";\n    }\n  }\n"])), PanelSharedCssClassName.prefix, borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS), PanelType.CUSTOM, themed({
+  dark: getPanelBackgroundDarkModeColors
+}));

package/dist/esm/styles/shared/table.js

@@ -29,7 +29,7 @@ export var TableSharedCssClassName = {
   TABLE_CELL_NODEVIEW_CONTENT_DOM: tableCellContentDomSelector,
   TABLE_CELL_WRAPPER: tableCellSelector
 };
-var tableSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-child > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n  }\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    margin: ", "px ", "px 0 0;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: white;\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, tableCellBorderWidth, themed({
+var tableSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-child > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    margin: ", "px ", "px 0 0;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: white;\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, tableCellBorderWidth, themed({
   light: akEditorTableBorder,
   dark: akEditorTableBorderDark
 }), tableCellMinWidth, themed({

package/dist/esm/ufo/experience-store.js

@@ -15,6 +15,7 @@ export var EditorExperience;
   EditorExperience["loadEditor"] = "load";
   EditorExperience["typing"] = "type";
   EditorExperience["interaction"] = "interact";
+  EditorExperience["editSession"] = "editSession";
 })(EditorExperience || (EditorExperience = {}));
 
 export var RELIABILITY_INTERVAL = 30000;
@@ -76,7 +77,7 @@ export var ExperienceStore = /*#__PURE__*/function () {
     value: function success(experienceId, metadata) {
       var _this$getActive;
 
-      (_this$getActive = this.getActive(experienceId)) === null || _this$getActive === void 0 ? void 0 : _this$getActive.success({
+      return (_this$getActive = this.getActive(experienceId)) === null || _this$getActive === void 0 ? void 0 : _this$getActive.success({
         metadata: metadata
       });
     }

package/dist/esm/ui/Caption/index.js

@@ -13,7 +13,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; } }
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';

package/dist/esm/ui/Caption/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
   placeholder: {
     id: 'fabric.editor.captionPlaceholder',

package/dist/esm/ui/Expand/index.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import styled, { css } from 'styled-components';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';

package/dist/esm/ui/IntlLegacyFallbackProvider/index.js

@@ -0,0 +1,45 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React from 'react';
+import { IntlProvider, intlShape } from 'react-intl';
+export var IntlLegacyFallbackProvider = /*#__PURE__*/function (_React$Component) {
+  _inherits(IntlLegacyFallbackProvider, _React$Component);
+
+  var _super = _createSuper(IntlLegacyFallbackProvider);
+
+  function IntlLegacyFallbackProvider() {
+    _classCallCheck(this, IntlLegacyFallbackProvider);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(IntlLegacyFallbackProvider, [{
+    key: "render",
+    value: function render() {
+      var oldIntl = this.context.intl;
+
+      if (!oldIntl) {
+        return /*#__PURE__*/React.createElement(IntlProvider, {
+          locale: "en"
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return IntlLegacyFallbackProvider;
+}(React.Component);
+
+_defineProperty(IntlLegacyFallbackProvider, "contextTypes", {
+  intl: intlShape
+});

package/dist/esm/ui/IntlNextErrorBoundary/index.js

@@ -0,0 +1,73 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React from 'react';
+import { IntlProvider } from 'react-intl-next';
+export var REACT_INTL_ERROR_MESSAGE = '<IntlProvider> needs to exist in the component ancestry';
+
+var isMissingIntlProviderInAncestryError = function isMissingIntlProviderInAncestryError(err) {
+  var _err$toString;
+
+  return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
+};
+
+export var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(IntlNextErrorBoundary, _React$Component);
+
+  var _super = _createSuper(IntlNextErrorBoundary);
+
+  function IntlNextErrorBoundary() {
+    var _this;
+
+    _classCallCheck(this, IntlNextErrorBoundary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      missingIntlProviderInAncestry: false
+    });
+
+    return _this;
+  }
+
+  _createClass(IntlNextErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // if missing IntlProvider in ancestry, we setup a fallback IntlProvider ourselves
+      if (isMissingIntlProviderInAncestryError(error)) {
+        this.setState({
+          missingIntlProviderInAncestry: true
+        });
+      } else {
+        // else we re-propagate the non-react-intl-next error
+        throw error;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.missingIntlProviderInAncestry) {
+        return /*#__PURE__*/React.createElement(IntlProvider, {
+          locale: "en"
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return IntlNextErrorBoundary;
+}(React.Component);

package/dist/esm/ui/LegacyToNextIntlProvider/index.js

@@ -0,0 +1,51 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React from 'react';
+import { intlShape } from 'react-intl';
+import { createIntl, RawIntlProvider } from 'react-intl-next';
+export var LegacyToNextIntlProvider = /*#__PURE__*/function (_React$Component) {
+  _inherits(LegacyToNextIntlProvider, _React$Component);
+
+  var _super = _createSuper(LegacyToNextIntlProvider);
+
+  function LegacyToNextIntlProvider() {
+    _classCallCheck(this, LegacyToNextIntlProvider);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(LegacyToNextIntlProvider, [{
+    key: "render",
+    value: function render() {
+      var oldIntl = this.context.intl;
+
+      if (oldIntl) {
+        var nextIntl = createIntl(_objectSpread({}, oldIntl));
+        return /*#__PURE__*/React.createElement(RawIntlProvider, {
+          value: nextIntl
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return LegacyToNextIntlProvider;
+}(React.Component);
+
+_defineProperty(LegacyToNextIntlProvider, "contextTypes", {
+  intl: intlShape
+});

package/dist/esm/ui/UnsupportedBlock/index.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import React, { useCallback, useRef } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';

package/dist/esm/ui/UnsupportedInline/index.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import React, { useCallback, useRef } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';

package/dist/esm/ui/index.js

@@ -1,10 +1,15 @@
-export { default as Emoji } from './Emoji';
+// TODO: ED-13875 Remove Emoji & EmojiProps exports once root entry point for editor-common has been removed
+export { default as Emoji } from './Emoji'; //exported from ./src/emoji.ts
+
+//exported from ./src/emoji.ts
 export { default as Caption } from './Caption';
 export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, shouldAddDefaultWrappedWidth } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid } from './MediaSingle/grid';
-export { MediaLink } from './MediaSingle/link';
-export { default as Mention } from './Mention';
+export { MediaLink } from './MediaSingle/link'; // TODO: ED-13875 Remove Mention export once root entry point for editor-common has been removed
+
+export { default as Mention } from './Mention'; //exported from ./src/mention.ts
+
 export { default as Popup, findOverflowScrollParent } from './Popup';
 export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
@@ -15,4 +20,7 @@ export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, ExpandLayoutWrapper } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
-export { ClearNextSiblingMarginTop } from './clear-next-sibling-margin-top';
+export { ClearNextSiblingMarginTop } from './clear-next-sibling-margin-top';
+export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlNextErrorBoundary';
+export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
+export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';

package/dist/esm/utils/compareNodes.js

@@ -135,6 +135,12 @@ function compareValue(valueA, valueB) {
     return 0;
   }
 
+  if (typeof valueA === 'string' && typeof valueB === 'string') {
+    return valueA.localeCompare(valueB, window.navigator.language, {
+      caseFirst: 'upper'
+    });
+  }
+
   return valueA > valueB ? 1 : -1;
 }
 /**

package/dist/esm/utils/date.js

@@ -70,9 +70,8 @@ export var timestampToTaskContext = function timestampToTaskContext(timestamp, i
   var sameYear = givenDate.getUTCFullYear() === curDate.getUTCFullYear();
 
   if (intl && [-1, 0, 1].indexOf(distance) > -1) {
-    return capitalizeFirstLetter(intl.formatRelative(givenDate, {
-      units: 'day',
-      now: Number(todayTimestampInUTC())
+    return capitalizeFirstLetter(intl.formatRelativeTime(distance, 'day', {
+      numeric: 'auto'
     }));
   }
 

package/dist/esm/utils/index.js

@@ -22,4 +22,5 @@ export { ZERO_WIDTH_SPACE } from './whitespace';
 export { shouldForceTracking } from './should-force-tracking';
 export { getModeFromTheme } from './getModeFromTheme';
 export { sniffUserBrowserExtensions } from './browser-extensions';
-export { RenderCountProfiler } from './profiler/render-count';
+export { RenderCountProfiler } from './profiler/render-count';
+export { validateADFEntity, validationErrorHandler } from './validate-using-spec';

package/dist/esm/utils/validator.js

@@ -15,7 +15,7 @@ export var ADFStages = {
  * It's important that this order follows the marks rank defined here:
  * https://product-fabric.atlassian.net/wiki/spaces/E/pages/11174043/Document+structure#Documentstructure-Rank
  */
-export var markOrder = ['link', 'em', 'strong', 'textColor', 'strike', 'subsup', 'underline', 'code', 'confluenceInlineComment', 'annotation', 'dataConsumer'];
+export var markOrder = ['fragment', 'link', 'em', 'strong', 'textColor', 'strike', 'subsup', 'underline', 'code', 'confluenceInlineComment', 'annotation', 'dataConsumer'];
 export var isSubSupType = function isSubSupType(type) {
   return type === 'sub' || type === 'sup';
 };
@@ -348,7 +348,7 @@ export var getValidNode = function getValidNode(originalNode) {
 
       case 'caption':
         {
-          if (content && adfStage === 'stage0') {
+          if (content) {
             return {
               type: type,
               content: content
@@ -640,23 +640,12 @@ export var getValidNode = function getValidNode(originalNode) {
       case 'panel':
         {
           if (attrs && content) {
-            var panelType = attrs.panelType,
-                panelIcon = attrs.panelIcon,
-                panelColor = attrs.panelColor;
+            var panelType = attrs.panelType;
 
             if (Object.values(PanelType).includes(panelType)) {
-              // TODO: ED-10445 remove stage0 check
-              var _attrs = adfStage === 'stage0' ? {
-                panelType: panelType,
-                panelIcon: panelIcon,
-                panelColor: panelColor
-              } : {
-                panelType: panelType
-              };
-
               return {
                 type: type,
-                attrs: _attrs,
+                attrs: attrs,
                 content: content
               };
             }
@@ -991,6 +980,14 @@ export var getValidMark = function getValidMark(mark) {
             attrs: attrs
           };
         }
+
+      case 'fragment':
+        {
+          return {
+            type: type,
+            attrs: attrs
+          };
+        }
     }
   }
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "60.2.0",
+	"version": "62.0.0",
 	"sideEffects": false
 }

package/dist/types/card/cardOptions.d.ts

@@ -0,0 +1,9 @@
+import { Providers } from '../provider-factory';
+export interface CardOptions {
+    provider?: Providers['cardProvider'];
+    resolveBeforeMacros?: string[];
+    allowBlockCards?: boolean;
+    allowEmbeds?: boolean;
+    allowResizing?: boolean;
+    useAlternativePreloader?: boolean;
+}

package/dist/types/card/index.d.ts

@@ -1,9 +1 @@
-import { Providers } from '../provider-factory';
-export interface CardOptions {
-    provider?: Providers['cardProvider'];
-    resolveBeforeMacros?: string[];
-    allowBlockCards?: boolean;
-    allowEmbeds?: boolean;
-    allowResizing?: boolean;
-    useAlternativePreloader?: boolean;
-}
+export type { CardOptions } from './cardOptions';

package/dist/types/collab.d.ts

@@ -1 +1 @@
-export type { CollabEditProvider, CollabEventPresenceData, CollabEvent, CollabEventConnectionData, CollabEventData, CollabEventInitData, CollabEventRemoteData, CollabEventTelepointerData, CollabParticipant, CollabSendableSelection, } from './collab/types';
+export type { CollabEditProvider, CollabEventPresenceData, CollabEvent, CollabEventConnectionData, CollabEventData, CollabEventInitData, CollabEventRemoteData, CollabEventTelepointerData, CollabParticipant, CollabSendableSelection, CollabEventLocalStepData, } from './collab/types';

package/dist/types/emoji.d.ts

@@ -0,0 +1,3 @@
+export { default as Emoji } from './ui/Emoji';
+export type { EmojiProps } from './ui/Emoji';
+export { EmojiSharedCssClassName } from './styles/shared/emoji';

package/dist/types/extensions/index.d.ts

@@ -1,4 +1,4 @@
-export { isFieldset, isTabGroup, isExpand, isDateRange } from './types';
+export { isFieldset, isTabGroup, isTabField, isExpand, isDateRange, } from './types';
 export type { Extension, ExtensionAutoConvertHandler, ExtensionComponentProps, ExtensionHandler, ExtensionHandlers, ExtensionKey, ExtensionManifest, ExtensionModule, ExtensionModuleAction, ExtensionModuleActionHandler, ExtensionModuleActionObject, ExtensionModuleNode, ExtensionModuleNodes, ExtensionModules, ExtensionParams, ExtensionProvider, ExtensionQuickInsertModule, ExtensionType, ExtensionToolbarButton, ContextualToolbar, ToolbarItem, Icon, MaybeADFEntity, MenuItem, MenuItemMap, UpdateExtension, Parameters, ParametersWithDuplicateFields, BooleanField, CustomField, CustomFieldResolver, UserFieldContext, UserField, UserFieldContextProvider, ColorField, DateField, DateRangeField, DateRangeResult, EnumField, EnumCheckboxField, EnumRadioField, EnumSelectField, ExpandField, FieldDefinition, DynamicFieldDefinitions, Fieldset, GroupingField, NativeField, NestedFieldDefinition, NumberField, Option, StringField, StringOneLineField, StringMultilineField, TabGroupField, TabField, FieldHandlerLink, OnSaveCallback, ExtensionAPI, TransformBefore, TransformAfter, ReferenceEntity, ParametersGetter, AsyncParametersGetter, } from './types';
 export { getExtensionKeyAndNodeKey, resolveImport } from './manifest-helpers';
 export { default as DefaultExtensionProvider } from './default-extension-provider';

package/dist/types/extensions/types/extension-handler.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ADFEntity } from '@atlaskit/adf-utils';
 import { Parameters } from './extension-parameters';
 export interface ExtensionParams<T extends Parameters> {
@@ -16,7 +17,9 @@ export declare type ExtensionAPI<T extends Parameters = Parameters> = {
     editInContextPanel: (transformBefore: TransformBefore<T>, transformAfter: TransformAfter<T>) => void;
     _editInLegacyMacroBrowser: () => void;
     doc: {
-        insertAfter: (localId: string, adf: ADFEntity) => void;
+        insertAfter: (localId: string, adf: ADFEntity, options?: {
+            allowSelectionToNewNode?: boolean;
+        }) => void;
         scrollTo: (localId: string) => void;
     };
 };
@@ -28,6 +31,8 @@ export interface Extension<T extends Parameters = Parameters> {
 export interface ExtensionHandlers<T extends Parameters = any> {
     [key: string]: Extension<T> | ExtensionHandler<T>;
 }
-export declare type ReferenceEntity = ADFEntity | Object;
+export declare type ReferenceEntity = {
+    [prop: string]: ADFEntity | Object;
+};
 export declare type ParametersGetter<T extends Parameters = Parameters> = TransformBefore<T>;
 export declare type AsyncParametersGetter<T extends Parameters = Parameters> = TransformAfter<T>;

package/dist/types/extensions/types/extension-parameters.d.ts

@@ -1,4 +1,5 @@
 export declare type Parameters = {
     [key: string]: any;
+    lastIndexOf?: never;
 };
 export declare type ParametersWithDuplicateFields = Array<Parameters>;