@atlaskit/renderer 84.1.0 → 87.0.0

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

@@ -27,7 +27,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _types = require("@atlaskit/editor-common/types");
 
 var _SortingIcon = _interopRequireDefault(require("../../ui/SortingIcon"));
 
@@ -37,6 +39,10 @@ var _enums = require("../../analytics/enums");
 
 var _consts = require("../../consts");
 
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../../messages");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
@@ -45,32 +51,36 @@ var IgnoreSorting = ['LABEL', 'INPUT'];
 
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
-    case _editorCommon.SortOrder.NO_ORDER:
-      return _editorCommon.SortOrder.ASC;
+    case _types.SortOrder.NO_ORDER:
+      return _types.SortOrder.ASC;
 
-    case _editorCommon.SortOrder.ASC:
-      return _editorCommon.SortOrder.DESC;
+    case _types.SortOrder.ASC:
+      return _types.SortOrder.DESC;
 
-    case _editorCommon.SortOrder.DESC:
-      return _editorCommon.SortOrder.NO_ORDER;
+    case _types.SortOrder.DESC:
+      return _types.SortOrder.NO_ORDER;
   }
 
-  return _editorCommon.SortOrder.NO_ORDER;
+  return _types.SortOrder.NO_ORDER;
 };
 
-var getSortOrderLabel = function getSortOrderLabel(currentSortOrder) {
+var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
+  var noneSortingLabel = _messages.tableCellMessages.noneSortingLabel,
+      ascSortingLabel = _messages.tableCellMessages.ascSortingLabel,
+      descSortingLabel = _messages.tableCellMessages.descSortingLabel;
+
   switch (currentSortOrder) {
-    case _editorCommon.SortOrder.NO_ORDER:
-      return 'none';
+    case _types.SortOrder.NO_ORDER:
+      return intl.formatMessage(noneSortingLabel);
 
-    case _editorCommon.SortOrder.ASC:
-      return 'ascending';
+    case _types.SortOrder.ASC:
+      return intl.formatMessage(ascSortingLabel);
 
-    case _editorCommon.SortOrder.DESC:
-      return 'descending';
+    case _types.SortOrder.DESC:
+      return intl.formatMessage(descSortingLabel);
 
     default:
-      return 'none';
+      return intl.formatMessage(noneSortingLabel);
   }
 };
 
@@ -146,7 +156,7 @@ var withCellProps = function withCellProps(WrapperComponent) {
 };
 
 var withSortableColumn = function withSortableColumn(WrapperComponent) {
-  return /*#__PURE__*/function (_React$Component2) {
+  var WithSortableColumn = /*#__PURE__*/function (_React$Component2) {
     (0, _inherits2.default)(WithSortableColumn, _React$Component2);
 
     var _super2 = _createSuper(WithSortableColumn);
@@ -217,8 +227,9 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
             onSorting = _this$props3.onSorting,
             children = _this$props3.children,
             sortOrdered = _this$props3.sortOrdered,
-            isHeaderRow = _this$props3.isHeaderRow;
-        var sortOrderedClassName = sortOrdered === _editorCommon.SortOrder.NO_ORDER ? _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
+            isHeaderRow = _this$props3.isHeaderRow,
+            intl = _this$props3.intl;
+        var sortOrderedClassName = sortOrdered === _types.SortOrder.NO_ORDER ? _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
 
         if (!allowColumnSorting || !isHeaderRow) {
           return /*#__PURE__*/_react.default.createElement(WrapperComponent, this.props);
@@ -232,7 +243,7 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
 
         return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({}, this.props, {
           className: className,
-          ariaSort: getSortOrderLabel(sortOrdered)
+          ariaSort: getSortOrderLabel(intl, sortOrdered)
         }), /*#__PURE__*/_react.default.createElement("div", {
           className: _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON,
           role: "button",
@@ -251,10 +262,12 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
     }]);
     return WithSortableColumn;
   }(_react.default.Component);
+
+  return (0, _reactIntlNext.injectIntl)(WithSortableColumn);
 };
 
 exports.withSortableColumn = withSortableColumn;
-var TableHeader = (0, _editorCommon.compose)(withSortableColumn, withCellProps)('th');
+var TableHeader = (0, _utils.compose)(withSortableColumn, withCellProps)('th');
 exports.TableHeader = TableHeader;
 var TableCell = withCellProps('td');
 exports.TableCell = TableCell;

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

@@ -23,7 +23,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _types = require("@atlaskit/editor-common/types");
 
 var _consts = require("../../consts");
 
@@ -59,10 +61,10 @@ var TableRow = /*#__PURE__*/function (_React$Component) {
         childrenArray = childrenArray.map(function (child, index) {
           if ( /*#__PURE__*/_react.default.isValidElement(child)) {
             var tableOrderStatus = _this.props.tableOrderStatus;
-            var sortOrdered = _editorCommon.SortOrder.NO_ORDER;
+            var sortOrdered = _types.SortOrder.NO_ORDER;
 
             if (tableOrderStatus) {
-              sortOrdered = index === tableOrderStatus.columnIndex ? tableOrderStatus.order : _editorCommon.SortOrder.NO_ORDER;
+              sortOrdered = index === tableOrderStatus.columnIndex ? tableOrderStatus.order : _types.SortOrder.NO_ORDER;
             }
 
             return /*#__PURE__*/_react.default.cloneElement(child, {
@@ -106,7 +108,7 @@ var TableRow = /*#__PURE__*/function (_React$Component) {
         ref: innerRef
       }, this.props.isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("td", {
         className: _consts.RendererCssClassName.NUMBER_COLUMN
-      }, this.props.index), (0, _editorCommon.compose)(this.addSortableColumn, this.addColGroupWidth)(childrenArray));
+      }, this.props.index), (0, _utils.compose)(this.addSortableColumn, this.addColGroupWidth)(childrenArray));
     }
   }]);
   return TableRow;

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

@@ -35,6 +35,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _taskDecision = require("@atlaskit/task-decision");
 
+var _excluded = ["contextIdentifierProvider", "objectAri", "isRenderer"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -138,10 +140,12 @@ var TaskItemWithProviders = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           contextIdentifierProvider = _this$props.contextIdentifierProvider,
           objectAri = _this$props.objectAri,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["contextIdentifierProvider", "objectAri"]);
+          isRenderer = _this$props.isRenderer,
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var resolvedObjectId = this.state.resolvedContextProvider && this.state.resolvedContextProvider.objectId || objectAri;
       return /*#__PURE__*/_react.default.createElement(_taskDecision.ResourcedTaskItem, (0, _extends2.default)({}, otherProps, {
-        objectAri: resolvedObjectId
+        objectAri: resolvedObjectId,
+        isRenderer: isRenderer
       }));
     }
   }]);

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

@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
 var _taskItemWithProviders = _interopRequireDefault(require("./task-item-with-providers"));
 
@@ -73,13 +73,14 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         objectAri: objectAri,
         taskId: localId,
         isDone: state === 'DONE',
+        isRenderer: true,
         disabled: disabled,
         taskDecisionProvider: taskDecisionProvider,
         contextIdentifierProvider: contextIdentifierProvider,
         dataAttributes: dataAttributes
       }, children));
     });
-    _this.providerFactory = props.providers || new _editorCommon.ProviderFactory();
+    _this.providerFactory = props.providers || new _providerFactory.ProviderFactory();
     return _this;
   }
 
@@ -95,7 +96,7 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['taskDecisionProvider', 'contextIdentifierProvider'],
         providerFactory: this.providerFactory,
         renderNode: this.renderWithProvider

package/dist/cjs/render-document.js

@@ -9,7 +9,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 
 var _validator = require("@atlaskit/editor-common/validator");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _enums = require("./analytics/enums");
 
@@ -17,6 +17,8 @@ var _events = require("./analytics/events");
 
 var _unsupportedContent = require("./analytics/unsupported-content");
 
+var _adfUtils = require("@atlaskit/adf-utils");
+
 var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
 var withStopwatch = function withStopwatch(cb) {
@@ -44,7 +46,21 @@ var renderDocument = function renderDocument(doc, serializer) {
 
   var _withStopwatch = withStopwatch(function () {
     if (useSpecBasedValidator) {
-      return (0, _editorCommon.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 = (0, _adfUtils.transformMediaLinkMarks)(doc),
+          transformedAdf = _transformMediaLinkMa.transformedAdf,
+          isTransformed = _transformMediaLinkMa.isTransformed;
+
+      if (isTransformed && dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: _enums.ACTION.MEDIA_LINK_TRANSFORMED,
+          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+          eventType: _enums.EVENT_TYPE.OPERATIONAL
+        });
+      }
+
+      return (0, _utils.validateADFEntity)(schema, transformedAdf || doc, dispatchAnalyticsEvent);
     }
 
     return (0, _validator.getValidDocument)(doc, schema, adfStage);
@@ -114,7 +130,7 @@ var renderDocument = function renderDocument(doc, serializer) {
   stat.serializeTime = serializeTime;
 
   if (dispatchAnalyticsEvent && useSpecBasedValidator) {
-    (0, _editorCommon.findAndTrackUnsupportedContentNodes)(node, schema, dispatchAnalyticsEvent);
+    (0, _utils.findAndTrackUnsupportedContentNodes)(node, schema, dispatchAnalyticsEvent);
 
     if (unsupportedContentLevelsTracking !== null && unsupportedContentLevelsTracking !== void 0 && unsupportedContentLevelsTracking.enabled) {
       var documentData = {

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
-var _utils = require("../../utils");
+var _utils2 = require("../../utils");
 
 var date = function date(node, schema) {
-  return node.attrs.timestamp ? (0, _editorCommon.timestampToIsoFormat)(node.attrs.timestamp) : (0, _utils.getText)(node);
+  return node.attrs.timestamp ? (0, _utils.timestampToIsoFormat)(node.attrs.timestamp) : (0, _utils2.getText)(node);
 };
 
 var _default = date;

package/dist/cjs/types/smartLinksOptions.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/Expand.js

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

package/dist/cjs/ui/ExtensionRenderer.js

@@ -25,7 +25,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _extensions = require("@atlaskit/editor-common/extensions");
+
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -57,7 +61,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_editorCommon.getNodeRenderer));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider) {
       var _this$props = _this.props,
           extensionHandlers = _this$props.extensionHandlers,
@@ -81,7 +85,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
 
       try {
         if (extensionHandlers && extensionHandlers[extensionType]) {
-          var render = (0, _editorCommon.getExtensionRenderer)(extensionHandlers[extensionType]);
+          var render = (0, _utils.getExtensionRenderer)(extensionHandlers[extensionType]);
           result = render(node, rendererContext.adDoc);
         }
 
@@ -133,7 +137,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
         return this.setupAndRenderExtensionNode({});
       }
 
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['extensionProvider'],
         providerFactory: providers,
         renderNode: this.setupAndRenderExtensionNode

package/dist/cjs/ui/MediaCard.js

@@ -37,7 +37,7 @@ var _mediaCard = require("@atlaskit/media-card");
 
 var _mediaClient = require("@atlaskit/media-client");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -47,9 +47,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -459,5 +459,5 @@ var getClipboardAttrs = function getClipboardAttrs(_ref2) {
 };
 
 exports.getClipboardAttrs = getClipboardAttrs;
-var MediaCard = (0, _editorCommon.withImageLoader)(MediaCardInternal);
+var MediaCard = (0, _utils.withImageLoader)(MediaCardInternal);
 exports.MediaCard = MediaCard;

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

@@ -11,7 +11,7 @@ exports.createBreakoutInlineScript = createBreakoutInlineScript;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 /**
  * Inline Script that updates breakout node width on client side,
@@ -44,17 +44,20 @@ function createBreakoutInlineScript(id, allowDynamicTextSizing) {
   return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", ").concat(allowDynamicTextSizing, ", breakoutConsts);\n  })(window);\n");
 }
 
-var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_editorCommon.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_editorCommon.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_editorCommon.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_editorCommon.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_editorCommon.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_editorCommon.breakoutConsts.calcWideWidth.toString(), ";\n");
+var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n");
 exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
 
 function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
-  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;
       }
 
@@ -62,7 +65,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;
@@ -79,7 +86,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;
           }
 
@@ -102,9 +109,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
@@ -128,5 +171,5 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
   window.addEventListener('load', disconnect);
 }
 
-var calcLineLength = _editorCommon.breakoutConsts.calcLineLength;
+var calcLineLength = _utils.breakoutConsts.calcLineLength;
 exports.calcLineLength = calcLineLength;