@atlaskit/renderer 84.1.1 → 88.0.0

package/dist/esm/react/nodes/mediaSingle/styles.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import styled from 'styled-components';
-import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common';
+import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 export var ExtendedUIMediaSingle = styled(UIMediaSingle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " transition: all 0.1s linear;\n"])), function (_ref) {
   var layout = _ref.layout;
   return layout === 'full-width' || layout === 'wide' ? "\n  margin-left: 50%;\n  transform: translateX(-50%);\n  " : "";

package/dist/esm/react/nodes/mention.js

@@ -10,7 +10,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { Mention } from '@atlaskit/editor-common';
+import { Mention } from '@atlaskit/editor-common/mention';
 
 var MentionItem = /*#__PURE__*/function (_PureComponent) {
   _inherits(MentionItem, _PureComponent);
@@ -29,7 +29,6 @@ var MentionItem = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
-          portal = _this$props.portal,
           providers = _this$props.providers,
           text = _this$props.text,
           accessLevel = _this$props.accessLevel;
@@ -38,7 +37,6 @@ var MentionItem = /*#__PURE__*/function (_PureComponent) {
         text: text,
         accessLevel: accessLevel,
         providers: providers,
-        portal: portal,
         eventHandlers: eventHandlers && eventHandlers.mention
       });
     }

package/dist/esm/react/nodes/panel.js

@@ -4,20 +4,16 @@ var _templateObject;
 
 import React from 'react';
 import styled from 'styled-components';
-import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
-import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
-import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
-import NoteIcon from '@atlaskit/icon/glyph/editor/note';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
-import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common';
+import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common/styles';
+import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 var PanelStyled = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
   if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
     return '';
@@ -29,12 +25,12 @@ var PanelStyled = styled.div(_templateObject || (_templateObject = _taggedTempla
   }), ";\n      }\n    ");
 });
 var panelIcons = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  note: NoteIcon,
+  info: PanelInfoIcon,
+  success: PanelSuccessIcon,
+  note: PanelNoteIcon,
   tip: TipIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
+  warning: PanelWarningIcon,
+  error: PanelErrorIcon,
   custom: EmojiIcon
 };
 
@@ -43,6 +39,8 @@ var Panel = function Panel(props) {
       type = props.panelType,
       panelColor = props.panelColor,
       panelIcon = props.panelIcon,
+      panelIconId = props.panelIconId,
+      panelIconText = props.panelIconText,
       providers = props.providers,
       children = props.children; // only allow custom panel type if flag is set
   // otherwise fall back to info if custom panel is given
@@ -53,6 +51,8 @@ var Panel = function Panel(props) {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
         return /*#__PURE__*/React.createElement(EmojiItem, {
+          id: panelIconId,
+          text: panelIconText,
           shortName: panelIcon,
           providers: providers
         });
@@ -82,6 +82,8 @@ var Panel = function Panel(props) {
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
     "data-panel-icon": panelIcon,
+    "data-panel-icon-id": panelIconId,
+    "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
     className: PanelSharedCssClassName.content

package/dist/esm/react/nodes/status.js

@@ -38,7 +38,8 @@ var Status = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/React.createElement(AkStatus, {
         text: text,
         color: color,
-        localId: localId
+        localId: localId,
+        role: "presentation"
       }));
     }
   }]);

package/dist/esm/react/nodes/table/colgroup.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common';
+import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { calcLineLength } from '../../../ui/Renderer/breakout-ssr';
 // we allow scaling down column widths by no more than 15%

package/dist/esm/react/nodes/table/sticky.js

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2, _templateObject3;
 
 import React from 'react';
 import styled from 'styled-components';
-import { TableSharedCssClassName } from '@atlaskit/editor-common';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 var N40A = colors.N40A;

package/dist/esm/react/nodes/table.js

@@ -16,7 +16,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import styled from 'styled-components';
-import { calcTableWidth, WidthConsumer, TableSharedCssClassName, overflowShadow, createCompareNodes, SortOrder, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose, tableMarginTop } from '@atlaskit/editor-common';
+import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
+import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';

package/dist/esm/react/nodes/tableCell.js

@@ -13,11 +13,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
-import { compose, SortOrder } from '@atlaskit/editor-common';
+import { compose } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
 import SortingIcon from '../../ui/SortingIcon';
 import { MODE, PLATFORM } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { RendererCssClassName } from '../../consts';
+import { injectIntl } from 'react-intl-next';
+import { tableCellMessages } from '../../messages';
 var IgnoreSorting = ['LABEL', 'INPUT'];
 
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
@@ -35,19 +38,23 @@ var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   return SortOrder.NO_ORDER;
 };
 
-var getSortOrderLabel = function getSortOrderLabel(currentSortOrder) {
+var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
+  var noneSortingLabel = tableCellMessages.noneSortingLabel,
+      ascSortingLabel = tableCellMessages.ascSortingLabel,
+      descSortingLabel = tableCellMessages.descSortingLabel;
+
   switch (currentSortOrder) {
     case SortOrder.NO_ORDER:
-      return 'none';
+      return intl.formatMessage(noneSortingLabel);
 
     case SortOrder.ASC:
-      return 'ascending';
+      return intl.formatMessage(ascSortingLabel);
 
     case SortOrder.DESC:
-      return 'descending';
+      return intl.formatMessage(descSortingLabel);
 
     default:
-      return 'none';
+      return intl.formatMessage(noneSortingLabel);
   }
 };
 
@@ -125,7 +132,7 @@ var withCellProps = function withCellProps(WrapperComponent) {
 };
 
 export var withSortableColumn = function withSortableColumn(WrapperComponent) {
-  return /*#__PURE__*/function (_React$Component2) {
+  var WithSortableColumn = /*#__PURE__*/function (_React$Component2) {
     _inherits(WithSortableColumn, _React$Component2);
 
     var _super2 = _createSuper(WithSortableColumn);
@@ -200,7 +207,8 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
             onSorting = _this$props3.onSorting,
             children = _this$props3.children,
             sortOrdered = _this$props3.sortOrdered,
-            isHeaderRow = _this$props3.isHeaderRow;
+            isHeaderRow = _this$props3.isHeaderRow,
+            intl = _this$props3.intl;
         var sortOrderedClassName = sortOrdered === SortOrder.NO_ORDER ? RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
 
         if (!allowColumnSorting || !isHeaderRow) {
@@ -215,7 +223,7 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
 
         return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, this.props, {
           className: className,
-          ariaSort: getSortOrderLabel(sortOrdered)
+          ariaSort: getSortOrderLabel(intl, sortOrdered)
         }), /*#__PURE__*/React.createElement("div", {
           className: RendererCssClassName.SORTABLE_COLUMN_BUTTON,
           role: "button",
@@ -235,6 +243,8 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
 
     return WithSortableColumn;
   }(React.Component);
+
+  return injectIntl(WithSortableColumn);
 };
 export var TableHeader = compose(withSortableColumn, withCellProps)('th');
 export var TableCell = withCellProps('td');

package/dist/esm/react/nodes/tableRow.js

@@ -11,7 +11,8 @@ 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 { SortOrder, compose } from '@atlaskit/editor-common';
+import { compose } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
 import { RendererCssClassName } from '../../consts';
 
 var TableRow = /*#__PURE__*/function (_React$Component) {

package/dist/esm/react/nodes/task-item-with-providers.js

@@ -9,6 +9,7 @@ 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";
+var _excluded = ["contextIdentifierProvider", "objectAri", "isRenderer"];
 
 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); }; }
 
@@ -115,11 +116,13 @@ var TaskItemWithProviders = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           contextIdentifierProvider = _this$props.contextIdentifierProvider,
           objectAri = _this$props.objectAri,
-          otherProps = _objectWithoutProperties(_this$props, ["contextIdentifierProvider", "objectAri"]);
+          isRenderer = _this$props.isRenderer,
+          otherProps = _objectWithoutProperties(_this$props, _excluded);
 
       var resolvedObjectId = this.state.resolvedContextProvider && this.state.resolvedContextProvider.objectId || objectAri;
       return /*#__PURE__*/React.createElement(ResourcedTaskItem, _extends({}, otherProps, {
-        objectAri: resolvedObjectId
+        objectAri: resolvedObjectId,
+        isRenderer: isRenderer
       }));
     }
   }]);

package/dist/esm/react/nodes/taskItem.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 import TaskItemWithProviders from './task-item-with-providers';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 
@@ -52,6 +52,7 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         objectAri: objectAri,
         taskId: localId,
         isDone: state === 'DONE',
+        isRenderer: true,
         disabled: disabled,
         taskDecisionProvider: taskDecisionProvider,
         contextIdentifierProvider: contextIdentifierProvider,

package/dist/esm/render-document.js

@@ -1,9 +1,10 @@
 import { defaultSchema } from '@atlaskit/adf-schema';
 import { getValidDocument } from '@atlaskit/editor-common/validator';
-import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common';
+import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common/utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';
 import { PLATFORM } from './analytics/events';
 import { trackUnsupportedContentLevels } from './analytics/unsupported-content';
+import { transformMediaLinkMarks } from '@atlaskit/adf-utils';
 var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
 var withStopwatch = function withStopwatch(cb) {
@@ -31,7 +32,21 @@ export var renderDocument = function renderDocument(doc, serializer) {
 
   var _withStopwatch = withStopwatch(function () {
     if (useSpecBasedValidator) {
-      return validateADFEntity(schema, doc, dispatchAnalyticsEvent);
+      // link mark on mediaSingle is deprecated, need to move link mark to child media node
+      // https://product-fabric.atlassian.net/browse/ED-14043
+      var _transformMediaLinkMa = transformMediaLinkMarks(doc),
+          transformedAdf = _transformMediaLinkMa.transformedAdf,
+          isTransformed = _transformMediaLinkMa.isTransformed;
+
+      if (isTransformed && dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: ACTION.MEDIA_LINK_TRANSFORMED,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
+
+      return validateADFEntity(schema, transformedAdf || doc, dispatchAnalyticsEvent);
     }
 
     return getValidDocument(doc, schema, adfStage);

package/dist/esm/text/nodes/date.js

@@ -1,4 +1,4 @@
-import { timestampToIsoFormat } from '@atlaskit/editor-common';
+import { timestampToIsoFormat } from '@atlaskit/editor-common/utils';
 import { getText } from '../../utils';
 
 var date = function date(node, schema) {

package/dist/esm/types/smartLinksOptions.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/Expand.js

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
-import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, ExpandLayoutWrapper, ClearNextSiblingMarginTop } from '@atlaskit/editor-common';
+import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, ExpandLayoutWrapper, ClearNextSiblingMarginTop } from '@atlaskit/editor-common/ui';
 import { akEditorLineHeight, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { PLATFORM, MODE } from '../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics/enums';

package/dist/esm/ui/ExtensionRenderer.js

@@ -12,7 +12,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import memoizeOne from 'memoize-one';
-import { getExtensionRenderer, WithProviders, getNodeRenderer } from '@atlaskit/editor-common';
+import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
 
 var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
   _inherits(ExtensionRenderer, _React$Component);

package/dist/esm/ui/MediaCard.js

@@ -11,9 +11,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject;
 
-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) { _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 _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) { _defineProperty(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 = _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); }; }
 
@@ -24,7 +24,7 @@ import { Component } from 'react';
 import { filter } from '@atlaskit/adf-utils';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client';
-import { withImageLoader } from '@atlaskit/editor-common';
+import { withImageLoader } from '@atlaskit/editor-common/utils';
 import styled from 'styled-components';
 var mediaIdentifierMap = new Map();
 export var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { breakoutConsts } from '@atlaskit/editor-common';
+import { breakoutConsts } from '@atlaskit/editor-common/utils';
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.
@@ -33,13 +33,16 @@ export function createBreakoutInlineScript(id, allowDynamicTextSizing) {
 export var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n");
 
 function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
-  function findUp(element, selector) {
+  var MEDIA_NODE_TYPE = 'mediaSingle';
+  var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+
+  function findUp(element, condition) {
     if (!element) {
       return;
     }
 
     while (element.parentElement) {
-      if (element.parentElement.classList.contains(selector)) {
+      if (condition(element)) {
         return element.parentElement;
       }
 
@@ -47,7 +50,11 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
     }
   }
 
-  var renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), 'ak-renderer-wrapper');
+  var renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), function (elem) {
+    var _elem$parentElement;
+
+    return !!((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('ak-renderer-wrapper'));
+  });
 
   if (!renderer) {
     return;
@@ -64,7 +71,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
           var node = maybeNode;
           var mode = node.dataset.mode || node.dataset.layout || '';
 
-          if (!mode || !['full-width', 'wide'].includes(mode)) {
+          if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
 
@@ -87,9 +94,45 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
             }
           }
         });
+      } else if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not availabe in the above conditional.
+       * Thus adding this conditional to deal with all meida elements directly.
+       */
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        applyMediaBreakout(item.target);
       }
     });
   });
+
+  var applyMediaBreakout = function applyMediaBreakout(card) {
+    // width was already set by another breakout script
+    if (card.style.width) {
+      return;
+    }
+
+    var tableParent = findUp(card, function (elem) {
+      return elem instanceof HTMLTableCellElement;
+    }); // only apply the breakout to media elements not nested inside table
+    // table sizing is not based on percentage width
+
+    if (tableParent) {
+      return;
+    }
+
+    var mode = card.dataset.mode || card.dataset.layout || '';
+    var width = card.dataset.width;
+
+    if (WIDE_LAYOUT_MODES.includes(mode)) {
+      card.style.width = '100%';
+    } else if (width) {
+      card.style.width = "".concat(width, "%");
+    }
+  };
+
   observer.observe(renderer, {
     childList: true,
     subtree: true

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

@@ -7,9 +7,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 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 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) { _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 _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) { _defineProperty(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 = _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); }; }
 
@@ -19,7 +19,9 @@ import React, { useContext, useLayoutEffect, useRef } from 'react';
 import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema';
 import { reduce } from '@atlaskit/adf-utils';
-import { UnsupportedBlock, ProviderFactory, BaseTheme, WidthProvider, getAnalyticsAppearance, getAnalyticsEventSeverity, WithCreateAnalyticsEvent, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, IntlNextErrorBoundary, LegacyToNextIntlProvider, IntlLegacyFallbackProvider } from '@atlaskit/editor-common';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, LegacyToNextIntlProvider, IntlLegacyFallbackProvider, IntlNextErrorBoundary } from '@atlaskit/editor-common/ui';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { IframeWidthObserverFallbackWrapper, IframeWrapperConsumer } from '@atlaskit/width-detector';
@@ -206,6 +208,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         allowMediaLinking: props.media && props.media.allowLinking,
         surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
         media: props.media,
+        smartLinks: props.smartLinks,
         allowCopyToClipboard: props.allowCopyToClipboard,
         allowCustomPanels: props.allowCustomPanels,
         allowAnnotations: props.allowAnnotations,

package/dist/esm/ui/SortingIcon.js

@@ -4,10 +4,12 @@ var _templateObject, _templateObject2;
 
 import React from 'react';
 import styled from 'styled-components';
-import { SortOrder } from '@atlaskit/editor-common';
 import Tooltip from '@atlaskit/tooltip';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N20, N30 } from '@atlaskit/theme/colors'; // We use data url here because of this issue:
+import { N20, N30 } from '@atlaskit/theme/colors';
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { sortingIconMessages } from '../messages';
+import { injectIntl } from 'react-intl-next'; // We use data url here because of this issue:
 // https://product-fabric.atlassian.net/browse/ED-8001
 // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
 
@@ -38,29 +40,37 @@ var getClassName = function getClassName(status) {
   }
 };
 
-var getTooltipTitle = function getTooltipTitle(status) {
+var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
+  var noOrderLabel = sortingIconMessages.noOrderLabel,
+      ascOrderLabel = sortingIconMessages.ascOrderLabel,
+      descOrderLabel = sortingIconMessages.descOrderLabel,
+      invalidLabel = sortingIconMessages.invalidLabel;
+
+  if (!isSortingAllowed) {
+    return intl.formatMessage(invalidLabel);
+  }
+
   switch (status) {
     case SortOrder.NO_ORDER:
-      return 'Sort column A to Z';
+      return intl.formatMessage(noOrderLabel);
 
     case SortOrder.ASC:
-      return 'Sort column Z to A';
+      return intl.formatMessage(ascOrderLabel);
 
     case SortOrder.DESC:
-      return 'Clear sorting';
+      return intl.formatMessage(descOrderLabel);
   }
 
   return '';
 };
 
-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;
+      sortOrdered = _ref.sortOrdered,
+      intl = _ref.intl;
   var activated = sortOrdered !== SortOrder.NO_ORDER;
   var wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
-  var content = isSortingAllowed ? getTooltipTitle(sortOrdered) : notAllowedTooltip;
+  var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
   return /*#__PURE__*/React.createElement(Tooltip, {
     delay: 0,
     content: content,
@@ -72,4 +82,4 @@ var SortingIcon = function SortingIcon(_ref) {
   })));
 };
 
-export default SortingIcon;
+export default injectIntl(SortingIcon);

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

@@ -10,7 +10,7 @@ import { splitText, calcTextSplitOffset } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import styled from 'styled-components';
-import { AnnotationSharedCSSByState } from '@atlaskit/editor-common';
+import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 var DraftAnnotation = styled.mark(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), AnnotationSharedCSSByState.focus);
 export var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,

package/dist/esm/ui/annotations/element/index.js

@@ -3,7 +3,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { MarkComponent } from './mark';
 import { useInlineCommentSubscriberContext, useHasFocusEvent, useInlineCommentsFilter } from '../hooks';
 import { InlineCommentsStateContext } from '../context';
-import { AnnotationUpdateEvent } from '@atlaskit/editor-common';
+import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 
 var MarkElement = function MarkElement(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/esm/ui/annotations/element/mark.js

@@ -5,12 +5,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-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) { _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 _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) { _defineProperty(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; }
 
 import React, { useMemo, useCallback } from 'react';
-import { AnnotationSharedCSSByState } from '@atlaskit/editor-common';
+import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import styled from 'styled-components';
 var MarkStyled = styled.mark(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState.blur, AnnotationSharedCSSByState.focus);

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -1,12 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-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) { _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 _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) { _defineProperty(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; }
 
 import { useLayoutEffect, useState } from 'react';
-import { AnnotationUpdateEvent } from '@atlaskit/editor-common';
+import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../../analytics/enums';
 import { FabricChannel } from '@atlaskit/analytics-listeners';