@atlaskit/editor-plugin-media 12.2.6 → 12.4.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 (34) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/nodeviews/lazy-media-group.js +1 -24
  3. package/dist/cjs/nodeviews/mediaGroup.js +0 -4
  4. package/dist/cjs/nodeviews/mediaNodeView/index.js +31 -39
  5. package/dist/cjs/nodeviews/mediaNodeView/media.js +7 -22
  6. package/dist/cjs/nodeviews/mediaSingle.js +1 -2
  7. package/dist/cjs/nodeviews/mediaSingleNext.js +2 -2
  8. package/dist/cjs/nodeviews/toDOM-fixes/mediaSingle.js +2 -11
  9. package/dist/cjs/pm-plugins/ai-generating-decoration.js +5 -2
  10. package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +6 -11
  11. package/dist/cjs/ui/ResizableMediaSingle/index.js +4 -7
  12. package/dist/es2019/nodeviews/lazy-media-group.js +1 -20
  13. package/dist/es2019/nodeviews/mediaGroup.js +0 -4
  14. package/dist/es2019/nodeviews/mediaNodeView/index.js +31 -39
  15. package/dist/es2019/nodeviews/mediaNodeView/media.js +7 -21
  16. package/dist/es2019/nodeviews/mediaSingle.js +1 -2
  17. package/dist/es2019/nodeviews/mediaSingleNext.js +2 -2
  18. package/dist/es2019/nodeviews/toDOM-fixes/mediaSingle.js +2 -11
  19. package/dist/es2019/pm-plugins/ai-generating-decoration.js +5 -2
  20. package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +6 -9
  21. package/dist/es2019/ui/ResizableMediaSingle/index.js +4 -7
  22. package/dist/esm/nodeviews/lazy-media-group.js +1 -19
  23. package/dist/esm/nodeviews/mediaGroup.js +0 -4
  24. package/dist/esm/nodeviews/mediaNodeView/index.js +31 -39
  25. package/dist/esm/nodeviews/mediaNodeView/media.js +7 -22
  26. package/dist/esm/nodeviews/mediaSingle.js +1 -2
  27. package/dist/esm/nodeviews/mediaSingleNext.js +2 -2
  28. package/dist/esm/nodeviews/toDOM-fixes/mediaSingle.js +2 -11
  29. package/dist/esm/pm-plugins/ai-generating-decoration.js +5 -2
  30. package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +6 -11
  31. package/dist/esm/ui/ResizableMediaSingle/index.js +4 -7
  32. package/dist/types/nodeviews/lazy-media-group.d.ts +1 -1
  33. package/dist/types-ts4.5/nodeviews/lazy-media-group.d.ts +1 -1
  34. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 12.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`a759f33417d9b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a759f33417d9b) -
8
+ [PIRA-1311](https://opsj.atlassian.net/browse/PIRA-1311) - clean up platform_editor_media_vc_fixes
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 12.3.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [`e8a04d9738c5a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8a04d9738c5a) -
19
+ Add a rainbow `AIGeneratingOverlay` shown over media nodes during AI inline edits, gated by
20
+ `fg('cc-maui-phase-2-loading')` layered on top of the existing MAUI gates and killswitch.
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies
25
+
3
26
  ## 12.2.6
4
27
 
5
28
  ### Patch Changes
@@ -1,35 +1,12 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.lazyMediaGroupView = void 0;
8
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
9
- var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
10
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
11
7
  var _mediaGroup = require("./mediaGroup");
12
- 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" != (0, _typeof2.default)(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); }
13
8
  var lazyMediaGroupView = exports.lazyMediaGroupView = function lazyMediaGroupView(portalProviderAPI, eventDispatcher, providerFactory) {
14
9
  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
15
10
  var api = arguments.length > 4 ? arguments[4] : undefined;
16
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
17
- return (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api);
18
- }
19
- return (0, _lazyNodeView.withLazyLoading)({
20
- nodeName: 'mediaGroup',
21
- getNodeViewOptions: function getNodeViewOptions() {},
22
- loader: function loader() {
23
- var result = Promise.resolve().then(function () {
24
- return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-group-lazy-node-view" */
25
- './mediaGroup'));
26
- }).then(function (_ref) {
27
- var ReactMediaGroupNode = _ref.ReactMediaGroupNode;
28
- return function (node, view, getPos) {
29
- return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
30
- };
31
- });
32
- return result;
33
- }
34
- });
11
+ return (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api);
35
12
  };
@@ -14,7 +14,6 @@ var _react = _interopRequireDefault(require("react"));
14
14
  var _hooks = require("@atlaskit/editor-common/hooks");
15
15
  var _providerFactory = require("@atlaskit/editor-common/provider-factory");
16
16
  var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
17
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
18
17
  var _useMediaProvider = require("../ui/hooks/useMediaProvider");
19
18
  var _mediaGroupNext = require("./mediaGroupNext");
20
19
  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)); }
@@ -67,9 +66,6 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
67
66
  editorDisabled = _ref3.editorDisabled,
68
67
  editorViewMode = _ref3.editorViewMode;
69
68
  var mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
70
- if (!mediaProvider && !(0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
71
- return null;
72
- }
73
69
  return /*#__PURE__*/_react.default.createElement(_mediaGroupNext.MediaGroupNext, {
74
70
  node: _this.node,
75
71
  getPos: getPos,
@@ -92,47 +92,41 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
92
92
  width: '100%',
93
93
  height: '100%'
94
94
  };
95
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
96
- var pos = _this.getPos();
97
- if (typeof pos !== 'number') {
98
- return flexibleDimensions;
99
- }
100
- if (_this.hasBeenResized) {
101
- return flexibleDimensions;
102
- }
103
- var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
95
+ var pos = _this.getPos();
96
+ if (typeof pos !== 'number') {
97
+ return flexibleDimensions;
98
+ }
99
+ if (_this.hasBeenResized) {
100
+ return flexibleDimensions;
101
+ }
102
+ var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
104
103
 
105
- // If media parent not found, return default
106
- if (!mediaSingleNodeParent) {
107
- return flexibleDimensions;
108
- }
109
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
110
- if (_this.hasPxWidthType(mediaSingleNodeParent)) {
111
- return {
112
- width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
113
- height: '100%'
114
- };
115
- }
116
- return flexibleDimensions;
104
+ // If media parent not found, return default
105
+ if (!mediaSingleNodeParent) {
106
+ return flexibleDimensions;
107
+ }
108
+ if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
109
+ if (_this.hasPxWidthType(mediaSingleNodeParent)) {
110
+ return {
111
+ width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
112
+ height: '100%'
113
+ };
117
114
  }
118
-
119
- // Compute normal dimensions
120
- var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
121
- return {
122
- width: "".concat(maxWidth, "px"),
123
- height: '100%'
124
- };
115
+ return flexibleDimensions;
125
116
  }
126
- return flexibleDimensions;
117
+
118
+ // Compute normal dimensions
119
+ var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
120
+ return {
121
+ width: "".concat(maxWidth, "px"),
122
+ height: '100%'
123
+ };
127
124
  });
128
125
  (0, _defineProperty2.default)(_this, "getMediaProviderToUse", function (mediaOptions, mediaProvider) {
129
126
  if (mediaProvider) {
130
127
  return mediaProvider;
131
128
  }
132
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
133
- return mediaOptions.provider;
134
- }
135
- return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
129
+ return mediaOptions.provider;
136
130
  });
137
131
  (0, _defineProperty2.default)(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
138
132
  return function (_ref2) {
@@ -253,12 +247,10 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
253
247
  // see also: https://github.com/ProseMirror/prosemirror/issues/884
254
248
  domRef.contentEditable = 'true';
255
249
  }
256
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
257
- this.resizeListenerBinding = (0, _bindEventListener.bind)(domRef, {
258
- type: 'resized',
259
- listener: this.hasResizedListener
260
- });
261
- }
250
+ this.resizeListenerBinding = (0, _bindEventListener.bind)(domRef, {
251
+ type: 'resized',
252
+ listener: this.hasResizedListener
253
+ });
262
254
  return domRef;
263
255
  }
264
256
  }, {
@@ -55,16 +55,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
55
55
  mediaProvider = _context.sent;
56
56
  if (mediaProvider) {
57
57
  viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
58
- viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
59
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
60
- // Only update state if new configs are available and different from current state
61
- if (viewMediaClientConfig && _this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && _this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
62
- _this.setState({
63
- viewMediaClientConfig: viewMediaClientConfig,
64
- viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
65
- });
66
- }
67
- } else {
58
+ viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig; // Only update state if new configs are available and different from current state
59
+ if (viewMediaClientConfig && _this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && _this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
68
60
  _this.setState({
69
61
  viewMediaClientConfig: viewMediaClientConfig,
70
62
  viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
@@ -167,7 +159,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
167
159
  _this.mediaPluginState = _pluginKey.stateKey.getState(view.state);
168
160
 
169
161
  // Initialize state from syncProvider (available on both server and client for SSR)
170
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) && syncProvider) {
162
+ if (syncProvider) {
171
163
  _this.state = {
172
164
  viewMediaClientConfig: syncProvider.viewMediaClientConfig,
173
165
  viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
@@ -181,7 +173,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
181
173
  value: function shouldComponentUpdate(nextProps, nextState) {
182
174
  var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
183
175
  var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
184
- if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
176
+ if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
185
177
  return true;
186
178
  }
187
179
  return false;
@@ -319,17 +311,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
319
311
  // Check if we have any media client config available (syncProvider, state, or upload config)
320
312
  var hasNoMediaClientConfig = !viewMediaClientConfig && ((0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
321
313
  if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
322
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
323
- return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
324
- dimensions: originalDimensions,
325
- borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
326
- selected: selected
327
- }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
328
- interactionName: "editor-media-card-loading"
329
- }));
330
- }
331
314
  return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
332
- dimensions: originalDimensions
315
+ dimensions: originalDimensions,
316
+ borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
317
+ selected: selected
333
318
  }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
334
319
  interactionName: "editor-media-card-loading"
335
320
  }));
@@ -19,7 +19,6 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
19
19
  var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
20
20
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
21
21
  var _utils = require("@atlaskit/editor-common/utils");
22
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
23
22
  var _main = require("../pm-plugins/main");
24
23
  var _mediaSingleNext = require("./mediaSingleNext");
25
24
  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)); }
@@ -232,7 +231,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
232
231
  };
233
232
  }
234
233
  // Detect mediaSingle width attribute changes and signal child media node to update
235
- if (!this.hasResized && this.node.attrs.width !== node.attrs.width && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
234
+ if (!this.hasResized && this.node.attrs.width !== node.attrs.width) {
236
235
  var target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
237
236
  target === null || target === void 0 || target.dispatchEvent(new CustomEvent('resized'));
238
237
  }
@@ -509,7 +509,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
509
509
  onClick: clickPlaceholder,
510
510
  placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
511
511
  })));
512
- if (!(0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) || widthType !== 'pixel' && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
512
+ if (widthType !== 'pixel' && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
513
513
  return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
514
514
  view: view,
515
515
  getPos: getPos,
@@ -529,7 +529,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
529
529
  hasFallbackContainer: false,
530
530
  mediaSingleWidth: mediaSingleWidth,
531
531
  editorAppearance: editorAppearance,
532
- showLegacyNotification: widthType !== 'pixel',
532
+ showLegacyNotification: true,
533
533
  forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning
534
534
  }, MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, {
535
535
  view: view,
@@ -8,7 +8,6 @@ exports.prepareWrapperContentDOM = exports.mediaWidthCSSCalc = exports.mediaSing
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _adfSchema = require("@atlaskit/adf-schema");
10
10
  var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
11
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
12
11
  var _toDOMAttrs = require("./toDOMAttrs");
13
12
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
14
13
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -54,17 +53,9 @@ var mediaWidthCSSCalc = exports.mediaWidthCSSCalc = function mediaWidthCSSCalc(_
54
53
  } else if (shouldHardCodePixelWidth) {
55
54
  cssCalc = "min(".concat(mediaSingleDimensionWidth, "px, ").concat(fullContainerWidth, ")");
56
55
  } else if (shouldUseBreakoutWideLogic) {
57
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
58
- cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
59
- } else {
60
- cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
61
- }
56
+ cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
62
57
  } else if (shouldUseBreakoutFullWidthLogic) {
63
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
64
- cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
65
- } else {
66
- cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
67
- }
58
+ cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
68
59
  } else {
69
60
  cssCalc = "max(min(".concat(baseWidth, "px, min(100cqw, 100%)), ").concat(GUTTER_SIZE, ")");
70
61
  }
@@ -14,6 +14,8 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
14
14
  var _state = require("@atlaskit/editor-prosemirror/state");
15
15
  var _view = require("@atlaskit/editor-prosemirror/view");
16
16
  var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
17
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
19
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
18
20
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
19
21
  /**
@@ -113,9 +115,10 @@ function createAIGeneratingDecorationPlugin() {
113
115
  };
114
116
  },
115
117
  apply: function apply(tr, pluginState, _oldState, newState) {
116
- // Killswitch if active, clear any existing decorations and stop
118
+ // Disabled when killswitch is on or gate/experiment off drop decorations.
119
+ if (
117
120
  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils -- dynamic config killswitch, not a standard feature gate
118
- if (_featureGateJsClient.default.getExperimentValue('maui_ai_border_killswitch', 'value', false)) {
121
+ _featureGateJsClient.default.getExperimentValue('maui_ai_border_killswitch', 'value', false) || !(0, _platformFeatureFlags.fg)('cc-maui-phase-2-loading') || !(0, _expValEquals.expValEquals)('cc-maui-experiment', 'isEnabled', true)) {
119
122
  if (pluginState.generatingMediaIds.size > 0) {
120
123
  return {
121
124
  generatingMediaIds: new Set(),
@@ -21,7 +21,6 @@ var _utils = require("@atlaskit/editor-common/utils");
21
21
  var _state = require("@atlaskit/editor-prosemirror/state");
22
22
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
23
23
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
24
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
25
24
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
26
25
  var _main = require("../../pm-plugins/main");
27
26
  var _analytics = require("../../pm-plugins/utils/analytics");
@@ -213,11 +212,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
213
212
  _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
214
213
  hasResized = _useState0[0],
215
214
  setHasResized = _useState0[1];
216
- var nodePosition = (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? getNodePosition(getPos) :
217
- // eslint-disable-next-line react-hooks/rules-of-hooks
218
- (0, _react.useMemo)(function () {
219
- return getNodePosition(getPos);
220
- }, [getPos]);
215
+ var nodePosition = getNodePosition(getPos);
221
216
  var isNestedNode = (0, _react.useMemo)(function () {
222
217
  if (nodePosition === null) {
223
218
  return false;
@@ -252,7 +247,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
252
247
  if (isAdjacentMode || fullWidthMode) {
253
248
  return lineLength;
254
249
  }
255
- if (!isResizing && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
250
+ if (!isResizing) {
256
251
  return "var(--ak-editor-max-container-width)";
257
252
  }
258
253
  return calcMaxWidth({
@@ -269,7 +264,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
269
264
  var minViewWidth = isResizing ? minWidth : "min(".concat(minWidth, "px, 100%)");
270
265
  var resizerNextClassName = (0, _react.useMemo)(function () {
271
266
  var classNameNext = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, _styles.resizerItemClassName, {
272
- 'display-handle': (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
267
+ 'display-handle': selected && !disableHandles,
273
268
  'richMedia-selected': selected,
274
269
  'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
275
270
  });
@@ -284,7 +279,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
284
279
  return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
285
280
  }, [nodePosition, view]);
286
281
  var enable = (0, _react.useMemo)(function () {
287
- if (disableHandles && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
282
+ if (disableHandles) {
288
283
  return {
289
284
  left: false,
290
285
  right: false
@@ -391,7 +386,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
391
386
  height = _calculateSizeState.height,
392
387
  newLayout = _calculateSizeState.layout;
393
388
  var resizerDomEl = resizerContainerRef.current;
394
- if (resizerDomEl && !hasResized && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
389
+ if (resizerDomEl && !hasResized) {
395
390
  // dispatch resize event to media node DOM element inside resizerDom
396
391
  var mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
397
392
  var event = new CustomEvent('resized');
@@ -526,7 +521,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
526
521
  snap: snaps,
527
522
  resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
528
523
  "data-testid": resizerNextTestId,
529
- isHandleVisible: (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
524
+ isHandleVisible: selected && !disableHandles,
530
525
  handlePositioning: handlePositioning,
531
526
  handleHighlight: "full-height"
532
527
  }, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
@@ -21,7 +21,6 @@ var _ui = require("@atlaskit/editor-common/ui");
21
21
  var _utils = require("@atlaskit/editor-common/utils");
22
22
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
23
23
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
24
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
25
24
  var _checkMediaType = require("../../pm-plugins/utils/check-media-type");
26
25
  var _styled = require("./styled");
27
26
  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)); }
@@ -58,7 +57,7 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
58
57
  var _this$props2 = _this.props,
59
58
  layout = _this$props2.layout,
60
59
  state = _this$props2.view.state;
61
- if (!_this.hasResized && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
60
+ if (!_this.hasResized) {
62
61
  var _this$wrapper;
63
62
  var mediaDomEl = (_this$wrapper = _this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.querySelector('div[data-prosemirror-node-name="media"]');
64
63
  if (mediaDomEl) {
@@ -365,11 +364,9 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
365
364
  var enable = {};
366
365
  _ui.handleSides.forEach(function (side) {
367
366
  var oppositeSide = side === 'left' ? 'right' : 'left';
368
- if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
369
- if (_this2.props.disableHandles) {
370
- enable[side] = false;
371
- return;
372
- }
367
+ if (_this2.props.disableHandles) {
368
+ enable[side] = false;
369
+ return;
373
370
  }
374
371
  enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
375
372
  if (side === 'left' && _this2.insideInlineLike) {
@@ -1,23 +1,4 @@
1
- import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
2
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
1
  import { ReactMediaGroupNode } from './mediaGroup';
4
2
  export const lazyMediaGroupView = (portalProviderAPI, eventDispatcher, providerFactory, options = {}, api) => {
5
- if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
6
- return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
7
- }
8
- return withLazyLoading({
9
- nodeName: 'mediaGroup',
10
- getNodeViewOptions: () => {},
11
- loader: () => {
12
- const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-group-lazy-node-view" */
13
- './mediaGroup').then(({
14
- ReactMediaGroupNode
15
- }) => {
16
- return (node, view, getPos) => {
17
- return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
18
- };
19
- });
20
- return result;
21
- }
22
- });
3
+ return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
23
4
  };
@@ -2,7 +2,6 @@ import React from 'react';
2
2
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { WithProviders } from '@atlaskit/editor-common/provider-factory';
4
4
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
5
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
5
  import { useMediaProvider } from '../ui/hooks/useMediaProvider';
7
6
  import { MediaGroupNext } from './mediaGroupNext';
8
7
  const selector = states => {
@@ -51,9 +50,6 @@ class MediaGroupNodeView extends ReactNodeView {
51
50
  editorViewMode
52
51
  }) => {
53
52
  const mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
54
- if (!mediaProvider && !expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
55
- return null;
56
- }
57
53
  return /*#__PURE__*/React.createElement(MediaGroupNext, {
58
54
  node: this.node,
59
55
  getPos: getPos,
@@ -72,47 +72,41 @@ class MediaNodeView extends SelectionBasedNodeView {
72
72
  width: '100%',
73
73
  height: '100%'
74
74
  };
75
- if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
76
- const pos = this.getPos();
77
- if (typeof pos !== 'number') {
78
- return flexibleDimensions;
79
- }
80
- if (this.hasBeenResized) {
81
- return flexibleDimensions;
82
- }
83
- const mediaSingleNodeParent = this.getMediaSingleNode(this.getPos);
75
+ const pos = this.getPos();
76
+ if (typeof pos !== 'number') {
77
+ return flexibleDimensions;
78
+ }
79
+ if (this.hasBeenResized) {
80
+ return flexibleDimensions;
81
+ }
82
+ const mediaSingleNodeParent = this.getMediaSingleNode(this.getPos);
84
83
 
85
- // If media parent not found, return default
86
- if (!mediaSingleNodeParent) {
87
- return flexibleDimensions;
88
- }
89
- if (expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
90
- if (this.hasPxWidthType(mediaSingleNodeParent)) {
91
- return {
92
- width: `${mediaSingleNodeParent.attrs.width}px`,
93
- height: '100%'
94
- };
95
- }
96
- return flexibleDimensions;
84
+ // If media parent not found, return default
85
+ if (!mediaSingleNodeParent) {
86
+ return flexibleDimensions;
87
+ }
88
+ if (expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
89
+ if (this.hasPxWidthType(mediaSingleNodeParent)) {
90
+ return {
91
+ width: `${mediaSingleNodeParent.attrs.width}px`,
92
+ height: '100%'
93
+ };
97
94
  }
98
-
99
- // Compute normal dimensions
100
- const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
101
- return {
102
- width: `${maxWidth}px`,
103
- height: '100%'
104
- };
95
+ return flexibleDimensions;
105
96
  }
106
- return flexibleDimensions;
97
+
98
+ // Compute normal dimensions
99
+ const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
100
+ return {
101
+ width: `${maxWidth}px`,
102
+ height: '100%'
103
+ };
107
104
  });
108
105
  _defineProperty(this, "getMediaProviderToUse", (mediaOptions, mediaProvider) => {
109
106
  if (mediaProvider) {
110
107
  return mediaProvider;
111
108
  }
112
- if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
113
- return mediaOptions.provider;
114
- }
115
- return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
109
+ return mediaOptions.provider;
116
110
  });
117
111
  _defineProperty(this, "renderMediaNodeWithState", contextIdentifierProvider => {
118
112
  return ({
@@ -237,12 +231,10 @@ class MediaNodeView extends SelectionBasedNodeView {
237
231
  // see also: https://github.com/ProseMirror/prosemirror/issues/884
238
232
  domRef.contentEditable = 'true';
239
233
  }
240
- if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
241
- this.resizeListenerBinding = bind(domRef, {
242
- type: 'resized',
243
- listener: this.hasResizedListener
244
- });
245
- }
234
+ this.resizeListenerBinding = bind(domRef, {
235
+ type: 'resized',
236
+ listener: this.hasResizedListener
237
+ });
246
238
  return domRef;
247
239
  }
248
240
  viewShouldUpdate(nextNode, decorations) {
@@ -31,15 +31,8 @@ export class MediaNode extends Component {
31
31
  if (mediaProvider) {
32
32
  const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
33
33
  const viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
34
- if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
35
- // Only update state if new configs are available and different from current state
36
- if (viewMediaClientConfig && this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
37
- this.setState({
38
- viewMediaClientConfig,
39
- viewAndUploadMediaClientConfig
40
- });
41
- }
42
- } else {
34
+ // Only update state if new configs are available and different from current state
35
+ if (viewMediaClientConfig && this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
43
36
  this.setState({
44
37
  viewMediaClientConfig,
45
38
  viewAndUploadMediaClientConfig
@@ -140,7 +133,7 @@ export class MediaNode extends Component {
140
133
  this.mediaPluginState = mediaStateKey.getState(view.state);
141
134
 
142
135
  // Initialize state from syncProvider (available on both server and client for SSR)
143
- if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && syncProvider) {
136
+ if (syncProvider) {
144
137
  this.state = {
145
138
  viewMediaClientConfig: syncProvider.viewMediaClientConfig,
146
139
  viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
@@ -150,7 +143,7 @@ export class MediaNode extends Component {
150
143
  shouldComponentUpdate(nextProps, nextState) {
151
144
  const hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
152
145
  const hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
153
- if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
146
+ if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
154
147
  return true;
155
148
  }
156
149
  return false;
@@ -260,17 +253,10 @@ export class MediaNode extends Component {
260
253
  // Check if we have any media client config available (syncProvider, state, or upload config)
261
254
  const hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
262
255
  if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
263
- if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
264
- return /*#__PURE__*/React.createElement(MediaCardWrapper, {
265
- dimensions: originalDimensions,
266
- borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
267
- selected: selected
268
- }, /*#__PURE__*/React.createElement(CardLoading, {
269
- interactionName: "editor-media-card-loading"
270
- }));
271
- }
272
256
  return /*#__PURE__*/React.createElement(MediaCardWrapper, {
273
- dimensions: originalDimensions
257
+ dimensions: originalDimensions,
258
+ borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
259
+ selected: selected
274
260
  }, /*#__PURE__*/React.createElement(CardLoading, {
275
261
  interactionName: "editor-media-card-loading"
276
262
  }));