@atlaskit/editor-plugin-block-controls 7.2.12 → 7.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +37 -0
- package/dist/cjs/blockControlsPlugin.js +15 -7
- package/dist/cjs/editor-commands/move-node.js +34 -59
- package/dist/cjs/pm-plugins/handle-mouse-down.js +28 -1
- package/dist/cjs/pm-plugins/handle-mouse-over.js +9 -8
- package/dist/cjs/pm-plugins/utils/getSelection.js +18 -37
- package/dist/cjs/pm-plugins/utils/validation.js +1 -1
- package/dist/cjs/ui/drag-handle.js +13 -4
- package/dist/cjs/ui/inline-drop-target.js +2 -1
- package/dist/cjs/ui/quick-insert-button.js +14 -1
- package/dist/es2019/blockControlsPlugin.js +15 -7
- package/dist/es2019/editor-commands/move-node.js +35 -61
- package/dist/es2019/pm-plugins/handle-mouse-down.js +29 -1
- package/dist/es2019/pm-plugins/handle-mouse-over.js +9 -8
- package/dist/es2019/pm-plugins/utils/getSelection.js +18 -37
- package/dist/es2019/pm-plugins/utils/validation.js +1 -1
- package/dist/es2019/ui/drag-handle.js +14 -5
- package/dist/es2019/ui/inline-drop-target.js +2 -1
- package/dist/es2019/ui/quick-insert-button.js +15 -2
- package/dist/esm/blockControlsPlugin.js +15 -7
- package/dist/esm/editor-commands/move-node.js +34 -59
- package/dist/esm/pm-plugins/handle-mouse-down.js +28 -1
- package/dist/esm/pm-plugins/handle-mouse-over.js +9 -8
- package/dist/esm/pm-plugins/utils/getSelection.js +18 -37
- package/dist/esm/pm-plugins/utils/validation.js +1 -1
- package/dist/esm/ui/drag-handle.js +14 -5
- package/dist/esm/ui/inline-drop-target.js +2 -1
- package/dist/esm/ui/quick-insert-button.js +15 -2
- package/package.json +18 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,42 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 7.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`4f5569bde5e64`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4f5569bde5e64) -
|
|
8
|
+
Add new 'dragHandleSelected' user intent, use this to control table toolbar when drag handle is
|
|
9
|
+
selected
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 7.3.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- [`5167552fe1a93`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5167552fe1a93) -
|
|
20
|
+
[EDITOR-2339] Bump @atlaskit/adf-schema to 51.3.0
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- [`cebe32372285d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cebe32372285d) -
|
|
25
|
+
Tidy up feature gate
|
|
26
|
+
- [`8062900ea5010`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8062900ea5010) -
|
|
27
|
+
[ux] ED-29550 Fix drop targets not showing for layouts as first node
|
|
28
|
+
- [`0b0ef25b2f529`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0b0ef25b2f529) -
|
|
29
|
+
Cleanup various feature gates and align them to aifc_create_enabled
|
|
30
|
+
- [`3feef799ad0a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3feef799ad0a5) -
|
|
31
|
+
[ED-29333] Fix 2 issues when platform_editor_native_anchor_support is enabled
|
|
32
|
+
1. Drag handle is rendered for media node
|
|
33
|
+
2. When advanced_layouts experiment is off, quick insert button is rendered based on child node
|
|
34
|
+
inside layout column (as opposed to layout section node )
|
|
35
|
+
|
|
36
|
+
- [`e108f7cc7cedf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e108f7cc7cedf) -
|
|
37
|
+
[ux] Drag handle and quick insert button in dense mode
|
|
38
|
+
- Updated dependencies
|
|
39
|
+
|
|
3
40
|
## 7.2.12
|
|
4
41
|
|
|
5
42
|
### Patch Changes
|
|
@@ -125,18 +125,26 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
125
125
|
toggleMenu: toggleMenuMeta
|
|
126
126
|
}));
|
|
127
127
|
if ((menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) && currentUserIntent === 'blockMenuOpen') {
|
|
128
|
-
var
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
128
|
+
var state = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
|
|
129
|
+
if (state !== null && state !== void 0 && state.isSelectedViaDragHandle && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_user_intent_fix')) {
|
|
130
|
+
var _api$userIntent4;
|
|
131
|
+
api === null || api === void 0 || (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 || _api$userIntent4.commands.setCurrentUserIntent('dragHandleSelected')({
|
|
132
|
+
tr: tr
|
|
133
|
+
});
|
|
134
|
+
} else {
|
|
135
|
+
var _api$userIntent5;
|
|
136
|
+
// Toggled from drag handle
|
|
137
|
+
api === null || api === void 0 || (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 || _api$userIntent5.commands.setCurrentUserIntent('default')({
|
|
138
|
+
tr: tr
|
|
139
|
+
});
|
|
140
|
+
}
|
|
133
141
|
}
|
|
134
142
|
return tr;
|
|
135
143
|
};
|
|
136
144
|
},
|
|
137
145
|
setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
|
|
138
146
|
return function (_ref5) {
|
|
139
|
-
var _api$
|
|
147
|
+
var _api$userIntent6;
|
|
140
148
|
var tr = _ref5.tr;
|
|
141
149
|
var pos = getPos();
|
|
142
150
|
if (pos === undefined) {
|
|
@@ -160,7 +168,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
160
168
|
tr: tr
|
|
161
169
|
});
|
|
162
170
|
}
|
|
163
|
-
api === null || api === void 0 || (_api$
|
|
171
|
+
api === null || api === void 0 || (_api$userIntent6 = api.userIntent) === null || _api$userIntent6 === void 0 || _api$userIntent6.commands.setCurrentUserIntent('dragging')({
|
|
164
172
|
tr: tr
|
|
165
173
|
});
|
|
166
174
|
return tr;
|
|
@@ -40,50 +40,37 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
40
40
|
function transformSourceSlice(nodeCopy, destType) {
|
|
41
41
|
var srcNode = nodeCopy.content.firstChild;
|
|
42
42
|
var schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
|
|
43
|
-
if (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
var destTypeInDocOrLayoutCol = [doc, layoutColumn].includes(destType);
|
|
43
|
+
if (!schema) {
|
|
44
|
+
return nodeCopy;
|
|
45
|
+
}
|
|
46
|
+
var _schema$nodes = schema.nodes,
|
|
47
|
+
doc = _schema$nodes.doc,
|
|
48
|
+
layoutColumn = _schema$nodes.layoutColumn;
|
|
49
|
+
var destTypeInTable = (0, _validation.isInsideTable)(destType);
|
|
50
|
+
var destTypeInDocOrLayoutCol = [doc, layoutColumn].includes(destType);
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
if (containsExpand && containsNestedExpand) {
|
|
67
|
-
break;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
if (containsExpand && destTypeInTable) {
|
|
71
|
-
return (0, _validation.transformSliceExpandToNestedExpand)(nodeCopy);
|
|
72
|
-
} else if (containsNestedExpand && destTypeInDocOrLayoutCol) {
|
|
73
|
-
return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, schema);
|
|
52
|
+
// No need to loop over slice content if destination requires no transformations
|
|
53
|
+
if (!destTypeInTable && !destTypeInDocOrLayoutCol) {
|
|
54
|
+
return nodeCopy;
|
|
55
|
+
}
|
|
56
|
+
var containsExpand = false;
|
|
57
|
+
var containsNestedExpand = false;
|
|
58
|
+
for (var i = 0; i < nodeCopy.content.childCount; i++) {
|
|
59
|
+
var node = nodeCopy.content.child(i);
|
|
60
|
+
if (node.type === schema.nodes.expand) {
|
|
61
|
+
containsExpand = true;
|
|
62
|
+
} else if (node.type === schema.nodes.nestedExpand) {
|
|
63
|
+
containsNestedExpand = true;
|
|
74
64
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
var _schema$nodes2 = schema.nodes,
|
|
78
|
-
_doc = _schema$nodes2.doc,
|
|
79
|
-
_layoutColumn = _schema$nodes2.layoutColumn;
|
|
80
|
-
if (srcNode.type === schema.nodes.nestedExpand && [_doc, _layoutColumn].includes(destType)) {
|
|
81
|
-
return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, schema);
|
|
82
|
-
} else if (srcNode.type === schema.nodes.expand && (0, _validation.isInsideTable)(destType)) {
|
|
83
|
-
return (0, _validation.transformSliceExpandToNestedExpand)(nodeCopy);
|
|
84
|
-
}
|
|
65
|
+
if (containsExpand && containsNestedExpand) {
|
|
66
|
+
break;
|
|
85
67
|
}
|
|
86
68
|
}
|
|
69
|
+
if (containsExpand && destTypeInTable) {
|
|
70
|
+
return (0, _validation.transformSliceExpandToNestedExpand)(nodeCopy);
|
|
71
|
+
} else if (containsNestedExpand && destTypeInDocOrLayoutCol) {
|
|
72
|
+
return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, schema);
|
|
73
|
+
}
|
|
87
74
|
return nodeCopy;
|
|
88
75
|
}
|
|
89
76
|
var nodesSupportDragLayoutColumnInto = ['tableCell', 'tableHeader', 'panel', 'expand', 'nestedExpand'];
|
|
@@ -146,7 +133,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
146
133
|
var hoistedPos;
|
|
147
134
|
var from = Math.min(expandedAnchor, expandedHead);
|
|
148
135
|
// Nodes like lists nest within themselves, we need to find the top most position
|
|
149
|
-
if (isParentNodeOfTypeLayout
|
|
136
|
+
if (isParentNodeOfTypeLayout) {
|
|
150
137
|
var LAYOUT_COL_DEPTH = 3;
|
|
151
138
|
hoistedPos = state.doc.resolve(from).before(LAYOUT_COL_DEPTH);
|
|
152
139
|
}
|
|
@@ -288,15 +275,9 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
288
275
|
var _api$core7;
|
|
289
276
|
api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref4) {
|
|
290
277
|
var tr = _ref4.tr;
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
});
|
|
295
|
-
} else {
|
|
296
|
-
api === null || api === void 0 || api.blockControls.commands.setMultiSelectPositions(expandedAnchor, expandedHead)({
|
|
297
|
-
tr: tr
|
|
298
|
-
});
|
|
299
|
-
}
|
|
278
|
+
api === null || api === void 0 || api.blockControls.commands.setMultiSelectPositions($newAnchor.pos, $newHead.pos)({
|
|
279
|
+
tr: tr
|
|
280
|
+
});
|
|
300
281
|
moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT, formatMessage)({
|
|
301
282
|
tr: tr
|
|
302
283
|
});
|
|
@@ -318,15 +299,9 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
318
299
|
var _api$core9;
|
|
319
300
|
api === null || api === void 0 || (_api$core9 = api.core) === null || _api$core9 === void 0 || _api$core9.actions.execute(function (_ref6) {
|
|
320
301
|
var tr = _ref6.tr;
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
});
|
|
325
|
-
} else {
|
|
326
|
-
api === null || api === void 0 || api.blockControls.commands.setMultiSelectPositions(expandedAnchor, expandedHead)({
|
|
327
|
-
tr: tr
|
|
328
|
-
});
|
|
329
|
-
}
|
|
302
|
+
api === null || api === void 0 || api.blockControls.commands.setMultiSelectPositions($newAnchor.pos, $newHead.pos)({
|
|
303
|
+
tr: tr
|
|
304
|
+
});
|
|
330
305
|
tr.scrollIntoView();
|
|
331
306
|
return tr;
|
|
332
307
|
});
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.handleMouseDown = void 0;
|
|
7
7
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
8
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
9
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
9
10
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
10
11
|
var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
|
|
@@ -35,7 +36,33 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
|
|
|
35
36
|
}
|
|
36
37
|
} else {
|
|
37
38
|
var isDragHandle = event.target.closest((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? _styles.DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle]') !== null;
|
|
38
|
-
api === null || api === void 0 || api.core.actions.execute(
|
|
39
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref) {
|
|
40
|
+
var tr = _ref.tr;
|
|
41
|
+
api === null || api === void 0 || api.blockControls.commands.setSelectedViaDragHandle(isDragHandle)({
|
|
42
|
+
tr: tr
|
|
43
|
+
});
|
|
44
|
+
/**
|
|
45
|
+
* When block menu is enabled, reset intent back to 'default' as editor-plugin-block-menu sets the user intent to 'blockMenuOpen', and setting here
|
|
46
|
+
* causes flickering as this runs before editor-plugin-block-menu.
|
|
47
|
+
*/
|
|
48
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_user_intent_fix')) {
|
|
49
|
+
if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
|
|
50
|
+
// if target is drag handle, block menu will be opened
|
|
51
|
+
if (!isDragHandle) {
|
|
52
|
+
var _api$userIntent;
|
|
53
|
+
api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('default')({
|
|
54
|
+
tr: tr
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
} else {
|
|
58
|
+
var _api$userIntent2;
|
|
59
|
+
(_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(isDragHandle ? 'dragHandleSelected' : 'default')({
|
|
60
|
+
tr: tr
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return tr;
|
|
65
|
+
});
|
|
39
66
|
}
|
|
40
67
|
return false;
|
|
41
68
|
};
|
|
@@ -36,7 +36,7 @@ var getNodeSelector = function getNodeSelector(ignoreNodes, ignoreNodeDescendant
|
|
|
36
36
|
};
|
|
37
37
|
var getDefaultNodeSelector = (0, _memoizeOne.default)(function () {
|
|
38
38
|
// we don't show handler for node nested in table
|
|
39
|
-
return getNodeSelector((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODES_NEXT), [].concat((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT), ['table']));
|
|
39
|
+
return getNodeSelector([].concat((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODES_NEXT), ['media']), [].concat((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT), ['table']));
|
|
40
40
|
});
|
|
41
41
|
var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
|
|
42
42
|
var _api$blockControls, _api$editorDisabled, _target$classList;
|
|
@@ -51,7 +51,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
51
51
|
editorDisabled = _ref2.editorDisabled;
|
|
52
52
|
|
|
53
53
|
// We shouldn't be firing mouse over transactions when the editor is disabled
|
|
54
|
-
if (editorDisabled && (0, _platformFeatureFlags.fg)('
|
|
54
|
+
if (editorDisabled && (0, _platformFeatureFlags.fg)('aifc_create_enabled')) {
|
|
55
55
|
return false;
|
|
56
56
|
}
|
|
57
57
|
|
|
@@ -64,24 +64,25 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
64
64
|
// Ignored via go/ees005
|
|
65
65
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
66
66
|
var target = event.target;
|
|
67
|
+
var isNativeAnchorSupported = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true);
|
|
67
68
|
if (target !== null && target !== void 0 && (_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('ProseMirror')) {
|
|
68
69
|
return false;
|
|
69
70
|
}
|
|
70
|
-
var rootElement = target === null || target === void 0 ? void 0 : target.closest(
|
|
71
|
+
var rootElement = target === null || target === void 0 ? void 0 : target.closest(isNativeAnchorSupported ? getDefaultNodeSelector() : "[data-drag-handler-anchor-name]");
|
|
71
72
|
if (rootElement) {
|
|
72
73
|
var _rootElement$parentEl;
|
|
73
74
|
// We want to exlude handles from showing for empty paragraph and heading nodes
|
|
74
75
|
if (isEmptyNestedParagraphOrHeading(rootElement)) {
|
|
75
76
|
return false;
|
|
76
77
|
}
|
|
77
|
-
if (rootElement.getAttribute((0, _domAttrName.getTypeNameAttrName)()) === 'media' && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
78
|
+
if (rootElement.getAttribute((0, _domAttrName.getTypeNameAttrName)()) === 'media' && (0, _experiments.editorExperiment)('advanced_layouts', true) && !isNativeAnchorSupported) {
|
|
78
79
|
rootElement = rootElement.closest("[".concat((0, _domAttrName.getAnchorAttrName)(), "][").concat((0, _domAttrName.getTypeNameAttrName)(), "=\"mediaSingle\"]"));
|
|
79
80
|
if (!rootElement) {
|
|
80
81
|
return false;
|
|
81
82
|
}
|
|
82
83
|
}
|
|
83
84
|
var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest("[".concat((0, _domAttrName.getAnchorAttrName)(), "]"));
|
|
84
|
-
var parentElementType =
|
|
85
|
+
var parentElementType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(parentElement) : parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
|
|
85
86
|
if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
86
87
|
// We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
|
|
87
88
|
if (parentElement && parentElementType === 'table') {
|
|
@@ -89,7 +90,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
89
90
|
} else if (parentElement && parentElementType === 'tableRow') {
|
|
90
91
|
var _parentElement$parent;
|
|
91
92
|
var grandparentElement = parentElement === null || parentElement === void 0 || (_parentElement$parent = parentElement.parentElement) === null || _parentElement$parent === void 0 ? void 0 : _parentElement$parent.closest("[".concat((0, _domAttrName.getAnchorAttrName)(), "]"));
|
|
92
|
-
var grandparentElementType =
|
|
93
|
+
var grandparentElementType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(grandparentElement) : grandparentElement === null || grandparentElement === void 0 ? void 0 : grandparentElement.getAttribute('data-drag-handler-node-type');
|
|
93
94
|
if (grandparentElement && grandparentElementType === 'table') {
|
|
94
95
|
rootElement = grandparentElement;
|
|
95
96
|
}
|
|
@@ -156,11 +157,11 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
156
157
|
if (rootDOM instanceof HTMLElement) {
|
|
157
158
|
var _rootDOM$getAttribute;
|
|
158
159
|
rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute((0, _domAttrName.getAnchorAttrName)())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
|
|
159
|
-
rootNodeType =
|
|
160
|
+
rootNodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootDOM) : rootDOM.getAttribute('data-drag-handler-node-type');
|
|
160
161
|
}
|
|
161
162
|
}
|
|
162
163
|
}
|
|
163
|
-
var nodeType =
|
|
164
|
+
var nodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
|
|
164
165
|
if (nodeType) {
|
|
165
166
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
166
167
|
var _api$core, _api$blockControls2;
|
|
@@ -8,7 +8,6 @@ var _selection2 = require("@atlaskit/editor-common/selection");
|
|
|
8
8
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
9
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
10
10
|
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
13
12
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
14
13
|
var getInlineNodePos = exports.getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
|
|
@@ -73,7 +72,7 @@ var oldGetSelection = function oldGetSelection(tr, start) {
|
|
|
73
72
|
// we need a quick way to make all child media nodes appear as selected without the need for a custom selection
|
|
74
73
|
nodeName === 'mediaGroup') {
|
|
75
74
|
return new _state.NodeSelection($startPos);
|
|
76
|
-
} else if (nodeName === 'taskList'
|
|
75
|
+
} else if (nodeName === 'taskList') {
|
|
77
76
|
return _state.TextSelection.create(tr.doc, start, start + nodeSize);
|
|
78
77
|
} else {
|
|
79
78
|
var _getInlineNodePos = getInlineNodePos(tr, start, nodeSize),
|
|
@@ -114,7 +113,7 @@ var newGetSelection = function newGetSelection(tr, start) {
|
|
|
114
113
|
var $mediaStartPos = tr.doc.resolve(start + 1);
|
|
115
114
|
return new _state.NodeSelection($mediaStartPos);
|
|
116
115
|
}
|
|
117
|
-
if (nodeName === 'taskList' && !(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)
|
|
116
|
+
if (nodeName === 'taskList' && !(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
|
|
118
117
|
return _state.TextSelection.create(tr.doc, start, start + nodeSize);
|
|
119
118
|
}
|
|
120
119
|
var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
|
|
@@ -179,40 +178,22 @@ var isHandleCorrelatedToSelection = exports.isHandleCorrelatedToSelection = func
|
|
|
179
178
|
}
|
|
180
179
|
var nodeStart;
|
|
181
180
|
var $selectionFrom = selection.$from;
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
nodeStart = $resolvedNodePos.before();
|
|
199
|
-
}
|
|
200
|
-
} else {
|
|
201
|
-
var selectionFrom = $selectionFrom.pos;
|
|
202
|
-
nodeStart = $selectionFrom.depth ? $selectionFrom.before() : selectionFrom;
|
|
203
|
-
var _$resolvedNodePos = state.doc.resolve(nodeStart);
|
|
204
|
-
if (['tableRow', 'tableCell', 'tableHeader'].includes(_$resolvedNodePos.node().type.name)) {
|
|
205
|
-
var _parentNodeFindRes = (0, _utils.findParentNodeOfType)(state.schema.nodes['table'])(selection);
|
|
206
|
-
var _tablePos = _parentNodeFindRes === null || _parentNodeFindRes === void 0 ? void 0 : _parentNodeFindRes.pos;
|
|
207
|
-
nodeStart = typeof _tablePos === 'undefined' ? nodeStart : _tablePos;
|
|
208
|
-
} else if (['listItem'].includes(_$resolvedNodePos.node().type.name)) {
|
|
209
|
-
nodeStart = _$resolvedNodePos.before(rootListDepth(_$resolvedNodePos));
|
|
210
|
-
} else if (['taskList'].includes(_$resolvedNodePos.node().type.name)) {
|
|
211
|
-
var _listdepth = rootTaskListDepth(_$resolvedNodePos);
|
|
212
|
-
nodeStart = _$resolvedNodePos.before(_listdepth);
|
|
213
|
-
} else if (['blockquote'].includes(_$resolvedNodePos.node().type.name)) {
|
|
214
|
-
nodeStart = _$resolvedNodePos.before();
|
|
215
|
-
}
|
|
181
|
+
nodeStart = $selectionFrom.before($selectionFrom.sharedDepth(selection.to) + 1);
|
|
182
|
+
if (nodeStart === $selectionFrom.pos) {
|
|
183
|
+
nodeStart = $selectionFrom.depth ? $selectionFrom.before() : $selectionFrom.pos;
|
|
184
|
+
}
|
|
185
|
+
var $resolvedNodePos = state.doc.resolve(nodeStart);
|
|
186
|
+
if (['tableRow', 'tableCell', 'tableHeader'].includes($resolvedNodePos.node().type.name)) {
|
|
187
|
+
var parentNodeFindRes = (0, _utils.findParentNodeOfType)(state.schema.nodes['table'])(selection);
|
|
188
|
+
var tablePos = parentNodeFindRes === null || parentNodeFindRes === void 0 ? void 0 : parentNodeFindRes.pos;
|
|
189
|
+
nodeStart = typeof tablePos === 'undefined' ? nodeStart : tablePos;
|
|
190
|
+
} else if (['listItem'].includes($resolvedNodePos.node().type.name)) {
|
|
191
|
+
nodeStart = $resolvedNodePos.before(rootListDepth($resolvedNodePos));
|
|
192
|
+
} else if (['taskList'].includes($resolvedNodePos.node().type.name)) {
|
|
193
|
+
var listdepth = rootTaskListDepth($resolvedNodePos);
|
|
194
|
+
nodeStart = $resolvedNodePos.before(listdepth);
|
|
195
|
+
} else if (['blockquote'].includes($resolvedNodePos.node().type.name)) {
|
|
196
|
+
nodeStart = $resolvedNodePos.before();
|
|
216
197
|
}
|
|
217
198
|
return Boolean(handlePos < selection.$to.pos && handlePos >= nodeStart);
|
|
218
199
|
};
|
|
@@ -173,7 +173,7 @@ function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexI
|
|
|
173
173
|
}
|
|
174
174
|
|
|
175
175
|
// Multiple layout columns do not drop correctly.
|
|
176
|
-
if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'layoutColumn'
|
|
176
|
+
if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'layoutColumn') {
|
|
177
177
|
return false;
|
|
178
178
|
}
|
|
179
179
|
for (var i = 0; i < slice.content.childCount; i++) {
|
|
@@ -135,6 +135,16 @@ var dragHandleButtonStyles = (0, _react2.css)({
|
|
|
135
135
|
backgroundColor: "var(--ds-background-disabled, transparent)"
|
|
136
136
|
}
|
|
137
137
|
});
|
|
138
|
+
|
|
139
|
+
// Calculate scaled dimensions based on the base font size using CSS calc()
|
|
140
|
+
// Default font size is 16px, scale proportionally
|
|
141
|
+
// Standard: 16px -> 24h x 12w, Dense: 13px -> 18h x 9w
|
|
142
|
+
var dragHandleButtonDenseModeStyles = (0, _react2.css)({
|
|
143
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
144
|
+
height: "calc(".concat(_consts2.DRAG_HANDLE_HEIGHT, "px * var(--ak-editor-base-font-size) / ").concat(_consts.akEditorFullPageDefaultFontSize, "px)"),
|
|
145
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
146
|
+
width: "calc(".concat(_styles.DRAG_HANDLE_WIDTH, "px * var(--ak-editor-base-font-size) / ").concat(_consts.akEditorFullPageDefaultFontSize, "px)")
|
|
147
|
+
});
|
|
138
148
|
var dragHandleButtonSmallScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_consts.akEditorFullPageNarrowBreakout, "px)"), {
|
|
139
149
|
opacity: 0,
|
|
140
150
|
visibility: 'hidden'
|
|
@@ -538,9 +548,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
538
548
|
if (typeof handlePos !== 'number') {
|
|
539
549
|
return tr;
|
|
540
550
|
}
|
|
541
|
-
var oldHandlePosCheck = handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to;
|
|
542
551
|
var newHandlePosCheck = (0, _getSelection.isHandleCorrelatedToSelection)(view.state, tr.selection, handlePos);
|
|
543
|
-
if (!tr.selection.empty &&
|
|
552
|
+
if (!tr.selection.empty && newHandlePosCheck) {
|
|
544
553
|
var _api$blockControls7;
|
|
545
554
|
api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setMultiSelectPositions()({
|
|
546
555
|
tr: tr
|
|
@@ -732,7 +741,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
732
741
|
var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
|
|
733
742
|
return _objectSpread({
|
|
734
743
|
left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
|
|
735
|
-
top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)
|
|
744
|
+
top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType), "px)")
|
|
736
745
|
}, bottom);
|
|
737
746
|
}
|
|
738
747
|
var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
|
|
@@ -957,7 +966,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
957
966
|
css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
958
967
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
959
968
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
960
|
-
browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
|
|
969
|
+
browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && dragHandleButtonDenseModeStyles],
|
|
961
970
|
ref: buttonRef
|
|
962
971
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
963
972
|
,
|
|
@@ -102,7 +102,8 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
|
|
|
102
102
|
setIsDraggedOver = _useState2[1];
|
|
103
103
|
var anchorName = (0, _react.useMemo)(function () {
|
|
104
104
|
if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
|
|
105
|
-
|
|
105
|
+
var _getPos;
|
|
106
|
+
return nextNode ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode, (_getPos = getPos()) !== null && _getPos !== void 0 ? _getPos : -1)) || '' : '';
|
|
106
107
|
}
|
|
107
108
|
return nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
|
|
108
109
|
}, [api, getPos, nextNode]);
|
|
@@ -17,9 +17,12 @@ var _styles = require("@atlaskit/editor-common/styles");
|
|
|
17
17
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
18
18
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
19
19
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
20
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
20
21
|
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
21
22
|
var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
|
|
23
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
24
|
var _primitives = require("@atlaskit/primitives");
|
|
25
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
23
26
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
24
27
|
var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
|
|
25
28
|
var _widgetPositions = require("../pm-plugins/utils/widget-positions");
|
|
@@ -62,6 +65,16 @@ var stickyButtonStyles = (0, _primitives.xcss)({
|
|
|
62
65
|
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
63
66
|
}
|
|
64
67
|
});
|
|
68
|
+
|
|
69
|
+
// Calculate scaled dimensions based on the base font size using CSS calc()
|
|
70
|
+
// Default font size is 16px, scale proportionally
|
|
71
|
+
// Standard: 16px -> 24px x 24px, Dense: 13px -> ~18.5px x ~18.5px
|
|
72
|
+
var stickyButtonDenseModeStyles = (0, _primitives.xcss)({
|
|
73
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
74
|
+
height: "calc(".concat(_consts.QUICK_INSERT_HEIGHT, "px * var(--ak-editor-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, "px)"),
|
|
75
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
76
|
+
width: "calc(".concat(_consts.QUICK_INSERT_WIDTH, "px * var(--ak-editor-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, "px)")
|
|
77
|
+
});
|
|
65
78
|
var containerStaticStyles = (0, _primitives.xcss)({
|
|
66
79
|
position: 'absolute',
|
|
67
80
|
zIndex: 'card'
|
|
@@ -278,7 +291,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
278
291
|
testId: "editor-quick-insert-button",
|
|
279
292
|
type: "button",
|
|
280
293
|
"aria-label": formatMessage(_messages.blockControlsMessages.insert),
|
|
281
|
-
xcss: [stickyButtonStyles],
|
|
294
|
+
xcss: [stickyButtonStyles, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && stickyButtonDenseModeStyles],
|
|
282
295
|
onClick: handleQuickInsert,
|
|
283
296
|
onMouseDown: handleMouseDown
|
|
284
297
|
}, (0, _react2.jsx)(_add.default, {
|
|
@@ -119,18 +119,26 @@ export const blockControlsPlugin = ({
|
|
|
119
119
|
toggleMenu: toggleMenuMeta
|
|
120
120
|
});
|
|
121
121
|
if ((menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) && currentUserIntent === 'blockMenuOpen') {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
122
|
+
const state = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
|
|
123
|
+
if (state !== null && state !== void 0 && state.isSelectedViaDragHandle && fg('platform_editor_toolbar_aifc_user_intent_fix')) {
|
|
124
|
+
var _api$userIntent4;
|
|
125
|
+
api === null || api === void 0 ? void 0 : (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 ? void 0 : _api$userIntent4.commands.setCurrentUserIntent('dragHandleSelected')({
|
|
126
|
+
tr
|
|
127
|
+
});
|
|
128
|
+
} else {
|
|
129
|
+
var _api$userIntent5;
|
|
130
|
+
// Toggled from drag handle
|
|
131
|
+
api === null || api === void 0 ? void 0 : (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 ? void 0 : _api$userIntent5.commands.setCurrentUserIntent('default')({
|
|
132
|
+
tr
|
|
133
|
+
});
|
|
134
|
+
}
|
|
127
135
|
}
|
|
128
136
|
return tr;
|
|
129
137
|
},
|
|
130
138
|
setNodeDragged: (getPos, anchorName, nodeType) => ({
|
|
131
139
|
tr
|
|
132
140
|
}) => {
|
|
133
|
-
var _api$
|
|
141
|
+
var _api$userIntent6;
|
|
134
142
|
const pos = getPos();
|
|
135
143
|
if (pos === undefined) {
|
|
136
144
|
return tr;
|
|
@@ -154,7 +162,7 @@ export const blockControlsPlugin = ({
|
|
|
154
162
|
tr
|
|
155
163
|
});
|
|
156
164
|
}
|
|
157
|
-
api === null || api === void 0 ? void 0 : (_api$
|
|
165
|
+
api === null || api === void 0 ? void 0 : (_api$userIntent6 = api.userIntent) === null || _api$userIntent6 === void 0 ? void 0 : _api$userIntent6.commands.setCurrentUserIntent('dragging')({
|
|
158
166
|
tr
|
|
159
167
|
});
|
|
160
168
|
return tr;
|