@atlaskit/editor-plugin-block-controls 1.10.2 → 1.10.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 +20 -0
- package/dist/cjs/commands/move-node.js +13 -4
- package/dist/cjs/pm-plugins/decorations.js +10 -2
- package/dist/cjs/pm-plugins/main.js +13 -26
- package/dist/cjs/ui/global-styles.js +2 -21
- package/dist/cjs/utils/validation.js +9 -0
- package/dist/es2019/commands/move-node.js +13 -4
- package/dist/es2019/pm-plugins/decorations.js +10 -2
- package/dist/es2019/pm-plugins/main.js +13 -26
- package/dist/es2019/ui/global-styles.js +2 -31
- package/dist/es2019/utils/validation.js +3 -0
- package/dist/esm/commands/move-node.js +13 -4
- package/dist/esm/pm-plugins/decorations.js +10 -2
- package/dist/esm/pm-plugins/main.js +13 -26
- package/dist/esm/ui/global-styles.js +2 -21
- package/dist/esm/utils/validation.js +3 -0
- package/dist/types/pm-plugins/decorations.d.ts +1 -1
- package/dist/types/pm-plugins/main.d.ts +1 -14
- package/dist/types/types.d.ts +4 -0
- package/dist/types/utils/validation.d.ts +2 -0
- package/dist/types-ts4.5/pm-plugins/decorations.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -14
- package/dist/types-ts4.5/types.d.ts +4 -0
- package/dist/types-ts4.5/utils/validation.d.ts +2 -0
- package/package.json +4 -19
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 1.10.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#126929](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126929)
|
|
8
|
+
[`ba2a4b1af84db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba2a4b1af84db) -
|
|
9
|
+
Clean up FFs
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 1.10.3
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#127123](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127123)
|
|
17
|
+
[`7a68ab6404094`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7a68ab6404094) -
|
|
18
|
+
[ux] Add validation to node move, only show valid drop targets
|
|
19
|
+
- [#126802](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126802)
|
|
20
|
+
[`2cd334b37d1d8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cd334b37d1d8) -
|
|
21
|
+
Clean up FFs
|
|
22
|
+
|
|
3
23
|
## 1.10.2
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -15,12 +15,14 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
15
15
|
var _consts = require("../consts");
|
|
16
16
|
var _main = require("../pm-plugins/main");
|
|
17
17
|
var _utils2 = require("../utils");
|
|
18
|
+
var _validation = require("../utils/validation");
|
|
18
19
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
20
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
21
|
function transformNested(nodeCopy, destType) {
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
var srcNode = nodeCopy.content.firstChild;
|
|
23
|
+
var schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
|
|
24
|
+
if (srcNode && schema && srcNode.type === schema.nodes.nestedExpand && destType === schema.nodes.doc) {
|
|
25
|
+
return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, schema);
|
|
24
26
|
}
|
|
25
27
|
return nodeCopy;
|
|
26
28
|
}
|
|
@@ -119,7 +121,14 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
119
121
|
var mappedTo;
|
|
120
122
|
if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
|
|
121
123
|
var nodeCopy = tr.doc.slice(start, end, false); // cut the content
|
|
122
|
-
var
|
|
124
|
+
var $to = tr.doc.resolve(to);
|
|
125
|
+
var $from = tr.doc.resolve(start);
|
|
126
|
+
var destType = $to.node().type;
|
|
127
|
+
var srcType = $from.node().child($from.index()).type;
|
|
128
|
+
var destParent = $to.node($to.depth);
|
|
129
|
+
if (!(0, _validation.canMoveToIndex)(destParent, $to.index(), srcType)) {
|
|
130
|
+
return tr;
|
|
131
|
+
}
|
|
123
132
|
var convertedNode = transformNested(nodeCopy, destType).content;
|
|
124
133
|
tr.delete(start, end); // delete the content from the original position
|
|
125
134
|
mappedTo = tr.mapping.map(to);
|
|
@@ -15,9 +15,10 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
15
15
|
var _dragHandle = require("../ui/drag-handle");
|
|
16
16
|
var _dropTarget = require("../ui/drop-target");
|
|
17
17
|
var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
|
|
18
|
+
var _validation = require("../utils/validation");
|
|
18
19
|
var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
|
|
19
20
|
var NESTED_DEPTH = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;
|
|
20
|
-
var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage) {
|
|
21
|
+
var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage, activeNodeType) {
|
|
21
22
|
var decs = [];
|
|
22
23
|
unmountDecorations('data-blocks-drop-target-container');
|
|
23
24
|
// Decoration state is used to keep track of the position of the drop targets
|
|
@@ -25,8 +26,9 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
25
26
|
var decorationState = [];
|
|
26
27
|
var prevNode;
|
|
27
28
|
var state = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
|
|
28
|
-
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos,
|
|
29
|
+
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
|
|
29
30
|
var depth = 0;
|
|
31
|
+
var nodeType = newState.doc.type.schema.nodes[activeNodeType];
|
|
30
32
|
if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
|
|
31
33
|
depth = newState.doc.resolve(pos).depth;
|
|
32
34
|
if (node.isInline) {
|
|
@@ -35,6 +37,12 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
35
37
|
if (IGNORE_NODES.includes(node.type.name)) {
|
|
36
38
|
return true; //skip over, don't consider it a valid depth
|
|
37
39
|
}
|
|
40
|
+
var canDrop = parent && activeNodeType && (0, _validation.canMoveToIndex)(parent, index, nodeType);
|
|
41
|
+
|
|
42
|
+
//NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
|
|
43
|
+
if (!canDrop) {
|
|
44
|
+
return false; //not valid pos, so nested not valid either
|
|
45
|
+
}
|
|
38
46
|
decorationState.push({
|
|
39
47
|
id: pos,
|
|
40
48
|
pos: pos
|
|
@@ -85,7 +85,6 @@ var initialState = {
|
|
|
85
85
|
isDocSizeLimitEnabled: null,
|
|
86
86
|
isPMDragging: false
|
|
87
87
|
};
|
|
88
|
-
var DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
|
|
89
88
|
var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
90
89
|
return new _safePlugin.SafePlugin({
|
|
91
90
|
key: key,
|
|
@@ -94,17 +93,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
94
93
|
return initialState;
|
|
95
94
|
},
|
|
96
95
|
apply: function apply(tr, currentState, oldState, newState) {
|
|
97
|
-
var _meta$activeNode, _meta$activeNode$hand, _meta$
|
|
98
|
-
if (initialState.isDocSizeLimitEnabled === null) {
|
|
99
|
-
if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
|
|
100
|
-
initialState.isDocSizeLimitEnabled = true;
|
|
101
|
-
} else {
|
|
102
|
-
initialState.isDocSizeLimitEnabled = false;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
if (initialState.isDocSizeLimitEnabled && newState.doc.childCount > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
|
|
106
|
-
return initialState;
|
|
107
|
-
}
|
|
96
|
+
var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
|
|
108
97
|
var activeNode = currentState.activeNode,
|
|
109
98
|
decorations = currentState.decorations,
|
|
110
99
|
isMenuOpen = currentState.isMenuOpen,
|
|
@@ -275,7 +264,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
275
264
|
// Add drop targets when node is being dragged
|
|
276
265
|
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
277
266
|
if (shouldUpdateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
|
|
278
|
-
var
|
|
267
|
+
var _meta$activeNode2;
|
|
268
|
+
var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType),
|
|
279
269
|
_decs2 = _dropTargetDecoration.decs,
|
|
280
270
|
updatedDecorationState = _dropTargetDecoration.decorationState;
|
|
281
271
|
decorationState = updatedDecorationState;
|
|
@@ -300,7 +290,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
300
290
|
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
301
291
|
var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
|
|
302
292
|
if (shouldShowDragTarget || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
|
|
303
|
-
var
|
|
293
|
+
var _meta$activeNode3;
|
|
294
|
+
var _dropTargetDecoration2 = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.nodeType),
|
|
304
295
|
_decs3 = _dropTargetDecoration2.decs,
|
|
305
296
|
_updatedDecorationState = _dropTargetDecoration2.decorationState;
|
|
306
297
|
decorationState = _updatedDecorationState;
|
|
@@ -361,7 +352,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
361
352
|
return {
|
|
362
353
|
decorations: decorations,
|
|
363
354
|
decorationState: decorationState,
|
|
364
|
-
activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$
|
|
355
|
+
activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode4 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode4 !== void 0 ? _meta$activeNode4 : mappedActiveNodePos,
|
|
365
356
|
isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
|
|
366
357
|
isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
|
|
367
358
|
editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
|
|
@@ -384,6 +375,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
384
375
|
},
|
|
385
376
|
handleDOMEvents: {
|
|
386
377
|
drop: function drop(view, event) {
|
|
378
|
+
var _event$target;
|
|
387
379
|
// prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
|
|
388
380
|
// this duplicates an empty version of the node it was dropping,
|
|
389
381
|
// Adding some check here to prevent that if drop position is within activeNode
|
|
@@ -402,18 +394,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
402
394
|
// Currently we can only drag one node at a time
|
|
403
395
|
// so we only need to check first child
|
|
404
396
|
var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
|
|
405
|
-
var
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
var _event$target;
|
|
409
|
-
var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
|
|
410
|
-
if (!nodeElement) {
|
|
411
|
-
return false;
|
|
412
|
-
}
|
|
413
|
-
var domPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
|
|
414
|
-
var nodeTarget = state.doc.nodeAt(domPos);
|
|
415
|
-
isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
|
|
397
|
+
var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
|
|
398
|
+
if (!nodeElement) {
|
|
399
|
+
return false;
|
|
416
400
|
}
|
|
401
|
+
var domPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
|
|
402
|
+
var nodeTarget = state.doc.nodeAt(domPos);
|
|
403
|
+
var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
|
|
417
404
|
if (isSameNode) {
|
|
418
405
|
// Prevent the default drop behavior if the position is within the activeNode
|
|
419
406
|
event.preventDefault();
|
|
@@ -90,30 +90,15 @@ var extendedHoverZoneNested = (0, _react.css)({
|
|
|
90
90
|
display: 'none'
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
|
-
var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
|
|
94
|
-
var paragraphWithCursorTarget = '+ p > .cursor-target';
|
|
95
93
|
var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
|
|
96
94
|
var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
|
|
97
95
|
var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
|
|
98
96
|
var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
|
|
99
|
-
var withoutInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
|
|
100
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
101
|
-
display: 'none !important'
|
|
102
|
-
}));
|
|
103
97
|
var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
|
|
104
98
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
105
99
|
display: 'none !important'
|
|
106
100
|
}));
|
|
107
101
|
|
|
108
|
-
/**
|
|
109
|
-
* Please do not change change transform to display:none, or visibility:hidden
|
|
110
|
-
* Otherwise it might break composition input for Chrome
|
|
111
|
-
* https://product-fabric.atlassian.net/browse/ED-24136
|
|
112
|
-
*/
|
|
113
|
-
var withoutInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, ")) ").concat(dragHandleSelector), {
|
|
114
|
-
transform: 'scale(0)'
|
|
115
|
-
}));
|
|
116
|
-
|
|
117
102
|
/**
|
|
118
103
|
* Please do not change change transform to display:none, or visibility:hidden
|
|
119
104
|
* Otherwise it might break composition input for Chrome
|
|
@@ -141,14 +126,10 @@ var withMediaSingleStyleFix = (0, _react.css)((0, _defineProperty2.default)({},
|
|
|
141
126
|
cursor: 'pointer'
|
|
142
127
|
}));
|
|
143
128
|
var getTextNodeStyle = function getTextNodeStyle() {
|
|
144
|
-
|
|
145
|
-
return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
146
|
-
} else {
|
|
147
|
-
return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withoutInlineNodeStyleWithChromeFix : withoutInlineNodeStyle;
|
|
148
|
-
}
|
|
129
|
+
return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
149
130
|
};
|
|
150
131
|
var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
151
132
|
return (0, _react.jsx)(_react.Global, {
|
|
152
|
-
styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(),
|
|
133
|
+
styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
|
|
153
134
|
});
|
|
154
135
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.canMoveToIndex = canMoveToIndex;
|
|
7
|
+
function canMoveToIndex(destParent, indexIntoParent, srcType) {
|
|
8
|
+
return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcType);
|
|
9
|
+
}
|
|
@@ -7,10 +7,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
7
7
|
import { DIRECTION } from '../consts';
|
|
8
8
|
import { key } from '../pm-plugins/main';
|
|
9
9
|
import { selectNode } from '../utils';
|
|
10
|
+
import { canMoveToIndex } from '../utils/validation';
|
|
10
11
|
function transformNested(nodeCopy, destType) {
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
const srcNode = nodeCopy.content.firstChild;
|
|
13
|
+
const schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
|
|
14
|
+
if (srcNode && schema && srcNode.type === schema.nodes.nestedExpand && destType === schema.nodes.doc) {
|
|
15
|
+
return transformSliceNestedExpandToExpand(nodeCopy, schema);
|
|
14
16
|
}
|
|
15
17
|
return nodeCopy;
|
|
16
18
|
}
|
|
@@ -111,7 +113,14 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
|
|
|
111
113
|
let mappedTo;
|
|
112
114
|
if (fg('platform_editor_elements_dnd_nested')) {
|
|
113
115
|
const nodeCopy = tr.doc.slice(start, end, false); // cut the content
|
|
114
|
-
const
|
|
116
|
+
const $to = tr.doc.resolve(to);
|
|
117
|
+
const $from = tr.doc.resolve(start);
|
|
118
|
+
const destType = $to.node().type;
|
|
119
|
+
const srcType = $from.node().child($from.index()).type;
|
|
120
|
+
const destParent = $to.node($to.depth);
|
|
121
|
+
if (!canMoveToIndex(destParent, $to.index(), srcType)) {
|
|
122
|
+
return tr;
|
|
123
|
+
}
|
|
115
124
|
const convertedNode = transformNested(nodeCopy, destType).content;
|
|
116
125
|
tr.delete(start, end); // delete the content from the original position
|
|
117
126
|
mappedTo = tr.mapping.map(to);
|
|
@@ -7,9 +7,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
7
7
|
import { DragHandle } from '../ui/drag-handle';
|
|
8
8
|
import { DropTarget } from '../ui/drop-target';
|
|
9
9
|
import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
|
|
10
|
+
import { canMoveToIndex } from '../utils/validation';
|
|
10
11
|
const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
|
|
11
12
|
const NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
|
|
12
|
-
export const dropTargetDecorations = (oldState, newState, api, formatMessage) => {
|
|
13
|
+
export const dropTargetDecorations = (oldState, newState, api, formatMessage, activeNodeType) => {
|
|
13
14
|
const decs = [];
|
|
14
15
|
unmountDecorations('data-blocks-drop-target-container');
|
|
15
16
|
// Decoration state is used to keep track of the position of the drop targets
|
|
@@ -17,8 +18,9 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage) =>
|
|
|
17
18
|
const decorationState = [];
|
|
18
19
|
let prevNode;
|
|
19
20
|
const state = fg('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
|
|
20
|
-
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos,
|
|
21
|
+
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
|
|
21
22
|
let depth = 0;
|
|
23
|
+
const nodeType = newState.doc.type.schema.nodes[activeNodeType];
|
|
22
24
|
if (fg('platform_editor_elements_dnd_nested')) {
|
|
23
25
|
depth = newState.doc.resolve(pos).depth;
|
|
24
26
|
if (node.isInline) {
|
|
@@ -27,6 +29,12 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage) =>
|
|
|
27
29
|
if (IGNORE_NODES.includes(node.type.name)) {
|
|
28
30
|
return true; //skip over, don't consider it a valid depth
|
|
29
31
|
}
|
|
32
|
+
const canDrop = parent && activeNodeType && canMoveToIndex(parent, index, nodeType);
|
|
33
|
+
|
|
34
|
+
//NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
|
|
35
|
+
if (!canDrop) {
|
|
36
|
+
return false; //not valid pos, so nested not valid either
|
|
37
|
+
}
|
|
30
38
|
decorationState.push({
|
|
31
39
|
id: pos,
|
|
32
40
|
pos
|
|
@@ -79,7 +79,6 @@ const initialState = {
|
|
|
79
79
|
isDocSizeLimitEnabled: null,
|
|
80
80
|
isPMDragging: false
|
|
81
81
|
};
|
|
82
|
-
const DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
|
|
83
82
|
export const createPlugin = (api, getIntl) => {
|
|
84
83
|
return new SafePlugin({
|
|
85
84
|
key,
|
|
@@ -88,17 +87,7 @@ export const createPlugin = (api, getIntl) => {
|
|
|
88
87
|
return initialState;
|
|
89
88
|
},
|
|
90
89
|
apply(tr, currentState, oldState, newState) {
|
|
91
|
-
var _meta$activeNode, _meta$activeNode$hand, _meta$
|
|
92
|
-
if (initialState.isDocSizeLimitEnabled === null) {
|
|
93
|
-
if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
|
|
94
|
-
initialState.isDocSizeLimitEnabled = true;
|
|
95
|
-
} else {
|
|
96
|
-
initialState.isDocSizeLimitEnabled = false;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
if (initialState.isDocSizeLimitEnabled && newState.doc.childCount > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
|
|
100
|
-
return initialState;
|
|
101
|
-
}
|
|
90
|
+
var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
|
|
102
91
|
let {
|
|
103
92
|
activeNode,
|
|
104
93
|
decorations,
|
|
@@ -262,10 +251,11 @@ export const createPlugin = (api, getIntl) => {
|
|
|
262
251
|
// Add drop targets when node is being dragged
|
|
263
252
|
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
264
253
|
if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
|
|
254
|
+
var _meta$activeNode2;
|
|
265
255
|
const {
|
|
266
256
|
decs,
|
|
267
257
|
decorationState: updatedDecorationState
|
|
268
|
-
} = dropTargetDecorations(oldState, newState, api, formatMessage);
|
|
258
|
+
} = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType);
|
|
269
259
|
decorationState = updatedDecorationState;
|
|
270
260
|
decorations = decorations.add(newState.doc, decs);
|
|
271
261
|
}
|
|
@@ -289,10 +279,11 @@ export const createPlugin = (api, getIntl) => {
|
|
|
289
279
|
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
290
280
|
const shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
|
|
291
281
|
if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
|
|
282
|
+
var _meta$activeNode3;
|
|
292
283
|
const {
|
|
293
284
|
decs,
|
|
294
285
|
decorationState: updatedDecorationState
|
|
295
|
-
} = dropTargetDecorations(oldState, newState, api, formatMessage);
|
|
286
|
+
} = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.nodeType);
|
|
296
287
|
decorationState = updatedDecorationState;
|
|
297
288
|
decorations = decorations.add(newState.doc, decs);
|
|
298
289
|
}
|
|
@@ -350,7 +341,7 @@ export const createPlugin = (api, getIntl) => {
|
|
|
350
341
|
return {
|
|
351
342
|
decorations,
|
|
352
343
|
decorationState,
|
|
353
|
-
activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$
|
|
344
|
+
activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode4 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode4 !== void 0 ? _meta$activeNode4 : mappedActiveNodePos,
|
|
354
345
|
isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
|
|
355
346
|
isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
|
|
356
347
|
editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
|
|
@@ -373,6 +364,7 @@ export const createPlugin = (api, getIntl) => {
|
|
|
373
364
|
},
|
|
374
365
|
handleDOMEvents: {
|
|
375
366
|
drop(view, event) {
|
|
367
|
+
var _event$target;
|
|
376
368
|
// prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
|
|
377
369
|
// this duplicates an empty version of the node it was dropping,
|
|
378
370
|
// Adding some check here to prevent that if drop position is within activeNode
|
|
@@ -393,18 +385,13 @@ export const createPlugin = (api, getIntl) => {
|
|
|
393
385
|
// Currently we can only drag one node at a time
|
|
394
386
|
// so we only need to check first child
|
|
395
387
|
const draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
|
|
396
|
-
const
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
var _event$target;
|
|
400
|
-
const nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
|
|
401
|
-
if (!nodeElement) {
|
|
402
|
-
return false;
|
|
403
|
-
}
|
|
404
|
-
const domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
|
|
405
|
-
const nodeTarget = state.doc.nodeAt(domPos);
|
|
406
|
-
isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
|
|
388
|
+
const nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
|
|
389
|
+
if (!nodeElement) {
|
|
390
|
+
return false;
|
|
407
391
|
}
|
|
392
|
+
const domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
|
|
393
|
+
const nodeTarget = state.doc.nodeAt(domPos);
|
|
394
|
+
const isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
|
|
408
395
|
if (isSameNode) {
|
|
409
396
|
// Prevent the default drop behavior if the position is within the activeNode
|
|
410
397
|
event.preventDefault();
|
|
@@ -81,21 +81,10 @@ const extendedHoverZoneNested = css({
|
|
|
81
81
|
display: 'none'
|
|
82
82
|
}
|
|
83
83
|
});
|
|
84
|
-
const paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
|
|
85
|
-
const paragraphWithCursorTarget = '+ p > .cursor-target';
|
|
86
84
|
const paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
|
|
87
85
|
const paragraphWithPlaceholder = '+ p > .placeholder-decoration';
|
|
88
86
|
const dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
|
|
89
87
|
const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
|
|
90
|
-
const withoutInlineNodeStyle = css({
|
|
91
|
-
// Currently, we are hiding the drag handle container by checking if the paragraph has a trailing break and no cursor target
|
|
92
|
-
// TODO ED-23827 add a classname to empty paragraphs for easier targeting
|
|
93
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
94
|
-
[`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreak}):not(:has(${paragraphWithCursorTarget}))`]: {
|
|
95
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
96
|
-
display: 'none !important'
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
88
|
const withInlineNodeStyle = css({
|
|
100
89
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
101
90
|
[`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreakAsOnlyChild}), .ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithPlaceholder})`]: {
|
|
@@ -104,20 +93,6 @@ const withInlineNodeStyle = css({
|
|
|
104
93
|
}
|
|
105
94
|
});
|
|
106
95
|
|
|
107
|
-
/**
|
|
108
|
-
* Please do not change change transform to display:none, or visibility:hidden
|
|
109
|
-
* Otherwise it might break composition input for Chrome
|
|
110
|
-
* https://product-fabric.atlassian.net/browse/ED-24136
|
|
111
|
-
*/
|
|
112
|
-
const withoutInlineNodeStyleWithChromeFix = css({
|
|
113
|
-
// Currently, we are hiding the drag handle container by checking if the paragraph has a trailing break and no cursor target
|
|
114
|
-
// TODO ED-23827 add a classname to empty paragraphs for easier targeting
|
|
115
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
116
|
-
[`${dragHandleContainer}:has(${paragraphWithTrailingBreak}):not(:has(${paragraphWithCursorTarget})) ${dragHandleSelector}`]: {
|
|
117
|
-
transform: 'scale(0)'
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
|
|
121
96
|
/**
|
|
122
97
|
* Please do not change change transform to display:none, or visibility:hidden
|
|
123
98
|
* Otherwise it might break composition input for Chrome
|
|
@@ -155,14 +130,10 @@ const withMediaSingleStyleFix = css({
|
|
|
155
130
|
}
|
|
156
131
|
});
|
|
157
132
|
const getTextNodeStyle = () => {
|
|
158
|
-
|
|
159
|
-
return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
160
|
-
} else {
|
|
161
|
-
return fg('platform_editor_element_controls_chrome_input_fix') ? withoutInlineNodeStyleWithChromeFix : withoutInlineNodeStyle;
|
|
162
|
-
}
|
|
133
|
+
return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
163
134
|
};
|
|
164
135
|
export const GlobalStylesWrapper = () => {
|
|
165
136
|
return jsx(Global, {
|
|
166
|
-
styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(),
|
|
137
|
+
styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
|
|
167
138
|
});
|
|
168
139
|
};
|
|
@@ -10,10 +10,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
10
10
|
import { DIRECTION } from '../consts';
|
|
11
11
|
import { key } from '../pm-plugins/main';
|
|
12
12
|
import { selectNode } from '../utils';
|
|
13
|
+
import { canMoveToIndex } from '../utils/validation';
|
|
13
14
|
function transformNested(nodeCopy, destType) {
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
var srcNode = nodeCopy.content.firstChild;
|
|
16
|
+
var schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
|
|
17
|
+
if (srcNode && schema && srcNode.type === schema.nodes.nestedExpand && destType === schema.nodes.doc) {
|
|
18
|
+
return transformSliceNestedExpandToExpand(nodeCopy, schema);
|
|
17
19
|
}
|
|
18
20
|
return nodeCopy;
|
|
19
21
|
}
|
|
@@ -112,7 +114,14 @@ export var moveNode = function moveNode(api) {
|
|
|
112
114
|
var mappedTo;
|
|
113
115
|
if (fg('platform_editor_elements_dnd_nested')) {
|
|
114
116
|
var nodeCopy = tr.doc.slice(start, end, false); // cut the content
|
|
115
|
-
var
|
|
117
|
+
var $to = tr.doc.resolve(to);
|
|
118
|
+
var $from = tr.doc.resolve(start);
|
|
119
|
+
var destType = $to.node().type;
|
|
120
|
+
var srcType = $from.node().child($from.index()).type;
|
|
121
|
+
var destParent = $to.node($to.depth);
|
|
122
|
+
if (!canMoveToIndex(destParent, $to.index(), srcType)) {
|
|
123
|
+
return tr;
|
|
124
|
+
}
|
|
116
125
|
var convertedNode = transformNested(nodeCopy, destType).content;
|
|
117
126
|
tr.delete(start, end); // delete the content from the original position
|
|
118
127
|
mappedTo = tr.mapping.map(to);
|
|
@@ -8,9 +8,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
8
8
|
import { DragHandle } from '../ui/drag-handle';
|
|
9
9
|
import { DropTarget } from '../ui/drop-target';
|
|
10
10
|
import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
|
|
11
|
+
import { canMoveToIndex } from '../utils/validation';
|
|
11
12
|
var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
|
|
12
13
|
var NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
|
|
13
|
-
export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage) {
|
|
14
|
+
export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage, activeNodeType) {
|
|
14
15
|
var decs = [];
|
|
15
16
|
unmountDecorations('data-blocks-drop-target-container');
|
|
16
17
|
// Decoration state is used to keep track of the position of the drop targets
|
|
@@ -18,8 +19,9 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
|
|
|
18
19
|
var decorationState = [];
|
|
19
20
|
var prevNode;
|
|
20
21
|
var state = fg('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
|
|
21
|
-
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos,
|
|
22
|
+
state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
|
|
22
23
|
var depth = 0;
|
|
24
|
+
var nodeType = newState.doc.type.schema.nodes[activeNodeType];
|
|
23
25
|
if (fg('platform_editor_elements_dnd_nested')) {
|
|
24
26
|
depth = newState.doc.resolve(pos).depth;
|
|
25
27
|
if (node.isInline) {
|
|
@@ -28,6 +30,12 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
|
|
|
28
30
|
if (IGNORE_NODES.includes(node.type.name)) {
|
|
29
31
|
return true; //skip over, don't consider it a valid depth
|
|
30
32
|
}
|
|
33
|
+
var canDrop = parent && activeNodeType && canMoveToIndex(parent, index, nodeType);
|
|
34
|
+
|
|
35
|
+
//NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
|
|
36
|
+
if (!canDrop) {
|
|
37
|
+
return false; //not valid pos, so nested not valid either
|
|
38
|
+
}
|
|
31
39
|
decorationState.push({
|
|
32
40
|
id: pos,
|
|
33
41
|
pos: pos
|
|
@@ -78,7 +78,6 @@ var initialState = {
|
|
|
78
78
|
isDocSizeLimitEnabled: null,
|
|
79
79
|
isPMDragging: false
|
|
80
80
|
};
|
|
81
|
-
var DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
|
|
82
81
|
export var createPlugin = function createPlugin(api, getIntl) {
|
|
83
82
|
return new SafePlugin({
|
|
84
83
|
key: key,
|
|
@@ -87,17 +86,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
87
86
|
return initialState;
|
|
88
87
|
},
|
|
89
88
|
apply: function apply(tr, currentState, oldState, newState) {
|
|
90
|
-
var _meta$activeNode, _meta$activeNode$hand, _meta$
|
|
91
|
-
if (initialState.isDocSizeLimitEnabled === null) {
|
|
92
|
-
if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
|
|
93
|
-
initialState.isDocSizeLimitEnabled = true;
|
|
94
|
-
} else {
|
|
95
|
-
initialState.isDocSizeLimitEnabled = false;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
if (initialState.isDocSizeLimitEnabled && newState.doc.childCount > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
|
|
99
|
-
return initialState;
|
|
100
|
-
}
|
|
89
|
+
var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
|
|
101
90
|
var activeNode = currentState.activeNode,
|
|
102
91
|
decorations = currentState.decorations,
|
|
103
92
|
isMenuOpen = currentState.isMenuOpen,
|
|
@@ -268,7 +257,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
268
257
|
// Add drop targets when node is being dragged
|
|
269
258
|
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
270
259
|
if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
|
|
271
|
-
var
|
|
260
|
+
var _meta$activeNode2;
|
|
261
|
+
var _dropTargetDecoration = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType),
|
|
272
262
|
_decs2 = _dropTargetDecoration.decs,
|
|
273
263
|
updatedDecorationState = _dropTargetDecoration.decorationState;
|
|
274
264
|
decorationState = updatedDecorationState;
|
|
@@ -293,7 +283,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
293
283
|
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
294
284
|
var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
|
|
295
285
|
if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
|
|
296
|
-
var
|
|
286
|
+
var _meta$activeNode3;
|
|
287
|
+
var _dropTargetDecoration2 = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.nodeType),
|
|
297
288
|
_decs3 = _dropTargetDecoration2.decs,
|
|
298
289
|
_updatedDecorationState = _dropTargetDecoration2.decorationState;
|
|
299
290
|
decorationState = _updatedDecorationState;
|
|
@@ -354,7 +345,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
354
345
|
return {
|
|
355
346
|
decorations: decorations,
|
|
356
347
|
decorationState: decorationState,
|
|
357
|
-
activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$
|
|
348
|
+
activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode4 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode4 !== void 0 ? _meta$activeNode4 : mappedActiveNodePos,
|
|
358
349
|
isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
|
|
359
350
|
isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
|
|
360
351
|
editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
|
|
@@ -377,6 +368,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
377
368
|
},
|
|
378
369
|
handleDOMEvents: {
|
|
379
370
|
drop: function drop(view, event) {
|
|
371
|
+
var _event$target;
|
|
380
372
|
// prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
|
|
381
373
|
// this duplicates an empty version of the node it was dropping,
|
|
382
374
|
// Adding some check here to prevent that if drop position is within activeNode
|
|
@@ -395,18 +387,13 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
395
387
|
// Currently we can only drag one node at a time
|
|
396
388
|
// so we only need to check first child
|
|
397
389
|
var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
|
|
398
|
-
var
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
var _event$target;
|
|
402
|
-
var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
|
|
403
|
-
if (!nodeElement) {
|
|
404
|
-
return false;
|
|
405
|
-
}
|
|
406
|
-
var domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
|
|
407
|
-
var nodeTarget = state.doc.nodeAt(domPos);
|
|
408
|
-
isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
|
|
390
|
+
var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
|
|
391
|
+
if (!nodeElement) {
|
|
392
|
+
return false;
|
|
409
393
|
}
|
|
394
|
+
var domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
|
|
395
|
+
var nodeTarget = state.doc.nodeAt(domPos);
|
|
396
|
+
var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
|
|
410
397
|
if (isSameNode) {
|
|
411
398
|
// Prevent the default drop behavior if the position is within the activeNode
|
|
412
399
|
event.preventDefault();
|
|
@@ -82,30 +82,15 @@ var extendedHoverZoneNested = css({
|
|
|
82
82
|
display: 'none'
|
|
83
83
|
}
|
|
84
84
|
});
|
|
85
|
-
var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
|
|
86
|
-
var paragraphWithCursorTarget = '+ p > .cursor-target';
|
|
87
85
|
var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
|
|
88
86
|
var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
|
|
89
87
|
var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
|
|
90
88
|
var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
|
|
91
|
-
var withoutInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
|
|
92
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
93
|
-
display: 'none !important'
|
|
94
|
-
}));
|
|
95
89
|
var withInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
|
|
96
90
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
97
91
|
display: 'none !important'
|
|
98
92
|
}));
|
|
99
93
|
|
|
100
|
-
/**
|
|
101
|
-
* Please do not change change transform to display:none, or visibility:hidden
|
|
102
|
-
* Otherwise it might break composition input for Chrome
|
|
103
|
-
* https://product-fabric.atlassian.net/browse/ED-24136
|
|
104
|
-
*/
|
|
105
|
-
var withoutInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, ")) ").concat(dragHandleSelector), {
|
|
106
|
-
transform: 'scale(0)'
|
|
107
|
-
}));
|
|
108
|
-
|
|
109
94
|
/**
|
|
110
95
|
* Please do not change change transform to display:none, or visibility:hidden
|
|
111
96
|
* Otherwise it might break composition input for Chrome
|
|
@@ -133,14 +118,10 @@ var withMediaSingleStyleFix = css(_defineProperty({}, '.ProseMirror.ua-firefox .
|
|
|
133
118
|
cursor: 'pointer'
|
|
134
119
|
}));
|
|
135
120
|
var getTextNodeStyle = function getTextNodeStyle() {
|
|
136
|
-
|
|
137
|
-
return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
138
|
-
} else {
|
|
139
|
-
return fg('platform_editor_element_controls_chrome_input_fix') ? withoutInlineNodeStyleWithChromeFix : withoutInlineNodeStyle;
|
|
140
|
-
}
|
|
121
|
+
return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
141
122
|
};
|
|
142
123
|
export var GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
143
124
|
return jsx(Global, {
|
|
144
|
-
styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(),
|
|
125
|
+
styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
|
|
145
126
|
});
|
|
146
127
|
};
|
|
@@ -3,7 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
|
3
3
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
5
|
import type { BlockControlsPlugin, HandleOptions } from '../types';
|
|
6
|
-
export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage']) => {
|
|
6
|
+
export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNodeType: string) => {
|
|
7
7
|
decs: Decoration[];
|
|
8
8
|
decorationState: {
|
|
9
9
|
id: number;
|
|
@@ -2,19 +2,6 @@ import { type IntlShape } from 'react-intl-next';
|
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
6
5
|
import type { BlockControlsPlugin, PluginState } from '../types';
|
|
7
6
|
export declare const key: PluginKey<PluginState>;
|
|
8
|
-
export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState
|
|
9
|
-
decorations: DecorationSet;
|
|
10
|
-
decorationState: import("../types").DecorationState;
|
|
11
|
-
activeNode: any;
|
|
12
|
-
isDragging: any;
|
|
13
|
-
isMenuOpen: boolean | undefined;
|
|
14
|
-
editorHeight: any;
|
|
15
|
-
editorWidthLeft: any;
|
|
16
|
-
editorWidthRight: any;
|
|
17
|
-
isResizerResizing: boolean;
|
|
18
|
-
isDocSizeLimitEnabled: boolean;
|
|
19
|
-
isPMDragging: any;
|
|
20
|
-
}>;
|
|
7
|
+
export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState>;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -22,6 +22,10 @@ export interface PluginState {
|
|
|
22
22
|
handleOptions?: HandleOptions;
|
|
23
23
|
} | null;
|
|
24
24
|
isResizerResizing: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* @private
|
|
27
|
+
* @deprecated Doc size limits no longer supported
|
|
28
|
+
*/
|
|
25
29
|
isDocSizeLimitEnabled: boolean | null;
|
|
26
30
|
/**
|
|
27
31
|
* is dragging the node without using drag handle, i,e, native prosemirror DnD
|
|
@@ -3,7 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
|
3
3
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
5
|
import type { BlockControlsPlugin, HandleOptions } from '../types';
|
|
6
|
-
export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage']) => {
|
|
6
|
+
export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNodeType: string) => {
|
|
7
7
|
decs: Decoration[];
|
|
8
8
|
decorationState: {
|
|
9
9
|
id: number;
|
|
@@ -2,19 +2,6 @@ import { type IntlShape } from 'react-intl-next';
|
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
6
5
|
import type { BlockControlsPlugin, PluginState } from '../types';
|
|
7
6
|
export declare const key: PluginKey<PluginState>;
|
|
8
|
-
export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState
|
|
9
|
-
decorations: DecorationSet;
|
|
10
|
-
decorationState: import("../types").DecorationState;
|
|
11
|
-
activeNode: any;
|
|
12
|
-
isDragging: any;
|
|
13
|
-
isMenuOpen: boolean | undefined;
|
|
14
|
-
editorHeight: any;
|
|
15
|
-
editorWidthLeft: any;
|
|
16
|
-
editorWidthRight: any;
|
|
17
|
-
isResizerResizing: boolean;
|
|
18
|
-
isDocSizeLimitEnabled: boolean;
|
|
19
|
-
isPMDragging: any;
|
|
20
|
-
}>;
|
|
7
|
+
export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState>;
|
|
@@ -22,6 +22,10 @@ export interface PluginState {
|
|
|
22
22
|
handleOptions?: HandleOptions;
|
|
23
23
|
} | null;
|
|
24
24
|
isResizerResizing: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* @private
|
|
27
|
+
* @deprecated Doc size limits no longer supported
|
|
28
|
+
*/
|
|
25
29
|
isDocSizeLimitEnabled: boolean | null;
|
|
26
30
|
/**
|
|
27
31
|
* is dragging the node without using drag handle, i,e, native prosemirror DnD
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.4",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/adf-schema": "^40.3.0",
|
|
35
|
-
"@atlaskit/editor-common": "^87.
|
|
35
|
+
"@atlaskit/editor-common": "^87.4.0",
|
|
36
36
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^1.6.0",
|
|
38
38
|
"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
|
|
@@ -41,13 +41,13 @@
|
|
|
41
41
|
"@atlaskit/editor-prosemirror": "5.0.1",
|
|
42
42
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
43
43
|
"@atlaskit/editor-tables": "^2.8.0",
|
|
44
|
-
"@atlaskit/icon": "^22.
|
|
44
|
+
"@atlaskit/icon": "^22.10.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
46
46
|
"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
|
|
47
47
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
|
|
48
48
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
|
|
49
49
|
"@atlaskit/theme": "^12.11.0",
|
|
50
|
-
"@atlaskit/tokens": "^1.
|
|
50
|
+
"@atlaskit/tokens": "^1.57.0",
|
|
51
51
|
"@atlaskit/tooltip": "^18.5.0",
|
|
52
52
|
"@babel/runtime": "^7.0.0",
|
|
53
53
|
"@emotion/react": "^11.7.1",
|
|
@@ -95,12 +95,6 @@
|
|
|
95
95
|
}
|
|
96
96
|
},
|
|
97
97
|
"platform-feature-flags": {
|
|
98
|
-
"platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq": {
|
|
99
|
-
"type": "boolean"
|
|
100
|
-
},
|
|
101
|
-
"platform.editor.elements.drag-and-drop-ed-23868": {
|
|
102
|
-
"type": "boolean"
|
|
103
|
-
},
|
|
104
98
|
"platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2": {
|
|
105
99
|
"type": "boolean"
|
|
106
100
|
},
|
|
@@ -111,9 +105,6 @@
|
|
|
111
105
|
"type": "boolean",
|
|
112
106
|
"referenceOnly": true
|
|
113
107
|
},
|
|
114
|
-
"platform.editor.elements.drag-and-drop-ed-23892": {
|
|
115
|
-
"type": "boolean"
|
|
116
|
-
},
|
|
117
108
|
"platform_editor_elements_drag_and_drop_ed_24000": {
|
|
118
109
|
"type": "boolean"
|
|
119
110
|
},
|
|
@@ -126,9 +117,6 @@
|
|
|
126
117
|
"platform_editor_elements_drag_and_drop_ed_23189": {
|
|
127
118
|
"type": "boolean"
|
|
128
119
|
},
|
|
129
|
-
"platform.editor.elements.drag-and-drop-ed-23932": {
|
|
130
|
-
"type": "boolean"
|
|
131
|
-
},
|
|
132
120
|
"platform_editor_elements_dnd_ed_23674": {
|
|
133
121
|
"type": "boolean"
|
|
134
122
|
},
|
|
@@ -147,9 +135,6 @@
|
|
|
147
135
|
"platform_editor_element_drag_and_drop_ed_23896": {
|
|
148
136
|
"type": "boolean"
|
|
149
137
|
},
|
|
150
|
-
"platform_editor_element_drag_and_drop_ed_24005": {
|
|
151
|
-
"type": "boolean"
|
|
152
|
-
},
|
|
153
138
|
"platform_editor_element_controls_chrome_input_fix": {
|
|
154
139
|
"type": "boolean"
|
|
155
140
|
},
|