@atlaskit/editor-plugin-breakout 24.0.2 → 24.0.4
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 +18 -0
- package/dist/cjs/breakoutPlugin.js +21 -229
- package/dist/cjs/pm-plugins/utils/single-player-expand.js +6 -17
- package/dist/es2019/breakoutPlugin.js +13 -211
- package/dist/es2019/pm-plugins/utils/single-player-expand.js +6 -17
- package/dist/esm/breakoutPlugin.js +21 -227
- package/dist/esm/pm-plugins/utils/single-player-expand.js +6 -17
- package/package.json +2 -2
- package/dist/cjs/editor-commands/remove-breakout.js +0 -41
- package/dist/cjs/editor-commands/set-breakout-mode.js +0 -49
- package/dist/cjs/pm-plugins/plugin-key.js +0 -11
- package/dist/cjs/pm-plugins/utils/find-breakout-node.js +0 -42
- package/dist/cjs/pm-plugins/utils/get-breakout-mode.js +0 -24
- package/dist/cjs/pm-plugins/utils/is-breakout-mark-allowed.js +0 -27
- package/dist/cjs/pm-plugins/utils/is-supported-node.js +0 -20
- package/dist/cjs/ui/LayoutButton.js +0 -176
- package/dist/es2019/editor-commands/remove-breakout.js +0 -33
- package/dist/es2019/editor-commands/set-breakout-mode.js +0 -43
- package/dist/es2019/pm-plugins/plugin-key.js +0 -3
- package/dist/es2019/pm-plugins/utils/find-breakout-node.js +0 -37
- package/dist/es2019/pm-plugins/utils/get-breakout-mode.js +0 -17
- package/dist/es2019/pm-plugins/utils/is-breakout-mark-allowed.js +0 -22
- package/dist/es2019/pm-plugins/utils/is-supported-node.js +0 -14
- package/dist/es2019/ui/LayoutButton.js +0 -171
- package/dist/esm/editor-commands/remove-breakout.js +0 -35
- package/dist/esm/editor-commands/set-breakout-mode.js +0 -43
- package/dist/esm/pm-plugins/plugin-key.js +0 -5
- package/dist/esm/pm-plugins/utils/find-breakout-node.js +0 -37
- package/dist/esm/pm-plugins/utils/get-breakout-mode.js +0 -19
- package/dist/esm/pm-plugins/utils/is-breakout-mark-allowed.js +0 -22
- package/dist/esm/pm-plugins/utils/is-supported-node.js +0 -14
- package/dist/esm/ui/LayoutButton.js +0 -166
- package/dist/types/editor-commands/remove-breakout.d.ts +0 -2
- package/dist/types/editor-commands/set-breakout-mode.d.ts +0 -2
- package/dist/types/pm-plugins/plugin-key.d.ts +0 -5
- package/dist/types/pm-plugins/utils/find-breakout-node.d.ts +0 -9
- package/dist/types/pm-plugins/utils/get-breakout-mode.d.ts +0 -7
- package/dist/types/pm-plugins/utils/is-breakout-mark-allowed.d.ts +0 -9
- package/dist/types/pm-plugins/utils/is-supported-node.d.ts +0 -6
- package/dist/types/ui/LayoutButton.d.ts +0 -20
|
@@ -1,202 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
5
|
-
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; }
|
|
6
|
-
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; }
|
|
7
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React from 'react';
|
|
8
2
|
import { breakout } from '@atlaskit/adf-schema/breakout';
|
|
9
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
10
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
11
|
-
import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
|
|
12
|
-
import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
|
|
13
|
-
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
14
|
-
import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
15
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
16
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
17
|
-
import { pluginKey } from './pm-plugins/plugin-key';
|
|
18
3
|
import { createResizingPlugin, resizingPluginKey } from './pm-plugins/resizing-plugin';
|
|
19
|
-
import { findSupportedNodeForBreakout } from './pm-plugins/utils/find-breakout-node';
|
|
20
|
-
import { getBreakoutMode } from './pm-plugins/utils/get-breakout-mode';
|
|
21
4
|
import { GuidelineLabel } from './ui/GuidelineLabel';
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
* Note: this is actually a PMMark -- however our version
|
|
26
|
-
* of the prosemirror and prosemirror types mean using PMNode
|
|
27
|
-
* is not problematic.
|
|
28
|
-
*/
|
|
29
|
-
mark, view, appearance) {
|
|
30
|
-
_classCallCheck(this, BreakoutView);
|
|
31
|
-
var dom = document.createElement('div');
|
|
32
|
-
var contentDOM = document.createElement('div');
|
|
33
|
-
contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
|
|
34
|
-
contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
|
|
35
|
-
dom.className = BreakoutCssClassName.BREAKOUT_MARK;
|
|
36
|
-
dom.setAttribute('data-layout', mark.attrs.mode);
|
|
37
|
-
dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
|
|
38
|
-
dom.appendChild(contentDOM);
|
|
39
|
-
dom.style.transform = 'none';
|
|
40
|
-
dom.style.display = 'flex';
|
|
41
|
-
dom.style.justifyContent = 'center';
|
|
42
|
-
contentDOM.style.transition = "min-width 0.5s ".concat(akEditorSwoopCubicBezier);
|
|
43
|
-
if (editorExperiment('advanced_layouts', true)) {
|
|
44
|
-
if (mark.attrs.width) {
|
|
45
|
-
contentDOM.style.minWidth = "min(".concat(mark.attrs.width, "px, calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
|
|
46
|
-
} else {
|
|
47
|
-
// original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
|
|
48
|
-
if (mark.attrs.mode === 'full-width') {
|
|
49
|
-
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))))";
|
|
50
|
-
}
|
|
51
|
-
if (mark.attrs.mode === 'wide') {
|
|
52
|
-
if (appearance && appearance === 'full-width' && editorExperiment('single_column_layouts', true) && true) {
|
|
53
|
-
contentDOM.style.minWidth = "min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))";
|
|
54
|
-
} else {
|
|
55
|
-
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))))";
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
} else {
|
|
60
|
-
// original breakout algorithm is in calcBreakoutWidth from platform/packages/editor/editor-common/src/utils/breakout.ts
|
|
61
|
-
if (mark.attrs.mode === 'full-width') {
|
|
62
|
-
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))))";
|
|
63
|
-
}
|
|
64
|
-
if (mark.attrs.mode === 'wide') {
|
|
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
|
-
}
|
|
67
|
-
}
|
|
68
|
-
this.dom = dom;
|
|
69
|
-
this.mark = mark;
|
|
70
|
-
this.view = view;
|
|
71
|
-
this.contentDOM = contentDOM;
|
|
72
|
-
});
|
|
73
|
-
function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
|
|
74
|
-
if (newBreakoutNode && currentBreakoutNode) {
|
|
75
|
-
return newBreakoutNode !== currentBreakoutNode;
|
|
76
|
-
}
|
|
77
|
-
return newBreakoutNode || currentBreakoutNode ? true : false;
|
|
78
|
-
}
|
|
79
|
-
function createPlugin(api, _ref, appearance) {
|
|
80
|
-
var dispatch = _ref.dispatch;
|
|
81
|
-
return new SafePlugin({
|
|
82
|
-
state: {
|
|
83
|
-
init: function init() {
|
|
84
|
-
return {
|
|
85
|
-
breakoutNode: undefined,
|
|
86
|
-
activeGuidelineKey: undefined
|
|
87
|
-
};
|
|
88
|
-
},
|
|
89
|
-
apply: function apply(tr, pluginState) {
|
|
90
|
-
var breakoutNode = findSupportedNodeForBreakout(tr.selection);
|
|
91
|
-
if (shouldPluginStateUpdate(breakoutNode, pluginState.breakoutNode)) {
|
|
92
|
-
var nextPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
93
|
-
breakoutNode: breakoutNode
|
|
94
|
-
});
|
|
95
|
-
dispatch(pluginKey, nextPluginState);
|
|
96
|
-
return nextPluginState;
|
|
97
|
-
}
|
|
98
|
-
return pluginState;
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
key: pluginKey,
|
|
102
|
-
props: {
|
|
103
|
-
nodeViews: {
|
|
104
|
-
// Note: When we upgrade to prosemirror 1.27.2 -- we should
|
|
105
|
-
// move this to markViews.
|
|
106
|
-
// See the following link for more details:
|
|
107
|
-
// https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
|
|
108
|
-
breakout: function breakout(mark, view) {
|
|
109
|
-
return new BreakoutView(mark, view, appearance);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
|
|
116
|
-
var api = _ref2.api,
|
|
117
|
-
editorView = _ref2.editorView,
|
|
118
|
-
boundariesElement = _ref2.boundariesElement,
|
|
119
|
-
scrollableElement = _ref2.scrollableElement,
|
|
120
|
-
mountPoint = _ref2.mountPoint;
|
|
121
|
-
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorViewMode', 'editorDisabled', 'blockControls'], function (states) {
|
|
122
|
-
var _states$blockControls, _states$blockControls2, _states$editorViewMod, _states$editorDisable;
|
|
123
|
-
return {
|
|
124
|
-
isDragging: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isDragging,
|
|
125
|
-
isPMDragging: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isPMDragging,
|
|
126
|
-
mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
|
|
127
|
-
editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
|
|
128
|
-
};
|
|
129
|
-
}),
|
|
130
|
-
editorDisabled = _useSharedPluginState.editorDisabled,
|
|
131
|
-
isDragging = _useSharedPluginState.isDragging,
|
|
132
|
-
isPMDragging = _useSharedPluginState.isPMDragging,
|
|
133
|
-
mode = _useSharedPluginState.mode;
|
|
134
|
-
var _useState = useState(false),
|
|
135
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
136
|
-
breakoutNodePresent = _useState2[0],
|
|
137
|
-
setBreakoutNodePresent = _useState2[1];
|
|
138
|
-
var _useState3 = useState(editorView ? getBreakoutMode(editorView.state) : undefined),
|
|
139
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
140
|
-
breakoutMode = _useState4[0],
|
|
141
|
-
setBreakoutMode = _useState4[1];
|
|
142
|
-
usePluginStateEffect(api, ['breakout'], function (_ref3) {
|
|
143
|
-
var breakoutState = _ref3.breakoutState;
|
|
144
|
-
if (!editorView) {
|
|
145
|
-
return;
|
|
146
|
-
}
|
|
147
|
-
if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
|
|
148
|
-
setBreakoutNodePresent(true);
|
|
149
|
-
}
|
|
150
|
-
if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
|
|
151
|
-
setBreakoutNodePresent(false);
|
|
152
|
-
}
|
|
153
|
-
var nextBreakoutMode = getBreakoutMode(editorView.state);
|
|
154
|
-
if (nextBreakoutMode !== breakoutMode) {
|
|
155
|
-
setBreakoutMode(nextBreakoutMode);
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
var interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
|
|
159
|
-
if (interactionState === 'hasNotHadInteraction') {
|
|
160
|
-
return null;
|
|
161
|
-
}
|
|
162
|
-
if (isDragging || isPMDragging) {
|
|
163
|
-
if (editorExperiment('advanced_layouts', true)) {
|
|
164
|
-
return null;
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
var isViewMode = mode === 'view';
|
|
168
|
-
var isEditMode = mode === 'edit';
|
|
169
|
-
return !isViewMode && editorDisabled === false ? /*#__PURE__*/React.createElement(LayoutButton, {
|
|
170
|
-
editorView: editorView,
|
|
171
|
-
mountPoint: mountPoint,
|
|
172
|
-
boundariesElement: boundariesElement,
|
|
173
|
-
scrollableElement: scrollableElement,
|
|
174
|
-
isLivePage: isEditMode,
|
|
175
|
-
isBreakoutNodePresent: breakoutNodePresent,
|
|
176
|
-
breakoutMode: breakoutMode,
|
|
177
|
-
api: api
|
|
178
|
-
}) : null;
|
|
179
|
-
};
|
|
180
|
-
export var breakoutPlugin = function breakoutPlugin(_ref4) {
|
|
181
|
-
var options = _ref4.config,
|
|
182
|
-
api = _ref4.api;
|
|
5
|
+
export var breakoutPlugin = function breakoutPlugin(_ref) {
|
|
6
|
+
var options = _ref.config,
|
|
7
|
+
api = _ref.api;
|
|
183
8
|
return {
|
|
184
9
|
name: 'breakout',
|
|
185
10
|
pmPlugins: function pmPlugins() {
|
|
186
|
-
if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
|
|
187
|
-
return [{
|
|
188
|
-
name: 'breakout-resizing',
|
|
189
|
-
plugin: function plugin(_ref5) {
|
|
190
|
-
var getIntl = _ref5.getIntl,
|
|
191
|
-
nodeViewPortalProviderAPI = _ref5.nodeViewPortalProviderAPI;
|
|
192
|
-
return createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options);
|
|
193
|
-
}
|
|
194
|
-
}];
|
|
195
|
-
}
|
|
196
11
|
return [{
|
|
197
|
-
name: 'breakout',
|
|
198
|
-
plugin: function plugin(
|
|
199
|
-
|
|
12
|
+
name: 'breakout-resizing',
|
|
13
|
+
plugin: function plugin(_ref2) {
|
|
14
|
+
var getIntl = _ref2.getIntl,
|
|
15
|
+
nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
|
|
16
|
+
return createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options);
|
|
200
17
|
}
|
|
201
18
|
}];
|
|
202
19
|
},
|
|
@@ -212,50 +29,27 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
|
|
|
212
29
|
breakoutNode: undefined
|
|
213
30
|
};
|
|
214
31
|
}
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
if (!resizingPluginState) {
|
|
218
|
-
return {
|
|
219
|
-
breakoutNode: undefined,
|
|
220
|
-
activeGuidelineKey: undefined
|
|
221
|
-
};
|
|
222
|
-
}
|
|
223
|
-
return resizingPluginState;
|
|
224
|
-
}
|
|
225
|
-
var pluginState = pluginKey.getState(editorState);
|
|
226
|
-
if (!pluginState) {
|
|
32
|
+
var resizingPluginState = resizingPluginKey.getState(editorState);
|
|
33
|
+
if (!resizingPluginState) {
|
|
227
34
|
return {
|
|
228
|
-
breakoutNode: undefined
|
|
35
|
+
breakoutNode: undefined,
|
|
36
|
+
activeGuidelineKey: undefined
|
|
229
37
|
};
|
|
230
38
|
}
|
|
231
|
-
return
|
|
39
|
+
return resizingPluginState;
|
|
232
40
|
},
|
|
233
|
-
contentComponent: function contentComponent(
|
|
234
|
-
var editorView =
|
|
235
|
-
popupsMountPoint =
|
|
236
|
-
popupsBoundariesElement =
|
|
237
|
-
popupsScrollableElement =
|
|
41
|
+
contentComponent: function contentComponent(_ref3) {
|
|
42
|
+
var editorView = _ref3.editorView,
|
|
43
|
+
popupsMountPoint = _ref3.popupsMountPoint,
|
|
44
|
+
popupsBoundariesElement = _ref3.popupsBoundariesElement,
|
|
45
|
+
popupsScrollableElement = _ref3.popupsScrollableElement;
|
|
238
46
|
if (!editorView) {
|
|
239
47
|
return null;
|
|
240
48
|
}
|
|
241
|
-
|
|
242
|
-
return /*#__PURE__*/React.createElement(GuidelineLabel, {
|
|
243
|
-
api: api,
|
|
244
|
-
editorView: editorView,
|
|
245
|
-
mountPoint: popupsMountPoint,
|
|
246
|
-
boundariesElement: popupsBoundariesElement,
|
|
247
|
-
scrollableElement: popupsScrollableElement
|
|
248
|
-
});
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
// This is a bit crappy, but should be resolved once we move to a static schema.
|
|
252
|
-
if (options && !options.allowBreakoutButton) {
|
|
253
|
-
return null;
|
|
254
|
-
}
|
|
255
|
-
return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
|
|
49
|
+
return /*#__PURE__*/React.createElement(GuidelineLabel, {
|
|
256
50
|
api: api,
|
|
257
|
-
mountPoint: popupsMountPoint,
|
|
258
51
|
editorView: editorView,
|
|
52
|
+
mountPoint: popupsMountPoint,
|
|
259
53
|
boundariesElement: popupsBoundariesElement,
|
|
260
54
|
scrollableElement: popupsScrollableElement
|
|
261
55
|
});
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { expandedState } from '@atlaskit/editor-common/expand';
|
|
2
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
3
2
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
3
|
export var updateExpandedStateNew = function updateExpandedStateNew(_ref) {
|
|
5
4
|
var tr = _ref.tr,
|
|
@@ -15,20 +14,10 @@ export var updateExpandedStateNew = function updateExpandedStateNew(_ref) {
|
|
|
15
14
|
}
|
|
16
15
|
};
|
|
17
16
|
export var updateExpandedState = function updateExpandedState(tr, node, isLivePage) {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
});
|
|
25
|
-
} else {
|
|
26
|
-
if (isLivePage || expValEquals('platform_editor_single_player_expand', 'isEnabled', true)) {
|
|
27
|
-
var wasExpandExpanded = expandedState.get(node.node);
|
|
28
|
-
var newExpand = tr.doc.nodeAt(node.pos);
|
|
29
|
-
if (wasExpandExpanded !== undefined && newExpand) {
|
|
30
|
-
expandedState.set(newExpand, wasExpandExpanded);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
17
|
+
updateExpandedStateNew({
|
|
18
|
+
tr: tr,
|
|
19
|
+
node: node.node,
|
|
20
|
+
pos: node.pos,
|
|
21
|
+
isLivePage: isLivePage
|
|
22
|
+
});
|
|
34
23
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-breakout",
|
|
3
|
-
"version": "24.0.
|
|
3
|
+
"version": "24.0.4",
|
|
4
4
|
"description": "Breakout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
37
37
|
"@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
|
|
38
38
|
"@atlaskit/theme": "^28.2.0",
|
|
39
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
39
|
+
"@atlaskit/tmp-editor-statsig": "^224.0.0",
|
|
40
40
|
"@atlaskit/tokens": "^20.3.0",
|
|
41
41
|
"@atlaskit/tooltip": "^24.4.0",
|
|
42
42
|
"@babel/runtime": "^7.0.0",
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.removeBreakout = removeBreakout;
|
|
7
|
-
var _codeBlock = require("@atlaskit/editor-common/code-block");
|
|
8
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
|
-
var _findBreakoutNode = require("../pm-plugins/utils/find-breakout-node");
|
|
10
|
-
var _singlePlayerExpand = require("../pm-plugins/utils/single-player-expand");
|
|
11
|
-
function removeBreakout(isLivePage) {
|
|
12
|
-
return function (state, dispatch) {
|
|
13
|
-
var node = (0, _findBreakoutNode.findSupportedNodeForBreakout)(state.selection);
|
|
14
|
-
if (!node) {
|
|
15
|
-
return false;
|
|
16
|
-
}
|
|
17
|
-
var marks = node.node.marks.filter(function (m) {
|
|
18
|
-
return m.type.name !== 'breakout';
|
|
19
|
-
});
|
|
20
|
-
var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
|
|
21
|
-
if (node.node.type === state.schema.nodes.expand) {
|
|
22
|
-
(0, _singlePlayerExpand.updateExpandedState)(tr, node, isLivePage);
|
|
23
|
-
} else if (node.node.type === state.schema.nodes.codeBlock) {
|
|
24
|
-
var newNode = tr.doc.nodeAt(node.pos);
|
|
25
|
-
var oldNode = node.node;
|
|
26
|
-
if (newNode) {
|
|
27
|
-
(0, _codeBlock.transferCodeBlockWrappedValue)(oldNode, newNode);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
tr.setMeta('scrollIntoView', false);
|
|
31
|
-
if (state.selection instanceof _state.NodeSelection) {
|
|
32
|
-
if (state.selection.$anchor.pos === node.pos) {
|
|
33
|
-
tr.setSelection(_state.NodeSelection.create(tr.doc, node.pos));
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
if (dispatch) {
|
|
37
|
-
dispatch(tr);
|
|
38
|
-
}
|
|
39
|
-
return true;
|
|
40
|
-
};
|
|
41
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.setBreakoutMode = setBreakoutMode;
|
|
7
|
-
var _codeBlock = require("@atlaskit/editor-common/code-block");
|
|
8
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
|
-
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
10
|
-
var _findBreakoutNode = require("../pm-plugins/utils/find-breakout-node");
|
|
11
|
-
var _singlePlayerExpand = require("../pm-plugins/utils/single-player-expand");
|
|
12
|
-
function setBreakoutMode(mode, isLivePage) {
|
|
13
|
-
return function (state, dispatch) {
|
|
14
|
-
var node = (0, _findBreakoutNode.findSupportedNodeForBreakout)(state.selection);
|
|
15
|
-
if (!node) {
|
|
16
|
-
return false;
|
|
17
|
-
}
|
|
18
|
-
var tr;
|
|
19
|
-
if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
|
|
20
|
-
var marks = state.schema.marks.breakout.create({
|
|
21
|
-
mode: mode
|
|
22
|
-
}).addToSet(node.node.marks);
|
|
23
|
-
tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
|
|
24
|
-
} else {
|
|
25
|
-
tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
|
|
26
|
-
mode: mode
|
|
27
|
-
})]);
|
|
28
|
-
}
|
|
29
|
-
if (node.node.type === state.schema.nodes.expand) {
|
|
30
|
-
(0, _singlePlayerExpand.updateExpandedState)(tr, node, isLivePage);
|
|
31
|
-
} else if (node.node.type === state.schema.nodes.codeBlock) {
|
|
32
|
-
var newNode = tr.doc.nodeAt(node.pos);
|
|
33
|
-
var oldNode = node.node;
|
|
34
|
-
if (newNode) {
|
|
35
|
-
(0, _codeBlock.transferCodeBlockWrappedValue)(oldNode, newNode);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
tr.setMeta('scrollIntoView', false);
|
|
39
|
-
if (state.selection instanceof _state.NodeSelection) {
|
|
40
|
-
if (state.selection.$anchor.pos === node.pos) {
|
|
41
|
-
tr.setSelection(_state.NodeSelection.create(tr.doc, node.pos));
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
if (dispatch) {
|
|
45
|
-
dispatch(tr);
|
|
46
|
-
}
|
|
47
|
-
return true;
|
|
48
|
-
};
|
|
49
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.pluginKey = exports.getPluginState = void 0;
|
|
7
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
8
|
-
var pluginKey = exports.pluginKey = new _state.PluginKey('breakoutPlugin');
|
|
9
|
-
var getPluginState = exports.getPluginState = function getPluginState(state) {
|
|
10
|
-
return pluginKey.getState(state) || undefined;
|
|
11
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.findSupportedNodeForBreakout = findSupportedNodeForBreakout;
|
|
7
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
8
|
-
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
9
|
-
var _isSupportedNode = require("./is-supported-node");
|
|
10
|
-
/**
|
|
11
|
-
* Find the nearest parent node to the selection that supports breakout, or if the nearest
|
|
12
|
-
* matching parent node is the doc, return undefined.
|
|
13
|
-
* For depth, if a node is selected and supports breakout, return the depth of the node.
|
|
14
|
-
* @param selection Current editor selection
|
|
15
|
-
*/
|
|
16
|
-
function findSupportedNodeForBreakout(selection) {
|
|
17
|
-
if (selection instanceof _state.NodeSelection) {
|
|
18
|
-
var supportsBreakout = (0, _isSupportedNode.isSupportedNodeForBreakout)(selection.node);
|
|
19
|
-
if (supportsBreakout) {
|
|
20
|
-
return {
|
|
21
|
-
pos: selection.from,
|
|
22
|
-
start: selection.from,
|
|
23
|
-
node: selection.node,
|
|
24
|
-
// If a selected expand is in a doc, the depth of that expand is 0. Therefore
|
|
25
|
-
// we don't need to subtract 1 or instantly return false if the depth is 0
|
|
26
|
-
depth: selection.$anchor.depth
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
var breakoutNode = (0, _utils.findParentNode)(_isSupportedNode.isSupportedNodeForBreakout)(selection);
|
|
31
|
-
if (!breakoutNode || breakoutNode.depth === 0) {
|
|
32
|
-
// If this node doesn't exist or the only supporting node is the document
|
|
33
|
-
// (with depth 0), then we're not inside a node that supports breakout
|
|
34
|
-
return undefined;
|
|
35
|
-
}
|
|
36
|
-
return {
|
|
37
|
-
node: breakoutNode.node,
|
|
38
|
-
start: breakoutNode.start,
|
|
39
|
-
pos: breakoutNode.pos,
|
|
40
|
-
depth: breakoutNode.depth - 1
|
|
41
|
-
};
|
|
42
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getBreakoutMode = getBreakoutMode;
|
|
7
|
-
var _findBreakoutNode = require("./find-breakout-node");
|
|
8
|
-
/**
|
|
9
|
-
* Get the current mode of the breakout at the selection
|
|
10
|
-
* @param state Current EditorState
|
|
11
|
-
*/
|
|
12
|
-
function getBreakoutMode(state) {
|
|
13
|
-
var node = (0, _findBreakoutNode.findSupportedNodeForBreakout)(state.selection);
|
|
14
|
-
if (!node) {
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
var breakoutMark = node.node.marks.find(function (m) {
|
|
18
|
-
return m.type.name === 'breakout';
|
|
19
|
-
});
|
|
20
|
-
if (!breakoutMark) {
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
return breakoutMark.attrs.mode;
|
|
24
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.isBreakoutMarkAllowed = isBreakoutMarkAllowed;
|
|
7
|
-
var _findBreakoutNode = require("./find-breakout-node");
|
|
8
|
-
/**
|
|
9
|
-
* Check if breakout should be allowed for the current selection. If a node is selected,
|
|
10
|
-
* can this node be broken out, if text, can the enclosing parent node be broken out.
|
|
11
|
-
*
|
|
12
|
-
* Currently breakout of a node is not possible if it's nested in anything but the document, however
|
|
13
|
-
* this logic supports this changing.
|
|
14
|
-
*/
|
|
15
|
-
function isBreakoutMarkAllowed(state) {
|
|
16
|
-
if (!state.schema.marks.breakout) {
|
|
17
|
-
return false;
|
|
18
|
-
}
|
|
19
|
-
var supportedNodeParent = (0, _findBreakoutNode.findSupportedNodeForBreakout)(state.selection);
|
|
20
|
-
if (!supportedNodeParent) {
|
|
21
|
-
return false;
|
|
22
|
-
}
|
|
23
|
-
// At the moment we can only breakout when the depth is 0, ie. doc is the only node
|
|
24
|
-
// that supports breakout. This *could* change though.
|
|
25
|
-
var parent = state.selection.$from.node(supportedNodeParent.depth);
|
|
26
|
-
return parent.type.allowsMarkType(state.schema.marks.breakout);
|
|
27
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.isSupportedNodeForBreakout = isSupportedNodeForBreakout;
|
|
7
|
-
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
8
|
-
var supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
|
|
9
|
-
var supportedNodesForBreakoutAdvancedLayouts = ['codeBlock', 'expand'];
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Check if breakout can be applied to a node
|
|
13
|
-
* @param node Node to check
|
|
14
|
-
*/
|
|
15
|
-
function isSupportedNodeForBreakout(node) {
|
|
16
|
-
if ((0, _editorExperiment.editorExperiment)('advanced_layouts', true)) {
|
|
17
|
-
return supportedNodesForBreakoutAdvancedLayouts.indexOf(node.type.name) !== -1;
|
|
18
|
-
}
|
|
19
|
-
return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
|
|
20
|
-
}
|