@atlaskit/editor-plugin-media 21.0.6 → 22.0.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 (6) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/nodeviews/mediaSingle.js +31 -16
  3. package/dist/es2019/nodeviews/mediaSingle.js +22 -7
  4. package/dist/esm/nodeviews/mediaSingle.js +31 -16
  5. package/dist/types/nodeviews/mediaSingle.d.ts +9 -0
  6. package/package.json +19 -19
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 22.0.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 21.0.7
10
+
11
+ ### Patch Changes
12
+
13
+ - [`fc379967e4bb6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fc379967e4bb6) -
14
+ Behind the shared `platform_editor_reduce_forced_layout` experiment, the media single node view no
15
+ longer reads `offsetLeft` from `ignoreMutation` when nothing can consume the result — that is,
16
+ when pixel resizing is enabled (the resizer used in that mode never reads it) or when resizing is
17
+ disabled. The read forced a synchronous layout recalculation on every DOM mutation and every caret
18
+ move inside a media single. Percentage-based resizing is unaffected.
19
+ - Updated dependencies
20
+
3
21
  ## 21.0.6
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/nodeviews/mediaSingle.js CHANGED
@@ -20,6 +20,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
20
20
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
21
21
  var _utils = require("@atlaskit/editor-common/utils");
22
22
  var _contentVisibility = require("@atlaskit/editor-common/utils/content-visibility");
23
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
23
24
  var _main = require("../pm-plugins/main");
24
25
  var _MediaSSRReactContextsProvider = require("../ui/MediaSSRReactContextsProvider");
25
26
  var _mediaSingleNext = require("./mediaSingleNext");
@@ -98,6 +99,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref) {
98
99
  };
99
100
  var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
100
101
  function MediaSingleNodeView() {
102
+ var _this$reactComponentP, _this$reactComponentP2;
101
103
  var _this;
102
104
  (0, _classCallCheck2.default)(this, MediaSingleNodeView);
103
105
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -131,20 +133,29 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
131
133
  _this.checkAndUpdateSelectionType();
132
134
  return _this.selectionType !== null;
133
135
  });
136
+ /**
137
+ * Only the percentage-based `ResizableMediaSingle` reads `offsetLeft`, to offset the resize grid
138
+ * for an image indented in a list. Resolved once: `ignoreMutation` is far too hot for a per-call
139
+ * experiment lookup.
140
+ *
141
+ * We can remove skipsOffsetLeftRead and always return true ignoreMutation,
142
+ * Once we removed the legacy media resizer.
143
+ */
144
+ (0, _defineProperty2.default)(_this, "skipsOffsetLeftRead", (Boolean((_this$reactComponentP = _this.reactComponentProps.mediaOptions) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.allowPixelResizing) || !((_this$reactComponentP2 = _this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP2 !== void 0 && _this$reactComponentP2.allowResizing)) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_reduce_forced_layout'));
134
145
  return _this;
135
146
  }
136
147
  (0, _inherits2.default)(MediaSingleNodeView, _ReactNodeView);
137
148
  return (0, _createClass2.default)(MediaSingleNodeView, [{
138
149
  key: "createDomRef",
139
150
  value: function createDomRef() {
140
- var _this$reactComponentP, _this$reactComponentP2;
151
+ var _this$reactComponentP3, _this$reactComponentP4;
141
152
  var domRef = document.createElement('div');
142
153
 
143
154
  // control the domRef contentEditable attribute based on the editor view mode
144
155
  this.unsubscribeToViewModeChange = this.subscribeToViewModeChange(domRef);
145
- var initialViewMode = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode;
156
+ var initialViewMode = (_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode;
146
157
  this.updateDomRefContentEditable(domRef, initialViewMode);
147
- if ((_this$reactComponentP2 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP2 !== void 0 && _this$reactComponentP2.allowPixelResizing) {
158
+ if ((_this$reactComponentP4 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP4 !== void 0 && _this$reactComponentP4.allowPixelResizing) {
148
159
  domRef.classList.add('media-extended-resize-experience');
149
160
  }
150
161
  domRef.setAttribute('data-media-vc-wrapper', 'true');
@@ -205,9 +216,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
205
216
  }, {
206
217
  key: "subscribeToViewModeChange",
207
218
  value: function subscribeToViewModeChange(domRef) {
208
- var _this$reactComponentP3,
219
+ var _this$reactComponentP5,
209
220
  _this3 = this;
210
- return (_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.sharedState.onChange(function (viewModeState) {
221
+ return (_this$reactComponentP5 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP5 === void 0 || (_this$reactComponentP5 = _this$reactComponentP5.editorViewMode) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.sharedState.onChange(function (viewModeState) {
211
222
  var _viewModeState$nextSh;
212
223
  _this3.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
213
224
  });
@@ -215,7 +226,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
215
226
  }, {
216
227
  key: "updateDomRefContentEditable",
217
228
  value: function updateDomRefContentEditable(domRef, editorViewMode) {
218
- var _this$reactComponentP4;
229
+ var _this$reactComponentP6;
219
230
  // if the editor is in view mode, we should not allow editing
220
231
  if (editorViewMode === 'view') {
221
232
  domRef.contentEditable = 'false';
@@ -223,7 +234,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
223
234
  }
224
235
 
225
236
  // if the editor is in edit mode, we should allow editing if the media options allow it
226
- if ((_this$reactComponentP4 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP4 !== void 0 && _this$reactComponentP4.allowMediaSingleEditable) {
237
+ if ((_this$reactComponentP6 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.allowMediaSingleEditable) {
227
238
  // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
228
239
  // see also: https://github.com/ProseMirror/prosemirror/issues/884
229
240
  domRef.contentEditable = 'true';
@@ -272,15 +283,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
272
283
  key: "render",
273
284
  value: function render(props, forwardRef) {
274
285
  var _this5 = this;
275
- var _this$reactComponentP5 = this.reactComponentProps,
276
- eventDispatcher = _this$reactComponentP5.eventDispatcher,
277
- fullWidthMode = _this$reactComponentP5.fullWidthMode,
278
- providerFactory = _this$reactComponentP5.providerFactory,
279
- mediaOptions = _this$reactComponentP5.mediaOptions,
280
- dispatchAnalyticsEvent = _this$reactComponentP5.dispatchAnalyticsEvent,
281
- pluginInjectionApi = _this$reactComponentP5.pluginInjectionApi,
282
- editorAppearance = _this$reactComponentP5.editorAppearance,
283
- intl = _this$reactComponentP5.intl;
286
+ var _this$reactComponentP7 = this.reactComponentProps,
287
+ eventDispatcher = _this$reactComponentP7.eventDispatcher,
288
+ fullWidthMode = _this$reactComponentP7.fullWidthMode,
289
+ providerFactory = _this$reactComponentP7.providerFactory,
290
+ mediaOptions = _this$reactComponentP7.mediaOptions,
291
+ dispatchAnalyticsEvent = _this$reactComponentP7.dispatchAnalyticsEvent,
292
+ pluginInjectionApi = _this$reactComponentP7.pluginInjectionApi,
293
+ editorAppearance = _this$reactComponentP7.editorAppearance,
294
+ intl = _this$reactComponentP7.intl;
284
295
  // getPos is a boolean for marks, since this is a node we know it must be a function
285
296
  var getPos = this.getPos;
286
297
  return (0, _react2.jsx)(_MediaSSRReactContextsProvider.MediaSSRReactContextsProvider, {
@@ -320,6 +331,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
320
331
  }, {
321
332
  key: "ignoreMutation",
322
333
  value: function ignoreMutation() {
334
+ if (this.skipsOffsetLeftRead) {
335
+ return true;
336
+ }
337
+
323
338
  // DOM has changed; recalculate if we need to re-render
324
339
  if (this.dom) {
325
340
  // Ignored via go/ees005
package/dist/es2019/nodeviews/mediaSingle.js CHANGED
@@ -15,6 +15,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
15
15
  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
16
16
  import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
17
17
  import { applyContentVisibility, estimateMediaSingleIntrinsicSize } from '@atlaskit/editor-common/utils/content-visibility';
18
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
18
19
  import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
19
20
  import { MediaSSRReactContextsProvider } from '../ui/MediaSSRReactContextsProvider';
20
21
  import { MediaSingleNodeNext } from './mediaSingleNext';
@@ -83,6 +84,7 @@ const MediaSingleNodeWrapper = ({
83
84
  };
84
85
  class MediaSingleNodeView extends ReactNodeView {
85
86
  constructor(...args) {
87
+ var _this$reactComponentP, _this$reactComponentP2;
86
88
  super(...args);
87
89
  _defineProperty(this, "lastOffsetLeft", 0);
88
90
  _defineProperty(this, "forceViewUpdate", false);
@@ -113,16 +115,25 @@ class MediaSingleNodeView extends ReactNodeView {
113
115
  this.checkAndUpdateSelectionType();
114
116
  return this.selectionType !== null;
115
117
  });
118
+ /**
119
+ * Only the percentage-based `ResizableMediaSingle` reads `offsetLeft`, to offset the resize grid
120
+ * for an image indented in a list. Resolved once: `ignoreMutation` is far too hot for a per-call
121
+ * experiment lookup.
122
+ *
123
+ * We can remove skipsOffsetLeftRead and always return true ignoreMutation,
124
+ * Once we removed the legacy media resizer.
125
+ */
126
+ _defineProperty(this, "skipsOffsetLeftRead", (Boolean((_this$reactComponentP = this.reactComponentProps.mediaOptions) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.allowPixelResizing) || !((_this$reactComponentP2 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP2 !== void 0 && _this$reactComponentP2.allowResizing)) && isExperimentEnabled('platform_editor_reduce_forced_layout'));
116
127
  }
117
128
  createDomRef() {
118
- var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3, _this$reactComponentP4;
129
+ var _this$reactComponentP3, _this$reactComponentP4, _this$reactComponentP5, _this$reactComponentP6;
119
130
  const domRef = document.createElement('div');
120
131
 
121
132
  // control the domRef contentEditable attribute based on the editor view mode
122
133
  this.unsubscribeToViewModeChange = this.subscribeToViewModeChange(domRef);
123
- const initialViewMode = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : (_this$reactComponentP3 = _this$reactComponentP2.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode;
134
+ const initialViewMode = (_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 ? void 0 : (_this$reactComponentP4 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP4 === void 0 ? void 0 : (_this$reactComponentP5 = _this$reactComponentP4.sharedState.currentState()) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.mode;
124
135
  this.updateDomRefContentEditable(domRef, initialViewMode);
125
- if ((_this$reactComponentP4 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP4 !== void 0 && _this$reactComponentP4.allowPixelResizing) {
136
+ if ((_this$reactComponentP6 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.allowPixelResizing) {
126
137
  domRef.classList.add('media-extended-resize-experience');
127
138
  }
128
139
  domRef.setAttribute('data-media-vc-wrapper', 'true');
@@ -174,14 +185,14 @@ class MediaSingleNodeView extends ReactNodeView {
174
185
  return super.viewShouldUpdate(nextNode);
175
186
  }
176
187
  subscribeToViewModeChange(domRef) {
177
- var _this$reactComponentP5, _this$reactComponentP6;
178
- return (_this$reactComponentP5 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP5 === void 0 ? void 0 : (_this$reactComponentP6 = _this$reactComponentP5.editorViewMode) === null || _this$reactComponentP6 === void 0 ? void 0 : _this$reactComponentP6.sharedState.onChange(viewModeState => {
188
+ var _this$reactComponentP7, _this$reactComponentP8;
189
+ return (_this$reactComponentP7 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP7 === void 0 ? void 0 : (_this$reactComponentP8 = _this$reactComponentP7.editorViewMode) === null || _this$reactComponentP8 === void 0 ? void 0 : _this$reactComponentP8.sharedState.onChange(viewModeState => {
179
190
  var _viewModeState$nextSh;
180
191
  this.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
181
192
  });
182
193
  }
183
194
  updateDomRefContentEditable(domRef, editorViewMode) {
184
- var _this$reactComponentP7;
195
+ var _this$reactComponentP9;
185
196
  // if the editor is in view mode, we should not allow editing
186
197
  if (editorViewMode === 'view') {
187
198
  domRef.contentEditable = 'false';
@@ -189,7 +200,7 @@ class MediaSingleNodeView extends ReactNodeView {
189
200
  }
190
201
 
191
202
  // if the editor is in edit mode, we should allow editing if the media options allow it
192
- if ((_this$reactComponentP7 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP7 !== void 0 && _this$reactComponentP7.allowMediaSingleEditable) {
203
+ if ((_this$reactComponentP9 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP9 !== void 0 && _this$reactComponentP9.allowMediaSingleEditable) {
193
204
  // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
194
205
  // see also: https://github.com/ProseMirror/prosemirror/issues/884
195
206
  domRef.contentEditable = 'true';
@@ -274,6 +285,10 @@ class MediaSingleNodeView extends ReactNodeView {
274
285
  }));
275
286
  }
276
287
  ignoreMutation() {
288
+ if (this.skipsOffsetLeftRead) {
289
+ return true;
290
+ }
291
+
277
292
  // DOM has changed; recalculate if we need to re-render
278
293
  if (this.dom) {
279
294
  // Ignored via go/ees005
package/dist/esm/nodeviews/mediaSingle.js CHANGED
@@ -24,6 +24,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
24
24
  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
25
25
  import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
26
26
  import { applyContentVisibility, estimateMediaSingleIntrinsicSize } from '@atlaskit/editor-common/utils/content-visibility';
27
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
27
28
  import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
28
29
  import { MediaSSRReactContextsProvider } from '../ui/MediaSSRReactContextsProvider';
29
30
  import { MediaSingleNodeNext } from './mediaSingleNext';
@@ -94,6 +95,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref) {
94
95
  };
95
96
  var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
96
97
  function MediaSingleNodeView() {
98
+ var _this$reactComponentP, _this$reactComponentP2;
97
99
  var _this;
98
100
  _classCallCheck(this, MediaSingleNodeView);
99
101
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -127,20 +129,29 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
127
129
  _this.checkAndUpdateSelectionType();
128
130
  return _this.selectionType !== null;
129
131
  });
132
+ /**
133
+ * Only the percentage-based `ResizableMediaSingle` reads `offsetLeft`, to offset the resize grid
134
+ * for an image indented in a list. Resolved once: `ignoreMutation` is far too hot for a per-call
135
+ * experiment lookup.
136
+ *
137
+ * We can remove skipsOffsetLeftRead and always return true ignoreMutation,
138
+ * Once we removed the legacy media resizer.
139
+ */
140
+ _defineProperty(_this, "skipsOffsetLeftRead", (Boolean((_this$reactComponentP = _this.reactComponentProps.mediaOptions) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.allowPixelResizing) || !((_this$reactComponentP2 = _this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP2 !== void 0 && _this$reactComponentP2.allowResizing)) && isExperimentEnabled('platform_editor_reduce_forced_layout'));
130
141
  return _this;
131
142
  }
132
143
  _inherits(MediaSingleNodeView, _ReactNodeView);
133
144
  return _createClass(MediaSingleNodeView, [{
134
145
  key: "createDomRef",
135
146
  value: function createDomRef() {
136
- var _this$reactComponentP, _this$reactComponentP2;
147
+ var _this$reactComponentP3, _this$reactComponentP4;
137
148
  var domRef = document.createElement('div');
138
149
 
139
150
  // control the domRef contentEditable attribute based on the editor view mode
140
151
  this.unsubscribeToViewModeChange = this.subscribeToViewModeChange(domRef);
141
- var initialViewMode = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode;
152
+ var initialViewMode = (_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode;
142
153
  this.updateDomRefContentEditable(domRef, initialViewMode);
143
- if ((_this$reactComponentP2 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP2 !== void 0 && _this$reactComponentP2.allowPixelResizing) {
154
+ if ((_this$reactComponentP4 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP4 !== void 0 && _this$reactComponentP4.allowPixelResizing) {
144
155
  domRef.classList.add('media-extended-resize-experience');
145
156
  }
146
157
  domRef.setAttribute('data-media-vc-wrapper', 'true');
@@ -201,9 +212,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
201
212
  }, {
202
213
  key: "subscribeToViewModeChange",
203
214
  value: function subscribeToViewModeChange(domRef) {
204
- var _this$reactComponentP3,
215
+ var _this$reactComponentP5,
205
216
  _this3 = this;
206
- return (_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.sharedState.onChange(function (viewModeState) {
217
+ return (_this$reactComponentP5 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP5 === void 0 || (_this$reactComponentP5 = _this$reactComponentP5.editorViewMode) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.sharedState.onChange(function (viewModeState) {
207
218
  var _viewModeState$nextSh;
208
219
  _this3.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
209
220
  });
@@ -211,7 +222,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
211
222
  }, {
212
223
  key: "updateDomRefContentEditable",
213
224
  value: function updateDomRefContentEditable(domRef, editorViewMode) {
214
- var _this$reactComponentP4;
225
+ var _this$reactComponentP6;
215
226
  // if the editor is in view mode, we should not allow editing
216
227
  if (editorViewMode === 'view') {
217
228
  domRef.contentEditable = 'false';
@@ -219,7 +230,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
219
230
  }
220
231
 
221
232
  // if the editor is in edit mode, we should allow editing if the media options allow it
222
- if ((_this$reactComponentP4 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP4 !== void 0 && _this$reactComponentP4.allowMediaSingleEditable) {
233
+ if ((_this$reactComponentP6 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.allowMediaSingleEditable) {
223
234
  // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
224
235
  // see also: https://github.com/ProseMirror/prosemirror/issues/884
225
236
  domRef.contentEditable = 'true';
@@ -268,15 +279,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
268
279
  key: "render",
269
280
  value: function render(props, forwardRef) {
270
281
  var _this5 = this;
271
- var _this$reactComponentP5 = this.reactComponentProps,
272
- eventDispatcher = _this$reactComponentP5.eventDispatcher,
273
- fullWidthMode = _this$reactComponentP5.fullWidthMode,
274
- providerFactory = _this$reactComponentP5.providerFactory,
275
- mediaOptions = _this$reactComponentP5.mediaOptions,
276
- dispatchAnalyticsEvent = _this$reactComponentP5.dispatchAnalyticsEvent,
277
- pluginInjectionApi = _this$reactComponentP5.pluginInjectionApi,
278
- editorAppearance = _this$reactComponentP5.editorAppearance,
279
- intl = _this$reactComponentP5.intl;
282
+ var _this$reactComponentP7 = this.reactComponentProps,
283
+ eventDispatcher = _this$reactComponentP7.eventDispatcher,
284
+ fullWidthMode = _this$reactComponentP7.fullWidthMode,
285
+ providerFactory = _this$reactComponentP7.providerFactory,
286
+ mediaOptions = _this$reactComponentP7.mediaOptions,
287
+ dispatchAnalyticsEvent = _this$reactComponentP7.dispatchAnalyticsEvent,
288
+ pluginInjectionApi = _this$reactComponentP7.pluginInjectionApi,
289
+ editorAppearance = _this$reactComponentP7.editorAppearance,
290
+ intl = _this$reactComponentP7.intl;
280
291
  // getPos is a boolean for marks, since this is a node we know it must be a function
281
292
  var getPos = this.getPos;
282
293
  return jsx(MediaSSRReactContextsProvider, {
@@ -316,6 +327,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
316
327
  }, {
317
328
  key: "ignoreMutation",
318
329
  value: function ignoreMutation() {
330
+ if (this.skipsOffsetLeftRead) {
331
+ return true;
332
+ }
333
+
319
334
  // DOM has changed; recalculate if we need to re-render
320
335
  if (this.dom) {
321
336
  // Ignored via go/ees005
package/dist/types/nodeviews/mediaSingle.d.ts CHANGED
@@ -38,6 +38,15 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
38
38
  stopEvent(event: Event): boolean;
39
39
  update(node: PMNode, decorations: readonly Decoration[], _innerDecorations?: DecorationSource, isValidUpdate?: (currentNode: PMNode, newNode: PMNode) => boolean): boolean;
40
40
  render(props: MediaSingleNodeViewProps, forwardRef?: ForwardRef): jsx.JSX.Element;
41
+ /**
42
+ * Only the percentage-based `ResizableMediaSingle` reads `offsetLeft`, to offset the resize grid
43
+ * for an image indented in a list. Resolved once: `ignoreMutation` is far too hot for a per-call
44
+ * experiment lookup.
45
+ *
46
+ * We can remove skipsOffsetLeftRead and always return true ignoreMutation,
47
+ * Once we removed the legacy media resizer.
48
+ */
49
+ private readonly skipsOffsetLeftRead;
41
50
  ignoreMutation(): boolean;
42
51
  destroy(): void;
43
52
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "21.0.6",
3
+ "version": "22.0.0",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -27,22 +27,22 @@
27
27
  "@atlaskit/button": "^25.4.0",
28
28
  "@atlaskit/css": "^1.1.0",
29
29
  "@atlaskit/editor-palette": "^3.5.0",
30
- "@atlaskit/editor-plugin-analytics": "^19.0.0",
31
- "@atlaskit/editor-plugin-annotation": "^19.2.0",
32
- "@atlaskit/editor-plugin-connectivity": "^19.0.0",
33
- "@atlaskit/editor-plugin-decorations": "^19.0.0",
34
- "@atlaskit/editor-plugin-editor-disabled": "^19.0.0",
35
- "@atlaskit/editor-plugin-editor-viewmode": "^21.0.0",
36
- "@atlaskit/editor-plugin-floating-toolbar": "^21.3.0",
37
- "@atlaskit/editor-plugin-focus": "^18.0.0",
38
- "@atlaskit/editor-plugin-grid": "^19.0.0",
39
- "@atlaskit/editor-plugin-guideline": "^19.0.0",
40
- "@atlaskit/editor-plugin-interaction": "^33.0.0",
41
- "@atlaskit/editor-plugin-limited-mode": "^16.0.0",
42
- "@atlaskit/editor-plugin-media-editing": "^13.0.0",
43
- "@atlaskit/editor-plugin-selection": "^19.0.0",
44
- "@atlaskit/editor-plugin-toolbar": "^16.0.0",
45
- "@atlaskit/editor-plugin-width": "^20.0.0",
30
+ "@atlaskit/editor-plugin-analytics": "^20.0.0",
31
+ "@atlaskit/editor-plugin-annotation": "^20.0.0",
32
+ "@atlaskit/editor-plugin-connectivity": "^20.0.0",
33
+ "@atlaskit/editor-plugin-decorations": "^20.0.0",
34
+ "@atlaskit/editor-plugin-editor-disabled": "^20.0.0",
35
+ "@atlaskit/editor-plugin-editor-viewmode": "^22.0.0",
36
+ "@atlaskit/editor-plugin-floating-toolbar": "^22.0.0",
37
+ "@atlaskit/editor-plugin-focus": "^19.0.0",
38
+ "@atlaskit/editor-plugin-grid": "^20.0.0",
39
+ "@atlaskit/editor-plugin-guideline": "^20.0.0",
40
+ "@atlaskit/editor-plugin-interaction": "^34.0.0",
41
+ "@atlaskit/editor-plugin-limited-mode": "^17.0.0",
42
+ "@atlaskit/editor-plugin-media-editing": "^14.0.0",
43
+ "@atlaskit/editor-plugin-selection": "^20.0.0",
44
+ "@atlaskit/editor-plugin-toolbar": "^17.0.0",
45
+ "@atlaskit/editor-plugin-width": "^21.0.0",
46
46
  "@atlaskit/editor-prosemirror": "^9.0.0",
47
47
  "@atlaskit/editor-shared-styles": "^4.3.0",
48
48
  "@atlaskit/editor-tables": "^3.2.0",
@@ -61,7 +61,7 @@
61
61
  "@atlaskit/platform-feature-flags": "^2.2.0",
62
62
  "@atlaskit/primitives": "^22.5.0",
63
63
  "@atlaskit/textfield": "^10.2.0",
64
- "@atlaskit/tmp-editor-statsig": "^203.0.0",
64
+ "@atlaskit/tmp-editor-statsig": "^205.0.0",
65
65
  "@atlaskit/tokens": "^19.0.0",
66
66
  "@atlaskit/tooltip": "^24.3.0",
67
67
  "@babel/runtime": "^7.0.0",
@@ -74,7 +74,7 @@
74
74
  "uuid": "^11.1.1"
75
75
  },
76
76
  "peerDependencies": {
77
- "@atlaskit/editor-common": "^123.8.0",
77
+ "@atlaskit/editor-common": "^124.0.0",
78
78
  "@atlaskit/media-core": "^38.2.0",
79
79
  "react": "^18.2.0 || ^19.2.0",
80
80
  "react-dom": "^18.2.0 || ^19.2.0",