@atlaskit/editor-plugin-breakout 12.0.18 → 12.1.1

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 (19) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/breakoutPlugin.js +2 -1
  3. package/dist/cjs/pm-plugins/handle-key-down.js +5 -2
  4. package/dist/cjs/pm-plugins/pragmatic-resizer.js +5 -0
  5. package/dist/cjs/pm-plugins/resizing-mark-view.js +81 -11
  6. package/dist/cjs/pm-plugins/resizing-plugin.js +5 -2
  7. package/dist/es2019/breakoutPlugin.js +2 -1
  8. package/dist/es2019/pm-plugins/handle-key-down.js +5 -2
  9. package/dist/es2019/pm-plugins/pragmatic-resizer.js +5 -0
  10. package/dist/es2019/pm-plugins/resizing-mark-view.js +74 -11
  11. package/dist/es2019/pm-plugins/resizing-plugin.js +5 -3
  12. package/dist/esm/breakoutPlugin.js +2 -1
  13. package/dist/esm/pm-plugins/handle-key-down.js +5 -2
  14. package/dist/esm/pm-plugins/pragmatic-resizer.js +5 -0
  15. package/dist/esm/pm-plugins/resizing-mark-view.js +81 -11
  16. package/dist/esm/pm-plugins/resizing-plugin.js +5 -2
  17. package/dist/types/pm-plugins/resizing-mark-view.d.ts +2 -0
  18. package/dist/types/pm-plugins/resizing-plugin.d.ts +1 -1
  19. package/package.json +10 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 12.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`92638385edd0e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/92638385edd0e) -
14
+ [EDITOR-7888] add graceful rendering for panels and rules with breakout marks behind FG
15
+ `platform_editor_lovability_resize_gracefully`.
16
+
17
+ ### Patch Changes
18
+
19
+ - [`92638385edd0e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/92638385edd0e) -
20
+ [ux] [EDITOR-7888] add breakout resizing support for panel and rule nodes behind experiment
21
+ `platform_editor_lovability_resize_dividers_panels`.
22
+ - Updated dependencies
23
+
3
24
  ## 12.0.18
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/breakoutPlugin.js CHANGED
@@ -19,6 +19,7 @@ var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-ef
19
19
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
20
20
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
21
21
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
22
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
22
23
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
23
24
  var _pluginKey = require("./pm-plugins/plugin-key");
24
25
  var _resizingPlugin = require("./pm-plugins/resizing-plugin");
@@ -198,7 +199,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
198
199
  plugin: function plugin(_ref5) {
199
200
  var getIntl = _ref5.getIntl,
200
201
  nodeViewPortalProviderAPI = _ref5.nodeViewPortalProviderAPI;
201
- return (0, _resizingPlugin.createResizingPlugin)(api, getIntl, nodeViewPortalProviderAPI, options);
202
+ return (0, _resizingPlugin.createResizingPlugin)(api, getIntl, nodeViewPortalProviderAPI, options, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true));
202
203
  }
203
204
  }];
204
205
  }
package/dist/cjs/pm-plugins/handle-key-down.js CHANGED
@@ -8,6 +8,7 @@ var _browser = require("@atlaskit/editor-common/browser");
8
8
  var _utils = require("@atlaskit/editor-common/utils");
9
9
  var _state = require("@atlaskit/editor-prosemirror/state");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
11
12
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
13
  var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
13
14
  var KEYBOARD_RESIZE_STEP = 10;
@@ -48,8 +49,10 @@ var handleKeyDown = exports.handleKeyDown = function handleKeyDown(api) {
48
49
  var _view$state$schema$no = view.state.schema.nodes,
49
50
  expand = _view$state$schema$no.expand,
50
51
  codeBlock = _view$state$schema$no.codeBlock,
51
- layoutSection = _view$state$schema$no.layoutSection;
52
- var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(view.state.schema) : new Set([expand, codeBlock, layoutSection]);
52
+ layoutSection = _view$state$schema$no.layoutSection,
53
+ rule = _view$state$schema$no.rule,
54
+ panel = _view$state$schema$no.panel;
55
+ var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(view.state.schema, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel]) : new Set([expand, codeBlock, layoutSection]);
53
56
  var result = getAncestorResizableNode(view, breakoutResizableNodes);
54
57
  if (result) {
55
58
  var node = result.node,
package/dist/cjs/pm-plugins/pragmatic-resizer.js CHANGED
@@ -16,6 +16,7 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
16
16
  var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
17
17
  var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
18
18
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
19
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
19
20
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
20
21
  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" != _typeof(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); }
21
22
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
@@ -25,6 +26,8 @@ var getNodeName = function getNodeName(nodeName) {
25
26
  return 'layout';
26
27
  } else if (nodeName === 'codeBlock' || nodeName === 'expand') {
27
28
  return nodeName;
29
+ } else if ((nodeName === 'rule' || nodeName === 'panel') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) {
30
+ return nodeName;
28
31
  } else {
29
32
  return 'node';
30
33
  }
@@ -33,6 +36,8 @@ var resizeHandleMessage = exports.resizeHandleMessage = {
33
36
  expand: _messages.breakoutMessages.resizeExpand,
34
37
  codeBlock: _messages.breakoutMessages.resizeCodeBlock,
35
38
  layout: _messages.breakoutMessages.resizeLayout,
39
+ rule: _messages.breakoutMessages.resizeRule,
40
+ panel: _messages.breakoutMessages.resizePanel,
36
41
  node: _messages.breakoutMessages.resizeElement
37
42
  };
38
43
  var RailWithTooltip = function RailWithTooltip(_ref) {
package/dist/cjs/pm-plugins/resizing-mark-view.js CHANGED
@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
9
9
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _styles = require("@atlaskit/editor-common/styles");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
13
14
  var _pragmaticResizer = require("./pragmatic-resizer");
14
15
  var _resizerCallbacks = require("./resizer-callbacks");
@@ -16,6 +17,23 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
16
17
  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; }
17
18
  var LOCAL_RESIZE_PROPERTY = exports.LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
18
19
  var RESIZE_HANDLE_TRACK_WIDTH = '7px';
20
+
21
+ // this function delays the resizer callbacks until the mark view DOM is attached to the DOM
22
+ var scheduleResizeHandleSetup = function scheduleResizeHandleSetup(callback) {
23
+ if (typeof window === 'undefined') {
24
+ return function () {};
25
+ }
26
+ if (typeof window.requestAnimationFrame === 'function') {
27
+ var frame = window.requestAnimationFrame(callback);
28
+ return function () {
29
+ return window.cancelAnimationFrame(frame);
30
+ };
31
+ }
32
+ var timeout = window.setTimeout(callback, 0);
33
+ return function () {
34
+ return window.clearTimeout(timeout);
35
+ };
36
+ };
19
37
  var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
20
38
  /**
21
39
  * Wrap node view in a resizing mark view
@@ -41,7 +59,7 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
41
59
  dom.className = _styles.BreakoutCssClassName.BREAKOUT_MARK;
42
60
  dom.setAttribute('data-layout', mark.attrs.mode);
43
61
  dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
44
- var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
62
+ var isResizingExperimentEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
45
63
 
46
64
  // DOM styles
47
65
  // Keep a three-column grid even when the left resize handle is disabled. The empty
@@ -55,11 +73,11 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
55
73
  contentDOM.style.gridColumn = '2';
56
74
  contentDOM.style.zIndex = '1';
57
75
  if (mark.attrs.width) {
58
- dom.style.gridTemplateColumns = isLeftResizeHandleDisabled ? // new code - phantom left track + content + right handle
76
+ dom.style.gridTemplateColumns = isResizingExperimentEnabled ? // new code - phantom left track + content + right handle
59
77
  "".concat(RESIZE_HANDLE_TRACK_WIDTH, " max(var(--ak-editor--breakout-min-width), min(var(").concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) ").concat(RESIZE_HANDLE_TRACK_WIDTH) : // old code - left handle + content + right handle
60
78
  "auto max(var(--ak-editor--breakout-min-width), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) auto");
61
79
  } else {
62
- if (isLeftResizeHandleDisabled) {
80
+ if (isResizingExperimentEnabled) {
63
81
  dom.style.gridTemplateColumns = "".concat(RESIZE_HANDLE_TRACK_WIDTH, " auto ").concat(RESIZE_HANDLE_TRACK_WIDTH);
64
82
  }
65
83
  if (mark.attrs.mode === 'wide') {
@@ -78,17 +96,31 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
78
96
  this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
79
97
  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';
80
98
  if (!isLiveViewMode) {
81
- this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
99
+ (0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
82
100
  }
83
101
  this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
84
102
  var _sharedState$nextShar, _sharedState$prevShar;
85
103
  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)) {
86
- var _sharedState$nextShar2, _sharedState$nextShar3;
87
- if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && _this.isResizingInitialised) {
88
- var _this$destroyFn;
89
- (_this$destroyFn = _this.destroyFn) === null || _this$destroyFn === void 0 || _this$destroyFn.call(_this, true);
104
+ var _sharedState$nextShar4, _sharedState$nextShar5;
105
+ if ((0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_gracefully')) {
106
+ var _sharedState$nextShar2, _sharedState$nextShar3;
107
+ if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view') {
108
+ var _this$cancelScheduled;
109
+ (_this$cancelScheduled = _this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled === void 0 || _this$cancelScheduled.call(_this);
110
+ _this.cancelScheduledResizeHandleSetup = undefined;
111
+ if (_this.isResizingInitialised) {
112
+ var _this$destroyFn;
113
+ (_this$destroyFn = _this.destroyFn) === null || _this$destroyFn === void 0 || _this$destroyFn.call(_this, true);
114
+ _this.isResizingInitialised = false;
115
+ }
116
+ } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
117
+ _this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api);
118
+ }
119
+ } else if (((_sharedState$nextShar4 = sharedState.nextSharedState) === null || _sharedState$nextShar4 === void 0 ? void 0 : _sharedState$nextShar4.mode) === 'view' && _this.isResizingInitialised) {
120
+ var _this$destroyFn2;
121
+ (_this$destroyFn2 = _this.destroyFn) === null || _this$destroyFn2 === void 0 || _this$destroyFn2.call(_this, true);
90
122
  _this.isResizingInitialised = false;
91
- } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
123
+ } else if (((_sharedState$nextShar5 = sharedState.nextSharedState) === null || _sharedState$nextShar5 === void 0 ? void 0 : _sharedState$nextShar5.mode) === 'edit' && !_this.isResizingInitialised) {
92
124
  _this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
93
125
  }
94
126
  }
@@ -119,6 +151,43 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
119
151
  this.destroyFn = destroy;
120
152
  this.isResizingInitialised = true;
121
153
  }
154
+ }, {
155
+ key: "setupResizerCallbacksIfSupported",
156
+ value: function setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) {
157
+ var _this$cancelScheduled2,
158
+ _this2 = this;
159
+ // cancel any pending setup before scheduling a new one
160
+ (_this$cancelScheduled2 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled2 === void 0 || _this$cancelScheduled2.call(this);
161
+ this.cancelScheduledResizeHandleSetup = undefined;
162
+
163
+ // if panels and rules support breakout resizing,
164
+ // set up the resizer callbacks
165
+ if (isResizingExperimentEnabled) {
166
+ this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
167
+ return;
168
+ }
169
+
170
+ // else if panels and rules don't support breakout resizing,
171
+ // do NOT set up the resizer callbacks (yet)
172
+ // wait for the mark view DOM to be attached to the DOM first
173
+ this.cancelScheduledResizeHandleSetup = scheduleResizeHandleSetup(function () {
174
+ var _view$state$doc$nodeA;
175
+ _this2.cancelScheduledResizeHandleSetup = undefined;
176
+ if (view.isDestroyed || !dom.isConnected) {
177
+ return;
178
+ }
179
+ var pos = view.posAtDOM(dom, 0);
180
+ var nodeName = (_view$state$doc$nodeA = view.state.doc.nodeAt(pos)) === null || _view$state$doc$nodeA === void 0 ? void 0 : _view$state$doc$nodeA.type.name;
181
+
182
+ // if the node is a panel or a rule, do NOT set up the resizer callbacks
183
+ if (nodeName && ['panel', 'rule'].includes(nodeName) || _this2.isResizingInitialised) {
184
+ return;
185
+ }
186
+
187
+ // else, continue to set up the resizer callbacks
188
+ _this2.setupResizerCallbacks(dom, contentDOM, view, mark, api);
189
+ });
190
+ }
122
191
  }, {
123
192
  key: "ignoreMutation",
124
193
  value: function ignoreMutation() {
@@ -127,9 +196,10 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
127
196
  }, {
128
197
  key: "destroy",
129
198
  value: function destroy() {
130
- var _this$destroyFn2, _this$unsubscribeToVi;
131
- (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 || _this$destroyFn2.call(this);
199
+ var _this$destroyFn3, _this$unsubscribeToVi, _this$cancelScheduled3;
200
+ (_this$destroyFn3 = this.destroyFn) === null || _this$destroyFn3 === void 0 || _this$destroyFn3.call(this);
132
201
  (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 || _this$unsubscribeToVi.call(this);
202
+ (_this$cancelScheduled3 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled3 === void 0 || _this$cancelScheduled3.call(this);
133
203
  }
134
204
  }]);
135
205
  }();
package/dist/cjs/pm-plugins/resizing-plugin.js CHANGED
@@ -109,6 +109,7 @@ var pluginState = {
109
109
  }
110
110
  };
111
111
  var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
112
+ var isRuleAndPanelResizingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
112
113
  return new _safePlugin.SafePlugin({
113
114
  key: resizingPluginKey,
114
115
  state: pluginState,
@@ -130,8 +131,10 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
130
131
  var _newState$schema$node = newState.schema.nodes,
131
132
  expand = _newState$schema$node.expand,
132
133
  codeBlock = _newState$schema$node.codeBlock,
133
- layoutSection = _newState$schema$node.layoutSection;
134
- var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(newState.schema) : new Set([expand, codeBlock, layoutSection]);
134
+ layoutSection = _newState$schema$node.layoutSection,
135
+ rule = _newState$schema$node.rule,
136
+ panel = _newState$schema$node.panel;
137
+ var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel]) : new Set([expand, codeBlock, layoutSection]);
135
138
  var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
136
139
  if ((0, _document.isReplaceDocOperation)(transactions, oldState)) {
137
140
  newState.doc.forEach(function (node, pos) {
package/dist/es2019/breakoutPlugin.js CHANGED
@@ -7,6 +7,7 @@ import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-e
7
7
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
8
8
  import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
9
9
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
10
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
12
  import { pluginKey } from './pm-plugins/plugin-key';
12
13
  import { createResizingPlugin, resizingPluginKey } from './pm-plugins/resizing-plugin';
@@ -183,7 +184,7 @@ export const breakoutPlugin = ({
183
184
  plugin: ({
184
185
  getIntl,
185
186
  nodeViewPortalProviderAPI
186
- }) => createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options)
187
+ }) => createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options, expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true))
187
188
  }];
188
189
  }
189
190
  return [{
package/dist/es2019/pm-plugins/handle-key-down.js CHANGED
@@ -2,6 +2,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
2
2
  import { getBreakoutResizableNodeTypes } from '@atlaskit/editor-common/utils';
3
3
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
4
4
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
5
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
5
6
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
7
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
7
8
  const KEYBOARD_RESIZE_STEP = 10;
@@ -41,9 +42,11 @@ export const handleKeyDown = api => (view, event) => {
41
42
  const {
42
43
  expand,
43
44
  codeBlock,
44
- layoutSection
45
+ layoutSection,
46
+ rule,
47
+ panel
45
48
  } = view.state.schema.nodes;
46
- const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema) : new Set([expand, codeBlock, layoutSection]);
49
+ const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema, expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel]) : new Set([expand, codeBlock, layoutSection]);
47
50
  const result = getAncestorResizableNode(view, breakoutResizableNodes);
48
51
  if (result) {
49
52
  const {
package/dist/es2019/pm-plugins/pragmatic-resizer.js CHANGED
@@ -7,12 +7,15 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
7
7
  import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
8
8
  import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
9
9
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
10
11
  import Tooltip from '@atlaskit/tooltip';
11
12
  const getNodeName = nodeName => {
12
13
  if (nodeName === 'layoutSection') {
13
14
  return 'layout';
14
15
  } else if (nodeName === 'codeBlock' || nodeName === 'expand') {
15
16
  return nodeName;
17
+ } else if ((nodeName === 'rule' || nodeName === 'panel') && expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) {
18
+ return nodeName;
16
19
  } else {
17
20
  return 'node';
18
21
  }
@@ -21,6 +24,8 @@ export const resizeHandleMessage = {
21
24
  expand: messages.resizeExpand,
22
25
  codeBlock: messages.resizeCodeBlock,
23
26
  layout: messages.resizeLayout,
27
+ rule: messages.resizeRule,
28
+ panel: messages.resizePanel,
24
29
  node: messages.resizeElement
25
30
  };
26
31
  const RailWithTooltip = ({
package/dist/es2019/pm-plugins/resizing-mark-view.js CHANGED
@@ -1,10 +1,24 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { createPragmaticResizer } from './pragmatic-resizer';
5
6
  import { createResizerCallbacks } from './resizer-callbacks';
6
7
  export const LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
7
8
  const RESIZE_HANDLE_TRACK_WIDTH = '7px';
9
+
10
+ // this function delays the resizer callbacks until the mark view DOM is attached to the DOM
11
+ const scheduleResizeHandleSetup = callback => {
12
+ if (typeof window === 'undefined') {
13
+ return () => {};
14
+ }
15
+ if (typeof window.requestAnimationFrame === 'function') {
16
+ const frame = window.requestAnimationFrame(callback);
17
+ return () => window.cancelAnimationFrame(frame);
18
+ }
19
+ const timeout = window.setTimeout(callback, 0);
20
+ return () => window.clearTimeout(timeout);
21
+ };
8
22
  export class ResizingMarkView {
9
23
  /**
10
24
  * Wrap node view in a resizing mark view
@@ -27,7 +41,7 @@ export class ResizingMarkView {
27
41
  dom.className = BreakoutCssClassName.BREAKOUT_MARK;
28
42
  dom.setAttribute('data-layout', mark.attrs.mode);
29
43
  dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
30
- const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
44
+ const isResizingExperimentEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
31
45
 
32
46
  // DOM styles
33
47
  // Keep a three-column grid even when the left resize handle is disabled. The empty
@@ -41,13 +55,13 @@ export class ResizingMarkView {
41
55
  contentDOM.style.gridColumn = '2';
42
56
  contentDOM.style.zIndex = '1';
43
57
  if (mark.attrs.width) {
44
- dom.style.gridTemplateColumns = isLeftResizeHandleDisabled ?
58
+ dom.style.gridTemplateColumns = isResizingExperimentEnabled ?
45
59
  // new code - phantom left track + content + right handle
46
60
  `${RESIZE_HANDLE_TRACK_WIDTH} max(var(--ak-editor--breakout-min-width), min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width))) ${RESIZE_HANDLE_TRACK_WIDTH}` :
47
61
  // old code - left handle + content + right handle
48
62
  `auto max(var(--ak-editor--breakout-min-width), min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width))) auto`;
49
63
  } else {
50
- if (isLeftResizeHandleDisabled) {
64
+ if (isResizingExperimentEnabled) {
51
65
  dom.style.gridTemplateColumns = `${RESIZE_HANDLE_TRACK_WIDTH} auto ${RESIZE_HANDLE_TRACK_WIDTH}`;
52
66
  }
53
67
  if (mark.attrs.mode === 'wide') {
@@ -66,17 +80,31 @@ export class ResizingMarkView {
66
80
  this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
67
81
  const isLiveViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
68
82
  if (!isLiveViewMode) {
69
- this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
83
+ fg('platform_editor_lovability_resize_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
70
84
  }
71
85
  this.unsubscribeToViewModeChange = api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(sharedState => {
72
86
  var _sharedState$nextShar, _sharedState$prevShar;
73
87
  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)) {
74
- var _sharedState$nextShar2, _sharedState$nextShar3;
75
- if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && this.isResizingInitialised) {
76
- var _this$destroyFn;
77
- (_this$destroyFn = this.destroyFn) === null || _this$destroyFn === void 0 ? void 0 : _this$destroyFn.call(this, true);
88
+ var _sharedState$nextShar4, _sharedState$nextShar5;
89
+ if (fg('platform_editor_lovability_resize_gracefully')) {
90
+ var _sharedState$nextShar2, _sharedState$nextShar3;
91
+ if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view') {
92
+ var _this$cancelScheduled;
93
+ (_this$cancelScheduled = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled === void 0 ? void 0 : _this$cancelScheduled.call(this);
94
+ this.cancelScheduledResizeHandleSetup = undefined;
95
+ if (this.isResizingInitialised) {
96
+ var _this$destroyFn;
97
+ (_this$destroyFn = this.destroyFn) === null || _this$destroyFn === void 0 ? void 0 : _this$destroyFn.call(this, true);
98
+ this.isResizingInitialised = false;
99
+ }
100
+ } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !this.isResizingInitialised) {
101
+ this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api);
102
+ }
103
+ } else if (((_sharedState$nextShar4 = sharedState.nextSharedState) === null || _sharedState$nextShar4 === void 0 ? void 0 : _sharedState$nextShar4.mode) === 'view' && this.isResizingInitialised) {
104
+ var _this$destroyFn2;
105
+ (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 ? void 0 : _this$destroyFn2.call(this, true);
78
106
  this.isResizingInitialised = false;
79
- } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !this.isResizingInitialised) {
107
+ } else if (((_sharedState$nextShar5 = sharedState.nextSharedState) === null || _sharedState$nextShar5 === void 0 ? void 0 : _sharedState$nextShar5.mode) === 'edit' && !this.isResizingInitialised) {
80
108
  this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
81
109
  }
82
110
  }
@@ -106,12 +134,47 @@ export class ResizingMarkView {
106
134
  this.destroyFn = destroy;
107
135
  this.isResizingInitialised = true;
108
136
  }
137
+ setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) {
138
+ var _this$cancelScheduled2;
139
+ // cancel any pending setup before scheduling a new one
140
+ (_this$cancelScheduled2 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled2 === void 0 ? void 0 : _this$cancelScheduled2.call(this);
141
+ this.cancelScheduledResizeHandleSetup = undefined;
142
+
143
+ // if panels and rules support breakout resizing,
144
+ // set up the resizer callbacks
145
+ if (isResizingExperimentEnabled) {
146
+ this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
147
+ return;
148
+ }
149
+
150
+ // else if panels and rules don't support breakout resizing,
151
+ // do NOT set up the resizer callbacks (yet)
152
+ // wait for the mark view DOM to be attached to the DOM first
153
+ this.cancelScheduledResizeHandleSetup = scheduleResizeHandleSetup(() => {
154
+ var _view$state$doc$nodeA;
155
+ this.cancelScheduledResizeHandleSetup = undefined;
156
+ if (view.isDestroyed || !dom.isConnected) {
157
+ return;
158
+ }
159
+ const pos = view.posAtDOM(dom, 0);
160
+ const nodeName = (_view$state$doc$nodeA = view.state.doc.nodeAt(pos)) === null || _view$state$doc$nodeA === void 0 ? void 0 : _view$state$doc$nodeA.type.name;
161
+
162
+ // if the node is a panel or a rule, do NOT set up the resizer callbacks
163
+ if (nodeName && ['panel', 'rule'].includes(nodeName) || this.isResizingInitialised) {
164
+ return;
165
+ }
166
+
167
+ // else, continue to set up the resizer callbacks
168
+ this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
169
+ });
170
+ }
109
171
  ignoreMutation() {
110
172
  return true;
111
173
  }
112
174
  destroy() {
113
- var _this$destroyFn2, _this$unsubscribeToVi;
114
- (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 ? void 0 : _this$destroyFn2.call(this);
175
+ var _this$destroyFn3, _this$unsubscribeToVi, _this$cancelScheduled3;
176
+ (_this$destroyFn3 = this.destroyFn) === null || _this$destroyFn3 === void 0 ? void 0 : _this$destroyFn3.call(this);
115
177
  (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 ? void 0 : _this$unsubscribeToVi.call(this);
178
+ (_this$cancelScheduled3 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled3 === void 0 ? void 0 : _this$cancelScheduled3.call(this);
116
179
  }
117
180
  }
package/dist/es2019/pm-plugins/resizing-plugin.js CHANGED
@@ -104,7 +104,7 @@ const pluginState = {
104
104
  return pluginState;
105
105
  }
106
106
  };
107
- export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options) => {
107
+ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options, isRuleAndPanelResizingEnabled = false) => {
108
108
  return new SafePlugin({
109
109
  key: resizingPluginKey,
110
110
  state: pluginState,
@@ -126,9 +126,11 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
126
126
  const {
127
127
  expand,
128
128
  codeBlock,
129
- layoutSection
129
+ layoutSection,
130
+ rule,
131
+ panel
130
132
  } = newState.schema.nodes;
131
- const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema) : new Set([expand, codeBlock, layoutSection]);
133
+ const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel]) : new Set([expand, codeBlock, layoutSection]);
132
134
  const isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
133
135
  if (isReplaceDocOperation(transactions, oldState)) {
134
136
  newState.doc.forEach((node, pos) => {
package/dist/esm/breakoutPlugin.js CHANGED
@@ -13,6 +13,7 @@ import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-e
13
13
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
14
14
  import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
15
15
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
16
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
16
17
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
17
18
  import { pluginKey } from './pm-plugins/plugin-key';
18
19
  import { createResizingPlugin, resizingPluginKey } from './pm-plugins/resizing-plugin';
@@ -189,7 +190,7 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
189
190
  plugin: function plugin(_ref5) {
190
191
  var getIntl = _ref5.getIntl,
191
192
  nodeViewPortalProviderAPI = _ref5.nodeViewPortalProviderAPI;
192
- return createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options);
193
+ return createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options, expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true));
193
194
  }
194
195
  }];
195
196
  }
package/dist/esm/pm-plugins/handle-key-down.js CHANGED
@@ -2,6 +2,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
2
2
  import { getBreakoutResizableNodeTypes } from '@atlaskit/editor-common/utils';
3
3
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
4
4
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
5
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
5
6
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
7
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
7
8
  var KEYBOARD_RESIZE_STEP = 10;
@@ -42,8 +43,10 @@ export var handleKeyDown = function handleKeyDown(api) {
42
43
  var _view$state$schema$no = view.state.schema.nodes,
43
44
  expand = _view$state$schema$no.expand,
44
45
  codeBlock = _view$state$schema$no.codeBlock,
45
- layoutSection = _view$state$schema$no.layoutSection;
46
- var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema) : new Set([expand, codeBlock, layoutSection]);
46
+ layoutSection = _view$state$schema$no.layoutSection,
47
+ rule = _view$state$schema$no.rule,
48
+ panel = _view$state$schema$no.panel;
49
+ var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema, expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) : expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? new Set([expand, codeBlock, layoutSection, rule, panel]) : new Set([expand, codeBlock, layoutSection]);
47
50
  var result = getAncestorResizableNode(view, breakoutResizableNodes);
48
51
  if (result) {
49
52
  var node = result.node,
package/dist/esm/pm-plugins/pragmatic-resizer.js CHANGED
@@ -9,12 +9,15 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
9
9
  import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
10
10
  import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
11
11
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
12
13
  import Tooltip from '@atlaskit/tooltip';
13
14
  var getNodeName = function getNodeName(nodeName) {
14
15
  if (nodeName === 'layoutSection') {
15
16
  return 'layout';
16
17
  } else if (nodeName === 'codeBlock' || nodeName === 'expand') {
17
18
  return nodeName;
19
+ } else if ((nodeName === 'rule' || nodeName === 'panel') && expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true)) {
20
+ return nodeName;
18
21
  } else {
19
22
  return 'node';
20
23
  }
@@ -23,6 +26,8 @@ export var resizeHandleMessage = {
23
26
  expand: messages.resizeExpand,
24
27
  codeBlock: messages.resizeCodeBlock,
25
28
  layout: messages.resizeLayout,
29
+ rule: messages.resizeRule,
30
+ panel: messages.resizePanel,
26
31
  node: messages.resizeElement
27
32
  };
28
33
  var RailWithTooltip = function RailWithTooltip(_ref) {
package/dist/esm/pm-plugins/resizing-mark-view.js CHANGED
@@ -4,11 +4,29 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  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; }
5
5
  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) { _defineProperty(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; }
6
6
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
7
8
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
9
  import { createPragmaticResizer } from './pragmatic-resizer';
9
10
  import { createResizerCallbacks } from './resizer-callbacks';
10
11
  export var LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
11
12
  var RESIZE_HANDLE_TRACK_WIDTH = '7px';
13
+
14
+ // this function delays the resizer callbacks until the mark view DOM is attached to the DOM
15
+ var scheduleResizeHandleSetup = function scheduleResizeHandleSetup(callback) {
16
+ if (typeof window === 'undefined') {
17
+ return function () {};
18
+ }
19
+ if (typeof window.requestAnimationFrame === 'function') {
20
+ var frame = window.requestAnimationFrame(callback);
21
+ return function () {
22
+ return window.cancelAnimationFrame(frame);
23
+ };
24
+ }
25
+ var timeout = window.setTimeout(callback, 0);
26
+ return function () {
27
+ return window.clearTimeout(timeout);
28
+ };
29
+ };
12
30
  export var ResizingMarkView = /*#__PURE__*/function () {
13
31
  /**
14
32
  * Wrap node view in a resizing mark view
@@ -34,7 +52,7 @@ export var ResizingMarkView = /*#__PURE__*/function () {
34
52
  dom.className = BreakoutCssClassName.BREAKOUT_MARK;
35
53
  dom.setAttribute('data-layout', mark.attrs.mode);
36
54
  dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
37
- var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
55
+ var isResizingExperimentEnabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
38
56
 
39
57
  // DOM styles
40
58
  // Keep a three-column grid even when the left resize handle is disabled. The empty
@@ -48,11 +66,11 @@ export var ResizingMarkView = /*#__PURE__*/function () {
48
66
  contentDOM.style.gridColumn = '2';
49
67
  contentDOM.style.zIndex = '1';
50
68
  if (mark.attrs.width) {
51
- dom.style.gridTemplateColumns = isLeftResizeHandleDisabled ? // new code - phantom left track + content + right handle
69
+ dom.style.gridTemplateColumns = isResizingExperimentEnabled ? // new code - phantom left track + content + right handle
52
70
  "".concat(RESIZE_HANDLE_TRACK_WIDTH, " max(var(--ak-editor--breakout-min-width), min(var(").concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) ").concat(RESIZE_HANDLE_TRACK_WIDTH) : // old code - left handle + content + right handle
53
71
  "auto max(var(--ak-editor--breakout-min-width), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width))) auto");
54
72
  } else {
55
- if (isLeftResizeHandleDisabled) {
73
+ if (isResizingExperimentEnabled) {
56
74
  dom.style.gridTemplateColumns = "".concat(RESIZE_HANDLE_TRACK_WIDTH, " auto ").concat(RESIZE_HANDLE_TRACK_WIDTH);
57
75
  }
58
76
  if (mark.attrs.mode === 'wide') {
@@ -71,17 +89,31 @@ export var ResizingMarkView = /*#__PURE__*/function () {
71
89
  this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
72
90
  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';
73
91
  if (!isLiveViewMode) {
74
- this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
92
+ fg('platform_editor_lovability_resize_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
75
93
  }
76
94
  this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
77
95
  var _sharedState$nextShar, _sharedState$prevShar;
78
96
  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)) {
79
- var _sharedState$nextShar2, _sharedState$nextShar3;
80
- if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && _this.isResizingInitialised) {
81
- var _this$destroyFn;
82
- (_this$destroyFn = _this.destroyFn) === null || _this$destroyFn === void 0 || _this$destroyFn.call(_this, true);
97
+ var _sharedState$nextShar4, _sharedState$nextShar5;
98
+ if (fg('platform_editor_lovability_resize_gracefully')) {
99
+ var _sharedState$nextShar2, _sharedState$nextShar3;
100
+ if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view') {
101
+ var _this$cancelScheduled;
102
+ (_this$cancelScheduled = _this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled === void 0 || _this$cancelScheduled.call(_this);
103
+ _this.cancelScheduledResizeHandleSetup = undefined;
104
+ if (_this.isResizingInitialised) {
105
+ var _this$destroyFn;
106
+ (_this$destroyFn = _this.destroyFn) === null || _this$destroyFn === void 0 || _this$destroyFn.call(_this, true);
107
+ _this.isResizingInitialised = false;
108
+ }
109
+ } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
110
+ _this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api);
111
+ }
112
+ } else if (((_sharedState$nextShar4 = sharedState.nextSharedState) === null || _sharedState$nextShar4 === void 0 ? void 0 : _sharedState$nextShar4.mode) === 'view' && _this.isResizingInitialised) {
113
+ var _this$destroyFn2;
114
+ (_this$destroyFn2 = _this.destroyFn) === null || _this$destroyFn2 === void 0 || _this$destroyFn2.call(_this, true);
83
115
  _this.isResizingInitialised = false;
84
- } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
116
+ } else if (((_sharedState$nextShar5 = sharedState.nextSharedState) === null || _sharedState$nextShar5 === void 0 ? void 0 : _sharedState$nextShar5.mode) === 'edit' && !_this.isResizingInitialised) {
85
117
  _this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
86
118
  }
87
119
  }
@@ -112,6 +144,43 @@ export var ResizingMarkView = /*#__PURE__*/function () {
112
144
  this.destroyFn = destroy;
113
145
  this.isResizingInitialised = true;
114
146
  }
147
+ }, {
148
+ key: "setupResizerCallbacksIfSupported",
149
+ value: function setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingExperimentEnabled, api) {
150
+ var _this$cancelScheduled2,
151
+ _this2 = this;
152
+ // cancel any pending setup before scheduling a new one
153
+ (_this$cancelScheduled2 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled2 === void 0 || _this$cancelScheduled2.call(this);
154
+ this.cancelScheduledResizeHandleSetup = undefined;
155
+
156
+ // if panels and rules support breakout resizing,
157
+ // set up the resizer callbacks
158
+ if (isResizingExperimentEnabled) {
159
+ this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
160
+ return;
161
+ }
162
+
163
+ // else if panels and rules don't support breakout resizing,
164
+ // do NOT set up the resizer callbacks (yet)
165
+ // wait for the mark view DOM to be attached to the DOM first
166
+ this.cancelScheduledResizeHandleSetup = scheduleResizeHandleSetup(function () {
167
+ var _view$state$doc$nodeA;
168
+ _this2.cancelScheduledResizeHandleSetup = undefined;
169
+ if (view.isDestroyed || !dom.isConnected) {
170
+ return;
171
+ }
172
+ var pos = view.posAtDOM(dom, 0);
173
+ var nodeName = (_view$state$doc$nodeA = view.state.doc.nodeAt(pos)) === null || _view$state$doc$nodeA === void 0 ? void 0 : _view$state$doc$nodeA.type.name;
174
+
175
+ // if the node is a panel or a rule, do NOT set up the resizer callbacks
176
+ if (nodeName && ['panel', 'rule'].includes(nodeName) || _this2.isResizingInitialised) {
177
+ return;
178
+ }
179
+
180
+ // else, continue to set up the resizer callbacks
181
+ _this2.setupResizerCallbacks(dom, contentDOM, view, mark, api);
182
+ });
183
+ }
115
184
  }, {
116
185
  key: "ignoreMutation",
117
186
  value: function ignoreMutation() {
@@ -120,9 +189,10 @@ export var ResizingMarkView = /*#__PURE__*/function () {
120
189
  }, {
121
190
  key: "destroy",
122
191
  value: function destroy() {
123
- var _this$destroyFn2, _this$unsubscribeToVi;
124
- (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 || _this$destroyFn2.call(this);
192
+ var _this$destroyFn3, _this$unsubscribeToVi, _this$cancelScheduled3;
193
+ (_this$destroyFn3 = this.destroyFn) === null || _this$destroyFn3 === void 0 || _this$destroyFn3.call(this);
125
194
  (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 || _this$unsubscribeToVi.call(this);
195
+ (_this$cancelScheduled3 = this.cancelScheduledResizeHandleSetup) === null || _this$cancelScheduled3 === void 0 || _this$cancelScheduled3.call(this);
126
196
  }
127
197
  }]);
128
198
  }();
package/dist/esm/pm-plugins/resizing-plugin.js CHANGED
@@ -102,6 +102,7 @@ var pluginState = {
102
102
  }
103
103
  };
104
104
  export var createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
105
+ var isRuleAndPanelResizingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
105
106
  return new SafePlugin({
106
107
  key: resizingPluginKey,
107
108
  state: pluginState,
@@ -123,8 +124,10 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
123
124
  var _newState$schema$node = newState.schema.nodes,
124
125
  expand = _newState$schema$node.expand,
125
126
  codeBlock = _newState$schema$node.codeBlock,
126
- layoutSection = _newState$schema$node.layoutSection;
127
- var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema) : new Set([expand, codeBlock, layoutSection]);
127
+ layoutSection = _newState$schema$node.layoutSection,
128
+ rule = _newState$schema$node.rule,
129
+ panel = _newState$schema$node.panel;
130
+ var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel]) : new Set([expand, codeBlock, layoutSection]);
128
131
  var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
129
132
  if (isReplaceDocOperation(transactions, oldState)) {
130
133
  newState.doc.forEach(function (node, pos) {
package/dist/types/pm-plugins/resizing-mark-view.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare class ResizingMarkView implements NodeView {
11
11
  view: EditorView;
12
12
  mark: Mark;
13
13
  destroyFn: ((isChangeToViewMode?: boolean) => void) | undefined;
14
+ cancelScheduledResizeHandleSetup: (() => void) | undefined;
14
15
  intl: IntlShape;
15
16
  nodeViewPortalProviderAPI: PortalProviderAPI;
16
17
  unsubscribeToViewModeChange: (() => void) | undefined;
@@ -28,6 +29,7 @@ export declare class ResizingMarkView implements NodeView {
28
29
  */
29
30
  constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI);
30
31
  setupResizerCallbacks(dom: HTMLElement, contentDOM: HTMLElement, view: EditorView, mark: Mark, api?: ExtractInjectionAPI<BreakoutPlugin>): void;
32
+ setupResizerCallbacksIfSupported(dom: HTMLElement, contentDOM: HTMLElement, view: EditorView, mark: Mark, isResizingExperimentEnabled: boolean, api?: ExtractInjectionAPI<BreakoutPlugin>): void;
31
33
  ignoreMutation(): boolean;
32
34
  destroy(): void;
33
35
  }
package/dist/types/pm-plugins/resizing-plugin.d.ts CHANGED
@@ -7,7 +7,7 @@ import type { BreakoutPlugin, BreakoutPluginOptions, BreakoutPluginState } from
7
7
  import type { GUIDELINE_KEYS } from './get-guidelines';
8
8
  export declare const resizingPluginKey: PluginKey<BreakoutPluginState>;
9
9
  export type ActiveGuidelineKey = Exclude<(typeof GUIDELINE_KEYS)[keyof typeof GUIDELINE_KEYS], 'grid_left' | 'grid_right'>;
10
- export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<BreakoutPluginState | {
10
+ export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions, isRuleAndPanelResizingEnabled?: boolean) => SafePlugin<BreakoutPluginState | {
11
11
  activeGuidelineLabel: undefined;
12
12
  breakoutNode: undefined;
13
13
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "12.0.18",
3
+ "version": "12.1.1",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,12 +31,12 @@
31
31
  "@atlaskit/editor-plugin-width": "^13.0.0",
32
32
  "@atlaskit/editor-prosemirror": "^8.0.0",
33
33
  "@atlaskit/editor-shared-styles": "^4.0.0",
34
- "@atlaskit/icon": "^36.1.0",
34
+ "@atlaskit/icon": "^36.2.0",
35
35
  "@atlaskit/platform-feature-flags": "^2.0.0",
36
36
  "@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
37
37
  "@atlaskit/theme": "^26.1.0",
38
- "@atlaskit/tmp-editor-statsig": "^120.0.0",
39
- "@atlaskit/tokens": "^15.3.0",
38
+ "@atlaskit/tmp-editor-statsig": "^121.0.0",
39
+ "@atlaskit/tokens": "^15.4.0",
40
40
  "@atlaskit/tooltip": "^23.1.0",
41
41
  "@babel/runtime": "^7.0.0",
42
42
  "@emotion/react": "^11.7.1",
@@ -45,7 +45,7 @@
45
45
  "uuid": "^3.1.0"
46
46
  },
47
47
  "peerDependencies": {
48
- "@atlaskit/editor-common": "^116.20.0",
48
+ "@atlaskit/editor-common": "^116.22.0",
49
49
  "react": "^18.2.0",
50
50
  "react-dom": "^18.2.0",
51
51
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -93,5 +93,9 @@
93
93
  ]
94
94
  }
95
95
  },
96
- "platform-feature-flags": {}
96
+ "platform-feature-flags": {
97
+ "platform_editor_lovability_resize_gracefully": {
98
+ "type": "boolean"
99
+ }
100
+ }
97
101
  }