@atlaskit/editor-plugin-breakout 12.2.8 → 12.3.0
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
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-breakout
|
|
2
2
|
|
|
3
|
+
## 12.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`34d8700aa0e77`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/34d8700aa0e77) -
|
|
8
|
+
[ux] [EDITOR-8131] scan the document when entering edit mode to add breakout marks to existing
|
|
9
|
+
top-level resizable nodes
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 12.2.9
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 12.2.8
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -12,6 +12,7 @@ var _document = require("@atlaskit/editor-common/utils/document");
|
|
|
12
12
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
13
13
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
14
14
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
15
16
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
16
17
|
var _handleKeyDown = require("./handle-key-down");
|
|
17
18
|
var _resizingMarkView = require("./resizing-mark-view");
|
|
@@ -109,6 +110,14 @@ var pluginState = {
|
|
|
109
110
|
return pluginState;
|
|
110
111
|
}
|
|
111
112
|
};
|
|
113
|
+
var requestIdleCallbackWithFallback = function requestIdleCallbackWithFallback(callback) {
|
|
114
|
+
if (typeof requestIdleCallback !== 'undefined') {
|
|
115
|
+
requestIdleCallback(callback);
|
|
116
|
+
} else {
|
|
117
|
+
// fallback to requestAnimationFrame for Safari
|
|
118
|
+
requestAnimationFrame(callback);
|
|
119
|
+
}
|
|
120
|
+
};
|
|
112
121
|
var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
|
|
113
122
|
var isRuleAndPanelResizingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
114
123
|
return new _safePlugin.SafePlugin({
|
|
@@ -122,9 +131,75 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
|
|
|
122
131
|
},
|
|
123
132
|
handleKeyDown: (0, _handleKeyDown.handleKeyDown)(api)
|
|
124
133
|
},
|
|
134
|
+
view: function view(editorView) {
|
|
135
|
+
var _api$editorViewMode2;
|
|
136
|
+
var isPageLoadNormalizationEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
|
|
137
|
+
var isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !(0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_patch_1');
|
|
138
|
+
if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled) {
|
|
139
|
+
return {};
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* This performs a one-time scan of the document to add breakout marks
|
|
144
|
+
* to nodes that don't have them. It's designed to run only once per
|
|
145
|
+
* editor instance to avoid performance issues.
|
|
146
|
+
*/
|
|
147
|
+
var normalizeBreakoutResizableNodes = function normalizeBreakoutResizableNodes() {
|
|
148
|
+
var _api$editorViewMode;
|
|
149
|
+
if ((api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view') {
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
153
|
+
var state = editorView.state;
|
|
154
|
+
var _state$schema$nodes = state.schema.nodes,
|
|
155
|
+
expand = _state$schema$nodes.expand,
|
|
156
|
+
codeBlock = _state$schema$nodes.codeBlock,
|
|
157
|
+
layoutSection = _state$schema$nodes.layoutSection,
|
|
158
|
+
rule = _state$schema$nodes.rule,
|
|
159
|
+
panel = _state$schema$nodes.panel,
|
|
160
|
+
panel_c1 = _state$schema$nodes.panel_c1;
|
|
161
|
+
var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
|
|
162
|
+
var newTr = state.tr;
|
|
163
|
+
var hasDocChanged = false;
|
|
164
|
+
|
|
165
|
+
// scan the document for top-level resizable nodes
|
|
166
|
+
state.doc.forEach(function (node, pos) {
|
|
167
|
+
if (!breakoutResizableNodes.has(node.type)) {
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
var _addBreakoutToResizab = addBreakoutToResizableNode({
|
|
171
|
+
node: node,
|
|
172
|
+
pos: pos,
|
|
173
|
+
newState: state,
|
|
174
|
+
newTr: newTr,
|
|
175
|
+
breakoutResizableNodes: breakoutResizableNodes,
|
|
176
|
+
isFullWidthEnabled: isFullWidthEnabled
|
|
177
|
+
}),
|
|
178
|
+
updatedTr = _addBreakoutToResizab.updatedTr,
|
|
179
|
+
updatedDocChanged = _addBreakoutToResizab.updatedDocChanged;
|
|
180
|
+
newTr = updatedTr;
|
|
181
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
182
|
+
});
|
|
183
|
+
if (hasDocChanged) {
|
|
184
|
+
editorView.dispatch(newTr.setMeta('addToHistory', false));
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
requestIdleCallbackWithFallback(normalizeBreakoutResizableNodes);
|
|
188
|
+
var unsubscribeFromViewMode = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (_ref2) {
|
|
189
|
+
var nextSharedState = _ref2.nextSharedState;
|
|
190
|
+
if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'edit') {
|
|
191
|
+
requestIdleCallbackWithFallback(normalizeBreakoutResizableNodes);
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
return {
|
|
195
|
+
destroy: function destroy() {
|
|
196
|
+
unsubscribeFromViewMode === null || unsubscribeFromViewMode === void 0 || unsubscribeFromViewMode();
|
|
197
|
+
}
|
|
198
|
+
};
|
|
199
|
+
},
|
|
125
200
|
appendTransaction: function appendTransaction(transactions, oldState, newState) {
|
|
126
|
-
var _api$
|
|
127
|
-
if ((api === null || api === void 0 || (_api$
|
|
201
|
+
var _api$editorViewMode3;
|
|
202
|
+
if ((api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
|
|
128
203
|
return;
|
|
129
204
|
}
|
|
130
205
|
var newTr = newState.tr;
|
|
@@ -138,21 +213,11 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
|
|
|
138
213
|
panel_c1 = _newState$schema$node.panel_c1;
|
|
139
214
|
var breakoutResizableNodes = (0, _experiments.editorExperiment)('platform_synced_block', true) ? (0, _utils.getBreakoutResizableNodeTypes)(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
|
|
140
215
|
var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
141
|
-
var
|
|
142
|
-
|
|
143
|
-
if (
|
|
144
|
-
var breakout = newState.schema.marks.breakout;
|
|
145
|
-
newState.doc.forEach(function (node) {
|
|
146
|
-
if ([panel, panel_c1, rule].includes(node.type) && !node.marks.some(function (mark) {
|
|
147
|
-
return mark.type === breakout;
|
|
148
|
-
})) {
|
|
149
|
-
hasTopLevelPanelOrRuleWithoutBreakout = true;
|
|
150
|
-
}
|
|
151
|
-
});
|
|
152
|
-
}
|
|
153
|
-
if ((0, _document.isReplaceDocOperation)(transactions, oldState) || hasTopLevelPanelOrRuleWithoutBreakout) {
|
|
216
|
+
var isPageLoadNormalizationEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
|
|
217
|
+
var isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !(0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_patch_1');
|
|
218
|
+
if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled && (0, _document.isReplaceDocOperation)(transactions, oldState)) {
|
|
154
219
|
newState.doc.forEach(function (node, pos) {
|
|
155
|
-
var
|
|
220
|
+
var _addBreakoutToResizab2 = addBreakoutToResizableNode({
|
|
156
221
|
node: node,
|
|
157
222
|
pos: pos,
|
|
158
223
|
newState: newState,
|
|
@@ -160,8 +225,8 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
|
|
|
160
225
|
breakoutResizableNodes: breakoutResizableNodes,
|
|
161
226
|
isFullWidthEnabled: isFullWidthEnabled
|
|
162
227
|
}),
|
|
163
|
-
updatedTr =
|
|
164
|
-
updatedDocChanged =
|
|
228
|
+
updatedTr = _addBreakoutToResizab2.updatedTr,
|
|
229
|
+
updatedDocChanged = _addBreakoutToResizab2.updatedDocChanged;
|
|
165
230
|
newTr = updatedTr;
|
|
166
231
|
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
167
232
|
});
|
|
@@ -172,10 +237,10 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
|
|
|
172
237
|
});
|
|
173
238
|
if (isAddingResizableNodes) {
|
|
174
239
|
var changedNodes = (0, _document.getChangedNodes)(tr);
|
|
175
|
-
changedNodes.forEach(function (
|
|
176
|
-
var node =
|
|
177
|
-
pos =
|
|
178
|
-
var
|
|
240
|
+
changedNodes.forEach(function (_ref3) {
|
|
241
|
+
var node = _ref3.node,
|
|
242
|
+
pos = _ref3.pos;
|
|
243
|
+
var _addBreakoutToResizab3 = addBreakoutToResizableNode({
|
|
179
244
|
node: node,
|
|
180
245
|
pos: pos,
|
|
181
246
|
newState: newState,
|
|
@@ -183,8 +248,8 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
|
|
|
183
248
|
breakoutResizableNodes: breakoutResizableNodes,
|
|
184
249
|
isFullWidthEnabled: isFullWidthEnabled
|
|
185
250
|
}),
|
|
186
|
-
updatedTr =
|
|
187
|
-
updatedDocChanged =
|
|
251
|
+
updatedTr = _addBreakoutToResizab3.updatedTr,
|
|
252
|
+
updatedDocChanged = _addBreakoutToResizab3.updatedDocChanged;
|
|
188
253
|
newTr = updatedTr;
|
|
189
254
|
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
190
255
|
});
|
|
@@ -4,6 +4,7 @@ import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/
|
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
8
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
8
9
|
import { handleKeyDown } from './handle-key-down';
|
|
9
10
|
import { ResizingMarkView } from './resizing-mark-view';
|
|
@@ -105,6 +106,14 @@ const pluginState = {
|
|
|
105
106
|
return pluginState;
|
|
106
107
|
}
|
|
107
108
|
};
|
|
109
|
+
const requestIdleCallbackWithFallback = callback => {
|
|
110
|
+
if (typeof requestIdleCallback !== 'undefined') {
|
|
111
|
+
requestIdleCallback(callback);
|
|
112
|
+
} else {
|
|
113
|
+
// fallback to requestAnimationFrame for Safari
|
|
114
|
+
requestAnimationFrame(callback);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
108
117
|
export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options, isRuleAndPanelResizingEnabled = false) => {
|
|
109
118
|
return new SafePlugin({
|
|
110
119
|
key: resizingPluginKey,
|
|
@@ -117,9 +126,80 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
|
|
|
117
126
|
},
|
|
118
127
|
handleKeyDown: handleKeyDown(api)
|
|
119
128
|
},
|
|
129
|
+
view: editorView => {
|
|
130
|
+
var _api$editorViewMode2;
|
|
131
|
+
const isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
|
|
132
|
+
const isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !fg('platform_editor_lovability_resize_patch_1');
|
|
133
|
+
if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled) {
|
|
134
|
+
return {};
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* This performs a one-time scan of the document to add breakout marks
|
|
139
|
+
* to nodes that don't have them. It's designed to run only once per
|
|
140
|
+
* editor instance to avoid performance issues.
|
|
141
|
+
*/
|
|
142
|
+
const normalizeBreakoutResizableNodes = () => {
|
|
143
|
+
var _api$editorViewMode, _api$editorViewMode$s;
|
|
144
|
+
if ((api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view') {
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
const isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
148
|
+
const {
|
|
149
|
+
state
|
|
150
|
+
} = editorView;
|
|
151
|
+
const {
|
|
152
|
+
expand,
|
|
153
|
+
codeBlock,
|
|
154
|
+
layoutSection,
|
|
155
|
+
rule,
|
|
156
|
+
panel,
|
|
157
|
+
panel_c1
|
|
158
|
+
} = state.schema.nodes;
|
|
159
|
+
const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
|
|
160
|
+
let newTr = state.tr;
|
|
161
|
+
let hasDocChanged = false;
|
|
162
|
+
|
|
163
|
+
// scan the document for top-level resizable nodes
|
|
164
|
+
state.doc.forEach((node, pos) => {
|
|
165
|
+
if (!breakoutResizableNodes.has(node.type)) {
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
const {
|
|
169
|
+
updatedTr,
|
|
170
|
+
updatedDocChanged
|
|
171
|
+
} = addBreakoutToResizableNode({
|
|
172
|
+
node,
|
|
173
|
+
pos,
|
|
174
|
+
newState: state,
|
|
175
|
+
newTr,
|
|
176
|
+
breakoutResizableNodes,
|
|
177
|
+
isFullWidthEnabled
|
|
178
|
+
});
|
|
179
|
+
newTr = updatedTr;
|
|
180
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
181
|
+
});
|
|
182
|
+
if (hasDocChanged) {
|
|
183
|
+
editorView.dispatch(newTr.setMeta('addToHistory', false));
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
requestIdleCallbackWithFallback(normalizeBreakoutResizableNodes);
|
|
187
|
+
const unsubscribeFromViewMode = api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(({
|
|
188
|
+
nextSharedState
|
|
189
|
+
}) => {
|
|
190
|
+
if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'edit') {
|
|
191
|
+
requestIdleCallbackWithFallback(normalizeBreakoutResizableNodes);
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
return {
|
|
195
|
+
destroy: () => {
|
|
196
|
+
unsubscribeFromViewMode === null || unsubscribeFromViewMode === void 0 ? void 0 : unsubscribeFromViewMode();
|
|
197
|
+
}
|
|
198
|
+
};
|
|
199
|
+
},
|
|
120
200
|
appendTransaction(transactions, oldState, newState) {
|
|
121
|
-
var _api$
|
|
122
|
-
if ((api === null || api === void 0 ? void 0 : (_api$
|
|
201
|
+
var _api$editorViewMode3, _api$editorViewMode3$;
|
|
202
|
+
if ((api === null || api === void 0 ? void 0 : (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 ? void 0 : (_api$editorViewMode3$ = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3$ === void 0 ? void 0 : _api$editorViewMode3$.mode) === 'view') {
|
|
123
203
|
return;
|
|
124
204
|
}
|
|
125
205
|
let newTr = newState.tr;
|
|
@@ -134,19 +214,9 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
|
|
|
134
214
|
} = newState.schema.nodes;
|
|
135
215
|
const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
|
|
136
216
|
const isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
if (
|
|
140
|
-
const {
|
|
141
|
-
breakout
|
|
142
|
-
} = newState.schema.marks;
|
|
143
|
-
newState.doc.forEach(node => {
|
|
144
|
-
if ([panel, panel_c1, rule].includes(node.type) && !node.marks.some(mark => mark.type === breakout)) {
|
|
145
|
-
hasTopLevelPanelOrRuleWithoutBreakout = true;
|
|
146
|
-
}
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
if (isReplaceDocOperation(transactions, oldState) || hasTopLevelPanelOrRuleWithoutBreakout) {
|
|
217
|
+
const isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
|
|
218
|
+
const isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !fg('platform_editor_lovability_resize_patch_1');
|
|
219
|
+
if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled && isReplaceDocOperation(transactions, oldState)) {
|
|
150
220
|
newState.doc.forEach((node, pos) => {
|
|
151
221
|
const {
|
|
152
222
|
updatedTr,
|
|
@@ -7,6 +7,7 @@ import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/
|
|
|
7
7
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
8
8
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
9
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
12
|
import { handleKeyDown } from './handle-key-down';
|
|
12
13
|
import { ResizingMarkView } from './resizing-mark-view';
|
|
@@ -102,6 +103,14 @@ var pluginState = {
|
|
|
102
103
|
return pluginState;
|
|
103
104
|
}
|
|
104
105
|
};
|
|
106
|
+
var requestIdleCallbackWithFallback = function requestIdleCallbackWithFallback(callback) {
|
|
107
|
+
if (typeof requestIdleCallback !== 'undefined') {
|
|
108
|
+
requestIdleCallback(callback);
|
|
109
|
+
} else {
|
|
110
|
+
// fallback to requestAnimationFrame for Safari
|
|
111
|
+
requestAnimationFrame(callback);
|
|
112
|
+
}
|
|
113
|
+
};
|
|
105
114
|
export var createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
|
|
106
115
|
var isRuleAndPanelResizingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
107
116
|
return new SafePlugin({
|
|
@@ -115,9 +124,75 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
|
|
|
115
124
|
},
|
|
116
125
|
handleKeyDown: handleKeyDown(api)
|
|
117
126
|
},
|
|
127
|
+
view: function view(editorView) {
|
|
128
|
+
var _api$editorViewMode2;
|
|
129
|
+
var isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
|
|
130
|
+
var isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !fg('platform_editor_lovability_resize_patch_1');
|
|
131
|
+
if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled) {
|
|
132
|
+
return {};
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* This performs a one-time scan of the document to add breakout marks
|
|
137
|
+
* to nodes that don't have them. It's designed to run only once per
|
|
138
|
+
* editor instance to avoid performance issues.
|
|
139
|
+
*/
|
|
140
|
+
var normalizeBreakoutResizableNodes = function normalizeBreakoutResizableNodes() {
|
|
141
|
+
var _api$editorViewMode;
|
|
142
|
+
if ((api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view') {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
146
|
+
var state = editorView.state;
|
|
147
|
+
var _state$schema$nodes = state.schema.nodes,
|
|
148
|
+
expand = _state$schema$nodes.expand,
|
|
149
|
+
codeBlock = _state$schema$nodes.codeBlock,
|
|
150
|
+
layoutSection = _state$schema$nodes.layoutSection,
|
|
151
|
+
rule = _state$schema$nodes.rule,
|
|
152
|
+
panel = _state$schema$nodes.panel,
|
|
153
|
+
panel_c1 = _state$schema$nodes.panel_c1;
|
|
154
|
+
var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(state.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
|
|
155
|
+
var newTr = state.tr;
|
|
156
|
+
var hasDocChanged = false;
|
|
157
|
+
|
|
158
|
+
// scan the document for top-level resizable nodes
|
|
159
|
+
state.doc.forEach(function (node, pos) {
|
|
160
|
+
if (!breakoutResizableNodes.has(node.type)) {
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
var _addBreakoutToResizab = addBreakoutToResizableNode({
|
|
164
|
+
node: node,
|
|
165
|
+
pos: pos,
|
|
166
|
+
newState: state,
|
|
167
|
+
newTr: newTr,
|
|
168
|
+
breakoutResizableNodes: breakoutResizableNodes,
|
|
169
|
+
isFullWidthEnabled: isFullWidthEnabled
|
|
170
|
+
}),
|
|
171
|
+
updatedTr = _addBreakoutToResizab.updatedTr,
|
|
172
|
+
updatedDocChanged = _addBreakoutToResizab.updatedDocChanged;
|
|
173
|
+
newTr = updatedTr;
|
|
174
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
175
|
+
});
|
|
176
|
+
if (hasDocChanged) {
|
|
177
|
+
editorView.dispatch(newTr.setMeta('addToHistory', false));
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
requestIdleCallbackWithFallback(normalizeBreakoutResizableNodes);
|
|
181
|
+
var unsubscribeFromViewMode = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (_ref2) {
|
|
182
|
+
var nextSharedState = _ref2.nextSharedState;
|
|
183
|
+
if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'edit') {
|
|
184
|
+
requestIdleCallbackWithFallback(normalizeBreakoutResizableNodes);
|
|
185
|
+
}
|
|
186
|
+
});
|
|
187
|
+
return {
|
|
188
|
+
destroy: function destroy() {
|
|
189
|
+
unsubscribeFromViewMode === null || unsubscribeFromViewMode === void 0 || unsubscribeFromViewMode();
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
},
|
|
118
193
|
appendTransaction: function appendTransaction(transactions, oldState, newState) {
|
|
119
|
-
var _api$
|
|
120
|
-
if ((api === null || api === void 0 || (_api$
|
|
194
|
+
var _api$editorViewMode3;
|
|
195
|
+
if ((api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
|
|
121
196
|
return;
|
|
122
197
|
}
|
|
123
198
|
var newTr = newState.tr;
|
|
@@ -131,21 +206,11 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
|
|
|
131
206
|
panel_c1 = _newState$schema$node.panel_c1;
|
|
132
207
|
var breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema, isRuleAndPanelResizingEnabled) : isRuleAndPanelResizingEnabled ? new Set([expand, codeBlock, layoutSection, rule, panel, panel_c1]) : new Set([expand, codeBlock, layoutSection]);
|
|
133
208
|
var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
134
|
-
var
|
|
135
|
-
|
|
136
|
-
if (
|
|
137
|
-
var breakout = newState.schema.marks.breakout;
|
|
138
|
-
newState.doc.forEach(function (node) {
|
|
139
|
-
if ([panel, panel_c1, rule].includes(node.type) && !node.marks.some(function (mark) {
|
|
140
|
-
return mark.type === breakout;
|
|
141
|
-
})) {
|
|
142
|
-
hasTopLevelPanelOrRuleWithoutBreakout = true;
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
if (isReplaceDocOperation(transactions, oldState) || hasTopLevelPanelOrRuleWithoutBreakout) {
|
|
209
|
+
var isPageLoadNormalizationEnabled = expValEquals('platform_editor_add_breakout_marks_on_page_load', 'isEnabled', true);
|
|
210
|
+
var isPanelAndDividerNormalizationEnabled = isRuleAndPanelResizingEnabled && !fg('platform_editor_lovability_resize_patch_1');
|
|
211
|
+
if (!isPageLoadNormalizationEnabled && !isPanelAndDividerNormalizationEnabled && isReplaceDocOperation(transactions, oldState)) {
|
|
147
212
|
newState.doc.forEach(function (node, pos) {
|
|
148
|
-
var
|
|
213
|
+
var _addBreakoutToResizab2 = addBreakoutToResizableNode({
|
|
149
214
|
node: node,
|
|
150
215
|
pos: pos,
|
|
151
216
|
newState: newState,
|
|
@@ -153,8 +218,8 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
|
|
|
153
218
|
breakoutResizableNodes: breakoutResizableNodes,
|
|
154
219
|
isFullWidthEnabled: isFullWidthEnabled
|
|
155
220
|
}),
|
|
156
|
-
updatedTr =
|
|
157
|
-
updatedDocChanged =
|
|
221
|
+
updatedTr = _addBreakoutToResizab2.updatedTr,
|
|
222
|
+
updatedDocChanged = _addBreakoutToResizab2.updatedDocChanged;
|
|
158
223
|
newTr = updatedTr;
|
|
159
224
|
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
160
225
|
});
|
|
@@ -165,10 +230,10 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
|
|
|
165
230
|
});
|
|
166
231
|
if (isAddingResizableNodes) {
|
|
167
232
|
var changedNodes = getChangedNodes(tr);
|
|
168
|
-
changedNodes.forEach(function (
|
|
169
|
-
var node =
|
|
170
|
-
pos =
|
|
171
|
-
var
|
|
233
|
+
changedNodes.forEach(function (_ref3) {
|
|
234
|
+
var node = _ref3.node,
|
|
235
|
+
pos = _ref3.pos;
|
|
236
|
+
var _addBreakoutToResizab3 = addBreakoutToResizableNode({
|
|
172
237
|
node: node,
|
|
173
238
|
pos: pos,
|
|
174
239
|
newState: newState,
|
|
@@ -176,8 +241,8 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
|
|
|
176
241
|
breakoutResizableNodes: breakoutResizableNodes,
|
|
177
242
|
isFullWidthEnabled: isFullWidthEnabled
|
|
178
243
|
}),
|
|
179
|
-
updatedTr =
|
|
180
|
-
updatedDocChanged =
|
|
244
|
+
updatedTr = _addBreakoutToResizab3.updatedTr,
|
|
245
|
+
updatedDocChanged = _addBreakoutToResizab3.updatedDocChanged;
|
|
181
246
|
newTr = updatedTr;
|
|
182
247
|
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
183
248
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-breakout",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.3.0",
|
|
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/platform-feature-flags": "^2.0.0",
|
|
36
36
|
"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
|
|
37
37
|
"@atlaskit/theme": "^26.1.0",
|
|
38
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
38
|
+
"@atlaskit/tmp-editor-statsig": "^127.1.0",
|
|
39
39
|
"@atlaskit/tokens": "^16.0.0",
|
|
40
40
|
"@atlaskit/tooltip": "^23.1.0",
|
|
41
41
|
"@babel/runtime": "^7.0.0",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"uuid": "^3.1.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
|
-
"@atlaskit/editor-common": "^116.
|
|
48
|
+
"@atlaskit/editor-common": "^116.33.0",
|
|
49
49
|
"react": "^18.2.0",
|
|
50
50
|
"react-dom": "^18.2.0",
|
|
51
51
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|