@atlaskit/editor-plugin-breakout 1.7.6 → 1.7.7

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 +12 -0
  2. package/dist/cjs/plugin.js +45 -7
  3. package/dist/es2019/plugin.js +43 -4
  4. package/dist/esm/plugin.js +46 -8
  5. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 1.7.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#139334](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139334)
8
+ [`30793649657c0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/30793649657c0) -
9
+ [HOT-111629] We had an incident where the last character disappears when hitting the enter key on
10
+ windows OS for Korean characters. Bumping to prosemirror-view@1.34.2 for the fix.
11
+ - [#137474](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137474)
12
+ [`7ca1c34ebf2d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ca1c34ebf2d5) -
13
+ make breakout to use css to fix SSR issue on live edit page
14
+
3
15
  ## 1.7.6
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/plugin.js CHANGED
@@ -21,8 +21,8 @@ var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
21
21
  var _findBreakoutNode = require("./utils/find-breakout-node");
22
22
  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; }
23
23
  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; }
24
- var BreakoutView = /*#__PURE__*/function () {
25
- function BreakoutView(
24
+ var BreakoutViewOld = /*#__PURE__*/function () {
25
+ function BreakoutViewOld(
26
26
  /**
27
27
  * Note: this is actually a PMMark -- however our version
28
28
  * of the prosemirror and prosemirror types mean using PMNode
@@ -32,7 +32,7 @@ var BreakoutView = /*#__PURE__*/function () {
32
32
  var _this = this,
33
33
  _pluginInjectionApi$w,
34
34
  _pluginInjectionApi$w2;
35
- (0, _classCallCheck2.default)(this, BreakoutView);
35
+ (0, _classCallCheck2.default)(this, BreakoutViewOld);
36
36
  (0, _defineProperty2.default)(this, "updateWidth", function (widthState) {
37
37
  // we skip updating the width of breakout nodes if the editorView dom
38
38
  // element was hidden (to avoid breakout width and button thrashing
@@ -45,7 +45,7 @@ var BreakoutView = /*#__PURE__*/function () {
45
45
 
46
46
  // when editor padding = 32px the breakout padding is calculated as 96px (32 * 3)
47
47
  // the extra '32' ensures nodes with breakout applied default to line length its below default width
48
- var padding = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.core.increase-full-page-guttering') ? (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 + 32 : undefined;
48
+ var padding = (0, _platformFeatureFlags.fg)('platform.editor.core.increase-full-page-guttering') ? (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 + 32 : undefined;
49
49
  var breakoutWidthPx = (0, _utils.calcBreakoutWidthPx)(_this.mark.attrs.mode, widthState.width, padding);
50
50
  if (widthState.lineLength) {
51
51
  if (breakoutWidthPx < widthState.lineLength) {
@@ -86,9 +86,11 @@ var BreakoutView = /*#__PURE__*/function () {
86
86
  });
87
87
  var contentDOM = document.createElement('div');
88
88
  contentDOM.className = _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM;
89
+ contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
89
90
  var dom = document.createElement('div');
90
91
  dom.className = _styles.BreakoutCssClassName.BREAKOUT_MARK;
91
92
  dom.setAttribute('data-layout', mark.attrs.mode);
93
+ dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
92
94
  dom.appendChild(contentDOM);
93
95
  this.dom = dom;
94
96
  this.mark = mark;
@@ -100,7 +102,7 @@ var BreakoutView = /*#__PURE__*/function () {
100
102
  });
101
103
  this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.sharedState.currentState());
102
104
  }
103
- (0, _createClass2.default)(BreakoutView, [{
105
+ (0, _createClass2.default)(BreakoutViewOld, [{
104
106
  key: "destroy",
105
107
  value:
106
108
  // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
@@ -110,8 +112,41 @@ var BreakoutView = /*#__PURE__*/function () {
110
112
  (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
111
113
  }
112
114
  }]);
113
- return BreakoutView;
115
+ return BreakoutViewOld;
114
116
  }();
117
+ var BreakoutView = /*#__PURE__*/(0, _createClass2.default)(function BreakoutView(
118
+ /**
119
+ * Note: this is actually a PMMark -- however our version
120
+ * of the prosemirror and prosemirror types mean using PMNode
121
+ * is not problematic.
122
+ */
123
+ mark, view) {
124
+ (0, _classCallCheck2.default)(this, BreakoutView);
125
+ var dom = document.createElement('div');
126
+ var contentDOM = document.createElement('div');
127
+ contentDOM.className = _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM;
128
+ contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
129
+ dom.className = _styles.BreakoutCssClassName.BREAKOUT_MARK;
130
+ dom.setAttribute('data-layout', mark.attrs.mode);
131
+ dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
132
+ dom.appendChild(contentDOM);
133
+ dom.style.transform = 'none';
134
+ dom.style.display = 'flex';
135
+ dom.style.justifyContent = 'center';
136
+ contentDOM.style.transition = "min-width 0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier);
137
+
138
+ // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
139
+ if (mark.attrs.mode === 'full-width') {
140
+ 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))))";
141
+ }
142
+ if (mark.attrs.mode === 'wide') {
143
+ 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))))";
144
+ }
145
+ this.dom = dom;
146
+ this.mark = mark;
147
+ this.view = view;
148
+ this.contentDOM = contentDOM;
149
+ });
115
150
  function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
116
151
  if (newBreakoutNode && currentBreakoutNode) {
117
152
  return newBreakoutNode !== currentBreakoutNode;
@@ -147,7 +182,10 @@ function createPlugin(pluginInjectionApi, _ref2) {
147
182
  // See the following link for more details:
148
183
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
149
184
  breakout: function breakout(mark, view) {
150
- return new BreakoutView(mark, view, pluginInjectionApi);
185
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css')) {
186
+ return new BreakoutView(mark, view);
187
+ }
188
+ return new BreakoutViewOld(mark, view, pluginInjectionApi);
151
189
  }
152
190
  }
153
191
  }
package/dist/es2019/plugin.js CHANGED
@@ -6,11 +6,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
6
6
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
7
7
  import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
8
8
  import { akEditorGutterPaddingDynamic, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
9
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { pluginKey } from './plugin-key';
11
11
  import LayoutButton from './ui/LayoutButton';
12
12
  import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
13
- class BreakoutView {
13
+ class BreakoutViewOld {
14
14
  constructor(
15
15
  /**
16
16
  * Note: this is actually a PMMark -- however our version
@@ -31,7 +31,7 @@ class BreakoutView {
31
31
 
32
32
  // when editor padding = 32px the breakout padding is calculated as 96px (32 * 3)
33
33
  // the extra '32' ensures nodes with breakout applied default to line length its below default width
34
- const padding = getBooleanFF('platform.editor.core.increase-full-page-guttering') ? akEditorGutterPaddingDynamic() * 2 + 32 : undefined;
34
+ const padding = fg('platform.editor.core.increase-full-page-guttering') ? akEditorGutterPaddingDynamic() * 2 + 32 : undefined;
35
35
  let breakoutWidthPx = calcBreakoutWidthPx(this.mark.attrs.mode, widthState.width, padding);
36
36
  if (widthState.lineLength) {
37
37
  if (breakoutWidthPx < widthState.lineLength) {
@@ -79,9 +79,11 @@ class BreakoutView {
79
79
  });
80
80
  const contentDOM = document.createElement('div');
81
81
  contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
82
+ contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
82
83
  const dom = document.createElement('div');
83
84
  dom.className = BreakoutCssClassName.BREAKOUT_MARK;
84
85
  dom.setAttribute('data-layout', mark.attrs.mode);
86
+ dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
85
87
  dom.appendChild(contentDOM);
86
88
  this.dom = dom;
87
89
  this.mark = mark;
@@ -99,6 +101,40 @@ class BreakoutView {
99
101
  (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
100
102
  }
101
103
  }
104
+ class BreakoutView {
105
+ constructor(
106
+ /**
107
+ * Note: this is actually a PMMark -- however our version
108
+ * of the prosemirror and prosemirror types mean using PMNode
109
+ * is not problematic.
110
+ */
111
+ mark, view) {
112
+ const dom = document.createElement('div');
113
+ const contentDOM = document.createElement('div');
114
+ contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
115
+ contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
116
+ dom.className = BreakoutCssClassName.BREAKOUT_MARK;
117
+ dom.setAttribute('data-layout', mark.attrs.mode);
118
+ dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
119
+ dom.appendChild(contentDOM);
120
+ dom.style.transform = 'none';
121
+ dom.style.display = 'flex';
122
+ dom.style.justifyContent = 'center';
123
+ contentDOM.style.transition = `min-width 0.5s ${akEditorSwoopCubicBezier}`;
124
+
125
+ // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
126
+ if (mark.attrs.mode === 'full-width') {
127
+ 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))))`;
128
+ }
129
+ if (mark.attrs.mode === 'wide') {
130
+ 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))))`;
131
+ }
132
+ this.dom = dom;
133
+ this.mark = mark;
134
+ this.view = view;
135
+ this.contentDOM = contentDOM;
136
+ }
137
+ }
102
138
  function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
103
139
  if (newBreakoutNode && currentBreakoutNode) {
104
140
  return newBreakoutNode !== currentBreakoutNode;
@@ -136,7 +172,10 @@ function createPlugin(pluginInjectionApi, {
136
172
  // See the following link for more details:
137
173
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
138
174
  breakout: (mark, view) => {
139
- return new BreakoutView(mark, view, pluginInjectionApi);
175
+ if (fg('platform_editor_breakout_use_css')) {
176
+ return new BreakoutView(mark, view);
177
+ }
178
+ return new BreakoutViewOld(mark, view, pluginInjectionApi);
140
179
  }
141
180
  }
142
181
  }
package/dist/esm/plugin.js CHANGED
@@ -10,12 +10,12 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
10
10
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
11
11
  import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
12
12
  import { akEditorGutterPaddingDynamic, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
13
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
14
14
  import { pluginKey } from './plugin-key';
15
15
  import LayoutButton from './ui/LayoutButton';
16
16
  import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
17
- var BreakoutView = /*#__PURE__*/function () {
18
- function BreakoutView(
17
+ var BreakoutViewOld = /*#__PURE__*/function () {
18
+ function BreakoutViewOld(
19
19
  /**
20
20
  * Note: this is actually a PMMark -- however our version
21
21
  * of the prosemirror and prosemirror types mean using PMNode
@@ -25,7 +25,7 @@ var BreakoutView = /*#__PURE__*/function () {
25
25
  var _this = this,
26
26
  _pluginInjectionApi$w,
27
27
  _pluginInjectionApi$w2;
28
- _classCallCheck(this, BreakoutView);
28
+ _classCallCheck(this, BreakoutViewOld);
29
29
  _defineProperty(this, "updateWidth", function (widthState) {
30
30
  // we skip updating the width of breakout nodes if the editorView dom
31
31
  // element was hidden (to avoid breakout width and button thrashing
@@ -38,7 +38,7 @@ var BreakoutView = /*#__PURE__*/function () {
38
38
 
39
39
  // when editor padding = 32px the breakout padding is calculated as 96px (32 * 3)
40
40
  // the extra '32' ensures nodes with breakout applied default to line length its below default width
41
- var padding = getBooleanFF('platform.editor.core.increase-full-page-guttering') ? akEditorGutterPaddingDynamic() * 2 + 32 : undefined;
41
+ var padding = fg('platform.editor.core.increase-full-page-guttering') ? akEditorGutterPaddingDynamic() * 2 + 32 : undefined;
42
42
  var breakoutWidthPx = calcBreakoutWidthPx(_this.mark.attrs.mode, widthState.width, padding);
43
43
  if (widthState.lineLength) {
44
44
  if (breakoutWidthPx < widthState.lineLength) {
@@ -79,9 +79,11 @@ var BreakoutView = /*#__PURE__*/function () {
79
79
  });
80
80
  var contentDOM = document.createElement('div');
81
81
  contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
82
+ contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
82
83
  var dom = document.createElement('div');
83
84
  dom.className = BreakoutCssClassName.BREAKOUT_MARK;
84
85
  dom.setAttribute('data-layout', mark.attrs.mode);
86
+ dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
85
87
  dom.appendChild(contentDOM);
86
88
  this.dom = dom;
87
89
  this.mark = mark;
@@ -93,7 +95,7 @@ var BreakoutView = /*#__PURE__*/function () {
93
95
  });
94
96
  this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.sharedState.currentState());
95
97
  }
96
- _createClass(BreakoutView, [{
98
+ _createClass(BreakoutViewOld, [{
97
99
  key: "destroy",
98
100
  value:
99
101
  // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
@@ -103,8 +105,41 @@ var BreakoutView = /*#__PURE__*/function () {
103
105
  (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
104
106
  }
105
107
  }]);
106
- return BreakoutView;
108
+ return BreakoutViewOld;
107
109
  }();
110
+ var BreakoutView = /*#__PURE__*/_createClass(function BreakoutView(
111
+ /**
112
+ * Note: this is actually a PMMark -- however our version
113
+ * of the prosemirror and prosemirror types mean using PMNode
114
+ * is not problematic.
115
+ */
116
+ mark, view) {
117
+ _classCallCheck(this, BreakoutView);
118
+ var dom = document.createElement('div');
119
+ var contentDOM = document.createElement('div');
120
+ contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
121
+ contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
122
+ dom.className = BreakoutCssClassName.BREAKOUT_MARK;
123
+ dom.setAttribute('data-layout', mark.attrs.mode);
124
+ dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
125
+ dom.appendChild(contentDOM);
126
+ dom.style.transform = 'none';
127
+ dom.style.display = 'flex';
128
+ dom.style.justifyContent = 'center';
129
+ contentDOM.style.transition = "min-width 0.5s ".concat(akEditorSwoopCubicBezier);
130
+
131
+ // original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
132
+ if (mark.attrs.mode === 'full-width') {
133
+ 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))))";
134
+ }
135
+ if (mark.attrs.mode === 'wide') {
136
+ 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))))";
137
+ }
138
+ this.dom = dom;
139
+ this.mark = mark;
140
+ this.view = view;
141
+ this.contentDOM = contentDOM;
142
+ });
108
143
  function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
109
144
  if (newBreakoutNode && currentBreakoutNode) {
110
145
  return newBreakoutNode !== currentBreakoutNode;
@@ -140,7 +175,10 @@ function createPlugin(pluginInjectionApi, _ref2) {
140
175
  // See the following link for more details:
141
176
  // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
142
177
  breakout: function breakout(mark, view) {
143
- return new BreakoutView(mark, view, pluginInjectionApi);
178
+ if (fg('platform_editor_breakout_use_css')) {
179
+ return new BreakoutView(mark, view);
180
+ }
181
+ return new BreakoutViewOld(mark, view, pluginInjectionApi);
144
182
  }
145
183
  }
146
184
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "1.7.6",
3
+ "version": "1.7.7",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/editor-common": "^89.0.0",
36
36
  "@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
37
37
  "@atlaskit/editor-plugin-width": "^1.3.0",
38
- "@atlaskit/editor-prosemirror": "5.0.1",
38
+ "@atlaskit/editor-prosemirror": "6.0.0",
39
39
  "@atlaskit/editor-shared-styles": "^2.13.0",
40
40
  "@atlaskit/icon": "^22.16.0",
41
41
  "@atlaskit/platform-feature-flags": "^0.3.0",
@@ -106,6 +106,9 @@
106
106
  },
107
107
  "editor_code_block_wrapping_language_change_bug": {
108
108
  "type": "boolean"
109
+ },
110
+ "platform_editor_breakout_use_css": {
111
+ "type": "boolean"
109
112
  }
110
113
  }
111
114
  }