@atlaskit/renderer 84.1.1 → 88.0.0

package/dist/esm/react/marks/annotation.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 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; }
 
 import React from 'react';
 import { buildAnnotationMarkDataAttributes } from '@atlaskit/adf-schema';

package/dist/esm/react/marks/breakout.js

@@ -4,7 +4,8 @@ var _templateObject;
 
 import React from 'react';
 import styled from 'styled-components';
-import { calcBreakoutWidth, WidthConsumer } from '@atlaskit/editor-common';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 export var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), blockNodesVerticalMargin);
 export default function Breakout(props) {

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { Card } from '@atlaskit/smart-card';
-import { UnsupportedBlock } from '@atlaskit/editor-common';
+import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { getCardClickHandler } from '../utils/getCardClickHandler';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Caption } from '@atlaskit/editor-common';
+import { Caption } from '@atlaskit/editor-common/ui';
 
 var RenderCaption = function RenderCaption(_ref) {
   var children = _ref.children,

package/dist/esm/react/nodes/copy-text-provider.js

@@ -79,7 +79,8 @@ var Provider = CopyTextContext.Provider,
     Consumer = CopyTextContext.Consumer;
 export var CopyArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+    ,
     style: {
       position: 'absolute',
       left: '-9999px',

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

@@ -10,7 +10,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { isPastDate, timestampToString, timestampToTaskContext, DateSharedCssClassName } from '@atlaskit/editor-common';
+import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { isPastDate, timestampToString, timestampToTaskContext } from '@atlaskit/editor-common/utils';
 import { injectIntl } from 'react-intl-next';
 
 var Date = /*#__PURE__*/function (_PureComponent) {

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

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2;
 
 import React, { useMemo, useContext, useState, useRef } from 'react';
 import { Card, Context as CardContext, EmbedResizeMessageListener } from '@atlaskit/smart-card';
-import { WidthConsumer, mapBreakpointToLayoutMaxWidth, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common';
+import { WidthConsumer, mapBreakpointToLayoutMaxWidth, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, getAkEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';

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

@@ -10,7 +10,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { Emoji } from '@atlaskit/editor-common';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 
 var EmojiItem = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiItem, _PureComponent);

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
-import { calcBreakoutWidth, overflowShadow, WidthConsumer } from '@atlaskit/editor-common';
+import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
 export var renderExtension = function renderExtension(content, layout) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

package/dist/esm/react/nodes/heading-anchor.js

@@ -13,6 +13,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 
 var _templateObject;
 
+var _excluded = ["children"];
+
 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; } }
@@ -27,7 +29,7 @@ import { headingAnchorLinkMessages } from '../../messages';
 export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
-      rest = _objectWithoutProperties(props, ["children"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
     className: HeadingAnchorWrapperClassName,
@@ -61,11 +63,17 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       var isClicked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
       _this.setState({
+        // TODO: ED-14403 investigate why this does not translate
         tooltipMessage: _this.props.intl.formatMessage(message),
         isClicked: isClicked
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getCopyAriaLabel", function () {
+      var copyAriaLabel = headingAnchorLinkMessages.copyAriaLabel;
+      return _this.props.intl.formatMessage(copyAriaLabel);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "copyToClipboard", /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
         var copiedHeadingLinkToClipboard, failedToCopyHeadingLink;
@@ -111,9 +119,10 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderAnchorButton", function () {
       return /*#__PURE__*/React.createElement(CopyAnchorButton, {
         onMouseLeave: _this.resetMessage,
-        onClick: _this.copyToClipboard
+        onClick: _this.copyToClipboard,
+        "aria-label": _this.state.tooltipMessage
       }, /*#__PURE__*/React.createElement(LinkIcon, {
-        label: "copy",
+        label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
         primaryColor: _this.state.isClicked ? B400 : N200
       }));

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

@@ -1,7 +1,7 @@
+import Loadable from 'react-loadable';
 import Blockquote from './blockquote';
 import BodiedExtension from './bodiedExtension';
 import BulletList from './bulletList';
-import DecisionList from './decisionList';
 import Doc, { DocWithSelectAllTrap } from './doc';
 import Extension from './extension';
 import HardBreak from './hardBreak';
@@ -10,21 +10,16 @@ import InlineExtension from './inlineExtension';
 import LayoutSection from './layoutSection';
 import LayoutColumn from './layoutColumn';
 import ListItem from './listItem';
-import MediaSingle from './mediaSingle';
 import Caption from './caption';
 import OrderedList from './orderedList';
-import Panel from './panel';
 import Paragraph from './paragraph';
 import Placeholder from './placeholder';
 import Rule from './rule';
-import TaskList from './taskList';
 import Table from './table';
 import { TableCell, TableHeader } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
-import Loadable from 'react-loadable';
-import EmbedCard from './embedCard';
-import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common';
+import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
 var CodeBlock = Loadable({
   loader: function loader() {
     return import(
@@ -37,6 +32,18 @@ var CodeBlock = Loadable({
     return null;
   }
 });
+var TaskList = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_renderer-node_TaskList" */
+    './taskList').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var TaskItem = Loadable({
   loader: function loader() {
     return import(
@@ -49,6 +56,18 @@ var TaskItem = Loadable({
     return null;
   }
 });
+var DecisionList = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_renderer-node_DecisionList" */
+    './decisionList').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var DecisionItem = Loadable({
   loader: function loader() {
     return import(
@@ -97,6 +116,30 @@ var Emoji = Loadable({
     return null;
   }
 });
+var Panel = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_renderer-node_Panel" */
+    './panel').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
+var EmbedCard = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_renderer-node_EmbedCard" */
+    './embedCard').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var InlineCard = Loadable({
   loader: function loader() {
     return import(
@@ -157,6 +200,18 @@ var MediaInline = Loadable({
     return null;
   }
 });
+var MediaSingle = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_renderer-node_MediaSingle" */
+    './mediaSingle').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var Mention = Loadable({
   loader: function loader() {
     return import(

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Card } from '@atlaskit/smart-card';
-import { UnsupportedInline } from '@atlaskit/editor-common';
+import { CardSSR } from '@atlaskit/smart-card/ssr';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -10,7 +11,8 @@ var InlineCard = function InlineCard(props) {
   var url = props.url,
       data = props.data,
       eventHandlers = props.eventHandlers,
-      portal = props.portal;
+      portal = props.portal,
+      smartLinks = props.smartLinks;
   var onClick = getCardClickHandler(eventHandlers, url);
   var cardProps = {
     url: url,
@@ -18,6 +20,14 @@ var InlineCard = function InlineCard(props) {
     onClick: onClick,
     container: portal
   };
+
+  if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
+    return /*#__PURE__*/React.createElement(CardSSR, {
+      appearance: "inline",
+      url: url
+    });
+  }
+
   return /*#__PURE__*/React.createElement("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WidthProvider, ClearNextSiblingMarginTop } from '@atlaskit/editor-common';
+import { WidthProvider, ClearNextSiblingMarginTop } from '@atlaskit/editor-common/ui';
 export default function LayoutSection(props) {
   return /*#__PURE__*/React.createElement("div", {
     "data-layout-column": true,

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

@@ -13,7 +13,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { WithProviders, MediaLink } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { MediaLink } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../ui/MediaCard';
 import { getEventHandler } from '../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics/enums';

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

@@ -6,9 +6,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); }; }
 

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

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState } from 'react';
 import { MediaInlineCard } from '@atlaskit/media-card';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 export var RenderMediaInline = function RenderMediaInline(props) {
   var mediaProvider = props.mediaProvider;
 

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);