@atlaskit/editor-plugin-breakout 6.2.5 → 6.3.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 +20 -0
  2. package/dist/cjs/pm-plugins/get-guidelines.js +1 -1
  3. package/dist/cjs/pm-plugins/resizer-callbacks.js +4 -4
  4. package/dist/cjs/pm-plugins/resizing-plugin.js +8 -1
  5. package/dist/es2019/pm-plugins/get-guidelines.js +1 -1
  6. package/dist/es2019/pm-plugins/resizer-callbacks.js +4 -4
  7. package/dist/es2019/pm-plugins/resizing-plugin.js +8 -1
  8. package/dist/esm/pm-plugins/get-guidelines.js +1 -1
  9. package/dist/esm/pm-plugins/resizer-callbacks.js +4 -4
  10. package/dist/esm/pm-plugins/resizing-plugin.js +8 -1
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 6.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`8677e7b660127`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8677e7b660127) -
8
+ EDITOR-3792 Rollup max width changes previously gated with editor_tinymce_full_width_mode into
9
+ combined frontend/backend flag confluence_max_width_content_appearance
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 6.2.6
16
+
17
+ ### Patch Changes
18
+
19
+ - [`0c0f8207e7294`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c0f8207e7294) -
20
+ Added sync block resizing
21
+ - Updated dependencies
22
+
3
23
  ## 6.2.5
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/pm-plugins/get-guidelines.js CHANGED
@@ -55,7 +55,7 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
55
55
  exposure: true
56
56
  }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
57
57
  var fullWidth = width ? Math.min(WIDTHS.FULL, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
58
- var maxWidth = width && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(WIDTHS.MAX, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
58
+ var maxWidth = width && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? Math.min(WIDTHS.MAX, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
59
59
  guidelines.push({
60
60
  key: GUIDELINE_KEYS.lineLengthLeft,
61
61
  position: {
package/dist/cjs/pm-plugins/resizer-callbacks.js CHANGED
@@ -40,7 +40,7 @@ function getProposedWidth(_ref) {
40
40
  // the node width may be greater than the container width so we resize using the smaller value
41
41
  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
42
42
  var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.FULL)];
43
- if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
43
+ if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
44
44
  snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
45
45
  }
46
46
  for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
@@ -49,7 +49,7 @@ function getProposedWidth(_ref) {
49
49
  return snapPoint;
50
50
  }
51
51
  }
52
- var hardMax = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
52
+ var hardMax = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
53
53
  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
54
54
  }
55
55
  function createResizerCallbacks(_ref2) {
@@ -154,7 +154,7 @@ function createResizerCallbacks(_ref2) {
154
154
  return guideline.key.startsWith('full_width') && guideline.active;
155
155
  });
156
156
  var isResizedToMaxWidth = false;
157
- if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
157
+ if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
158
158
  isResizedToMaxWidth = !!guidelines.find(function (guideline) {
159
159
  return guideline.key.startsWith('max_width') && guideline.active;
160
160
  });
@@ -172,7 +172,7 @@ function createResizerCallbacks(_ref2) {
172
172
  api: api,
173
173
  source: source
174
174
  });
175
- if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
175
+ if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
176
176
  if (isResizedToMaxWidth) {
177
177
  newWidth = WIDTHS.MAX;
178
178
  }
package/dist/cjs/pm-plugins/resizing-plugin.js CHANGED
@@ -11,6 +11,7 @@ var _utils = require("@atlaskit/editor-common/utils");
11
11
  var _document = require("@atlaskit/editor-common/utils/document");
12
12
  var _state = require("@atlaskit/editor-prosemirror/state");
13
13
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
14
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
14
15
  var _handleKeyDown = require("./handle-key-down");
15
16
  var _resizingMarkView = require("./resizing-mark-view");
16
17
  var _singlePlayerExpand = require("./utils/single-player-expand");
@@ -129,8 +130,14 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
129
130
  var _newState$schema$node = newState.schema.nodes,
130
131
  expand = _newState$schema$node.expand,
131
132
  codeBlock = _newState$schema$node.codeBlock,
132
- layoutSection = _newState$schema$node.layoutSection;
133
+ layoutSection = _newState$schema$node.layoutSection,
134
+ syncBlock = _newState$schema$node.syncBlock,
135
+ bodiedSyncBlock = _newState$schema$node.bodiedSyncBlock;
133
136
  var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
137
+ if ((0, _experiments.editorExperiment)('platform_synced_block', true)) {
138
+ breakoutResizableNodes.add(syncBlock);
139
+ breakoutResizableNodes.add(bodiedSyncBlock);
140
+ }
134
141
  var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
135
142
  if ((0, _document.isReplaceDocOperation)(transactions, oldState)) {
136
143
  newState.doc.forEach(function (node, pos) {
package/dist/es2019/pm-plugins/get-guidelines.js CHANGED
@@ -46,7 +46,7 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
46
46
  exposure: true
47
47
  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
48
48
  const fullWidth = width ? Math.min(WIDTHS.FULL, width - 2 * padding - akEditorGutterPadding) : undefined;
49
- const maxWidth = width && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
49
+ const maxWidth = width && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
50
50
  guidelines.push({
51
51
  key: GUIDELINE_KEYS.lineLengthLeft,
52
52
  position: {
package/dist/es2019/pm-plugins/resizer-callbacks.js CHANGED
@@ -34,7 +34,7 @@ export function getProposedWidth({
34
34
  // the node width may be greater than the container width so we resize using the smaller value
35
35
  const proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
36
36
  const snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.FULL)];
37
- if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
37
+ if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
38
38
  snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
39
39
  }
40
40
  for (const snapPoint of snapPoints) {
@@ -42,7 +42,7 @@ export function getProposedWidth({
42
42
  return snapPoint;
43
43
  }
44
44
  }
45
- const hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
45
+ const hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
46
46
  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
47
47
  }
48
48
  export function createResizerCallbacks({
@@ -150,7 +150,7 @@ export function createResizerCallbacks({
150
150
  });
151
151
  const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.startsWith('full_width') && guideline.active);
152
152
  let isResizedToMaxWidth = false;
153
- if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
153
+ if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
154
154
  isResizedToMaxWidth = !!guidelines.find(guideline => guideline.key.startsWith('max_width') && guideline.active);
155
155
  }
156
156
  guidelines = getGuidelines(false, 0, getEditorWidth);
@@ -166,7 +166,7 @@ export function createResizerCallbacks({
166
166
  api,
167
167
  source
168
168
  });
169
- if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
169
+ if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
170
170
  if (isResizedToMaxWidth) {
171
171
  newWidth = WIDTHS.MAX;
172
172
  }
package/dist/es2019/pm-plugins/resizing-plugin.js CHANGED
@@ -3,6 +3,7 @@ import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
3
3
  import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
4
4
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
5
5
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
6
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
7
  import { handleKeyDown } from './handle-key-down';
7
8
  import { ResizingMarkView } from './resizing-mark-view';
8
9
  import { updateExpandedStateNew } from './utils/single-player-expand';
@@ -125,9 +126,15 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
125
126
  const {
126
127
  expand,
127
128
  codeBlock,
128
- layoutSection
129
+ layoutSection,
130
+ syncBlock,
131
+ bodiedSyncBlock
129
132
  } = newState.schema.nodes;
130
133
  const breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
134
+ if (editorExperiment('platform_synced_block', true)) {
135
+ breakoutResizableNodes.add(syncBlock);
136
+ breakoutResizableNodes.add(bodiedSyncBlock);
137
+ }
131
138
  const isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
132
139
  if (isReplaceDocOperation(transactions, oldState)) {
133
140
  newState.doc.forEach((node, pos) => {
package/dist/esm/pm-plugins/get-guidelines.js CHANGED
@@ -48,7 +48,7 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
48
48
  exposure: true
49
49
  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
50
50
  var fullWidth = width ? Math.min(WIDTHS.FULL, width - 2 * padding - akEditorGutterPadding) : undefined;
51
- var maxWidth = width && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
51
+ var maxWidth = width && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
52
52
  guidelines.push({
53
53
  key: GUIDELINE_KEYS.lineLengthLeft,
54
54
  position: {
package/dist/esm/pm-plugins/resizer-callbacks.js CHANGED
@@ -33,7 +33,7 @@ export function getProposedWidth(_ref) {
33
33
  // the node width may be greater than the container width so we resize using the smaller value
34
34
  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
35
35
  var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.FULL)];
36
- if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
36
+ if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
37
37
  snapPoints.push(Math.min(containerWidth, WIDTHS.MAX));
38
38
  }
39
39
  for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
@@ -42,7 +42,7 @@ export function getProposedWidth(_ref) {
42
42
  return snapPoint;
43
43
  }
44
44
  }
45
- var hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
45
+ var hardMax = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? Math.min(containerWidth, WIDTHS.MAX) : Math.min(containerWidth, WIDTHS.FULL);
46
46
  return Math.max(WIDTHS.MIN, Math.min(proposedWidth, hardMax));
47
47
  }
48
48
  export function createResizerCallbacks(_ref2) {
@@ -147,7 +147,7 @@ export function createResizerCallbacks(_ref2) {
147
147
  return guideline.key.startsWith('full_width') && guideline.active;
148
148
  });
149
149
  var isResizedToMaxWidth = false;
150
- if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
150
+ if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
151
151
  isResizedToMaxWidth = !!guidelines.find(function (guideline) {
152
152
  return guideline.key.startsWith('max_width') && guideline.active;
153
153
  });
@@ -165,7 +165,7 @@ export function createResizerCallbacks(_ref2) {
165
165
  api: api,
166
166
  source: source
167
167
  });
168
- if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
168
+ if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
169
169
  if (isResizedToMaxWidth) {
170
170
  newWidth = WIDTHS.MAX;
171
171
  }
package/dist/esm/pm-plugins/resizing-plugin.js CHANGED
@@ -6,6 +6,7 @@ import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
6
6
  import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
7
7
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
8
8
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
9
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
10
  import { handleKeyDown } from './handle-key-down';
10
11
  import { ResizingMarkView } from './resizing-mark-view';
11
12
  import { updateExpandedStateNew } from './utils/single-player-expand';
@@ -122,8 +123,14 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
122
123
  var _newState$schema$node = newState.schema.nodes,
123
124
  expand = _newState$schema$node.expand,
124
125
  codeBlock = _newState$schema$node.codeBlock,
125
- layoutSection = _newState$schema$node.layoutSection;
126
+ layoutSection = _newState$schema$node.layoutSection,
127
+ syncBlock = _newState$schema$node.syncBlock,
128
+ bodiedSyncBlock = _newState$schema$node.bodiedSyncBlock;
126
129
  var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
130
+ if (editorExperiment('platform_synced_block', true)) {
131
+ breakoutResizableNodes.add(syncBlock);
132
+ breakoutResizableNodes.add(bodiedSyncBlock);
133
+ }
127
134
  var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
128
135
  if (isReplaceDocOperation(transactions, oldState)) {
129
136
  newState.doc.forEach(function (node, pos) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "6.2.5",
3
+ "version": "6.3.0",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -43,7 +43,7 @@
43
43
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
44
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
45
45
  "@atlaskit/theme": "^21.0.0",
46
- "@atlaskit/tmp-editor-statsig": "^15.6.0",
46
+ "@atlaskit/tmp-editor-statsig": "^15.8.0",
47
47
  "@atlaskit/tokens": "^8.4.0",
48
48
  "@atlaskit/tooltip": "^20.11.0",
49
49
  "@babel/runtime": "^7.0.0",
@@ -59,7 +59,7 @@
59
59
  "react-intl-next": "npm:react-intl@^5.18.1"
60
60
  },
61
61
  "devDependencies": {
62
- "@testing-library/react": "^13.4.0",
62
+ "@testing-library/react": "^16.3.0",
63
63
  "wait-for-expect": "^1.2.0"
64
64
  },
65
65
  "techstack": {