@atlaskit/editor-plugin-breakout 6.0.1 → 6.0.3

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 (28) hide show
  1. package/CHANGELOG.md +14 -2
  2. package/dist/cjs/breakoutPlugin.js +2 -2
  3. package/dist/cjs/editor-commands/set-breakout-width.js +2 -5
  4. package/dist/cjs/pm-plugins/get-guidelines.js +15 -36
  5. package/dist/cjs/pm-plugins/handle-key-down.js +25 -28
  6. package/dist/cjs/pm-plugins/pragmatic-resizer.js +21 -32
  7. package/dist/cjs/pm-plugins/resizer-callbacks.js +50 -69
  8. package/dist/cjs/pm-plugins/resizing-mark-view.js +31 -75
  9. package/dist/cjs/pm-plugins/resizing-plugin.js +4 -4
  10. package/dist/es2019/breakoutPlugin.js +2 -2
  11. package/dist/es2019/editor-commands/set-breakout-width.js +2 -5
  12. package/dist/es2019/pm-plugins/get-guidelines.js +15 -36
  13. package/dist/es2019/pm-plugins/handle-key-down.js +25 -28
  14. package/dist/es2019/pm-plugins/pragmatic-resizer.js +18 -29
  15. package/dist/es2019/pm-plugins/resizer-callbacks.js +49 -68
  16. package/dist/es2019/pm-plugins/resizing-mark-view.js +25 -71
  17. package/dist/es2019/pm-plugins/resizing-plugin.js +4 -4
  18. package/dist/esm/breakoutPlugin.js +2 -2
  19. package/dist/esm/editor-commands/set-breakout-width.js +2 -5
  20. package/dist/esm/pm-plugins/get-guidelines.js +15 -36
  21. package/dist/esm/pm-plugins/handle-key-down.js +25 -28
  22. package/dist/esm/pm-plugins/pragmatic-resizer.js +21 -32
  23. package/dist/esm/pm-plugins/resizer-callbacks.js +50 -69
  24. package/dist/esm/pm-plugins/resizing-mark-view.js +31 -75
  25. package/dist/esm/pm-plugins/resizing-plugin.js +4 -4
  26. package/dist/types/pm-plugins/handle-key-down.d.ts +1 -1
  27. package/dist/types-ts4.5/pm-plugins/handle-key-down.d.ts +1 -1
  28. package/package.json +8 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 6.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 6.0.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`d24d26320c940`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d24d26320c940) -
14
+ FD-100510 clean up fg platform_editor_breakout_resizing_hello_release
15
+ - Updated dependencies
16
+
3
17
  ## 6.0.1
4
18
 
5
19
  ### Patch Changes
@@ -256,7 +270,6 @@
256
270
  shared context or singletons.
257
271
 
258
272
  **HOW TO ADJUST:**
259
-
260
273
  - Consumers must now explicitly install `@atlaskit/editor-common` in their own project if they use
261
274
  any of these editor plugins.
262
275
  - Ensure the version you install matches the version required by the plugins.
@@ -822,7 +835,6 @@
822
835
  - [#171014](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171014)
823
836
  [`6163248356c63`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6163248356c63) -
824
837
  [ED-25833] Replace the following FGs with experiment `platform_editor_advanced_layouts`
825
-
826
838
  - platform_editor_advanced_layouts_breakout_resizing
827
839
  - platform_editor_advanced_layouts_pre_release_1
828
840
  - platform_editor_advanced_layouts_pre_release_2
@@ -227,7 +227,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
227
227
  breakoutNode: undefined
228
228
  };
229
229
  }
230
- if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
230
+ if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true)) {
231
231
  var resizingPluginState = _resizingPlugin.resizingPluginKey.getState(editorState);
232
232
  if (!resizingPluginState) {
233
233
  return {
@@ -253,7 +253,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
253
253
  if (!editorView) {
254
254
  return null;
255
255
  }
256
- if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
256
+ if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true)) {
257
257
  return /*#__PURE__*/_react.default.createElement(_GuidelineLabel.GuidelineLabel, {
258
258
  api: api,
259
259
  editorView: editorView,
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.setBreakoutWidth = setBreakoutWidth;
7
7
  var _codeBlock = require("@atlaskit/editor-common/code-block");
8
8
  var _state = require("@atlaskit/editor-prosemirror/state");
9
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
9
  var _singlePlayerExpand = require("../pm-plugins/utils/single-player-expand");
11
10
  function setBreakoutWidth(width, mode, pos, isLivePage) {
12
11
  return function (state, dispatch) {
@@ -32,12 +31,10 @@ function setBreakoutWidth(width, mode, pos, isLivePage) {
32
31
  (0, _codeBlock.transferCodeBlockWrappedValue)(oldNode, newNode);
33
32
  }
34
33
  }
35
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
36
- tr.setMeta('scrollIntoView', false);
37
- }
34
+ tr.setMeta('scrollIntoView', false);
38
35
 
39
36
  // keep current selection, necessary to not remove NodeSelection for keyboard resizing
40
- if (state.selection instanceof _state.NodeSelection && state.selection.node.eq(node) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
37
+ if (state.selection instanceof _state.NodeSelection && state.selection.node.eq(node)) {
41
38
  tr.setSelection(_state.NodeSelection.create(tr.doc, pos));
42
39
  }
43
40
  if (dispatch) {
@@ -8,7 +8,6 @@ exports.getGuidelines = exports.GUIDELINE_KEYS = void 0;
8
8
  var _memoizeOne = _interopRequireDefault(require("memoize-one"));
9
9
  var _styles = require("@atlaskit/editor-common/styles");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
11
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
13
12
  var WIDTHS = {
14
13
  MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
@@ -47,45 +46,25 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
47
46
  }
48
47
  }
49
48
  var _ref = getEditorWidth() || {},
50
- width = _ref.width,
51
- lineLength = _ref.lineLength;
49
+ width = _ref.width;
52
50
  var padding = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
53
51
  exposure: true
54
52
  }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
55
53
  var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
56
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
57
- guidelines.push({
58
- key: GUIDELINE_KEYS.lineLengthLeft,
59
- position: {
60
- x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
61
- },
62
- active: newWidth === WIDTHS.MIN
63
- });
64
- guidelines.push({
65
- key: GUIDELINE_KEYS.lineLengthRight,
66
- position: {
67
- x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
68
- },
69
- active: newWidth === WIDTHS.MIN
70
- });
71
- } else {
72
- if (lineLength) {
73
- guidelines.push({
74
- key: GUIDELINE_KEYS.lineLengthLeft,
75
- position: {
76
- x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
77
- },
78
- active: newWidth === lineLength
79
- });
80
- guidelines.push({
81
- key: GUIDELINE_KEYS.lineLengthRight,
82
- position: {
83
- x: roundToNearest(lineLength / 2 + innerPaddingOffset)
84
- },
85
- active: newWidth === lineLength
86
- });
87
- }
88
- }
54
+ guidelines.push({
55
+ key: GUIDELINE_KEYS.lineLengthLeft,
56
+ position: {
57
+ x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
58
+ },
59
+ active: newWidth === WIDTHS.MIN
60
+ });
61
+ guidelines.push({
62
+ key: GUIDELINE_KEYS.lineLengthRight,
63
+ position: {
64
+ x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
65
+ },
66
+ active: newWidth === WIDTHS.MIN
67
+ });
89
68
  guidelines.push({
90
69
  key: GUIDELINE_KEYS.wideLeft,
91
70
  position: {
@@ -7,7 +7,6 @@ exports.handleKeyDown = void 0;
7
7
  var _browser = require("@atlaskit/editor-common/browser");
8
8
  var _state = require("@atlaskit/editor-prosemirror/state");
9
9
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
10
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
10
  var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
12
11
  var KEYBOARD_RESIZE_STEP = 10;
13
12
  var getAncestorResizableNode = function getAncestorResizableNode(view, breakoutResizableNodes) {
@@ -40,36 +39,34 @@ var getAncestorResizableNode = function getAncestorResizableNode(view, breakoutR
40
39
  };
41
40
  var handleKeyDown = exports.handleKeyDown = function handleKeyDown(api) {
42
41
  return function (view, event) {
43
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
44
- var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
45
- var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
46
- if (metaKey && event.altKey && isBracketKey) {
47
- var _view$state$schema$no = view.state.schema.nodes,
48
- expand = _view$state$schema$no.expand,
49
- codeBlock = _view$state$schema$no.codeBlock,
50
- layoutSection = _view$state$schema$no.layoutSection;
51
- var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
52
- var result = getAncestorResizableNode(view, breakoutResizableNodes);
53
- if (result) {
54
- var node = result.node,
55
- pos = result.pos;
56
- var breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(function (mark) {
57
- return mark.type.name === 'breakout';
58
- });
59
- if (breakoutMark) {
60
- var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
61
- var newWidth = breakoutMark.attrs.width + step;
62
- if (newWidth < _editorSharedStyles.akEditorFullWidthLayoutWidth && newWidth > _editorSharedStyles.akEditorDefaultLayoutWidth) {
63
- var _api$editorViewMode;
64
- var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
65
- (0, _setBreakoutWidth.setBreakoutWidth)(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
66
- view.focus();
67
- }
68
- return true;
42
+ var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
43
+ var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
44
+ if (metaKey && event.altKey && isBracketKey) {
45
+ var _view$state$schema$no = view.state.schema.nodes,
46
+ expand = _view$state$schema$no.expand,
47
+ codeBlock = _view$state$schema$no.codeBlock,
48
+ layoutSection = _view$state$schema$no.layoutSection;
49
+ var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
50
+ var result = getAncestorResizableNode(view, breakoutResizableNodes);
51
+ if (result) {
52
+ var node = result.node,
53
+ pos = result.pos;
54
+ var breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(function (mark) {
55
+ return mark.type.name === 'breakout';
56
+ });
57
+ if (breakoutMark) {
58
+ var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
59
+ var newWidth = breakoutMark.attrs.width + step;
60
+ if (newWidth < _editorSharedStyles.akEditorFullWidthLayoutWidth && newWidth > _editorSharedStyles.akEditorDefaultLayoutWidth) {
61
+ var _api$editorViewMode;
62
+ var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
63
+ (0, _setBreakoutWidth.setBreakoutWidth)(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
64
+ view.focus();
69
65
  }
66
+ return true;
70
67
  }
71
68
  }
72
- return false;
73
69
  }
70
+ return false;
74
71
  };
75
72
  };
@@ -88,37 +88,26 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
88
88
  var thumb = document.createElement('div');
89
89
  thumb.classList.add('pm-breakout-resize-handle-thumb');
90
90
  rail.appendChild(thumb);
91
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
92
- var tooltipContainer = document.createElement('div');
93
- tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
94
- handle.appendChild(tooltipContainer);
95
- handle.appendChild(handleHitBox);
96
- var key = (0, _v.default)();
97
- nodeViewPortalProviderAPI.render(function () {
98
- return /*#__PURE__*/_react.default.createElement(RailWithTooltip, {
99
- rail: rail,
100
- target: target,
101
- intl: intl
102
- });
103
- }, tooltipContainer, key);
104
- return {
105
- handle: handle,
106
- rail: rail,
107
- handleHitBox: handleHitBox,
108
- destroyTooltip: function destroyTooltip() {
109
- return nodeViewPortalProviderAPI.remove(key);
110
- }
111
- };
112
- } else {
113
- handle.appendChild(rail);
114
- handle.appendChild(handleHitBox);
115
- return {
116
- handle: handle,
91
+ var tooltipContainer = document.createElement('div');
92
+ tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
93
+ handle.appendChild(tooltipContainer);
94
+ handle.appendChild(handleHitBox);
95
+ var key = (0, _v.default)();
96
+ nodeViewPortalProviderAPI.render(function () {
97
+ return /*#__PURE__*/_react.default.createElement(RailWithTooltip, {
117
98
  rail: rail,
118
- handleHitBox: handleHitBox,
119
- destroyTooltip: function destroyTooltip() {}
120
- };
121
- }
99
+ target: target,
100
+ intl: intl
101
+ });
102
+ }, tooltipContainer, key);
103
+ return {
104
+ handle: handle,
105
+ rail: rail,
106
+ handleHitBox: handleHitBox,
107
+ destroyTooltip: function destroyTooltip() {
108
+ return nodeViewPortalProviderAPI.remove(key);
109
+ }
110
+ };
122
111
  };
123
112
  var rightHandle = createHandle('right');
124
113
  var leftHandle = createHandle('left');
@@ -170,7 +159,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
170
159
  })];
171
160
  };
172
161
  var unbindFns = [].concat((0, _toConsumableArray2.default)(registerEvents(target)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(leftHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.rail)), (0, _toConsumableArray2.default)(registerEvents(leftHandle.rail)));
173
- var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release') ? [rightHandle.destroyTooltip, leftHandle.destroyTooltip] : []));
162
+ var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip];
174
163
  return {
175
164
  rightHandle: rightHandle.handle,
176
165
  leftHandle: leftHandle.handle,
@@ -181,7 +170,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
181
170
  unbindFns.forEach(function (unbindFn) {
182
171
  return unbindFn();
183
172
  });
184
- if (isChangeToViewMode && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
173
+ if (isChangeToViewMode) {
185
174
  var _rightHandle$handle$p, _leftHandle$handle$pa;
186
175
  (_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 || _rightHandle$handle$p.removeChild(rightHandle.handle);
187
176
  (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 || _leftHandle$handle$pa.removeChild(leftHandle.handle);
@@ -37,13 +37,11 @@ function getProposedWidth(_ref) {
37
37
 
38
38
  // the node width may be greater than the container width so we resize using the smaller value
39
39
  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
40
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
41
- var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
42
- for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
43
- var snapPoint = _snapPoints[_i];
44
- if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
45
- return snapPoint;
46
- }
40
+ var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
41
+ for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
42
+ var snapPoint = _snapPoints[_i];
43
+ if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
44
+ return snapPoint;
47
45
  }
48
46
  }
49
47
  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
@@ -66,9 +64,7 @@ function createResizerCallbacks(_ref2) {
66
64
  };
67
65
  return {
68
66
  onDragStart: function onDragStart() {
69
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
70
- startMeasure();
71
- }
67
+ startMeasure();
72
68
  var pos = view.posAtDOM(dom, 0);
73
69
  node = view.state.doc.nodeAt(pos);
74
70
  api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
@@ -78,27 +74,23 @@ function createResizerCallbacks(_ref2) {
78
74
  tr: tr
79
75
  });
80
76
  tr.setMeta('is-resizer-resizing', true);
81
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
82
- tr.setMeta(_resizingPlugin.resizingPluginKey, {
83
- type: 'UPDATE_BREAKOUT_NODE',
84
- data: {
85
- node: node,
86
- pos: pos,
87
- start: pos,
88
- depth: 0
89
- }
90
- });
91
- }
77
+ tr.setMeta(_resizingPlugin.resizingPluginKey, {
78
+ type: 'UPDATE_BREAKOUT_NODE',
79
+ data: {
80
+ node: node,
81
+ pos: pos,
82
+ start: pos,
83
+ depth: 0
84
+ }
85
+ });
92
86
  return tr;
93
87
  });
94
88
  },
95
89
  onDrag: function onDrag(_ref4) {
96
- var _node, _api$guideline;
90
+ var _node, _api$guideline, _api$breakout$sharedS;
97
91
  var location = _ref4.location,
98
92
  source = _ref4.source;
99
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
100
- countFrames();
101
- }
93
+ countFrames();
102
94
  var initialWidth = mark.attrs.width;
103
95
  var newWidth = getProposedWidth({
104
96
  initialWidth: initialWidth,
@@ -110,32 +102,29 @@ function createResizerCallbacks(_ref2) {
110
102
  api === null || api === void 0 || (_api$guideline = api.guideline) === null || _api$guideline === void 0 || (_api$guideline = _api$guideline.actions) === null || _api$guideline === void 0 || _api$guideline.displayGuideline(view)({
111
103
  guidelines: guidelines
112
104
  });
113
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
114
- var _api$breakout$sharedS;
115
- var activeGuideline = guidelines.find(function (guideline) {
116
- return guideline.active && !guideline.key.startsWith('grid');
117
- });
118
- if (activeGuideline) {
119
- api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
120
- var tr = _ref5.tr;
121
- tr.setMeta(_resizingPlugin.resizingPluginKey, {
122
- type: 'UPDATE_ACTIVE_GUIDELINE_KEY',
123
- data: {
124
- activeGuidelineKey: activeGuideline.key
125
- }
126
- });
127
- return tr;
105
+ var activeGuideline = guidelines.find(function (guideline) {
106
+ return guideline.active && !guideline.key.startsWith('grid');
107
+ });
108
+ if (activeGuideline) {
109
+ api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
110
+ var tr = _ref5.tr;
111
+ tr.setMeta(_resizingPlugin.resizingPluginKey, {
112
+ type: 'UPDATE_ACTIVE_GUIDELINE_KEY',
113
+ data: {
114
+ activeGuidelineKey: activeGuideline.key
115
+ }
128
116
  });
129
- }
130
- if (!activeGuideline && api !== null && api !== void 0 && (_api$breakout$sharedS = api.breakout.sharedState.currentState()) !== null && _api$breakout$sharedS !== void 0 && _api$breakout$sharedS.activeGuidelineKey) {
131
- api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
132
- var tr = _ref6.tr;
133
- tr.setMeta(_resizingPlugin.resizingPluginKey, {
134
- type: 'CLEAR_ACTIVE_GUIDELINE_KEY'
135
- });
136
- return tr;
117
+ return tr;
118
+ });
119
+ }
120
+ if (!activeGuideline && api !== null && api !== void 0 && (_api$breakout$sharedS = api.breakout.sharedState.currentState()) !== null && _api$breakout$sharedS !== void 0 && _api$breakout$sharedS.activeGuidelineKey) {
121
+ api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
122
+ var tr = _ref6.tr;
123
+ tr.setMeta(_resizingPlugin.resizingPluginKey, {
124
+ type: 'CLEAR_ACTIVE_GUIDELINE_KEY'
137
125
  });
138
- }
126
+ return tr;
127
+ });
139
128
  }
140
129
  if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
141
130
  // dom is used for width calculations
@@ -145,18 +134,16 @@ function createResizerCallbacks(_ref2) {
145
134
  }
146
135
  },
147
136
  onDrop: function onDrop(_ref7) {
148
- var _api$guideline2;
137
+ var _api$guideline2, _api$editorViewMode;
149
138
  var location = _ref7.location,
150
139
  source = _ref7.source;
151
140
  var payloads = [];
152
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
153
- var frameRateSamples = endMeasure();
154
- payloads = (0, _analytics.generateResizeFrameRatePayloads)({
155
- docSize: view.state.doc.nodeSize,
156
- frameRateSamples: (0, _measureFramerate2.reduceResizeFrameRateSamples)(frameRateSamples),
157
- originalNode: node
158
- });
159
- }
141
+ var frameRateSamples = endMeasure();
142
+ payloads = (0, _analytics.generateResizeFrameRatePayloads)({
143
+ docSize: view.state.doc.nodeSize,
144
+ frameRateSamples: (0, _measureFramerate2.reduceResizeFrameRateSamples)(frameRateSamples),
145
+ originalNode: node
146
+ });
160
147
  var isResizedToFullWidth = !!guidelines.find(function (guideline) {
161
148
  return guideline.key.startsWith('full_width') && guideline.active;
162
149
  });
@@ -173,18 +160,14 @@ function createResizerCallbacks(_ref2) {
173
160
  api: api,
174
161
  source: source
175
162
  });
176
- var isEditMode;
177
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
178
- var _api$editorViewMode;
179
- isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
180
- }
163
+ var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
181
164
  (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
182
165
  if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
183
166
  dom.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
184
167
  } else {
185
168
  contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
186
169
  }
187
- if (node && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
170
+ if (node) {
188
171
  var resizedPayload = (0, _analytics.generateResizedEventPayload)({
189
172
  node: node,
190
173
  prevWidth: initialWidth,
@@ -203,11 +186,9 @@ function createResizerCallbacks(_ref2) {
203
186
  (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent(payload)(tr);
204
187
  });
205
188
  tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
206
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
207
- tr.setMeta(_resizingPlugin.resizingPluginKey, {
208
- type: 'RESET_STATE'
209
- });
210
- }
189
+ tr.setMeta(_resizingPlugin.resizingPluginKey, {
190
+ type: 'RESET_STATE'
191
+ });
211
192
  return tr;
212
193
  });
213
194
  }
@@ -29,7 +29,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
29
29
  * ```
30
30
  */
31
31
  function ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI) {
32
- var _this = this;
32
+ var _api$editorViewMode,
33
+ _api$editorViewMode2,
34
+ _this = this;
33
35
  (0, _classCallCheck2.default)(this, ResizingMarkView);
34
36
  (0, _defineProperty2.default)(this, "isResizingInitialised", false);
35
37
  var dom = document.createElement('div');
@@ -74,7 +76,7 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
74
76
  contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
75
77
  }
76
78
  }
77
- } else if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
79
+ } else {
78
80
  if (mark.attrs.width) {
79
81
  contentDOM.style.width = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
80
82
  } else {
@@ -85,74 +87,31 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
85
87
  contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
86
88
  }
87
89
  }
88
- } else {
89
- if (mark.attrs.width) {
90
- contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
91
- } else {
92
- if (mark.attrs.mode === 'wide') {
93
- contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
94
- }
95
- if (mark.attrs.mode === 'full-width') {
96
- contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
97
- }
98
- }
99
90
  }
100
91
  dom.appendChild(contentDOM);
101
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
102
- var _api$editorViewMode;
103
- this.dom = dom;
104
- this.contentDOM = contentDOM;
105
- this.view = view;
106
- this.mark = mark;
107
- this.intl = getIntl();
108
- this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
109
- var isLiveViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
110
- if (!isLiveViewMode) {
111
- this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
112
- }
113
- } else {
114
- var callbacks = (0, _resizerCallbacks.createResizerCallbacks)({
115
- dom: dom,
116
- contentDOM: contentDOM,
117
- view: view,
118
- mark: mark,
119
- api: api
120
- });
121
- this.intl = getIntl();
122
- this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
123
- var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread(_objectSpread({
124
- target: contentDOM
125
- }, callbacks), {}, {
126
- intl: this.intl,
127
- nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
128
- })),
129
- leftHandle = _createPragmaticResiz.leftHandle,
130
- rightHandle = _createPragmaticResiz.rightHandle,
131
- destroy = _createPragmaticResiz.destroy;
132
- dom.prepend(leftHandle);
133
- dom.appendChild(rightHandle);
134
- this.dom = dom;
135
- this.contentDOM = contentDOM;
136
- this.view = view;
137
- this.mark = mark;
138
- this.destroyFn = destroy;
92
+ this.dom = dom;
93
+ this.contentDOM = contentDOM;
94
+ this.view = view;
95
+ this.mark = mark;
96
+ this.intl = getIntl();
97
+ this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
98
+ var isLiveViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
99
+ if (!isLiveViewMode) {
100
+ this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
139
101
  }
140
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
141
- var _api$editorViewMode2;
142
- this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
143
- var _sharedState$nextShar, _sharedState$prevShar;
144
- if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
145
- var _sharedState$nextShar2, _sharedState$nextShar3;
146
- if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && _this.isResizingInitialised) {
147
- var _this$destroyFn;
148
- (_this$destroyFn = _this.destroyFn) === null || _this$destroyFn === void 0 || _this$destroyFn.call(_this, true);
149
- _this.isResizingInitialised = false;
150
- } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
151
- _this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
152
- }
102
+ this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
103
+ var _sharedState$nextShar, _sharedState$prevShar;
104
+ if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
105
+ var _sharedState$nextShar2, _sharedState$nextShar3;
106
+ if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && _this.isResizingInitialised) {
107
+ var _this$destroyFn;
108
+ (_this$destroyFn = _this.destroyFn) === null || _this$destroyFn === void 0 || _this$destroyFn.call(_this, true);
109
+ _this.isResizingInitialised = false;
110
+ } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
111
+ _this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
153
112
  }
154
- });
155
- }
113
+ }
114
+ });
156
115
  }
157
116
  return (0, _createClass2.default)(ResizingMarkView, [{
158
117
  key: "setupResizerCallbacks",
@@ -164,15 +123,15 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
164
123
  mark: mark,
165
124
  api: api
166
125
  });
167
- var _createPragmaticResiz2 = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread(_objectSpread({
126
+ var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread(_objectSpread({
168
127
  target: contentDOM
169
128
  }, callbacks), {}, {
170
129
  intl: this.intl,
171
130
  nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
172
131
  })),
173
- leftHandle = _createPragmaticResiz2.leftHandle,
174
- rightHandle = _createPragmaticResiz2.rightHandle,
175
- destroy = _createPragmaticResiz2.destroy;
132
+ leftHandle = _createPragmaticResiz.leftHandle,
133
+ rightHandle = _createPragmaticResiz.rightHandle,
134
+ destroy = _createPragmaticResiz.destroy;
176
135
  this.dom.prepend(leftHandle);
177
136
  this.dom.appendChild(rightHandle);
178
137
  this.destroyFn = destroy;
@@ -186,12 +145,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
186
145
  }, {
187
146
  key: "destroy",
188
147
  value: function destroy() {
189
- var _this$destroyFn2;
148
+ var _this$destroyFn2, _this$unsubscribeToVi;
190
149
  (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 || _this$destroyFn2.call(this);
191
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
192
- var _this$unsubscribeToVi;
193
- (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 || _this$unsubscribeToVi.call(this);
194
- }
150
+ (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 || _this$unsubscribeToVi.call(this);
195
151
  }
196
152
  }]);
197
153
  }();