@atlaskit/editor-plugin-media 8.8.0 → 8.10.0

package/dist/es2019/mediaPlugin.js

@@ -6,7 +6,6 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { lazyMediaView } from './nodeviews/lazy-media';
 import { lazyMediaGroupView } from './nodeviews/lazy-media-group';
 import { lazyMediaInlineView } from './nodeviews/lazy-media-inline';
@@ -17,7 +16,7 @@ import { mediaInlineSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaInli
 import { mediaSingleSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaSingle';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
-import { hideMediaViewer, showMediaViewer, trackMediaPaste, hideImageEditor, showImageEditor } from './pm-plugins/commands';
+import { hideMediaViewer, showMediaViewer, trackMediaPaste } from './pm-plugins/commands';
 import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media';
 import linkingPlugin from './pm-plugins/linking';
@@ -27,7 +26,6 @@ import { createPlugin as createMediaPixelResizingPlugin } from './pm-plugins/pix
 import { stateKey } from './pm-plugins/plugin-key';
 import { createMediaIdentifierArray, extractMediaNodes } from './pm-plugins/utils/media-common';
 import { insertMediaAsMediaSingle } from './pm-plugins/utils/media-single';
-import { RenderImageEditor } from './ui/ImageEditor/ModalWrapper';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { RenderMediaViewer } from './ui/MediaViewer/PortalWrapper';
 import { floatingToolbar } from './ui/toolbar';
@@ -101,34 +99,6 @@ const MediaViewerFunctionalComponent = ({
     items: mediaItems
   });
 };
-const imageEditorStateSelector = states => {
-  var _states$mediaState6, _states$mediaState7, _states$mediaState8;
-  return {
-    isImageEditorVisible: (_states$mediaState6 = states.mediaState) === null || _states$mediaState6 === void 0 ? void 0 : _states$mediaState6.isImageEditorVisible,
-    imageEditorSelectedMedia: (_states$mediaState7 = states.mediaState) === null || _states$mediaState7 === void 0 ? void 0 : _states$mediaState7.imageEditorSelectedMedia,
-    mediaClientConfig: (_states$mediaState8 = states.mediaState) === null || _states$mediaState8 === void 0 ? void 0 : _states$mediaState8.mediaClientConfig
-  };
-};
-const ImageEditorFunctionalComponent = ({
-  api
-}) => {
-  const {
-    isImageEditorVisible,
-    imageEditorSelectedMedia,
-    mediaClientConfig
-  } = useSharedPluginStateWithSelector(api, ['media'], imageEditorStateSelector);
-  if (!isImageEditorVisible || !imageEditorSelectedMedia || !mediaClientConfig) {
-    return null;
-  }
-  const handleOnClose = () => {
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.hideImageEditor);
-  };
-  return /*#__PURE__*/React.createElement(RenderImageEditor, {
-    mediaClientConfig: mediaClientConfig,
-    onClose: handleOnClose,
-    selectedNodeAttrs: imageEditorSelectedMedia
-  });
-};
 export const mediaPlugin = ({
   config: options = {},
   api
@@ -183,9 +153,7 @@ export const mediaPlugin = ({
     commands: {
       showMediaViewer,
       hideMediaViewer,
-      trackMediaPaste,
-      showImageEditor,
-      hideImageEditor
+      trackMediaPaste
     },
     nodes() {
       const {
@@ -351,10 +319,7 @@ export const mediaPlugin = ({
       if (!editorView) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(React.Fragment, null, (options === null || options === void 0 ? void 0 : options.allowImageEditing) && expValEquals('platform_editor_add_image_editing', 'isEnabled', true) && /*#__PURE__*/React.createElement(ImageEditorFunctionalComponent, {
-        api: api,
-        editorView: editorView
-      }), /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
         api: api,
         editorView: editorView
       }), /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
@@ -385,7 +350,7 @@ export const mediaPlugin = ({
           allowLinking: options && options.allowLinking,
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
-          allowImageEditing: options && options.allowImageEditing,
+          allowImageEditing: !!(api !== null && api !== void 0 && api.mediaEditing) && options && options.allowImageEditing,
           allowImagePreview: options && options.allowImagePreview,
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -1,11 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { bind } from 'bind-event-listener';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
@@ -37,6 +40,13 @@ class MediaNodeView extends SelectionBasedNodeView {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "isSelected", false);
+    _defineProperty(this, "hasBeenResized", false);
+    _defineProperty(this, "hasResizedListener", () => {
+      if (!this.hasBeenResized) {
+        this.hasBeenResized = true;
+        this.update(this.node, this.decorations);
+      }
+    });
     _defineProperty(this, "onExternalImageLoaded", dimensions => {
       const getPos = this.getPos;
       const {
@@ -55,9 +65,37 @@ class MediaNodeView extends SelectionBasedNodeView {
         }, true)(this.view.state, this.view.dispatch);
       }
     });
+    _defineProperty(this, "getMaxCardDimensions", () => {
+      const flexibleDimensions = {
+        width: '100%',
+        height: '100%'
+      };
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        const pos = this.getPos();
+        if (typeof pos !== 'number') {
+          return flexibleDimensions;
+        }
+        if (this.hasBeenResized) {
+          return flexibleDimensions;
+        }
+        const mediaSingleNodeParent = this.getMediaSingleNode(this.getPos);
+
+        // If media parent not found, return default
+        if (!mediaSingleNodeParent) {
+          return flexibleDimensions;
+        }
+
+        // Compute normal dimensions
+        const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
+        return {
+          width: `${maxWidth}px`,
+          height: '100%'
+        };
+      }
+      return flexibleDimensions;
+    });
     _defineProperty(this, "renderMediaNodeWithState", contextIdentifierProvider => {
       return ({
-        width: editorWidth,
         mediaProvider,
         interactionState
       }) => {
@@ -85,20 +123,17 @@ class MediaNodeView extends SelectionBasedNodeView {
         }
         width = width || DEFAULT_IMAGE_WIDTH;
         height = height || DEFAULT_IMAGE_HEIGHT;
+        const {
+          pluginInjectionApi
+        } = this.reactComponentProps;
 
         // mediaSingle defines the max dimensions, so we don't need to constrain twice.
-        const maxDimensions = {
-          width: `100%`,
-          height: `100%`
-        };
+        const maxDimensions = this.getMaxCardDimensions();
         const originalDimensions = {
           width,
           height
         };
         const isSelectedAndInteracted = this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
-        const {
-          pluginInjectionApi
-        } = this.reactComponentProps;
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: this.view,
@@ -129,6 +164,39 @@ class MediaNodeView extends SelectionBasedNodeView {
       });
     });
   }
+  getMediaSingleNode(getPos) {
+    const pos = getPos();
+    if (typeof pos !== 'number') {
+      return null;
+    }
+    const $pos = this.view.state.doc.resolve(pos);
+
+    // The parent of the media node should be mediaSingle
+    if ($pos.parent && $pos.parent.type.name === 'mediaSingle') {
+      return $pos.parent;
+    }
+    return null;
+  }
+  getMaxWidthFromMediaSingleNode(mediaSingleNode) {
+    const {
+      width: widthAttr,
+      widthType: widthTypeAttr,
+      layout: layoutAttr
+    } = mediaSingleNode.attrs;
+    // for extended mediaSingle nodes with width and widthType attributes ( default behaviour )
+    if (widthAttr && widthTypeAttr === 'pixel') {
+      return widthAttr;
+    }
+    // for legacy mediaSingle nodes without widthType attribute
+    switch (layoutAttr) {
+      case 'full-width':
+        return akEditorFullWidthLayoutWidth;
+      case 'wide':
+        return akEditorCalculatedWideLayoutWidth;
+      default:
+        return akEditorDefaultLayoutWidth;
+    }
+  }
   createDomRef() {
     const domRef = document.createElement('div');
     if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
@@ -136,6 +204,12 @@ class MediaNodeView extends SelectionBasedNodeView {
       // see also: https://github.com/ProseMirror/prosemirror/issues/884
       domRef.contentEditable = 'true';
     }
+    if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      this.resizeListenerBinding = bind(domRef, {
+        type: 'resized',
+        listener: this.hasResizedListener
+      });
+    }
     return domRef;
   }
   viewShouldUpdate(nextNode, decorations) {
@@ -179,6 +253,12 @@ class MediaNodeView extends SelectionBasedNodeView {
       renderNode: this.renderMediaNodeWithProviders
     });
   }
+  destroy() {
+    if (this.resizeListenerBinding) {
+      this.resizeListenerBinding();
+    }
+    super.destroy();
+  }
 }
 export const ReactMediaNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
   return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {

package/dist/es2019/nodeviews/mediaSingle.js

@@ -13,6 +13,7 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaSingleNodeNext } from './mediaSingleNext';
 const selector = states => {
@@ -84,6 +85,7 @@ class MediaSingleNodeView extends ReactNodeView {
     _defineProperty(this, "lastOffsetLeft", 0);
     _defineProperty(this, "forceViewUpdate", false);
     _defineProperty(this, "selectionType", null);
+    _defineProperty(this, "hasResized", false);
     _defineProperty(this, "checkAndUpdateSelectionType", () => {
       const getPos = this.getPos;
       const {
@@ -98,7 +100,7 @@ class MediaSingleNodeView extends ReactNodeView {
       let pos;
       try {
         pos = getPos ? getPos() : undefined;
-      } catch (e) {
+      } catch {
         pos = undefined;
       }
       const isNodeSelected = isNodeSelectedOrInRange(selection.$anchor.pos, selection.$head.pos, pos, this.node.nodeSize);
@@ -188,6 +190,11 @@ class MediaSingleNodeView extends ReactNodeView {
     if (!isValidUpdate) {
       isValidUpdate = (currentNode, newNode) => this.getNodeMediaId(currentNode) === this.getNodeMediaId(newNode);
     }
+    // Detect mediaSingle width attribute changes and signal child media node to update
+    if (!this.hasResized && this.node.attrs.width !== node.attrs.width && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      const target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
+      target === null || target === void 0 ? void 0 : target.dispatchEvent(new CustomEvent('resized'));
+    }
     return super.update(node, decorations, _innerDecorations, isValidUpdate);
   }
   render(props, forwardRef) {

package/dist/es2019/pm-plugins/commands.js

@@ -30,26 +30,4 @@ export const trackMediaPaste = attrs => ({
     identifier
   });
   return tr;
-};
-export const showImageEditor = media => ({
-  tr
-}) => {
-  tr.setMeta(stateKey, {
-    type: ACTIONS.SHOW_IMAGE_EDITOR,
-    imageEditorSelectedMedia: media,
-    isImageEditorVisible: true
-  });
-  tr.setMeta('addToHistory', false);
-  return tr;
-};
-export const hideImageEditor = ({
-  tr
-}) => {
-  tr.setMeta(stateKey, {
-    type: ACTIONS.HIDE_IMAGE_EDITOR,
-    imageEditorSelectedMedia: null,
-    isImageEditorVisible: false
-  });
-  tr.setMeta('addToHistory', false);
-  return tr;
 };

package/dist/es2019/pm-plugins/main.js

@@ -67,7 +67,6 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "allowInlineImages", false);
     _defineProperty(this, "uploadInProgressSubscriptions", []);
     _defineProperty(this, "uploadInProgressSubscriptionsNotified", false);
-    _defineProperty(this, "isImageEditorVisible", false);
     // this is only a temporary variable, which gets cleared after the last inserted node has been selected
     _defineProperty(this, "lastAddedMediaSingleFileIds", []);
     _defineProperty(this, "destroyed", false);
@@ -569,9 +568,6 @@ export class MediaPluginStateImplementation {
   setResizingWidth(width) {
     this.resizingWidth = width;
   }
-  setImageEditorVisibility(isVisible) {
-    this.isImageEditorVisible = isVisible;
-  }
   updateElement() {
     let newElement;
     const selectedContainer = this.selectedMediaContainerNode();
@@ -775,16 +771,6 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
               nextPluginState = pluginState.clone();
             }
             break;
-          case ACTIONS.SHOW_IMAGE_EDITOR:
-            pluginState.imageEditorSelectedMedia = meta.imageEditorSelectedMedia;
-            pluginState.isImageEditorVisible = meta.isImageEditorVisible;
-            nextPluginState = nextPluginState.clone();
-            break;
-          case ACTIONS.HIDE_IMAGE_EDITOR:
-            pluginState.imageEditorSelectedMedia = undefined;
-            pluginState.isImageEditorVisible = meta.isImageEditorVisible;
-            nextPluginState = nextPluginState.clone();
-            break;
         }
 
         // NOTE: We're not calling passing new state to the Editor, because we depend on the view.state reference

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -179,6 +179,7 @@ export const ResizableMediaSingleNextFunctional = props => {
   const [snaps, setSnaps] = useState({});
   const [isResizing, setIsResizing] = useState(false);
   const [isVideoFile, setIsVideoFile] = useState(!(fg('platform_editor_media_video_check_fix') || fg('platform_editor_ssr_media')));
+  const [hasResized, setHasResized] = useState(false);
   const nodePosition = useMemo(() => {
     if (typeof getPos !== 'function') {
       return null;
@@ -348,6 +349,7 @@ export const ResizableMediaSingleNextFunctional = props => {
     width: props.width,
     height: props.height
   }));
+  const resizerContainerRef = useRef(null);
   const handleResize = useCallback((size, delta) => {
     const {
       width,
@@ -360,6 +362,14 @@ export const ResizableMediaSingleNextFunctional = props => {
       fullWidthMode,
       isNestedNode: isAdjacentMode
     })(size, delta, false, aspectRatioRef.current);
+    const resizerDomEl = resizerContainerRef.current;
+    if (resizerDomEl && !hasResized && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      // dispatch resize event to media node DOM element inside resizerDom
+      const mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
+      const event = new CustomEvent('resized');
+      mediaDomEl === null || mediaDomEl === void 0 ? void 0 : mediaDomEl.dispatchEvent(event);
+      setHasResized(true);
+    }
     if (isGuidelineEnabled) {
       const guidelineSnaps = getGuidelineSnaps(guidelinesRef.current, lineLength, layout);
       updateActiveGuidelines(width, guidelinesRef.current, guidelineSnaps);
@@ -379,7 +389,7 @@ export const ResizableMediaSingleNextFunctional = props => {
     if (newLayout !== layout) {
       updateSize(width, newLayout);
     }
-  }, [view, updateSize, layout, isGuidelineEnabled, containerWidth, lineLength, fullWidthMode, isAdjacentMode, updateActiveGuidelines]);
+  }, [layout, containerWidth, lineLength, fullWidthMode, isAdjacentMode, hasResized, isGuidelineEnabled, view, updateActiveGuidelines, updateSize]);
   const handleResizeStop = useCallback((size, delta) => {
     var _pluginInjectionApi$g5, _pluginInjectionApi$g6;
     if (typeof nodePosition !== 'number') {
@@ -472,7 +482,8 @@ export const ResizableMediaSingleNextFunctional = props => {
   }, [forceHandlePositioning, isAdjacentMode]);
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: memoizedCss
+    css: memoizedCss,
+    ref: resizerContainerRef
   }, jsx(ResizerNext, {
     minWidth: minViewWidth,
     maxWidth: maxWidth

package/dist/es2019/ui/ResizableMediaSingle/index.js

@@ -14,12 +14,14 @@ import { calculateSnapPoints } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
 import { wrapperStyle } from './styled';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class ResizableMediaSingle extends React.Component {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "hasResized", false);
     _defineProperty(this, "state", {
       offsetLeft: calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
       isVideoFile: !fg('platform_editor_media_video_check_fix')
@@ -43,6 +45,15 @@ export default class ResizableMediaSingle extends React.Component {
           state
         }
       } = this.props;
+      if (!this.hasResized && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        var _this$wrapper;
+        const mediaDomEl = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.querySelector('div[data-prosemirror-node-name="media"]');
+        if (mediaDomEl) {
+          const event = new CustomEvent('resized');
+          mediaDomEl === null || mediaDomEl === void 0 ? void 0 : mediaDomEl.dispatchEvent(event);
+        }
+        this.hasResized = true;
+      }
       const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
       this.setState({
         resizedPctWidth: newPct

package/dist/es2019/ui/toolbar/index.js

@@ -114,11 +114,12 @@ export const handleShowImageEditor = ({
   api,
   mediaPluginState
 }) => {
+  var _api$mediaEditing;
   const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
   if (!selectedNodeAttrs) {
     return false;
   }
-  api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showImageEditor(selectedNodeAttrs));
+  api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$mediaEditing = api.mediaEditing) === null || _api$mediaEditing === void 0 ? void 0 : _api$mediaEditing.commands.showImageEditor(selectedNodeAttrs));
 };
 const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) => {
   var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$c3;
@@ -562,7 +563,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         });
       }
       // Image Editing Support
-      if (allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
+      if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
         var _mediaNode$attrs;
         const selectedMediaSingleNode = getSelectedMediaSingle(state);
         const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;