@atlaskit/editor-plugin-block-controls 2.13.12 → 2.13.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/plugin.js +5 -16
- package/dist/cjs/pm-plugins/decorations-anchor.js +4 -3
- package/dist/cjs/ui/global-styles.js +86 -122
- package/dist/es2019/plugin.js +1 -10
- package/dist/es2019/pm-plugins/decorations-anchor.js +4 -3
- package/dist/es2019/ui/global-styles.js +23 -20
- package/dist/esm/plugin.js +5 -16
- package/dist/esm/pm-plugins/decorations-anchor.js +4 -3
- package/dist/esm/ui/global-styles.js +87 -122
- 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,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 2.13.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#164606](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164606)
|
|
8
|
+
[`34e9782c56a3f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/34e9782c56a3f) -
|
|
9
|
+
tidy platform_editor_empty_line_prompt experiment
|
|
10
|
+
- [#163518](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163518)
|
|
11
|
+
[`0c4fc567f6cfd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c4fc567f6cfd) -
|
|
12
|
+
ED-25705 fix sticky header
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 2.13.12
|
|
4
16
|
|
|
5
17
|
### 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,
|
|
@@ -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
|
};
|
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}`
|
|
@@ -8,17 +8,22 @@ import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSma
|
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
10
|
import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
|
|
11
|
-
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* This anchor element selector disregards anchors that are solely utilized for size measurements,
|
|
14
|
+
* including those within table rows and media.
|
|
15
|
+
*/
|
|
16
|
+
const dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
|
|
12
17
|
const extendedHoverZone = () => css({
|
|
13
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
14
|
-
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
19
|
+
[`.block-ctrl-drag-preview ${dragHandlerAnchorSelector}::after`]: {
|
|
15
20
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
16
21
|
display: 'none !important'
|
|
17
22
|
},
|
|
18
23
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
19
24
|
'.ProseMirror': {
|
|
20
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
21
|
-
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
26
|
+
[`&& ${dragHandlerAnchorSelector}::after`]: {
|
|
22
27
|
content: '""',
|
|
23
28
|
position: 'absolute',
|
|
24
29
|
top: 0,
|
|
@@ -42,15 +47,15 @@ const extendedHoverZone = () => css({
|
|
|
42
47
|
}
|
|
43
48
|
});
|
|
44
49
|
const extendedHoverZoneNested = () => css({
|
|
45
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
46
|
-
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
51
|
+
[`.block-ctrl-drag-preview ${dragHandlerAnchorSelector}::after`]: {
|
|
47
52
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
48
53
|
display: 'none !important'
|
|
49
54
|
},
|
|
50
55
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
51
56
|
'.ProseMirror': {
|
|
52
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
53
|
-
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
58
|
+
[`&& ${dragHandlerAnchorSelector}::after`]: {
|
|
54
59
|
content: '""',
|
|
55
60
|
position: 'absolute',
|
|
56
61
|
top: 0,
|
|
@@ -62,8 +67,8 @@ const extendedHoverZoneNested = () => css({
|
|
|
62
67
|
cursor: 'default',
|
|
63
68
|
zIndex: 1
|
|
64
69
|
},
|
|
65
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
66
|
-
|
|
70
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
71
|
+
[`&& [data-drag-handler-anchor-depth="0"]${dragHandlerAnchorSelector}::after`]: {
|
|
67
72
|
content: '""',
|
|
68
73
|
position: 'absolute',
|
|
69
74
|
top: 0,
|
|
@@ -74,8 +79,8 @@ const extendedHoverZoneNested = () => css({
|
|
|
74
79
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
75
80
|
zIndex: -1
|
|
76
81
|
},
|
|
77
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
78
|
-
|
|
82
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
83
|
+
[`&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ${dragHandlerAnchorSelector}::after`]: {
|
|
79
84
|
content: '""',
|
|
80
85
|
position: 'absolute',
|
|
81
86
|
top: 0,
|
|
@@ -215,8 +220,8 @@ const getTextNodeStyle = () => {
|
|
|
215
220
|
const withRelativePosStyle = css({
|
|
216
221
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
217
222
|
'.ProseMirror': {
|
|
218
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
219
|
-
|
|
223
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
224
|
+
[`&& ${dragHandlerAnchorSelector}`]: {
|
|
220
225
|
position: 'relative'
|
|
221
226
|
}
|
|
222
227
|
}
|
|
@@ -224,8 +229,8 @@ const withRelativePosStyle = css({
|
|
|
224
229
|
const withAnchorNameZindexStyle = css({
|
|
225
230
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
226
231
|
'.ProseMirror': {
|
|
227
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
228
|
-
|
|
232
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
233
|
+
[`&& ${dragHandlerAnchorSelector}`]: {
|
|
229
234
|
zIndex: 1
|
|
230
235
|
}
|
|
231
236
|
}
|
|
@@ -241,8 +246,6 @@ const withAnchorNameZindexNestedStyle = css({
|
|
|
241
246
|
});
|
|
242
247
|
export const GlobalStylesWrapper = () => {
|
|
243
248
|
return jsx(Global, {
|
|
244
|
-
styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, editorExperiment('
|
|
245
|
-
exposure: false
|
|
246
|
-
}) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
|
|
249
|
+
styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
|
|
247
250
|
});
|
|
248
251
|
};
|
package/dist/esm/plugin.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
3
|
import { moveNode } from './commands/move-node';
|
|
6
4
|
import { moveToLayout } from './commands/move-to-layout';
|
|
7
|
-
import { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
|
|
8
5
|
import { createPlugin, key } from './pm-plugins/main';
|
|
9
6
|
import { DragHandleMenu } from './ui/drag-handle-menu';
|
|
10
7
|
import { GlobalStylesWrapper } from './ui/global-styles';
|
|
@@ -20,22 +17,14 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
|
|
|
20
17
|
var getIntl = _ref2.getIntl;
|
|
21
18
|
return createPlugin(api, getIntl);
|
|
22
19
|
}
|
|
23
|
-
}]
|
|
24
|
-
exposure: true
|
|
25
|
-
}) ? [{
|
|
26
|
-
name: 'emptyBlockExperimentPlugin',
|
|
27
|
-
plugin: function plugin(_ref3) {
|
|
28
|
-
var getIntl = _ref3.getIntl;
|
|
29
|
-
return createEmptyBlockExperimentPlugin(api, getIntl);
|
|
30
|
-
}
|
|
31
|
-
}] : []));
|
|
20
|
+
}];
|
|
32
21
|
},
|
|
33
22
|
commands: {
|
|
34
23
|
moveNode: moveNode(api),
|
|
35
24
|
moveToLayout: moveToLayout(api),
|
|
36
25
|
showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
|
|
37
|
-
return function (
|
|
38
|
-
var tr =
|
|
26
|
+
return function (_ref3) {
|
|
27
|
+
var tr = _ref3.tr;
|
|
39
28
|
tr.setMeta(key, {
|
|
40
29
|
activeNode: {
|
|
41
30
|
pos: pos,
|
|
@@ -48,8 +37,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
|
|
|
48
37
|
};
|
|
49
38
|
},
|
|
50
39
|
setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
|
|
51
|
-
return function (
|
|
52
|
-
var tr =
|
|
40
|
+
return function (_ref4) {
|
|
41
|
+
var tr = _ref4.tr;
|
|
53
42
|
var pos = getPos();
|
|
54
43
|
if (pos === undefined) {
|
|
55
44
|
return tr;
|
|
@@ -26,8 +26,8 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
|
|
|
26
26
|
|
|
27
27
|
// TODO use isWrappedMedia when clean up the feature flag
|
|
28
28
|
var isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
|
|
29
|
-
var
|
|
30
|
-
if (
|
|
29
|
+
var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && isPreRelease1();
|
|
30
|
+
if (isFirstTableRow) {
|
|
31
31
|
return false;
|
|
32
32
|
}
|
|
33
33
|
return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
|
|
@@ -88,8 +88,9 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
|
|
|
88
88
|
var _anchorName2;
|
|
89
89
|
anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
|
|
90
90
|
}
|
|
91
|
+
var anchorStyles = ['tableRow', 'media'].includes(node.type.name) ? "anchor-name: ".concat(anchorName, ";") : "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 && !fg('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : '', " ").concat(fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;');
|
|
91
92
|
decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
|
|
92
|
-
style:
|
|
93
|
+
style: anchorStyles
|
|
93
94
|
}, _defineProperty(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _defineProperty(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
|
|
94
95
|
type: TYPE_NODE_DEC,
|
|
95
96
|
anchorName: anchorName,
|