@atlaskit/editor-plugin-media 9.2.0 → 9.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/nodeviews/mediaSingleNext.js +46 -0
  3. package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js +1 -1
  4. package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +15 -5
  5. package/dist/cjs/ui/ResizableMediaSingle/index.js +6 -0
  6. package/dist/es2019/nodeviews/mediaSingleNext.js +46 -0
  7. package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js +1 -1
  8. package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +15 -5
  9. package/dist/es2019/ui/ResizableMediaSingle/index.js +6 -0
  10. package/dist/esm/nodeviews/mediaSingleNext.js +46 -0
  11. package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js +1 -1
  12. package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +15 -5
  13. package/dist/esm/ui/ResizableMediaSingle/index.js +6 -0
  14. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 9.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`12da6b7aac3a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/12da6b7aac3a9) -
8
+ add support of disable resize handles in resizable media single
9
+
3
10
  ## 9.2.0
4
11
 
5
12
  ### Minor Changes
package/dist/cjs/nodeviews/mediaSingleNext.js CHANGED
@@ -498,6 +498,52 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
498
498
  onClick: clickPlaceholder,
499
499
  placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
500
500
  })));
501
+ if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
502
+ return mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
503
+ view: view,
504
+ getPos: getPos,
505
+ updateSize: updateSize,
506
+ gridSize: 12,
507
+ viewMediaClientConfig: viewMediaClientConfig,
508
+ allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
509
+ selected: isSelected,
510
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
511
+ pluginInjectionApi: pluginInjectionApi,
512
+ layout: layout,
513
+ width: width,
514
+ height: height,
515
+ containerWidth: containerWidth,
516
+ lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
517
+ fullWidthMode: fullWidthMode,
518
+ hasFallbackContainer: false,
519
+ mediaSingleWidth: mediaSingleWidth,
520
+ editorAppearance: editorAppearance,
521
+ showLegacyNotification: widthType !== 'pixel',
522
+ forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
523
+ disableHandles: !canResize
524
+ }, MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, {
525
+ view: view,
526
+ getPos: getPos,
527
+ updateSize: updateSize,
528
+ gridSize: 12,
529
+ viewMediaClientConfig: viewMediaClientConfig,
530
+ allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
531
+ selected: isSelected,
532
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
533
+ pluginInjectionApi: pluginInjectionApi,
534
+ layout: layout,
535
+ width: width,
536
+ height: height,
537
+ containerWidth: containerWidth,
538
+ fullWidthMode: fullWidthMode,
539
+ hasFallbackContainer: false,
540
+ mediaSingleWidth: mediaSingleWidth,
541
+ editorAppearance: editorAppearance,
542
+ lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
543
+ pctWidth: mediaSingleWidthAttribute,
544
+ disableHandles: !canResize
545
+ }, MediaChildren);
546
+ }
501
547
  return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
502
548
  view: view,
503
549
  getPos: getPos,
package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -22,7 +22,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
22
22
  var _ui = require("@atlaskit/editor-common/ui");
23
23
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
24
24
  var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
25
- var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
25
+ var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
26
26
  var _colors = require("@atlaskit/theme/colors");
27
27
  var _commands = require("../commands");
28
28
  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)); }
package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -170,7 +170,8 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
170
170
  updateSize = props.updateSize,
171
171
  view = props.view,
172
172
  viewMediaClientConfig = props.viewMediaClientConfig,
173
- forceHandlePositioning = props.forceHandlePositioning;
173
+ forceHandlePositioning = props.forceHandlePositioning,
174
+ disableHandles = props.disableHandles;
174
175
  var initialWidth = (0, _react.useMemo)(function () {
175
176
  return mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
176
177
  }, [mediaSingleWidth]);
@@ -247,6 +248,9 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
247
248
  if (isAdjacentMode || fullWidthMode) {
248
249
  return lineLength;
249
250
  }
251
+ if (!isResizing && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
252
+ return "var(--ak-editor-max-container-width)";
253
+ }
250
254
  return calcMaxWidth({
251
255
  containerWidth: containerWidth,
252
256
  editorAppearance: editorAppearance
@@ -262,7 +266,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
262
266
  var resizerNextClassName = (0, _react.useMemo)(function () {
263
267
  if ((0, _expValEquals.expValEquals)('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
264
268
  var _classNameNext = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, _styles.resizerItemClassName, {
265
- 'display-handle': selected,
269
+ 'display-handle': (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
266
270
  'richMedia-selected': selected,
267
271
  'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
268
272
  });
@@ -274,7 +278,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
274
278
  'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
275
279
  });
276
280
  return (0, _classnames.default)(classNameNext, _styles.resizerStyles);
277
- }, [className, isResizing, layout, selected]);
281
+ }, [className, disableHandles, isResizing, layout, selected]);
278
282
  var isInsideInlineLike = (0, _react.useMemo)(function () {
279
283
  if (nodePosition === null) {
280
284
  return false;
@@ -284,6 +288,12 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
284
288
  return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
285
289
  }, [nodePosition, view]);
286
290
  var enable = (0, _react.useMemo)(function () {
291
+ if (disableHandles && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
292
+ return {
293
+ left: false,
294
+ right: false
295
+ };
296
+ }
287
297
  return _ui.handleSides.reduce(function (acc, side) {
288
298
  var oppositeSide = side === 'left' ? 'right' : 'left';
289
299
  acc[side] = _utils.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
@@ -292,7 +302,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
292
302
  }
293
303
  return acc;
294
304
  }, {});
295
- }, [layout, isInsideInlineLike]);
305
+ }, [disableHandles, layout, isInsideInlineLike]);
296
306
  var defaultGuidelines = (0, _react.useMemo)(function () {
297
307
  if (isAdjacentMode) {
298
308
  return [];
@@ -520,7 +530,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
520
530
  snap: snaps,
521
531
  resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
522
532
  "data-testid": resizerNextTestId,
523
- isHandleVisible: selected,
533
+ isHandleVisible: (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
524
534
  handlePositioning: handlePositioning,
525
535
  handleHighlight: "full-height"
526
536
  }, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
package/dist/cjs/ui/ResizableMediaSingle/index.js CHANGED
@@ -366,6 +366,12 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
366
366
  var enable = {};
367
367
  _ui.handleSides.forEach(function (side) {
368
368
  var oppositeSide = side === 'left' ? 'right' : 'left';
369
+ if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
370
+ if (_this2.props.disableHandles) {
371
+ enable[side] = false;
372
+ return;
373
+ }
374
+ }
369
375
  enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
370
376
  if (side === 'left' && _this2.insideInlineLike) {
371
377
  enable[side] = false;
package/dist/es2019/nodeviews/mediaSingleNext.js CHANGED
@@ -457,6 +457,52 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
457
457
  onClick: clickPlaceholder,
458
458
  placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
459
459
  })));
460
+ if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
461
+ return mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
462
+ view: view,
463
+ getPos: getPos,
464
+ updateSize: updateSize,
465
+ gridSize: 12,
466
+ viewMediaClientConfig: viewMediaClientConfig,
467
+ allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
468
+ selected: isSelected,
469
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
470
+ pluginInjectionApi: pluginInjectionApi,
471
+ layout: layout,
472
+ width: width,
473
+ height: height,
474
+ containerWidth: containerWidth,
475
+ lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
476
+ fullWidthMode: fullWidthMode,
477
+ hasFallbackContainer: false,
478
+ mediaSingleWidth: mediaSingleWidth,
479
+ editorAppearance: editorAppearance,
480
+ showLegacyNotification: widthType !== 'pixel',
481
+ forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
482
+ disableHandles: !canResize
483
+ }, MediaChildren) : jsx(ResizableMediaSingle, {
484
+ view: view,
485
+ getPos: getPos,
486
+ updateSize: updateSize,
487
+ gridSize: 12,
488
+ viewMediaClientConfig: viewMediaClientConfig,
489
+ allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
490
+ selected: isSelected,
491
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
492
+ pluginInjectionApi: pluginInjectionApi,
493
+ layout: layout,
494
+ width: width,
495
+ height: height,
496
+ containerWidth: containerWidth,
497
+ fullWidthMode: fullWidthMode,
498
+ hasFallbackContainer: false,
499
+ mediaSingleWidth: mediaSingleWidth,
500
+ editorAppearance: editorAppearance,
501
+ lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
502
+ pctWidth: mediaSingleWidthAttribute,
503
+ disableHandles: !canResize
504
+ }, MediaChildren);
505
+ }
460
506
  return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
461
507
  view: view,
462
508
  getPos: getPos,
package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -17,7 +17,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
17
17
  import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButton as Button, ErrorMessage, PanelTextInput } from '@atlaskit/editor-common/ui';
18
18
  import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
19
19
  import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
20
- import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
20
+ import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
21
21
  import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
22
22
  import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
23
23
  export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -161,7 +161,8 @@ export const ResizableMediaSingleNextFunctional = props => {
161
161
  updateSize,
162
162
  view,
163
163
  viewMediaClientConfig,
164
- forceHandlePositioning
164
+ forceHandlePositioning,
165
+ disableHandles
165
166
  } = props;
166
167
  const initialWidth = useMemo(() => {
167
168
  return mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
@@ -224,6 +225,9 @@ export const ResizableMediaSingleNextFunctional = props => {
224
225
  if (isAdjacentMode || fullWidthMode) {
225
226
  return lineLength;
226
227
  }
228
+ if (!isResizing && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
229
+ return `var(--ak-editor-max-container-width)`;
230
+ }
227
231
  return calcMaxWidth({
228
232
  containerWidth,
229
233
  editorAppearance
@@ -239,7 +243,7 @@ export const ResizableMediaSingleNextFunctional = props => {
239
243
  const resizerNextClassName = useMemo(() => {
240
244
  if (expValEquals('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
241
245
  const classNameNext = classnames(richMediaClassName, `image-${layout}`, isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
242
- 'display-handle': selected,
246
+ 'display-handle': expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
243
247
  'richMedia-selected': selected,
244
248
  'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
245
249
  });
@@ -251,7 +255,7 @@ export const ResizableMediaSingleNextFunctional = props => {
251
255
  'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
252
256
  });
253
257
  return classnames(classNameNext, resizerStyles);
254
- }, [className, isResizing, layout, selected]);
258
+ }, [className, disableHandles, isResizing, layout, selected]);
255
259
  const isInsideInlineLike = useMemo(() => {
256
260
  if (nodePosition === null) {
257
261
  return false;
@@ -263,6 +267,12 @@ export const ResizableMediaSingleNextFunctional = props => {
263
267
  return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
264
268
  }, [nodePosition, view]);
265
269
  const enable = useMemo(() => {
270
+ if (disableHandles && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
271
+ return {
272
+ left: false,
273
+ right: false
274
+ };
275
+ }
266
276
  return handleSides.reduce((acc, side) => {
267
277
  const oppositeSide = side === 'left' ? 'right' : 'left';
268
278
  acc[side] = nonWrappedLayouts.concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
@@ -271,7 +281,7 @@ export const ResizableMediaSingleNextFunctional = props => {
271
281
  }
272
282
  return acc;
273
283
  }, {});
274
- }, [layout, isInsideInlineLike]);
284
+ }, [disableHandles, layout, isInsideInlineLike]);
275
285
  const defaultGuidelines = useMemo(() => {
276
286
  if (isAdjacentMode) {
277
287
  return [];
@@ -499,7 +509,7 @@ export const ResizableMediaSingleNextFunctional = props => {
499
509
  snap: snaps,
500
510
  resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
501
511
  "data-testid": resizerNextTestId,
502
- isHandleVisible: selected,
512
+ isHandleVisible: expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
503
513
  handlePositioning: handlePositioning,
504
514
  handleHighlight: "full-height"
505
515
  }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
package/dist/es2019/ui/ResizableMediaSingle/index.js CHANGED
@@ -296,6 +296,12 @@ export default class ResizableMediaSingle extends React.Component {
296
296
  const enable = {};
297
297
  handleSides.forEach(side => {
298
298
  const oppositeSide = side === 'left' ? 'right' : 'left';
299
+ if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
300
+ if (this.props.disableHandles) {
301
+ enable[side] = false;
302
+ return;
303
+ }
304
+ }
299
305
  enable[side] = ['full-width', 'wide', 'center'].concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
300
306
  if (side === 'left' && this.insideInlineLike) {
301
307
  enable[side] = false;
package/dist/esm/nodeviews/mediaSingleNext.js CHANGED
@@ -492,6 +492,52 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
492
492
  onClick: clickPlaceholder,
493
493
  placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
494
494
  })));
495
+ if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
496
+ return mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
497
+ view: view,
498
+ getPos: getPos,
499
+ updateSize: updateSize,
500
+ gridSize: 12,
501
+ viewMediaClientConfig: viewMediaClientConfig,
502
+ allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
503
+ selected: isSelected,
504
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
505
+ pluginInjectionApi: pluginInjectionApi,
506
+ layout: layout,
507
+ width: width,
508
+ height: height,
509
+ containerWidth: containerWidth,
510
+ lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
511
+ fullWidthMode: fullWidthMode,
512
+ hasFallbackContainer: false,
513
+ mediaSingleWidth: mediaSingleWidth,
514
+ editorAppearance: editorAppearance,
515
+ showLegacyNotification: widthType !== 'pixel',
516
+ forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
517
+ disableHandles: !canResize
518
+ }, MediaChildren) : jsx(ResizableMediaSingle, {
519
+ view: view,
520
+ getPos: getPos,
521
+ updateSize: updateSize,
522
+ gridSize: 12,
523
+ viewMediaClientConfig: viewMediaClientConfig,
524
+ allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
525
+ selected: isSelected,
526
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
527
+ pluginInjectionApi: pluginInjectionApi,
528
+ layout: layout,
529
+ width: width,
530
+ height: height,
531
+ containerWidth: containerWidth,
532
+ fullWidthMode: fullWidthMode,
533
+ hasFallbackContainer: false,
534
+ mediaSingleWidth: mediaSingleWidth,
535
+ editorAppearance: editorAppearance,
536
+ lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
537
+ pctWidth: mediaSingleWidthAttribute,
538
+ disableHandles: !canResize
539
+ }, MediaChildren);
540
+ }
495
541
  return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
496
542
  view: view,
497
543
  getPos: getPos,
package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -24,7 +24,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
24
24
  import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButton as Button, ErrorMessage, PanelTextInput } from '@atlaskit/editor-common/ui';
25
25
  import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
26
26
  import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
27
- import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
27
+ import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
28
28
  import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
29
29
  import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
30
30
  export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -160,7 +160,8 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
160
160
  updateSize = props.updateSize,
161
161
  view = props.view,
162
162
  viewMediaClientConfig = props.viewMediaClientConfig,
163
- forceHandlePositioning = props.forceHandlePositioning;
163
+ forceHandlePositioning = props.forceHandlePositioning,
164
+ disableHandles = props.disableHandles;
164
165
  var initialWidth = useMemo(function () {
165
166
  return mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
166
167
  }, [mediaSingleWidth]);
@@ -237,6 +238,9 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
237
238
  if (isAdjacentMode || fullWidthMode) {
238
239
  return lineLength;
239
240
  }
241
+ if (!isResizing && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
242
+ return "var(--ak-editor-max-container-width)";
243
+ }
240
244
  return calcMaxWidth({
241
245
  containerWidth: containerWidth,
242
246
  editorAppearance: editorAppearance
@@ -252,7 +256,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
252
256
  var resizerNextClassName = useMemo(function () {
253
257
  if (expValEquals('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
254
258
  var _classNameNext = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
255
- 'display-handle': selected,
259
+ 'display-handle': expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
256
260
  'richMedia-selected': selected,
257
261
  'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
258
262
  });
@@ -264,7 +268,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
264
268
  'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
265
269
  });
266
270
  return classnames(classNameNext, resizerStyles);
267
- }, [className, isResizing, layout, selected]);
271
+ }, [className, disableHandles, isResizing, layout, selected]);
268
272
  var isInsideInlineLike = useMemo(function () {
269
273
  if (nodePosition === null) {
270
274
  return false;
@@ -274,6 +278,12 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
274
278
  return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
275
279
  }, [nodePosition, view]);
276
280
  var enable = useMemo(function () {
281
+ if (disableHandles && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
282
+ return {
283
+ left: false,
284
+ right: false
285
+ };
286
+ }
277
287
  return handleSides.reduce(function (acc, side) {
278
288
  var oppositeSide = side === 'left' ? 'right' : 'left';
279
289
  acc[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
@@ -282,7 +292,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
282
292
  }
283
293
  return acc;
284
294
  }, {});
285
- }, [layout, isInsideInlineLike]);
295
+ }, [disableHandles, layout, isInsideInlineLike]);
286
296
  var defaultGuidelines = useMemo(function () {
287
297
  if (isAdjacentMode) {
288
298
  return [];
@@ -510,7 +520,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
510
520
  snap: snaps,
511
521
  resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
512
522
  "data-testid": resizerNextTestId,
513
- isHandleVisible: selected,
523
+ isHandleVisible: expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
514
524
  handlePositioning: handlePositioning,
515
525
  handleHighlight: "full-height"
516
526
  }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
package/dist/esm/ui/ResizableMediaSingle/index.js CHANGED
@@ -362,6 +362,12 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
362
362
  var enable = {};
363
363
  handleSides.forEach(function (side) {
364
364
  var oppositeSide = side === 'left' ? 'right' : 'left';
365
+ if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
366
+ if (_this2.props.disableHandles) {
367
+ enable[side] = false;
368
+ return;
369
+ }
370
+ }
365
371
  enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
366
372
  if (side === 'left' && _this2.insideInlineLike) {
367
373
  enable[side] = false;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "9.2.0",
3
+ "version": "9.3.0",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/editor-shared-styles": "^3.10.0",
53
53
  "@atlaskit/editor-tables": "^2.9.0",
54
54
  "@atlaskit/form": "^15.2.0",
55
- "@atlaskit/icon": "^29.3.0",
55
+ "@atlaskit/icon": "^29.4.0",
56
56
  "@atlaskit/icon-lab": "^5.13.0",
57
57
  "@atlaskit/media-card": "^79.12.0",
58
58
  "@atlaskit/media-client": "^35.7.0",
@@ -68,7 +68,7 @@
68
68
  "@atlaskit/theme": "^21.0.0",
69
69
  "@atlaskit/tmp-editor-statsig": "^16.8.0",
70
70
  "@atlaskit/tokens": "^9.1.0",
71
- "@atlaskit/tooltip": "^20.11.0",
71
+ "@atlaskit/tooltip": "^20.12.0",
72
72
  "@babel/runtime": "^7.0.0",
73
73
  "@emotion/react": "^11.7.1",
74
74
  "bind-event-listener": "^3.0.0",
@@ -78,7 +78,7 @@
78
78
  "uuid": "^3.1.0"
79
79
  },
80
80
  "peerDependencies": {
81
- "@atlaskit/editor-common": "^111.5.0",
81
+ "@atlaskit/editor-common": "^111.6.0",
82
82
  "@atlaskit/media-core": "^37.0.0",
83
83
  "react": "^18.2.0",
84
84
  "react-dom": "^18.2.0",