@atlaskit/renderer 84.0.0 → 86.0.0

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

@@ -1,23 +1,12 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import { mapBreakpointToLayoutMaxWidth, WidthConsumer } from '@atlaskit/editor-common';
-import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { Component, default as React } from 'react';
+import { default as React } from 'react';
 import { injectIntl } from 'react-intl-next';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { mapBreakpointToLayoutMaxWidth, getBreakpoint, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
+import { useObservedWidth } from '../../hooks/use-observed-width';
 import { ExtendedUIMediaSingle } from './styles';
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
 
@@ -53,146 +42,156 @@ export var getMediaContainerWidth = function getMediaContainerWidth(currentConta
   return !currentContainerWidth && layout !== 'full-width' && layout !== 'wide' ? akEditorDefaultLayoutWidth : currentContainerWidth;
 };
 
-var MediaSingle = /*#__PURE__*/function (_Component) {
-  _inherits(MediaSingle, _Component);
-
-  var _super = _createSuper(MediaSingle);
-
-  function MediaSingle(props) {
-    var _this;
-
-    _classCallCheck(this, MediaSingle);
+var MediaSingle = function MediaSingle(props) {
+  var _ref$current;
+
+  var rendererAppearance = props.rendererAppearance,
+      featureFlags = props.featureFlags,
+      isInsideOfBlockNode = props.isInsideOfBlockNode,
+      allowDynamicTextSizing = props.allowDynamicTextSizing,
+      layout = props.layout,
+      children = props.children,
+      pctWidth = props.width;
+  var isCaptionsFlaggedOn = getMediaFeatureFlag('captions', featureFlags);
+
+  var _React$useState = React.useState({
+    width: 0,
+    height: 0
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      externalImageDimensions = _React$useState2[0],
+      setExternalImageDimensions = _React$useState2[1];
+
+  var ref = React.useRef(null);
+  var onExternalImageLoaded = React.useCallback(function (_ref2) {
+    var width = _ref2.width,
+        height = _ref2.height;
+    setExternalImageDimensions({
+      width: width,
+      height: height
+    });
+  }, []);
+  var observedWidthFlag = getMediaFeatureFlag('observedWidth', featureFlags);
 
-    _this = _super.call(this, props);
+  var _useObservedWidth = useObservedWidth((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement, observedWidthFlag),
+      observedWidth = _useObservedWidth.width;
 
-    _defineProperty(_assertThisInitialized(_this), "onExternalImageLoaded", function (_ref2) {
-      var width = _ref2.width,
-          height = _ref2.height;
+  var media;
 
-      _this.setState({
-        width: width,
-        height: height
-      });
-    });
+  var _React$Children$toArr3 = React.Children.toArray(children),
+      _React$Children$toArr4 = _slicedToArray(_React$Children$toArr3, 2),
+      node = _React$Children$toArr4[0],
+      caption = _React$Children$toArr4[1];
 
-    _defineProperty(_assertThisInitialized(_this), "isCaptionsFlaggedOn", getMediaFeatureFlag('captions', _this.props.featureFlags));
+  if (!isMediaElement(node)) {
+    var mediaElement = checkForMediaElement(node.props.children);
 
-    _this.state = {}; // Need to initialize with empty state.
+    if (!mediaElement) {
+      return node;
+    }
 
-    return _this;
+    media = mediaElement;
+  } else {
+    media = node;
   }
 
-  _createClass(MediaSingle, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var props = this.props;
-      var media;
+  var _media$props = media.props,
+      _media$props$width = _media$props.width,
+      width = _media$props$width === void 0 ? DEFAULT_WIDTH : _media$props$width,
+      _media$props$height = _media$props.height,
+      height = _media$props$height === void 0 ? DEFAULT_HEIGHT : _media$props$height,
+      type = _media$props.type;
 
-      var _React$Children$toArr3 = React.Children.toArray(props.children),
-          _React$Children$toArr4 = _slicedToArray(_React$Children$toArr3, 2),
-          node = _React$Children$toArr4[0],
-          caption = _React$Children$toArr4[1];
+  if (type === 'external') {
+    var stateWidth = externalImageDimensions.width,
+        stateHeight = externalImageDimensions.height;
 
-      if (!isMediaElement(node)) {
-        var mediaElement = checkForMediaElement(node.props.children);
+    if (width === null) {
+      width = stateWidth || DEFAULT_WIDTH;
+    }
 
-        if (!mediaElement) {
-          return node;
-        }
+    if (height === null) {
+      height = stateHeight || DEFAULT_HEIGHT;
+    }
+  }
 
-        media = mediaElement;
+  if (width === null) {
+    width = DEFAULT_WIDTH;
+    height = DEFAULT_HEIGHT;
+  } // TODO: put appearance-based padding into theme instead
+
+
+  var padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
+  var isFullWidth = rendererAppearance === 'full-width';
+
+  var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
+    var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
+    var breakpoint = mediaBreakpoint || getBreakpoint(containerWidth);
+    var maxWidth = containerWidth;
+    var maxHeight = height / width * maxWidth;
+    var cardDimensions = {
+      width: "".concat(maxWidth, "px"),
+      height: "".concat(maxHeight, "px")
+    };
+    var nonFullWidthSize = containerWidth;
+
+    if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
+      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+
+      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
+        nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
+      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
       } else {
-        media = node;
+        nonFullWidthSize = containerWidth - padding;
       }
-
-      var _media$props = media.props,
-          _media$props$width = _media$props.width,
-          width = _media$props$width === void 0 ? DEFAULT_WIDTH : _media$props$width,
-          _media$props$height = _media$props.height,
-          height = _media$props$height === void 0 ? DEFAULT_HEIGHT : _media$props$height,
-          type = _media$props.type;
-
-      if (type === 'external') {
-        var _this$state = this.state,
-            stateWidth = _this$state.width,
-            stateHeight = _this$state.height;
-
-        if (width === null) {
-          width = stateWidth || DEFAULT_WIDTH;
-        }
-
-        if (height === null) {
-          height = stateHeight || DEFAULT_HEIGHT;
-        }
-      }
-
-      if (width === null) {
-        width = DEFAULT_WIDTH;
-        height = DEFAULT_HEIGHT;
-      } // TODO: put appearance-based padding into theme instead
-
-
-      var _this$props = this.props,
-          rendererAppearance = _this$props.rendererAppearance,
-          featureFlags = _this$props.featureFlags;
-      var padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
-      return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
-        var widthConsumerValue = _ref3.width,
-            breakpoint = _ref3.breakpoint;
-        var containerWidth = getMediaContainerWidth(widthConsumerValue, props.layout);
-        var _this2$props = _this2.props,
-            isInsideOfBlockNode = _this2$props.isInsideOfBlockNode,
-            allowDynamicTextSizing = _this2$props.allowDynamicTextSizing;
-        var maxWidth = containerWidth;
-        var maxHeight = height / width * maxWidth;
-        var cardDimensions = {
-          width: "".concat(maxWidth, "px"),
-          height: "".concat(maxHeight, "px")
-        };
-        var isFullWidth = rendererAppearance === 'full-width';
-        var nonFullWidthSize = containerWidth;
-
-        if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-          var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
-
-          if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-            nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
-          } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-            nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
-          } else {
-            nonFullWidthSize = containerWidth - padding;
-          }
-        }
-
-        var lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-        var originalDimensions = {
-          height: height,
-          width: width
-        };
-        var mediaComponent = /*#__PURE__*/React.cloneElement(media, {
-          resizeMode: 'stretchy-fit',
-          cardDimensions: cardDimensions,
-          originalDimensions: originalDimensions,
-          onExternalImageLoaded: _this2.onExternalImageLoaded,
-          disableOverlay: true,
-          featureFlags: featureFlags
-        });
-        return /*#__PURE__*/React.createElement(ExtendedUIMediaSingle, {
-          layout: props.layout,
-          width: width,
-          height: height,
-          lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-          containerWidth: containerWidth,
-          pctWidth: props.width,
-          fullWidthMode: isFullWidth
-        }, /*#__PURE__*/React.createElement(React.Fragment, null, mediaComponent), _this2.isCaptionsFlaggedOn && caption);
-      });
     }
-  }]);
 
-  return MediaSingle;
-}(Component);
+    var minWidth = Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding);
+    var lineLength = isFullWidth ? minWidth : nonFullWidthSize;
+    return {
+      cardDimensions: cardDimensions,
+      lineLength: lineLength,
+      containerWidth: containerWidth
+    };
+  };
+
+  var originalDimensions = {
+    height: height,
+    width: width
+  };
+
+  var renderMediaSingle = function renderMediaSingle(renderWidth, mediaBreakpoint) {
+    var _calcDimensions = calcDimensions(renderWidth, mediaBreakpoint),
+        cardDimensions = _calcDimensions.cardDimensions,
+        lineLength = _calcDimensions.lineLength,
+        containerWidth = _calcDimensions.containerWidth;
+
+    var mediaComponent = /*#__PURE__*/React.cloneElement(media, {
+      resizeMode: 'stretchy-fit',
+      cardDimensions: cardDimensions,
+      originalDimensions: originalDimensions,
+      onExternalImageLoaded: onExternalImageLoaded,
+      disableOverlay: true,
+      featureFlags: featureFlags
+    });
+    return /*#__PURE__*/React.createElement(ExtendedUIMediaSingle, {
+      handleMediaSingleRef: ref,
+      layout: layout,
+      width: width,
+      height: height,
+      lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
+      containerWidth: containerWidth,
+      pctWidth: pctWidth,
+      fullWidthMode: isFullWidth
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+  };
+
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width,
+        breakpoint = _ref3.breakpoint;
+    return renderMediaSingle(width, breakpoint);
+  });
+};
 
 export default injectIntl(MediaSingle);

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,7 +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) {
@@ -29,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);
@@ -64,7 +81,23 @@ export var renderDocument = function renderDocument(doc, serializer) {
 
   var _withStopwatch2 = withStopwatch(function () {
     var pmNode = schema.nodeFromJSON(validDoc);
-    pmNode.check();
+
+    try {
+      pmNode.check();
+    } catch (err) {
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          attributes: {
+            platform: PLATFORM.WEB,
+            error: err === null || err === void 0 ? void 0 : err.toString()
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
+    }
+
     return pmNode;
   }),
       node = _withStopwatch2.output,

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 {};