@atlaskit/editor-plugin-block-controls 1.8.1 → 1.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/cjs/commands/show-drag-handle.js +3 -1
- package/dist/cjs/pm-plugins/decorations.js +2 -1
- package/dist/cjs/pm-plugins/main.js +84 -39
- package/dist/es2019/commands/show-drag-handle.js +3 -1
- package/dist/es2019/pm-plugins/decorations.js +2 -1
- package/dist/es2019/pm-plugins/main.js +76 -31
- package/dist/esm/commands/show-drag-handle.js +3 -1
- package/dist/esm/pm-plugins/decorations.js +2 -1
- package/dist/esm/pm-plugins/main.js +84 -39
- package/package.json +14 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 1.9.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 1.9.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#124209](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124209)
|
|
14
|
+
[`8aa1792f12ed3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8aa1792f12ed3) -
|
|
15
|
+
bump @atlaskit/editor-prosemirror to 5.0.0, bump @atlaskit/adf-schema to 40.1.0
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [#124232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124232)
|
|
20
|
+
[`0994c8bb3ee39`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0994c8bb3ee39) -
|
|
21
|
+
ED-24321 Fix issue where table nodes wrapped in fragment marks can't be selected using keyboard
|
|
22
|
+
shortcut
|
|
23
|
+
- [#123552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123552)
|
|
24
|
+
[`ee13728534201`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee13728534201) -
|
|
25
|
+
Fix drop targets now showing when document changes during drag
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
|
|
3
28
|
## 1.8.1
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
|
@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.showDragHandleAtSelection = void 0;
|
|
7
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
7
8
|
var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
|
|
8
9
|
return function (state, _, view) {
|
|
9
10
|
var rootPos = state.selection.$from.before(1);
|
|
10
11
|
var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
|
|
11
|
-
var
|
|
12
|
+
var nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
|
|
13
|
+
var rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
|
|
12
14
|
if (rootNode) {
|
|
13
15
|
var anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
|
|
14
16
|
var nodeType = rootNode.getAttribute('data-drag-handler-node-type');
|
|
@@ -21,7 +21,8 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
21
21
|
// and allows us to easily map the updated position in the plugin apply method.
|
|
22
22
|
var decorationState = [];
|
|
23
23
|
var prevNode;
|
|
24
|
-
|
|
24
|
+
var state = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
|
|
25
|
+
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, _parent, index) {
|
|
25
26
|
decorationState.push({
|
|
26
27
|
index: index,
|
|
27
28
|
pos: pos
|
|
@@ -144,6 +144,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
144
144
|
}
|
|
145
145
|
var isDecsMissing = false;
|
|
146
146
|
var isHandleMissing = false;
|
|
147
|
+
var isDropTargetsMissing = false;
|
|
147
148
|
if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
|
|
148
149
|
// Ensure decorations stay in sync when nodes are added or removed from the doc
|
|
149
150
|
isHandleMissing = !(meta !== null && meta !== void 0 && meta.activeNode) && !decorations.find().some(function (_ref6) {
|
|
@@ -154,7 +155,14 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
154
155
|
var spec = _ref7.spec;
|
|
155
156
|
return spec.id !== 'drag-handle';
|
|
156
157
|
}).length;
|
|
157
|
-
isDecsMissing = !isDragging && decsLength !== newState.doc.childCount;
|
|
158
|
+
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
|
|
159
|
+
}
|
|
160
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372')) {
|
|
161
|
+
var dropTargetLen = decorations.find().filter(function (_ref8) {
|
|
162
|
+
var spec = _ref8.spec;
|
|
163
|
+
return spec.type === 'drop-target-decoration';
|
|
164
|
+
}).length;
|
|
165
|
+
isDropTargetsMissing = isDragging && dropTargetLen !== newState.doc.childCount + 1;
|
|
158
166
|
}
|
|
159
167
|
|
|
160
168
|
// This is not targeted enough - it's trying to catch events like expand being set to breakout
|
|
@@ -172,8 +180,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
172
180
|
// Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
|
|
173
181
|
if (redrawDecorations && !isResizerResizing && api) {
|
|
174
182
|
if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_24000')) {
|
|
175
|
-
var oldNodeDecs = decorations.find().filter(function (
|
|
176
|
-
var spec =
|
|
183
|
+
var oldNodeDecs = decorations.find().filter(function (_ref9) {
|
|
184
|
+
var spec = _ref9.spec;
|
|
177
185
|
return spec.type !== 'drop-target-decoration';
|
|
178
186
|
});
|
|
179
187
|
decorations = decorations.remove(oldNodeDecs);
|
|
@@ -220,8 +228,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
220
228
|
|
|
221
229
|
// Remove previous drag handle widget and draw new drag handle widget when activeNode changes
|
|
222
230
|
if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
|
|
223
|
-
var _oldHandle = decorations.find().filter(function (
|
|
224
|
-
var spec =
|
|
231
|
+
var _oldHandle = decorations.find().filter(function (_ref10) {
|
|
232
|
+
var spec = _ref10.spec;
|
|
225
233
|
return spec.id === 'drag-handle';
|
|
226
234
|
});
|
|
227
235
|
decorations = decorations.remove(_oldHandle);
|
|
@@ -232,8 +240,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
232
240
|
var _activeNodeWithNewNod;
|
|
233
241
|
// Remove previous drag handle widget and draw new drag handle widget when node type changes
|
|
234
242
|
if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
|
|
235
|
-
var _oldHandle2 = decorations.find().filter(function (
|
|
236
|
-
var spec =
|
|
243
|
+
var _oldHandle2 = decorations.find().filter(function (_ref11) {
|
|
244
|
+
var spec = _ref11.spec;
|
|
237
245
|
return spec.id === 'drag-handle';
|
|
238
246
|
});
|
|
239
247
|
decorations = decorations.remove(_oldHandle2);
|
|
@@ -241,47 +249,84 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
241
249
|
decorations = decorations.add(newState.doc, [_decs]);
|
|
242
250
|
}
|
|
243
251
|
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
if (
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
252
|
+
var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
253
|
+
var shouldMapDropTargets = false;
|
|
254
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372')) {
|
|
255
|
+
shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging;
|
|
256
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
257
|
+
// Remove drop target decoration when dragging stops
|
|
258
|
+
var dropTargetDecs = decorations.find().filter(function (_ref12) {
|
|
259
|
+
var spec = _ref12.spec;
|
|
260
|
+
return spec.type === 'drop-target-decoration';
|
|
261
|
+
});
|
|
262
|
+
decorations = decorations.remove(dropTargetDecs);
|
|
263
|
+
}
|
|
264
|
+
if (api) {
|
|
265
|
+
// Add drop targets when node is being dragged
|
|
266
|
+
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
267
|
+
if (shouldUpdateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
|
|
268
|
+
var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
|
|
269
|
+
_decs2 = _dropTargetDecoration.decs,
|
|
270
|
+
updatedDecorationState = _dropTargetDecoration.decorationState;
|
|
271
|
+
decorationState = updatedDecorationState;
|
|
272
|
+
decorations = decorations.add(newState.doc, _decs2);
|
|
273
|
+
}
|
|
254
274
|
}
|
|
255
|
-
}
|
|
256
275
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
276
|
+
// Map drop target decoration positions when the document changes
|
|
277
|
+
if (shouldMapDropTargets) {
|
|
278
|
+
decorationState = decorationState.map(function (_ref13) {
|
|
279
|
+
var index = _ref13.index,
|
|
280
|
+
pos = _ref13.pos;
|
|
281
|
+
return {
|
|
282
|
+
index: index,
|
|
283
|
+
pos: tr.mapping.map(pos)
|
|
284
|
+
};
|
|
285
|
+
});
|
|
286
|
+
}
|
|
287
|
+
} else {
|
|
288
|
+
if (api) {
|
|
289
|
+
// Add drop targets when node is being dragged
|
|
290
|
+
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
291
|
+
var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
|
|
292
|
+
if (shouldShowDragTarget || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
|
|
293
|
+
var _dropTargetDecoration2 = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
|
|
294
|
+
_decs3 = _dropTargetDecoration2.decs,
|
|
295
|
+
_updatedDecorationState = _dropTargetDecoration2.decorationState;
|
|
296
|
+
decorationState = _updatedDecorationState;
|
|
297
|
+
decorations = decorations.add(newState.doc, _decs3);
|
|
298
|
+
}
|
|
299
|
+
}
|
|
265
300
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
301
|
+
// Remove drop target decoration when dragging stops
|
|
302
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24330') ? true : !tr.docChanged)) {
|
|
303
|
+
var _dropTargetDecs = decorations.find().filter(function (_ref14) {
|
|
304
|
+
var spec = _ref14.spec;
|
|
305
|
+
return spec.type === 'drop-target-decoration';
|
|
306
|
+
});
|
|
307
|
+
decorations = decorations.remove(_dropTargetDecs);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
// Map drop target decoration positions when the document changes
|
|
311
|
+
if (tr.docChanged && isDragging) {
|
|
312
|
+
decorationState = decorationState.map(function (_ref15) {
|
|
313
|
+
var index = _ref15.index,
|
|
314
|
+
pos = _ref15.pos;
|
|
315
|
+
return {
|
|
316
|
+
index: index,
|
|
317
|
+
pos: tr.mapping.map(pos)
|
|
318
|
+
};
|
|
319
|
+
});
|
|
320
|
+
}
|
|
276
321
|
}
|
|
277
322
|
|
|
278
323
|
// Map decorations if document changes and node decorations do not need to be redrawn
|
|
279
|
-
if (tr.docChanged && !redrawDecorations) {
|
|
324
|
+
if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
|
|
280
325
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
281
326
|
}
|
|
282
327
|
var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
|
|
283
|
-
var hasNodeDecoration = decorations.find().some(function (
|
|
284
|
-
var spec =
|
|
328
|
+
var hasNodeDecoration = decorations.find().some(function (_ref16) {
|
|
329
|
+
var spec = _ref16.spec;
|
|
285
330
|
return spec.type === 'node-decoration';
|
|
286
331
|
});
|
|
287
332
|
if (!hasNodeDecoration && isEmptyDoc) {
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
1
2
|
export const showDragHandleAtSelection = api => (state, _, view) => {
|
|
2
3
|
const rootPos = state.selection.$from.before(1);
|
|
3
4
|
const dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
|
|
4
|
-
const
|
|
5
|
+
const nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
|
|
6
|
+
const rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && fg('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
|
|
5
7
|
if (rootNode) {
|
|
6
8
|
const anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
|
|
7
9
|
const nodeType = rootNode.getAttribute('data-drag-handler-node-type');
|
|
@@ -13,7 +13,8 @@ export const dropTargetDecorations = (oldState, newState, api) => {
|
|
|
13
13
|
// and allows us to easily map the updated position in the plugin apply method.
|
|
14
14
|
const decorationState = [];
|
|
15
15
|
let prevNode;
|
|
16
|
-
|
|
16
|
+
const state = fg('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
|
|
17
|
+
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, _parent, index) => {
|
|
17
18
|
decorationState.push({
|
|
18
19
|
index,
|
|
19
20
|
pos
|
|
@@ -137,6 +137,7 @@ export const createPlugin = (api, getIntl) => {
|
|
|
137
137
|
}
|
|
138
138
|
let isDecsMissing = false;
|
|
139
139
|
let isHandleMissing = false;
|
|
140
|
+
let isDropTargetsMissing = false;
|
|
140
141
|
if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
|
|
141
142
|
// Ensure decorations stay in sync when nodes are added or removed from the doc
|
|
142
143
|
isHandleMissing = !(meta !== null && meta !== void 0 && meta.activeNode) && !decorations.find().some(({
|
|
@@ -145,7 +146,13 @@ export const createPlugin = (api, getIntl) => {
|
|
|
145
146
|
const decsLength = decorations.find().filter(({
|
|
146
147
|
spec
|
|
147
148
|
}) => spec.id !== 'drag-handle').length;
|
|
148
|
-
isDecsMissing = !isDragging && decsLength !== newState.doc.childCount;
|
|
149
|
+
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
|
|
150
|
+
}
|
|
151
|
+
if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
|
|
152
|
+
const dropTargetLen = decorations.find().filter(({
|
|
153
|
+
spec
|
|
154
|
+
}) => spec.type === 'drop-target-decoration').length;
|
|
155
|
+
isDropTargetsMissing = isDragging && dropTargetLen !== newState.doc.childCount + 1;
|
|
149
156
|
}
|
|
150
157
|
|
|
151
158
|
// This is not targeted enough - it's trying to catch events like expand being set to breakout
|
|
@@ -229,43 +236,81 @@ export const createPlugin = (api, getIntl) => {
|
|
|
229
236
|
decorations = decorations.add(newState.doc, [decs]);
|
|
230
237
|
}
|
|
231
238
|
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
if (
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
|
|
239
|
+
const shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
240
|
+
let shouldMapDropTargets = false;
|
|
241
|
+
if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
|
|
242
|
+
shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging;
|
|
243
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
244
|
+
// Remove drop target decoration when dragging stops
|
|
245
|
+
const dropTargetDecs = decorations.find().filter(({
|
|
246
|
+
spec
|
|
247
|
+
}) => spec.type === 'drop-target-decoration');
|
|
248
|
+
decorations = decorations.remove(dropTargetDecs);
|
|
249
|
+
}
|
|
250
|
+
if (api) {
|
|
251
|
+
// Add drop targets when node is being dragged
|
|
252
|
+
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
253
|
+
if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
|
|
254
|
+
const {
|
|
255
|
+
decs,
|
|
256
|
+
decorationState: updatedDecorationState
|
|
257
|
+
} = dropTargetDecorations(oldState, newState, api);
|
|
258
|
+
decorationState = updatedDecorationState;
|
|
259
|
+
decorations = decorations.add(newState.doc, decs);
|
|
260
|
+
}
|
|
243
261
|
}
|
|
244
|
-
}
|
|
245
262
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
263
|
+
// Map drop target decoration positions when the document changes
|
|
264
|
+
if (shouldMapDropTargets) {
|
|
265
|
+
decorationState = decorationState.map(({
|
|
266
|
+
index,
|
|
267
|
+
pos
|
|
268
|
+
}) => {
|
|
269
|
+
return {
|
|
270
|
+
index,
|
|
271
|
+
pos: tr.mapping.map(pos)
|
|
272
|
+
};
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
} else {
|
|
276
|
+
if (api) {
|
|
277
|
+
// Add drop targets when node is being dragged
|
|
278
|
+
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
279
|
+
const shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
|
|
280
|
+
if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
|
|
281
|
+
const {
|
|
282
|
+
decs,
|
|
283
|
+
decorationState: updatedDecorationState
|
|
284
|
+
} = dropTargetDecorations(oldState, newState, api);
|
|
285
|
+
decorationState = updatedDecorationState;
|
|
286
|
+
decorations = decorations.add(newState.doc, decs);
|
|
287
|
+
}
|
|
288
|
+
}
|
|
253
289
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
290
|
+
// Remove drop target decoration when dragging stops
|
|
291
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && (fg('platform_editor_element_drag_and_drop_ed_24330') ? true : !tr.docChanged)) {
|
|
292
|
+
const dropTargetDecs = decorations.find().filter(({
|
|
293
|
+
spec
|
|
294
|
+
}) => spec.type === 'drop-target-decoration');
|
|
295
|
+
decorations = decorations.remove(dropTargetDecs);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
// Map drop target decoration positions when the document changes
|
|
299
|
+
if (tr.docChanged && isDragging) {
|
|
300
|
+
decorationState = decorationState.map(({
|
|
261
301
|
index,
|
|
262
|
-
pos
|
|
263
|
-
}
|
|
264
|
-
|
|
302
|
+
pos
|
|
303
|
+
}) => {
|
|
304
|
+
return {
|
|
305
|
+
index,
|
|
306
|
+
pos: tr.mapping.map(pos)
|
|
307
|
+
};
|
|
308
|
+
});
|
|
309
|
+
}
|
|
265
310
|
}
|
|
266
311
|
|
|
267
312
|
// Map decorations if document changes and node decorations do not need to be redrawn
|
|
268
|
-
if (tr.docChanged && !redrawDecorations) {
|
|
313
|
+
if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
|
|
269
314
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
270
315
|
}
|
|
271
316
|
const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
1
2
|
export var showDragHandleAtSelection = function showDragHandleAtSelection(api) {
|
|
2
3
|
return function (state, _, view) {
|
|
3
4
|
var rootPos = state.selection.$from.before(1);
|
|
4
5
|
var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
|
|
5
|
-
var
|
|
6
|
+
var nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
|
|
7
|
+
var rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && fg('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
|
|
6
8
|
if (rootNode) {
|
|
7
9
|
var anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
|
|
8
10
|
var nodeType = rootNode.getAttribute('data-drag-handler-node-type');
|
|
@@ -14,7 +14,8 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
|
|
|
14
14
|
// and allows us to easily map the updated position in the plugin apply method.
|
|
15
15
|
var decorationState = [];
|
|
16
16
|
var prevNode;
|
|
17
|
-
|
|
17
|
+
var state = fg('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
|
|
18
|
+
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, _parent, index) {
|
|
18
19
|
decorationState.push({
|
|
19
20
|
index: index,
|
|
20
21
|
pos: pos
|
|
@@ -137,6 +137,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
137
137
|
}
|
|
138
138
|
var isDecsMissing = false;
|
|
139
139
|
var isHandleMissing = false;
|
|
140
|
+
var isDropTargetsMissing = false;
|
|
140
141
|
if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
|
|
141
142
|
// Ensure decorations stay in sync when nodes are added or removed from the doc
|
|
142
143
|
isHandleMissing = !(meta !== null && meta !== void 0 && meta.activeNode) && !decorations.find().some(function (_ref6) {
|
|
@@ -147,7 +148,14 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
147
148
|
var spec = _ref7.spec;
|
|
148
149
|
return spec.id !== 'drag-handle';
|
|
149
150
|
}).length;
|
|
150
|
-
isDecsMissing = !isDragging && decsLength !== newState.doc.childCount;
|
|
151
|
+
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
|
|
152
|
+
}
|
|
153
|
+
if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
|
|
154
|
+
var dropTargetLen = decorations.find().filter(function (_ref8) {
|
|
155
|
+
var spec = _ref8.spec;
|
|
156
|
+
return spec.type === 'drop-target-decoration';
|
|
157
|
+
}).length;
|
|
158
|
+
isDropTargetsMissing = isDragging && dropTargetLen !== newState.doc.childCount + 1;
|
|
151
159
|
}
|
|
152
160
|
|
|
153
161
|
// This is not targeted enough - it's trying to catch events like expand being set to breakout
|
|
@@ -165,8 +173,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
165
173
|
// Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
|
|
166
174
|
if (redrawDecorations && !isResizerResizing && api) {
|
|
167
175
|
if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
|
|
168
|
-
var oldNodeDecs = decorations.find().filter(function (
|
|
169
|
-
var spec =
|
|
176
|
+
var oldNodeDecs = decorations.find().filter(function (_ref9) {
|
|
177
|
+
var spec = _ref9.spec;
|
|
170
178
|
return spec.type !== 'drop-target-decoration';
|
|
171
179
|
});
|
|
172
180
|
decorations = decorations.remove(oldNodeDecs);
|
|
@@ -213,8 +221,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
213
221
|
|
|
214
222
|
// Remove previous drag handle widget and draw new drag handle widget when activeNode changes
|
|
215
223
|
if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
|
|
216
|
-
var _oldHandle = decorations.find().filter(function (
|
|
217
|
-
var spec =
|
|
224
|
+
var _oldHandle = decorations.find().filter(function (_ref10) {
|
|
225
|
+
var spec = _ref10.spec;
|
|
218
226
|
return spec.id === 'drag-handle';
|
|
219
227
|
});
|
|
220
228
|
decorations = decorations.remove(_oldHandle);
|
|
@@ -225,8 +233,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
225
233
|
var _activeNodeWithNewNod;
|
|
226
234
|
// Remove previous drag handle widget and draw new drag handle widget when node type changes
|
|
227
235
|
if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
|
|
228
|
-
var _oldHandle2 = decorations.find().filter(function (
|
|
229
|
-
var spec =
|
|
236
|
+
var _oldHandle2 = decorations.find().filter(function (_ref11) {
|
|
237
|
+
var spec = _ref11.spec;
|
|
230
238
|
return spec.id === 'drag-handle';
|
|
231
239
|
});
|
|
232
240
|
decorations = decorations.remove(_oldHandle2);
|
|
@@ -234,47 +242,84 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
234
242
|
decorations = decorations.add(newState.doc, [_decs]);
|
|
235
243
|
}
|
|
236
244
|
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
if (
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
245
|
+
var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
246
|
+
var shouldMapDropTargets = false;
|
|
247
|
+
if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
|
|
248
|
+
shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging;
|
|
249
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
250
|
+
// Remove drop target decoration when dragging stops
|
|
251
|
+
var dropTargetDecs = decorations.find().filter(function (_ref12) {
|
|
252
|
+
var spec = _ref12.spec;
|
|
253
|
+
return spec.type === 'drop-target-decoration';
|
|
254
|
+
});
|
|
255
|
+
decorations = decorations.remove(dropTargetDecs);
|
|
256
|
+
}
|
|
257
|
+
if (api) {
|
|
258
|
+
// Add drop targets when node is being dragged
|
|
259
|
+
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
260
|
+
if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
|
|
261
|
+
var _dropTargetDecoration = dropTargetDecorations(oldState, newState, api),
|
|
262
|
+
_decs2 = _dropTargetDecoration.decs,
|
|
263
|
+
updatedDecorationState = _dropTargetDecoration.decorationState;
|
|
264
|
+
decorationState = updatedDecorationState;
|
|
265
|
+
decorations = decorations.add(newState.doc, _decs2);
|
|
266
|
+
}
|
|
247
267
|
}
|
|
248
|
-
}
|
|
249
268
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
269
|
+
// Map drop target decoration positions when the document changes
|
|
270
|
+
if (shouldMapDropTargets) {
|
|
271
|
+
decorationState = decorationState.map(function (_ref13) {
|
|
272
|
+
var index = _ref13.index,
|
|
273
|
+
pos = _ref13.pos;
|
|
274
|
+
return {
|
|
275
|
+
index: index,
|
|
276
|
+
pos: tr.mapping.map(pos)
|
|
277
|
+
};
|
|
278
|
+
});
|
|
279
|
+
}
|
|
280
|
+
} else {
|
|
281
|
+
if (api) {
|
|
282
|
+
// Add drop targets when node is being dragged
|
|
283
|
+
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
284
|
+
var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
|
|
285
|
+
if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
|
|
286
|
+
var _dropTargetDecoration2 = dropTargetDecorations(oldState, newState, api),
|
|
287
|
+
_decs3 = _dropTargetDecoration2.decs,
|
|
288
|
+
_updatedDecorationState = _dropTargetDecoration2.decorationState;
|
|
289
|
+
decorationState = _updatedDecorationState;
|
|
290
|
+
decorations = decorations.add(newState.doc, _decs3);
|
|
291
|
+
}
|
|
292
|
+
}
|
|
258
293
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
294
|
+
// Remove drop target decoration when dragging stops
|
|
295
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && (fg('platform_editor_element_drag_and_drop_ed_24330') ? true : !tr.docChanged)) {
|
|
296
|
+
var _dropTargetDecs = decorations.find().filter(function (_ref14) {
|
|
297
|
+
var spec = _ref14.spec;
|
|
298
|
+
return spec.type === 'drop-target-decoration';
|
|
299
|
+
});
|
|
300
|
+
decorations = decorations.remove(_dropTargetDecs);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
// Map drop target decoration positions when the document changes
|
|
304
|
+
if (tr.docChanged && isDragging) {
|
|
305
|
+
decorationState = decorationState.map(function (_ref15) {
|
|
306
|
+
var index = _ref15.index,
|
|
307
|
+
pos = _ref15.pos;
|
|
308
|
+
return {
|
|
309
|
+
index: index,
|
|
310
|
+
pos: tr.mapping.map(pos)
|
|
311
|
+
};
|
|
312
|
+
});
|
|
313
|
+
}
|
|
269
314
|
}
|
|
270
315
|
|
|
271
316
|
// Map decorations if document changes and node decorations do not need to be redrawn
|
|
272
|
-
if (tr.docChanged && !redrawDecorations) {
|
|
317
|
+
if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
|
|
273
318
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
274
319
|
}
|
|
275
320
|
var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
|
|
276
|
-
var hasNodeDecoration = decorations.find().some(function (
|
|
277
|
-
var spec =
|
|
321
|
+
var hasNodeDecoration = decorations.find().some(function (_ref16) {
|
|
322
|
+
var spec = _ref16.spec;
|
|
278
323
|
return spec.type === 'node-decoration';
|
|
279
324
|
});
|
|
280
325
|
if (!hasNodeDecoration && isEmptyDoc) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.1",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/adf-schema": "^40.3.0",
|
|
35
|
-
"@atlaskit/editor-common": "^
|
|
36
|
-
"@atlaskit/editor-plugin-analytics": "^1.
|
|
37
|
-
"@atlaskit/editor-plugin-editor-disabled": "^1.
|
|
38
|
-
"@atlaskit/editor-plugin-feature-flags": "^1.
|
|
39
|
-
"@atlaskit/editor-plugin-width": "^1.
|
|
40
|
-
"@atlaskit/editor-prosemirror": "
|
|
35
|
+
"@atlaskit/editor-common": "^87.0.0",
|
|
36
|
+
"@atlaskit/editor-plugin-analytics": "^1.6.0",
|
|
37
|
+
"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
|
|
38
|
+
"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
|
|
39
|
+
"@atlaskit/editor-plugin-width": "^1.2.0",
|
|
40
|
+
"@atlaskit/editor-prosemirror": "5.0.1",
|
|
41
41
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
42
|
-
"@atlaskit/editor-tables": "^2.
|
|
42
|
+
"@atlaskit/editor-tables": "^2.8.0",
|
|
43
43
|
"@atlaskit/icon": "^22.7.0",
|
|
44
44
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
45
45
|
"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
|
|
@@ -158,11 +158,17 @@
|
|
|
158
158
|
"platform_editor_element_drag_and_drop_ed_24150": {
|
|
159
159
|
"type": "boolean"
|
|
160
160
|
},
|
|
161
|
+
"platform_editor_element_drag_and_drop_ed_24321": {
|
|
162
|
+
"type": "boolean"
|
|
163
|
+
},
|
|
161
164
|
"platform_editor_element_drag_and_drop_ed_24330": {
|
|
162
165
|
"type": "boolean"
|
|
163
166
|
},
|
|
164
167
|
"platform_editor_element_drag_and_drop_ed_24227": {
|
|
165
168
|
"type": "boolean"
|
|
169
|
+
},
|
|
170
|
+
"platform_editor_element_drag_and_drop_ed_24372": {
|
|
171
|
+
"type": "boolean"
|
|
166
172
|
}
|
|
167
173
|
}
|
|
168
174
|
}
|