@atlaskit/editor-plugin-breakout 1.10.0 → 1.10.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 (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/breakoutPlugin.js +19 -116
  3. package/dist/es2019/breakoutPlugin.js +2 -99
  4. package/dist/esm/breakoutPlugin.js +20 -117
  5. package/package.json +2 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 1.10.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#108797](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108797)
8
+ [`9a3f165bc940b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9a3f165bc940b) -
9
+ tidy up feature flag confluence_frontend_editor_custom_presets
10
+ - Updated dependencies
11
+
3
12
  ## 1.10.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/breakoutPlugin.js CHANGED
@@ -5,115 +5,21 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.breakoutPlugin = void 0;
8
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
9
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
+ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
11
  var _react = _interopRequireDefault(require("react"));
12
12
  var _adfSchema = require("@atlaskit/adf-schema");
13
13
  var _hooks = require("@atlaskit/editor-common/hooks");
14
14
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
15
15
  var _styles = require("@atlaskit/editor-common/styles");
16
- var _utils = require("@atlaskit/editor-common/utils");
17
16
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
18
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
17
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
20
18
  var _pluginKey = require("./pm-plugins/plugin-key");
21
19
  var _findBreakoutNode = require("./pm-plugins/utils/find-breakout-node");
22
20
  var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
23
21
  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; }
24
22
  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; }
25
- var BreakoutViewOld = /*#__PURE__*/function () {
26
- function BreakoutViewOld(
27
- /**
28
- * Note: this is actually a PMMark -- however our version
29
- * of the prosemirror and prosemirror types mean using PMNode
30
- * is not problematic.
31
- */
32
- mark, view, pluginInjectionApi) {
33
- var _this = this,
34
- _pluginInjectionApi$w,
35
- _pluginInjectionApi$w2;
36
- (0, _classCallCheck2.default)(this, BreakoutViewOld);
37
- (0, _defineProperty2.default)(this, "updateWidth", function (widthState) {
38
- // we skip updating the width of breakout nodes if the editorView dom
39
- // element was hidden (to avoid breakout width and button thrashing
40
- // when an editor is hidden, re-rendered and unhidden).
41
- if (widthState === undefined || widthState.width === 0) {
42
- return;
43
- }
44
- var containerStyle = "";
45
- var contentStyle = "";
46
-
47
- // when editor padding = 32px the breakout padding is calculated as 96px (32 * 3)
48
- // the extra '32' ensures nodes with breakout applied default to line length its below default width
49
- var padding = (0, _platformFeatureFlags.fg)('platform_editor_core_increase_full_page_guttering') ? (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 + 32 : undefined;
50
- var breakoutWidthPx = (0, _utils.calcBreakoutWidthPx)(_this.mark.attrs.mode, widthState.width, padding);
51
- if (widthState.lineLength) {
52
- if (breakoutWidthPx < widthState.lineLength) {
53
- breakoutWidthPx = widthState.lineLength;
54
- }
55
- containerStyle += "\n transform: none;\n display: flex;\n justify-content: center;\n ";
56
-
57
- // There is a delay in the animation because widthState is delayed.
58
- // When the editor goes full width the animation for the editor
59
- // begins and finishes before widthState can update the new dimensions.
60
- contentStyle += "\n min-width: ".concat(breakoutWidthPx, "px;\n transition: min-width 0.5s ").concat(_editorSharedStyles.akEditorSwoopCubicBezier, ";\n ");
61
- } else {
62
- // fallback method
63
- // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
64
- //
65
- // this approach doesn't work well with position: fixed, so
66
- // it breaks things like sticky headers
67
- containerStyle += "width: ".concat(breakoutWidthPx, "px; transform: translateX(-50%); margin-left: 50%;");
68
- }
69
-
70
- // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
71
- // `ignoreMutation` life-cycle event. @see ED-9947
72
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
73
- var viewDomObserver = _this.view.domObserver;
74
- if (viewDomObserver && _this.view.dom) {
75
- viewDomObserver.stop();
76
- setTimeout(function () {
77
- viewDomObserver.start();
78
- }, 0);
79
- }
80
- if (typeof _this.dom.style.cssText !== 'undefined') {
81
- _this.dom.style.cssText = containerStyle;
82
- _this.contentDOM.style.cssText = contentStyle;
83
- } else {
84
- _this.dom.setAttribute('style', containerStyle);
85
- _this.contentDOM.setAttribute('style', contentStyle);
86
- }
87
- });
88
- var contentDOM = document.createElement('div');
89
- contentDOM.className = _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM;
90
- contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
91
- var dom = document.createElement('div');
92
- dom.className = _styles.BreakoutCssClassName.BREAKOUT_MARK;
93
- dom.setAttribute('data-layout', mark.attrs.mode);
94
- dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
95
- dom.appendChild(contentDOM);
96
- this.dom = dom;
97
- this.mark = mark;
98
- this.view = view;
99
- this.contentDOM = contentDOM;
100
- this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.onChange(function (_ref) {
101
- var nextSharedState = _ref.nextSharedState;
102
- return _this.updateWidth(nextSharedState);
103
- });
104
- this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.sharedState.currentState());
105
- }
106
- return (0, _createClass2.default)(BreakoutViewOld, [{
107
- key: "destroy",
108
- value:
109
- // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
110
- // @see https://github.com/ProseMirror/prosemirror/issues/1082
111
- function destroy() {
112
- var _this$unsubscribe;
113
- (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
114
- }
115
- }]);
116
- }();
117
23
  var BreakoutView = /*#__PURE__*/(0, _createClass2.default)(function BreakoutView(
118
24
  /**
119
25
  * Note: this is actually a PMMark -- however our version
@@ -166,8 +72,8 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
166
72
  }
167
73
  return newBreakoutNode || currentBreakoutNode ? true : false;
168
74
  }
169
- function createPlugin(pluginInjectionApi, _ref2) {
170
- var dispatch = _ref2.dispatch;
75
+ function createPlugin(pluginInjectionApi, _ref) {
76
+ var dispatch = _ref.dispatch;
171
77
  return new _safePlugin.SafePlugin({
172
78
  state: {
173
79
  init: function init() {
@@ -195,22 +101,19 @@ function createPlugin(pluginInjectionApi, _ref2) {
195
101
  // See the following link for more details:
196
102
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
197
103
  breakout: function breakout(mark, view) {
198
- if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css')) {
199
- return new BreakoutView(mark, view);
200
- }
201
- return new BreakoutViewOld(mark, view, pluginInjectionApi);
104
+ return new BreakoutView(mark, view);
202
105
  }
203
106
  }
204
107
  }
205
108
  });
206
109
  }
207
- var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
110
+ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
208
111
  var _breakoutState$breako, _breakoutState$breako2;
209
- var api = _ref3.api,
210
- editorView = _ref3.editorView,
211
- boundariesElement = _ref3.boundariesElement,
212
- scrollableElement = _ref3.scrollableElement,
213
- mountPoint = _ref3.mountPoint;
112
+ var api = _ref2.api,
113
+ editorView = _ref2.editorView,
114
+ boundariesElement = _ref2.boundariesElement,
115
+ scrollableElement = _ref2.scrollableElement,
116
+ mountPoint = _ref2.mountPoint;
214
117
  // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
215
118
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']),
216
119
  breakoutState = _useSharedPluginState.breakoutState,
@@ -233,9 +136,9 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
233
136
  isLivePage: isEditMode
234
137
  }) : null;
235
138
  };
236
- var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
237
- var options = _ref4.config,
238
- api = _ref4.api;
139
+ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref3) {
140
+ var options = _ref3.config,
141
+ api = _ref3.api;
239
142
  return {
240
143
  name: 'breakout',
241
144
  pmPlugins: function pmPlugins() {
@@ -266,11 +169,11 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
266
169
  }
267
170
  return pluginState;
268
171
  },
269
- contentComponent: function contentComponent(_ref5) {
270
- var editorView = _ref5.editorView,
271
- popupsMountPoint = _ref5.popupsMountPoint,
272
- popupsBoundariesElement = _ref5.popupsBoundariesElement,
273
- popupsScrollableElement = _ref5.popupsScrollableElement;
172
+ contentComponent: function contentComponent(_ref4) {
173
+ var editorView = _ref4.editorView,
174
+ popupsMountPoint = _ref4.popupsMountPoint,
175
+ popupsBoundariesElement = _ref4.popupsBoundariesElement,
176
+ popupsScrollableElement = _ref4.popupsScrollableElement;
274
177
  // This is a bit crappy, but should be resolved once we move to a static schema.
275
178
  if (options && !options.allowBreakoutButton) {
276
179
  return null;
package/dist/es2019/breakoutPlugin.js CHANGED
@@ -1,107 +1,13 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
1
  import React from 'react';
3
2
  import { breakout } from '@atlaskit/adf-schema';
4
3
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
5
4
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
6
5
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
7
- import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
8
- import { akEditorGutterPaddingDynamic, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
9
- import { fg } from '@atlaskit/platform-feature-flags';
6
+ import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
10
7
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
8
  import { pluginKey } from './pm-plugins/plugin-key';
12
9
  import { findSupportedNodeForBreakout } from './pm-plugins/utils/find-breakout-node';
13
10
  import LayoutButton from './ui/LayoutButton';
14
- class BreakoutViewOld {
15
- constructor(
16
- /**
17
- * Note: this is actually a PMMark -- however our version
18
- * of the prosemirror and prosemirror types mean using PMNode
19
- * is not problematic.
20
- */
21
- mark, view, pluginInjectionApi) {
22
- var _pluginInjectionApi$w, _pluginInjectionApi$w2;
23
- _defineProperty(this, "updateWidth", widthState => {
24
- // we skip updating the width of breakout nodes if the editorView dom
25
- // element was hidden (to avoid breakout width and button thrashing
26
- // when an editor is hidden, re-rendered and unhidden).
27
- if (widthState === undefined || widthState.width === 0) {
28
- return;
29
- }
30
- let containerStyle = ``;
31
- let contentStyle = ``;
32
-
33
- // when editor padding = 32px the breakout padding is calculated as 96px (32 * 3)
34
- // the extra '32' ensures nodes with breakout applied default to line length its below default width
35
- const padding = fg('platform_editor_core_increase_full_page_guttering') ? akEditorGutterPaddingDynamic() * 2 + 32 : undefined;
36
- let breakoutWidthPx = calcBreakoutWidthPx(this.mark.attrs.mode, widthState.width, padding);
37
- if (widthState.lineLength) {
38
- if (breakoutWidthPx < widthState.lineLength) {
39
- breakoutWidthPx = widthState.lineLength;
40
- }
41
- containerStyle += `
42
- transform: none;
43
- display: flex;
44
- justify-content: center;
45
- `;
46
-
47
- // There is a delay in the animation because widthState is delayed.
48
- // When the editor goes full width the animation for the editor
49
- // begins and finishes before widthState can update the new dimensions.
50
- contentStyle += `
51
- min-width: ${breakoutWidthPx}px;
52
- transition: min-width 0.5s ${akEditorSwoopCubicBezier};
53
- `;
54
- } else {
55
- // fallback method
56
- // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
57
- //
58
- // this approach doesn't work well with position: fixed, so
59
- // it breaks things like sticky headers
60
- containerStyle += `width: ${breakoutWidthPx}px; transform: translateX(-50%); margin-left: 50%;`;
61
- }
62
-
63
- // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
64
- // `ignoreMutation` life-cycle event. @see ED-9947
65
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
66
- const viewDomObserver = this.view.domObserver;
67
- if (viewDomObserver && this.view.dom) {
68
- viewDomObserver.stop();
69
- setTimeout(() => {
70
- viewDomObserver.start();
71
- }, 0);
72
- }
73
- if (typeof this.dom.style.cssText !== 'undefined') {
74
- this.dom.style.cssText = containerStyle;
75
- this.contentDOM.style.cssText = contentStyle;
76
- } else {
77
- this.dom.setAttribute('style', containerStyle);
78
- this.contentDOM.setAttribute('style', contentStyle);
79
- }
80
- });
81
- const contentDOM = document.createElement('div');
82
- contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
83
- contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
84
- const dom = document.createElement('div');
85
- dom.className = BreakoutCssClassName.BREAKOUT_MARK;
86
- dom.setAttribute('data-layout', mark.attrs.mode);
87
- dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
88
- dom.appendChild(contentDOM);
89
- this.dom = dom;
90
- this.mark = mark;
91
- this.view = view;
92
- this.contentDOM = contentDOM;
93
- this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.onChange(({
94
- nextSharedState
95
- }) => this.updateWidth(nextSharedState));
96
- this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.sharedState.currentState());
97
- }
98
- // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
99
- // @see https://github.com/ProseMirror/prosemirror/issues/1082
100
- destroy() {
101
- var _this$unsubscribe;
102
- (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
103
- }
104
- }
105
11
  class BreakoutView {
106
12
  constructor(
107
13
  /**
@@ -186,10 +92,7 @@ function createPlugin(pluginInjectionApi, {
186
92
  // See the following link for more details:
187
93
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
188
94
  breakout: (mark, view) => {
189
- if (fg('platform_editor_breakout_use_css')) {
190
- return new BreakoutView(mark, view);
191
- }
192
- return new BreakoutViewOld(mark, view, pluginInjectionApi);
95
+ return new BreakoutView(mark, view);
193
96
  }
194
97
  }
195
98
  }
package/dist/esm/breakoutPlugin.js CHANGED
@@ -1,6 +1,6 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _createClass from "@babel/runtime/helpers/createClass";
3
+ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
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 React from 'react';
@@ -8,105 +8,11 @@ import { breakout } from '@atlaskit/adf-schema';
8
8
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
9
9
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
10
10
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
11
- import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
12
- import { akEditorGutterPaddingDynamic, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
13
- import { fg } from '@atlaskit/platform-feature-flags';
11
+ import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
14
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
15
13
  import { pluginKey } from './pm-plugins/plugin-key';
16
14
  import { findSupportedNodeForBreakout } from './pm-plugins/utils/find-breakout-node';
17
15
  import LayoutButton from './ui/LayoutButton';
18
- var BreakoutViewOld = /*#__PURE__*/function () {
19
- function BreakoutViewOld(
20
- /**
21
- * Note: this is actually a PMMark -- however our version
22
- * of the prosemirror and prosemirror types mean using PMNode
23
- * is not problematic.
24
- */
25
- mark, view, pluginInjectionApi) {
26
- var _this = this,
27
- _pluginInjectionApi$w,
28
- _pluginInjectionApi$w2;
29
- _classCallCheck(this, BreakoutViewOld);
30
- _defineProperty(this, "updateWidth", function (widthState) {
31
- // we skip updating the width of breakout nodes if the editorView dom
32
- // element was hidden (to avoid breakout width and button thrashing
33
- // when an editor is hidden, re-rendered and unhidden).
34
- if (widthState === undefined || widthState.width === 0) {
35
- return;
36
- }
37
- var containerStyle = "";
38
- var contentStyle = "";
39
-
40
- // when editor padding = 32px the breakout padding is calculated as 96px (32 * 3)
41
- // the extra '32' ensures nodes with breakout applied default to line length its below default width
42
- var padding = fg('platform_editor_core_increase_full_page_guttering') ? akEditorGutterPaddingDynamic() * 2 + 32 : undefined;
43
- var breakoutWidthPx = calcBreakoutWidthPx(_this.mark.attrs.mode, widthState.width, padding);
44
- if (widthState.lineLength) {
45
- if (breakoutWidthPx < widthState.lineLength) {
46
- breakoutWidthPx = widthState.lineLength;
47
- }
48
- containerStyle += "\n transform: none;\n display: flex;\n justify-content: center;\n ";
49
-
50
- // There is a delay in the animation because widthState is delayed.
51
- // When the editor goes full width the animation for the editor
52
- // begins and finishes before widthState can update the new dimensions.
53
- contentStyle += "\n min-width: ".concat(breakoutWidthPx, "px;\n transition: min-width 0.5s ").concat(akEditorSwoopCubicBezier, ";\n ");
54
- } else {
55
- // fallback method
56
- // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
57
- //
58
- // this approach doesn't work well with position: fixed, so
59
- // it breaks things like sticky headers
60
- containerStyle += "width: ".concat(breakoutWidthPx, "px; transform: translateX(-50%); margin-left: 50%;");
61
- }
62
-
63
- // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
64
- // `ignoreMutation` life-cycle event. @see ED-9947
65
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
66
- var viewDomObserver = _this.view.domObserver;
67
- if (viewDomObserver && _this.view.dom) {
68
- viewDomObserver.stop();
69
- setTimeout(function () {
70
- viewDomObserver.start();
71
- }, 0);
72
- }
73
- if (typeof _this.dom.style.cssText !== 'undefined') {
74
- _this.dom.style.cssText = containerStyle;
75
- _this.contentDOM.style.cssText = contentStyle;
76
- } else {
77
- _this.dom.setAttribute('style', containerStyle);
78
- _this.contentDOM.setAttribute('style', contentStyle);
79
- }
80
- });
81
- var contentDOM = document.createElement('div');
82
- contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
83
- contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
84
- var dom = document.createElement('div');
85
- dom.className = BreakoutCssClassName.BREAKOUT_MARK;
86
- dom.setAttribute('data-layout', mark.attrs.mode);
87
- dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
88
- dom.appendChild(contentDOM);
89
- this.dom = dom;
90
- this.mark = mark;
91
- this.view = view;
92
- this.contentDOM = contentDOM;
93
- this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.onChange(function (_ref) {
94
- var nextSharedState = _ref.nextSharedState;
95
- return _this.updateWidth(nextSharedState);
96
- });
97
- this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.sharedState.currentState());
98
- }
99
- return _createClass(BreakoutViewOld, [{
100
- key: "destroy",
101
- value:
102
- // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
103
- // @see https://github.com/ProseMirror/prosemirror/issues/1082
104
- function destroy() {
105
- var _this$unsubscribe;
106
- (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
107
- }
108
- }]);
109
- }();
110
16
  var BreakoutView = /*#__PURE__*/_createClass(function BreakoutView(
111
17
  /**
112
18
  * Note: this is actually a PMMark -- however our version
@@ -159,8 +65,8 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
159
65
  }
160
66
  return newBreakoutNode || currentBreakoutNode ? true : false;
161
67
  }
162
- function createPlugin(pluginInjectionApi, _ref2) {
163
- var dispatch = _ref2.dispatch;
68
+ function createPlugin(pluginInjectionApi, _ref) {
69
+ var dispatch = _ref.dispatch;
164
70
  return new SafePlugin({
165
71
  state: {
166
72
  init: function init() {
@@ -188,22 +94,19 @@ function createPlugin(pluginInjectionApi, _ref2) {
188
94
  // See the following link for more details:
189
95
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
190
96
  breakout: function breakout(mark, view) {
191
- if (fg('platform_editor_breakout_use_css')) {
192
- return new BreakoutView(mark, view);
193
- }
194
- return new BreakoutViewOld(mark, view, pluginInjectionApi);
97
+ return new BreakoutView(mark, view);
195
98
  }
196
99
  }
197
100
  }
198
101
  });
199
102
  }
200
- var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
103
+ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
201
104
  var _breakoutState$breako, _breakoutState$breako2;
202
- var api = _ref3.api,
203
- editorView = _ref3.editorView,
204
- boundariesElement = _ref3.boundariesElement,
205
- scrollableElement = _ref3.scrollableElement,
206
- mountPoint = _ref3.mountPoint;
105
+ var api = _ref2.api,
106
+ editorView = _ref2.editorView,
107
+ boundariesElement = _ref2.boundariesElement,
108
+ scrollableElement = _ref2.scrollableElement,
109
+ mountPoint = _ref2.mountPoint;
207
110
  // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
208
111
  var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']),
209
112
  breakoutState = _useSharedPluginState.breakoutState,
@@ -226,9 +129,9 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
226
129
  isLivePage: isEditMode
227
130
  }) : null;
228
131
  };
229
- export var breakoutPlugin = function breakoutPlugin(_ref4) {
230
- var options = _ref4.config,
231
- api = _ref4.api;
132
+ export var breakoutPlugin = function breakoutPlugin(_ref3) {
133
+ var options = _ref3.config,
134
+ api = _ref3.api;
232
135
  return {
233
136
  name: 'breakout',
234
137
  pmPlugins: function pmPlugins() {
@@ -259,11 +162,11 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
259
162
  }
260
163
  return pluginState;
261
164
  },
262
- contentComponent: function contentComponent(_ref5) {
263
- var editorView = _ref5.editorView,
264
- popupsMountPoint = _ref5.popupsMountPoint,
265
- popupsBoundariesElement = _ref5.popupsBoundariesElement,
266
- popupsScrollableElement = _ref5.popupsScrollableElement;
165
+ contentComponent: function contentComponent(_ref4) {
166
+ var editorView = _ref4.editorView,
167
+ popupsMountPoint = _ref4.popupsMountPoint,
168
+ popupsBoundariesElement = _ref4.popupsBoundariesElement,
169
+ popupsScrollableElement = _ref4.popupsScrollableElement;
267
170
  // This is a bit crappy, but should be resolved once we move to a static schema.
268
171
  if (options && !options.allowBreakoutButton) {
269
172
  return null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "1.10.0",
3
+ "version": "1.10.1",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/adf-schema": "^46.1.0",
35
- "@atlaskit/editor-common": "^99.6.0",
35
+ "@atlaskit/editor-common": "^99.7.0",
36
36
  "@atlaskit/editor-plugin-block-controls": "^2.21.0",
37
37
  "@atlaskit/editor-plugin-editor-disabled": "^1.4.0",
38
38
  "@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
@@ -106,9 +106,6 @@
106
106
  },
107
107
  "platform_editor_core_increase_full_page_guttering": {
108
108
  "type": "boolean"
109
- },
110
- "platform_editor_breakout_use_css": {
111
- "type": "boolean"
112
109
  }
113
110
  }
114
111
  }