@atlaskit/editor-plugin-breakout 12.0.6 → 12.0.8

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/pragmatic-resizer.js +16 -7
  3. package/dist/cjs/pm-plugins/resizing-mark-view.js +18 -4
  4. package/dist/es2019/pm-plugins/pragmatic-resizer.js +18 -7
  5. package/dist/es2019/pm-plugins/resizing-mark-view.js +20 -4
  6. package/dist/esm/pm-plugins/pragmatic-resizer.js +16 -7
  7. package/dist/esm/pm-plugins/resizing-mark-view.js +18 -4
  8. package/dist/types/pm-plugins/pragmatic-resizer.d.ts +2 -2
  9. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 12.0.8
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.0.7
10
+
11
+ ### Patch Changes
12
+
13
+ - [`949347e49035b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/949347e49035b) -
14
+ [ux] [EDITOR-7471] Remove the left-hand resizer handle from nodes using breakout mark for
15
+ resizing.
16
+ - Updated dependencies
17
+
3
18
  ## 12.0.6
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/pm-plugins/pragmatic-resizer.js CHANGED
@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
15
15
  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
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
18
19
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
19
20
  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); }
20
21
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
@@ -68,6 +69,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
68
69
  intl = _ref2.intl,
69
70
  nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
70
71
  var state = 'default';
72
+ var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
71
73
  var createHandle = function createHandle(side) {
72
74
  var handle = document.createElement('div');
73
75
  handle.contentEditable = 'false';
@@ -112,7 +114,8 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
112
114
  };
113
115
  };
114
116
  var rightHandle = createHandle('right');
115
- var leftHandle = createHandle('left');
117
+ // Remove const leftHandle during 'platform_editor_lovability_resize_dividers_panels' cleanup
118
+ var leftHandle = isLeftResizeHandleDisabled ? undefined : createHandle('left');
116
119
  var registerHandle = function registerHandle(handleElement, handleSide) {
117
120
  return (0, _adapter.draggable)({
118
121
  element: handleElement,
@@ -147,7 +150,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
147
150
  type: 'mouseenter',
148
151
  listener: function listener() {
149
152
  rightHandle.rail.style.setProperty('opacity', '1');
150
- leftHandle.rail.style.setProperty('opacity', '1');
153
+ leftHandle === null || leftHandle === void 0 || leftHandle.rail.style.setProperty('opacity', '1');
151
154
  }
152
155
  }), (0, _bindEventListener.bind)(element, {
153
156
  type: 'mouseleave',
@@ -156,16 +159,22 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
156
159
  return;
157
160
  }
158
161
  rightHandle.rail.style.removeProperty('opacity');
159
- leftHandle.rail.style.removeProperty('opacity');
162
+ leftHandle === null || leftHandle === void 0 || leftHandle.rail.style.removeProperty('opacity');
160
163
  }
161
164
  })];
162
165
  };
163
- 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)));
166
+ var unbindFns = leftHandle ? // old code - left + right
167
+ [].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))) : // new code - right only
168
+ [].concat((0, _toConsumableArray2.default)(registerEvents(target)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.rail)));
164
169
  var handleElement = 'rail';
165
- var destroyFns = [registerHandle(rightHandle[handleElement], 'right'), registerHandle(leftHandle[handleElement], 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip];
170
+ var destroyFns = leftHandle ?
171
+ // old code - left + right
172
+ [registerHandle(rightHandle[handleElement], 'right'), registerHandle(leftHandle[handleElement], 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip] :
173
+ // new code - right only
174
+ [registerHandle(rightHandle[handleElement], 'right'), rightHandle.destroyTooltip];
166
175
  return {
167
176
  rightHandle: rightHandle.handle,
168
- leftHandle: leftHandle.handle,
177
+ leftHandle: leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.handle,
169
178
  destroy: function destroy(isChangeToViewMode) {
170
179
  destroyFns.forEach(function (destroyFn) {
171
180
  return destroyFn();
@@ -176,7 +185,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
176
185
  if (isChangeToViewMode) {
177
186
  var _rightHandle$handle$p, _leftHandle$handle$pa;
178
187
  (_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 || _rightHandle$handle$p.removeChild(rightHandle.handle);
179
- (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 || _leftHandle$handle$pa.removeChild(leftHandle.handle);
188
+ leftHandle === null || leftHandle === void 0 || (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 || _leftHandle$handle$pa.removeChild(leftHandle.handle);
180
189
  }
181
190
  }
182
191
  };
package/dist/cjs/pm-plugins/resizing-mark-view.js CHANGED
@@ -9,11 +9,13 @@ 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 _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
12
13
  var _pragmaticResizer = require("./pragmatic-resizer");
13
14
  var _resizerCallbacks = require("./resizer-callbacks");
14
15
  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; }
15
16
  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; }
16
17
  var LOCAL_RESIZE_PROPERTY = exports.LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
18
+ var RESIZE_HANDLE_TRACK_WIDTH = '7px';
17
19
  var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
18
20
  /**
19
21
  * Wrap node view in a resizing mark view
@@ -39,17 +41,27 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
39
41
  dom.className = _styles.BreakoutCssClassName.BREAKOUT_MARK;
40
42
  dom.setAttribute('data-layout', mark.attrs.mode);
41
43
  dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
42
- // dom - styles
44
+ var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
45
+
46
+ // DOM styles
47
+ // Keep a three-column grid even when the left resize handle is disabled. The empty
48
+ // left track preserves the original content alignment without translating `contentDOM`,
49
+ // so floating UI anchored to the node (for example block drag handles) keeps its position.
43
50
  dom.style.transform = 'none';
44
51
  dom.style.display = 'grid';
45
52
  dom.style.justifyContent = 'center';
46
53
 
47
- // contentDOM - styles
54
+ // contentDOM styles
48
55
  contentDOM.style.gridColumn = '2';
49
56
  contentDOM.style.zIndex = '1';
50
57
  if (mark.attrs.width) {
51
- dom.style.gridTemplateColumns = "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");
58
+ dom.style.gridTemplateColumns = isLeftResizeHandleDisabled ? // new code - phantom left track + content + right handle
59
+ "".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
+ "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");
52
61
  } else {
62
+ if (isLeftResizeHandleDisabled) {
63
+ dom.style.gridTemplateColumns = "".concat(RESIZE_HANDLE_TRACK_WIDTH, " auto ").concat(RESIZE_HANDLE_TRACK_WIDTH);
64
+ }
53
65
  if (mark.attrs.mode === 'wide') {
54
66
  contentDOM.style.width = "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))))");
55
67
  }
@@ -100,7 +112,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
100
112
  leftHandle = _createPragmaticResiz.leftHandle,
101
113
  rightHandle = _createPragmaticResiz.rightHandle,
102
114
  destroy = _createPragmaticResiz.destroy;
103
- this.dom.prepend(leftHandle);
115
+ if (leftHandle) {
116
+ this.dom.prepend(leftHandle);
117
+ }
104
118
  this.dom.appendChild(rightHandle);
105
119
  this.destroyFn = destroy;
106
120
  this.isResizingInitialised = true;
package/dist/es2019/pm-plugins/pragmatic-resizer.js CHANGED
@@ -6,6 +6,7 @@ import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
6
6
  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
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
10
  import Tooltip from '@atlaskit/tooltip';
10
11
  const getNodeName = nodeName => {
11
12
  if (nodeName === 'layoutSection') {
@@ -55,6 +56,7 @@ export const createPragmaticResizer = ({
55
56
  nodeViewPortalProviderAPI
56
57
  }) => {
57
58
  let state = 'default';
59
+ const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
58
60
  const createHandle = side => {
59
61
  const handle = document.createElement('div');
60
62
  handle.contentEditable = 'false';
@@ -95,7 +97,8 @@ export const createPragmaticResizer = ({
95
97
  };
96
98
  };
97
99
  const rightHandle = createHandle('right');
98
- const leftHandle = createHandle('left');
100
+ // Remove const leftHandle during 'platform_editor_lovability_resize_dividers_panels' cleanup
101
+ const leftHandle = isLeftResizeHandleDisabled ? undefined : createHandle('left');
99
102
  const registerHandle = (handleElement, handleSide) => {
100
103
  return draggable({
101
104
  element: handleElement,
@@ -129,7 +132,7 @@ export const createPragmaticResizer = ({
129
132
  type: 'mouseenter',
130
133
  listener: () => {
131
134
  rightHandle.rail.style.setProperty('opacity', '1');
132
- leftHandle.rail.style.setProperty('opacity', '1');
135
+ leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.rail.style.setProperty('opacity', '1');
133
136
  }
134
137
  }), bind(element, {
135
138
  type: 'mouseleave',
@@ -138,23 +141,31 @@ export const createPragmaticResizer = ({
138
141
  return;
139
142
  }
140
143
  rightHandle.rail.style.removeProperty('opacity');
141
- leftHandle.rail.style.removeProperty('opacity');
144
+ leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.rail.style.removeProperty('opacity');
142
145
  }
143
146
  })];
144
147
  };
145
- const unbindFns = [...registerEvents(target), ...registerEvents(rightHandle.handleHitBox), ...registerEvents(leftHandle.handleHitBox), ...registerEvents(rightHandle.rail), ...registerEvents(leftHandle.rail)];
148
+ const unbindFns = leftHandle ?
149
+ // old code - left + right
150
+ [...registerEvents(target), ...registerEvents(rightHandle.handleHitBox), ...registerEvents(leftHandle.handleHitBox), ...registerEvents(rightHandle.rail), ...registerEvents(leftHandle.rail)] :
151
+ // new code - right only
152
+ [...registerEvents(target), ...registerEvents(rightHandle.handleHitBox), ...registerEvents(rightHandle.rail)];
146
153
  const handleElement = 'rail';
147
- const destroyFns = [registerHandle(rightHandle[handleElement], 'right'), registerHandle(leftHandle[handleElement], 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip];
154
+ const destroyFns = leftHandle ?
155
+ // old code - left + right
156
+ [registerHandle(rightHandle[handleElement], 'right'), registerHandle(leftHandle[handleElement], 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip] :
157
+ // new code - right only
158
+ [registerHandle(rightHandle[handleElement], 'right'), rightHandle.destroyTooltip];
148
159
  return {
149
160
  rightHandle: rightHandle.handle,
150
- leftHandle: leftHandle.handle,
161
+ leftHandle: leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.handle,
151
162
  destroy: isChangeToViewMode => {
152
163
  destroyFns.forEach(destroyFn => destroyFn());
153
164
  unbindFns.forEach(unbindFn => unbindFn());
154
165
  if (isChangeToViewMode) {
155
166
  var _rightHandle$handle$p, _leftHandle$handle$pa;
156
167
  (_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 ? void 0 : _rightHandle$handle$p.removeChild(rightHandle.handle);
157
- (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 ? void 0 : _leftHandle$handle$pa.removeChild(leftHandle.handle);
168
+ leftHandle === null || leftHandle === void 0 ? void 0 : (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 ? void 0 : _leftHandle$handle$pa.removeChild(leftHandle.handle);
158
169
  }
159
170
  }
160
171
  };
package/dist/es2019/pm-plugins/resizing-mark-view.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
3
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
4
  import { createPragmaticResizer } from './pragmatic-resizer';
4
5
  import { createResizerCallbacks } from './resizer-callbacks';
5
6
  export const LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
7
+ const RESIZE_HANDLE_TRACK_WIDTH = '7px';
6
8
  export class ResizingMarkView {
7
9
  /**
8
10
  * Wrap node view in a resizing mark view
@@ -25,17 +27,29 @@ export class ResizingMarkView {
25
27
  dom.className = BreakoutCssClassName.BREAKOUT_MARK;
26
28
  dom.setAttribute('data-layout', mark.attrs.mode);
27
29
  dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
28
- // dom - styles
30
+ const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
31
+
32
+ // DOM styles
33
+ // Keep a three-column grid even when the left resize handle is disabled. The empty
34
+ // left track preserves the original content alignment without translating `contentDOM`,
35
+ // so floating UI anchored to the node (for example block drag handles) keeps its position.
29
36
  dom.style.transform = 'none';
30
37
  dom.style.display = 'grid';
31
38
  dom.style.justifyContent = 'center';
32
39
 
33
- // contentDOM - styles
40
+ // contentDOM styles
34
41
  contentDOM.style.gridColumn = '2';
35
42
  contentDOM.style.zIndex = '1';
36
43
  if (mark.attrs.width) {
37
- dom.style.gridTemplateColumns = `auto max(var(--ak-editor--breakout-min-width), min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width))) auto`;
44
+ dom.style.gridTemplateColumns = isLeftResizeHandleDisabled ?
45
+ // new code - phantom left track + content + right handle
46
+ `${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
+ // old code - left handle + content + right handle
48
+ `auto max(var(--ak-editor--breakout-min-width), min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width))) auto`;
38
49
  } else {
50
+ if (isLeftResizeHandleDisabled) {
51
+ dom.style.gridTemplateColumns = `${RESIZE_HANDLE_TRACK_WIDTH} auto ${RESIZE_HANDLE_TRACK_WIDTH}`;
52
+ }
39
53
  if (mark.attrs.mode === 'wide') {
40
54
  contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
41
55
  }
@@ -85,7 +99,9 @@ export class ResizingMarkView {
85
99
  intl: this.intl,
86
100
  nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
87
101
  });
88
- this.dom.prepend(leftHandle);
102
+ if (leftHandle) {
103
+ this.dom.prepend(leftHandle);
104
+ }
89
105
  this.dom.appendChild(rightHandle);
90
106
  this.destroyFn = destroy;
91
107
  this.isResizingInitialised = true;
package/dist/esm/pm-plugins/pragmatic-resizer.js CHANGED
@@ -8,6 +8,7 @@ import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
8
8
  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
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
12
  import Tooltip from '@atlaskit/tooltip';
12
13
  var getNodeName = function getNodeName(nodeName) {
13
14
  if (nodeName === 'layoutSection') {
@@ -58,6 +59,7 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
58
59
  intl = _ref2.intl,
59
60
  nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
60
61
  var state = 'default';
62
+ var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
61
63
  var createHandle = function createHandle(side) {
62
64
  var handle = document.createElement('div');
63
65
  handle.contentEditable = 'false';
@@ -102,7 +104,8 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
102
104
  };
103
105
  };
104
106
  var rightHandle = createHandle('right');
105
- var leftHandle = createHandle('left');
107
+ // Remove const leftHandle during 'platform_editor_lovability_resize_dividers_panels' cleanup
108
+ var leftHandle = isLeftResizeHandleDisabled ? undefined : createHandle('left');
106
109
  var registerHandle = function registerHandle(handleElement, handleSide) {
107
110
  return draggable({
108
111
  element: handleElement,
@@ -137,7 +140,7 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
137
140
  type: 'mouseenter',
138
141
  listener: function listener() {
139
142
  rightHandle.rail.style.setProperty('opacity', '1');
140
- leftHandle.rail.style.setProperty('opacity', '1');
143
+ leftHandle === null || leftHandle === void 0 || leftHandle.rail.style.setProperty('opacity', '1');
141
144
  }
142
145
  }), bind(element, {
143
146
  type: 'mouseleave',
@@ -146,16 +149,22 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
146
149
  return;
147
150
  }
148
151
  rightHandle.rail.style.removeProperty('opacity');
149
- leftHandle.rail.style.removeProperty('opacity');
152
+ leftHandle === null || leftHandle === void 0 || leftHandle.rail.style.removeProperty('opacity');
150
153
  }
151
154
  })];
152
155
  };
153
- var unbindFns = [].concat(_toConsumableArray(registerEvents(target)), _toConsumableArray(registerEvents(rightHandle.handleHitBox)), _toConsumableArray(registerEvents(leftHandle.handleHitBox)), _toConsumableArray(registerEvents(rightHandle.rail)), _toConsumableArray(registerEvents(leftHandle.rail)));
156
+ var unbindFns = leftHandle ? // old code - left + right
157
+ [].concat(_toConsumableArray(registerEvents(target)), _toConsumableArray(registerEvents(rightHandle.handleHitBox)), _toConsumableArray(registerEvents(leftHandle.handleHitBox)), _toConsumableArray(registerEvents(rightHandle.rail)), _toConsumableArray(registerEvents(leftHandle.rail))) : // new code - right only
158
+ [].concat(_toConsumableArray(registerEvents(target)), _toConsumableArray(registerEvents(rightHandle.handleHitBox)), _toConsumableArray(registerEvents(rightHandle.rail)));
154
159
  var handleElement = 'rail';
155
- var destroyFns = [registerHandle(rightHandle[handleElement], 'right'), registerHandle(leftHandle[handleElement], 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip];
160
+ var destroyFns = leftHandle ?
161
+ // old code - left + right
162
+ [registerHandle(rightHandle[handleElement], 'right'), registerHandle(leftHandle[handleElement], 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip] :
163
+ // new code - right only
164
+ [registerHandle(rightHandle[handleElement], 'right'), rightHandle.destroyTooltip];
156
165
  return {
157
166
  rightHandle: rightHandle.handle,
158
- leftHandle: leftHandle.handle,
167
+ leftHandle: leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.handle,
159
168
  destroy: function destroy(isChangeToViewMode) {
160
169
  destroyFns.forEach(function (destroyFn) {
161
170
  return destroyFn();
@@ -166,7 +175,7 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
166
175
  if (isChangeToViewMode) {
167
176
  var _rightHandle$handle$p, _leftHandle$handle$pa;
168
177
  (_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 || _rightHandle$handle$p.removeChild(rightHandle.handle);
169
- (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 || _leftHandle$handle$pa.removeChild(leftHandle.handle);
178
+ leftHandle === null || leftHandle === void 0 || (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 || _leftHandle$handle$pa.removeChild(leftHandle.handle);
170
179
  }
171
180
  }
172
181
  };
package/dist/esm/pm-plugins/resizing-mark-view.js CHANGED
@@ -4,9 +4,11 @@ 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
7
8
  import { createPragmaticResizer } from './pragmatic-resizer';
8
9
  import { createResizerCallbacks } from './resizer-callbacks';
9
10
  export var LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
11
+ var RESIZE_HANDLE_TRACK_WIDTH = '7px';
10
12
  export var ResizingMarkView = /*#__PURE__*/function () {
11
13
  /**
12
14
  * Wrap node view in a resizing mark view
@@ -32,17 +34,27 @@ export var ResizingMarkView = /*#__PURE__*/function () {
32
34
  dom.className = BreakoutCssClassName.BREAKOUT_MARK;
33
35
  dom.setAttribute('data-layout', mark.attrs.mode);
34
36
  dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
35
- // dom - styles
37
+ var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true);
38
+
39
+ // DOM styles
40
+ // Keep a three-column grid even when the left resize handle is disabled. The empty
41
+ // left track preserves the original content alignment without translating `contentDOM`,
42
+ // so floating UI anchored to the node (for example block drag handles) keeps its position.
36
43
  dom.style.transform = 'none';
37
44
  dom.style.display = 'grid';
38
45
  dom.style.justifyContent = 'center';
39
46
 
40
- // contentDOM - styles
47
+ // contentDOM styles
41
48
  contentDOM.style.gridColumn = '2';
42
49
  contentDOM.style.zIndex = '1';
43
50
  if (mark.attrs.width) {
44
- dom.style.gridTemplateColumns = "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");
51
+ dom.style.gridTemplateColumns = isLeftResizeHandleDisabled ? // new code - phantom left track + content + right handle
52
+ "".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
+ "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");
45
54
  } else {
55
+ if (isLeftResizeHandleDisabled) {
56
+ dom.style.gridTemplateColumns = "".concat(RESIZE_HANDLE_TRACK_WIDTH, " auto ").concat(RESIZE_HANDLE_TRACK_WIDTH);
57
+ }
46
58
  if (mark.attrs.mode === 'wide') {
47
59
  contentDOM.style.width = "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))))");
48
60
  }
@@ -93,7 +105,9 @@ export var ResizingMarkView = /*#__PURE__*/function () {
93
105
  leftHandle = _createPragmaticResiz.leftHandle,
94
106
  rightHandle = _createPragmaticResiz.rightHandle,
95
107
  destroy = _createPragmaticResiz.destroy;
96
- this.dom.prepend(leftHandle);
108
+ if (leftHandle) {
109
+ this.dom.prepend(leftHandle);
110
+ }
97
111
  this.dom.appendChild(rightHandle);
98
112
  this.destroyFn = destroy;
99
113
  this.isResizingInitialised = true;
package/dist/types/pm-plugins/pragmatic-resizer.d.ts CHANGED
@@ -10,7 +10,7 @@ export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onD
10
10
  onDrop: (args: BaseEventPayload<ElementDragType>) => void;
11
11
  target: HTMLElement;
12
12
  }) => {
13
- rightHandle: HTMLDivElement;
14
- leftHandle: HTMLDivElement;
15
13
  destroy: (isChangeToViewMode?: boolean) => void;
14
+ leftHandle: HTMLDivElement | undefined;
15
+ rightHandle: HTMLDivElement;
16
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "12.0.6",
3
+ "version": "12.0.8",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -26,7 +26,7 @@
26
26
  "@atlaskit/editor-plugin-editor-disabled": "^12.0.0",
27
27
  "@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
28
28
  "@atlaskit/editor-plugin-guideline": "^12.0.0",
29
- "@atlaskit/editor-plugin-interaction": "^21.0.0",
29
+ "@atlaskit/editor-plugin-interaction": "^22.0.0",
30
30
  "@atlaskit/editor-plugin-user-intent": "^10.0.0",
31
31
  "@atlaskit/editor-plugin-width": "^13.0.0",
32
32
  "@atlaskit/editor-prosemirror": "^8.0.0",
@@ -35,8 +35,8 @@
35
35
  "@atlaskit/platform-feature-flags": "^2.0.0",
36
36
  "@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
37
37
  "@atlaskit/theme": "^26.0.0",
38
- "@atlaskit/tmp-editor-statsig": "^109.0.0",
39
- "@atlaskit/tokens": "^14.0.0",
38
+ "@atlaskit/tmp-editor-statsig": "^110.0.0",
39
+ "@atlaskit/tokens": "^15.0.0",
40
40
  "@atlaskit/tooltip": "^23.0.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.6.0",
48
+ "@atlaskit/editor-common": "^116.11.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"
@@ -54,7 +54,7 @@
54
54
  "@testing-library/react": "^16.3.0",
55
55
  "react": "^18.2.0",
56
56
  "react-dom": "^18.2.0",
57
- "react-intl": "^6.6.2",
57
+ "react-intl": "^7.0.0",
58
58
  "wait-for-expect": "^1.2.0"
59
59
  },
60
60
  "techstack": {