@atlaskit/editor-plugin-media 1.22.8 → 1.23.2

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 (15) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/nodeviews/mediaSingle.js +17 -10
  3. package/dist/cjs/pm-plugins/keymap.js +3 -3
  4. package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +1 -1
  5. package/dist/es2019/nodeviews/mediaSingle.js +18 -11
  6. package/dist/es2019/pm-plugins/keymap.js +4 -4
  7. package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +1 -1
  8. package/dist/esm/nodeviews/mediaSingle.js +18 -11
  9. package/dist/esm/pm-plugins/keymap.js +4 -4
  10. package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +1 -1
  11. package/dist/types/nodeviews/types.d.ts +3 -1
  12. package/dist/types/types.d.ts +2 -1
  13. package/dist/types-ts4.5/nodeviews/types.d.ts +3 -1
  14. package/dist/types-ts4.5/types.d.ts +2 -1
  15. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 1.23.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.23.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 1.23.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [#118748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118748)
20
+ [`10bb9e2def098`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10bb9e2def098) -
21
+ [ux] Reduce media single max width padding for all editors except full page
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies
26
+
3
27
  ## 1.22.8
4
28
 
5
29
  ### Patch Changes
package/dist/cjs/nodeviews/mediaSingle.js CHANGED
@@ -343,7 +343,8 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
343
343
  dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent,
344
344
  editorViewMode = _this$props2.editorViewMode,
345
345
  editorDisabled = _this$props2.editorDisabled,
346
- annotationPluginState = _this$props2.annotationPluginState;
346
+ annotationPluginState = _this$props2.annotationPluginState,
347
+ editorAppearance = _this$props2.editorAppearance;
347
348
  var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
348
349
  _ref4$commentsOnMedia = _ref4.commentsOnMedia,
349
350
  commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
@@ -404,7 +405,8 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
404
405
  containerWidth: containerWidth,
405
406
  gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
406
407
  }),
407
- allowCaptions: mediaOptions.allowCaptions
408
+ allowCaptions: mediaOptions.allowCaptions,
409
+ editorAppearance: editorAppearance
408
410
  };
409
411
  var resizableMediaSingleProps = _objectSpread({
410
412
  view: view,
@@ -439,7 +441,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
439
441
  };
440
442
  var badgeOffsetRight = isBadgePosOffsetRight();
441
443
  var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
442
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
444
+ if ((0, _platformFeatureFlags.fg)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
443
445
  shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
444
446
  }
445
447
  var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
@@ -464,7 +466,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
464
466
  ref: this.captionPlaceHolderRef,
465
467
  onClick: this.clickPlaceholder
466
468
  }));
467
- return (0, _react2.jsx)(_react.Fragment, null, canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
469
+ return (0, _react2.jsx)(_react.Fragment, null, canResize ? (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
468
470
  showLegacyNotification: widthType !== 'pixel'
469
471
  }), MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
470
472
  lineLength: contentWidthForLegacyExperience,
@@ -496,7 +498,8 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
496
498
  selected = _ref6.selected,
497
499
  eventDispatcher = _ref6.eventDispatcher,
498
500
  dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
499
- forwardRef = _ref6.forwardRef;
501
+ forwardRef = _ref6.forwardRef,
502
+ editorAppearance = _ref6.editorAppearance;
500
503
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
501
504
  widthState = _useSharedPluginState.widthState,
502
505
  mediaState = _useSharedPluginState.mediaState,
@@ -521,7 +524,8 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
521
524
  forwardRef: forwardRef,
522
525
  pluginInjectionApi: pluginInjectionApi,
523
526
  editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
524
- editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
527
+ editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
528
+ editorAppearance: editorAppearance
525
529
  });
526
530
  };
527
531
  var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
@@ -571,7 +575,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
571
575
  // see also: https://github.com/ProseMirror/prosemirror/issues/884
572
576
  domRef.contentEditable = 'true';
573
577
  }
574
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
578
+ if ((0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience')) {
575
579
  domRef.classList.add('media-extended-resize-experience');
576
580
  }
577
581
  return domRef;
@@ -643,7 +647,8 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
643
647
  providerFactory = _this$reactComponentP.providerFactory,
644
648
  mediaOptions = _this$reactComponentP.mediaOptions,
645
649
  dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
646
- pluginInjectionApi = _this$reactComponentP.pluginInjectionApi;
650
+ pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
651
+ editorAppearance = _this$reactComponentP.editorAppearance;
647
652
 
648
653
  // getPos is a boolean for marks, since this is a node we know it must be a function
649
654
  var getPos = this.getPos;
@@ -665,7 +670,8 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
665
670
  selected: _this4.isNodeSelected,
666
671
  eventDispatcher: eventDispatcher,
667
672
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
668
- forwardRef: forwardRef
673
+ forwardRef: forwardRef,
674
+ editorAppearance: editorAppearance
669
675
  });
670
676
  }
671
677
  });
@@ -700,7 +706,8 @@ var ReactMediaSingleNode = exports.ReactMediaSingleNode = function ReactMediaSin
700
706
  mediaOptions: mediaOptions,
701
707
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
702
708
  isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
703
- pluginInjectionApi: pluginInjectionApi
709
+ pluginInjectionApi: pluginInjectionApi,
710
+ editorAppearance: mediaOptions.editorAppearance
704
711
  }, undefined, undefined, undefined, hasIntlContext).init();
705
712
  };
706
713
  };
package/dist/cjs/pm-plugins/keymap.js CHANGED
@@ -28,7 +28,7 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlug
28
28
  }
29
29
  (0, _keymaps.bindKeymapWithCommand)(_keymaps.insertNewLine.common, splitMediaGroup, list);
30
30
  (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, splitMediaGroup, list);
31
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
31
+ if ((0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience')) {
32
32
  (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
33
33
  (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
34
34
  }
@@ -115,7 +115,7 @@ var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, w
115
115
  var currentMaxWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.width) || maxWidth;
116
116
  if (maxWidth === undefined && maxWidthForNestedNode === undefined) {
117
117
  var _widthPlugin$sharedSt3;
118
- maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : (0, _mediaSingle.calcMediaSingleMaxWidth)(currentMaxWidth);
118
+ maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : (0, _mediaSingle.calcMediaSingleMaxWidth)(currentMaxWidth, options === null || options === void 0 ? void 0 : options.editorAppearance);
119
119
  }
120
120
  var validation = 'valid';
121
121
  var newWidth = mediaWidth + changeAmount;
@@ -123,7 +123,7 @@ var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, w
123
123
  var _widthPlugin$sharedSt4;
124
124
  maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt4 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt4 === void 0 ? void 0 : _widthPlugin$sharedSt4.lineLength;
125
125
  } else if (maxWidthForNestedNode === undefined) {
126
- maxWidth = (0, _mediaSingle.calcMediaSingleMaxWidth)(currentMaxWidth);
126
+ maxWidth = (0, _mediaSingle.calcMediaSingleMaxWidth)(currentMaxWidth, options === null || options === void 0 ? void 0 : options.editorAppearance);
127
127
  }
128
128
  var _validationMaxMin = validationMaxMin(newWidth, maxWidth, minWidth, validation),
129
129
  newWidthValidated = _validationMaxMin.newWidthValidated,
package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -138,7 +138,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
138
138
  if (_this.isNestedNode() || fullWidthMode) {
139
139
  return contentWidth;
140
140
  }
141
- return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
141
+ return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth, _this.props.editorAppearance);
142
142
  }));
143
143
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMinWidth", (0, _memoizeOne.default)(function (isVideoFile, contentWidth) {
144
144
  return Math.min(contentWidth || _editorSharedStyles.akEditorDefaultLayoutWidth, isVideoFile ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
package/dist/es2019/nodeviews/mediaSingle.js CHANGED
@@ -16,7 +16,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
16
16
  import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
17
17
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
18
18
  import { getAttrsFromUrl } from '@atlaskit/media-client';
19
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
19
+ import { fg } from '@atlaskit/platform-feature-flags';
20
20
  import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
21
21
  import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
22
22
  import CaptionPlaceholder from '../ui/CaptionPlaceholder';
@@ -248,7 +248,8 @@ export default class MediaSingleNode extends Component {
248
248
  dispatchAnalyticsEvent,
249
249
  editorViewMode,
250
250
  editorDisabled,
251
- annotationPluginState
251
+ annotationPluginState,
252
+ editorAppearance
252
253
  } = this.props;
253
254
  const {
254
255
  commentsOnMedia = false
@@ -316,7 +317,8 @@ export default class MediaSingleNode extends Component {
316
317
  containerWidth,
317
318
  gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
318
319
  }),
319
- allowCaptions: mediaOptions.allowCaptions
320
+ allowCaptions: mediaOptions.allowCaptions,
321
+ editorAppearance
320
322
  };
321
323
  const resizableMediaSingleProps = {
322
324
  view: view,
@@ -356,7 +358,7 @@ export default class MediaSingleNode extends Component {
356
358
  };
357
359
  const badgeOffsetRight = isBadgePosOffsetRight();
358
360
  let shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
359
- if (getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
361
+ if (fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
360
362
  shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
361
363
  }
362
364
  const isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
@@ -381,7 +383,7 @@ export default class MediaSingleNode extends Component {
381
383
  ref: this.captionPlaceHolderRef,
382
384
  onClick: this.clickPlaceholder
383
385
  }));
384
- return jsx(Fragment, null, canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
386
+ return jsx(Fragment, null, canResize ? fg('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
385
387
  showLegacyNotification: widthType !== 'pixel'
386
388
  }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {
387
389
  lineLength: contentWidthForLegacyExperience,
@@ -411,7 +413,8 @@ const MediaSingleNodeWrapper = ({
411
413
  selected,
412
414
  eventDispatcher,
413
415
  dispatchAnalyticsEvent,
414
- forwardRef
416
+ forwardRef,
417
+ editorAppearance
415
418
  }) => {
416
419
  const {
417
420
  widthState,
@@ -438,7 +441,8 @@ const MediaSingleNodeWrapper = ({
438
441
  forwardRef: forwardRef,
439
442
  pluginInjectionApi: pluginInjectionApi,
440
443
  editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
441
- editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
444
+ editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
445
+ editorAppearance: editorAppearance
442
446
  });
443
447
  };
444
448
  class MediaSingleNodeView extends ReactNodeView {
@@ -480,7 +484,7 @@ class MediaSingleNodeView extends ReactNodeView {
480
484
  // see also: https://github.com/ProseMirror/prosemirror/issues/884
481
485
  domRef.contentEditable = 'true';
482
486
  }
483
- if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
487
+ if (fg('platform.editor.media.extended-resize-experience')) {
484
488
  domRef.classList.add('media-extended-resize-experience');
485
489
  }
486
490
  return domRef;
@@ -536,7 +540,8 @@ class MediaSingleNodeView extends ReactNodeView {
536
540
  providerFactory,
537
541
  mediaOptions,
538
542
  dispatchAnalyticsEvent,
539
- pluginInjectionApi
543
+ pluginInjectionApi,
544
+ editorAppearance
540
545
  } = this.reactComponentProps;
541
546
 
542
547
  // getPos is a boolean for marks, since this is a node we know it must be a function
@@ -560,7 +565,8 @@ class MediaSingleNodeView extends ReactNodeView {
560
565
  selected: this.isNodeSelected,
561
566
  eventDispatcher: eventDispatcher,
562
567
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
563
- forwardRef: forwardRef
568
+ forwardRef: forwardRef,
569
+ editorAppearance: editorAppearance
564
570
  });
565
571
  }
566
572
  });
@@ -587,6 +593,7 @@ export const ReactMediaSingleNode = (portalProviderAPI, eventDispatcher, provide
587
593
  mediaOptions,
588
594
  dispatchAnalyticsEvent,
589
595
  isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
590
- pluginInjectionApi
596
+ pluginInjectionApi,
597
+ editorAppearance: mediaOptions.editorAppearance
591
598
  }, undefined, undefined, undefined, hasIntlContext).init();
592
599
  };
package/dist/es2019/pm-plugins/keymap.js CHANGED
@@ -5,7 +5,7 @@ import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
5
5
  import { keymap } from '@atlaskit/editor-prosemirror/keymap';
6
6
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
7
7
  import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
8
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
9
9
  import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
10
10
  import { stateKey } from '../pm-plugins/plugin-key';
11
11
  import { updateMediaSingleWidth } from '../toolbar/commands';
@@ -21,7 +21,7 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
21
21
  }
22
22
  bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
23
23
  bindKeymapWithCommand(enter.common, splitMediaGroup, list);
24
- if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
24
+ if (fg('platform.editor.media.extended-resize-experience')) {
25
25
  bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
26
26
  bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
27
27
  }
@@ -109,7 +109,7 @@ const handleMediaSizeChange = (editorAnalyticsAPI, widthPlugin, options, changeA
109
109
  const currentMaxWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.width) || maxWidth;
110
110
  if (maxWidth === undefined && maxWidthForNestedNode === undefined) {
111
111
  var _widthPlugin$sharedSt3;
112
- maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : calcMediaSingleMaxWidth(currentMaxWidth);
112
+ maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : calcMediaSingleMaxWidth(currentMaxWidth, options === null || options === void 0 ? void 0 : options.editorAppearance);
113
113
  }
114
114
  let validation = 'valid';
115
115
  let newWidth = mediaWidth + changeAmount;
@@ -117,7 +117,7 @@ const handleMediaSizeChange = (editorAnalyticsAPI, widthPlugin, options, changeA
117
117
  var _widthPlugin$sharedSt4;
118
118
  maxWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt4 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt4 === void 0 ? void 0 : _widthPlugin$sharedSt4.lineLength;
119
119
  } else if (maxWidthForNestedNode === undefined) {
120
- maxWidth = calcMediaSingleMaxWidth(currentMaxWidth);
120
+ maxWidth = calcMediaSingleMaxWidth(currentMaxWidth, options === null || options === void 0 ? void 0 : options.editorAppearance);
121
121
  }
122
122
  const {
123
123
  newWidthValidated,
package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -124,7 +124,7 @@ class ResizableMediaSingleNext extends React.Component {
124
124
  if (this.isNestedNode() || fullWidthMode) {
125
125
  return contentWidth;
126
126
  }
127
- return calcMediaSingleMaxWidth(containerWidth);
127
+ return calcMediaSingleMaxWidth(containerWidth, this.props.editorAppearance);
128
128
  }));
129
129
  _defineProperty(this, "calcMinWidth", memoizeOne((isVideoFile, contentWidth) => {
130
130
  return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
package/dist/esm/nodeviews/mediaSingle.js CHANGED
@@ -29,7 +29,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
29
29
  import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
30
30
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
31
31
  import { getAttrsFromUrl } from '@atlaskit/media-client';
32
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
32
+ import { fg } from '@atlaskit/platform-feature-flags';
33
33
  import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
34
34
  import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
35
35
  import CaptionPlaceholder from '../ui/CaptionPlaceholder';
@@ -337,7 +337,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
337
337
  dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent,
338
338
  editorViewMode = _this$props2.editorViewMode,
339
339
  editorDisabled = _this$props2.editorDisabled,
340
- annotationPluginState = _this$props2.annotationPluginState;
340
+ annotationPluginState = _this$props2.annotationPluginState,
341
+ editorAppearance = _this$props2.editorAppearance;
341
342
  var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
342
343
  _ref4$commentsOnMedia = _ref4.commentsOnMedia,
343
344
  commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
@@ -398,7 +399,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
398
399
  containerWidth: containerWidth,
399
400
  gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
400
401
  }),
401
- allowCaptions: mediaOptions.allowCaptions
402
+ allowCaptions: mediaOptions.allowCaptions,
403
+ editorAppearance: editorAppearance
402
404
  };
403
405
  var resizableMediaSingleProps = _objectSpread({
404
406
  view: view,
@@ -433,7 +435,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
433
435
  };
434
436
  var badgeOffsetRight = isBadgePosOffsetRight();
435
437
  var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
436
- if (getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
438
+ if (fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
437
439
  shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
438
440
  }
439
441
  var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
@@ -458,7 +460,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
458
460
  ref: this.captionPlaceHolderRef,
459
461
  onClick: this.clickPlaceholder
460
462
  }));
461
- return jsx(Fragment, null, canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
463
+ return jsx(Fragment, null, canResize ? fg('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
462
464
  showLegacyNotification: widthType !== 'pixel'
463
465
  }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {
464
466
  lineLength: contentWidthForLegacyExperience,
@@ -491,7 +493,8 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
491
493
  selected = _ref6.selected,
492
494
  eventDispatcher = _ref6.eventDispatcher,
493
495
  dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
494
- forwardRef = _ref6.forwardRef;
496
+ forwardRef = _ref6.forwardRef,
497
+ editorAppearance = _ref6.editorAppearance;
495
498
  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
496
499
  widthState = _useSharedPluginState.widthState,
497
500
  mediaState = _useSharedPluginState.mediaState,
@@ -516,7 +519,8 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
516
519
  forwardRef: forwardRef,
517
520
  pluginInjectionApi: pluginInjectionApi,
518
521
  editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
519
- editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
522
+ editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
523
+ editorAppearance: editorAppearance
520
524
  });
521
525
  };
522
526
  var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
@@ -566,7 +570,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
566
570
  // see also: https://github.com/ProseMirror/prosemirror/issues/884
567
571
  domRef.contentEditable = 'true';
568
572
  }
569
- if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
573
+ if (fg('platform.editor.media.extended-resize-experience')) {
570
574
  domRef.classList.add('media-extended-resize-experience');
571
575
  }
572
576
  return domRef;
@@ -638,7 +642,8 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
638
642
  providerFactory = _this$reactComponentP.providerFactory,
639
643
  mediaOptions = _this$reactComponentP.mediaOptions,
640
644
  dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
641
- pluginInjectionApi = _this$reactComponentP.pluginInjectionApi;
645
+ pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
646
+ editorAppearance = _this$reactComponentP.editorAppearance;
642
647
 
643
648
  // getPos is a boolean for marks, since this is a node we know it must be a function
644
649
  var getPos = this.getPos;
@@ -660,7 +665,8 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
660
665
  selected: _this4.isNodeSelected,
661
666
  eventDispatcher: eventDispatcher,
662
667
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
663
- forwardRef: forwardRef
668
+ forwardRef: forwardRef,
669
+ editorAppearance: editorAppearance
664
670
  });
665
671
  }
666
672
  });
@@ -695,7 +701,8 @@ export var ReactMediaSingleNode = function ReactMediaSingleNode(portalProviderAP
695
701
  mediaOptions: mediaOptions,
696
702
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
697
703
  isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
698
- pluginInjectionApi: pluginInjectionApi
704
+ pluginInjectionApi: pluginInjectionApi,
705
+ editorAppearance: mediaOptions.editorAppearance
699
706
  }, undefined, undefined, undefined, hasIntlContext).init();
700
707
  };
701
708
  };
package/dist/esm/pm-plugins/keymap.js CHANGED
@@ -5,7 +5,7 @@ import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
5
5
  import { keymap } from '@atlaskit/editor-prosemirror/keymap';
6
6
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
7
7
  import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
8
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
9
9
  import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
10
10
  import { stateKey } from '../pm-plugins/plugin-key';
11
11
  import { updateMediaSingleWidth } from '../toolbar/commands';
@@ -21,7 +21,7 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
21
21
  }
22
22
  bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
23
23
  bindKeymapWithCommand(enter.common, splitMediaGroup, list);
24
- if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
24
+ if (fg('platform.editor.media.extended-resize-experience')) {
25
25
  bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
26
26
  bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
27
27
  }
@@ -108,7 +108,7 @@ var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, w
108
108
  var currentMaxWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.width) || maxWidth;
109
109
  if (maxWidth === undefined && maxWidthForNestedNode === undefined) {
110
110
  var _widthPlugin$sharedSt3;
111
- maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : calcMediaSingleMaxWidth(currentMaxWidth);
111
+ maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : calcMediaSingleMaxWidth(currentMaxWidth, options === null || options === void 0 ? void 0 : options.editorAppearance);
112
112
  }
113
113
  var validation = 'valid';
114
114
  var newWidth = mediaWidth + changeAmount;
@@ -116,7 +116,7 @@ var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, w
116
116
  var _widthPlugin$sharedSt4;
117
117
  maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt4 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt4 === void 0 ? void 0 : _widthPlugin$sharedSt4.lineLength;
118
118
  } else if (maxWidthForNestedNode === undefined) {
119
- maxWidth = calcMediaSingleMaxWidth(currentMaxWidth);
119
+ maxWidth = calcMediaSingleMaxWidth(currentMaxWidth, options === null || options === void 0 ? void 0 : options.editorAppearance);
120
120
  }
121
121
  var _validationMaxMin = validationMaxMin(newWidth, maxWidth, minWidth, validation),
122
122
  newWidthValidated = _validationMaxMin.newWidthValidated,
package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -134,7 +134,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
134
134
  if (_this.isNestedNode() || fullWidthMode) {
135
135
  return contentWidth;
136
136
  }
137
- return calcMediaSingleMaxWidth(containerWidth);
137
+ return calcMediaSingleMaxWidth(containerWidth, _this.props.editorAppearance);
138
138
  }));
139
139
  _defineProperty(_assertThisInitialized(_this), "calcMinWidth", memoizeOne(function (isVideoFile, contentWidth) {
140
140
  return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
package/dist/types/nodeviews/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
2
2
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
3
3
  import type { ContextIdentifierProvider, MediaProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
4
- import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
4
+ import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
5
5
  import type { InlineCommentPluginState } from '@atlaskit/editor-plugin-annotation';
6
6
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
7
7
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -28,6 +28,7 @@ export interface MediaSingleNodeProps {
28
28
  pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
29
29
  editorViewMode?: boolean;
30
30
  editorDisabled?: boolean;
31
+ editorAppearance?: EditorAppearance;
31
32
  }
32
33
  export interface MediaSingleNodeViewProps {
33
34
  eventDispatcher: EventDispatcher;
@@ -37,6 +38,7 @@ export interface MediaSingleNodeViewProps {
37
38
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
38
39
  isCopyPasteEnabled?: boolean;
39
40
  pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
41
+ editorAppearance?: EditorAppearance;
40
42
  }
41
43
  export interface MediaNodeViewProps {
42
44
  eventDispatcher: EventDispatcher;
package/dist/types/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { MediaADFAttrs, MediaInlineAttributes } from '@atlaskit/adf-schema';
2
2
  import type { ProviderFactory, Providers } from '@atlaskit/editor-common/provider-factory';
3
3
  import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
4
- import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
4
+ import type { EditorAppearance, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
5
5
  import type { NodeType } from '@atlaskit/editor-prosemirror/model';
6
6
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
7
7
  import type { FileIdentifier } from '@atlaskit/media-client';
@@ -50,6 +50,7 @@ export interface MediaOptions {
50
50
  getEditorFeatureFlags?: GetEditorFeatureFlags;
51
51
  allowCaptions?: boolean;
52
52
  allowCommentsOnMedia?: boolean;
53
+ editorAppearance?: EditorAppearance;
53
54
  }
54
55
  export interface MediaSingleOptions {
55
56
  disableLayout?: boolean;
package/dist/types-ts4.5/nodeviews/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
2
2
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
3
3
  import type { ContextIdentifierProvider, MediaProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
4
- import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
4
+ import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
5
5
  import type { InlineCommentPluginState } from '@atlaskit/editor-plugin-annotation';
6
6
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
7
7
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -28,6 +28,7 @@ export interface MediaSingleNodeProps {
28
28
  pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
29
29
  editorViewMode?: boolean;
30
30
  editorDisabled?: boolean;
31
+ editorAppearance?: EditorAppearance;
31
32
  }
32
33
  export interface MediaSingleNodeViewProps {
33
34
  eventDispatcher: EventDispatcher;
@@ -37,6 +38,7 @@ export interface MediaSingleNodeViewProps {
37
38
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
38
39
  isCopyPasteEnabled?: boolean;
39
40
  pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
41
+ editorAppearance?: EditorAppearance;
40
42
  }
41
43
  export interface MediaNodeViewProps {
42
44
  eventDispatcher: EventDispatcher;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { MediaADFAttrs, MediaInlineAttributes } from '@atlaskit/adf-schema';
2
2
  import type { ProviderFactory, Providers } from '@atlaskit/editor-common/provider-factory';
3
3
  import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
4
- import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
4
+ import type { EditorAppearance, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
5
5
  import type { NodeType } from '@atlaskit/editor-prosemirror/model';
6
6
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
7
7
  import type { FileIdentifier } from '@atlaskit/media-client';
@@ -50,6 +50,7 @@ export interface MediaOptions {
50
50
  getEditorFeatureFlags?: GetEditorFeatureFlags;
51
51
  allowCaptions?: boolean;
52
52
  allowCommentsOnMedia?: boolean;
53
+ editorAppearance?: EditorAppearance;
53
54
  }
54
55
  export interface MediaSingleOptions {
55
56
  disableLayout?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "1.22.8",
3
+ "version": "1.23.2",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,11 +36,11 @@
36
36
  "@atlaskit/adf-schema": "^39.0.3",
37
37
  "@atlaskit/analytics-namespaced-context": "^6.10.0",
38
38
  "@atlaskit/analytics-next": "^9.3.0",
39
- "@atlaskit/button": "^18.2.0",
40
- "@atlaskit/editor-common": "^84.3.0",
39
+ "@atlaskit/button": "^18.4.0",
40
+ "@atlaskit/editor-common": "^84.5.0",
41
41
  "@atlaskit/editor-palette": "1.6.0",
42
42
  "@atlaskit/editor-plugin-analytics": "^1.4.0",
43
- "@atlaskit/editor-plugin-annotation": "1.14.2",
43
+ "@atlaskit/editor-plugin-annotation": "1.14.3",
44
44
  "@atlaskit/editor-plugin-decorations": "^1.1.0",
45
45
  "@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
46
46
  "@atlaskit/editor-plugin-editor-viewmode": "^2.0.0",
@@ -51,7 +51,7 @@
51
51
  "@atlaskit/editor-plugin-selection": "^1.2.0",
52
52
  "@atlaskit/editor-plugin-width": "^1.1.0",
53
53
  "@atlaskit/editor-prosemirror": "4.0.1",
54
- "@atlaskit/editor-shared-styles": "^2.12.0",
54
+ "@atlaskit/editor-shared-styles": "^2.13.0",
55
55
  "@atlaskit/editor-tables": "^2.7.0",
56
56
  "@atlaskit/form": "^10.4.0",
57
57
  "@atlaskit/icon": "^22.6.0",
@@ -64,10 +64,10 @@
64
64
  "@atlaskit/media-ui": "^25.10.0",
65
65
  "@atlaskit/media-viewer": "^48.6.0",
66
66
  "@atlaskit/platform-feature-flags": "^0.3.0",
67
- "@atlaskit/primitives": "^10.1.0",
67
+ "@atlaskit/primitives": "^11.0.0",
68
68
  "@atlaskit/textfield": "^6.4.0",
69
69
  "@atlaskit/theme": "^12.11.0",
70
- "@atlaskit/tokens": "^1.53.0",
70
+ "@atlaskit/tokens": "^1.54.0",
71
71
  "@atlaskit/tooltip": "^18.5.0",
72
72
  "@babel/runtime": "^7.0.0",
73
73
  "@emotion/react": "^11.7.1",