@atlaskit/editor-plugin-block-controls 3.3.12 → 3.3.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 +10 -0
- package/dist/cjs/editor-commands/move-to-layout.js +16 -60
- package/dist/cjs/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/cjs/pm-plugins/main.js +1 -1
- package/dist/cjs/pm-plugins/utils/drag-handle-positions.js +2 -7
- package/dist/cjs/ui/drag-handle.js +2 -4
- package/dist/cjs/ui/drag-preview.js +8 -19
- package/dist/cjs/ui/drop-target-layout.js +9 -15
- package/dist/cjs/ui/global-styles.js +1 -2
- package/dist/cjs/ui/inline-drop-target.js +9 -15
- package/dist/es2019/editor-commands/move-to-layout.js +5 -51
- package/dist/es2019/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/es2019/pm-plugins/main.js +1 -1
- package/dist/es2019/pm-plugins/utils/drag-handle-positions.js +2 -7
- package/dist/es2019/ui/drag-handle.js +2 -4
- package/dist/es2019/ui/drag-preview.js +9 -20
- package/dist/es2019/ui/drop-target-layout.js +10 -16
- package/dist/es2019/ui/global-styles.js +1 -2
- package/dist/es2019/ui/inline-drop-target.js +10 -16
- package/dist/esm/editor-commands/move-to-layout.js +18 -62
- package/dist/esm/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/esm/pm-plugins/main.js +1 -1
- package/dist/esm/pm-plugins/utils/drag-handle-positions.js +2 -7
- package/dist/esm/ui/drag-handle.js +2 -4
- package/dist/esm/ui/drag-preview.js +9 -20
- package/dist/esm/ui/drop-target-layout.js +9 -15
- package/dist/esm/ui/global-styles.js +1 -2
- package/dist/esm/ui/inline-drop-target.js +9 -15
- package/package.json +3 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 3.3.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#126772](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126772)
|
|
8
|
+
[`c64847bdf13d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c64847bdf13d4) -
|
|
9
|
+
[ED-27001] This change is cleaning up the feature gate for a drag and drop bugfix to update the
|
|
10
|
+
drag preview for extensions with iFrames.
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
3
13
|
## 3.3.12
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
|
@@ -15,7 +15,6 @@ var _checkFragment = require("../pm-plugins/utils/check-fragment");
|
|
|
15
15
|
var _consts = require("../pm-plugins/utils/consts");
|
|
16
16
|
var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
|
|
17
17
|
var _selection = require("../pm-plugins/utils/selection");
|
|
18
|
-
var _updateColumnWidths = require("../pm-plugins/utils/update-column-widths");
|
|
19
18
|
var _validation = require("../pm-plugins/utils/validation");
|
|
20
19
|
var _consts2 = require("../ui/consts");
|
|
21
20
|
var createNewLayout = function createNewLayout(schema, layoutContents) {
|
|
@@ -70,20 +69,14 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
|
|
|
70
69
|
tr.delete(from, sourceContentEndPos);
|
|
71
70
|
var mappedTo = tr.mapping.map(to);
|
|
72
71
|
tr.insert(mappedTo, sourceContent);
|
|
73
|
-
if (
|
|
72
|
+
if (selectMovedNode) {
|
|
74
73
|
tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
75
74
|
}
|
|
76
75
|
(0, _analytics2.attachMoveNodeAnalytics)(tr, _analytics.INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api, sourceNodeTypes, hasSelectedMultipleNodes);
|
|
77
76
|
} else if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
|
|
78
77
|
var _$originalFrom$nodeAf2;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
|
|
82
|
-
} else {
|
|
83
|
-
insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos);
|
|
84
|
-
var mappedFrom = tr.mapping.map(from);
|
|
85
|
-
(0, _removeFromSource.removeFromSource)(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
|
|
86
|
-
}
|
|
78
|
+
(0, _removeFromSource.removeFromSource)(tr, tr.doc.resolve(from), sourceContentEndPos);
|
|
79
|
+
insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
|
|
87
80
|
(0, _analytics2.attachMoveNodeAnalytics)(tr, _analytics.INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api, sourceNodeTypes, hasSelectedMultipleNodes);
|
|
88
81
|
}
|
|
89
82
|
return tr;
|
|
@@ -128,40 +121,6 @@ var insertToDestinationNoWidthUpdate = function insertToDestinationNoWidthUpdate
|
|
|
128
121
|
}
|
|
129
122
|
return tr;
|
|
130
123
|
};
|
|
131
|
-
var insertToDestination = function insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos) {
|
|
132
|
-
var _ref3 = (0, _updateColumnWidths.updateColumnWidths)(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
|
|
133
|
-
newColumnWidth = _ref3.newColumnWidth;
|
|
134
|
-
var _ref4 = tr.doc.type.schema.nodes || {},
|
|
135
|
-
layoutColumn = _ref4.layoutColumn;
|
|
136
|
-
var content = null;
|
|
137
|
-
try {
|
|
138
|
-
if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
|
|
139
|
-
if (sourceContent instanceof _model.Fragment) {
|
|
140
|
-
var _sourceContent$firstC;
|
|
141
|
-
content = layoutColumn.createChecked({
|
|
142
|
-
width: newColumnWidth
|
|
143
|
-
}, (0, _checkFragment.isFragmentOfType)(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
|
|
144
|
-
}
|
|
145
|
-
} else {
|
|
146
|
-
if (sourceContent instanceof _model.Node) {
|
|
147
|
-
content = layoutColumn.createChecked({
|
|
148
|
-
width: newColumnWidth
|
|
149
|
-
}, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
} catch (error) {
|
|
153
|
-
(0, _monitoring.logException)(error, {
|
|
154
|
-
location: 'editor-plugin-block-controls/move-to-layout'
|
|
155
|
-
});
|
|
156
|
-
}
|
|
157
|
-
if (content) {
|
|
158
|
-
tr.insert(to, content);
|
|
159
|
-
}
|
|
160
|
-
if (!(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
161
|
-
tr.setSelection(new _state.NodeSelection(tr.doc.resolve(to))).scrollIntoView();
|
|
162
|
-
}
|
|
163
|
-
return tr;
|
|
164
|
-
};
|
|
165
124
|
|
|
166
125
|
/**
|
|
167
126
|
* Check if the node at `from` can be moved to node at `to` to create/expand a layout.
|
|
@@ -171,10 +130,10 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
|
|
|
171
130
|
if (from === to) {
|
|
172
131
|
return;
|
|
173
132
|
}
|
|
174
|
-
var
|
|
175
|
-
layoutSection =
|
|
176
|
-
layoutColumn =
|
|
177
|
-
doc =
|
|
133
|
+
var _ref3 = tr.doc.type.schema.nodes || {},
|
|
134
|
+
layoutSection = _ref3.layoutSection,
|
|
135
|
+
layoutColumn = _ref3.layoutColumn,
|
|
136
|
+
doc = _ref3.doc;
|
|
178
137
|
|
|
179
138
|
// layout plugin does not exist
|
|
180
139
|
if (!layoutSection || !layoutColumn) {
|
|
@@ -224,8 +183,8 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
|
|
|
224
183
|
};
|
|
225
184
|
var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
|
|
226
185
|
var fromContentWithoutBreakout = $from.nodeAfter;
|
|
227
|
-
var
|
|
228
|
-
breakout =
|
|
186
|
+
var _ref4 = tr.doc.type.schema.marks || {},
|
|
187
|
+
breakout = _ref4.breakout;
|
|
229
188
|
if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
|
|
230
189
|
tr.doc.nodesBetween($from.pos, to, function (node, pos, parent) {
|
|
231
190
|
// breakout doesn't exist on nested nodes
|
|
@@ -288,8 +247,8 @@ var getBreakoutMode = function getBreakoutMode(content, breakout) {
|
|
|
288
247
|
// source content variable that has type of `PMNode | Fragment` should be updated to `Fragment` only
|
|
289
248
|
var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
|
|
290
249
|
return function (from, to, options) {
|
|
291
|
-
return function (
|
|
292
|
-
var tr =
|
|
250
|
+
return function (_ref5) {
|
|
251
|
+
var tr = _ref5.tr;
|
|
293
252
|
if (!api) {
|
|
294
253
|
return tr;
|
|
295
254
|
}
|
|
@@ -302,11 +261,11 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
|
|
|
302
261
|
sourceContent = canMove.sourceContent,
|
|
303
262
|
$sourceFrom = canMove.$sourceFrom,
|
|
304
263
|
sourceTo = canMove.sourceTo;
|
|
305
|
-
var
|
|
306
|
-
layoutSection =
|
|
307
|
-
layoutColumn =
|
|
308
|
-
var
|
|
309
|
-
breakout =
|
|
264
|
+
var _ref6 = tr.doc.type.schema.nodes || {},
|
|
265
|
+
layoutSection = _ref6.layoutSection,
|
|
266
|
+
layoutColumn = _ref6.layoutColumn;
|
|
267
|
+
var _ref7 = tr.doc.type.schema.marks || {},
|
|
268
|
+
breakout = _ref7.breakout;
|
|
310
269
|
|
|
311
270
|
// get breakout mode from destination node,
|
|
312
271
|
// if not found, get from source node,
|
|
@@ -364,9 +323,6 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
|
|
|
364
323
|
tr = (0, _removeFromSource.removeFromSource)(tr, $sourceFrom, sourceTo);
|
|
365
324
|
var mappedTo = tr.mapping.map(to);
|
|
366
325
|
tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
|
|
367
|
-
if (!(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
368
|
-
tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
369
|
-
}
|
|
370
326
|
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
371
327
|
mode: breakoutMode
|
|
372
328
|
})]);
|
|
@@ -46,7 +46,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
46
46
|
}
|
|
47
47
|
var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
|
|
48
48
|
var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
|
|
49
|
-
if ((0, _experiments.editorExperiment)('advanced_layouts', true)
|
|
49
|
+
if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
50
50
|
// We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
|
|
51
51
|
if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow') && (0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
52
52
|
rootElement = parentElement;
|
|
@@ -642,7 +642,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
|
|
|
642
642
|
// Currently we can only drag one node at a time
|
|
643
643
|
// so we only need to check first child
|
|
644
644
|
var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
|
|
645
|
-
if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn'
|
|
645
|
+
if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn') {
|
|
646
646
|
// we prevent native DnD for layoutColumn to prevent single column layout.
|
|
647
647
|
event.preventDefault();
|
|
648
648
|
return false;
|
|
@@ -4,24 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getTopPosition = exports.getLeftPosition = void 0;
|
|
7
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
7
|
var _consts = require("../../ui/consts");
|
|
9
8
|
var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type) {
|
|
10
9
|
if (!dom) {
|
|
11
10
|
return 'auto';
|
|
12
11
|
}
|
|
13
12
|
var table = dom.querySelector('table');
|
|
14
|
-
var isTable =
|
|
13
|
+
var isTable = table && (!type || type === 'table');
|
|
15
14
|
if (isTable) {
|
|
16
15
|
return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
|
|
17
16
|
} else if (type === 'rule') {
|
|
18
17
|
return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
|
|
19
18
|
} else if (type === 'layoutColumn') {
|
|
20
|
-
|
|
21
|
-
return "".concat(-dom.offsetTop / 2, "px");
|
|
22
|
-
} else {
|
|
23
|
-
return "".concat(-_consts.DRAG_HANDLE_WIDTH, "px");
|
|
24
|
-
}
|
|
19
|
+
return "".concat(-dom.offsetTop / 2, "px");
|
|
25
20
|
} else if (type === 'heading-1') {
|
|
26
21
|
return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_H1_TOP_ADJUSTMENT, "px");
|
|
27
22
|
} else if (type === 'heading-2') {
|
|
@@ -239,11 +239,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
239
239
|
// but ensures the preview is generated correctly.
|
|
240
240
|
var handleMouseDown = (0, _react.useCallback)(function () {
|
|
241
241
|
if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
242
|
+
var _buttonRef$current;
|
|
242
243
|
// prevent native drag and drop.
|
|
243
|
-
|
|
244
|
-
var _buttonRef$current;
|
|
245
|
-
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
|
|
246
|
-
}
|
|
244
|
+
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
|
|
247
245
|
if (!isLayoutColumn) {
|
|
248
246
|
return undefined;
|
|
249
247
|
}
|
|
@@ -7,31 +7,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.dragPreview = void 0;
|
|
8
8
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
9
|
var _browser = require("@atlaskit/editor-common/browser");
|
|
10
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
|
-
var
|
|
11
|
+
var previewStyle = {
|
|
13
12
|
borderColor: "var(--ds-border, ".concat(_colors.N30, ")"),
|
|
14
13
|
borderStyle: 'solid',
|
|
15
14
|
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
16
15
|
borderWidth: "var(--ds-border-width-outline, 2px)",
|
|
17
16
|
backgroundColor: "var(--ds-skeleton-subtle, ".concat(_colors.N20, ")")
|
|
18
17
|
};
|
|
19
|
-
var previewStyleOld = {
|
|
20
|
-
borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
|
|
21
|
-
borderStyle: 'solid',
|
|
22
|
-
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
23
|
-
borderWidth: "var(--ds-border-width-outline, 2px)",
|
|
24
|
-
backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
|
|
25
|
-
};
|
|
26
18
|
var getPreviewContainerDimensionsForSingle = function getPreviewContainerDimensionsForSingle(dom, nodeType) {
|
|
27
19
|
var nodeContainer = dom;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
nodeContainer = iframeContainer;
|
|
34
|
-
}
|
|
20
|
+
var iframeContainer = dom.querySelector('iframe');
|
|
21
|
+
if (nodeType === 'embedCard') {
|
|
22
|
+
nodeContainer = dom.querySelector('.rich-media-item') || dom;
|
|
23
|
+
} else if (nodeType === 'extension' && iframeContainer) {
|
|
24
|
+
nodeContainer = iframeContainer;
|
|
35
25
|
}
|
|
36
26
|
var nodeContainerRect = nodeContainer.getBoundingClientRect();
|
|
37
27
|
return {
|
|
@@ -61,7 +51,6 @@ var createGenericPreview = function createGenericPreview() {
|
|
|
61
51
|
var generalPreview = document.createElement('div');
|
|
62
52
|
// ProseMirror class is required to make sure the cloned dom is styled correctly
|
|
63
53
|
generalPreview.classList.add('ProseMirror', 'block-ctrl-drag-preview');
|
|
64
|
-
var previewStyle = (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? previewStyleNew : previewStyleOld;
|
|
65
54
|
generalPreview.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
|
|
66
55
|
generalPreview.style.borderRadius = previewStyle.borderRadius;
|
|
67
56
|
generalPreview.style.backgroundColor = previewStyle.backgroundColor;
|
|
@@ -85,13 +74,13 @@ var createContentPreviewElement = function createContentPreviewElement(dom, node
|
|
|
85
74
|
clonedDom.style.marginRight = '0';
|
|
86
75
|
clonedDom.style.marginBottom = nodeSpacing ? "".concat(nodeSpacing.bottom) : '0';
|
|
87
76
|
clonedDom.style.boxShadow = 'none';
|
|
88
|
-
clonedDom.style.opacity = _browser.browser.windows ? '1' :
|
|
77
|
+
clonedDom.style.opacity = _browser.browser.windows ? '1' : '0.31';
|
|
89
78
|
contentPreviewOneElement.appendChild(clonedDom);
|
|
90
79
|
return contentPreviewOneElement;
|
|
91
80
|
};
|
|
92
81
|
var isGenericPreview = function isGenericPreview(dom, nodeType) {
|
|
93
82
|
var embedCard = dom.querySelector('.embedCardView-content-wrap');
|
|
94
|
-
return
|
|
83
|
+
return nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe');
|
|
95
84
|
};
|
|
96
85
|
var createPreviewForElement = function createPreviewForElement(dom, nodeType, nodeSpacing) {
|
|
97
86
|
var shouldBeGenericPreview = isGenericPreview(dom, nodeType);
|
|
@@ -10,7 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
10
10
|
var _react = require("react");
|
|
11
11
|
var _react2 = require("@emotion/react");
|
|
12
12
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
13
|
var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
|
|
15
14
|
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
16
15
|
var _colors = require("@atlaskit/theme/colors");
|
|
@@ -81,7 +80,7 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
|
|
|
81
80
|
var to = getPos();
|
|
82
81
|
var mappedTo;
|
|
83
82
|
if (to !== undefined) {
|
|
84
|
-
var _api$core;
|
|
83
|
+
var _api$core, _api$core2;
|
|
85
84
|
var from = activeNode.pos;
|
|
86
85
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
|
|
87
86
|
var _api$blockControls2;
|
|
@@ -89,22 +88,17 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
|
|
|
89
88
|
api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.moveToLayout(from, to)({
|
|
90
89
|
tr: tr
|
|
91
90
|
});
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
91
|
+
var insertColumnStep = (0, _updateSelection.getInsertLayoutStep)(tr);
|
|
92
|
+
mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
|
|
93
|
+
return tr;
|
|
94
|
+
});
|
|
95
|
+
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
|
|
96
|
+
var tr = _ref3.tr;
|
|
97
|
+
if (mappedTo !== undefined) {
|
|
98
|
+
(0, _updateSelection.updateSelection)(tr, mappedTo);
|
|
95
99
|
}
|
|
96
100
|
return tr;
|
|
97
101
|
});
|
|
98
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
99
|
-
var _api$core2;
|
|
100
|
-
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
|
|
101
|
-
var tr = _ref3.tr;
|
|
102
|
-
if (mappedTo !== undefined) {
|
|
103
|
-
(0, _updateSelection.updateSelection)(tr, mappedTo);
|
|
104
|
-
}
|
|
105
|
-
return tr;
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
102
|
}
|
|
109
103
|
}, [api, getPos, activeNode]);
|
|
110
104
|
(0, _react.useEffect)(function () {
|
|
@@ -8,7 +8,6 @@ exports.GlobalStylesWrapper = void 0;
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
12
|
var _consts = require("./consts");
|
|
14
13
|
/**
|
|
@@ -216,6 +215,6 @@ var blockCardWithoutLayout = (0, _react.css)({
|
|
|
216
215
|
});
|
|
217
216
|
var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
218
217
|
return (0, _react.jsx)(_react.Global, {
|
|
219
|
-
styles: [globalStyles(),
|
|
218
|
+
styles: [globalStyles(), globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
|
|
220
219
|
});
|
|
221
220
|
};
|
|
@@ -10,7 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
10
10
|
var _react = require("react");
|
|
11
11
|
var _react2 = require("@emotion/react");
|
|
12
12
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
13
|
var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
|
|
15
14
|
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
16
15
|
var _colors = require("@atlaskit/theme/colors");
|
|
@@ -191,7 +190,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
|
|
|
191
190
|
var toPos = getPos();
|
|
192
191
|
var mappedTo;
|
|
193
192
|
if (activeNode && toPos !== undefined) {
|
|
194
|
-
var _api$core;
|
|
193
|
+
var _api$core, _api$core2;
|
|
195
194
|
var start = activeNode.pos;
|
|
196
195
|
var moveToEnd = position === 'right';
|
|
197
196
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
|
|
@@ -202,22 +201,17 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
|
|
|
202
201
|
})({
|
|
203
202
|
tr: tr
|
|
204
203
|
});
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
204
|
+
var insertLayoutStep = (0, _updateSelection.getInsertLayoutStep)(tr);
|
|
205
|
+
mappedTo = insertLayoutStep === null || insertLayoutStep === void 0 ? void 0 : insertLayoutStep.from;
|
|
206
|
+
return tr;
|
|
207
|
+
});
|
|
208
|
+
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
|
|
209
|
+
var tr = _ref4.tr;
|
|
210
|
+
if (mappedTo !== undefined) {
|
|
211
|
+
(0, _updateSelection.updateSelection)(tr, mappedTo, moveToEnd);
|
|
208
212
|
}
|
|
209
213
|
return tr;
|
|
210
214
|
});
|
|
211
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
212
|
-
var _api$core2;
|
|
213
|
-
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
|
|
214
|
-
var tr = _ref4.tr;
|
|
215
|
-
if (mappedTo !== undefined) {
|
|
216
|
-
(0, _updateSelection.updateSelection)(tr, mappedTo, moveToEnd);
|
|
217
|
-
}
|
|
218
|
-
return tr;
|
|
219
|
-
});
|
|
220
|
-
}
|
|
221
215
|
}
|
|
222
216
|
}, [api, getPos, position]);
|
|
223
217
|
var hoverZoneRectStyle = (0, _react.useMemo)(function () {
|
|
@@ -4,12 +4,11 @@ import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
|
4
4
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
7
|
+
import { attachMoveNodeAnalytics, fireInsertLayoutAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
|
|
8
|
+
import { containsNodeOfType, isFragmentOfType } from '../pm-plugins/utils/check-fragment';
|
|
9
9
|
import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
|
|
10
10
|
import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
|
|
11
11
|
import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
|
|
12
|
-
import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
|
|
13
12
|
import { isInSameLayout } from '../pm-plugins/utils/validation';
|
|
14
13
|
import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
|
|
15
14
|
const createNewLayout = (schema, layoutContents) => {
|
|
@@ -65,20 +64,14 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr
|
|
|
65
64
|
tr.delete(from, sourceContentEndPos);
|
|
66
65
|
const mappedTo = tr.mapping.map(to);
|
|
67
66
|
tr.insert(mappedTo, sourceContent);
|
|
68
|
-
if (
|
|
67
|
+
if (selectMovedNode) {
|
|
69
68
|
tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
70
69
|
}
|
|
71
70
|
attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api, sourceNodeTypes, hasSelectedMultipleNodes);
|
|
72
71
|
} else if (toLayout.childCount < maxLayoutColumnSupported()) {
|
|
73
72
|
var _$originalFrom$nodeAf2;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
|
|
77
|
-
} else {
|
|
78
|
-
insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos);
|
|
79
|
-
const mappedFrom = tr.mapping.map(from);
|
|
80
|
-
removeFromSource(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
|
|
81
|
-
}
|
|
73
|
+
removeFromSource(tr, tr.doc.resolve(from), sourceContentEndPos);
|
|
74
|
+
insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
|
|
82
75
|
attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api, sourceNodeTypes, hasSelectedMultipleNodes);
|
|
83
76
|
}
|
|
84
77
|
return tr;
|
|
@@ -124,42 +117,6 @@ const insertToDestinationNoWidthUpdate = (tr, to, sourceContent) => {
|
|
|
124
117
|
}
|
|
125
118
|
return tr;
|
|
126
119
|
};
|
|
127
|
-
const insertToDestination = (tr, to, sourceContent, toLayout, toLayoutPos) => {
|
|
128
|
-
const {
|
|
129
|
-
newColumnWidth
|
|
130
|
-
} = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {};
|
|
131
|
-
const {
|
|
132
|
-
layoutColumn
|
|
133
|
-
} = tr.doc.type.schema.nodes || {};
|
|
134
|
-
let content = null;
|
|
135
|
-
try {
|
|
136
|
-
if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
|
|
137
|
-
if (sourceContent instanceof Fragment) {
|
|
138
|
-
var _sourceContent$firstC;
|
|
139
|
-
content = layoutColumn.createChecked({
|
|
140
|
-
width: newColumnWidth
|
|
141
|
-
}, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
|
|
142
|
-
}
|
|
143
|
-
} else {
|
|
144
|
-
if (sourceContent instanceof PMNode) {
|
|
145
|
-
content = layoutColumn.createChecked({
|
|
146
|
-
width: newColumnWidth
|
|
147
|
-
}, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
} catch (error) {
|
|
151
|
-
logException(error, {
|
|
152
|
-
location: 'editor-plugin-block-controls/move-to-layout'
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
if (content) {
|
|
156
|
-
tr.insert(to, content);
|
|
157
|
-
}
|
|
158
|
-
if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
159
|
-
tr.setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
|
|
160
|
-
}
|
|
161
|
-
return tr;
|
|
162
|
-
};
|
|
163
120
|
|
|
164
121
|
/**
|
|
165
122
|
* Check if the node at `from` can be moved to node at `to` to create/expand a layout.
|
|
@@ -356,9 +313,6 @@ export const moveToLayout = api => (from, to, options) => ({
|
|
|
356
313
|
tr = removeFromSource(tr, $sourceFrom, sourceTo);
|
|
357
314
|
const mappedTo = tr.mapping.map(to);
|
|
358
315
|
tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
|
|
359
|
-
if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
360
|
-
tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
361
|
-
}
|
|
362
316
|
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
363
317
|
mode: breakoutMode
|
|
364
318
|
})]);
|
|
@@ -41,7 +41,7 @@ export const handleMouseOver = (view, event, api) => {
|
|
|
41
41
|
}
|
|
42
42
|
const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
|
|
43
43
|
const parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
|
|
44
|
-
if (editorExperiment('advanced_layouts', true)
|
|
44
|
+
if (editorExperiment('advanced_layouts', true)) {
|
|
45
45
|
// We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
|
|
46
46
|
if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow') && editorExperiment('nested-dnd', true)) {
|
|
47
47
|
rootElement = parentElement;
|
|
@@ -624,7 +624,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
|
|
|
624
624
|
// Currently we can only drag one node at a time
|
|
625
625
|
// so we only need to check first child
|
|
626
626
|
const draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
|
|
627
|
-
if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn'
|
|
627
|
+
if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn') {
|
|
628
628
|
// we prevent native DnD for layoutColumn to prevent single column layout.
|
|
629
629
|
event.preventDefault();
|
|
630
630
|
return false;
|
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
1
|
import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
|
|
3
2
|
export const getTopPosition = (dom, type) => {
|
|
4
3
|
if (!dom) {
|
|
5
4
|
return 'auto';
|
|
6
5
|
}
|
|
7
6
|
const table = dom.querySelector('table');
|
|
8
|
-
const isTable =
|
|
7
|
+
const isTable = table && (!type || type === 'table');
|
|
9
8
|
if (isTable) {
|
|
10
9
|
return `${dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
|
|
11
10
|
} else if (type === 'rule') {
|
|
12
11
|
return `${dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT}px`;
|
|
13
12
|
} else if (type === 'layoutColumn') {
|
|
14
|
-
|
|
15
|
-
return `${-dom.offsetTop / 2}px`;
|
|
16
|
-
} else {
|
|
17
|
-
return `${-DRAG_HANDLE_WIDTH}px`;
|
|
18
|
-
}
|
|
13
|
+
return `${-dom.offsetTop / 2}px`;
|
|
19
14
|
} else if (type === 'heading-1') {
|
|
20
15
|
return `${dom.offsetTop + DRAG_HANDLE_H1_TOP_ADJUSTMENT}px`;
|
|
21
16
|
} else if (type === 'heading-2') {
|
|
@@ -222,11 +222,9 @@ export const DragHandle = ({
|
|
|
222
222
|
// but ensures the preview is generated correctly.
|
|
223
223
|
const handleMouseDown = useCallback(() => {
|
|
224
224
|
if (editorExperiment('advanced_layouts', true)) {
|
|
225
|
+
var _buttonRef$current;
|
|
225
226
|
// prevent native drag and drop.
|
|
226
|
-
|
|
227
|
-
var _buttonRef$current;
|
|
228
|
-
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
|
|
229
|
-
}
|
|
227
|
+
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
|
|
230
228
|
if (!isLayoutColumn) {
|
|
231
229
|
return undefined;
|
|
232
230
|
}
|
|
@@ -1,29 +1,19 @@
|
|
|
1
1
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
const previewStyleNew = {
|
|
2
|
+
import { N20, N30 } from '@atlaskit/theme/colors';
|
|
3
|
+
const previewStyle = {
|
|
5
4
|
borderColor: `var(--ds-border, ${N30})`,
|
|
6
5
|
borderStyle: 'solid',
|
|
7
6
|
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
8
7
|
borderWidth: "var(--ds-border-width-outline, 2px)",
|
|
9
8
|
backgroundColor: `var(--ds-skeleton-subtle, ${N20})`
|
|
10
9
|
};
|
|
11
|
-
const previewStyleOld = {
|
|
12
|
-
borderColor: `var(--ds-border-focused, ${B200})`,
|
|
13
|
-
borderStyle: 'solid',
|
|
14
|
-
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
15
|
-
borderWidth: "var(--ds-border-width-outline, 2px)",
|
|
16
|
-
backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
|
|
17
|
-
};
|
|
18
10
|
const getPreviewContainerDimensionsForSingle = (dom, nodeType) => {
|
|
19
11
|
let nodeContainer = dom;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
nodeContainer = iframeContainer;
|
|
26
|
-
}
|
|
12
|
+
const iframeContainer = dom.querySelector('iframe');
|
|
13
|
+
if (nodeType === 'embedCard') {
|
|
14
|
+
nodeContainer = dom.querySelector('.rich-media-item') || dom;
|
|
15
|
+
} else if (nodeType === 'extension' && iframeContainer) {
|
|
16
|
+
nodeContainer = iframeContainer;
|
|
27
17
|
}
|
|
28
18
|
const nodeContainerRect = nodeContainer.getBoundingClientRect();
|
|
29
19
|
return {
|
|
@@ -54,7 +44,6 @@ const createGenericPreview = () => {
|
|
|
54
44
|
const generalPreview = document.createElement('div');
|
|
55
45
|
// ProseMirror class is required to make sure the cloned dom is styled correctly
|
|
56
46
|
generalPreview.classList.add('ProseMirror', 'block-ctrl-drag-preview');
|
|
57
|
-
const previewStyle = fg('platform_editor_elements_drag_and_drop_ed_23189') ? previewStyleNew : previewStyleOld;
|
|
58
47
|
generalPreview.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
|
|
59
48
|
generalPreview.style.borderRadius = previewStyle.borderRadius;
|
|
60
49
|
generalPreview.style.backgroundColor = previewStyle.backgroundColor;
|
|
@@ -78,13 +67,13 @@ const createContentPreviewElement = (dom, nodeType, nodeSpacing) => {
|
|
|
78
67
|
clonedDom.style.marginRight = '0';
|
|
79
68
|
clonedDom.style.marginBottom = nodeSpacing ? `${nodeSpacing.bottom}` : '0';
|
|
80
69
|
clonedDom.style.boxShadow = 'none';
|
|
81
|
-
clonedDom.style.opacity = browser.windows ? '1' :
|
|
70
|
+
clonedDom.style.opacity = browser.windows ? '1' : '0.31';
|
|
82
71
|
contentPreviewOneElement.appendChild(clonedDom);
|
|
83
72
|
return contentPreviewOneElement;
|
|
84
73
|
};
|
|
85
74
|
const isGenericPreview = (dom, nodeType) => {
|
|
86
75
|
const embedCard = dom.querySelector('.embedCardView-content-wrap');
|
|
87
|
-
return
|
|
76
|
+
return nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe');
|
|
88
77
|
};
|
|
89
78
|
const createPreviewForElement = (dom, nodeType, nodeSpacing) => {
|
|
90
79
|
const shouldBeGenericPreview = isGenericPreview(dom, nodeType);
|
|
@@ -7,7 +7,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
|
|
10
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
10
|
import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
|
|
12
11
|
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
13
12
|
import { B200 } from '@atlaskit/theme/colors';
|
|
@@ -73,7 +72,7 @@ export const DropTargetLayout = props => {
|
|
|
73
72
|
const to = getPos();
|
|
74
73
|
let mappedTo;
|
|
75
74
|
if (to !== undefined) {
|
|
76
|
-
var _api$core;
|
|
75
|
+
var _api$core, _api$core2;
|
|
77
76
|
const {
|
|
78
77
|
pos: from
|
|
79
78
|
} = activeNode;
|
|
@@ -84,23 +83,18 @@ export const DropTargetLayout = props => {
|
|
|
84
83
|
api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(from, to)({
|
|
85
84
|
tr
|
|
86
85
|
});
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
const insertColumnStep = getInsertLayoutStep(tr);
|
|
87
|
+
mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
|
|
88
|
+
return tr;
|
|
89
|
+
});
|
|
90
|
+
api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
|
|
91
|
+
tr
|
|
92
|
+
}) => {
|
|
93
|
+
if (mappedTo !== undefined) {
|
|
94
|
+
updateSelection(tr, mappedTo);
|
|
90
95
|
}
|
|
91
96
|
return tr;
|
|
92
97
|
});
|
|
93
|
-
if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
94
|
-
var _api$core2;
|
|
95
|
-
api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
|
|
96
|
-
tr
|
|
97
|
-
}) => {
|
|
98
|
-
if (mappedTo !== undefined) {
|
|
99
|
-
updateSelection(tr, mappedTo);
|
|
100
|
-
}
|
|
101
|
-
return tr;
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
98
|
}
|
|
105
99
|
}, [api, getPos, activeNode]);
|
|
106
100
|
useEffect(() => {
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
6
|
import { css, Global, jsx } from '@emotion/react';
|
|
7
7
|
import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
9
|
import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
|
|
11
10
|
|
|
@@ -260,6 +259,6 @@ const blockCardWithoutLayout = css({
|
|
|
260
259
|
});
|
|
261
260
|
export const GlobalStylesWrapper = () => {
|
|
262
261
|
return jsx(Global, {
|
|
263
|
-
styles: [globalStyles(),
|
|
262
|
+
styles: [globalStyles(), globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
|
|
264
263
|
});
|
|
265
264
|
};
|
|
@@ -9,7 +9,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
10
10
|
import { css, jsx } from '@emotion/react';
|
|
11
11
|
import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
|
|
12
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
12
|
import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
|
|
14
13
|
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
15
14
|
import { B200 } from '@atlaskit/theme/colors';
|
|
@@ -178,7 +177,7 @@ export const InlineDropTarget = ({
|
|
|
178
177
|
const toPos = getPos();
|
|
179
178
|
let mappedTo;
|
|
180
179
|
if (activeNode && toPos !== undefined) {
|
|
181
|
-
var _api$core;
|
|
180
|
+
var _api$core, _api$core2;
|
|
182
181
|
const {
|
|
183
182
|
pos: start
|
|
184
183
|
} = activeNode;
|
|
@@ -192,23 +191,18 @@ export const InlineDropTarget = ({
|
|
|
192
191
|
})({
|
|
193
192
|
tr
|
|
194
193
|
});
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
194
|
+
const insertLayoutStep = getInsertLayoutStep(tr);
|
|
195
|
+
mappedTo = insertLayoutStep === null || insertLayoutStep === void 0 ? void 0 : insertLayoutStep.from;
|
|
196
|
+
return tr;
|
|
197
|
+
});
|
|
198
|
+
api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
|
|
199
|
+
tr
|
|
200
|
+
}) => {
|
|
201
|
+
if (mappedTo !== undefined) {
|
|
202
|
+
updateSelection(tr, mappedTo, moveToEnd);
|
|
198
203
|
}
|
|
199
204
|
return tr;
|
|
200
205
|
});
|
|
201
|
-
if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
202
|
-
var _api$core2;
|
|
203
|
-
api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
|
|
204
|
-
tr
|
|
205
|
-
}) => {
|
|
206
|
-
if (mappedTo !== undefined) {
|
|
207
|
-
updateSelection(tr, mappedTo, moveToEnd);
|
|
208
|
-
}
|
|
209
|
-
return tr;
|
|
210
|
-
});
|
|
211
|
-
}
|
|
212
206
|
}
|
|
213
207
|
}, [api, getPos, position]);
|
|
214
208
|
const hoverZoneRectStyle = useMemo(() => {
|
|
@@ -4,12 +4,11 @@ import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
|
4
4
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
7
|
+
import { attachMoveNodeAnalytics, fireInsertLayoutAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
|
|
8
|
+
import { containsNodeOfType, isFragmentOfType } from '../pm-plugins/utils/check-fragment';
|
|
9
9
|
import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
|
|
10
10
|
import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
|
|
11
11
|
import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
|
|
12
|
-
import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
|
|
13
12
|
import { isInSameLayout } from '../pm-plugins/utils/validation';
|
|
14
13
|
import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
|
|
15
14
|
var createNewLayout = function createNewLayout(schema, layoutContents) {
|
|
@@ -64,20 +63,14 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
|
|
|
64
63
|
tr.delete(from, sourceContentEndPos);
|
|
65
64
|
var mappedTo = tr.mapping.map(to);
|
|
66
65
|
tr.insert(mappedTo, sourceContent);
|
|
67
|
-
if (
|
|
66
|
+
if (selectMovedNode) {
|
|
68
67
|
tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
69
68
|
}
|
|
70
69
|
attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api, sourceNodeTypes, hasSelectedMultipleNodes);
|
|
71
70
|
} else if (toLayout.childCount < maxLayoutColumnSupported()) {
|
|
72
71
|
var _$originalFrom$nodeAf2;
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
|
|
76
|
-
} else {
|
|
77
|
-
insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos);
|
|
78
|
-
var mappedFrom = tr.mapping.map(from);
|
|
79
|
-
removeFromSource(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
|
|
80
|
-
}
|
|
72
|
+
removeFromSource(tr, tr.doc.resolve(from), sourceContentEndPos);
|
|
73
|
+
insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
|
|
81
74
|
attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api, sourceNodeTypes, hasSelectedMultipleNodes);
|
|
82
75
|
}
|
|
83
76
|
return tr;
|
|
@@ -122,40 +115,6 @@ var insertToDestinationNoWidthUpdate = function insertToDestinationNoWidthUpdate
|
|
|
122
115
|
}
|
|
123
116
|
return tr;
|
|
124
117
|
};
|
|
125
|
-
var insertToDestination = function insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos) {
|
|
126
|
-
var _ref3 = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
|
|
127
|
-
newColumnWidth = _ref3.newColumnWidth;
|
|
128
|
-
var _ref4 = tr.doc.type.schema.nodes || {},
|
|
129
|
-
layoutColumn = _ref4.layoutColumn;
|
|
130
|
-
var content = null;
|
|
131
|
-
try {
|
|
132
|
-
if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
|
|
133
|
-
if (sourceContent instanceof Fragment) {
|
|
134
|
-
var _sourceContent$firstC;
|
|
135
|
-
content = layoutColumn.createChecked({
|
|
136
|
-
width: newColumnWidth
|
|
137
|
-
}, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
|
|
138
|
-
}
|
|
139
|
-
} else {
|
|
140
|
-
if (sourceContent instanceof PMNode) {
|
|
141
|
-
content = layoutColumn.createChecked({
|
|
142
|
-
width: newColumnWidth
|
|
143
|
-
}, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
} catch (error) {
|
|
147
|
-
logException(error, {
|
|
148
|
-
location: 'editor-plugin-block-controls/move-to-layout'
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
if (content) {
|
|
152
|
-
tr.insert(to, content);
|
|
153
|
-
}
|
|
154
|
-
if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
155
|
-
tr.setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
|
|
156
|
-
}
|
|
157
|
-
return tr;
|
|
158
|
-
};
|
|
159
118
|
|
|
160
119
|
/**
|
|
161
120
|
* Check if the node at `from` can be moved to node at `to` to create/expand a layout.
|
|
@@ -165,10 +124,10 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
|
|
|
165
124
|
if (from === to) {
|
|
166
125
|
return;
|
|
167
126
|
}
|
|
168
|
-
var
|
|
169
|
-
layoutSection =
|
|
170
|
-
layoutColumn =
|
|
171
|
-
doc =
|
|
127
|
+
var _ref3 = tr.doc.type.schema.nodes || {},
|
|
128
|
+
layoutSection = _ref3.layoutSection,
|
|
129
|
+
layoutColumn = _ref3.layoutColumn,
|
|
130
|
+
doc = _ref3.doc;
|
|
172
131
|
|
|
173
132
|
// layout plugin does not exist
|
|
174
133
|
if (!layoutSection || !layoutColumn) {
|
|
@@ -218,8 +177,8 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
|
|
|
218
177
|
};
|
|
219
178
|
var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
|
|
220
179
|
var fromContentWithoutBreakout = $from.nodeAfter;
|
|
221
|
-
var
|
|
222
|
-
breakout =
|
|
180
|
+
var _ref4 = tr.doc.type.schema.marks || {},
|
|
181
|
+
breakout = _ref4.breakout;
|
|
223
182
|
if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
|
|
224
183
|
tr.doc.nodesBetween($from.pos, to, function (node, pos, parent) {
|
|
225
184
|
// breakout doesn't exist on nested nodes
|
|
@@ -282,8 +241,8 @@ var getBreakoutMode = function getBreakoutMode(content, breakout) {
|
|
|
282
241
|
// source content variable that has type of `PMNode | Fragment` should be updated to `Fragment` only
|
|
283
242
|
export var moveToLayout = function moveToLayout(api) {
|
|
284
243
|
return function (from, to, options) {
|
|
285
|
-
return function (
|
|
286
|
-
var tr =
|
|
244
|
+
return function (_ref5) {
|
|
245
|
+
var tr = _ref5.tr;
|
|
287
246
|
if (!api) {
|
|
288
247
|
return tr;
|
|
289
248
|
}
|
|
@@ -296,11 +255,11 @@ export var moveToLayout = function moveToLayout(api) {
|
|
|
296
255
|
sourceContent = canMove.sourceContent,
|
|
297
256
|
$sourceFrom = canMove.$sourceFrom,
|
|
298
257
|
sourceTo = canMove.sourceTo;
|
|
299
|
-
var
|
|
300
|
-
layoutSection =
|
|
301
|
-
layoutColumn =
|
|
302
|
-
var
|
|
303
|
-
breakout =
|
|
258
|
+
var _ref6 = tr.doc.type.schema.nodes || {},
|
|
259
|
+
layoutSection = _ref6.layoutSection,
|
|
260
|
+
layoutColumn = _ref6.layoutColumn;
|
|
261
|
+
var _ref7 = tr.doc.type.schema.marks || {},
|
|
262
|
+
breakout = _ref7.breakout;
|
|
304
263
|
|
|
305
264
|
// get breakout mode from destination node,
|
|
306
265
|
// if not found, get from source node,
|
|
@@ -358,9 +317,6 @@ export var moveToLayout = function moveToLayout(api) {
|
|
|
358
317
|
tr = removeFromSource(tr, $sourceFrom, sourceTo);
|
|
359
318
|
var mappedTo = tr.mapping.map(to);
|
|
360
319
|
tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
|
|
361
|
-
if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
362
|
-
tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
363
|
-
}
|
|
364
320
|
breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
|
|
365
321
|
mode: breakoutMode
|
|
366
322
|
})]);
|
|
@@ -40,7 +40,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
|
|
|
40
40
|
}
|
|
41
41
|
var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
|
|
42
42
|
var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
|
|
43
|
-
if (editorExperiment('advanced_layouts', true)
|
|
43
|
+
if (editorExperiment('advanced_layouts', true)) {
|
|
44
44
|
// We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
|
|
45
45
|
if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow') && editorExperiment('nested-dnd', true)) {
|
|
46
46
|
rootElement = parentElement;
|
|
@@ -635,7 +635,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
|
|
|
635
635
|
// Currently we can only drag one node at a time
|
|
636
636
|
// so we only need to check first child
|
|
637
637
|
var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
|
|
638
|
-
if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn'
|
|
638
|
+
if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn') {
|
|
639
639
|
// we prevent native DnD for layoutColumn to prevent single column layout.
|
|
640
640
|
event.preventDefault();
|
|
641
641
|
return false;
|
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
1
|
import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
|
|
3
2
|
export var getTopPosition = function getTopPosition(dom, type) {
|
|
4
3
|
if (!dom) {
|
|
5
4
|
return 'auto';
|
|
6
5
|
}
|
|
7
6
|
var table = dom.querySelector('table');
|
|
8
|
-
var isTable =
|
|
7
|
+
var isTable = table && (!type || type === 'table');
|
|
9
8
|
if (isTable) {
|
|
10
9
|
return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
|
|
11
10
|
} else if (type === 'rule') {
|
|
12
11
|
return "".concat(dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
|
|
13
12
|
} else if (type === 'layoutColumn') {
|
|
14
|
-
|
|
15
|
-
return "".concat(-dom.offsetTop / 2, "px");
|
|
16
|
-
} else {
|
|
17
|
-
return "".concat(-DRAG_HANDLE_WIDTH, "px");
|
|
18
|
-
}
|
|
13
|
+
return "".concat(-dom.offsetTop / 2, "px");
|
|
19
14
|
} else if (type === 'heading-1') {
|
|
20
15
|
return "".concat(dom.offsetTop + DRAG_HANDLE_H1_TOP_ADJUSTMENT, "px");
|
|
21
16
|
} else if (type === 'heading-2') {
|
|
@@ -236,11 +236,9 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
236
236
|
// but ensures the preview is generated correctly.
|
|
237
237
|
var handleMouseDown = useCallback(function () {
|
|
238
238
|
if (editorExperiment('advanced_layouts', true)) {
|
|
239
|
+
var _buttonRef$current;
|
|
239
240
|
// prevent native drag and drop.
|
|
240
|
-
|
|
241
|
-
var _buttonRef$current;
|
|
242
|
-
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
|
|
243
|
-
}
|
|
241
|
+
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
|
|
244
242
|
if (!isLayoutColumn) {
|
|
245
243
|
return undefined;
|
|
246
244
|
}
|
|
@@ -1,30 +1,20 @@
|
|
|
1
1
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
2
2
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
var previewStyleNew = {
|
|
3
|
+
import { N20, N30 } from '@atlaskit/theme/colors';
|
|
4
|
+
var previewStyle = {
|
|
6
5
|
borderColor: "var(--ds-border, ".concat(N30, ")"),
|
|
7
6
|
borderStyle: 'solid',
|
|
8
7
|
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
9
8
|
borderWidth: "var(--ds-border-width-outline, 2px)",
|
|
10
9
|
backgroundColor: "var(--ds-skeleton-subtle, ".concat(N20, ")")
|
|
11
10
|
};
|
|
12
|
-
var previewStyleOld = {
|
|
13
|
-
borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
|
|
14
|
-
borderStyle: 'solid',
|
|
15
|
-
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
16
|
-
borderWidth: "var(--ds-border-width-outline, 2px)",
|
|
17
|
-
backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
|
|
18
|
-
};
|
|
19
11
|
var getPreviewContainerDimensionsForSingle = function getPreviewContainerDimensionsForSingle(dom, nodeType) {
|
|
20
12
|
var nodeContainer = dom;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
nodeContainer = iframeContainer;
|
|
27
|
-
}
|
|
13
|
+
var iframeContainer = dom.querySelector('iframe');
|
|
14
|
+
if (nodeType === 'embedCard') {
|
|
15
|
+
nodeContainer = dom.querySelector('.rich-media-item') || dom;
|
|
16
|
+
} else if (nodeType === 'extension' && iframeContainer) {
|
|
17
|
+
nodeContainer = iframeContainer;
|
|
28
18
|
}
|
|
29
19
|
var nodeContainerRect = nodeContainer.getBoundingClientRect();
|
|
30
20
|
return {
|
|
@@ -54,7 +44,6 @@ var createGenericPreview = function createGenericPreview() {
|
|
|
54
44
|
var generalPreview = document.createElement('div');
|
|
55
45
|
// ProseMirror class is required to make sure the cloned dom is styled correctly
|
|
56
46
|
generalPreview.classList.add('ProseMirror', 'block-ctrl-drag-preview');
|
|
57
|
-
var previewStyle = fg('platform_editor_elements_drag_and_drop_ed_23189') ? previewStyleNew : previewStyleOld;
|
|
58
47
|
generalPreview.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
|
|
59
48
|
generalPreview.style.borderRadius = previewStyle.borderRadius;
|
|
60
49
|
generalPreview.style.backgroundColor = previewStyle.backgroundColor;
|
|
@@ -78,13 +67,13 @@ var createContentPreviewElement = function createContentPreviewElement(dom, node
|
|
|
78
67
|
clonedDom.style.marginRight = '0';
|
|
79
68
|
clonedDom.style.marginBottom = nodeSpacing ? "".concat(nodeSpacing.bottom) : '0';
|
|
80
69
|
clonedDom.style.boxShadow = 'none';
|
|
81
|
-
clonedDom.style.opacity = browser.windows ? '1' :
|
|
70
|
+
clonedDom.style.opacity = browser.windows ? '1' : '0.31';
|
|
82
71
|
contentPreviewOneElement.appendChild(clonedDom);
|
|
83
72
|
return contentPreviewOneElement;
|
|
84
73
|
};
|
|
85
74
|
var isGenericPreview = function isGenericPreview(dom, nodeType) {
|
|
86
75
|
var embedCard = dom.querySelector('.embedCardView-content-wrap');
|
|
87
|
-
return
|
|
76
|
+
return nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe');
|
|
88
77
|
};
|
|
89
78
|
var createPreviewForElement = function createPreviewForElement(dom, nodeType, nodeSpacing) {
|
|
90
79
|
var shouldBeGenericPreview = isGenericPreview(dom, nodeType);
|
|
@@ -9,7 +9,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
10
10
|
import { css, jsx } from '@emotion/react';
|
|
11
11
|
import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
|
|
12
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
12
|
import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
|
|
14
13
|
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
15
14
|
import { B200 } from '@atlaskit/theme/colors';
|
|
@@ -74,7 +73,7 @@ export var DropTargetLayout = function DropTargetLayout(props) {
|
|
|
74
73
|
var to = getPos();
|
|
75
74
|
var mappedTo;
|
|
76
75
|
if (to !== undefined) {
|
|
77
|
-
var _api$core;
|
|
76
|
+
var _api$core, _api$core2;
|
|
78
77
|
var from = activeNode.pos;
|
|
79
78
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
|
|
80
79
|
var _api$blockControls2;
|
|
@@ -82,22 +81,17 @@ export var DropTargetLayout = function DropTargetLayout(props) {
|
|
|
82
81
|
api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.moveToLayout(from, to)({
|
|
83
82
|
tr: tr
|
|
84
83
|
});
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
84
|
+
var insertColumnStep = getInsertLayoutStep(tr);
|
|
85
|
+
mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
|
|
86
|
+
return tr;
|
|
87
|
+
});
|
|
88
|
+
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
|
|
89
|
+
var tr = _ref3.tr;
|
|
90
|
+
if (mappedTo !== undefined) {
|
|
91
|
+
updateSelection(tr, mappedTo);
|
|
88
92
|
}
|
|
89
93
|
return tr;
|
|
90
94
|
});
|
|
91
|
-
if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
92
|
-
var _api$core2;
|
|
93
|
-
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
|
|
94
|
-
var tr = _ref3.tr;
|
|
95
|
-
if (mappedTo !== undefined) {
|
|
96
|
-
updateSelection(tr, mappedTo);
|
|
97
|
-
}
|
|
98
|
-
return tr;
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
95
|
}
|
|
102
96
|
}, [api, getPos, activeNode]);
|
|
103
97
|
useEffect(function () {
|
|
@@ -6,7 +6,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { css, Global, jsx } from '@emotion/react';
|
|
8
8
|
import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
10
|
import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
|
|
12
11
|
|
|
@@ -209,6 +208,6 @@ var blockCardWithoutLayout = css({
|
|
|
209
208
|
});
|
|
210
209
|
export var GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
211
210
|
return jsx(Global, {
|
|
212
|
-
styles: [globalStyles(),
|
|
211
|
+
styles: [globalStyles(), globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
|
|
213
212
|
});
|
|
214
213
|
};
|
|
@@ -11,7 +11,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
|
11
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
12
12
|
import { css, jsx } from '@emotion/react';
|
|
13
13
|
import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
|
|
14
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
14
|
import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
|
|
16
15
|
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
17
16
|
import { B200 } from '@atlaskit/theme/colors';
|
|
@@ -183,7 +182,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
|
|
|
183
182
|
var toPos = getPos();
|
|
184
183
|
var mappedTo;
|
|
185
184
|
if (activeNode && toPos !== undefined) {
|
|
186
|
-
var _api$core;
|
|
185
|
+
var _api$core, _api$core2;
|
|
187
186
|
var start = activeNode.pos;
|
|
188
187
|
var moveToEnd = position === 'right';
|
|
189
188
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
|
|
@@ -194,22 +193,17 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
|
|
|
194
193
|
})({
|
|
195
194
|
tr: tr
|
|
196
195
|
});
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
196
|
+
var insertLayoutStep = getInsertLayoutStep(tr);
|
|
197
|
+
mappedTo = insertLayoutStep === null || insertLayoutStep === void 0 ? void 0 : insertLayoutStep.from;
|
|
198
|
+
return tr;
|
|
199
|
+
});
|
|
200
|
+
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
|
|
201
|
+
var tr = _ref4.tr;
|
|
202
|
+
if (mappedTo !== undefined) {
|
|
203
|
+
updateSelection(tr, mappedTo, moveToEnd);
|
|
200
204
|
}
|
|
201
205
|
return tr;
|
|
202
206
|
});
|
|
203
|
-
if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
204
|
-
var _api$core2;
|
|
205
|
-
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
|
|
206
|
-
var tr = _ref4.tr;
|
|
207
|
-
if (mappedTo !== undefined) {
|
|
208
|
-
updateSelection(tr, mappedTo, moveToEnd);
|
|
209
|
-
}
|
|
210
|
-
return tr;
|
|
211
|
-
});
|
|
212
|
-
}
|
|
213
207
|
}
|
|
214
208
|
}, [api, getPos, position]);
|
|
215
209
|
var hoverZoneRectStyle = useMemo(function () {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.13",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
36
|
-
"@atlaskit/editor-common": "^102.
|
|
36
|
+
"@atlaskit/editor-common": "^102.7.0",
|
|
37
37
|
"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
|
|
38
|
-
"@atlaskit/editor-plugin-analytics": "^2.
|
|
38
|
+
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-feature-flags": "^1.3.0",
|
|
41
41
|
"@atlaskit/editor-plugin-metrics": "^3.4.0",
|
|
@@ -110,9 +110,6 @@
|
|
|
110
110
|
"type": "boolean",
|
|
111
111
|
"referenceOnly": true
|
|
112
112
|
},
|
|
113
|
-
"platform_editor_elements_drag_and_drop_ed_23189": {
|
|
114
|
-
"type": "boolean"
|
|
115
|
-
},
|
|
116
113
|
"platform_editor_element_drag_and_drop_ed_23873": {
|
|
117
114
|
"type": "boolean"
|
|
118
115
|
},
|
|
@@ -125,9 +122,6 @@
|
|
|
125
122
|
"platform_editor_use_nested_table_pm_nodes": {
|
|
126
123
|
"type": "boolean"
|
|
127
124
|
},
|
|
128
|
-
"platform_editor_advanced_layouts_post_fix_patch_1": {
|
|
129
|
-
"type": "boolean"
|
|
130
|
-
},
|
|
131
125
|
"platform_editor_advanced_layouts_post_fix_patch_2": {
|
|
132
126
|
"type": "boolean"
|
|
133
127
|
},
|