@atlaskit/editor-plugin-media 8.4.15 → 8.4.16

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-media
 
+## 8.4.16
+
+### Patch Changes
+
+- [`1344d6deac8a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1344d6deac8a3) -
+  provide better max dimensions to media to fix blurry image on load
+- [`e3779b75fdeca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3779b75fdeca) -
+  EDITOR-1643 Promote syncBlock and bodiedSyncBlock to full schema
+- Updated dependencies
+
 ## 8.4.15
 
 ### Patch Changes

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

@@ -19,7 +19,9 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClient = require("@atlaskit/media-client");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _helpers = require("../../pm-plugins/commands/helpers");
 var _mediaCommon = require("../../pm-plugins/utils/media-common");
 var _media = _interopRequireDefault(require("./media"));
@@ -75,6 +77,22 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }, true)(_this.view.state, _this.view.dispatch);
       }
     });
+    (0, _defineProperty2.default)(_this, "getMaxCardDimensions", function (editorWidth) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
+        if (mediaSingleNodeParent) {
+          var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent, editorWidth === null || editorWidth === void 0 ? void 0 : editorWidth.width);
+          return {
+            width: "".concat(maxWidth, "px"),
+            height: '100%'
+          };
+        }
+      }
+      return {
+        width: '100%',
+        height: '100%'
+      };
+    });
     (0, _defineProperty2.default)(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
         var _this$reactComponentP;
@@ -98,18 +116,15 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }
         width = width || _mediaSingle.DEFAULT_IMAGE_WIDTH;
         height = height || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
 
         // mediaSingle defines the max dimensions, so we don't need to constrain twice.
-        var maxDimensions = {
-          width: "100%",
-          height: "100%"
-        };
+        var maxDimensions = _this.getMaxCardDimensions(editorWidth);
         var originalDimensions = {
           width: width,
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
-        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
         return /*#__PURE__*/_react.default.createElement(_media.default, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -140,6 +155,44 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }
   (0, _inherits2.default)(MediaNodeView, _SelectionBasedNodeVi);
   return (0, _createClass2.default)(MediaNodeView, [{
+    key: "getMediaSingleNode",
+    value: function getMediaSingleNode(getPos) {
+      var pos = getPos();
+      if (typeof pos !== 'number') {
+        return null;
+      }
+      var $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;
+    }
+  }, {
+    key: "getMaxWidthFromMediaSingleNode",
+    value: function getMaxWidthFromMediaSingleNode(mediaSingleNode, containerWidth) {
+      var _mediaSingleNode$attr = mediaSingleNode.attrs,
+        widthAttr = _mediaSingleNode$attr.width,
+        widthTypeAttr = _mediaSingleNode$attr.widthType,
+        layoutAttr = _mediaSingleNode$attr.layout;
+      if (widthAttr && widthTypeAttr === 'pixel') {
+        return widthAttr;
+      }
+      // on SSR mode, containerWidth from widthPluginState can be 0
+      if (!containerWidth) {
+        switch (layoutAttr) {
+          case 'full-width':
+            return _editorSharedStyles.akEditorFullWidthLayoutWidth;
+          case 'wide':
+            return _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
+          default:
+            return _editorSharedStyles.akEditorDefaultLayoutWidth;
+        }
+      }
+      return containerWidth;
+    }
+  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');

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

@@ -5,7 +5,9 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 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
@@ -55,6 +57,22 @@ class MediaNodeView extends SelectionBasedNodeView {
         }, true)(this.view.state, this.view.dispatch);
       }
     });
+    _defineProperty(this, "getMaxCardDimensions", editorWidth => {
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        const mediaSingleNodeParent = this.getMediaSingleNode(this.getPos);
+        if (mediaSingleNodeParent) {
+          const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent, editorWidth === null || editorWidth === void 0 ? void 0 : editorWidth.width);
+          return {
+            width: `${maxWidth}px`,
+            height: '100%'
+          };
+        }
+      }
+      return {
+        width: '100%',
+        height: '100%'
+      };
+    });
     _defineProperty(this, "renderMediaNodeWithState", contextIdentifierProvider => {
       return ({
         width: editorWidth,
@@ -85,20 +103,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(editorWidth);
         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 +144,41 @@ 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, containerWidth) {
+    const {
+      width: widthAttr,
+      widthType: widthTypeAttr,
+      layout: layoutAttr
+    } = mediaSingleNode.attrs;
+    if (widthAttr && widthTypeAttr === 'pixel') {
+      return widthAttr;
+    }
+    // on SSR mode, containerWidth from widthPluginState can be 0
+    if (!containerWidth) {
+      switch (layoutAttr) {
+        case 'full-width':
+          return akEditorFullWidthLayoutWidth;
+        case 'wide':
+          return akEditorCalculatedWideLayoutWidth;
+        default:
+          return akEditorDefaultLayoutWidth;
+      }
+    }
+    return containerWidth;
+  }
   createDomRef() {
     const domRef = document.createElement('div');
     if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {

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

@@ -18,7 +18,9 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 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
@@ -69,6 +71,22 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }, true)(_this.view.state, _this.view.dispatch);
       }
     });
+    _defineProperty(_this, "getMaxCardDimensions", function (editorWidth) {
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
+        if (mediaSingleNodeParent) {
+          var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent, editorWidth === null || editorWidth === void 0 ? void 0 : editorWidth.width);
+          return {
+            width: "".concat(maxWidth, "px"),
+            height: '100%'
+          };
+        }
+      }
+      return {
+        width: '100%',
+        height: '100%'
+      };
+    });
     _defineProperty(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
         var _this$reactComponentP;
@@ -92,18 +110,15 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }
         width = width || DEFAULT_IMAGE_WIDTH;
         height = height || DEFAULT_IMAGE_HEIGHT;
+        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
 
         // mediaSingle defines the max dimensions, so we don't need to constrain twice.
-        var maxDimensions = {
-          width: "100%",
-          height: "100%"
-        };
+        var maxDimensions = _this.getMaxCardDimensions(editorWidth);
         var originalDimensions = {
           width: width,
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
-        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -134,6 +149,44 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }
   _inherits(MediaNodeView, _SelectionBasedNodeVi);
   return _createClass(MediaNodeView, [{
+    key: "getMediaSingleNode",
+    value: function getMediaSingleNode(getPos) {
+      var pos = getPos();
+      if (typeof pos !== 'number') {
+        return null;
+      }
+      var $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;
+    }
+  }, {
+    key: "getMaxWidthFromMediaSingleNode",
+    value: function getMaxWidthFromMediaSingleNode(mediaSingleNode, containerWidth) {
+      var _mediaSingleNode$attr = mediaSingleNode.attrs,
+        widthAttr = _mediaSingleNode$attr.width,
+        widthTypeAttr = _mediaSingleNode$attr.widthType,
+        layoutAttr = _mediaSingleNode$attr.layout;
+      if (widthAttr && widthTypeAttr === 'pixel') {
+        return widthAttr;
+      }
+      // on SSR mode, containerWidth from widthPluginState can be 0
+      if (!containerWidth) {
+        switch (layoutAttr) {
+          case 'full-width':
+            return akEditorFullWidthLayoutWidth;
+          case 'wide':
+            return akEditorCalculatedWideLayoutWidth;
+          default:
+            return akEditorDefaultLayoutWidth;
+        }
+      }
+      return containerWidth;
+    }
+  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');

package/dist/types/nodeviews/mediaNodeView/index.d.ts

@@ -9,7 +9,7 @@ import type { SharedInteractionState } from '@atlaskit/editor-plugin-interaction
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
-import type { getPosHandler, MediaOptions } from '../../types';
+import type { getPosHandler, getPosHandlerNode, MediaOptions } from '../../types';
 import type { MediaNodeViewProps } from '../types';
 interface MediaNodeWithPluginStateComponentProps {
     interactionState?: SharedInteractionState['interactionState'];
@@ -18,6 +18,8 @@ interface MediaNodeWithPluginStateComponentProps {
 }
 declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     private isSelected;
+    getMediaSingleNode(getPos: getPosHandlerNode): PMNode | null;
+    getMaxWidthFromMediaSingleNode(mediaSingleNode: PMNode, containerWidth?: number): number;
     createDomRef(): HTMLElement;
     viewShouldUpdate(nextNode: PMNode, decorations: Decoration[]): boolean;
     stopEvent(event: Event): boolean;
@@ -27,6 +29,10 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         height: number;
         width: number;
     }) => void;
+    getMaxCardDimensions: (editorWidth?: WidthPluginState) => {
+        width: string;
+        height: string;
+    };
     renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth, mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
     renderMediaNodeWithProviders: ({ contextIdentifierProvider }: Providers) => React.JSX.Element;
     render(): React.JSX.Element;

package/dist/types-ts4.5/nodeviews/mediaNodeView/index.d.ts

@@ -9,7 +9,7 @@ import type { SharedInteractionState } from '@atlaskit/editor-plugin-interaction
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
-import type { getPosHandler, MediaOptions } from '../../types';
+import type { getPosHandler, getPosHandlerNode, MediaOptions } from '../../types';
 import type { MediaNodeViewProps } from '../types';
 interface MediaNodeWithPluginStateComponentProps {
     interactionState?: SharedInteractionState['interactionState'];
@@ -18,6 +18,8 @@ interface MediaNodeWithPluginStateComponentProps {
 }
 declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     private isSelected;
+    getMediaSingleNode(getPos: getPosHandlerNode): PMNode | null;
+    getMaxWidthFromMediaSingleNode(mediaSingleNode: PMNode, containerWidth?: number): number;
     createDomRef(): HTMLElement;
     viewShouldUpdate(nextNode: PMNode, decorations: Decoration[]): boolean;
     stopEvent(event: Event): boolean;
@@ -27,6 +29,10 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         height: number;
         width: number;
     }) => void;
+    getMaxCardDimensions: (editorWidth?: WidthPluginState) => {
+        width: string;
+        height: string;
+    };
     renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth, mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
     renderMediaNodeWithProviders: ({ contextIdentifierProvider }: Providers) => React.JSX.Element;
     render(): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.4.15",
+	"version": "8.4.16",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.4.0",
+		"@atlaskit/adf-schema": "^51.5.1",
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/button": "^23.6.0",
@@ -61,12 +61,12 @@
 		"@atlaskit/media-filmstrip": "^51.1.0",
 		"@atlaskit/media-picker": "^70.1.0",
 		"@atlaskit/media-ui": "^28.7.0",
-		"@atlaskit/media-viewer": "^52.4.0",
+		"@atlaskit/media-viewer": "^52.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/textfield": "^8.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^14.2.0",
+		"@atlaskit/tmp-editor-statsig": "^14.5.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.36.0",
+		"@atlaskit/editor-common": "^110.38.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",