@atlaskit/editor-plugin-media 14.2.2 → 14.2.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-media
 
+## 14.2.3
+
+### Patch Changes
+
+- [`1586e012495ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1586e012495ed) -
+  [ux] Disables left resize handle on media nodes except for when media is aligned or wrapped right.
+
 ## 14.2.2
 
 ### Patch Changes

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

@@ -21,10 +21,12 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _main = require("../../pm-plugins/main");
 var _analytics = require("../../pm-plugins/utils/analytics");
 var _checkMediaType = require("../../pm-plugins/utils/check-media-type");
+var _constants = require("./constants");
 var _ResizableMediaMigrationNotification = require("./ResizableMediaMigrationNotification");
 var _styled = require("./styled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -285,8 +287,16 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
         right: false
       };
     }
+    var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
     return _ui.handleSides.reduce(function (acc, side) {
       var oppositeSide = side === 'left' ? 'right' : 'left';
+
+      // Disable the left handle up-front (except for layouts where it is the
+      // only handle) before computing whether it would otherwise be enabled.
+      if (side === 'left' && isLeftResizeHandleDisabled && _constants.leftHandleOnlyLayouts.indexOf(layout) === -1) {
+        acc[side] = false;
+        return acc;
+      }
       acc[side] = _utils.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
       if (side === 'left' && isInsideInlineLike) {
         acc[side] = false;

package/dist/cjs/ui/ResizableMediaSingle/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.leftHandleOnlyLayouts = void 0;
+// Layouts where the left handle is the only resize handle today.
+// These must keep the left handle.
+var leftHandleOnlyLayouts = exports.leftHandleOnlyLayouts = ['wrap-right', 'align-end'];

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

@@ -23,6 +23,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _checkMediaType = require("../../pm-plugins/utils/check-media-type");
+var _constants = require("./constants");
 var _styled = require("./styled");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -364,6 +365,7 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
       if (origWidth) {
         ratio = (origHeight / origWidth * 100).toFixed(3);
       }
+      var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
       var enable = {};
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
@@ -371,6 +373,13 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
           enable[side] = false;
           return;
         }
+
+        // Disable the left handle up-front (except for layouts where it is the
+        // only handle) before computing whether it would otherwise be enabled.
+        if (side === 'left' && isLeftResizeHandleDisabled && _constants.leftHandleOnlyLayouts.indexOf(layout) === -1) {
+          enable[side] = false;
+          return;
+        }
         enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
         if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;

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

@@ -17,10 +17,12 @@ import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 import { getMediaResizeAnalyticsEvent } from '../../pm-plugins/utils/analytics';
 import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
+import { leftHandleOnlyLayouts } from './constants';
 import { ResizableMediaMigrationNotification } from './ResizableMediaMigrationNotification';
 import { wrapperStyle } from './styled';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
@@ -264,8 +266,16 @@ export const ResizableMediaSingleNextFunctional = props => {
         right: false
       };
     }
+    const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
     return handleSides.reduce((acc, side) => {
       const oppositeSide = side === 'left' ? 'right' : 'left';
+
+      // Disable the left handle up-front (except for layouts where it is the
+      // only handle) before computing whether it would otherwise be enabled.
+      if (side === 'left' && isLeftResizeHandleDisabled && leftHandleOnlyLayouts.indexOf(layout) === -1) {
+        acc[side] = false;
+        return acc;
+      }
       acc[side] = nonWrappedLayouts.concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
       if (side === 'left' && isInsideInlineLike) {
         acc[side] = false;

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

@@ -0,0 +1,3 @@
+// Layouts where the left handle is the only resize handle today.
+// These must keep the left handle.
+export const leftHandleOnlyLayouts = ['wrap-right', 'align-end'];

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

@@ -15,6 +15,7 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
+import { leftHandleOnlyLayouts } from './constants';
 import { wrapperStyle } from './styled';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class ResizableMediaSingle extends React.Component {
@@ -294,6 +295,7 @@ export default class ResizableMediaSingle extends React.Component {
     if (origWidth) {
       ratio = (origHeight / origWidth * 100).toFixed(3);
     }
+    const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
     const enable = {};
     handleSides.forEach(side => {
       const oppositeSide = side === 'left' ? 'right' : 'left';
@@ -301,6 +303,13 @@ export default class ResizableMediaSingle extends React.Component {
         enable[side] = false;
         return;
       }
+
+      // Disable the left handle up-front (except for layouts where it is the
+      // only handle) before computing whether it would otherwise be enabled.
+      if (side === 'left' && isLeftResizeHandleDisabled && leftHandleOnlyLayouts.indexOf(layout) === -1) {
+        enable[side] = false;
+        return;
+      }
       enable[side] = ['full-width', 'wide', 'center'].concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
       if (side === 'left' && this.insideInlineLike) {
         enable[side] = false;

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

@@ -19,10 +19,12 @@ import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 import { getMediaResizeAnalyticsEvent } from '../../pm-plugins/utils/analytics';
 import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
+import { leftHandleOnlyLayouts } from './constants';
 import { ResizableMediaMigrationNotification } from './ResizableMediaMigrationNotification';
 import { wrapperStyle } from './styled';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
@@ -275,8 +277,16 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
         right: false
       };
     }
+    var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
     return handleSides.reduce(function (acc, side) {
       var oppositeSide = side === 'left' ? 'right' : 'left';
+
+      // Disable the left handle up-front (except for layouts where it is the
+      // only handle) before computing whether it would otherwise be enabled.
+      if (side === 'left' && isLeftResizeHandleDisabled && leftHandleOnlyLayouts.indexOf(layout) === -1) {
+        acc[side] = false;
+        return acc;
+      }
       acc[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
       if (side === 'left' && isInsideInlineLike) {
         acc[side] = false;

package/dist/esm/ui/ResizableMediaSingle/constants.js

@@ -0,0 +1,3 @@
+// Layouts where the left handle is the only resize handle today.
+// These must keep the left handle.
+export var leftHandleOnlyLayouts = ['wrap-right', 'align-end'];

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

@@ -24,6 +24,7 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
+import { leftHandleOnlyLayouts } from './constants';
 import { wrapperStyle } from './styled';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
@@ -360,6 +361,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
       if (origWidth) {
         ratio = (origHeight / origWidth * 100).toFixed(3);
       }
+      var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
       var enable = {};
       handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
@@ -367,6 +369,13 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           enable[side] = false;
           return;
         }
+
+        // Disable the left handle up-front (except for layouts where it is the
+        // only handle) before computing whether it would otherwise be enabled.
+        if (side === 'left' && isLeftResizeHandleDisabled && leftHandleOnlyLayouts.indexOf(layout) === -1) {
+          enable[side] = false;
+          return;
+        }
         enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
         if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;

package/dist/types/ui/ResizableMediaSingle/constants.d.ts

@@ -0,0 +1,2 @@
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+export declare const leftHandleOnlyLayouts: MediaSingleLayout[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "14.2.2",
+	"version": "14.2.3",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",