@atlaskit/editor-plugin-media 1.27.1 → 1.27.2

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

@@ -0,0 +1,22 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ReactMediaInlineNode } from './mediaInline';
+export var lazyMediaInlineView = function 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: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = import( /* 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/esm/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 var lazyMediaSingleView = function lazyMediaSingleView(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
+  var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+  if (!fg('platform_editor_lazy-node-views')) {
+    return ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options);
+  }
+  return withLazyLoading({
+    nodeName: 'mediaSingle',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = import( /* 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/esm/nodeviews/lazy-media.js

@@ -0,0 +1,24 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ReactMediaNode } from './mediaNodeView';
+export var 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 (!fg('platform_editor_lazy-node-views')) {
+    return ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
+  }
+  return withLazyLoading({
+    nodeName: 'media',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = import( /* 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/esm/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 as _floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import ToolbarMedia from './ui/ToolbarMedia';
@@ -77,26 +79,25 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
         allowCaptions = _ref4.allowCaptions,
         mediaFeatureFlags = _ref4.featureFlags;
       var allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
-      var mediaSingleOption = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+      var mediaSingleOption = fg('platform.editor.media.extended-resize-experience') ? {
         withCaption: allowCaptions,
         withExtendedWidthTypes: true
       } : {
         withCaption: allowCaptions,
         withExtendedWidthTypes: false
       };
-      var 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(function (node) {
         if (node.name === 'mediaGroup') {
           return allowMediaGroup;
@@ -126,10 +127,10 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
           return createPlugin(schema, {
             providerFactory: 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: errorReporter,
             uploadErrorHandler: options && options.uploadErrorHandler,
@@ -250,7 +251,7 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
           },
           action: function action(insert, state) {
             var _api$analytics4;
-            var pluginState = pluginKey.getState(state);
+            var pluginState = stateKey.getState(state);
             pluginState === null || pluginState === void 0 || pluginState.showMediaPicker();
             var tr = insert('');
             api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || _api$analytics4.actions.attachAnalyticsEvent({

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

@@ -0,0 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { media } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getMediaAttrs } from './toDOMAttrs';
+
+// @nodeSpecException:toDOM patch
+export var mediaSpecWithFixedToDOM = function mediaSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return media;
+  }
+  return _objectSpread(_objectSpread({}, media), {}, {
+    toDOM: function toDOM(node) {
+      var attrs = getMediaAttrs('media', node);
+      return ['div', attrs];
+    }
+  });
+};

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

@@ -0,0 +1,87 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { mediaGroup } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+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.
+ */
+export var defaultImageCardDimensions = {
+  width: 156,
+  height: 125
+};
+export var defaultHorizontalCardDimensions = {
+  width: 435,
+  height: 125
+};
+export var 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 var 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
+export var mediaGroupSpecWithFixedToDOM = function mediaGroupSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return mediaGroup;
+  }
+  return _objectSpread(_objectSpread({}, 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/esm/toDOM-fixes/mediaInline.js

@@ -0,0 +1,41 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { mediaInline } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getMediaAttrs } from './toDOMAttrs';
+var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", ";");
+// Matches media
+var fallbackAspectRatio = 1.25;
+
+// @nodeSpecException:toDOM patch
+export var mediaInlineSpecWithFixedToDOM = function mediaInlineSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return mediaInline;
+  }
+  return _objectSpread(_objectSpread({}, mediaInline), {}, {
+    toDOM: function toDOM(node) {
+      var dataAttrs = 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/esm/toDOM-fixes/mediaSingle.js

@@ -0,0 +1,152 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { mediaSingleSpec } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getAttrsFromNodeMediaSingle, getMediaAttrs } from './toDOMAttrs';
+var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
+export var 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 var 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.
+ */
+export 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
+export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDOM(mediaSingleOption) {
+  var mediaSingleNode = mediaSingleSpec(mediaSingleOption);
+  if (!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 = 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' ? 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)", ";")
+      })]];
+    }
+  });
+};

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

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { N30 } from '@atlaskit/theme/colors';
+
+/**
+ * Copied from `packages/adf-schema/src/schema/nodes/media.ts`
+ *
+ * When we patch adf-schema with media `toDOM` fixes we can remove this.
+ */
+export var 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(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;
+};
+export var 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.
+ */
+export var 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/types/media-plugin-options.d.ts

@@ -1,12 +1,11 @@
+import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ErrorReporter } from '@atlaskit/editor-common/utils';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import type { CustomMediaPicker, getPosHandler, MediaState } from './types';
+import type { CustomMediaPicker, MediaState } from './types';
 export type MediaPluginOptions = {
     providerFactory: ProviderFactory;
     nodeViews: {
-        [name: string]: (node: PMNode, view: EditorView, getPos: getPosHandler) => NodeView;
+        [name: string]: NodeViewConstructor;
     };
     errorReporter?: ErrorReporter;
     uploadErrorHandler?: (state: MediaState) => void;

package/dist/types/nodeviews/lazy-media-group.d.ts

@@ -0,0 +1,7 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
+import type { MediaOptions } from '../types';
+export declare const lazyMediaGroupView: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, options: MediaOptions | undefined, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types/nodeviews/lazy-media-inline.d.ts

@@ -0,0 +1,7 @@
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
+export declare const lazyMediaInlineView: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types/nodeviews/lazy-media-single.d.ts

@@ -0,0 +1,9 @@
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { type NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
+import type { MediaOptions } from '../types';
+export declare const lazyMediaSingleView: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, dispatchAnalyticsEvent?: DispatchAnalyticsEvent, options?: MediaOptions) => NodeViewConstructor;

package/dist/types/nodeviews/lazy-media.d.ts

@@ -0,0 +1,8 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { type NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
+import type { MediaOptions } from '../types';
+export declare const lazyMediaView: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, options: MediaOptions | undefined, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => NodeViewConstructor;

package/dist/types/toDOM-fixes/media.d.ts

@@ -0,0 +1 @@
+export declare const mediaSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types/toDOM-fixes/mediaGroup.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 declare const defaultImageCardDimensions: {
+    width: number;
+    height: number;
+};
+export declare const defaultHorizontalCardDimensions: {
+    width: number;
+    height: number;
+};
+export declare const defaultSquareCardDimensions: {
+    width: number;
+    height: number;
+};
+/**
+ * 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 declare const getDefaultCardDimensions: (appearance?: 'image' | 'square' | 'horizontal' | 'auto') => Required<typeof defaultImageCardDimensions>;
+export declare const mediaGroupSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types/toDOM-fixes/mediaInline.d.ts

@@ -0,0 +1 @@
+export declare const mediaInlineSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;