@atlaskit/renderer 85.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/ui';
-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/mention.js

@@ -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/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/tableCell.js

@@ -19,6 +19,8 @@ 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) {
@@ -36,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);
   }
 };
 
@@ -126,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);
@@ -201,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) {
@@ -216,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",
@@ -236,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/task-item-with-providers.js

@@ -9,7 +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"];
+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); }; }
 
@@ -116,11 +116,13 @@ var TaskItemWithProviders = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           contextIdentifierProvider = _this$props.contextIdentifierProvider,
           objectAri = _this$props.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

@@ -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

@@ -4,6 +4,7 @@ import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaski
 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/types/smartLinksOptions.js

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

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

@@ -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

@@ -208,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

@@ -7,7 +7,9 @@ import styled from 'styled-components';
 import Tooltip from '@atlaskit/tooltip';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N20, N30 } from '@atlaskit/theme/colors';
-import { SortOrder } from '@atlaskit/editor-common/types'; // We use data url here because of this issue:
+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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "85.0.0",
+	"version": "86.0.0",
 	"sideEffects": false
 }

package/dist/types/analytics/enums.d.ts

@@ -25,7 +25,8 @@ export declare enum ACTION {
     RESOLVED = "resolved",
     CREATE_NOT_ALLOWED = "createNotAllowed",
     UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED = "unsupportedContentLevelsTrackingSucceeded",
-    UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED = "unsupportedContentLevelsTrackingErrored"
+    UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED = "unsupportedContentLevelsTrackingErrored",
+    MEDIA_LINK_TRANSFORMED = "mediaLinkTransformed"
 }
 export declare enum ACTION_SUBJECT {
     RENDERER = "renderer",