@atlaskit/editor-plugin-breakout 1.9.15 → 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.
- package/CHANGELOG.md +21 -0
- package/dist/cjs/breakoutPlugin.js +23 -131
- package/dist/es2019/breakoutPlugin.js +6 -114
- package/dist/esm/breakoutPlugin.js +24 -132
- package/dist/types/breakoutPluginType.d.ts +7 -6
- package/dist/types-ts4.5/breakoutPluginType.d.ts +7 -6
- package/package.json +11 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
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
|
+
|
|
12
|
+
## 1.10.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
|
|
17
|
+
[`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
|
|
18
|
+
Update `React` from v16 to v18
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 1.9.15
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -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,
|
|
170
|
-
var 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
|
-
|
|
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(
|
|
208
|
-
var _breakoutState$
|
|
209
|
-
var api =
|
|
210
|
-
editorView =
|
|
211
|
-
boundariesElement =
|
|
212
|
-
scrollableElement =
|
|
213
|
-
mountPoint =
|
|
110
|
+
var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
|
|
111
|
+
var _breakoutState$breako, _breakoutState$breako2;
|
|
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,
|
|
@@ -224,29 +127,18 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
|
|
|
224
127
|
}
|
|
225
128
|
var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
|
|
226
129
|
var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
|
|
227
|
-
|
|
228
|
-
var _breakoutState$breako, _breakoutState$breako2;
|
|
229
|
-
return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
|
|
230
|
-
editorView: editorView,
|
|
231
|
-
mountPoint: mountPoint,
|
|
232
|
-
boundariesElement: boundariesElement,
|
|
233
|
-
scrollableElement: scrollableElement,
|
|
234
|
-
node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
|
|
235
|
-
isLivePage: isEditMode
|
|
236
|
-
}) : null;
|
|
237
|
-
}
|
|
238
|
-
return !isViewMode ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
|
|
130
|
+
return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
|
|
239
131
|
editorView: editorView,
|
|
240
132
|
mountPoint: mountPoint,
|
|
241
133
|
boundariesElement: boundariesElement,
|
|
242
134
|
scrollableElement: scrollableElement,
|
|
243
|
-
node: (_breakoutState$
|
|
135
|
+
node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
|
|
244
136
|
isLivePage: isEditMode
|
|
245
137
|
}) : null;
|
|
246
138
|
};
|
|
247
|
-
var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(
|
|
248
|
-
var options =
|
|
249
|
-
api =
|
|
139
|
+
var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref3) {
|
|
140
|
+
var options = _ref3.config,
|
|
141
|
+
api = _ref3.api;
|
|
250
142
|
return {
|
|
251
143
|
name: 'breakout',
|
|
252
144
|
pmPlugins: function pmPlugins() {
|
|
@@ -277,13 +169,13 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
|
|
|
277
169
|
}
|
|
278
170
|
return pluginState;
|
|
279
171
|
},
|
|
280
|
-
contentComponent: function contentComponent(
|
|
281
|
-
var editorView =
|
|
282
|
-
popupsMountPoint =
|
|
283
|
-
popupsBoundariesElement =
|
|
284
|
-
popupsScrollableElement =
|
|
172
|
+
contentComponent: function contentComponent(_ref4) {
|
|
173
|
+
var editorView = _ref4.editorView,
|
|
174
|
+
popupsMountPoint = _ref4.popupsMountPoint,
|
|
175
|
+
popupsBoundariesElement = _ref4.popupsBoundariesElement,
|
|
176
|
+
popupsScrollableElement = _ref4.popupsScrollableElement;
|
|
285
177
|
// This is a bit crappy, but should be resolved once we move to a static schema.
|
|
286
|
-
if (options && !options.allowBreakoutButton
|
|
178
|
+
if (options && !options.allowBreakoutButton) {
|
|
287
179
|
return null;
|
|
288
180
|
}
|
|
289
181
|
return /*#__PURE__*/_react.default.createElement(LayoutButtonWrapper, {
|
|
@@ -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 {
|
|
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
|
-
|
|
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
|
}
|
|
@@ -202,7 +105,7 @@ const LayoutButtonWrapper = ({
|
|
|
202
105
|
scrollableElement,
|
|
203
106
|
mountPoint
|
|
204
107
|
}) => {
|
|
205
|
-
var _breakoutState$
|
|
108
|
+
var _breakoutState$breako, _breakoutState$breako2;
|
|
206
109
|
// Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
|
|
207
110
|
const {
|
|
208
111
|
breakoutState,
|
|
@@ -217,23 +120,12 @@ const LayoutButtonWrapper = ({
|
|
|
217
120
|
}
|
|
218
121
|
const isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
|
|
219
122
|
const isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
|
|
220
|
-
|
|
221
|
-
var _breakoutState$breako, _breakoutState$breako2;
|
|
222
|
-
return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
|
|
223
|
-
editorView: editorView,
|
|
224
|
-
mountPoint: mountPoint,
|
|
225
|
-
boundariesElement: boundariesElement,
|
|
226
|
-
scrollableElement: scrollableElement,
|
|
227
|
-
node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
|
|
228
|
-
isLivePage: isEditMode
|
|
229
|
-
}) : null;
|
|
230
|
-
}
|
|
231
|
-
return !isViewMode ? /*#__PURE__*/React.createElement(LayoutButton, {
|
|
123
|
+
return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
|
|
232
124
|
editorView: editorView,
|
|
233
125
|
mountPoint: mountPoint,
|
|
234
126
|
boundariesElement: boundariesElement,
|
|
235
127
|
scrollableElement: scrollableElement,
|
|
236
|
-
node: (_breakoutState$
|
|
128
|
+
node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
|
|
237
129
|
isLivePage: isEditMode
|
|
238
130
|
}) : null;
|
|
239
131
|
};
|
|
@@ -275,7 +167,7 @@ export const breakoutPlugin = ({
|
|
|
275
167
|
popupsScrollableElement
|
|
276
168
|
}) {
|
|
277
169
|
// This is a bit crappy, but should be resolved once we move to a static schema.
|
|
278
|
-
if (options && !options.allowBreakoutButton
|
|
170
|
+
if (options && !options.allowBreakoutButton) {
|
|
279
171
|
return null;
|
|
280
172
|
}
|
|
281
173
|
return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
|
|
@@ -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 {
|
|
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,
|
|
163
|
-
var 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
|
-
|
|
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(
|
|
201
|
-
var _breakoutState$
|
|
202
|
-
var api =
|
|
203
|
-
editorView =
|
|
204
|
-
boundariesElement =
|
|
205
|
-
scrollableElement =
|
|
206
|
-
mountPoint =
|
|
103
|
+
var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
|
|
104
|
+
var _breakoutState$breako, _breakoutState$breako2;
|
|
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,
|
|
@@ -217,29 +120,18 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
|
|
|
217
120
|
}
|
|
218
121
|
var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
|
|
219
122
|
var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
|
|
220
|
-
|
|
221
|
-
var _breakoutState$breako, _breakoutState$breako2;
|
|
222
|
-
return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
|
|
223
|
-
editorView: editorView,
|
|
224
|
-
mountPoint: mountPoint,
|
|
225
|
-
boundariesElement: boundariesElement,
|
|
226
|
-
scrollableElement: scrollableElement,
|
|
227
|
-
node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
|
|
228
|
-
isLivePage: isEditMode
|
|
229
|
-
}) : null;
|
|
230
|
-
}
|
|
231
|
-
return !isViewMode ? /*#__PURE__*/React.createElement(LayoutButton, {
|
|
123
|
+
return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
|
|
232
124
|
editorView: editorView,
|
|
233
125
|
mountPoint: mountPoint,
|
|
234
126
|
boundariesElement: boundariesElement,
|
|
235
127
|
scrollableElement: scrollableElement,
|
|
236
|
-
node: (_breakoutState$
|
|
128
|
+
node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
|
|
237
129
|
isLivePage: isEditMode
|
|
238
130
|
}) : null;
|
|
239
131
|
};
|
|
240
|
-
export var breakoutPlugin = function breakoutPlugin(
|
|
241
|
-
var options =
|
|
242
|
-
api =
|
|
132
|
+
export var breakoutPlugin = function breakoutPlugin(_ref3) {
|
|
133
|
+
var options = _ref3.config,
|
|
134
|
+
api = _ref3.api;
|
|
243
135
|
return {
|
|
244
136
|
name: 'breakout',
|
|
245
137
|
pmPlugins: function pmPlugins() {
|
|
@@ -270,13 +162,13 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
|
|
|
270
162
|
}
|
|
271
163
|
return pluginState;
|
|
272
164
|
},
|
|
273
|
-
contentComponent: function contentComponent(
|
|
274
|
-
var editorView =
|
|
275
|
-
popupsMountPoint =
|
|
276
|
-
popupsBoundariesElement =
|
|
277
|
-
popupsScrollableElement =
|
|
165
|
+
contentComponent: function contentComponent(_ref4) {
|
|
166
|
+
var editorView = _ref4.editorView,
|
|
167
|
+
popupsMountPoint = _ref4.popupsMountPoint,
|
|
168
|
+
popupsBoundariesElement = _ref4.popupsBoundariesElement,
|
|
169
|
+
popupsScrollableElement = _ref4.popupsScrollableElement;
|
|
278
170
|
// This is a bit crappy, but should be resolved once we move to a static schema.
|
|
279
|
-
if (options && !options.allowBreakoutButton
|
|
171
|
+
if (options && !options.allowBreakoutButton) {
|
|
280
172
|
return null;
|
|
281
173
|
}
|
|
282
174
|
return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
|
|
@@ -10,13 +10,14 @@ export interface BreakoutPluginState {
|
|
|
10
10
|
export interface BreakoutPluginOptions {
|
|
11
11
|
allowBreakoutButton?: boolean;
|
|
12
12
|
}
|
|
13
|
+
export type BreakoutPluginDependencies = [
|
|
14
|
+
WidthPlugin,
|
|
15
|
+
OptionalPlugin<EditorViewModePlugin>,
|
|
16
|
+
OptionalPlugin<EditorDisabledPlugin>,
|
|
17
|
+
OptionalPlugin<BlockControlsPlugin>
|
|
18
|
+
];
|
|
13
19
|
export type BreakoutPlugin = NextEditorPlugin<'breakout', {
|
|
14
20
|
pluginConfiguration: BreakoutPluginOptions | undefined;
|
|
15
|
-
dependencies:
|
|
16
|
-
WidthPlugin,
|
|
17
|
-
OptionalPlugin<EditorViewModePlugin>,
|
|
18
|
-
OptionalPlugin<EditorDisabledPlugin>,
|
|
19
|
-
OptionalPlugin<BlockControlsPlugin>
|
|
20
|
-
];
|
|
21
|
+
dependencies: BreakoutPluginDependencies;
|
|
21
22
|
sharedState: Partial<BreakoutPluginState>;
|
|
22
23
|
}>;
|
|
@@ -10,13 +10,14 @@ export interface BreakoutPluginState {
|
|
|
10
10
|
export interface BreakoutPluginOptions {
|
|
11
11
|
allowBreakoutButton?: boolean;
|
|
12
12
|
}
|
|
13
|
+
export type BreakoutPluginDependencies = [
|
|
14
|
+
WidthPlugin,
|
|
15
|
+
OptionalPlugin<EditorViewModePlugin>,
|
|
16
|
+
OptionalPlugin<EditorDisabledPlugin>,
|
|
17
|
+
OptionalPlugin<BlockControlsPlugin>
|
|
18
|
+
];
|
|
13
19
|
export type BreakoutPlugin = NextEditorPlugin<'breakout', {
|
|
14
20
|
pluginConfiguration: BreakoutPluginOptions | undefined;
|
|
15
|
-
dependencies:
|
|
16
|
-
WidthPlugin,
|
|
17
|
-
OptionalPlugin<EditorViewModePlugin>,
|
|
18
|
-
OptionalPlugin<EditorDisabledPlugin>,
|
|
19
|
-
OptionalPlugin<BlockControlsPlugin>
|
|
20
|
-
];
|
|
21
|
+
dependencies: BreakoutPluginDependencies;
|
|
21
22
|
sharedState: Partial<BreakoutPluginState>;
|
|
22
23
|
}>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-breakout",
|
|
3
|
-
"version": "1.
|
|
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,18 +32,18 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/adf-schema": "^46.1.0",
|
|
35
|
-
"@atlaskit/editor-common": "^99.
|
|
36
|
-
"@atlaskit/editor-plugin-block-controls": "^2.
|
|
37
|
-
"@atlaskit/editor-plugin-editor-disabled": "^1.
|
|
35
|
+
"@atlaskit/editor-common": "^99.7.0",
|
|
36
|
+
"@atlaskit/editor-plugin-block-controls": "^2.21.0",
|
|
37
|
+
"@atlaskit/editor-plugin-editor-disabled": "^1.4.0",
|
|
38
38
|
"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
|
|
39
39
|
"@atlaskit/editor-plugin-width": "^2.0.0",
|
|
40
40
|
"@atlaskit/editor-prosemirror": "6.2.1",
|
|
41
41
|
"@atlaskit/editor-shared-styles": "^3.2.0",
|
|
42
|
-
"@atlaskit/icon": "^23.
|
|
42
|
+
"@atlaskit/icon": "^23.5.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
44
|
-
"@atlaskit/theme": "^14.
|
|
45
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
46
|
-
"@atlaskit/tokens": "^3.
|
|
44
|
+
"@atlaskit/theme": "^14.1.0",
|
|
45
|
+
"@atlaskit/tmp-editor-statsig": "^2.41.0",
|
|
46
|
+
"@atlaskit/tokens": "^3.3.0",
|
|
47
47
|
"@babel/runtime": "^7.0.0",
|
|
48
48
|
"@emotion/react": "^11.7.1"
|
|
49
49
|
},
|
|
@@ -55,12 +55,12 @@
|
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@af/integration-testing": "*",
|
|
57
57
|
"@af/visual-regression": "*",
|
|
58
|
-
"@atlaskit/editor-plugin-code-block": "^3.
|
|
58
|
+
"@atlaskit/editor-plugin-code-block": "^3.6.0",
|
|
59
59
|
"@atlaskit/editor-plugin-composition": "^1.2.0",
|
|
60
|
-
"@atlaskit/editor-plugin-decorations": "^1.
|
|
60
|
+
"@atlaskit/editor-plugin-decorations": "^1.4.0",
|
|
61
61
|
"@atlaskit/ssr": "*",
|
|
62
62
|
"@atlaskit/visual-regression": "*",
|
|
63
|
-
"@testing-library/react": "^
|
|
63
|
+
"@testing-library/react": "^13.4.0",
|
|
64
64
|
"typescript": "~5.4.2",
|
|
65
65
|
"wait-for-expect": "^1.2.0"
|
|
66
66
|
},
|
|
@@ -106,12 +106,6 @@
|
|
|
106
106
|
},
|
|
107
107
|
"platform_editor_core_increase_full_page_guttering": {
|
|
108
108
|
"type": "boolean"
|
|
109
|
-
},
|
|
110
|
-
"platform_editor_react_editor_view_react_18": {
|
|
111
|
-
"type": "boolean"
|
|
112
|
-
},
|
|
113
|
-
"platform_editor_breakout_use_css": {
|
|
114
|
-
"type": "boolean"
|
|
115
109
|
}
|
|
116
110
|
}
|
|
117
111
|
}
|