@atlaskit/renderer 84.0.0 → 86.0.0

package/dist/es2019/react/hooks/use-observed-width.js

@@ -0,0 +1,59 @@
+import React from 'react';
+let resizeObserver;
+const nodeToCallback = new WeakMap();
+export const useObservedWidth = (node, useObservedWidthFlag) => {
+  const [rect, setRect] = React.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  });
+  React.useEffect(() => {
+    if (!node || !useObservedWidthFlag) {
+      return;
+    }
+
+    if (!resizeObserver) {
+      resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          if (nodeToCallback.has(entry.target)) {
+            nodeToCallback.get(entry.target)(entry.contentRect);
+          }
+        }
+      });
+    }
+
+    nodeToCallback.set(node, rect => {
+      const {
+        x,
+        y,
+        width,
+        height,
+        top,
+        left,
+        bottom,
+        right
+      } = rect;
+      return setRect({
+        x,
+        y,
+        width,
+        height,
+        top,
+        left,
+        bottom,
+        right
+      });
+    });
+    resizeObserver.observe(node);
+    return () => {
+      resizeObserver.unobserve(node);
+      nodeToCallback.delete(node);
+    };
+  }, [node, useObservedWidthFlag]);
+  return rect;
+};

package/dist/es2019/react/index.js

@@ -6,7 +6,8 @@ import { isNestedHeaderLinksEnabled } from './utils/links';
 import { Doc, DocWithSelectAllTrap, mergeTextNodes, isTextWrapper, isTextNode, toReact } from './nodes';
 import TextWrapperComponent from './nodes/text-wrapper';
 import { toReact as markToReact, isAnnotationMark } from './marks';
-import { getMarksByOrder, isSameMark, calcTableColumnWidths } from '@atlaskit/editor-common';
+import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
+import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import { getText } from '../utils';
 import { findChildrenByType } from 'prosemirror-utils';
 import { insideBreakoutLayout } from './renderer-node';
@@ -175,6 +176,7 @@ export default class ReactSerializer {
     this.allowAnnotations = Boolean(init.allowAnnotations);
     this.surroundTextNodesWithTextWrapper = Boolean(init.surroundTextNodesWithTextWrapper);
     this.media = init.media;
+    this.smartLinks = init.smartLinks;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
   }
 
@@ -488,6 +490,7 @@ export default class ReactSerializer {
       fireAnalyticsEvent: this.fireAnalyticsEvent,
       nodeType: node.type.name,
       marks: node.marks,
+      smartLinks: this.smartLinks,
       dataAttributes: {
         // We need to account for depth (path.length gives up depth) here
         // but depth doesnt increment the pos, only accounted for.

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

@@ -1,6 +1,7 @@
 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 const Wrapper = styled.div`
   margin: ${blockNodesVerticalMargin} 0;

package/dist/es2019/react/marks/textColor.js

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 export default function TextColor(props) {
+  const style = useMemo(() => ({
+    ['--custom-text-color']: props.color
+  }), [props.color]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
-    style: {
-      color: props.color
-    }
+    "data-text-custom-color": props.color,
+    className: "fabric-text-color-mark",
+    style: style
   }), props.children);
 }

package/dist/es2019/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/es2019/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';
 
 const RenderCaption = ({
   children,

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

@@ -51,7 +51,8 @@ const {
   Consumer
 } = CopyTextContext;
 export const CopyArea = /*#__PURE__*/React.forwardRef((props, ref) => /*#__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/es2019/react/nodes/date.js

@@ -1,6 +1,7 @@
 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';
 
 class Date extends PureComponent {

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 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/es2019/react/nodes/emoji.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PureComponent } from 'react';
-import { Emoji } from '@atlaskit/editor-common';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 export default class EmojiItem extends PureComponent {
   render() {
     const {

package/dist/es2019/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 const renderExtension = (content, layout, options = {}, removeOverflow) => {
   const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : ''; // by default, we assume the extension is at top level, (direct child of doc node)

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

@@ -39,11 +39,19 @@ class HeadingAnchor extends React.PureComponent {
 
     _defineProperty(this, "setTooltipState", (message, isClicked = false) => {
       this.setState({
+        // TODO: ED-14403 investigate why this does not translate
         tooltipMessage: this.props.intl.formatMessage(message),
         isClicked
       });
     });
 
+    _defineProperty(this, "getCopyAriaLabel", () => {
+      const {
+        copyAriaLabel
+      } = headingAnchorLinkMessages;
+      return this.props.intl.formatMessage(copyAriaLabel);
+    });
+
     _defineProperty(this, "copyToClipboard", async event => {
       const {
         copiedHeadingLinkToClipboard,
@@ -66,9 +74,10 @@ class HeadingAnchor extends React.PureComponent {
     _defineProperty(this, "renderAnchorButton", () => {
       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/es2019/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,33 +10,40 @@ 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';
 const CodeBlock = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_CodeBlock" */
   './codeBlock').then(mod => mod.default),
   loading: () => null
 });
+const TaskList = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_TaskList" */
+  './taskList').then(mod => mod.default),
+  loading: () => null
+});
 const TaskItem = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_TaskItem" */
   './taskItem').then(mod => mod.default),
   loading: () => null
 });
+const DecisionList = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_DecisionList" */
+  './decisionList').then(mod => mod.default),
+  loading: () => null
+});
 const DecisionItem = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_DecisionItem" */
@@ -61,6 +68,18 @@ const Emoji = Loadable({
   './emoji').then(mod => mod.default),
   loading: () => null
 });
+const Panel = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_Panel" */
+  './panel').then(mod => mod.default),
+  loading: () => null
+});
+const EmbedCard = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_EmbedCard" */
+  './embedCard').then(mod => mod.default),
+  loading: () => null
+});
 const InlineCard = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_InlineCard" */
@@ -91,6 +110,12 @@ const MediaInline = Loadable({
   './mediaInline').then(mod => mod.default),
   loading: () => null
 });
+const MediaSingle = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_MediaSingle" */
+  './mediaSingle').then(mod => mod.default),
+  loading: () => null
+});
 const Mention = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_Mention" */

package/dist/es2019/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';
@@ -11,7 +12,8 @@ const InlineCard = props => {
     url,
     data,
     eventHandlers,
-    portal
+    portal,
+    smartLinks
   } = props;
   const onClick = getCardClickHandler(eventHandlers, url);
   const cardProps = {
@@ -20,6 +22,14 @@ const InlineCard = props => {
     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/es2019/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/es2019/react/nodes/media.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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/es2019/react/nodes/mediaInline.js

@@ -1,6 +1,6 @@
 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 const RenderMediaInline = props => {
   const {
     mediaProvider

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

@@ -1,11 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
 
@@ -39,131 +39,151 @@ export const getMediaContainerWidth = (currentContainerWidth, layout) => {
   return !currentContainerWidth && layout !== 'full-width' && layout !== 'wide' ? akEditorDefaultLayoutWidth : currentContainerWidth;
 };
 
-class MediaSingle extends Component {
-  constructor(props) {
-    super(props);
+const MediaSingle = props => {
+  var _ref$current;
 
-    _defineProperty(this, "onExternalImageLoaded", ({
+  const {
+    rendererAppearance,
+    featureFlags,
+    isInsideOfBlockNode,
+    allowDynamicTextSizing,
+    layout,
+    children,
+    width: pctWidth
+  } = props;
+  const isCaptionsFlaggedOn = getMediaFeatureFlag('captions', featureFlags);
+  const [externalImageDimensions, setExternalImageDimensions] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const ref = React.useRef(null);
+  const onExternalImageLoaded = React.useCallback(({
+    width,
+    height
+  }) => {
+    setExternalImageDimensions({
       width,
       height
-    }) => {
-      this.setState({
-        width,
-        height
-      });
     });
+  }, []);
+  const observedWidthFlag = getMediaFeatureFlag('observedWidth', featureFlags);
+  const {
+    width: observedWidth
+  } = useObservedWidth((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement, observedWidthFlag);
+  let media;
+  const [node, caption] = React.Children.toArray(children);
 
-    _defineProperty(this, "isCaptionsFlaggedOn", getMediaFeatureFlag('captions', this.props.featureFlags));
+  if (!isMediaElement(node)) {
+    const mediaElement = checkForMediaElement(node.props.children);
 
-    this.state = {}; // Need to initialize with empty state.
-  }
+    if (!mediaElement) {
+      return node;
+    }
 
-  render() {
-    const {
-      props
-    } = this;
-    let media;
-    const [node, caption] = React.Children.toArray(props.children);
+    media = mediaElement;
+  } else {
+    media = node;
+  }
 
-    if (!isMediaElement(node)) {
-      const mediaElement = checkForMediaElement(node.props.children);
+  let {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    type
+  } = media.props;
 
-      if (!mediaElement) {
-        return node;
-      }
+  if (type === 'external') {
+    const {
+      width: stateWidth,
+      height: stateHeight
+    } = externalImageDimensions;
 
-      media = mediaElement;
-    } else {
-      media = node;
+    if (width === null) {
+      width = stateWidth || DEFAULT_WIDTH;
     }
 
-    let {
-      width = DEFAULT_WIDTH,
-      height = DEFAULT_HEIGHT,
-      type
-    } = media.props;
-
-    if (type === 'external') {
-      const {
-        width: stateWidth,
-        height: stateHeight
-      } = this.state;
-
-      if (width === null) {
-        width = stateWidth || DEFAULT_WIDTH;
-      }
+    if (height === null) {
+      height = stateHeight || DEFAULT_HEIGHT;
+    }
+  }
 
-      if (height === null) {
-        height = stateHeight || DEFAULT_HEIGHT;
+  if (width === null) {
+    width = DEFAULT_WIDTH;
+    height = DEFAULT_HEIGHT;
+  } // TODO: put appearance-based padding into theme instead
+
+
+  const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
+  const isFullWidth = rendererAppearance === 'full-width';
+
+  const calcDimensions = (mediaContainerWidth, mediaBreakpoint) => {
+    const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
+    const breakpoint = mediaBreakpoint || getBreakpoint(containerWidth);
+    const maxWidth = containerWidth;
+    const maxHeight = height / width * maxWidth;
+    const cardDimensions = {
+      width: `${maxWidth}px`,
+      height: `${maxHeight}px`
+    };
+    let nonFullWidthSize = containerWidth;
+
+    if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
+      const isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+
+      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
+        nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
+      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      } else {
+        nonFullWidthSize = containerWidth - padding;
       }
     }
 
-    if (width === null) {
-      width = DEFAULT_WIDTH;
-      height = DEFAULT_HEIGHT;
-    } // TODO: put appearance-based padding into theme instead
-
-
+    const minWidth = Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding);
+    const lineLength = isFullWidth ? minWidth : nonFullWidthSize;
+    return {
+      cardDimensions,
+      lineLength,
+      containerWidth
+    };
+  };
+
+  const originalDimensions = {
+    height,
+    width
+  };
+
+  const renderMediaSingle = (renderWidth, mediaBreakpoint) => {
     const {
-      rendererAppearance,
+      cardDimensions,
+      lineLength,
+      containerWidth
+    } = calcDimensions(renderWidth, mediaBreakpoint);
+    const mediaComponent = /*#__PURE__*/React.cloneElement(media, {
+      resizeMode: 'stretchy-fit',
+      cardDimensions,
+      originalDimensions,
+      onExternalImageLoaded,
+      disableOverlay: true,
       featureFlags
-    } = this.props;
-    const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
-    return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
-      width: widthConsumerValue,
-      breakpoint
-    }) => {
-      const containerWidth = getMediaContainerWidth(widthConsumerValue, props.layout);
-      const {
-        isInsideOfBlockNode,
-        allowDynamicTextSizing
-      } = this.props;
-      const maxWidth = containerWidth;
-      const maxHeight = height / width * maxWidth;
-      const cardDimensions = {
-        width: `${maxWidth}px`,
-        height: `${maxHeight}px`
-      };
-      const isFullWidth = rendererAppearance === 'full-width';
-      let nonFullWidthSize = containerWidth;
-
-      if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-        const isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
-
-        if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-          nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
-        } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-          nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
-        } else {
-          nonFullWidthSize = containerWidth - padding;
-        }
-      }
-
-      const lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-      const originalDimensions = {
-        height,
-        width
-      };
-      const mediaComponent = /*#__PURE__*/React.cloneElement(media, {
-        resizeMode: 'stretchy-fit',
-        cardDimensions,
-        originalDimensions,
-        onExternalImageLoaded: this.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), this.isCaptionsFlaggedOn && caption);
     });
-  }
-
-}
+    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, ({
+    width,
+    breakpoint
+  }) => {
+    return renderMediaSingle(width, breakpoint);
+  });
+};
 
 export default injectIntl(MediaSingle);

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common';
+import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 export const ExtendedUIMediaSingle = styled(UIMediaSingle)`
   ${({
   layout