@atlaskit/editor-plugin-media 1.27.1 → 1.27.3

package/dist/cjs/toDOM-fixes/toDOMAttrs.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMediaAttrs = exports.getAttrsFromNodeMediaSingle = exports.camelCaseToKebabCase = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _colors = require("@atlaskit/theme/colors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Copied from `packages/adf-schema/src/schema/nodes/media.ts`
+ *
+ * When we patch adf-schema with media `toDOM` fixes we can remove this.
+ */
+var getMediaAttrs = exports.getMediaAttrs = function getMediaAttrs(nodeName, node) {
+  var copyPrivateAttributes = function copyPrivateAttributes(from, to, map) {
+    if (node.attrs) {
+      Object.keys(node.attrs).forEach(function (key) {
+        if (key[0] === '_' && key[1] === '_' && from[key]) {
+          to[map ? map(key) : key] = from[key];
+        }
+      });
+    }
+  };
+  var attrs = {
+    'data-id': node.attrs.id,
+    'data-node-type': "".concat(nodeName),
+    'data-type': node.attrs.type,
+    'data-collection': node.attrs.collection,
+    'data-occurrence-key': node.attrs.occurrenceKey,
+    'data-width': node.attrs.width,
+    'data-height': node.attrs.height,
+    'data-url': node.attrs.url,
+    'data-alt': node.attrs.alt,
+    // toDOM is used for static rendering as well as editor rendering. This comes into play for
+    // emails, copy/paste, etc, so the title and styling here *is* useful (despite a React-based
+    // node view being used for editing).
+    title: 'Attachment',
+    // Manually kept in sync with the style of media cards. The goal is to render a plain gray
+    // rectangle that provides an affordance for media.
+    style: "display: inline-block; border-radius: 3px; background: ".concat(_colors.N30, "; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);")
+  };
+  copyPrivateAttributes(node.attrs, attrs, function (key) {
+    return "data-".concat(camelCaseToKebabCase(key.slice(2)));
+  });
+  return attrs;
+};
+var camelCaseToKebabCase = exports.camelCaseToKebabCase = function camelCaseToKebabCase(str) {
+  return str.replace(/([^A-Z]+)([A-Z])/g, function (_, x, y) {
+    return "".concat(x, "-").concat(y.toLowerCase());
+  });
+};
+
+/**
+ * Copied from `packages/adf-schema/src/schema/nodes/media-single.ts`
+ *
+ * When we patch adf-schema with media `toDOM` fixes we can remove this.
+ */
+var getAttrsFromNodeMediaSingle = exports.getAttrsFromNodeMediaSingle = function getAttrsFromNodeMediaSingle(withExtendedWidthTypes, node) {
+  var _node$attrs = node.attrs,
+    layout = _node$attrs.layout,
+    width = _node$attrs.width;
+  var attrs = {
+    'data-node-type': 'mediaSingle',
+    'data-layout': layout,
+    'data-width': ''
+  };
+  if (width) {
+    attrs['data-width'] = isFinite(width) && Math.floor(width) === width ? width : width.toFixed(2);
+  }
+  if (withExtendedWidthTypes && node.attrs.widthType) {
+    var widthType = node.attrs.widthType;
+    return _objectSpread(_objectSpread({}, attrs), {}, {
+      'data-width-type': widthType || 'percentage'
+    });
+  }
+  return attrs;
+};

package/dist/cjs/ui/ImageBorder/index.js

@@ -17,6 +17,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles2 = require("./styles");
 /**
@@ -134,7 +135,7 @@ var ImageBorder = function ImageBorder(_ref) {
           return setIsColorSubmenuOpen(!isColorSubmenuOpen);
         });
       }
-    }, (0, _react2.jsx)("span", null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
+    }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
       css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
     })), (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -201,7 +202,7 @@ var ImageBorder = function ImageBorder(_ref) {
           return setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
         });
       }
-    }, (0, _react2.jsx)("span", null, formatMessage(_media.imageBorderMessages.borderSize)), (0, _react2.jsx)("div", {
+    }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.imageBorderMessages.borderSize)), (0, _react2.jsx)("div", {
       css: _styles2.contextualMenuArrow
     })), (0, _react2.jsx)("div", {
       //eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/ui/PixelEntry/index.js

@@ -13,6 +13,7 @@ var _react2 = require("@emotion/react");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _media = require("@atlaskit/editor-common/media");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
+var _primitives = require("@atlaskit/primitives");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("./constants");
@@ -193,6 +194,6 @@ var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     (0, _react2.jsx)("div", {
       css: _styles.pixelSizingFullWidthLabelStyles
-    }, (0, _react2.jsx)("span", null, formatMessage(_media.pixelEntryMessages.fullWidthLabel)))
+    }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.pixelEntryMessages.fullWidthLabel)))
   );
 };

package/dist/es2019/nodeviews/lazy-media-group.js

@@ -0,0 +1,23 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ReactMediaGroupNode } from './mediaGroup';
+export const lazyMediaGroupView = (portalProviderAPI, eventDispatcher, providerFactory, options = {}, api) => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
+  }
+  return withLazyLoading({
+    nodeName: 'mediaGroup',
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-group-lazy-node-view" */
+      './mediaGroup').then(({
+        ReactMediaGroupNode
+      }) => {
+        return (node, view, getPos) => {
+          return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

package/dist/es2019/nodeviews/lazy-media-inline.js

@@ -0,0 +1,23 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ReactMediaInlineNode } from './mediaInline';
+export const lazyMediaInlineView = (portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent);
+  }
+  return withLazyLoading({
+    nodeName: 'mediaInline',
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-inline-lazy-node-view" */
+      './mediaInline').then(({
+        ReactMediaInlineNode
+      }) => {
+        return (node, view, getPos) => {
+          return ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

package/dist/es2019/nodeviews/lazy-media-single.js

@@ -0,0 +1,23 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ReactMediaSingleNode } from './mediaSingle';
+export const lazyMediaSingleView = (portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options = {}) => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options);
+  }
+  return withLazyLoading({
+    nodeName: 'mediaSingle',
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-single-lazy-node-view" */
+      './mediaSingle').then(({
+        ReactMediaSingleNode
+      }) => {
+        return (node, view, getPos) => {
+          return ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

package/dist/es2019/nodeviews/lazy-media.js

@@ -0,0 +1,23 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ReactMediaNode } from './mediaNodeView';
+export const lazyMediaView = (portalProviderAPI, eventDispatcher, providerFactory, options = {}, api) => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
+  }
+  return withLazyLoading({
+    nodeName: 'media',
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-lazy-node-view" */
+      './mediaNodeView').then(({
+        ReactMediaNode
+      }) => {
+        return (node, view, getPos) => {
+          return ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

package/dist/es2019/plugin.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { media, mediaGroup, mediaInline, mediaSingleSpec } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
@@ -7,19 +6,22 @@ import { IconImages } from '@atlaskit/editor-common/quick-insert';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { ReactMediaGroupNode } from './nodeviews/mediaGroup';
-import { ReactMediaInlineNode } from './nodeviews/mediaInline';
-import { ReactMediaNode } from './nodeviews/mediaNodeView';
-import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { lazyMediaView } from './nodeviews/lazy-media';
+import { lazyMediaGroupView } from './nodeviews/lazy-media-group';
+import { lazyMediaInlineView } from './nodeviews/lazy-media-inline';
+import { lazyMediaSingleView } from './nodeviews/lazy-media-single';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
 import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media-single';
 import linkingPlugin from './pm-plugins/linking';
 import keymapLinkingPlugin from './pm-plugins/linking/keymap';
-import { stateKey } from './pm-plugins/main';
-import { createPlugin, stateKey as pluginKey } from './pm-plugins/main';
+import { createPlugin, stateKey } from './pm-plugins/main';
+import { mediaSpecWithFixedToDOM } from './toDOM-fixes/media';
+import { mediaGroupSpecWithFixedToDOM } from './toDOM-fixes/mediaGroup';
+import { mediaInlineSpecWithFixedToDOM } from './toDOM-fixes/mediaInline';
+import { mediaSingleSpecWithFixedToDOM } from './toDOM-fixes/mediaSingle';
 import { floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import ToolbarMedia from './ui/ToolbarMedia';
@@ -77,26 +79,25 @@ export const mediaPlugin = ({
         featureFlags: mediaFeatureFlags
       } = options || {};
       const allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
-      const mediaSingleOption = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+      const mediaSingleOption = fg('platform.editor.media.extended-resize-experience') ? {
         withCaption: allowCaptions,
         withExtendedWidthTypes: true
       } : {
         withCaption: allowCaptions,
         withExtendedWidthTypes: false
       };
-      const mediaSingleNode = mediaSingleSpec(mediaSingleOption);
       return [{
         name: 'mediaGroup',
-        node: mediaGroup
+        node: mediaGroupSpecWithFixedToDOM()
       }, {
         name: 'mediaSingle',
-        node: mediaSingleNode
+        node: mediaSingleSpecWithFixedToDOM(mediaSingleOption)
       }, {
         name: 'media',
-        node: media
+        node: mediaSpecWithFixedToDOM()
       }, {
         name: 'mediaInline',
-        node: mediaInline
+        node: mediaInlineSpecWithFixedToDOM()
       }].filter(node => {
         if (node.name === 'mediaGroup') {
           return allowMediaGroup;
@@ -127,10 +128,10 @@ export const mediaPlugin = ({
           return createPlugin(schema, {
             providerFactory,
             nodeViews: {
-              mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
-              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api)
+              mediaGroup: lazyMediaGroupView(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaSingle: lazyMediaSingleView(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
+              media: lazyMediaView(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaInline: lazyMediaInlineView(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
             errorReporter,
             uploadErrorHandler: options && options.uploadErrorHandler,
@@ -255,7 +256,7 @@ export const mediaPlugin = ({
         icon: () => /*#__PURE__*/React.createElement(IconImages, null),
         action(insert, state) {
           var _api$analytics4;
-          const pluginState = pluginKey.getState(state);
+          const pluginState = stateKey.getState(state);
           pluginState === null || pluginState === void 0 ? void 0 : pluginState.showMediaPicker();
           const tr = insert('');
           api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.attachAnalyticsEvent({

package/dist/es2019/toDOM-fixes/media.js

@@ -0,0 +1,17 @@
+import { media } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getMediaAttrs } from './toDOMAttrs';
+
+// @nodeSpecException:toDOM patch
+export const mediaSpecWithFixedToDOM = () => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return media;
+  }
+  return {
+    ...media,
+    toDOM: node => {
+      const attrs = getMediaAttrs('media', node);
+      return ['div', attrs];
+    }
+  };
+};

package/dist/es2019/toDOM-fixes/mediaGroup.js

@@ -0,0 +1,85 @@
+import { mediaGroup } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"};`;
+
+/**
+ * Duplicate consts from `media-card`.
+ * `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export const defaultImageCardDimensions = {
+  width: 156,
+  height: 125
+};
+export const defaultHorizontalCardDimensions = {
+  width: 435,
+  height: 125
+};
+export const defaultSquareCardDimensions = {
+  width: 300,
+  height: 300
+};
+
+/**
+ * Duplicate logic from `@atlaskit/media-card` for computing the dimensions of a media group card.
+ * From: `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `@atlaskit/media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export const getDefaultCardDimensions = (appearance = 'auto') => {
+  if (appearance === 'image') {
+    return defaultImageCardDimensions;
+  }
+  if (appearance === 'square') {
+    return defaultSquareCardDimensions;
+  }
+  if (appearance === 'horizontal') {
+    return defaultHorizontalCardDimensions;
+  }
+  return defaultImageCardDimensions;
+};
+
+// @nodeSpecException:toDOM patch
+export const mediaGroupSpecWithFixedToDOM = () => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return mediaGroup;
+  }
+  return {
+    ...mediaGroup,
+    toDOM: node => {
+      const childNodes = [];
+      for (let i = 0; i < node.childCount; i++) {
+        const {
+          width,
+          height
+        } = getDefaultCardDimensions();
+        const nodeHolder = ['img', {
+          width,
+          height,
+          // Transparent image workaround to control styling
+          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+          style: `margin-left: ${i !== 0 ? `4px` : '0'}; margin-right: 4px; border-radius: ${"var(--ds-border-radius, 3px)"}; ${skeletonStyling}`
+        }];
+        childNodes.push(nodeHolder);
+      }
+
+      // Margin margin that consolidates the margin in the
+      return ['div', {
+        style: 'margin: "3px 5px";',
+        // From adf-schema
+        'data-node-type': 'mediaGroup'
+      }, ...childNodes];
+    }
+  };
+};

package/dist/es2019/toDOM-fixes/mediaInline.js

@@ -0,0 +1,41 @@
+import { mediaInline } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getMediaAttrs } from './toDOMAttrs';
+const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"};`;
+// Matches media
+const fallbackAspectRatio = 1.25;
+
+// @nodeSpecException:toDOM patch
+export const mediaInlineSpecWithFixedToDOM = () => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return mediaInline;
+  }
+  return {
+    ...mediaInline,
+    toDOM: node => {
+      const dataAttrs = getMediaAttrs('mediaInline', node);
+      if (node.attrs.type === 'image') {
+        const aspectRatio = node.attrs.width && node.attrs.height ? node.attrs.width / node.attrs.height : fallbackAspectRatio;
+        return ['span', {
+          ...dataAttrs,
+          style: 'display: inline-block; transform: translateY(6px)',
+          class: 'media-inline-image-wrapper'
+        }, ['span', {
+          height: '100%',
+          width: '100%',
+          // Transparent image workaround to control styling
+          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+          style: `display: inline-block; aspect-ratio: ${aspectRatio}; height: 100%; width: 100%; border-radius: ${"var(--ds-border-radius, 3px)"}; ${skeletonStyling}`
+        }]];
+      } else {
+        return ['span', {
+          ...dataAttrs,
+          style: `display: inline-block; transform: translateY(6px); ${skeletonStyling}`,
+          class: 'media-inline-image-wrapper'
+        }, ['span', {
+          style: `display: inline-block; height: 100%; width: 100%; aspect-ratio: ${fallbackAspectRatio};`
+        }]];
+      }
+    }
+  };
+};

package/dist/es2019/toDOM-fixes/mediaSingle.js

@@ -0,0 +1,152 @@
+import { mediaSingleSpec } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getAttrsFromNodeMediaSingle, getMediaAttrs } from './toDOMAttrs';
+const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"}; outline: none;`;
+export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
+
+/**
+ * Duplicate of method from `@atlaskit/editor-common/utils`.
+ * `packages/editor/editor-common/src/utils/rich-media-utils.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `@atlaskit/editor-common` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export const shouldAddDefaultWrappedWidth = (layout, width, lineLength) => {
+  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+};
+const MEDIA_SINGLE_GUTTER_SIZE = 24;
+const DEFAULT_EMBED_CARD_WIDTH = 680;
+const akEditorMediaResizeHandlerPaddingWide = 12;
+
+/**
+ * Duplicate of method from `@atlaskit/editor-common/media-single`.
+ * `packages/editor/editor-common/src/media-single/utils.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `@atlaskit/editor-common` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export function getMediaSinglePixelWidth(width, editorWidth, widthType = 'percentage', gutterOffset = 0) {
+  if (widthType === 'pixel') {
+    return width;
+  }
+  return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
+}
+
+/**
+ * Duplicate logic from `@atlaskit/editor-common/ui` for MediaSingle.
+ * `packages/editor/editor-common/src/ui/MediaSingle/index.tsx`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `@atlaskit/editor-common` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+function computeMediaSingleDimensions({
+  childNode,
+  mediaSingleWidth,
+  widthType
+}) {
+  // TODO: We can't retrieve the editor width from here easily.
+  // For now we're using the default line length here, but this will be
+  // incorrect on smaller devices.
+  const editorWidth = 760;
+  const width = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width;
+  const height = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(childNode === null || childNode === void 0 ? void 0 : childNode.attrs.layout, width, editorWidth)) {
+    mediaSingleWidth = widthType === 'pixel' ? editorWidth / 2 : 50;
+  }
+  const isHeightOnly = width === undefined;
+  if (mediaSingleWidth) {
+    const pxWidth = getMediaSinglePixelWidth(mediaSingleWidth, editorWidth, widthType, MEDIA_SINGLE_GUTTER_SIZE);
+    if (isHeightOnly) {
+      return {
+        width: pxWidth - akEditorMediaResizeHandlerPaddingWide,
+        height
+      };
+    } else {
+      return {
+        width: pxWidth,
+        height: height / width * pxWidth
+      };
+    }
+  } else if (isHeightOnly) {
+    return {
+      width: DEFAULT_EMBED_CARD_WIDTH - akEditorMediaResizeHandlerPaddingWide,
+      height
+    };
+  }
+  return {
+    height,
+    width
+  };
+}
+function computeLayoutStyles(width, layout) {
+  switch (layout) {
+    case 'align-end':
+      return `margin-left: auto; margin-right: 0; width: ${width}px;`;
+    case 'align-start':
+      return `margin-left: 0; margin-right: auto; width: ${width}px;`;
+    case 'center':
+      return 'margin-left: auto; margin-right: auto;';
+    case 'full-width':
+    case 'wide':
+      return 'width: 100%; margin-top: 56px; margin-bottom: 56px;';
+    case 'wrap-left':
+      return 'float: left;';
+    case 'wrap-right':
+      return 'float: right;';
+  }
+}
+
+// @nodeSpecException:toDOM patch
+export const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
+  const mediaSingleNode = mediaSingleSpec(mediaSingleOption);
+  if (!fg('platform_editor_lazy-node-views')) {
+    return mediaSingleNode;
+  }
+  return {
+    ...mediaSingleNode,
+    toDOM: node => {
+      var _mediaSingleAttrs$lay, _childNode$type;
+      const childNode = node.firstChild;
+      const mediaSingleAttrs = node.attrs;
+      const layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
+      const mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
+      const widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
+      const dataAttrs = getAttrsFromNodeMediaSingle(mediaSingleOption.withExtendedWidthTypes, node);
+      const mediaAttrs = (childNode === null || childNode === void 0 ? void 0 : (_childNode$type = childNode.type) === null || _childNode$type === void 0 ? void 0 : _childNode$type.name) === 'media' ? getMediaAttrs('media', childNode) : undefined;
+      const {
+        width,
+        height
+      } = computeMediaSingleDimensions({
+        childNode,
+        widthType,
+        mediaSingleWidth
+      });
+      const layoutStyles = computeLayoutStyles(width, layout);
+      const style = `display: block; margin-top: ${"var(--ds-space-300, 24px)"}; margin-bottom: ${"var(--ds-space-300, 24px)"}; ${layoutStyles}`;
+      if ((childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external') {
+        return ['div', dataAttrs, ['img', {
+          ...mediaAttrs,
+          src: childNode.attrs.url,
+          style
+        }]];
+      }
+      return ['div', dataAttrs, ['div', {
+        ...mediaAttrs,
+        // Transparent image workaround to control styling
+        style: `width: ${width}px; height: ${height}px; ${style} ${skeletonStyling} border-radius: ${"var(--ds-border-radius, 3px)"};`
+      }]];
+    }
+  };
+};