@atlaskit/editor-plugin-block-controls 2.13.12 → 2.13.14
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 +21 -0
- package/dist/cjs/plugin.js +5 -16
- package/dist/cjs/pm-plugins/decorations-anchor.js +4 -3
- package/dist/cjs/pm-plugins/decorations-drop-target.js +3 -0
- package/dist/cjs/ui/drop-target-layout.js +7 -4
- package/dist/cjs/ui/drop-target-v2.js +4 -5
- package/dist/cjs/ui/global-styles.js +86 -122
- package/dist/cjs/utils/inline-drop-target.js +4 -0
- package/dist/es2019/plugin.js +1 -10
- package/dist/es2019/pm-plugins/decorations-anchor.js +4 -3
- package/dist/es2019/pm-plugins/decorations-drop-target.js +3 -0
- package/dist/es2019/ui/drop-target-layout.js +8 -5
- package/dist/es2019/ui/drop-target-v2.js +5 -5
- package/dist/es2019/ui/global-styles.js +23 -20
- package/dist/es2019/utils/inline-drop-target.js +4 -1
- package/dist/esm/plugin.js +5 -16
- package/dist/esm/pm-plugins/decorations-anchor.js +4 -3
- package/dist/esm/pm-plugins/decorations-drop-target.js +3 -0
- package/dist/esm/ui/drop-target-layout.js +7 -4
- package/dist/esm/ui/drop-target-v2.js +4 -5
- package/dist/esm/ui/global-styles.js +87 -122
- package/dist/esm/utils/inline-drop-target.js +4 -0
- package/dist/types/ui/drop-target-layout.d.ts +1 -1
- package/dist/types/utils/inline-drop-target.d.ts +2 -1
- package/dist/types-ts4.5/ui/drop-target-layout.d.ts +1 -1
- package/dist/types-ts4.5/utils/inline-drop-target.d.ts +2 -1
- package/package.json +4 -7
- package/dist/cjs/pm-plugins/empty-block-experiment.js +0 -46
- package/dist/cjs/ui/empty-block-experiment/global-styles.js +0 -66
- package/dist/cjs/ui/empty-block-experiment/widget.js +0 -144
- package/dist/es2019/pm-plugins/empty-block-experiment.js +0 -38
- package/dist/es2019/ui/empty-block-experiment/global-styles.js +0 -77
- package/dist/es2019/ui/empty-block-experiment/widget.js +0 -138
- package/dist/esm/pm-plugins/empty-block-experiment.js +0 -40
- package/dist/esm/ui/empty-block-experiment/global-styles.js +0 -58
- package/dist/esm/ui/empty-block-experiment/widget.js +0 -133
- package/dist/types/pm-plugins/empty-block-experiment.d.ts +0 -13
- package/dist/types/ui/empty-block-experiment/global-styles.d.ts +0 -4
- package/dist/types/ui/empty-block-experiment/widget.d.ts +0 -13
- package/dist/types-ts4.5/pm-plugins/empty-block-experiment.d.ts +0 -13
- package/dist/types-ts4.5/ui/empty-block-experiment/global-styles.d.ts +0 -4
- package/dist/types-ts4.5/ui/empty-block-experiment/widget.d.ts +0 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 2.13.14
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#163579](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163579)
|
|
8
|
+
[`15dc53a3077f1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/15dc53a3077f1) -
|
|
9
|
+
Hide unnecessary inline drop targets
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 2.13.13
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#164606](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164606)
|
|
17
|
+
[`34e9782c56a3f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/34e9782c56a3f) -
|
|
18
|
+
tidy platform_editor_empty_line_prompt experiment
|
|
19
|
+
- [#163518](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163518)
|
|
20
|
+
[`0c4fc567f6cfd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c4fc567f6cfd) -
|
|
21
|
+
ED-25705 fix sticky header
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 2.13.12
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -5,13 +5,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.blockControlsPlugin = void 0;
|
|
8
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
8
|
var _react = _interopRequireDefault(require("react"));
|
|
10
9
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
10
|
var _moveNode = require("./commands/move-node");
|
|
13
11
|
var _moveToLayout = require("./commands/move-to-layout");
|
|
14
|
-
var _emptyBlockExperiment = require("./pm-plugins/empty-block-experiment");
|
|
15
12
|
var _main = require("./pm-plugins/main");
|
|
16
13
|
var _dragHandleMenu = require("./ui/drag-handle-menu");
|
|
17
14
|
var _globalStyles = require("./ui/global-styles");
|
|
@@ -27,22 +24,14 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
27
24
|
var getIntl = _ref2.getIntl;
|
|
28
25
|
return (0, _main.createPlugin)(api, getIntl);
|
|
29
26
|
}
|
|
30
|
-
}]
|
|
31
|
-
exposure: true
|
|
32
|
-
}) ? [{
|
|
33
|
-
name: 'emptyBlockExperimentPlugin',
|
|
34
|
-
plugin: function plugin(_ref3) {
|
|
35
|
-
var getIntl = _ref3.getIntl;
|
|
36
|
-
return (0, _emptyBlockExperiment.createEmptyBlockExperimentPlugin)(api, getIntl);
|
|
37
|
-
}
|
|
38
|
-
}] : []));
|
|
27
|
+
}];
|
|
39
28
|
},
|
|
40
29
|
commands: {
|
|
41
30
|
moveNode: (0, _moveNode.moveNode)(api),
|
|
42
31
|
moveToLayout: (0, _moveToLayout.moveToLayout)(api),
|
|
43
32
|
showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
|
|
44
|
-
return function (
|
|
45
|
-
var tr =
|
|
33
|
+
return function (_ref3) {
|
|
34
|
+
var tr = _ref3.tr;
|
|
46
35
|
tr.setMeta(_main.key, {
|
|
47
36
|
activeNode: {
|
|
48
37
|
pos: pos,
|
|
@@ -55,8 +44,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
55
44
|
};
|
|
56
45
|
},
|
|
57
46
|
setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
|
|
58
|
-
return function (
|
|
59
|
-
var tr =
|
|
47
|
+
return function (_ref4) {
|
|
48
|
+
var tr = _ref4.tr;
|
|
60
49
|
var pos = getPos();
|
|
61
50
|
if (pos === undefined) {
|
|
62
51
|
return tr;
|
|
@@ -33,8 +33,8 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
|
|
|
33
33
|
|
|
34
34
|
// TODO use isWrappedMedia when clean up the feature flag
|
|
35
35
|
var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1');
|
|
36
|
-
var
|
|
37
|
-
if (
|
|
36
|
+
var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && (0, _advancedLayoutsFlags.isPreRelease1)();
|
|
37
|
+
if (isFirstTableRow) {
|
|
38
38
|
return false;
|
|
39
39
|
}
|
|
40
40
|
return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
|
|
@@ -95,8 +95,9 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
|
|
|
95
95
|
var _anchorName2;
|
|
96
96
|
anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
|
|
97
97
|
}
|
|
98
|
+
var anchorStyles = ['tableRow', 'media'].includes(node.type.name) ? "anchor-name: ".concat(anchorName, ";") : "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 && !(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;');
|
|
98
99
|
decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
|
|
99
|
-
style:
|
|
100
|
+
style: anchorStyles
|
|
100
101
|
}, (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
|
|
101
102
|
type: _decorationsCommon.TYPE_NODE_DEC,
|
|
102
103
|
anchorName: anchorName,
|
|
@@ -163,6 +163,9 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
163
163
|
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
164
164
|
depth = $pos.depth;
|
|
165
165
|
if (isAdvancedLayoutsPreRelease2) {
|
|
166
|
+
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
|
|
167
|
+
return false;
|
|
168
|
+
}
|
|
166
169
|
if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node && (
|
|
167
170
|
// Not the first node
|
|
168
171
|
(parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts.maxLayoutColumnSupported)() || isSameLayout)) {
|
|
@@ -39,6 +39,7 @@ var dropTargetLayoutHintStyle = (0, _react2.css)({
|
|
|
39
39
|
width: 0
|
|
40
40
|
});
|
|
41
41
|
var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {
|
|
42
|
+
var _api$blockControls;
|
|
42
43
|
var api = props.api,
|
|
43
44
|
getPos = props.getPos,
|
|
44
45
|
parent = props.parent;
|
|
@@ -51,10 +52,9 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
|
|
|
51
52
|
var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
|
|
52
53
|
_useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
|
|
53
54
|
isActiveAnchor = _useActiveAnchorTrack2[0];
|
|
55
|
+
var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
|
|
56
|
+
activeNode = _ref.activeNode;
|
|
54
57
|
var onDrop = (0, _react.useCallback)(function () {
|
|
55
|
-
var _api$blockControls;
|
|
56
|
-
var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
|
|
57
|
-
activeNode = _ref.activeNode;
|
|
58
58
|
if (!activeNode) {
|
|
59
59
|
return;
|
|
60
60
|
}
|
|
@@ -64,7 +64,7 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
|
|
|
64
64
|
var from = activeNode.pos;
|
|
65
65
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(from, to));
|
|
66
66
|
}
|
|
67
|
-
}, [api, getPos]);
|
|
67
|
+
}, [api, getPos, activeNode]);
|
|
68
68
|
(0, _react.useEffect)(function () {
|
|
69
69
|
if (ref.current) {
|
|
70
70
|
return (0, _adapter.dropTargetForElements)({
|
|
@@ -79,6 +79,9 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
|
|
|
79
79
|
});
|
|
80
80
|
}
|
|
81
81
|
}, [onDrop]);
|
|
82
|
+
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
82
85
|
return (0, _react2.jsx)("div", {
|
|
83
86
|
ref: ref,
|
|
84
87
|
css: dropTargetLayoutStyle,
|
|
@@ -178,7 +178,7 @@ var HoverZone = function HoverZone(_ref) {
|
|
|
178
178
|
});
|
|
179
179
|
};
|
|
180
180
|
var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
|
|
181
|
-
var _dynamicStyle;
|
|
181
|
+
var _api$blockControls, _dynamicStyle;
|
|
182
182
|
var api = props.api,
|
|
183
183
|
getPos = props.getPos,
|
|
184
184
|
prevNode = props.prevNode,
|
|
@@ -196,10 +196,9 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
|
|
|
196
196
|
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
|
|
197
197
|
widthState = _useSharedPluginState.widthState;
|
|
198
198
|
var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
|
|
199
|
+
var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
|
|
200
|
+
activeNode = _ref2.activeNode;
|
|
199
201
|
var onDrop = function onDrop() {
|
|
200
|
-
var _api$blockControls;
|
|
201
|
-
var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
|
|
202
|
-
activeNode = _ref2.activeNode;
|
|
203
202
|
if (!activeNode) {
|
|
204
203
|
return;
|
|
205
204
|
}
|
|
@@ -255,7 +254,7 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
|
|
|
255
254
|
anchorRectCache: anchorRectCache,
|
|
256
255
|
position: "lower",
|
|
257
256
|
isNestedDropTarget: isNestedDropTarget
|
|
258
|
-
}), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
|
|
257
|
+
}), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout, activeNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
|
|
259
258
|
position: "left"
|
|
260
259
|
})), (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
|
|
261
260
|
position: "right"
|
|
@@ -11,122 +11,94 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
|
11
11
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
12
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
13
|
var _consts = require("./consts");
|
|
14
|
-
var _globalStyles = require("./empty-block-experiment/global-styles");
|
|
15
14
|
/**
|
|
16
15
|
* @jsxRuntime classic
|
|
17
16
|
* @jsx jsx
|
|
18
17
|
*/
|
|
19
18
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
20
19
|
|
|
20
|
+
/**
|
|
21
|
+
* This anchor element selector disregards anchors that are solely utilized for size measurements,
|
|
22
|
+
* including those within table rows and media.
|
|
23
|
+
*/
|
|
24
|
+
var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
|
|
21
25
|
var extendedHoverZone = function extendedHoverZone() {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
// TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
|
|
45
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
46
|
-
'hr[data-drag-handler-anchor-name]': {
|
|
47
|
-
overflow: 'visible'
|
|
48
|
-
},
|
|
49
|
-
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
50
|
-
'[data-blocks-drag-handle-container="true"] + *::after': {
|
|
51
|
-
display: 'none'
|
|
52
|
-
}
|
|
53
|
-
});
|
|
26
|
+
var _css;
|
|
27
|
+
return (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
29
|
+
display: 'none !important'
|
|
30
|
+
}), (0, _defineProperty2.default)(_css, '.ProseMirror', (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
31
|
+
content: '""',
|
|
32
|
+
position: 'absolute',
|
|
33
|
+
top: 0,
|
|
34
|
+
left: '-100%',
|
|
35
|
+
width: '100%',
|
|
36
|
+
height: '100%',
|
|
37
|
+
background: 'transparent',
|
|
38
|
+
cursor: 'default',
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
40
|
+
zIndex: -1
|
|
41
|
+
})), (0, _defineProperty2.default)(_css, 'hr[data-drag-handler-anchor-name]', {
|
|
42
|
+
overflow: 'visible'
|
|
43
|
+
}), (0, _defineProperty2.default)(_css, '[data-blocks-drag-handle-container="true"] + *::after', {
|
|
44
|
+
display: 'none'
|
|
45
|
+
}), _css));
|
|
54
46
|
};
|
|
55
47
|
var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
left: 0,
|
|
111
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
112
|
-
width: '100%',
|
|
113
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
114
|
-
height: "".concat(_consts.DRAG_HANDLE_WIDTH, "px"),
|
|
115
|
-
cursor: 'default',
|
|
116
|
-
zIndex: 1
|
|
117
|
-
}
|
|
118
|
-
},
|
|
119
|
-
// TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
|
|
120
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
121
|
-
'hr[data-drag-handler-anchor-name]': {
|
|
122
|
-
overflow: 'visible'
|
|
123
|
-
},
|
|
124
|
-
//Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
|
|
125
|
-
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
126
|
-
'[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
|
|
127
|
-
display: 'none'
|
|
128
|
-
}
|
|
129
|
-
});
|
|
48
|
+
var _ProseMirror2, _css2;
|
|
49
|
+
return (0, _react.css)((_css2 = {}, (0, _defineProperty2.default)(_css2, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
51
|
+
display: 'none !important'
|
|
52
|
+
}), (0, _defineProperty2.default)(_css2, '.ProseMirror', (_ProseMirror2 = {}, (0, _defineProperty2.default)(_ProseMirror2, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
53
|
+
content: '""',
|
|
54
|
+
position: 'absolute',
|
|
55
|
+
top: 0,
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
57
|
+
left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
59
|
+
width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
|
|
60
|
+
height: '100%',
|
|
61
|
+
cursor: 'default',
|
|
62
|
+
zIndex: 1
|
|
63
|
+
}), (0, _defineProperty2.default)(_ProseMirror2, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
|
|
64
|
+
content: '""',
|
|
65
|
+
position: 'absolute',
|
|
66
|
+
top: 0,
|
|
67
|
+
left: '-100%',
|
|
68
|
+
width: '100%',
|
|
69
|
+
height: '100%',
|
|
70
|
+
cursor: 'default',
|
|
71
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
72
|
+
zIndex: -1
|
|
73
|
+
}), (0, _defineProperty2.default)(_ProseMirror2, "&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
74
|
+
content: '""',
|
|
75
|
+
position: 'absolute',
|
|
76
|
+
top: 0,
|
|
77
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
78
|
+
left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
|
|
79
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
80
|
+
width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
|
|
81
|
+
height: '100%',
|
|
82
|
+
cursor: 'default',
|
|
83
|
+
zIndex: 1
|
|
84
|
+
}), (0, _defineProperty2.default)(_ProseMirror2, '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
|
|
85
|
+
content: '""',
|
|
86
|
+
position: 'absolute',
|
|
87
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
88
|
+
top: "".concat(-_consts.DRAG_HANDLE_WIDTH / 2, "px"),
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
90
|
+
left: 0,
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
92
|
+
width: '100%',
|
|
93
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
94
|
+
height: "".concat(_consts.DRAG_HANDLE_WIDTH, "px"),
|
|
95
|
+
cursor: 'default',
|
|
96
|
+
zIndex: 1
|
|
97
|
+
}), _ProseMirror2)), (0, _defineProperty2.default)(_css2, 'hr[data-drag-handler-anchor-name]', {
|
|
98
|
+
overflow: 'visible'
|
|
99
|
+
}), (0, _defineProperty2.default)(_css2, '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
|
|
100
|
+
display: 'none'
|
|
101
|
+
}), _css2));
|
|
130
102
|
};
|
|
131
103
|
var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
|
|
132
104
|
var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
|
|
@@ -211,21 +183,15 @@ var getTextNodeStyle = function getTextNodeStyle() {
|
|
|
211
183
|
};
|
|
212
184
|
var withRelativePosStyle = (0, _react.css)({
|
|
213
185
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
214
|
-
'.ProseMirror': {
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
position: 'relative'
|
|
218
|
-
}
|
|
219
|
-
}
|
|
186
|
+
'.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector), {
|
|
187
|
+
position: 'relative'
|
|
188
|
+
})
|
|
220
189
|
});
|
|
221
190
|
var withAnchorNameZindexStyle = (0, _react.css)({
|
|
222
191
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
223
|
-
'.ProseMirror': {
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
zIndex: 1
|
|
227
|
-
}
|
|
228
|
-
}
|
|
192
|
+
'.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector), {
|
|
193
|
+
zIndex: 1
|
|
194
|
+
})
|
|
229
195
|
});
|
|
230
196
|
var withAnchorNameZindexNestedStyle = (0, _react.css)({
|
|
231
197
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -238,8 +204,6 @@ var withAnchorNameZindexNestedStyle = (0, _react.css)({
|
|
|
238
204
|
});
|
|
239
205
|
var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
240
206
|
return (0, _react.jsx)(_react.Global, {
|
|
241
|
-
styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _experiments.editorExperiment)('
|
|
242
|
-
exposure: false
|
|
243
|
-
}) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
|
|
207
|
+
styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
|
|
244
208
|
});
|
|
245
209
|
};
|
|
@@ -10,12 +10,16 @@ var _advancedLayoutsFlags = require("./advanced-layouts-flags");
|
|
|
10
10
|
var _checkMediaLayout = require("./check-media-layout");
|
|
11
11
|
var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
|
|
12
12
|
var isSameLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
13
|
+
var activeNode = arguments.length > 3 ? arguments[3] : undefined;
|
|
13
14
|
if (!(0, _advancedLayoutsFlags.isPreRelease1)() || isNested) {
|
|
14
15
|
return false;
|
|
15
16
|
}
|
|
16
17
|
if ((0, _checkMediaLayout.isWrappedMedia)(node)) {
|
|
17
18
|
return false;
|
|
18
19
|
}
|
|
20
|
+
if ((0, _advancedLayoutsFlags.isPreRelease2)() && (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
|
|
21
|
+
return false;
|
|
22
|
+
}
|
|
19
23
|
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
|
|
20
24
|
return node.childCount < (0, _consts.maxLayoutColumnSupported)() || (0, _advancedLayoutsFlags.isPreRelease2)() && isSameLayout;
|
|
21
25
|
}
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
3
|
import { moveNode } from './commands/move-node';
|
|
5
4
|
import { moveToLayout } from './commands/move-to-layout';
|
|
6
|
-
import { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
|
|
7
5
|
import { createPlugin, key } from './pm-plugins/main';
|
|
8
6
|
import { DragHandleMenu } from './ui/drag-handle-menu';
|
|
9
7
|
import { GlobalStylesWrapper } from './ui/global-styles';
|
|
@@ -18,14 +16,7 @@ export const blockControlsPlugin = ({
|
|
|
18
16
|
plugin: ({
|
|
19
17
|
getIntl
|
|
20
18
|
}) => createPlugin(api, getIntl)
|
|
21
|
-
}
|
|
22
|
-
exposure: true
|
|
23
|
-
}) ? [{
|
|
24
|
-
name: 'emptyBlockExperimentPlugin',
|
|
25
|
-
plugin: ({
|
|
26
|
-
getIntl
|
|
27
|
-
}) => createEmptyBlockExperimentPlugin(api, getIntl)
|
|
28
|
-
}] : [])];
|
|
19
|
+
}];
|
|
29
20
|
},
|
|
30
21
|
commands: {
|
|
31
22
|
moveNode: moveNode(api),
|
|
@@ -25,8 +25,8 @@ const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
|
|
|
25
25
|
|
|
26
26
|
// TODO use isWrappedMedia when clean up the feature flag
|
|
27
27
|
const isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
|
|
28
|
-
const
|
|
29
|
-
if (
|
|
28
|
+
const isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && isPreRelease1();
|
|
29
|
+
if (isFirstTableRow) {
|
|
30
30
|
return false;
|
|
31
31
|
}
|
|
32
32
|
return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
|
|
@@ -84,8 +84,9 @@ export const nodeDecorations = (newState, from, to) => {
|
|
|
84
84
|
var _anchorName2;
|
|
85
85
|
anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
|
|
86
86
|
}
|
|
87
|
+
const anchorStyles = ['tableRow', 'media'].includes(node.type.name) ? `anchor-name: ${anchorName};` : `anchor-name: ${anchorName}; ${pos === 0 && !fg('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : ''} ${fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;'}`;
|
|
87
88
|
decs.push(Decoration.node(pos, pos + node.nodeSize, {
|
|
88
|
-
style:
|
|
89
|
+
style: anchorStyles,
|
|
89
90
|
['data-drag-handler-anchor-name']: anchorName,
|
|
90
91
|
['data-drag-handler-node-type']: node.type.name,
|
|
91
92
|
['data-drag-handler-anchor-depth']: `${depth}`
|
|
@@ -155,6 +155,9 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
|
|
|
155
155
|
if (editorExperiment('nested-dnd', true)) {
|
|
156
156
|
depth = $pos.depth;
|
|
157
157
|
if (isAdvancedLayoutsPreRelease2) {
|
|
158
|
+
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
|
|
159
|
+
return false;
|
|
160
|
+
}
|
|
158
161
|
if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node && (
|
|
159
162
|
// Not the first node
|
|
160
163
|
(parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported() || isSameLayout)) {
|
|
@@ -31,6 +31,7 @@ const dropTargetLayoutHintStyle = css({
|
|
|
31
31
|
width: 0
|
|
32
32
|
});
|
|
33
33
|
export const DropTargetLayout = props => {
|
|
34
|
+
var _api$blockControls;
|
|
34
35
|
const {
|
|
35
36
|
api,
|
|
36
37
|
getPos,
|
|
@@ -40,11 +41,10 @@ export const DropTargetLayout = props => {
|
|
|
40
41
|
const [isDraggedOver, setIsDraggedOver] = useState(false);
|
|
41
42
|
const anchorName = getNodeAnchor(parent);
|
|
42
43
|
const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
|
|
44
|
+
const {
|
|
45
|
+
activeNode
|
|
46
|
+
} = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
|
|
43
47
|
const onDrop = useCallback(() => {
|
|
44
|
-
var _api$blockControls;
|
|
45
|
-
const {
|
|
46
|
-
activeNode
|
|
47
|
-
} = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
|
|
48
48
|
if (!activeNode) {
|
|
49
49
|
return;
|
|
50
50
|
}
|
|
@@ -56,7 +56,7 @@ export const DropTargetLayout = props => {
|
|
|
56
56
|
} = activeNode;
|
|
57
57
|
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(from, to));
|
|
58
58
|
}
|
|
59
|
-
}, [api, getPos]);
|
|
59
|
+
}, [api, getPos, activeNode]);
|
|
60
60
|
useEffect(() => {
|
|
61
61
|
if (ref.current) {
|
|
62
62
|
return dropTargetForElements({
|
|
@@ -71,6 +71,9 @@ export const DropTargetLayout = props => {
|
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
}, [onDrop]);
|
|
74
|
+
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
|
|
75
|
+
return null;
|
|
76
|
+
}
|
|
74
77
|
return jsx("div", {
|
|
75
78
|
ref: ref,
|
|
76
79
|
css: dropTargetLayoutStyle,
|
|
@@ -166,6 +166,7 @@ const HoverZone = ({
|
|
|
166
166
|
});
|
|
167
167
|
};
|
|
168
168
|
export const DropTargetV2 = props => {
|
|
169
|
+
var _api$blockControls;
|
|
169
170
|
const {
|
|
170
171
|
api,
|
|
171
172
|
getPos,
|
|
@@ -182,11 +183,10 @@ export const DropTargetV2 = props => {
|
|
|
182
183
|
widthState
|
|
183
184
|
} = useSharedPluginState(api, ['width']);
|
|
184
185
|
const isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
|
|
186
|
+
const {
|
|
187
|
+
activeNode
|
|
188
|
+
} = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
|
|
185
189
|
const onDrop = () => {
|
|
186
|
-
var _api$blockControls;
|
|
187
|
-
const {
|
|
188
|
-
activeNode
|
|
189
|
-
} = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
|
|
190
190
|
if (!activeNode) {
|
|
191
191
|
return;
|
|
192
192
|
}
|
|
@@ -239,7 +239,7 @@ export const DropTargetV2 = props => {
|
|
|
239
239
|
anchorRectCache: anchorRectCache,
|
|
240
240
|
position: "lower",
|
|
241
241
|
isNestedDropTarget: isNestedDropTarget
|
|
242
|
-
}), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
|
|
242
|
+
}), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout, activeNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
|
|
243
243
|
position: "left"
|
|
244
244
|
})), jsx(InlineDropTarget, _extends({}, props, {
|
|
245
245
|
position: "right"
|