@atlaskit/editor-plugin-block-controls 25.0.3 → 25.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 +12 -0
- package/dist/cjs/editor-commands/move-to-layout.js +8 -45
- package/dist/cjs/pm-plugins/decorations-drag-handle.js +1 -7
- package/dist/cjs/pm-plugins/decorations-quick-insert-button.js +1 -11
- package/dist/cjs/pm-plugins/first-node-dec-plugin.js +1 -4
- package/dist/cjs/pm-plugins/main.js +1 -1
- package/dist/cjs/ui/consts.js +2 -2
- package/dist/es2019/editor-commands/move-to-layout.js +10 -43
- package/dist/es2019/pm-plugins/decorations-drag-handle.js +1 -7
- package/dist/es2019/pm-plugins/decorations-quick-insert-button.js +1 -11
- package/dist/es2019/pm-plugins/first-node-dec-plugin.js +1 -4
- package/dist/es2019/pm-plugins/main.js +1 -1
- package/dist/es2019/ui/consts.js +2 -2
- package/dist/esm/editor-commands/move-to-layout.js +8 -45
- package/dist/esm/pm-plugins/decorations-drag-handle.js +1 -7
- package/dist/esm/pm-plugins/decorations-quick-insert-button.js +1 -11
- package/dist/esm/pm-plugins/first-node-dec-plugin.js +1 -4
- package/dist/esm/pm-plugins/main.js +1 -1
- package/dist/esm/ui/consts.js +2 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 25.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`0a81f6fa7cbf8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a81f6fa7cbf8) -
|
|
8
|
+
Clean up experiment `platform_editor_breakout_resizing`. Behind the
|
|
9
|
+
`platform_editor_list_join_strip_breakout` experiment, strip the breakout mark from a code block
|
|
10
|
+
before nesting it into a list item when joining from a gap cursor. Behind the
|
|
11
|
+
`platform_editor_resizer_selector_jsdom_fix` experiment, make the panel and rule breakout resizer
|
|
12
|
+
selectors parseable by jsdom (`> *[data-prosemirror-node-name=…]`).
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 25.0.3
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -10,7 +10,6 @@ var _model = require("@atlaskit/editor-prosemirror/model");
|
|
|
10
10
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
11
11
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
12
12
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
13
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
14
13
|
var _analytics2 = require("../pm-plugins/utils/analytics");
|
|
15
14
|
var _checkFragment = require("../pm-plugins/utils/check-fragment");
|
|
16
15
|
var _collapsedHeading = require("../pm-plugins/utils/collapsed-heading");
|
|
@@ -166,10 +165,8 @@ var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
|
|
|
166
165
|
breakout = _ref4.breakout;
|
|
167
166
|
tr.doc.nodesBetween($from.pos, to, function (node, pos, parent) {
|
|
168
167
|
// should never remove breakout from previous layoutSection
|
|
169
|
-
if (
|
|
170
|
-
|
|
171
|
-
return false;
|
|
172
|
-
}
|
|
168
|
+
if (node.type.name === 'layoutSection') {
|
|
169
|
+
return false;
|
|
173
170
|
}
|
|
174
171
|
|
|
175
172
|
// breakout doesn't exist on nested nodes
|
|
@@ -186,28 +183,6 @@ var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
|
|
|
186
183
|
fromContentWithoutBreakout = tr.doc.slice($from.pos, to).content;
|
|
187
184
|
return fromContentWithoutBreakout;
|
|
188
185
|
};
|
|
189
|
-
var getBreakoutMode = function getBreakoutMode(content, breakout) {
|
|
190
|
-
if (content instanceof _model.Node) {
|
|
191
|
-
var _content$marks$find;
|
|
192
|
-
return (_content$marks$find = content.marks.find(function (m) {
|
|
193
|
-
return m.type === breakout;
|
|
194
|
-
})) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs.mode;
|
|
195
|
-
} else if (content instanceof _model.Fragment) {
|
|
196
|
-
// Find the first breakout mode in the fragment
|
|
197
|
-
var firstBreakoutMode;
|
|
198
|
-
for (var i = 0; i < content.childCount; i++) {
|
|
199
|
-
var child = content.child(i);
|
|
200
|
-
var breakoutMark = child.marks.find(function (m) {
|
|
201
|
-
return m.type === breakout;
|
|
202
|
-
});
|
|
203
|
-
if (breakoutMark) {
|
|
204
|
-
firstBreakoutMode = breakoutMark.attrs.mode;
|
|
205
|
-
break;
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
return firstBreakoutMode;
|
|
209
|
-
}
|
|
210
|
-
};
|
|
211
186
|
var getBreakoutModeAndWidth = function getBreakoutModeAndWidth(content, breakout) {
|
|
212
187
|
var findBreakoutMark = function findBreakoutMark(node) {
|
|
213
188
|
return node.marks.find(function (m) {
|
|
@@ -264,15 +239,9 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
|
|
|
264
239
|
|
|
265
240
|
// get breakout mode from destination node,
|
|
266
241
|
// if not found, get from source node,
|
|
267
|
-
var
|
|
268
|
-
|
|
269
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true)) {
|
|
270
|
-
var _ref8 = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {};
|
|
271
|
-
breakoutMode = _ref8.breakoutMode;
|
|
242
|
+
var _ref8 = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {},
|
|
243
|
+
breakoutMode = _ref8.breakoutMode,
|
|
272
244
|
breakoutWidth = _ref8.breakoutWidth;
|
|
273
|
-
} else {
|
|
274
|
-
breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
|
|
275
|
-
}
|
|
276
245
|
|
|
277
246
|
// we don't want to remove marks when moving/re-ordering layoutSection
|
|
278
247
|
var shouldRemoveMarks = $sourceFrom.node().type !== layoutSection;
|
|
@@ -320,16 +289,10 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
|
|
|
320
289
|
tr = (0, _removeFromSource.removeFromSource)(tr, $sourceFrom, sourceTo);
|
|
321
290
|
var mappedTo = tr.mapping.map(to);
|
|
322
291
|
tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
|
|
323
|
-
|
|
324
|
-
breakoutMode
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
})]);
|
|
328
|
-
} else {
|
|
329
|
-
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
330
|
-
mode: breakoutMode
|
|
331
|
-
})]);
|
|
332
|
-
}
|
|
292
|
+
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
293
|
+
mode: breakoutMode,
|
|
294
|
+
width: breakoutWidth
|
|
295
|
+
})]);
|
|
333
296
|
if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
|
|
334
297
|
// layout created via drag and drop will always be 2 columns
|
|
335
298
|
(0, _analytics2.fireInsertLayoutAnalytics)(tr, api, sourceNodeTypes, hasSelectedMultipleNodes, 2);
|
|
@@ -62,7 +62,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
|
|
|
62
62
|
(0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
|
|
63
63
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
64
64
|
var key = (0, _uuid.v4)();
|
|
65
|
-
var widgetSpec =
|
|
65
|
+
var widgetSpec = {
|
|
66
66
|
side: -1,
|
|
67
67
|
type: _decorationsCommon.TYPE_HANDLE_DEC,
|
|
68
68
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
@@ -73,12 +73,6 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
|
|
|
73
73
|
* Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
|
|
74
74
|
*/
|
|
75
75
|
marks: (0, _marks.getMatchingBlockMarks)(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize])
|
|
76
|
-
} : {
|
|
77
|
-
side: -1,
|
|
78
|
-
type: _decorationsCommon.TYPE_HANDLE_DEC,
|
|
79
|
-
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
80
|
-
testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.v4)()),
|
|
81
|
-
marks: (0, _marks.getMatchingBlockMarks)(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize])
|
|
82
76
|
};
|
|
83
77
|
return _view.Decoration.widget(pos, function (view, getPosUnsafe) {
|
|
84
78
|
var element = document.createElement('span');
|
|
@@ -10,7 +10,6 @@ var _react = require("react");
|
|
|
10
10
|
var _uuid = require("uuid");
|
|
11
11
|
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
12
12
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
13
|
-
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
14
13
|
var _consts = require("../ui/consts");
|
|
15
14
|
var _quickInsertButton = require("../ui/quick-insert-button");
|
|
16
15
|
var _marks = require("./utils/marks");
|
|
@@ -52,7 +51,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
|
|
|
52
51
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
53
52
|
var key = (0, _uuid.v4)();
|
|
54
53
|
var cleanupCallbacks = [];
|
|
55
|
-
var widgetSpec =
|
|
54
|
+
var widgetSpec = {
|
|
56
55
|
side: -2,
|
|
57
56
|
type: TYPE_QUICK_INSERT,
|
|
58
57
|
/**
|
|
@@ -68,15 +67,6 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
|
|
|
68
67
|
cb();
|
|
69
68
|
});
|
|
70
69
|
}
|
|
71
|
-
} : {
|
|
72
|
-
side: -2,
|
|
73
|
-
type: TYPE_QUICK_INSERT,
|
|
74
|
-
destroy: function destroy(_) {
|
|
75
|
-
nodeViewPortalProviderAPI.remove(key);
|
|
76
|
-
cleanupCallbacks.forEach(function (cb) {
|
|
77
|
-
cb();
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
70
|
};
|
|
81
71
|
return _view.Decoration.widget(rootPos, function (view, getPos) {
|
|
82
72
|
var element = document.createElement('span');
|
|
@@ -8,18 +8,15 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
|
8
8
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
9
|
var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
10
10
|
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
11
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
12
11
|
var firstNodeDecPluginKey = exports.firstNodeDecPluginKey = new _state.PluginKey('firstNodeDec');
|
|
13
12
|
var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
|
|
14
13
|
var firstNode = state.doc.firstChild;
|
|
15
14
|
if (!firstNode) {
|
|
16
15
|
return _view.DecorationSet.empty;
|
|
17
16
|
}
|
|
18
|
-
var firstNodeDecoration =
|
|
17
|
+
var firstNodeDecoration = _view.Decoration.node(0, firstNode.nodeSize, {
|
|
19
18
|
style: 'margin-top: 0;',
|
|
20
19
|
class: 'first-node-in-document'
|
|
21
|
-
}) : _view.Decoration.node(0, firstNode.nodeSize, {
|
|
22
|
-
style: 'margin-top: 0'
|
|
23
20
|
});
|
|
24
21
|
return _view.DecorationSet.create(state.doc, [firstNodeDecoration]);
|
|
25
22
|
};
|
|
@@ -450,7 +450,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
|
|
|
450
450
|
|
|
451
451
|
// Re-create node decorations
|
|
452
452
|
var isDecSetEmpty = decorations === _view.DecorationSet.empty;
|
|
453
|
-
var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged ||
|
|
453
|
+
var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || hasJustFinishedResizing;
|
|
454
454
|
var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
|
|
455
455
|
// Skip expensive anchor node decoration recalculations when native anchor support is enabled
|
|
456
456
|
!((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration'));
|
package/dist/cjs/ui/consts.js
CHANGED
|
@@ -70,7 +70,7 @@ var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, par
|
|
|
70
70
|
} else {
|
|
71
71
|
breakoutResizableNodesList = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [].concat((0, _toConsumableArray2.default)(_utils.breakoutResizableNodes), ['rule', 'panel']) : _utils.breakoutResizableNodes;
|
|
72
72
|
}
|
|
73
|
-
if (
|
|
73
|
+
if (breakoutResizableNodesList.includes(nodeType)) {
|
|
74
74
|
if (nodeType === 'layoutSection') {
|
|
75
75
|
return DRAG_HANDLE_MAX_GAP + 20;
|
|
76
76
|
} else {
|
|
@@ -94,7 +94,7 @@ var rootElementGap = exports.rootElementGap = function rootElementGap(nodeType)
|
|
|
94
94
|
} else {
|
|
95
95
|
breakoutResizableNodesList = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [].concat((0, _toConsumableArray2.default)(_utils.breakoutResizableNodes), ['rule', 'panel']) : _utils.breakoutResizableNodes;
|
|
96
96
|
}
|
|
97
|
-
if (nodeTypeExcludeList.includes(nodeType) ||
|
|
97
|
+
if (nodeTypeExcludeList.includes(nodeType) || breakoutResizableNodesList.includes(nodeType)) {
|
|
98
98
|
if (nodeType === 'layoutSection') {
|
|
99
99
|
return DRAG_HANDLE_MAX_GAP + 20;
|
|
100
100
|
} else {
|
|
@@ -4,7 +4,6 @@ import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
|
4
4
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
7
|
import { attachMoveNodeAnalytics, fireInsertLayoutAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
|
|
9
8
|
import { containsNodeOfType, isFragmentOfType } from '../pm-plugins/utils/check-fragment';
|
|
10
9
|
import { isCollapsedHeading } from '../pm-plugins/utils/collapsed-heading';
|
|
@@ -167,10 +166,8 @@ const removeBreakoutMarks = (tr, $from, to) => {
|
|
|
167
166
|
} = tr.doc.type.schema.marks || {};
|
|
168
167
|
tr.doc.nodesBetween($from.pos, to, (node, pos, parent) => {
|
|
169
168
|
// should never remove breakout from previous layoutSection
|
|
170
|
-
if (
|
|
171
|
-
|
|
172
|
-
return false;
|
|
173
|
-
}
|
|
169
|
+
if (node.type.name === 'layoutSection') {
|
|
170
|
+
return false;
|
|
174
171
|
}
|
|
175
172
|
|
|
176
173
|
// breakout doesn't exist on nested nodes
|
|
@@ -185,24 +182,6 @@ const removeBreakoutMarks = (tr, $from, to) => {
|
|
|
185
182
|
fromContentWithoutBreakout = tr.doc.slice($from.pos, to).content;
|
|
186
183
|
return fromContentWithoutBreakout;
|
|
187
184
|
};
|
|
188
|
-
const getBreakoutMode = (content, breakout) => {
|
|
189
|
-
if (content instanceof PMNode) {
|
|
190
|
-
var _content$marks$find;
|
|
191
|
-
return (_content$marks$find = content.marks.find(m => m.type === breakout)) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs.mode;
|
|
192
|
-
} else if (content instanceof Fragment) {
|
|
193
|
-
// Find the first breakout mode in the fragment
|
|
194
|
-
let firstBreakoutMode;
|
|
195
|
-
for (let i = 0; i < content.childCount; i++) {
|
|
196
|
-
const child = content.child(i);
|
|
197
|
-
const breakoutMark = child.marks.find(m => m.type === breakout);
|
|
198
|
-
if (breakoutMark) {
|
|
199
|
-
firstBreakoutMode = breakoutMark.attrs.mode;
|
|
200
|
-
break;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
return firstBreakoutMode;
|
|
204
|
-
}
|
|
205
|
-
};
|
|
206
185
|
const getBreakoutModeAndWidth = (content, breakout) => {
|
|
207
186
|
const findBreakoutMark = node => node.marks.find(m => m.type === breakout);
|
|
208
187
|
const extractBreakoutAttributes = mark => mark ? {
|
|
@@ -256,16 +235,10 @@ export const moveToLayout = api => (from, to, options) => ({
|
|
|
256
235
|
|
|
257
236
|
// get breakout mode from destination node,
|
|
258
237
|
// if not found, get from source node,
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
breakoutMode,
|
|
264
|
-
breakoutWidth
|
|
265
|
-
} = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {});
|
|
266
|
-
} else {
|
|
267
|
-
breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
|
|
268
|
-
}
|
|
238
|
+
const {
|
|
239
|
+
breakoutMode,
|
|
240
|
+
breakoutWidth
|
|
241
|
+
} = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {};
|
|
269
242
|
|
|
270
243
|
// we don't want to remove marks when moving/re-ordering layoutSection
|
|
271
244
|
const shouldRemoveMarks = $sourceFrom.node().type !== layoutSection;
|
|
@@ -313,16 +286,10 @@ export const moveToLayout = api => (from, to, options) => ({
|
|
|
313
286
|
tr = removeFromSource(tr, $sourceFrom, sourceTo);
|
|
314
287
|
const mappedTo = tr.mapping.map(to);
|
|
315
288
|
tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
|
|
316
|
-
|
|
317
|
-
breakoutMode
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
})]);
|
|
321
|
-
} else {
|
|
322
|
-
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
323
|
-
mode: breakoutMode
|
|
324
|
-
})]);
|
|
325
|
-
}
|
|
289
|
+
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
290
|
+
mode: breakoutMode,
|
|
291
|
+
width: breakoutWidth
|
|
292
|
+
})]);
|
|
326
293
|
if (fg('platform_editor_column_count_analytics')) {
|
|
327
294
|
// layout created via drag and drop will always be 2 columns
|
|
328
295
|
fireInsertLayoutAnalytics(tr, api, sourceNodeTypes, hasSelectedMultipleNodes, 2);
|
|
@@ -49,7 +49,7 @@ export const dragHandleDecoration = ({
|
|
|
49
49
|
unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
|
|
50
50
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
51
51
|
const key = uuid();
|
|
52
|
-
const widgetSpec =
|
|
52
|
+
const widgetSpec = {
|
|
53
53
|
side: -1,
|
|
54
54
|
type: TYPE_HANDLE_DEC,
|
|
55
55
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
@@ -60,12 +60,6 @@ export const dragHandleDecoration = ({
|
|
|
60
60
|
* Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
|
|
61
61
|
*/
|
|
62
62
|
marks: getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize])
|
|
63
|
-
} : {
|
|
64
|
-
side: -1,
|
|
65
|
-
type: TYPE_HANDLE_DEC,
|
|
66
|
-
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
67
|
-
testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
|
|
68
|
-
marks: getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize])
|
|
69
63
|
};
|
|
70
64
|
return Decoration.widget(pos, (view, getPosUnsafe) => {
|
|
71
65
|
const element = document.createElement('span');
|
|
@@ -3,7 +3,6 @@ import { createElement } from 'react';
|
|
|
3
3
|
import { v4 as uuid } from 'uuid';
|
|
4
4
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
6
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
7
6
|
import { ACTIVE_QUICK_INSERT_ATTR } from '../ui/consts';
|
|
8
7
|
import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
|
|
9
8
|
import { getMatchingBlockMarks } from './utils/marks';
|
|
@@ -38,7 +37,7 @@ export const quickInsertButtonDecoration = ({
|
|
|
38
37
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
39
38
|
const key = uuid();
|
|
40
39
|
const cleanupCallbacks = [];
|
|
41
|
-
const widgetSpec =
|
|
40
|
+
const widgetSpec = {
|
|
42
41
|
side: -2,
|
|
43
42
|
type: TYPE_QUICK_INSERT,
|
|
44
43
|
/**
|
|
@@ -54,15 +53,6 @@ export const quickInsertButtonDecoration = ({
|
|
|
54
53
|
cb();
|
|
55
54
|
});
|
|
56
55
|
}
|
|
57
|
-
} : {
|
|
58
|
-
side: -2,
|
|
59
|
-
type: TYPE_QUICK_INSERT,
|
|
60
|
-
destroy: _ => {
|
|
61
|
-
nodeViewPortalProviderAPI.remove(key);
|
|
62
|
-
cleanupCallbacks.forEach(cb => {
|
|
63
|
-
cb();
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
56
|
};
|
|
67
57
|
return Decoration.widget(rootPos, (view, getPos) => {
|
|
68
58
|
const element = document.createElement('span');
|
|
@@ -2,18 +2,15 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
|
|
4
4
|
import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
5
|
export const firstNodeDecPluginKey = new PluginKey('firstNodeDec');
|
|
7
6
|
const createFirstNodeDecSet = state => {
|
|
8
7
|
const firstNode = state.doc.firstChild;
|
|
9
8
|
if (!firstNode) {
|
|
10
9
|
return DecorationSet.empty;
|
|
11
10
|
}
|
|
12
|
-
const firstNodeDecoration =
|
|
11
|
+
const firstNodeDecoration = Decoration.node(0, firstNode.nodeSize, {
|
|
13
12
|
style: 'margin-top: 0;',
|
|
14
13
|
class: 'first-node-in-document'
|
|
15
|
-
}) : Decoration.node(0, firstNode.nodeSize, {
|
|
16
|
-
style: 'margin-top: 0'
|
|
17
14
|
});
|
|
18
15
|
return DecorationSet.create(state.doc, [firstNodeDecoration]);
|
|
19
16
|
};
|
|
@@ -444,7 +444,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
|
|
|
444
444
|
|
|
445
445
|
// Re-create node decorations
|
|
446
446
|
const isDecSetEmpty = decorations === DecorationSet.empty;
|
|
447
|
-
const isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged ||
|
|
447
|
+
const isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || hasJustFinishedResizing;
|
|
448
448
|
const shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
|
|
449
449
|
// Skip expensive anchor node decoration recalculations when native anchor support is enabled
|
|
450
450
|
!(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration'));
|
package/dist/es2019/ui/consts.js
CHANGED
|
@@ -58,7 +58,7 @@ export const dragHandleGap = (nodeType, parentNodeType) => {
|
|
|
58
58
|
} else {
|
|
59
59
|
breakoutResizableNodesList = expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [...breakoutResizableNodesNew, 'rule', 'panel'] : breakoutResizableNodesNew;
|
|
60
60
|
}
|
|
61
|
-
if (
|
|
61
|
+
if (breakoutResizableNodesList.includes(nodeType)) {
|
|
62
62
|
if (nodeType === 'layoutSection') {
|
|
63
63
|
return DRAG_HANDLE_MAX_GAP + 20;
|
|
64
64
|
} else {
|
|
@@ -82,7 +82,7 @@ export const rootElementGap = nodeType => {
|
|
|
82
82
|
} else {
|
|
83
83
|
breakoutResizableNodesList = expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [...breakoutResizableNodesNew, 'rule', 'panel'] : breakoutResizableNodesNew;
|
|
84
84
|
}
|
|
85
|
-
if (nodeTypeExcludeList.includes(nodeType) ||
|
|
85
|
+
if (nodeTypeExcludeList.includes(nodeType) || breakoutResizableNodesList.includes(nodeType)) {
|
|
86
86
|
if (nodeType === 'layoutSection') {
|
|
87
87
|
return DRAG_HANDLE_MAX_GAP + 20;
|
|
88
88
|
} else {
|
|
@@ -4,7 +4,6 @@ import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
|
4
4
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
7
|
import { attachMoveNodeAnalytics, fireInsertLayoutAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
|
|
9
8
|
import { containsNodeOfType, isFragmentOfType } from '../pm-plugins/utils/check-fragment';
|
|
10
9
|
import { isCollapsedHeading } from '../pm-plugins/utils/collapsed-heading';
|
|
@@ -160,10 +159,8 @@ var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
|
|
|
160
159
|
breakout = _ref4.breakout;
|
|
161
160
|
tr.doc.nodesBetween($from.pos, to, function (node, pos, parent) {
|
|
162
161
|
// should never remove breakout from previous layoutSection
|
|
163
|
-
if (
|
|
164
|
-
|
|
165
|
-
return false;
|
|
166
|
-
}
|
|
162
|
+
if (node.type.name === 'layoutSection') {
|
|
163
|
+
return false;
|
|
167
164
|
}
|
|
168
165
|
|
|
169
166
|
// breakout doesn't exist on nested nodes
|
|
@@ -180,28 +177,6 @@ var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
|
|
|
180
177
|
fromContentWithoutBreakout = tr.doc.slice($from.pos, to).content;
|
|
181
178
|
return fromContentWithoutBreakout;
|
|
182
179
|
};
|
|
183
|
-
var getBreakoutMode = function getBreakoutMode(content, breakout) {
|
|
184
|
-
if (content instanceof PMNode) {
|
|
185
|
-
var _content$marks$find;
|
|
186
|
-
return (_content$marks$find = content.marks.find(function (m) {
|
|
187
|
-
return m.type === breakout;
|
|
188
|
-
})) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs.mode;
|
|
189
|
-
} else if (content instanceof Fragment) {
|
|
190
|
-
// Find the first breakout mode in the fragment
|
|
191
|
-
var firstBreakoutMode;
|
|
192
|
-
for (var i = 0; i < content.childCount; i++) {
|
|
193
|
-
var child = content.child(i);
|
|
194
|
-
var breakoutMark = child.marks.find(function (m) {
|
|
195
|
-
return m.type === breakout;
|
|
196
|
-
});
|
|
197
|
-
if (breakoutMark) {
|
|
198
|
-
firstBreakoutMode = breakoutMark.attrs.mode;
|
|
199
|
-
break;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
return firstBreakoutMode;
|
|
203
|
-
}
|
|
204
|
-
};
|
|
205
180
|
var getBreakoutModeAndWidth = function getBreakoutModeAndWidth(content, breakout) {
|
|
206
181
|
var findBreakoutMark = function findBreakoutMark(node) {
|
|
207
182
|
return node.marks.find(function (m) {
|
|
@@ -258,15 +233,9 @@ export var moveToLayout = function moveToLayout(api) {
|
|
|
258
233
|
|
|
259
234
|
// get breakout mode from destination node,
|
|
260
235
|
// if not found, get from source node,
|
|
261
|
-
var
|
|
262
|
-
|
|
263
|
-
if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
|
|
264
|
-
var _ref8 = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {};
|
|
265
|
-
breakoutMode = _ref8.breakoutMode;
|
|
236
|
+
var _ref8 = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {},
|
|
237
|
+
breakoutMode = _ref8.breakoutMode,
|
|
266
238
|
breakoutWidth = _ref8.breakoutWidth;
|
|
267
|
-
} else {
|
|
268
|
-
breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
|
|
269
|
-
}
|
|
270
239
|
|
|
271
240
|
// we don't want to remove marks when moving/re-ordering layoutSection
|
|
272
241
|
var shouldRemoveMarks = $sourceFrom.node().type !== layoutSection;
|
|
@@ -314,16 +283,10 @@ export var moveToLayout = function moveToLayout(api) {
|
|
|
314
283
|
tr = removeFromSource(tr, $sourceFrom, sourceTo);
|
|
315
284
|
var mappedTo = tr.mapping.map(to);
|
|
316
285
|
tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
|
|
317
|
-
|
|
318
|
-
breakoutMode
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
})]);
|
|
322
|
-
} else {
|
|
323
|
-
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
324
|
-
mode: breakoutMode
|
|
325
|
-
})]);
|
|
326
|
-
}
|
|
286
|
+
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
287
|
+
mode: breakoutMode,
|
|
288
|
+
width: breakoutWidth
|
|
289
|
+
})]);
|
|
327
290
|
if (fg('platform_editor_column_count_analytics')) {
|
|
328
291
|
// layout created via drag and drop will always be 2 columns
|
|
329
292
|
fireInsertLayoutAnalytics(tr, api, sourceNodeTypes, hasSelectedMultipleNodes, 2);
|
|
@@ -54,7 +54,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
|
|
|
54
54
|
unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
|
|
55
55
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
56
56
|
var key = uuid();
|
|
57
|
-
var widgetSpec =
|
|
57
|
+
var widgetSpec = {
|
|
58
58
|
side: -1,
|
|
59
59
|
type: TYPE_HANDLE_DEC,
|
|
60
60
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
@@ -65,12 +65,6 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
|
|
|
65
65
|
* Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
|
|
66
66
|
*/
|
|
67
67
|
marks: getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize])
|
|
68
|
-
} : {
|
|
69
|
-
side: -1,
|
|
70
|
-
type: TYPE_HANDLE_DEC,
|
|
71
|
-
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
72
|
-
testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
|
|
73
|
-
marks: getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize])
|
|
74
68
|
};
|
|
75
69
|
return Decoration.widget(pos, function (view, getPosUnsafe) {
|
|
76
70
|
var element = document.createElement('span');
|
|
@@ -4,7 +4,6 @@ import { createElement } from 'react';
|
|
|
4
4
|
import { v4 as uuid } from 'uuid';
|
|
5
5
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
7
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
8
7
|
import { ACTIVE_QUICK_INSERT_ATTR } from '../ui/consts';
|
|
9
8
|
import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
|
|
10
9
|
import { getMatchingBlockMarks } from './utils/marks';
|
|
@@ -44,7 +43,7 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
|
|
|
44
43
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
45
44
|
var key = uuid();
|
|
46
45
|
var cleanupCallbacks = [];
|
|
47
|
-
var widgetSpec =
|
|
46
|
+
var widgetSpec = {
|
|
48
47
|
side: -2,
|
|
49
48
|
type: TYPE_QUICK_INSERT,
|
|
50
49
|
/**
|
|
@@ -60,15 +59,6 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
|
|
|
60
59
|
cb();
|
|
61
60
|
});
|
|
62
61
|
}
|
|
63
|
-
} : {
|
|
64
|
-
side: -2,
|
|
65
|
-
type: TYPE_QUICK_INSERT,
|
|
66
|
-
destroy: function destroy(_) {
|
|
67
|
-
nodeViewPortalProviderAPI.remove(key);
|
|
68
|
-
cleanupCallbacks.forEach(function (cb) {
|
|
69
|
-
cb();
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
62
|
};
|
|
73
63
|
return Decoration.widget(rootPos, function (view, getPos) {
|
|
74
64
|
var element = document.createElement('span');
|
|
@@ -2,18 +2,15 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
|
|
4
4
|
import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
5
|
export var firstNodeDecPluginKey = new PluginKey('firstNodeDec');
|
|
7
6
|
var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
|
|
8
7
|
var firstNode = state.doc.firstChild;
|
|
9
8
|
if (!firstNode) {
|
|
10
9
|
return DecorationSet.empty;
|
|
11
10
|
}
|
|
12
|
-
var firstNodeDecoration =
|
|
11
|
+
var firstNodeDecoration = Decoration.node(0, firstNode.nodeSize, {
|
|
13
12
|
style: 'margin-top: 0;',
|
|
14
13
|
class: 'first-node-in-document'
|
|
15
|
-
}) : Decoration.node(0, firstNode.nodeSize, {
|
|
16
|
-
style: 'margin-top: 0'
|
|
17
14
|
});
|
|
18
15
|
return DecorationSet.create(state.doc, [firstNodeDecoration]);
|
|
19
16
|
};
|
|
@@ -443,7 +443,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
|
|
|
443
443
|
|
|
444
444
|
// Re-create node decorations
|
|
445
445
|
var isDecSetEmpty = decorations === DecorationSet.empty;
|
|
446
|
-
var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged ||
|
|
446
|
+
var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || hasJustFinishedResizing;
|
|
447
447
|
var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
|
|
448
448
|
// Skip expensive anchor node decoration recalculations when native anchor support is enabled
|
|
449
449
|
!(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration'));
|
package/dist/esm/ui/consts.js
CHANGED
|
@@ -63,7 +63,7 @@ export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
|
|
|
63
63
|
} else {
|
|
64
64
|
breakoutResizableNodesList = expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [].concat(_toConsumableArray(breakoutResizableNodesNew), ['rule', 'panel']) : breakoutResizableNodesNew;
|
|
65
65
|
}
|
|
66
|
-
if (
|
|
66
|
+
if (breakoutResizableNodesList.includes(nodeType)) {
|
|
67
67
|
if (nodeType === 'layoutSection') {
|
|
68
68
|
return DRAG_HANDLE_MAX_GAP + 20;
|
|
69
69
|
} else {
|
|
@@ -87,7 +87,7 @@ export var rootElementGap = function rootElementGap(nodeType) {
|
|
|
87
87
|
} else {
|
|
88
88
|
breakoutResizableNodesList = expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [].concat(_toConsumableArray(breakoutResizableNodesNew), ['rule', 'panel']) : breakoutResizableNodesNew;
|
|
89
89
|
}
|
|
90
|
-
if (nodeTypeExcludeList.includes(nodeType) ||
|
|
90
|
+
if (nodeTypeExcludeList.includes(nodeType) || breakoutResizableNodesList.includes(nodeType)) {
|
|
91
91
|
if (nodeType === 'layoutSection') {
|
|
92
92
|
return DRAG_HANDLE_MAX_GAP + 20;
|
|
93
93
|
} else {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "25.0.
|
|
3
|
+
"version": "25.0.4",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@atlaskit/primitives": "^22.5.0",
|
|
62
62
|
"@atlaskit/section-message": "^10.2.0",
|
|
63
63
|
"@atlaskit/theme": "^28.2.0",
|
|
64
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
64
|
+
"@atlaskit/tmp-editor-statsig": "^224.0.0",
|
|
65
65
|
"@atlaskit/tokens": "^20.3.0",
|
|
66
66
|
"@atlaskit/tooltip": "^24.4.0",
|
|
67
67
|
"@babel/runtime": "^7.0.0",
|