@atlaskit/editor-plugin-breakout 2.8.3 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/pm-plugins/pragmatic-resizer.js +3 -0
  3. package/dist/cjs/pm-plugins/resizer-callbacks.js +11 -2
  4. package/dist/cjs/pm-plugins/resizing-mark-view.js +18 -3
  5. package/dist/es2019/pm-plugins/pragmatic-resizer.js +3 -0
  6. package/dist/es2019/pm-plugins/resizer-callbacks.js +11 -2
  7. package/dist/es2019/pm-plugins/resizing-mark-view.js +18 -3
  8. package/dist/esm/pm-plugins/pragmatic-resizer.js +3 -0
  9. package/dist/esm/pm-plugins/resizer-callbacks.js +11 -2
  10. package/dist/esm/pm-plugins/resizing-mark-view.js +18 -3
  11. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 2.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#170867](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/170867)
8
+ [`5ef91045141dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ef91045141dd) -
9
+ Add new fallback css widths for breakout resizing plugin, to fix issues in full width page
10
+
3
11
  ## 2.8.3
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/pm-plugins/pragmatic-resizer.js CHANGED
@@ -71,6 +71,9 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
71
71
  var handle = document.createElement('div');
72
72
  handle.contentEditable = 'false';
73
73
  handle.classList.add('pm-breakout-resize-handle-container');
74
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
75
+ handle.style.gridColumn = side === 'left' ? '1' : '3';
76
+ }
74
77
  var rail = document.createElement('div');
75
78
  rail.classList.add('pm-breakout-resize-handle-rail');
76
79
  if (side === 'left') {
package/dist/cjs/pm-plugins/resizer-callbacks.js CHANGED
@@ -132,7 +132,12 @@ function createResizerCallbacks(_ref2) {
132
132
  });
133
133
  }
134
134
  }
135
- contentDOM.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
135
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
136
+ // dom is used for width calculations
137
+ dom.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
138
+ } else {
139
+ contentDOM.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
140
+ }
136
141
  },
137
142
  onDrop: function onDrop(_ref7) {
138
143
  var _api$guideline2;
@@ -169,7 +174,11 @@ function createResizerCallbacks(_ref2) {
169
174
  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';
170
175
  }
171
176
  (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
172
- contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
177
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
178
+ dom.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
179
+ } else {
180
+ contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
181
+ }
173
182
  if (node && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
174
183
  var resizedPayload = (0, _analytics.generateResizedEventPayload)({
175
184
  node: node,
package/dist/cjs/pm-plugins/resizing-mark-view.js CHANGED
@@ -44,10 +44,25 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
44
44
  dom.style.justifyContent = 'center';
45
45
 
46
46
  // contentDOM - styles
47
- contentDOM.style.gridRow = '1';
48
- contentDOM.style.gridColumn = '1';
47
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
48
+ contentDOM.style.gridColumn = '2';
49
+ } else {
50
+ contentDOM.style.gridRow = '1';
51
+ contentDOM.style.gridColumn = '1';
52
+ }
49
53
  contentDOM.style.zIndex = '1';
50
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
54
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes')) {
55
+ if (mark.attrs.width) {
56
+ dom.style.gridTemplateColumns = "auto min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width)) auto");
57
+ } else {
58
+ if (mark.attrs.mode === 'wide') {
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))))");
60
+ }
61
+ if (mark.attrs.mode === 'full-width') {
62
+ 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))))");
63
+ }
64
+ }
65
+ } else if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
51
66
  if (mark.attrs.width) {
52
67
  contentDOM.style.width = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
53
68
  } else {
package/dist/es2019/pm-plugins/pragmatic-resizer.js CHANGED
@@ -59,6 +59,9 @@ export const createPragmaticResizer = ({
59
59
  const handle = document.createElement('div');
60
60
  handle.contentEditable = 'false';
61
61
  handle.classList.add('pm-breakout-resize-handle-container');
62
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
63
+ handle.style.gridColumn = side === 'left' ? '1' : '3';
64
+ }
62
65
  const rail = document.createElement('div');
63
66
  rail.classList.add('pm-breakout-resize-handle-rail');
64
67
  if (side === 'left') {
package/dist/es2019/pm-plugins/resizer-callbacks.js CHANGED
@@ -129,7 +129,12 @@ export function createResizerCallbacks({
129
129
  });
130
130
  }
131
131
  }
132
- contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
132
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
133
+ // dom is used for width calculations
134
+ dom.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
135
+ } else {
136
+ contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
137
+ }
133
138
  },
134
139
  onDrop({
135
140
  location,
@@ -165,7 +170,11 @@ export function createResizerCallbacks({
165
170
  isEditMode = (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) === 'edit';
166
171
  }
167
172
  setBreakoutWidth(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
168
- contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
173
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
174
+ dom.style.removeProperty(LOCAL_RESIZE_PROPERTY);
175
+ } else {
176
+ contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
177
+ }
169
178
  if (node && fg('platform_editor_breakout_resizing_hello_release')) {
170
179
  const resizedPayload = generateResizedEventPayload({
171
180
  node,
package/dist/es2019/pm-plugins/resizing-mark-view.js CHANGED
@@ -31,10 +31,25 @@ export class ResizingMarkView {
31
31
  dom.style.justifyContent = 'center';
32
32
 
33
33
  // contentDOM - styles
34
- contentDOM.style.gridRow = '1';
35
- contentDOM.style.gridColumn = '1';
34
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
35
+ contentDOM.style.gridColumn = '2';
36
+ } else {
37
+ contentDOM.style.gridRow = '1';
38
+ contentDOM.style.gridColumn = '1';
39
+ }
36
40
  contentDOM.style.zIndex = '1';
37
- if (fg('platform_editor_breakout_resizing_hello_release')) {
41
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
42
+ if (mark.attrs.width) {
43
+ dom.style.gridTemplateColumns = `auto min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), var(--ak-editor--breakout-fallback-width)) auto`;
44
+ } else {
45
+ if (mark.attrs.mode === 'wide') {
46
+ 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))))`;
47
+ }
48
+ if (mark.attrs.mode === 'full-width') {
49
+ contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
50
+ }
51
+ }
52
+ } else if (fg('platform_editor_breakout_resizing_hello_release')) {
38
53
  if (mark.attrs.width) {
39
54
  contentDOM.style.width = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
40
55
  } else {
package/dist/esm/pm-plugins/pragmatic-resizer.js CHANGED
@@ -62,6 +62,9 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
62
62
  var handle = document.createElement('div');
63
63
  handle.contentEditable = 'false';
64
64
  handle.classList.add('pm-breakout-resize-handle-container');
65
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
66
+ handle.style.gridColumn = side === 'left' ? '1' : '3';
67
+ }
65
68
  var rail = document.createElement('div');
66
69
  rail.classList.add('pm-breakout-resize-handle-rail');
67
70
  if (side === 'left') {
package/dist/esm/pm-plugins/resizer-callbacks.js CHANGED
@@ -125,7 +125,12 @@ export function createResizerCallbacks(_ref2) {
125
125
  });
126
126
  }
127
127
  }
128
- contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
128
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
129
+ // dom is used for width calculations
130
+ dom.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
131
+ } else {
132
+ contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
133
+ }
129
134
  },
130
135
  onDrop: function onDrop(_ref7) {
131
136
  var _api$guideline2;
@@ -162,7 +167,11 @@ export function createResizerCallbacks(_ref2) {
162
167
  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';
163
168
  }
164
169
  setBreakoutWidth(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
165
- contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
170
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
171
+ dom.style.removeProperty(LOCAL_RESIZE_PROPERTY);
172
+ } else {
173
+ contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
174
+ }
166
175
  if (node && fg('platform_editor_breakout_resizing_hello_release')) {
167
176
  var resizedPayload = generateResizedEventPayload({
168
177
  node: node,
package/dist/esm/pm-plugins/resizing-mark-view.js CHANGED
@@ -37,10 +37,25 @@ export var ResizingMarkView = /*#__PURE__*/function () {
37
37
  dom.style.justifyContent = 'center';
38
38
 
39
39
  // contentDOM - styles
40
- contentDOM.style.gridRow = '1';
41
- contentDOM.style.gridColumn = '1';
40
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
41
+ contentDOM.style.gridColumn = '2';
42
+ } else {
43
+ contentDOM.style.gridRow = '1';
44
+ contentDOM.style.gridColumn = '1';
45
+ }
42
46
  contentDOM.style.zIndex = '1';
43
- if (fg('platform_editor_breakout_resizing_hello_release')) {
47
+ if (fg('platform_editor_breakout_resizing_width_changes')) {
48
+ if (mark.attrs.width) {
49
+ dom.style.gridTemplateColumns = "auto min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), var(--ak-editor--breakout-fallback-width)) auto");
50
+ } else {
51
+ if (mark.attrs.mode === 'wide') {
52
+ 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))))");
53
+ }
54
+ if (mark.attrs.mode === 'full-width') {
55
+ 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))))");
56
+ }
57
+ }
58
+ } else if (fg('platform_editor_breakout_resizing_hello_release')) {
44
59
  if (mark.attrs.width) {
45
60
  contentDOM.style.width = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
46
61
  } else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "2.8.3",
3
+ "version": "2.9.0",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -122,6 +122,9 @@
122
122
  },
123
123
  "platform_editor_breakout_resizing_patch_1": {
124
124
  "type": "boolean"
125
+ },
126
+ "platform_editor_breakout_resizing_width_changes": {
127
+ "type": "boolean"
125
128
  }
126
129
  }
127
130
  }