@atlaskit/editor-plugin-block-controls 2.13.11 → 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 +20 -0
- package/dist/cjs/commands/move-to-layout.js +50 -32
- package/dist/cjs/consts.js +3 -2
- 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/commands/move-to-layout.js +42 -23
- package/dist/es2019/consts.js +2 -1
- 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/commands/move-to-layout.js +51 -33
- package/dist/esm/consts.js +2 -1
- 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/dist/types/consts.d.ts +1 -0
- package/dist/types-ts4.5/consts.d.ts +1 -0
- 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,25 @@
|
|
|
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
|
+
|
|
15
|
+
## 2.13.12
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [#163103](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163103)
|
|
20
|
+
[`ec14916563763`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ec14916563763) -
|
|
21
|
+
[ux] [ED-25060] Implement drag and drop a layout column to another layout section
|
|
22
|
+
|
|
3
23
|
## 2.13.11
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -33,26 +33,19 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
|
|
|
33
33
|
}
|
|
34
34
|
return null;
|
|
35
35
|
};
|
|
36
|
-
var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos,
|
|
36
|
+
var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, childCount) {
|
|
37
|
+
var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
|
|
37
38
|
if (newColumnWidth) {
|
|
38
39
|
layoutNode.content.forEach(function (node, offset) {
|
|
39
40
|
if (node.type.name === 'layoutColumn') {
|
|
40
|
-
tr
|
|
41
|
+
tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
|
|
41
42
|
}
|
|
42
43
|
});
|
|
43
44
|
}
|
|
44
|
-
return
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
* Insert a node into an existing layout at position `to` and delete the node
|
|
49
|
-
*/
|
|
50
|
-
var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
|
|
51
|
-
tr.insert(to, newNode).setSelection(new _state.NodeSelection(tr.doc.resolve(to))).scrollIntoView();
|
|
52
|
-
var mappedFrom = tr.mapping.map(from);
|
|
53
|
-
var mappedFromEnd = mappedFrom + sourceNodeSize;
|
|
54
|
-
tr.delete(mappedFrom, mappedFromEnd);
|
|
55
|
-
return tr;
|
|
45
|
+
return {
|
|
46
|
+
newColumnWidth: newColumnWidth,
|
|
47
|
+
tr: tr
|
|
48
|
+
};
|
|
56
49
|
};
|
|
57
50
|
var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) {
|
|
58
51
|
if (isSameLayout) {
|
|
@@ -61,16 +54,41 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
|
|
|
61
54
|
var mappedTo = tr.mapping.map(to);
|
|
62
55
|
tr.insert(mappedTo, sourceNode).setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
63
56
|
} else if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
layoutColumn = _ref2.layoutColumn;
|
|
68
|
-
moveNode(from, to, layoutColumn.create({
|
|
69
|
-
width: newColumnWidth
|
|
70
|
-
}, sourceNode), sourceNode.nodeSize, tr);
|
|
57
|
+
insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos);
|
|
58
|
+
var mappedFrom = tr.mapping.map(from);
|
|
59
|
+
removeFromSource(tr, tr.doc.resolve(mappedFrom));
|
|
71
60
|
}
|
|
72
61
|
return tr;
|
|
73
62
|
};
|
|
63
|
+
var removeFromSource = function removeFromSource(tr, $from) {
|
|
64
|
+
var sourceNode = $from.nodeAfter;
|
|
65
|
+
var sourceParent = $from.parent;
|
|
66
|
+
if (!sourceNode) {
|
|
67
|
+
return tr;
|
|
68
|
+
}
|
|
69
|
+
var sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
|
|
70
|
+
if (sourceNode.type.name === 'layoutColumn') {
|
|
71
|
+
if (sourceParent.childCount === _consts.MIN_LAYOUT_COLUMN) {
|
|
72
|
+
tr.delete($from.pos + 1, sourceNodeEndPos - 1);
|
|
73
|
+
return tr;
|
|
74
|
+
} else {
|
|
75
|
+
updateColumnWidths(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
tr.delete($from.pos, sourceNodeEndPos);
|
|
79
|
+
return tr;
|
|
80
|
+
};
|
|
81
|
+
var insertToDestination = function insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos) {
|
|
82
|
+
var _ref2 = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
|
|
83
|
+
newColumnWidth = _ref2.newColumnWidth;
|
|
84
|
+
var _ref3 = tr.doc.type.schema.nodes || {},
|
|
85
|
+
layoutColumn = _ref3.layoutColumn;
|
|
86
|
+
var content = layoutColumn.createChecked({
|
|
87
|
+
width: newColumnWidth
|
|
88
|
+
}, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
|
|
89
|
+
tr.insert(to, content).setSelection(new _state.NodeSelection(tr.doc.resolve(to))).scrollIntoView();
|
|
90
|
+
return tr;
|
|
91
|
+
};
|
|
74
92
|
|
|
75
93
|
/**
|
|
76
94
|
* Check if the node at `from` can be moved to node at `to` to create/expand a layout.
|
|
@@ -80,10 +98,10 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
|
|
|
80
98
|
if (from === to) {
|
|
81
99
|
return;
|
|
82
100
|
}
|
|
83
|
-
var
|
|
84
|
-
layoutSection =
|
|
85
|
-
layoutColumn =
|
|
86
|
-
doc =
|
|
101
|
+
var _ref4 = tr.doc.type.schema.nodes || {},
|
|
102
|
+
layoutSection = _ref4.layoutSection,
|
|
103
|
+
layoutColumn = _ref4.layoutColumn,
|
|
104
|
+
doc = _ref4.doc;
|
|
87
105
|
|
|
88
106
|
// layout plugin does not exist
|
|
89
107
|
if (!layoutSection || !layoutColumn) {
|
|
@@ -112,8 +130,8 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
|
|
|
112
130
|
};
|
|
113
131
|
var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
|
|
114
132
|
return function (from, to, options) {
|
|
115
|
-
return function (
|
|
116
|
-
var tr =
|
|
133
|
+
return function (_ref5) {
|
|
134
|
+
var tr = _ref5.tr;
|
|
117
135
|
var canMove = canMoveToLayout(from, to, tr);
|
|
118
136
|
if (!canMove) {
|
|
119
137
|
return tr;
|
|
@@ -122,11 +140,11 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
|
|
|
122
140
|
fromNode = canMove.fromNode,
|
|
123
141
|
$from = canMove.$from,
|
|
124
142
|
$to = canMove.$to;
|
|
125
|
-
var
|
|
126
|
-
layoutSection =
|
|
127
|
-
layoutColumn =
|
|
128
|
-
var
|
|
129
|
-
breakout =
|
|
143
|
+
var _ref6 = tr.doc.type.schema.nodes || {},
|
|
144
|
+
layoutSection = _ref6.layoutSection,
|
|
145
|
+
layoutColumn = _ref6.layoutColumn;
|
|
146
|
+
var _ref7 = tr.doc.type.schema.marks || {},
|
|
147
|
+
breakout = _ref7.breakout;
|
|
130
148
|
var fromNodeWithoutBreakout = fromNode;
|
|
131
149
|
|
|
132
150
|
// remove breakout from node;
|
package/dist/cjs/consts.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.maxLayoutColumnSupported = exports.DIRECTION = void 0;
|
|
6
|
+
exports.maxLayoutColumnSupported = exports.MIN_LAYOUT_COLUMN = exports.DIRECTION = void 0;
|
|
7
7
|
var _advancedLayoutsFlags = require("./utils/advanced-layouts-flags");
|
|
8
8
|
var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
|
|
9
9
|
DIRECTION["UP"] = "up";
|
|
@@ -14,4 +14,5 @@ var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
|
|
|
14
14
|
}({});
|
|
15
15
|
var maxLayoutColumnSupported = exports.maxLayoutColumnSupported = function maxLayoutColumnSupported() {
|
|
16
16
|
return (0, _advancedLayoutsFlags.isPreRelease2)() ? 5 : 3;
|
|
17
|
-
};
|
|
17
|
+
};
|
|
18
|
+
var MIN_LAYOUT_COLUMN = exports.MIN_LAYOUT_COLUMN = 2;
|
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
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import { maxLayoutColumnSupported } from '../consts';
|
|
3
|
+
import { maxLayoutColumnSupported, MIN_LAYOUT_COLUMN } from '../consts';
|
|
4
4
|
import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
|
|
5
5
|
import { isInSameLayout } from '../utils/validation';
|
|
6
6
|
const createNewLayout = (schema, layoutContents) => {
|
|
@@ -28,26 +28,19 @@ const createNewLayout = (schema, layoutContents) => {
|
|
|
28
28
|
}
|
|
29
29
|
return null;
|
|
30
30
|
};
|
|
31
|
-
const updateColumnWidths = (tr, layoutNode, layoutNodePos,
|
|
31
|
+
const updateColumnWidths = (tr, layoutNode, layoutNodePos, childCount) => {
|
|
32
|
+
const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
|
|
32
33
|
if (newColumnWidth) {
|
|
33
34
|
layoutNode.content.forEach((node, offset) => {
|
|
34
35
|
if (node.type.name === 'layoutColumn') {
|
|
35
|
-
tr
|
|
36
|
+
tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
|
|
36
37
|
}
|
|
37
38
|
});
|
|
38
39
|
}
|
|
39
|
-
return
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
* Insert a node into an existing layout at position `to` and delete the node
|
|
44
|
-
*/
|
|
45
|
-
const moveNode = (from, to, newNode, sourceNodeSize, tr) => {
|
|
46
|
-
tr.insert(to, newNode).setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
|
|
47
|
-
const mappedFrom = tr.mapping.map(from);
|
|
48
|
-
const mappedFromEnd = mappedFrom + sourceNodeSize;
|
|
49
|
-
tr.delete(mappedFrom, mappedFromEnd);
|
|
50
|
-
return tr;
|
|
40
|
+
return {
|
|
41
|
+
newColumnWidth,
|
|
42
|
+
tr
|
|
43
|
+
};
|
|
51
44
|
};
|
|
52
45
|
const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) => {
|
|
53
46
|
if (isSameLayout) {
|
|
@@ -56,15 +49,41 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, i
|
|
|
56
49
|
const mappedTo = tr.mapping.map(to);
|
|
57
50
|
tr.insert(mappedTo, sourceNode).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
58
51
|
} else if (toLayout.childCount < maxLayoutColumnSupported()) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
52
|
+
insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos);
|
|
53
|
+
const mappedFrom = tr.mapping.map(from);
|
|
54
|
+
removeFromSource(tr, tr.doc.resolve(mappedFrom));
|
|
55
|
+
}
|
|
56
|
+
return tr;
|
|
57
|
+
};
|
|
58
|
+
const removeFromSource = (tr, $from) => {
|
|
59
|
+
const sourceNode = $from.nodeAfter;
|
|
60
|
+
const sourceParent = $from.parent;
|
|
61
|
+
if (!sourceNode) {
|
|
62
|
+
return tr;
|
|
67
63
|
}
|
|
64
|
+
const sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
|
|
65
|
+
if (sourceNode.type.name === 'layoutColumn') {
|
|
66
|
+
if (sourceParent.childCount === MIN_LAYOUT_COLUMN) {
|
|
67
|
+
tr.delete($from.pos + 1, sourceNodeEndPos - 1);
|
|
68
|
+
return tr;
|
|
69
|
+
} else {
|
|
70
|
+
updateColumnWidths(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
tr.delete($from.pos, sourceNodeEndPos);
|
|
74
|
+
return tr;
|
|
75
|
+
};
|
|
76
|
+
const insertToDestination = (tr, to, sourceNode, toLayout, toLayoutPos) => {
|
|
77
|
+
const {
|
|
78
|
+
newColumnWidth
|
|
79
|
+
} = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {};
|
|
80
|
+
const {
|
|
81
|
+
layoutColumn
|
|
82
|
+
} = tr.doc.type.schema.nodes || {};
|
|
83
|
+
const content = layoutColumn.createChecked({
|
|
84
|
+
width: newColumnWidth
|
|
85
|
+
}, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
|
|
86
|
+
tr.insert(to, content).setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
|
|
68
87
|
return tr;
|
|
69
88
|
};
|
|
70
89
|
|
package/dist/es2019/consts.js
CHANGED
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),
|