@atlaskit/editor-plugin-block-controls 1.5.15 → 1.5.17

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 (9) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/pm-plugins/main.js +48 -6
  3. package/dist/es2019/pm-plugins/main.js +48 -6
  4. package/dist/esm/pm-plugins/main.js +48 -6
  5. package/dist/types/pm-plugins/main.d.ts +2 -0
  6. package/dist/types/types.d.ts +2 -0
  7. package/dist/types-ts4.5/pm-plugins/main.d.ts +2 -0
  8. package/dist/types-ts4.5/types.d.ts +2 -0
  9. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.5.17
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.5.16
10
+
11
+ ### Patch Changes
12
+
13
+ - [#119383](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119383)
14
+ [`2db50d6540e1b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2db50d6540e1b) -
15
+ [ux] fix drag handles to respond to viewport narrowing
16
+ - Updated dependencies
17
+
3
18
  ## 1.5.15
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -77,6 +77,8 @@ var initialState = {
77
77
  isDragging: false,
78
78
  isMenuOpen: false,
79
79
  editorHeight: 0,
80
+ editorWidthLeft: 0,
81
+ editorWidthRight: 0,
80
82
  isResizerResizing: false,
81
83
  isDocSizeLimitEnabled: null,
82
84
  isPMDragging: false
@@ -90,7 +92,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
90
92
  return initialState;
91
93
  },
92
94
  apply: function apply(tr, currentState, oldState, newState) {
93
- var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
95
+ var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
94
96
  if (initialState.isDocSizeLimitEnabled === null) {
95
97
  if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
96
98
  initialState.isDocSizeLimitEnabled = true;
@@ -106,6 +108,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
106
108
  isMenuOpen = currentState.isMenuOpen,
107
109
  decorationState = currentState.decorationState,
108
110
  editorHeight = currentState.editorHeight,
111
+ editorWidthLeft = currentState.editorWidthLeft,
112
+ editorWidthRight = currentState.editorWidthRight,
109
113
  isResizerResizing = currentState.isResizerResizing,
110
114
  isDragging = currentState.isDragging,
111
115
  isPMDragging = currentState.isPMDragging;
@@ -155,7 +159,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
155
159
  // (when the table node rerenders)
156
160
  // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
157
161
  var maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
158
- var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
162
+ var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
159
163
 
160
164
  // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
161
165
  if (redrawDecorations && !isResizerResizing && api) {
@@ -285,6 +289,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
285
289
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
286
290
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
287
291
  editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
292
+ editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : currentState.editorWidthLeft,
293
+ editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : currentState.editorWidthRight,
288
294
  isResizerResizing: isResizerResizing,
289
295
  isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
290
296
  isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
@@ -379,10 +385,12 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
379
385
  },
380
386
  view: function view(editorView) {
381
387
  var dom = editorView.dom;
382
- var resizeObserver;
388
+ var editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
389
+ var resizeObserverHeight;
390
+ var resizeObserverWidth;
383
391
  if (!(0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
384
392
  // Use ResizeObserver to observe height changes
385
- resizeObserver = new ResizeObserver((0, _rafSchd.default)(function (entries) {
393
+ resizeObserverHeight = new ResizeObserver((0, _rafSchd.default)(function (entries) {
386
394
  var editorHeight = entries[0].contentBoxSize[0].blockSize;
387
395
 
388
396
  // Update the plugin state when the height changes
@@ -401,8 +409,39 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
401
409
  editorView.dispatch(transaction);
402
410
  }
403
411
  }));
412
+
404
413
  // Start observing the editor DOM element
405
- resizeObserver.observe(dom);
414
+ resizeObserverHeight.observe(dom);
415
+ }
416
+ if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
417
+ // Use ResizeObserver to observe width changes
418
+ resizeObserverWidth = new ResizeObserver((0, _rafSchd.default)(function (entries) {
419
+ var editorContentArea = entries[0].target;
420
+ var editorWidthRight = editorContentArea.getBoundingClientRect().right;
421
+ var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
422
+
423
+ // Update the plugin state when the height changes
424
+ var pluginState = key.getState(editorView.state);
425
+ if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
426
+ var isResizerResizing = !!dom.querySelector('.is-resizing');
427
+ var transaction = editorView.state.tr;
428
+ if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
429
+ transaction.setMeta('is-resizer-resizing', isResizerResizing);
430
+ }
431
+ if (!isResizerResizing) {
432
+ if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
433
+ transaction.setMeta(key, {
434
+ editorWidthLeft: editorWidthLeft,
435
+ editorWidthRight: editorWidthRight
436
+ });
437
+ }
438
+ }
439
+ editorView.dispatch(transaction);
440
+ }
441
+ }));
442
+ if (editorContentArea && (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
443
+ resizeObserverWidth.observe(editorContentArea);
444
+ }
406
445
  }
407
446
 
408
447
  // Start pragmatic monitors
@@ -410,7 +449,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
410
449
  return {
411
450
  destroy: function destroy() {
412
451
  if (!(0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
413
- resizeObserver.unobserve(dom);
452
+ resizeObserverHeight.unobserve(dom);
453
+ }
454
+ if (editorContentArea && (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
455
+ (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394') && resizeObserverWidth.unobserve(editorContentArea);
414
456
  }
415
457
  pragmaticCleanup();
416
458
  }
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -71,6 +71,8 @@ const initialState = {
71
71
  isDragging: false,
72
72
  isMenuOpen: false,
73
73
  editorHeight: 0,
74
+ editorWidthLeft: 0,
75
+ editorWidthRight: 0,
74
76
  isResizerResizing: false,
75
77
  isDocSizeLimitEnabled: null,
76
78
  isPMDragging: false
@@ -84,7 +86,7 @@ export const createPlugin = (api, getIntl) => {
84
86
  return initialState;
85
87
  },
86
88
  apply(tr, currentState, oldState, newState) {
87
- var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
89
+ var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
88
90
  if (initialState.isDocSizeLimitEnabled === null) {
89
91
  if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
90
92
  initialState.isDocSizeLimitEnabled = true;
@@ -101,6 +103,8 @@ export const createPlugin = (api, getIntl) => {
101
103
  isMenuOpen,
102
104
  decorationState,
103
105
  editorHeight,
106
+ editorWidthLeft,
107
+ editorWidthRight,
104
108
  isResizerResizing,
105
109
  isDragging,
106
110
  isPMDragging
@@ -146,7 +150,7 @@ export const createPlugin = (api, getIntl) => {
146
150
  // (when the table node rerenders)
147
151
  // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
148
152
  const maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
149
- const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
153
+ const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
150
154
 
151
155
  // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
152
156
  if (redrawDecorations && !isResizerResizing && api) {
@@ -274,6 +278,8 @@ export const createPlugin = (api, getIntl) => {
274
278
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
275
279
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
276
280
  editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
281
+ editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : currentState.editorWidthLeft,
282
+ editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : currentState.editorWidthRight,
277
283
  isResizerResizing: isResizerResizing,
278
284
  isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
279
285
  isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
@@ -373,10 +379,12 @@ export const createPlugin = (api, getIntl) => {
373
379
  },
374
380
  view: editorView => {
375
381
  const dom = editorView.dom;
376
- let resizeObserver;
382
+ const editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
383
+ let resizeObserverHeight;
384
+ let resizeObserverWidth;
377
385
  if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
378
386
  // Use ResizeObserver to observe height changes
379
- resizeObserver = new ResizeObserver(rafSchedule(entries => {
387
+ resizeObserverHeight = new ResizeObserver(rafSchedule(entries => {
380
388
  const editorHeight = entries[0].contentBoxSize[0].blockSize;
381
389
 
382
390
  // Update the plugin state when the height changes
@@ -395,8 +403,39 @@ export const createPlugin = (api, getIntl) => {
395
403
  editorView.dispatch(transaction);
396
404
  }
397
405
  }));
406
+
398
407
  // Start observing the editor DOM element
399
- resizeObserver.observe(dom);
408
+ resizeObserverHeight.observe(dom);
409
+ }
410
+ if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
411
+ // Use ResizeObserver to observe width changes
412
+ resizeObserverWidth = new ResizeObserver(rafSchedule(entries => {
413
+ const editorContentArea = entries[0].target;
414
+ const editorWidthRight = editorContentArea.getBoundingClientRect().right;
415
+ const editorWidthLeft = editorContentArea.getBoundingClientRect().left;
416
+
417
+ // Update the plugin state when the height changes
418
+ const pluginState = key.getState(editorView.state);
419
+ if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
420
+ const isResizerResizing = !!dom.querySelector('.is-resizing');
421
+ const transaction = editorView.state.tr;
422
+ if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
423
+ transaction.setMeta('is-resizer-resizing', isResizerResizing);
424
+ }
425
+ if (!isResizerResizing) {
426
+ if (fg('platform_editor_elements_drag_and_drop_ed_23394')) {
427
+ transaction.setMeta(key, {
428
+ editorWidthLeft,
429
+ editorWidthRight
430
+ });
431
+ }
432
+ }
433
+ editorView.dispatch(transaction);
434
+ }
435
+ }));
436
+ if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
437
+ resizeObserverWidth.observe(editorContentArea);
438
+ }
400
439
  }
401
440
 
402
441
  // Start pragmatic monitors
@@ -404,7 +443,10 @@ export const createPlugin = (api, getIntl) => {
404
443
  return {
405
444
  destroy() {
406
445
  if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
407
- resizeObserver.unobserve(dom);
446
+ resizeObserverHeight.unobserve(dom);
447
+ }
448
+ if (editorContentArea && fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
449
+ fg('platform_editor_elements_drag_and_drop_ed_23394') && resizeObserverWidth.unobserve(editorContentArea);
408
450
  }
409
451
  pragmaticCleanup();
410
452
  }
package/dist/esm/pm-plugins/main.js CHANGED
@@ -70,6 +70,8 @@ var initialState = {
70
70
  isDragging: false,
71
71
  isMenuOpen: false,
72
72
  editorHeight: 0,
73
+ editorWidthLeft: 0,
74
+ editorWidthRight: 0,
73
75
  isResizerResizing: false,
74
76
  isDocSizeLimitEnabled: null,
75
77
  isPMDragging: false
@@ -83,7 +85,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
83
85
  return initialState;
84
86
  },
85
87
  apply: function apply(tr, currentState, oldState, newState) {
86
- var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
88
+ var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
87
89
  if (initialState.isDocSizeLimitEnabled === null) {
88
90
  if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
89
91
  initialState.isDocSizeLimitEnabled = true;
@@ -99,6 +101,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
99
101
  isMenuOpen = currentState.isMenuOpen,
100
102
  decorationState = currentState.decorationState,
101
103
  editorHeight = currentState.editorHeight,
104
+ editorWidthLeft = currentState.editorWidthLeft,
105
+ editorWidthRight = currentState.editorWidthRight,
102
106
  isResizerResizing = currentState.isResizerResizing,
103
107
  isDragging = currentState.isDragging,
104
108
  isPMDragging = currentState.isPMDragging;
@@ -148,7 +152,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
148
152
  // (when the table node rerenders)
149
153
  // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
150
154
  var maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
151
- var redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
155
+ var redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
152
156
 
153
157
  // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
154
158
  if (redrawDecorations && !isResizerResizing && api) {
@@ -278,6 +282,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
278
282
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
279
283
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
280
284
  editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
285
+ editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : currentState.editorWidthLeft,
286
+ editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : currentState.editorWidthRight,
281
287
  isResizerResizing: isResizerResizing,
282
288
  isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
283
289
  isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
@@ -372,10 +378,12 @@ export var createPlugin = function createPlugin(api, getIntl) {
372
378
  },
373
379
  view: function view(editorView) {
374
380
  var dom = editorView.dom;
375
- var resizeObserver;
381
+ var editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
382
+ var resizeObserverHeight;
383
+ var resizeObserverWidth;
376
384
  if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
377
385
  // Use ResizeObserver to observe height changes
378
- resizeObserver = new ResizeObserver(rafSchedule(function (entries) {
386
+ resizeObserverHeight = new ResizeObserver(rafSchedule(function (entries) {
379
387
  var editorHeight = entries[0].contentBoxSize[0].blockSize;
380
388
 
381
389
  // Update the plugin state when the height changes
@@ -394,8 +402,39 @@ export var createPlugin = function createPlugin(api, getIntl) {
394
402
  editorView.dispatch(transaction);
395
403
  }
396
404
  }));
405
+
397
406
  // Start observing the editor DOM element
398
- resizeObserver.observe(dom);
407
+ resizeObserverHeight.observe(dom);
408
+ }
409
+ if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
410
+ // Use ResizeObserver to observe width changes
411
+ resizeObserverWidth = new ResizeObserver(rafSchedule(function (entries) {
412
+ var editorContentArea = entries[0].target;
413
+ var editorWidthRight = editorContentArea.getBoundingClientRect().right;
414
+ var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
415
+
416
+ // Update the plugin state when the height changes
417
+ var pluginState = key.getState(editorView.state);
418
+ if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
419
+ var isResizerResizing = !!dom.querySelector('.is-resizing');
420
+ var transaction = editorView.state.tr;
421
+ if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
422
+ transaction.setMeta('is-resizer-resizing', isResizerResizing);
423
+ }
424
+ if (!isResizerResizing) {
425
+ if (fg('platform_editor_elements_drag_and_drop_ed_23394')) {
426
+ transaction.setMeta(key, {
427
+ editorWidthLeft: editorWidthLeft,
428
+ editorWidthRight: editorWidthRight
429
+ });
430
+ }
431
+ }
432
+ editorView.dispatch(transaction);
433
+ }
434
+ }));
435
+ if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
436
+ resizeObserverWidth.observe(editorContentArea);
437
+ }
399
438
  }
400
439
 
401
440
  // Start pragmatic monitors
@@ -403,7 +442,10 @@ export var createPlugin = function createPlugin(api, getIntl) {
403
442
  return {
404
443
  destroy: function destroy() {
405
444
  if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
406
- resizeObserver.unobserve(dom);
445
+ resizeObserverHeight.unobserve(dom);
446
+ }
447
+ if (editorContentArea && fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
448
+ fg('platform_editor_elements_drag_and_drop_ed_23394') && resizeObserverWidth.unobserve(editorContentArea);
407
449
  }
408
450
  pragmaticCleanup();
409
451
  }
package/dist/types/pm-plugins/main.d.ts CHANGED
@@ -12,6 +12,8 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
12
12
  isDragging: any;
13
13
  isMenuOpen: boolean | undefined;
14
14
  editorHeight: any;
15
+ editorWidthLeft: any;
16
+ editorWidthRight: any;
15
17
  isResizerResizing: boolean;
16
18
  isDocSizeLimitEnabled: boolean;
17
19
  isPMDragging: any;
package/dist/types/types.d.ts CHANGED
@@ -10,6 +10,8 @@ export interface PluginState {
10
10
  isDragging: boolean;
11
11
  isMenuOpen?: boolean;
12
12
  editorHeight: number;
13
+ editorWidthLeft: number;
14
+ editorWidthRight: number;
13
15
  activeNode: {
14
16
  pos: number;
15
17
  anchorName: string;
package/dist/types-ts4.5/pm-plugins/main.d.ts CHANGED
@@ -12,6 +12,8 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
12
12
  isDragging: any;
13
13
  isMenuOpen: boolean | undefined;
14
14
  editorHeight: any;
15
+ editorWidthLeft: any;
16
+ editorWidthRight: any;
15
17
  isResizerResizing: boolean;
16
18
  isDocSizeLimitEnabled: boolean;
17
19
  isPMDragging: any;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -10,6 +10,8 @@ export interface PluginState {
10
10
  isDragging: boolean;
11
11
  isMenuOpen?: boolean;
12
12
  editorHeight: number;
13
+ editorWidthLeft: number;
14
+ editorWidthRight: number;
13
15
  activeNode: {
14
16
  pos: number;
15
17
  anchorName: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.5.15",
3
+ "version": "1.5.17",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/adf-schema": "^39.0.3",
35
- "@atlaskit/editor-common": "^84.4.0",
35
+ "@atlaskit/editor-common": "^85.0.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.4.0",
37
37
  "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
38
38
  "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
48
48
  "@atlaskit/theme": "^12.11.0",
49
- "@atlaskit/tokens": "^1.53.0",
49
+ "@atlaskit/tokens": "^1.54.0",
50
50
  "@atlaskit/tooltip": "^18.5.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@emotion/react": "^11.7.1",
@@ -133,6 +133,9 @@
133
133
  },
134
134
  "platform_editor_element_drag_and_drop_ed_23842": {
135
135
  "type": "boolean"
136
+ },
137
+ "platform_editor_elements_drag_and_drop_ed_23394": {
138
+ "type": "boolean"
136
139
  }
137
140
  }
138
141
  }