@atlaskit/editor-plugin-media 1.27.1 → 1.27.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 1.27.2
+
+### Patch Changes
+
+- [#125044](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125044)
+  [`340243f088aaf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/340243f088aaf) -
+  Use lazy node view behind a feature flag for media nodes.
+
 ## 1.27.1
 
 ### Patch Changes

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyMediaGroupView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mediaGroup = require("./mediaGroup");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var lazyMediaGroupView = exports.lazyMediaGroupView = function lazyMediaGroupView(portalProviderAPI, eventDispatcher, providerFactory) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var api = arguments.length > 4 ? arguments[4] : undefined;
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'mediaGroup',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-group-lazy-node-view" */
+        './mediaGroup'));
+      }).then(function (_ref) {
+        var ReactMediaGroupNode = _ref.ReactMediaGroupNode;
+        return function (node, view, getPos) {
+          return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyMediaInlineView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mediaInline = require("./mediaInline");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var lazyMediaInlineView = exports.lazyMediaInlineView = function lazyMediaInlineView(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'mediaInline',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-inline-lazy-node-view" */
+        './mediaInline'));
+      }).then(function (_ref) {
+        var ReactMediaInlineNode = _ref.ReactMediaInlineNode;
+        return function (node, view, getPos) {
+          return ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyMediaSingleView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mediaSingle = require("./mediaSingle");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var lazyMediaSingleView = exports.lazyMediaSingleView = function lazyMediaSingleView(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
+  var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'mediaSingle',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-single-lazy-node-view" */
+        './mediaSingle'));
+      }).then(function (_ref) {
+        var ReactMediaSingleNode = _ref.ReactMediaSingleNode;
+        return function (node, view, getPos) {
+          return ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyMediaView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mediaNodeView = require("./mediaNodeView");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var lazyMediaView = exports.lazyMediaView = function lazyMediaView(portalProviderAPI, eventDispatcher, providerFactory) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var api = arguments.length > 4 ? arguments[4] : undefined;
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'media',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-lazy-node-view" */
+        './mediaNodeView'));
+      }).then(function (_ref) {
+        var ReactMediaNode = _ref.ReactMediaNode;
+        return function (node, view, getPos) {
+          return ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

package/dist/cjs/plugin.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, "insertMediaSingleNode", {
 });
 exports.mediaPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -21,10 +20,10 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _mediaCommon = require("@atlaskit/media-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _mediaGroup = require("./nodeviews/mediaGroup");
-var _mediaInline = require("./nodeviews/mediaInline");
-var _mediaNodeView = require("./nodeviews/mediaNodeView");
-var _mediaSingle = require("./nodeviews/mediaSingle");
+var _lazyMedia = require("./nodeviews/lazy-media");
+var _lazyMediaGroup = require("./nodeviews/lazy-media-group");
+var _lazyMediaInline = require("./nodeviews/lazy-media-inline");
+var _lazyMediaSingle = require("./nodeviews/lazy-media-single");
 var _altText = require("./pm-plugins/alt-text");
 var _keymap = _interopRequireDefault(require("./pm-plugins/alt-text/keymap"));
 var _keymap2 = _interopRequireDefault(require("./pm-plugins/keymap"));
@@ -32,6 +31,10 @@ var _keymapMediaSingle = _interopRequireDefault(require("./pm-plugins/keymap-med
 var _linking = _interopRequireDefault(require("./pm-plugins/linking"));
 var _keymap3 = _interopRequireDefault(require("./pm-plugins/linking/keymap"));
 var _main = require("./pm-plugins/main");
+var _media = require("./toDOM-fixes/media");
+var _mediaGroup = require("./toDOM-fixes/mediaGroup");
+var _mediaInline = require("./toDOM-fixes/mediaInline");
+var _mediaSingle = require("./toDOM-fixes/mediaSingle");
 var _toolbar = require("./toolbar");
 var _MediaPicker = require("./ui/MediaPicker");
 var _ToolbarMedia = _interopRequireDefault(require("./ui/ToolbarMedia"));
@@ -88,26 +91,25 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         allowCaptions = _ref4.allowCaptions,
         mediaFeatureFlags = _ref4.featureFlags;
       var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
-      var mediaSingleOption = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
+      var mediaSingleOption = (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') ? {
         withCaption: allowCaptions,
         withExtendedWidthTypes: true
       } : {
         withCaption: allowCaptions,
         withExtendedWidthTypes: false
       };
-      var mediaSingleNode = (0, _adfSchema.mediaSingleSpec)(mediaSingleOption);
       return [{
         name: 'mediaGroup',
-        node: _adfSchema.mediaGroup
+        node: (0, _mediaGroup.mediaGroupSpecWithFixedToDOM)()
       }, {
         name: 'mediaSingle',
-        node: mediaSingleNode
+        node: (0, _mediaSingle.mediaSingleSpecWithFixedToDOM)(mediaSingleOption)
       }, {
         name: 'media',
-        node: _adfSchema.media
+        node: (0, _media.mediaSpecWithFixedToDOM)()
       }, {
         name: 'mediaInline',
-        node: _adfSchema.mediaInline
+        node: (0, _mediaInline.mediaInlineSpecWithFixedToDOM)()
       }].filter(function (node) {
         if (node.name === 'mediaGroup') {
           return allowMediaGroup;
@@ -137,10 +139,10 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
           return (0, _main.createPlugin)(schema, {
             providerFactory: providerFactory,
             nodeViews: {
-              mediaGroup: (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaSingle: (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
-              media: (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaInline: (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory, api)
+              mediaGroup: (0, _lazyMediaGroup.lazyMediaGroupView)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaSingle: (0, _lazyMediaSingle.lazyMediaSingleView)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
+              media: (0, _lazyMedia.lazyMediaView)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaInline: (0, _lazyMediaInline.lazyMediaInlineView)(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
             errorReporter: errorReporter,
             uploadErrorHandler: options && options.uploadErrorHandler,

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaSpecWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _toDOMAttrs = require("./toDOMAttrs");
+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; }
+// @nodeSpecException:toDOM patch
+var mediaSpecWithFixedToDOM = exports.mediaSpecWithFixedToDOM = function mediaSpecWithFixedToDOM() {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.media;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.media), {}, {
+    toDOM: function toDOM(node) {
+      var attrs = (0, _toDOMAttrs.getMediaAttrs)('media', node);
+      return ['div', attrs];
+    }
+  });
+};

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

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaGroupSpecWithFixedToDOM = exports.getDefaultCardDimensions = exports.defaultSquareCardDimensions = exports.defaultImageCardDimensions = exports.defaultHorizontalCardDimensions = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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; }
+var skeletonStyling = "background: ".concat("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.
+ */
+var defaultImageCardDimensions = exports.defaultImageCardDimensions = {
+  width: 156,
+  height: 125
+};
+var defaultHorizontalCardDimensions = exports.defaultHorizontalCardDimensions = {
+  width: 435,
+  height: 125
+};
+var defaultSquareCardDimensions = exports.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.
+ */
+var getDefaultCardDimensions = exports.getDefaultCardDimensions = function getDefaultCardDimensions() {
+  var appearance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'auto';
+  if (appearance === 'image') {
+    return defaultImageCardDimensions;
+  }
+  if (appearance === 'square') {
+    return defaultSquareCardDimensions;
+  }
+  if (appearance === 'horizontal') {
+    return defaultHorizontalCardDimensions;
+  }
+  return defaultImageCardDimensions;
+};
+
+// @nodeSpecException:toDOM patch
+var mediaGroupSpecWithFixedToDOM = exports.mediaGroupSpecWithFixedToDOM = function mediaGroupSpecWithFixedToDOM() {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.mediaGroup;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.mediaGroup), {}, {
+    toDOM: function toDOM(node) {
+      var childNodes = [];
+      for (var i = 0; i < node.childCount; i++) {
+        var _getDefaultCardDimens = getDefaultCardDimensions(),
+          width = _getDefaultCardDimens.width,
+          height = _getDefaultCardDimens.height;
+        var nodeHolder = ['img', {
+          width: width,
+          height: height,
+          // Transparent image workaround to control styling
+          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+          style: "margin-left: ".concat(i !== 0 ? "4px" : '0', "; margin-right: 4px; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(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'
+      }].concat(childNodes);
+    }
+  });
+};

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaInlineSpecWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _toDOMAttrs = require("./toDOMAttrs");
+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; }
+var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", ";");
+// Matches media
+var fallbackAspectRatio = 1.25;
+
+// @nodeSpecException:toDOM patch
+var mediaInlineSpecWithFixedToDOM = exports.mediaInlineSpecWithFixedToDOM = function mediaInlineSpecWithFixedToDOM() {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.mediaInline;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.mediaInline), {}, {
+    toDOM: function toDOM(node) {
+      var dataAttrs = (0, _toDOMAttrs.getMediaAttrs)('mediaInline', node);
+      if (node.attrs.type === 'image') {
+        var aspectRatio = node.attrs.width && node.attrs.height ? node.attrs.width / node.attrs.height : fallbackAspectRatio;
+        return ['span', _objectSpread(_objectSpread({}, 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: ".concat(aspectRatio, "; height: 100%; width: 100%; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(skeletonStyling)
+        }]];
+      } else {
+        return ['span', _objectSpread(_objectSpread({}, dataAttrs), {}, {
+          style: "display: inline-block; transform: translateY(6px); ".concat(skeletonStyling),
+          class: 'media-inline-image-wrapper'
+        }), ['span', {
+          style: "display: inline-block; height: 100%; width: 100%; aspect-ratio: ".concat(fallbackAspectRatio, ";")
+        }]];
+      }
+    }
+  });
+};

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

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMediaSinglePixelWidth = getMediaSinglePixelWidth;
+exports.wrappedLayouts = exports.shouldAddDefaultWrappedWidth = exports.mediaSingleSpecWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _toDOMAttrs = require("./toDOMAttrs");
+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; }
+var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
+var wrappedLayouts = exports.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.
+ */
+var shouldAddDefaultWrappedWidth = exports.shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
+  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+};
+var MEDIA_SINGLE_GUTTER_SIZE = 24;
+var DEFAULT_EMBED_CARD_WIDTH = 680;
+var 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.
+ */
+function getMediaSinglePixelWidth(width, editorWidth) {
+  var widthType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'percentage';
+  var gutterOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 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(_ref) {
+  var childNode = _ref.childNode,
+    mediaSingleWidth = _ref.mediaSingleWidth,
+    widthType = _ref.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.
+  var editorWidth = 760;
+  var width = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width;
+  var 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;
+  }
+  var isHeightOnly = width === undefined;
+  if (mediaSingleWidth) {
+    var pxWidth = getMediaSinglePixelWidth(mediaSingleWidth, editorWidth, widthType, MEDIA_SINGLE_GUTTER_SIZE);
+    if (isHeightOnly) {
+      return {
+        width: pxWidth - akEditorMediaResizeHandlerPaddingWide,
+        height: height
+      };
+    } else {
+      return {
+        width: pxWidth,
+        height: height / width * pxWidth
+      };
+    }
+  } else if (isHeightOnly) {
+    return {
+      width: DEFAULT_EMBED_CARD_WIDTH - akEditorMediaResizeHandlerPaddingWide,
+      height: height
+    };
+  }
+  return {
+    height: height,
+    width: width
+  };
+}
+function computeLayoutStyles(width, layout) {
+  switch (layout) {
+    case 'align-end':
+      return "margin-left: auto; margin-right: 0; width: ".concat(width, "px;");
+    case 'align-start':
+      return "margin-left: 0; margin-right: auto; width: ".concat(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
+var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDOM(mediaSingleOption) {
+  var mediaSingleNode = (0, _adfSchema.mediaSingleSpec)(mediaSingleOption);
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return mediaSingleNode;
+  }
+  return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
+    toDOM: function toDOM(node) {
+      var _mediaSingleAttrs$lay, _childNode$type;
+      var childNode = node.firstChild;
+      var mediaSingleAttrs = node.attrs;
+      var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
+      var mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
+      var widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
+      var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)(mediaSingleOption.withExtendedWidthTypes, node);
+      var mediaAttrs = (childNode === null || childNode === void 0 || (_childNode$type = childNode.type) === null || _childNode$type === void 0 ? void 0 : _childNode$type.name) === 'media' ? (0, _toDOMAttrs.getMediaAttrs)('media', childNode) : undefined;
+      var _computeMediaSingleDi = computeMediaSingleDimensions({
+          childNode: childNode,
+          widthType: widthType,
+          mediaSingleWidth: mediaSingleWidth
+        }),
+        width = _computeMediaSingleDi.width,
+        height = _computeMediaSingleDi.height;
+      var layoutStyles = computeLayoutStyles(width, layout);
+      var style = "display: block; margin-top: ".concat("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', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
+          src: childNode.attrs.url,
+          style: style
+        })]];
+      }
+      return ['div', dataAttrs, ['div', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
+        // Transparent image workaround to control styling
+        style: "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(style, " ").concat(skeletonStyling, " border-radius: ", "var(--ds-border-radius, 3px)", ";")
+      })]];
+    }
+  });
+};