@atlaskit/editor-plugin-block-controls 2.15.5 → 2.15.6
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 +9 -0
- package/dist/cjs/pm-plugins/decorations-anchor.js +2 -3
- package/dist/cjs/pm-plugins/decorations-common.js +1 -2
- package/dist/cjs/pm-plugins/utils/active-anchor-tracker.js +1 -2
- package/dist/cjs/pm-plugins/utils/anchor-utils.js +1 -2
- package/dist/cjs/ui/consts.js +1 -1
- package/dist/cjs/ui/drop-target-v2.js +3 -3
- package/dist/cjs/ui/drop-target.js +2 -3
- package/dist/cjs/ui/global-styles.js +19 -17
- package/dist/cjs/ui/inline-drop-target.js +1 -2
- package/dist/es2019/ui/global-styles.js +9 -2
- package/dist/esm/pm-plugins/decorations-anchor.js +2 -3
- package/dist/esm/pm-plugins/decorations-common.js +1 -2
- package/dist/esm/pm-plugins/utils/active-anchor-tracker.js +1 -2
- package/dist/esm/pm-plugins/utils/anchor-utils.js +1 -2
- package/dist/esm/ui/consts.js +1 -1
- package/dist/esm/ui/drop-target-v2.js +3 -3
- package/dist/esm/ui/drop-target.js +2 -3
- package/dist/esm/ui/global-styles.js +19 -17
- package/dist/esm/ui/inline-drop-target.js +1 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 2.15.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#177508](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/177508)
|
|
8
|
+
[`49a5afedb8155`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49a5afedb8155) -
|
|
9
|
+
[ux] ED-25951: Fixed the jittering for heading with indentation in layouts
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 2.15.5
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -74,7 +74,6 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
|
|
|
74
74
|
var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
|
|
75
75
|
var ignore_nodes = (0, _experiments.editorExperiment)('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;
|
|
76
76
|
newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
|
|
77
|
-
var _Decoration$node;
|
|
78
77
|
var depth = 0;
|
|
79
78
|
var anchorName;
|
|
80
79
|
var shouldDescend = shouldDescendIntoNode(node);
|
|
@@ -96,9 +95,9 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
|
|
|
96
95
|
}
|
|
97
96
|
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
97
|
var subType = node.attrs.level ? "-".concat(node.attrs.level) : '';
|
|
99
|
-
decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (
|
|
98
|
+
decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
100
99
|
style: anchorStyles
|
|
101
|
-
},
|
|
100
|
+
}, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', node.type.name + subType), 'data-drag-handler-anchor-depth', "".concat(depth)), {
|
|
102
101
|
type: _decorationsCommon.TYPE_NODE_DEC,
|
|
103
102
|
anchorName: anchorName,
|
|
104
103
|
nodeType: node.type.name
|
|
@@ -26,7 +26,7 @@ var ObjHash = /*#__PURE__*/function () {
|
|
|
26
26
|
function ObjHash() {
|
|
27
27
|
(0, _classCallCheck2.default)(this, ObjHash);
|
|
28
28
|
}
|
|
29
|
-
(0, _createClass2.default)(ObjHash, null, [{
|
|
29
|
+
return (0, _createClass2.default)(ObjHash, null, [{
|
|
30
30
|
key: "getForNode",
|
|
31
31
|
value: function getForNode(node) {
|
|
32
32
|
if (this.caching.has(node)) {
|
|
@@ -37,7 +37,6 @@ var ObjHash = /*#__PURE__*/function () {
|
|
|
37
37
|
return uniqueId;
|
|
38
38
|
}
|
|
39
39
|
}]);
|
|
40
|
-
return ObjHash;
|
|
41
40
|
}();
|
|
42
41
|
(0, _defineProperty2.default)(ObjHash, "caching", new WeakMap());
|
|
43
42
|
var unmountDecorations = exports.unmountDecorations = function unmountDecorations(nodeViewPortalProviderAPI, selector, key) {
|
|
@@ -18,7 +18,7 @@ var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function ()
|
|
|
18
18
|
(0, _defineProperty2.default)(this, "lastActiveAnchor", '');
|
|
19
19
|
this.emitter = new _events.EventEmitter();
|
|
20
20
|
}
|
|
21
|
-
(0, _createClass2.default)(ActiveAnchorTracker, [{
|
|
21
|
+
return (0, _createClass2.default)(ActiveAnchorTracker, [{
|
|
22
22
|
key: "subscribe",
|
|
23
23
|
value: function subscribe(anchorName, callback) {
|
|
24
24
|
if (this.emitter) {
|
|
@@ -53,7 +53,6 @@ var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function ()
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}]);
|
|
56
|
-
return ActiveAnchorTracker;
|
|
57
56
|
}(); // TODO We should use a scoped ActiveAnchorTracker rather than the global static object.
|
|
58
57
|
// Move this into the plugin scope once the newApply functions becomes default apply.
|
|
59
58
|
var defaultActiveAnchorTracker = exports.defaultActiveAnchorTracker = new ActiveAnchorTracker();
|
|
@@ -26,7 +26,7 @@ var AnchorRectCache = exports.AnchorRectCache = /*#__PURE__*/function () {
|
|
|
26
26
|
(0, _defineProperty2.default)(this, "isDirty", true);
|
|
27
27
|
(0, _defineProperty2.default)(this, "view", null);
|
|
28
28
|
}
|
|
29
|
-
(0, _createClass2.default)(AnchorRectCache, [{
|
|
29
|
+
return (0, _createClass2.default)(AnchorRectCache, [{
|
|
30
30
|
key: "clear",
|
|
31
31
|
value: function clear() {
|
|
32
32
|
this.isDirty = true;
|
|
@@ -123,5 +123,4 @@ var AnchorRectCache = exports.AnchorRectCache = /*#__PURE__*/function () {
|
|
|
123
123
|
return rects[anchorName];
|
|
124
124
|
}
|
|
125
125
|
}]);
|
|
126
|
-
return AnchorRectCache;
|
|
127
126
|
}();
|
package/dist/cjs/ui/consts.js
CHANGED
|
@@ -86,7 +86,7 @@ var topPositionAdjustment = exports.topPositionAdjustment = function topPosition
|
|
|
86
86
|
return 0;
|
|
87
87
|
}
|
|
88
88
|
};
|
|
89
|
-
var dropTargetMarginMap = exports.dropTargetMarginMap = (_dropTargetMarginMap = {}, (0, _defineProperty2.default)(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"),
|
|
89
|
+
var dropTargetMarginMap = exports.dropTargetMarginMap = (_dropTargetMarginMap = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), -20, "var(--ds-space-negative-250, -20px)"), -16, "var(--ds-space-negative-200, -16px)"), -12, "var(--ds-space-negative-150, -12px)"), -8, "var(--ds-space-negative-100, -8px)"), -6, "var(--ds-space-negative-075, -6px)"), -4, "var(--ds-space-negative-050, -4px)"), -2, "var(--ds-space-negative-025, -2px)"), 0, "var(--ds-space-0, 0)"), 2, "var(--ds-space-025, 2px)"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), 6, "var(--ds-space-075, 6px)"), 8, "var(--ds-space-100, 8px)"), 12, "var(--ds-space-150, 12px)"), 16, "var(--ds-space-200, 16px)"), 20, "var(--ds-space-250, 20px)"), 24, "var(--ds-space-300, 24px)"));
|
|
90
90
|
|
|
91
91
|
/**
|
|
92
92
|
* This document serves as a quick reference map for correlating various space matches
|
|
@@ -177,7 +177,7 @@ var HoverZone = function HoverZone(_ref) {
|
|
|
177
177
|
});
|
|
178
178
|
};
|
|
179
179
|
var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
|
|
180
|
-
var _api$blockControls
|
|
180
|
+
var _api$blockControls;
|
|
181
181
|
var api = props.api,
|
|
182
182
|
getPos = props.getPos,
|
|
183
183
|
prevNode = props.prevNode,
|
|
@@ -208,9 +208,9 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
|
|
|
208
208
|
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.moveNode(start, pos, undefined, formatMessage));
|
|
209
209
|
}
|
|
210
210
|
};
|
|
211
|
-
var dynamicStyle = (
|
|
211
|
+
var dynamicStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
212
212
|
width: isNestedDropTarget ? 'unset' : '100%'
|
|
213
|
-
},
|
|
213
|
+
}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, (0, _experiments.editorExperiment)('nested-dnd', true) ? _constants.layers.navigation() : _constants.layers.card());
|
|
214
214
|
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(HoverZone, {
|
|
215
215
|
onDragEnter: function onDragEnter() {
|
|
216
216
|
return setIsDraggedOver(true);
|
|
@@ -99,7 +99,6 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
|
|
|
99
99
|
return marginLookupMap[offset];
|
|
100
100
|
};
|
|
101
101
|
var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
|
|
102
|
-
var _dynamicStyle;
|
|
103
102
|
var api = _ref3.api,
|
|
104
103
|
getPos = _ref3.getPos,
|
|
105
104
|
prevNode = _ref3.prevNode,
|
|
@@ -186,9 +185,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
|
|
|
186
185
|
}
|
|
187
186
|
return getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget);
|
|
188
187
|
}, [prevNode, nextNode, parentNode, isNestedDropTarget]);
|
|
189
|
-
var dynamicStyle = (
|
|
188
|
+
var dynamicStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
190
189
|
width: isNestedDropTarget ? 'unset' : '100%'
|
|
191
|
-
},
|
|
190
|
+
}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, (0, _experiments.editorExperiment)('nested-dnd', true) ? _constants.layers.navigation() : _constants.layers.card());
|
|
192
191
|
return (
|
|
193
192
|
// Note: Firefox has trouble with using a button element as the handle for drag and drop
|
|
194
193
|
(0, _react2.jsx)("div", {
|
|
@@ -23,11 +23,10 @@ var _consts = require("./consts");
|
|
|
23
23
|
*/
|
|
24
24
|
var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
|
|
25
25
|
var extendedHoverZone = function extendedHoverZone() {
|
|
26
|
-
|
|
27
|
-
return (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
26
|
+
return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
28
27
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
29
28
|
display: 'none !important'
|
|
30
|
-
}),
|
|
29
|
+
}), '.ProseMirror', (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
31
30
|
content: '""',
|
|
32
31
|
position: 'absolute',
|
|
33
32
|
top: 0,
|
|
@@ -38,18 +37,17 @@ var extendedHoverZone = function extendedHoverZone() {
|
|
|
38
37
|
cursor: 'default',
|
|
39
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
40
39
|
zIndex: -1
|
|
41
|
-
})),
|
|
40
|
+
})), 'hr[data-drag-handler-anchor-name]', {
|
|
42
41
|
overflow: 'visible'
|
|
43
|
-
}),
|
|
42
|
+
}), '[data-blocks-drag-handle-container="true"] + *::after', {
|
|
44
43
|
display: 'none'
|
|
45
|
-
})
|
|
44
|
+
}));
|
|
46
45
|
};
|
|
47
46
|
var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
48
|
-
|
|
49
|
-
return (0, _react.css)((_css2 = {}, (0, _defineProperty2.default)(_css2, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
47
|
+
return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
50
48
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
51
49
|
display: 'none !important'
|
|
52
|
-
}), (0, _defineProperty2.default)(
|
|
50
|
+
}), '.ProseMirror', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
53
51
|
content: '""',
|
|
54
52
|
position: 'absolute',
|
|
55
53
|
top: 0,
|
|
@@ -60,7 +58,7 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
|
60
58
|
height: '100%',
|
|
61
59
|
cursor: 'default',
|
|
62
60
|
zIndex: 1
|
|
63
|
-
}),
|
|
61
|
+
}), "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
|
|
64
62
|
content: '""',
|
|
65
63
|
position: 'absolute',
|
|
66
64
|
top: 0,
|
|
@@ -70,7 +68,7 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
|
70
68
|
cursor: 'default',
|
|
71
69
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
72
70
|
zIndex: -1
|
|
73
|
-
}),
|
|
71
|
+
}), "&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
74
72
|
content: '""',
|
|
75
73
|
position: 'absolute',
|
|
76
74
|
top: 0,
|
|
@@ -81,7 +79,7 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
|
81
79
|
height: '100%',
|
|
82
80
|
cursor: 'default',
|
|
83
81
|
zIndex: 1
|
|
84
|
-
}),
|
|
82
|
+
}), '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
|
|
85
83
|
content: '""',
|
|
86
84
|
position: 'absolute',
|
|
87
85
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -94,11 +92,11 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
|
94
92
|
height: "".concat(_consts.DRAG_HANDLE_WIDTH, "px"),
|
|
95
93
|
cursor: 'default',
|
|
96
94
|
zIndex: 1
|
|
97
|
-
})
|
|
95
|
+
})), 'hr[data-drag-handler-anchor-name]', {
|
|
98
96
|
overflow: 'visible'
|
|
99
|
-
}),
|
|
97
|
+
}), '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
|
|
100
98
|
display: 'none'
|
|
101
|
-
})
|
|
99
|
+
}));
|
|
102
100
|
};
|
|
103
101
|
var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
|
|
104
102
|
var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
|
|
@@ -113,7 +111,7 @@ var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, with
|
|
|
113
111
|
display: 'none !important'
|
|
114
112
|
}));
|
|
115
113
|
var withInlineNodeStyleWithChromeFixSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
|
|
116
|
-
var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child")].join(', ');
|
|
114
|
+
var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
|
|
117
115
|
|
|
118
116
|
/**
|
|
119
117
|
* Please do not change change transform to display:none, or visibility:hidden
|
|
@@ -187,6 +185,10 @@ var withFormatInLayoutStyleFix = (0, _react.css)((0, _defineProperty2.default)({
|
|
|
187
185
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
188
186
|
marginTop: '0 !important'
|
|
189
187
|
}));
|
|
188
|
+
var headingWithIndentationInLayoutStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child"), {
|
|
189
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
190
|
+
marginTop: '0 !important'
|
|
191
|
+
}));
|
|
190
192
|
var getTextNodeStyle = function getTextNodeStyle() {
|
|
191
193
|
return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
192
194
|
};
|
|
@@ -228,6 +230,6 @@ var blockCardWithoutLayout = (0, _react.css)({
|
|
|
228
230
|
});
|
|
229
231
|
var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
230
232
|
return (0, _react.jsx)(_react.Global, {
|
|
231
|
-
styles: [globalStyles(), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : 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]
|
|
233
|
+
styles: [globalStyles(), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : 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]
|
|
232
234
|
});
|
|
233
235
|
};
|
|
@@ -222,7 +222,6 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
|
|
|
222
222
|
}
|
|
223
223
|
}, [api, getPos, position]);
|
|
224
224
|
var hoverZoneRectStyle = (0, _react.useMemo)(function () {
|
|
225
|
-
var _ref5;
|
|
226
225
|
var isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
|
|
227
226
|
var layoutAdjustment = isLayoutNode ? {
|
|
228
227
|
width: 11,
|
|
@@ -230,7 +229,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
|
|
|
230
229
|
top: 6,
|
|
231
230
|
bottom: 2
|
|
232
231
|
} : undefined;
|
|
233
|
-
return
|
|
232
|
+
return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, HOVER_ZONE_WIDTH, nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)")), HOVER_ZONE_HEIGHT, "calc(".concat(nodeDimension.height, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0, "px)")), HOVER_ZONE_TOP, "calc(".concat(nodeDimension.top, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0, "px)")), HOVER_ZONE_BOTTOM, "calc(".concat(nodeDimension.bottom, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0, "px)")), HOVER_ZONE_ANCHOR_NAME, anchorName);
|
|
234
233
|
}, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, nodeDimension, anchorName]);
|
|
235
234
|
var dropIndicatorPos = (0, _react.useMemo)(function () {
|
|
236
235
|
return isLeftPosition ? 'right' : 'left';
|
|
@@ -136,7 +136,7 @@ const withInlineNodeStyle = css({
|
|
|
136
136
|
}
|
|
137
137
|
});
|
|
138
138
|
const withInlineNodeStyleWithChromeFixSelectors = [`${dragHandleContainer}:has(${paragraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${indentatedParagraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${paragraphWithPlaceholder}) ${dragHandleSelector}`].join(', ');
|
|
139
|
-
const withFormatInLayoutStyleFixSelectors = [`${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`].join(', ');
|
|
139
|
+
const withFormatInLayoutStyleFixSelectors = [`${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child`].join(', ');
|
|
140
140
|
|
|
141
141
|
/**
|
|
142
142
|
* Please do not change change transform to display:none, or visibility:hidden
|
|
@@ -223,6 +223,13 @@ const withFormatInLayoutStyleFix = css({
|
|
|
223
223
|
marginTop: '0 !important'
|
|
224
224
|
}
|
|
225
225
|
});
|
|
226
|
+
const headingWithIndentationInLayoutStyleFix = css({
|
|
227
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
228
|
+
[`${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child`]: {
|
|
229
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
230
|
+
marginTop: '0 !important'
|
|
231
|
+
}
|
|
232
|
+
});
|
|
226
233
|
const getTextNodeStyle = () => {
|
|
227
234
|
return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
228
235
|
};
|
|
@@ -270,6 +277,6 @@ const blockCardWithoutLayout = css({
|
|
|
270
277
|
});
|
|
271
278
|
export const GlobalStylesWrapper = () => {
|
|
272
279
|
return jsx(Global, {
|
|
273
|
-
styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : 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]
|
|
280
|
+
styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : 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]
|
|
274
281
|
});
|
|
275
282
|
};
|
|
@@ -67,7 +67,6 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
|
|
|
67
67
|
var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
|
|
68
68
|
var ignore_nodes = editorExperiment('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;
|
|
69
69
|
newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
|
|
70
|
-
var _Decoration$node;
|
|
71
70
|
var depth = 0;
|
|
72
71
|
var anchorName;
|
|
73
72
|
var shouldDescend = shouldDescendIntoNode(node);
|
|
@@ -89,9 +88,9 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
|
|
|
89
88
|
}
|
|
90
89
|
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
90
|
var subType = node.attrs.level ? "-".concat(node.attrs.level) : '';
|
|
92
|
-
decs.push(Decoration.node(pos, pos + node.nodeSize, (
|
|
91
|
+
decs.push(Decoration.node(pos, pos + node.nodeSize, _defineProperty(_defineProperty(_defineProperty({
|
|
93
92
|
style: anchorStyles
|
|
94
|
-
},
|
|
93
|
+
}, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', node.type.name + subType), 'data-drag-handler-anchor-depth', "".concat(depth)), {
|
|
95
94
|
type: TYPE_NODE_DEC,
|
|
96
95
|
anchorName: anchorName,
|
|
97
96
|
nodeType: node.type.name
|
|
@@ -19,7 +19,7 @@ var ObjHash = /*#__PURE__*/function () {
|
|
|
19
19
|
function ObjHash() {
|
|
20
20
|
_classCallCheck(this, ObjHash);
|
|
21
21
|
}
|
|
22
|
-
_createClass(ObjHash, null, [{
|
|
22
|
+
return _createClass(ObjHash, null, [{
|
|
23
23
|
key: "getForNode",
|
|
24
24
|
value: function getForNode(node) {
|
|
25
25
|
if (this.caching.has(node)) {
|
|
@@ -30,7 +30,6 @@ var ObjHash = /*#__PURE__*/function () {
|
|
|
30
30
|
return uniqueId;
|
|
31
31
|
}
|
|
32
32
|
}]);
|
|
33
|
-
return ObjHash;
|
|
34
33
|
}();
|
|
35
34
|
_defineProperty(ObjHash, "caching", new WeakMap());
|
|
36
35
|
export var unmountDecorations = function unmountDecorations(nodeViewPortalProviderAPI, selector, key) {
|
|
@@ -11,7 +11,7 @@ export var ActiveAnchorTracker = /*#__PURE__*/function () {
|
|
|
11
11
|
_defineProperty(this, "lastActiveAnchor", '');
|
|
12
12
|
this.emitter = new EventEmitter();
|
|
13
13
|
}
|
|
14
|
-
_createClass(ActiveAnchorTracker, [{
|
|
14
|
+
return _createClass(ActiveAnchorTracker, [{
|
|
15
15
|
key: "subscribe",
|
|
16
16
|
value: function subscribe(anchorName, callback) {
|
|
17
17
|
if (this.emitter) {
|
|
@@ -46,7 +46,6 @@ export var ActiveAnchorTracker = /*#__PURE__*/function () {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
}]);
|
|
49
|
-
return ActiveAnchorTracker;
|
|
50
49
|
}();
|
|
51
50
|
|
|
52
51
|
// TODO We should use a scoped ActiveAnchorTracker rather than the global static object.
|
|
@@ -19,7 +19,7 @@ export var AnchorRectCache = /*#__PURE__*/function () {
|
|
|
19
19
|
_defineProperty(this, "isDirty", true);
|
|
20
20
|
_defineProperty(this, "view", null);
|
|
21
21
|
}
|
|
22
|
-
_createClass(AnchorRectCache, [{
|
|
22
|
+
return _createClass(AnchorRectCache, [{
|
|
23
23
|
key: "clear",
|
|
24
24
|
value: function clear() {
|
|
25
25
|
this.isDirty = true;
|
|
@@ -116,5 +116,4 @@ export var AnchorRectCache = /*#__PURE__*/function () {
|
|
|
116
116
|
return rects[anchorName];
|
|
117
117
|
}
|
|
118
118
|
}]);
|
|
119
|
-
return AnchorRectCache;
|
|
120
119
|
}();
|
package/dist/esm/ui/consts.js
CHANGED
|
@@ -79,7 +79,7 @@ export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
|
|
|
79
79
|
return 0;
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
|
-
export var dropTargetMarginMap = (_dropTargetMarginMap = {}, _defineProperty(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"),
|
|
82
|
+
export var dropTargetMarginMap = (_dropTargetMarginMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), -20, "var(--ds-space-negative-250, -20px)"), -16, "var(--ds-space-negative-200, -16px)"), -12, "var(--ds-space-negative-150, -12px)"), -8, "var(--ds-space-negative-100, -8px)"), -6, "var(--ds-space-negative-075, -6px)"), -4, "var(--ds-space-negative-050, -4px)"), -2, "var(--ds-space-negative-025, -2px)"), 0, "var(--ds-space-0, 0)"), 2, "var(--ds-space-025, 2px)"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), 6, "var(--ds-space-075, 6px)"), 8, "var(--ds-space-100, 8px)"), 12, "var(--ds-space-150, 12px)"), 16, "var(--ds-space-200, 16px)"), 20, "var(--ds-space-250, 20px)"), 24, "var(--ds-space-300, 24px)"));
|
|
83
83
|
|
|
84
84
|
/**
|
|
85
85
|
* This document serves as a quick reference map for correlating various space matches
|
|
@@ -169,7 +169,7 @@ var HoverZone = function HoverZone(_ref) {
|
|
|
169
169
|
});
|
|
170
170
|
};
|
|
171
171
|
export var DropTargetV2 = function DropTargetV2(props) {
|
|
172
|
-
var _api$blockControls
|
|
172
|
+
var _api$blockControls;
|
|
173
173
|
var api = props.api,
|
|
174
174
|
getPos = props.getPos,
|
|
175
175
|
prevNode = props.prevNode,
|
|
@@ -200,9 +200,9 @@ export var DropTargetV2 = function DropTargetV2(props) {
|
|
|
200
200
|
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.moveNode(start, pos, undefined, formatMessage));
|
|
201
201
|
}
|
|
202
202
|
};
|
|
203
|
-
var dynamicStyle = (
|
|
203
|
+
var dynamicStyle = _defineProperty(_defineProperty(_defineProperty({
|
|
204
204
|
width: isNestedDropTarget ? 'unset' : '100%'
|
|
205
|
-
},
|
|
205
|
+
}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card());
|
|
206
206
|
return jsx(Fragment, null, jsx(HoverZone, {
|
|
207
207
|
onDragEnter: function onDragEnter() {
|
|
208
208
|
return setIsDraggedOver(true);
|
|
@@ -91,7 +91,6 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
|
|
|
91
91
|
return marginLookupMap[offset];
|
|
92
92
|
};
|
|
93
93
|
export var DropTarget = function DropTarget(_ref3) {
|
|
94
|
-
var _dynamicStyle;
|
|
95
94
|
var api = _ref3.api,
|
|
96
95
|
getPos = _ref3.getPos,
|
|
97
96
|
prevNode = _ref3.prevNode,
|
|
@@ -178,9 +177,9 @@ export var DropTarget = function DropTarget(_ref3) {
|
|
|
178
177
|
}
|
|
179
178
|
return getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget);
|
|
180
179
|
}, [prevNode, nextNode, parentNode, isNestedDropTarget]);
|
|
181
|
-
var dynamicStyle = (
|
|
180
|
+
var dynamicStyle = _defineProperty(_defineProperty(_defineProperty({
|
|
182
181
|
width: isNestedDropTarget ? 'unset' : '100%'
|
|
183
|
-
},
|
|
182
|
+
}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card());
|
|
184
183
|
return (
|
|
185
184
|
// Note: Firefox has trouble with using a button element as the handle for drag and drop
|
|
186
185
|
jsx("div", {
|
|
@@ -16,11 +16,10 @@ import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
|
|
|
16
16
|
*/
|
|
17
17
|
var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
|
|
18
18
|
var extendedHoverZone = function extendedHoverZone() {
|
|
19
|
-
|
|
20
|
-
return css((_css = {}, _defineProperty(_css, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
19
|
+
return css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
21
20
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
22
21
|
display: 'none !important'
|
|
23
|
-
}),
|
|
22
|
+
}), '.ProseMirror', _defineProperty({}, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
24
23
|
content: '""',
|
|
25
24
|
position: 'absolute',
|
|
26
25
|
top: 0,
|
|
@@ -31,18 +30,17 @@ var extendedHoverZone = function extendedHoverZone() {
|
|
|
31
30
|
cursor: 'default',
|
|
32
31
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
33
32
|
zIndex: -1
|
|
34
|
-
})),
|
|
33
|
+
})), 'hr[data-drag-handler-anchor-name]', {
|
|
35
34
|
overflow: 'visible'
|
|
36
|
-
}),
|
|
35
|
+
}), '[data-blocks-drag-handle-container="true"] + *::after', {
|
|
37
36
|
display: 'none'
|
|
38
|
-
})
|
|
37
|
+
}));
|
|
39
38
|
};
|
|
40
39
|
var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
41
|
-
|
|
42
|
-
return css((_css2 = {}, _defineProperty(_css2, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
40
|
+
return css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
43
41
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
44
42
|
display: 'none !important'
|
|
45
|
-
}),
|
|
43
|
+
}), '.ProseMirror', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
46
44
|
content: '""',
|
|
47
45
|
position: 'absolute',
|
|
48
46
|
top: 0,
|
|
@@ -53,7 +51,7 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
|
53
51
|
height: '100%',
|
|
54
52
|
cursor: 'default',
|
|
55
53
|
zIndex: 1
|
|
56
|
-
}),
|
|
54
|
+
}), "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
|
|
57
55
|
content: '""',
|
|
58
56
|
position: 'absolute',
|
|
59
57
|
top: 0,
|
|
@@ -63,7 +61,7 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
|
63
61
|
cursor: 'default',
|
|
64
62
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
65
63
|
zIndex: -1
|
|
66
|
-
}),
|
|
64
|
+
}), "&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ".concat(dragHandlerAnchorSelector, "::after"), {
|
|
67
65
|
content: '""',
|
|
68
66
|
position: 'absolute',
|
|
69
67
|
top: 0,
|
|
@@ -74,7 +72,7 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
|
74
72
|
height: '100%',
|
|
75
73
|
cursor: 'default',
|
|
76
74
|
zIndex: 1
|
|
77
|
-
}),
|
|
75
|
+
}), '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
|
|
78
76
|
content: '""',
|
|
79
77
|
position: 'absolute',
|
|
80
78
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -87,11 +85,11 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
|
|
|
87
85
|
height: "".concat(DRAG_HANDLE_WIDTH, "px"),
|
|
88
86
|
cursor: 'default',
|
|
89
87
|
zIndex: 1
|
|
90
|
-
})
|
|
88
|
+
})), 'hr[data-drag-handler-anchor-name]', {
|
|
91
89
|
overflow: 'visible'
|
|
92
|
-
}),
|
|
90
|
+
}), '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
|
|
93
91
|
display: 'none'
|
|
94
|
-
})
|
|
92
|
+
}));
|
|
95
93
|
};
|
|
96
94
|
var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
|
|
97
95
|
var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
|
|
@@ -106,7 +104,7 @@ var withInlineNodeStyle = css(_defineProperty({}, withInlineNodeStyleSelectors,
|
|
|
106
104
|
display: 'none !important'
|
|
107
105
|
}));
|
|
108
106
|
var withInlineNodeStyleWithChromeFixSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
|
|
109
|
-
var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child")].join(', ');
|
|
107
|
+
var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
|
|
110
108
|
|
|
111
109
|
/**
|
|
112
110
|
* Please do not change change transform to display:none, or visibility:hidden
|
|
@@ -180,6 +178,10 @@ var withFormatInLayoutStyleFix = css(_defineProperty({}, "".concat(withFormatInL
|
|
|
180
178
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
181
179
|
marginTop: '0 !important'
|
|
182
180
|
}));
|
|
181
|
+
var headingWithIndentationInLayoutStyleFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child"), {
|
|
182
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
183
|
+
marginTop: '0 !important'
|
|
184
|
+
}));
|
|
183
185
|
var getTextNodeStyle = function getTextNodeStyle() {
|
|
184
186
|
return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
185
187
|
};
|
|
@@ -221,6 +223,6 @@ var blockCardWithoutLayout = css({
|
|
|
221
223
|
});
|
|
222
224
|
export var GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
223
225
|
return jsx(Global, {
|
|
224
|
-
styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : 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]
|
|
226
|
+
styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : 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]
|
|
225
227
|
});
|
|
226
228
|
};
|
|
@@ -214,7 +214,6 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
|
|
|
214
214
|
}
|
|
215
215
|
}, [api, getPos, position]);
|
|
216
216
|
var hoverZoneRectStyle = useMemo(function () {
|
|
217
|
-
var _ref5;
|
|
218
217
|
var isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
|
|
219
218
|
var layoutAdjustment = isLayoutNode ? {
|
|
220
219
|
width: 11,
|
|
@@ -222,7 +221,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
|
|
|
222
221
|
top: 6,
|
|
223
222
|
bottom: 2
|
|
224
223
|
} : undefined;
|
|
225
|
-
return
|
|
224
|
+
return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOVER_ZONE_WIDTH, nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)")), HOVER_ZONE_HEIGHT, "calc(".concat(nodeDimension.height, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0, "px)")), HOVER_ZONE_TOP, "calc(".concat(nodeDimension.top, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0, "px)")), HOVER_ZONE_BOTTOM, "calc(".concat(nodeDimension.bottom, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0, "px)")), HOVER_ZONE_ANCHOR_NAME, anchorName);
|
|
226
225
|
}, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, nodeDimension, anchorName]);
|
|
227
226
|
var dropIndicatorPos = useMemo(function () {
|
|
228
227
|
return isLeftPosition ? 'right' : 'left';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "2.15.
|
|
3
|
+
"version": "2.15.6",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
|
|
49
49
|
"@atlaskit/primitives": "^13.3.0",
|
|
50
50
|
"@atlaskit/theme": "^14.0.0",
|
|
51
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
51
|
+
"@atlaskit/tmp-editor-statsig": "^2.26.0",
|
|
52
52
|
"@atlaskit/tokens": "^2.4.0",
|
|
53
53
|
"@atlaskit/tooltip": "^19.0.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|