@atlaskit/renderer 83.0.0 → 85.0.0

package/dist/cjs/ui/Expand.js

@@ -25,7 +25,7 @@ var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -33,7 +33,7 @@ var _events = require("../analytics/events");
 
 var _enums = require("../analytics/enums");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _activeHeaderIdProvider = require("./active-header-id-provider");
 
@@ -47,23 +47,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var Title = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _constants.gridSize)() / 2);
 
-var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  padding-bottom: ", "px;\n"])), _editorCommon.sharedExpandStyles.ContainerStyles, function (props) {
+var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  padding-bottom: ", "px;\n"])), _ui.sharedExpandStyles.ContainerStyles, function (props) {
   return props.expanded ? (0, _constants.gridSize)() : 0;
 });
 
-var TitleContainer = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: ", "px;\n  padding-bottom: ", "px;\n"])), _editorCommon.sharedExpandStyles.TitleContainerStyles, (0, _constants.gridSize)(), function (props) {
+var TitleContainer = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: ", "px;\n  padding-bottom: ", "px;\n"])), _ui.sharedExpandStyles.TitleContainerStyles, (0, _constants.gridSize)(), function (props) {
   return !props.expanded ? (0, _constants.gridSize)() : 0;
 });
 
 TitleContainer.displayName = 'TitleContainerButton';
 
-var ContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  padding-right: ", "px;\n  padding-left: ", "px;\n  visibility: ", ";\n"])), _editorCommon.sharedExpandStyles.ContentStyles, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, function (props) {
+var ContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  padding-right: ", "px;\n  padding-left: ", "px;\n  visibility: ", ";\n"])), _ui.sharedExpandStyles.ContentStyles, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, function (props) {
   return props.expanded ? 'visible' : 'hidden';
 });
 
 var ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function WithRef(props, ref) {
   // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.ExpandLayoutWrapper, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_ui.ExpandLayoutWrapper, (0, _extends2.default)({}, props, {
     innerRef: ref
   }));
 });
@@ -103,7 +103,7 @@ function Expand(_ref) {
       focused = _React$useState4[0],
       setFocused = _React$useState4[1];
 
-  var label = intl.formatMessage(expanded ? _editorCommon.expandMessages.collapseNode : _editorCommon.expandMessages.expandNode);
+  var label = intl.formatMessage(expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode);
 
   var _useRef = (0, _react.useRef)((0, _uniqueId2.default)('expand-title-')),
       id = _useRef.current;
@@ -144,19 +144,19 @@ function Expand(_ref) {
     content: label,
     position: "top",
     tag: ExpandLayoutWrapperWithRef
-  }, /*#__PURE__*/_react.default.createElement(_editorCommon.ExpandIconWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(_ui.ExpandIconWrapper, {
     expanded: expanded
   }, /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
     label: label
   }))), /*#__PURE__*/_react.default.createElement(Title, {
     id: id
-  }, title || intl.formatMessage(_editorCommon.expandMessages.expandDefaultTitle))), /*#__PURE__*/_react.default.createElement(ContentContainer, {
+  }, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), /*#__PURE__*/_react.default.createElement(ContentContainer, {
     expanded: expanded
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(nodeType, "-content-wrapper")
-  }, /*#__PURE__*/_react.default.createElement(_editorCommon.WidthProvider, null, /*#__PURE__*/_react.default.createElement(_editorCommon.ClearNextSiblingMarginTop, null), children))));
+  }, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement(_ui.ClearNextSiblingMarginTop, null), children))));
 }
 
-var _default = (0, _reactIntl.injectIntl)(Expand);
+var _default = (0, _reactIntlNext.injectIntl)(Expand);
 
 exports.default = _default;

package/dist/cjs/ui/ExtensionRenderer.js

@@ -25,7 +25,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _extensions = require("@atlaskit/editor-common/extensions");
+
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 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); }; }
 
@@ -57,7 +61,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_editorCommon.getNodeRenderer));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider) {
       var _this$props = _this.props,
           extensionHandlers = _this$props.extensionHandlers,
@@ -81,7 +85,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
 
       try {
         if (extensionHandlers && extensionHandlers[extensionType]) {
-          var render = (0, _editorCommon.getExtensionRenderer)(extensionHandlers[extensionType]);
+          var render = (0, _utils.getExtensionRenderer)(extensionHandlers[extensionType]);
           result = render(node, rendererContext.adDoc);
         }
 
@@ -133,7 +137,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
         return this.setupAndRenderExtensionNode({});
       }
 
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['extensionProvider'],
         providerFactory: providers,
         renderNode: this.setupAndRenderExtensionNode

package/dist/cjs/ui/MediaCard.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaCard = exports.getClipboardAttrs = exports.CardWrapper = exports.MediaCardInternal = exports.getListOfIdentifiersFromDoc = void 0;
+exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardInternal = exports.MediaCard = exports.CardWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -37,7 +37,7 @@ var _mediaCard = require("@atlaskit/media-card");
 
 var _mediaClient = require("@atlaskit/media-client");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -47,9 +47,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(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 _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; }
 
 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); }; }
 
@@ -459,5 +459,5 @@ var getClipboardAttrs = function getClipboardAttrs(_ref2) {
 };
 
 exports.getClipboardAttrs = getClipboardAttrs;
-var MediaCard = (0, _editorCommon.withImageLoader)(MediaCardInternal);
+var MediaCard = (0, _utils.withImageLoader)(MediaCardInternal);
 exports.MediaCard = MediaCard;

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BreakoutSSRInlineScript = BreakoutSSRInlineScript;
-exports.createBreakoutInlineScript = createBreakoutInlineScript;
 exports.calcLineLength = exports.breakoutInlineScriptContext = void 0;
+exports.createBreakoutInlineScript = createBreakoutInlineScript;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 /**
  * Inline Script that updates breakout node width on client side,
@@ -44,7 +44,7 @@ function createBreakoutInlineScript(id, allowDynamicTextSizing) {
   return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", ").concat(allowDynamicTextSizing, ", breakoutConsts);\n  })(window);\n");
 }
 
-var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_editorCommon.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_editorCommon.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_editorCommon.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_editorCommon.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_editorCommon.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_editorCommon.breakoutConsts.calcWideWidth.toString(), ";\n");
+var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n");
 exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
 
 function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
@@ -128,5 +128,5 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
   window.addEventListener('load', disconnect);
 }
 
-var calcLineLength = _editorCommon.breakoutConsts.calcLineLength;
+var calcLineLength = _utils.breakoutConsts.calcLineLength;
 exports.calcLineLength = calcLineLength;

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

@@ -7,8 +7,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Renderer = exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0;
 exports.RendererWrapper = RendererWrapper;
-exports.default = exports.Renderer = exports.DEGRADED_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -28,13 +29,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
-
 var _adfSchema = require("@atlaskit/adf-schema");
 
 var _adfUtils = require("@atlaskit/adf-utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+
+var _ui = require("@atlaskit/editor-common/ui");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
 
@@ -76,7 +79,7 @@ var _annotations = require("../annotations");
 
 var _links = require("../../react/utils/links");
 
-var _utils = require("../../utils");
+var _utils2 = require("../../utils");
 
 var _clickToEdit = require("./click-to-edit");
 
@@ -90,9 +93,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(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 _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; }
 
 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); }; }
 
@@ -145,11 +148,11 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       var windowSelection = window.getSelection();
       _this.mouseDownSelection = windowSelection !== null ? windowSelection.toString() : undefined;
     });
-    _this.providerFactory = props.dataProviders || new _editorCommon.ProviderFactory();
+    _this.providerFactory = props.dataProviders || new _providerFactory.ProviderFactory();
     _this.serializer = new _.ReactSerializer(_this.deriveSerializerProps(props));
     _this.editorRef = props.innerRef || /*#__PURE__*/_react.default.createRef();
     _this.id = (0, _v.default)();
-    (0, _editorCommon.startMeasure)("Renderer Render Time: ".concat(_this.id));
+    (0, _utils.startMeasure)("Renderer Render Time: ".concat(_this.id));
     return _this;
   }
 
@@ -190,12 +193,12 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         eventType: _enums.EVENT_TYPE.UI
       });
       this.rafID = requestAnimationFrame(function () {
-        (0, _editorCommon.stopMeasure)("Renderer Render Time: ".concat(_this2.id), function (duration) {
+        (0, _utils.stopMeasure)("Renderer Render Time: ".concat(_this2.id), function (duration) {
           var _analyticsEventSeveri, _analyticsEventSeveri2;
 
           var analyticsEventSeverityTracking = _this2.props.analyticsEventSeverityTracking;
-          var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _editorCommon.shouldForceTracking)();
-          var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? (0, _editorCommon.getAnalyticsEventSeverity)(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
+          var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _utils.shouldForceTracking)();
+          var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? (0, _utils.getAnalyticsEventSeverity)(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
 
           _this2.fireAnalyticsEvent({
             action: _enums.ACTION.RENDERED,
@@ -203,7 +206,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
             attributes: {
               platform: _events.PLATFORM.WEB,
               duration: duration,
-              ttfb: (0, _editorCommon.getResponseEndTime)(),
+              ttfb: (0, _utils.getResponseEndTime)(),
               nodes: (0, _adfUtils.reduce)(_this2.props.document, function (acc, node) {
                 acc[node.type] = (acc[node.type] || 0) + 1;
                 return acc;
@@ -307,7 +310,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
 
         var rendererWrapper = event.currentTarget; // Check if the click was on an interactive element
 
-        var isInteractiveElementInTree = (0, _utils.findInTree)(targetElement, rendererWrapper, _clickToEdit.isInteractiveElement);
+        var isInteractiveElementInTree = (0, _utils2.findInTree)(targetElement, rendererWrapper, _clickToEdit.isInteractiveElement);
 
         if (isInteractiveElementInTree) {
           return;
@@ -346,7 +349,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           value: this.featureFlags(this.props.featureFlags)
         }, /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextProvider, null, /*#__PURE__*/_react.default.createElement(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
-        }, /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, null, /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Provider, {
+        }, /*#__PURE__*/_react.default.createElement(_ui.LegacyToNextIntlProvider, null, /*#__PURE__*/_react.default.createElement(_ui.IntlLegacyFallbackProvider, null, /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
@@ -369,7 +372,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result))))))));
+        }, result)))))))));
 
         return truncated ? /*#__PURE__*/_react.default.createElement(_truncatedWrapper.TruncatedWrapper, {
           height: maxHeight,
@@ -388,7 +391,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           onClick: handleWrapperOnClick
-        }, /*#__PURE__*/_react.default.createElement(_editorCommon.UnsupportedBlock, null));
+        }, /*#__PURE__*/_react.default.createElement(_ui.UnsupportedBlock, null));
       }
     }
   }, {
@@ -415,22 +418,23 @@ exports.Renderer = Renderer;
 var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
     data: {
-      appearance: (0, _editorCommon.getAnalyticsAppearance)(props.appearance),
+      appearance: (0, _utils.getAnalyticsAppearance)(props.appearance),
       packageName: _version.name,
       packageVersion: _version.version,
       componentName: 'renderer',
       editorSessionId: (0, _v.default)()
     }
-  }, /*#__PURE__*/_react.default.createElement(_editorCommon.WithCreateAnalyticsEvent, {
+  }, /*#__PURE__*/_react.default.createElement(_ui.WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
+      // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
       return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
         component: _enums.ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, /*#__PURE__*/_react.default.createElement(Renderer, (0, _extends2.default)({}, props, {
+      }, /*#__PURE__*/_react.default.createElement(_ui.IntlNextErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Renderer, (0, _extends2.default)({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
-      })));
+      }))));
     }
   }));
 });
@@ -446,9 +450,9 @@ var RendererWithIframeFallbackWrapper = /*#__PURE__*/_react.default.memo(functio
       onClick = props.onClick,
       onMouseDown = props.onMouseDown;
 
-  var renderer = /*#__PURE__*/_react.default.createElement(_editorCommon.WidthProvider, {
+  var renderer = /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_editorCommon.BaseTheme, {
+  }, /*#__PURE__*/_react.default.createElement(_ui.BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
   }, /*#__PURE__*/_react.default.createElement(_style.Wrapper, {

package/dist/cjs/ui/Renderer/style.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.headingSizes = exports.FullPagePadding = void 0;
+exports.headingSizes = exports.Wrapper = exports.FullPagePadding = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,9 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -92,7 +94,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
-  return "\n    .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, " {\n      padding: 0;\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ").concat(_editorCommon.tableCellPadding, "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\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        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ").concat(colors.B300, ";\n          }\n        }\n\n        ").concat(headingsCss, "\n      }\n\n      &.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, " .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        cursor: default;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n          opacity: 1;\n        }\n      }\n    }\n  ");
+  return "\n    .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, " {\n      padding: 0;\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ").concat(_styles.tableCellPadding, "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\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        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ").concat(colors.B300, ";\n          }\n        }\n\n        ").concat(headingsCss, "\n      }\n\n      &.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, " .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        cursor: default;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n          opacity: 1;\n        }\n      }\n    }\n  ");
 };
 
 var fullPageStyles = function fullPageStyles(_ref3) {
@@ -117,16 +119,16 @@ var fullWidthStyles = function fullWidthStyles(_ref4) {
 }; // prettier-ignore
 
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\n\n  ", "\n  ", "\n\n  & h1 {\n    ", "\n  }\n\n  & h2 {\n    ", "\n  }\n\n  & h3 {\n    ", "\n  }\n\n  & h4 {\n    ", "\n  }\n\n  & h5 {\n    ", "\n  }\n\n  & h6 {\n    ", "\n  }\n\n  & span.akActionMark {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  & span.akActionMark {\n    cursor: pointer;\n  }\n\n  & span[data-placeholder] {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n\n  & .UnknownBlock {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  & span.date-node {\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    padding: 2px 4px;\n    margin: 0 1px;\n    transition: background 0.3s;\n  }\n\n  & span.date-node-highlighted {\n    background: ", ";\n    color: ", ";\n  }\n\n  & .renderer-image {\n    max-width: 100%;\n    display: block;\n    margin: ", "px 0;\n  }\n\n  .", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n    clear: both;\n  }\n\n  & .code-block,\n  & blockquote,\n  & hr,\n  & > div > div:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n  .", ".image-align-start,\n  .", ".image-center,\n  .", ".image-align-end {\n    clear: both;\n  }\n\n  & .rich-media-wrapped {\n    & + h1,\n    & + h2,\n    & + h3,\n    & + h4,\n    & + h5,\n    & + h6 {\n      margin-top: 8px;\n    }\n  }\n\n  ", "\n\n  ", " &\n  div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  /* Breakout for tables and extensions */\n  .", " > {\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    * .", " {\n      overflow-x: auto;\n    }\n\n    & .", ":first-child {\n      margin-top: 0;\n    }\n  }\n\n  .", " {\n    margin-top: ", ";\n  }\n\n  .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n  }\n\n  .", " {\n    overflow-x: auto;\n  }\n\n  ", "\n\n  .", " {\n    z-index: 0;\n    transition: all 0.1s linear;\n    display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n    /** Shadow overrides */\n    &.", "::after, &.", "::before {\n      top: ", "px;\n      height: calc(100% - ", "px);\n      z-index: ", ";\n    }\n\n    /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n    table {\n      height: 1px; /* will be ignored */\n      ", ";\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    table tr:first-child {\n      height: 100%;\n\n      td, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\n        width: ", "px;\n        text-align: center;\n        color: ", ";\n        font-size: ", ";\n      }\n\n      .fixed .", " {\n        border-right: 0px none;\n      }\n    }\n  }\n\n  tr[data-header-row].fixed {\n    position: fixed !important;\n    display: flex;\n    overflow: hidden;\n    z-index: ", ";\n\n    border-right: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n\n    /* this is to compensate for the table border */\n    transform: translateX(-1px);\n  }\n\n  .sticky > th {\n    z-index: ", ";\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* Make the number column header sticky */\n  .sticky > td {\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n  .sticky th, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 0px -1px ", ";\n  }\n\n   /* this will remove jumpiness caused in Chrome for sticky headers */\n  .fixed + tr {\n    min-height: 0px;\n  }\n\n  /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n  & .code-block {\n    max-width: 100%;\n    /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n    /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: auto 1fr;\n    /* stylelint-enable */\n\n    grid-template-columns: minmax(0, 1fr);\n    position: relative;\n    border-radius: ", "px;\n\n    /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n    word-wrap: normal;\n\n    & > span {\n      /* stylelint-disable value-no-vendor-prefix */\n      -ms-grid-row: 1;\n      -ms-grid-column: 2;\n      /* stylelint-enable */\n      grid-column: 1;\n    }\n  }\n\n  & .MediaGroup,\n  & .code-block {\n    margin-top: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:hover button.copy-to-clipboard, .copy-to-clipboard:focus{\n      opacity: 1;\n      position: absolute;\n      height: 32px;\n      width: 32px;\n      right: 6px;\n      top: 4px;\n      padding: 2px;\n    }\n  }\n\n  ", ";\n  & [data-layout-section] {\n    margin-top: ", "px;\n    & > div + div {\n      margin-left: ", "px;\n    }\n\n    @media screen and (max-width: ", "px) {\n      & > div + div {\n        margin-left: 0;\n      }\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, (0, _components.themed)({
+var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\n\n  ", "\n  ", "\n\n  & h1 {\n    ", "\n  }\n\n  & h2 {\n    ", "\n  }\n\n  & h3 {\n    ", "\n  }\n\n  & h4 {\n    ", "\n  }\n\n  & h5 {\n    ", "\n  }\n\n  & h6 {\n    ", "\n  }\n\n  & span.akActionMark {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  & span.akActionMark {\n    cursor: pointer;\n  }\n\n  & span[data-placeholder] {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n\n  & .UnknownBlock {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  & span.date-node {\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    padding: 2px 4px;\n    margin: 0 1px;\n    transition: background 0.3s;\n  }\n\n  & span.date-node-highlighted {\n    background: ", ";\n    color: ", ";\n  }\n\n  & .renderer-image {\n    max-width: 100%;\n    display: block;\n    margin: ", "px 0;\n  }\n\n  .", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n    clear: both;\n  }\n\n  & .code-block,\n  & blockquote,\n  & hr,\n  & > div > div:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n  .", ".image-align-start,\n  .", ".image-center,\n  .", ".image-align-end {\n    clear: both;\n  }\n\n  & .rich-media-wrapped {\n    & + h1,\n    & + h2,\n    & + h3,\n    & + h4,\n    & + h5,\n    & + h6 {\n      margin-top: 8px;\n    }\n  }\n\n  ", "\n\n  ", " &\n  div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  /* Breakout for tables and extensions */\n  .", " > {\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    * .", " {\n      overflow-x: auto;\n    }\n\n    & .", ":first-child {\n      margin-top: 0;\n    }\n  }\n\n  .", " {\n    margin-top: ", ";\n  }\n\n  .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n  }\n\n  .", " {\n    overflow-x: auto;\n  }\n\n  ", "\n\n  .", " {\n    z-index: 0;\n    transition: all 0.1s linear;\n    display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n    /** Shadow overrides */\n    &.", "::after, &.", "::before {\n      top: ", "px;\n      height: calc(100% - ", "px);\n      z-index: ", ";\n    }\n\n    /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n    table {\n      height: 1px; /* will be ignored */\n      ", ";\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    table tr:first-child {\n      height: 100%;\n\n      td, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\n        width: ", "px;\n        text-align: center;\n        color: ", ";\n        font-size: ", ";\n      }\n\n      .fixed .", " {\n        border-right: 0px none;\n      }\n    }\n  }\n\n  tr[data-header-row].fixed {\n    position: fixed !important;\n    display: flex;\n    overflow: hidden;\n    z-index: ", ";\n\n    border-right: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n\n    /* this is to compensate for the table border */\n    transform: translateX(-1px);\n  }\n\n  .sticky > th {\n    z-index: ", ";\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* Make the number column header sticky */\n  .sticky > td {\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n  .sticky th, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 0px -1px ", ";\n  }\n\n   /* this will remove jumpiness caused in Chrome for sticky headers */\n  .fixed + tr {\n    min-height: 0px;\n  }\n\n  /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n  & .code-block {\n    max-width: 100%;\n    /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n    /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: auto 1fr;\n    /* stylelint-enable */\n\n    grid-template-columns: minmax(0, 1fr);\n    position: relative;\n    border-radius: ", "px;\n\n    /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n    word-wrap: normal;\n\n    & > span {\n      /* stylelint-disable value-no-vendor-prefix */\n      -ms-grid-row: 1;\n      -ms-grid-column: 2;\n      /* stylelint-enable */\n      grid-column: 1;\n    }\n  }\n\n  & .MediaGroup,\n  & .code-block {\n    margin-top: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:hover button.copy-to-clipboard, .copy-to-clipboard:focus{\n      opacity: 1;\n      position: absolute;\n      height: 32px;\n      width: 32px;\n      right: 6px;\n      top: 4px;\n      padding: 2px;\n    }\n  }\n\n  ", ";\n  & [data-layout-section] {\n    margin-top: ", "px;\n    & > div + div {\n      margin-left: ", "px;\n    }\n\n    @media screen and (max-width: ", "px) {\n      & > div + div {\n        margin-left: 0;\n      }\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, (0, _components.themed)({
   light: colors.N800,
   dark: '#B8C7E0'
-}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _editorCommon.whitespaceSharedStyles, _editorCommon.blockquoteSharedStyles, _editorCommon.headingsSharedStyles, _editorCommon.panelSharedStyles, _editorCommon.ruleSharedStyles, _editorCommon.paragraphSharedStyles, _editorCommon.listsSharedStyles, _editorCommon.indentationSharedStyles, _editorCommon.blockMarksSharedStyles, _editorCommon.codeMarkSharedStyles, _editorCommon.shadowSharedStyle, _editorCommon.dateSharedStyle, _editorCommon.tasksAndDecisionsStyles, _editorCommon.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, _styles.headingsSharedStyles, _styles.panelSharedStyles, _styles.ruleSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, _styles.codeMarkSharedStyles, _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
   light: colors.N30A,
   dark: colors.DN70
 }), (0, _constants.borderRadius)(), (0, _components.themed)({
   light: colors.N800,
   dark: colors.DN600
-}), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, alignedHeadingAnchorStyle, _editorCommon.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _editorCommon.TableSharedCssClassName.TABLE_NODE_WRAPPER, _editorCommon.tableSharedStyle, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER, _editorCommon.shadowClassNames.RIGHT_SHADOW, _editorCommon.shadowClassNames.LEFT_SHADOW, _editorCommon.tableMarginTop - 1, _editorCommon.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle, _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+}), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle, _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _styles.tableSharedStyle, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle, _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
   light: _editorSharedStyles.akEditorTableToolbar,
   dark: _editorSharedStyles.akEditorTableToolbarDark
 }), (0, _components.themed)({
@@ -153,6 +155,6 @@ var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject
 }), (0, _components.themed)({
   light: _editorSharedStyles.akEditorTableToolbar,
   dark: _editorSharedStyles.akEditorTableToolbarDark
-}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorCommon.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
+}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
 
 exports.Wrapper = Wrapper;

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RendererActionsContext = RendererActionsContext;
-exports.RendererActionsContextConsumer = exports.RendererContext = void 0;
+exports.RendererContext = exports.RendererActionsContextConsumer = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

package/dist/cjs/ui/SortingIcon.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StatusClassNames = exports.TableSortIconDataUrl = void 0;
+exports.default = exports.TableSortIconDataUrl = exports.StatusClassNames = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -13,14 +13,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _types = require("@atlaskit/editor-common/types");
+
 var _templateObject, _templateObject2;
 
 // We use data url here because of this issue:
@@ -45,10 +45,10 @@ var TableSortingIcon = _styledComponents.default.div(_templateObject2 || (_templ
 
 var getClassName = function getClassName(status) {
   switch (status) {
-    case _editorCommon.SortOrder.ASC:
+    case _types.SortOrder.ASC:
       return StatusClassNames.ASC;
 
-    case _editorCommon.SortOrder.DESC:
+    case _types.SortOrder.DESC:
       return StatusClassNames.DESC;
 
     default:
@@ -58,13 +58,13 @@ var getClassName = function getClassName(status) {
 
 var getTooltipTitle = function getTooltipTitle(status) {
   switch (status) {
-    case _editorCommon.SortOrder.NO_ORDER:
+    case _types.SortOrder.NO_ORDER:
       return 'Sort column A to Z';
 
-    case _editorCommon.SortOrder.ASC:
+    case _types.SortOrder.ASC:
       return 'Sort column Z to A';
 
-    case _editorCommon.SortOrder.DESC:
+    case _types.SortOrder.DESC:
       return 'Clear sorting';
   }
 
@@ -76,7 +76,7 @@ var notAllowedTooltip = "\u26A0\uFE0F  You can't sort a table with merged cell";
 var SortingIcon = function SortingIcon(_ref) {
   var isSortingAllowed = _ref.isSortingAllowed,
       sortOrdered = _ref.sortOrdered;
-  var activated = sortOrdered !== _editorCommon.SortOrder.NO_ORDER;
+  var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
   var wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
   var content = isSortingAllowed ? getTooltipTitle(sortOrdered) : notAllowedTooltip;
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {

package/dist/cjs/ui/active-header-id-provider.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ActiveHeaderIdConsumer = exports.ActiveHeaderIdProvider = void 0;
+exports.ActiveHeaderIdProvider = exports.ActiveHeaderIdConsumer = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/dist/cjs/ui/annotations/context.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnnotationsDraftContextWrapper = exports.InlineCommentsStateContext = exports.ProvidersContext = exports.AnnotationsDraftContext = void 0;
+exports.ProvidersContext = exports.InlineCommentsStateContext = exports.AnnotationsDraftContextWrapper = exports.AnnotationsDraftContext = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/ui/annotations/draft/component.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextWithAnnotationDraft = exports.applyAnnotationOnText = exports.getAnnotationIndex = exports.AnnotationDraft = void 0;
+exports.getAnnotationIndex = exports.applyAnnotationOnText = exports.TextWithAnnotationDraft = exports.AnnotationDraft = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,11 +25,11 @@ var _dom = require("./dom");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject;
 
-var DraftAnnotation = _styledComponents.default.mark(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), _editorCommon.AnnotationSharedCSSByState.focus);
+var DraftAnnotation = _styledComponents.default.mark(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), _styles.AnnotationSharedCSSByState.focus);
 
 var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,

package/dist/cjs/ui/annotations/draft/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "updateWindowSelectionAroundDraft", {
+Object.defineProperty(exports, "TextWithAnnotationDraft", {
   enumerable: true,
   get: function get() {
-    return _dom.updateWindowSelectionAroundDraft;
+    return _component.TextWithAnnotationDraft;
   }
 });
-Object.defineProperty(exports, "TextWithAnnotationDraft", {
+Object.defineProperty(exports, "updateWindowSelectionAroundDraft", {
   enumerable: true,
   get: function get() {
-    return _component.TextWithAnnotationDraft;
+    return _dom.updateWindowSelectionAroundDraft;
   }
 });
 

package/dist/cjs/ui/annotations/draft/text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calcTextSplitOffset = exports.splitText = void 0;
+exports.splitText = exports.calcTextSplitOffset = void 0;
 
 var splitText = function splitText(text, _ref) {
   var startOffset = _ref.startOffset,