@atlaskit/editor-plugin-breakout 2.9.1 → 2.9.2

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 (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/breakoutPlugin.js +10 -6
  3. package/dist/es2019/breakoutPlugin.js +10 -6
  4. package/dist/esm/breakoutPlugin.js +10 -6
  5. package/dist/types/breakoutPluginType.d.ts +2 -1
  6. package/dist/types-ts4.5/breakoutPluginType.d.ts +2 -1
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 2.9.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#176058](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176058)
8
+ [`38c6611bdd480`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38c6611bdd480) -
9
+ ED-28085 Clean up platform_editor_hide_expand_selection_states
10
+
3
11
  ## 2.9.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/breakoutPlugin.js CHANGED
@@ -36,7 +36,7 @@ var BreakoutView = /*#__PURE__*/(0, _createClass2.default)(function BreakoutView
36
36
  * of the prosemirror and prosemirror types mean using PMNode
37
37
  * is not problematic.
38
38
  */
39
- mark, view) {
39
+ mark, view, appearance) {
40
40
  (0, _classCallCheck2.default)(this, BreakoutView);
41
41
  var dom = document.createElement('div');
42
42
  var contentDOM = document.createElement('div');
@@ -59,7 +59,11 @@ mark, view) {
59
59
  contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
60
60
  }
61
61
  if (mark.attrs.mode === 'wide') {
62
- contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
62
+ if (appearance && appearance === 'full-width' && (0, _experiments.editorExperiment)('single_column_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_layout_guideline_full_width_fix')) {
63
+ contentDOM.style.minWidth = "min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))";
64
+ } else {
65
+ contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
66
+ }
63
67
  }
64
68
  }
65
69
  } else {
@@ -82,7 +86,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
82
86
  }
83
87
  return newBreakoutNode || currentBreakoutNode ? true : false;
84
88
  }
85
- function createPlugin(api, _ref) {
89
+ function createPlugin(api, _ref, appearance) {
86
90
  var dispatch = _ref.dispatch;
87
91
  return new _safePlugin.SafePlugin({
88
92
  state: {
@@ -112,7 +116,7 @@ function createPlugin(api, _ref) {
112
116
  // See the following link for more details:
113
117
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
114
118
  breakout: function breakout(mark, view) {
115
- return new BreakoutView(mark, view);
119
+ return new BreakoutView(mark, view, appearance);
116
120
  }
117
121
  }
118
122
  }
@@ -182,7 +186,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
182
186
  }
183
187
  });
184
188
  var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.interactionState');
185
- if (interactionState === 'hasNotHadInteraction' && (0, _platformFeatureFlags.fg)('platform_editor_hide_expand_selection_states')) {
189
+ if (interactionState === 'hasNotHadInteraction') {
186
190
  return null;
187
191
  }
188
192
  if (isDragging || isPMDragging) {
@@ -223,7 +227,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
223
227
  return [{
224
228
  name: 'breakout',
225
229
  plugin: function plugin(props) {
226
- return createPlugin(api, props);
230
+ return createPlugin(api, props, options === null || options === void 0 ? void 0 : options.appearance);
227
231
  }
228
232
  }];
229
233
  },
package/dist/es2019/breakoutPlugin.js CHANGED
@@ -22,7 +22,7 @@ class BreakoutView {
22
22
  * of the prosemirror and prosemirror types mean using PMNode
23
23
  * is not problematic.
24
24
  */
25
- mark, view) {
25
+ mark, view, appearance) {
26
26
  const dom = document.createElement('div');
27
27
  const contentDOM = document.createElement('div');
28
28
  contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
@@ -44,7 +44,11 @@ class BreakoutView {
44
44
  contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
45
45
  }
46
46
  if (mark.attrs.mode === 'wide') {
47
- contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
47
+ if (appearance && appearance === 'full-width' && editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix')) {
48
+ contentDOM.style.minWidth = `min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
49
+ } else {
50
+ contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
51
+ }
48
52
  }
49
53
  }
50
54
  } else {
@@ -70,7 +74,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
70
74
  }
71
75
  function createPlugin(api, {
72
76
  dispatch
73
- }) {
77
+ }, appearance) {
74
78
  return new SafePlugin({
75
79
  state: {
76
80
  init() {
@@ -100,7 +104,7 @@ function createPlugin(api, {
100
104
  // See the following link for more details:
101
105
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
102
106
  breakout: (mark, view) => {
103
- return new BreakoutView(mark, view);
107
+ return new BreakoutView(mark, view, appearance);
104
108
  }
105
109
  }
106
110
  }
@@ -168,7 +172,7 @@ const LayoutButtonWrapper = ({
168
172
  }
169
173
  });
170
174
  const interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
171
- if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
175
+ if (interactionState === 'hasNotHadInteraction') {
172
176
  return null;
173
177
  }
174
178
  if (isDragging || isPMDragging) {
@@ -207,7 +211,7 @@ export const breakoutPlugin = ({
207
211
  }
208
212
  return [{
209
213
  name: 'breakout',
210
- plugin: props => createPlugin(api, props)
214
+ plugin: props => createPlugin(api, props, options === null || options === void 0 ? void 0 : options.appearance)
211
215
  }];
212
216
  },
213
217
  marks() {
package/dist/esm/breakoutPlugin.js CHANGED
@@ -27,7 +27,7 @@ var BreakoutView = /*#__PURE__*/_createClass(function BreakoutView(
27
27
  * of the prosemirror and prosemirror types mean using PMNode
28
28
  * is not problematic.
29
29
  */
30
- mark, view) {
30
+ mark, view, appearance) {
31
31
  _classCallCheck(this, BreakoutView);
32
32
  var dom = document.createElement('div');
33
33
  var contentDOM = document.createElement('div');
@@ -50,7 +50,11 @@ mark, view) {
50
50
  contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
51
51
  }
52
52
  if (mark.attrs.mode === 'wide') {
53
- contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
53
+ if (appearance && appearance === 'full-width' && editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix')) {
54
+ contentDOM.style.minWidth = "min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))";
55
+ } else {
56
+ contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
57
+ }
54
58
  }
55
59
  }
56
60
  } else {
@@ -73,7 +77,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
73
77
  }
74
78
  return newBreakoutNode || currentBreakoutNode ? true : false;
75
79
  }
76
- function createPlugin(api, _ref) {
80
+ function createPlugin(api, _ref, appearance) {
77
81
  var dispatch = _ref.dispatch;
78
82
  return new SafePlugin({
79
83
  state: {
@@ -103,7 +107,7 @@ function createPlugin(api, _ref) {
103
107
  // See the following link for more details:
104
108
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
105
109
  breakout: function breakout(mark, view) {
106
- return new BreakoutView(mark, view);
110
+ return new BreakoutView(mark, view, appearance);
107
111
  }
108
112
  }
109
113
  }
@@ -173,7 +177,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
173
177
  }
174
178
  });
175
179
  var interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
176
- if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
180
+ if (interactionState === 'hasNotHadInteraction') {
177
181
  return null;
178
182
  }
179
183
  if (isDragging || isPMDragging) {
@@ -214,7 +218,7 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
214
218
  return [{
215
219
  name: 'breakout',
216
220
  plugin: function plugin(props) {
217
- return createPlugin(api, props);
221
+ return createPlugin(api, props, options === null || options === void 0 ? void 0 : options.appearance);
218
222
  }
219
223
  }];
220
224
  },
package/dist/types/breakoutPluginType.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
1
+ import type { EditorAppearance, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
2
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
3
  import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
4
4
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -15,6 +15,7 @@ export interface BreakoutPluginState {
15
15
  }
16
16
  export interface BreakoutPluginOptions {
17
17
  allowBreakoutButton?: boolean;
18
+ appearance?: EditorAppearance;
18
19
  }
19
20
  export type BreakoutPluginDependencies = [
20
21
  WidthPlugin,
package/dist/types-ts4.5/breakoutPluginType.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
1
+ import type { EditorAppearance, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
2
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
3
  import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
4
4
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -15,6 +15,7 @@ export interface BreakoutPluginState {
15
15
  }
16
16
  export interface BreakoutPluginOptions {
17
17
  allowBreakoutButton?: boolean;
18
+ appearance?: EditorAppearance;
18
19
  }
19
20
  export type BreakoutPluginDependencies = [
20
21
  WidthPlugin,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "2.9.1",
3
+ "version": "2.9.2",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^47.6.0",
37
- "@atlaskit/editor-common": "^107.1.0",
37
+ "@atlaskit/editor-common": "^107.2.0",
38
38
  "@atlaskit/editor-plugin-block-controls": "^3.19.0",
39
39
  "@atlaskit/editor-plugin-editor-disabled": "^2.1.0",
40
40
  "@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
@@ -48,7 +48,7 @@
48
48
  "@atlaskit/platform-feature-flags": "^1.1.0",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
50
50
  "@atlaskit/theme": "^18.0.0",
51
- "@atlaskit/tmp-editor-statsig": "^8.0.0",
51
+ "@atlaskit/tmp-editor-statsig": "^8.2.0",
52
52
  "@atlaskit/tokens": "^5.4.0",
53
53
  "@atlaskit/tooltip": "^20.3.0",
54
54
  "@babel/runtime": "^7.0.0",
@@ -114,7 +114,7 @@
114
114
  "platform-editor-single-player-expand": {
115
115
  "type": "boolean"
116
116
  },
117
- "platform_editor_hide_expand_selection_states": {
117
+ "platform_editor_layout_guideline_full_width_fix": {
118
118
  "type": "boolean"
119
119
  },
120
120
  "platform_editor_breakout_resizing_hello_release": {