@atlaskit/editor-plugin-block-controls 2.17.0 → 2.17.2
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 +22 -0
- package/dist/cjs/editor-commands/move-node.js +1 -1
- package/dist/cjs/pm-plugins/decorations-drag-handle.js +2 -3
- package/dist/cjs/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/cjs/pm-plugins/utils/getSelection.js +1 -2
- package/dist/cjs/ui/drop-target.js +1 -2
- package/dist/cjs/ui/global-styles.js +3 -11
- package/dist/es2019/editor-commands/move-node.js +1 -1
- package/dist/es2019/pm-plugins/decorations-drag-handle.js +2 -3
- package/dist/es2019/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/es2019/pm-plugins/utils/getSelection.js +1 -2
- package/dist/es2019/ui/drop-target.js +1 -2
- package/dist/es2019/ui/global-styles.js +4 -15
- package/dist/esm/editor-commands/move-node.js +1 -1
- package/dist/esm/pm-plugins/decorations-drag-handle.js +2 -3
- package/dist/esm/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/esm/pm-plugins/utils/getSelection.js +1 -2
- package/dist/esm/ui/drop-target.js +1 -2
- package/dist/esm/ui/global-styles.js +3 -11
- package/package.json +1 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 2.17.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#100925](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100925)
|
|
8
|
+
[`9fcb0cd204385`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9fcb0cd204385) -
|
|
9
|
+
[ED-26170] Remove feature gate platform_editor_element_dnd_nested_fix_patch_2
|
|
10
|
+
- [#101222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101222)
|
|
11
|
+
[`361cf34435b08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/361cf34435b08) -
|
|
12
|
+
[ED-26172] clean up FG platform_editor_element_dnd_nested_fix_patch_4
|
|
13
|
+
|
|
14
|
+
## 2.17.1
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [#100897](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100897)
|
|
19
|
+
[`afd84cc21d588`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/afd84cc21d588) -
|
|
20
|
+
Remove FG
|
|
21
|
+
- [#100902](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100902)
|
|
22
|
+
[`40de6a66cb5e7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40de6a66cb5e7) -
|
|
23
|
+
Remove old FG
|
|
24
|
+
|
|
3
25
|
## 2.17.0
|
|
4
26
|
|
|
5
27
|
### Minor Changes
|
|
@@ -215,7 +215,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
215
215
|
mappedTo = tr.mapping.map(to);
|
|
216
216
|
tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
|
|
217
217
|
}
|
|
218
|
-
tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP
|
|
218
|
+
tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP ? (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo) : (0, _getSelection.selectNode)(tr, mappedTo, node.type.name);
|
|
219
219
|
tr.setMeta(_main.key, {
|
|
220
220
|
nodeMoved: true
|
|
221
221
|
});
|
|
@@ -38,9 +38,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
|
|
|
38
38
|
var key = (0, _uuid.default)();
|
|
39
39
|
return _view.Decoration.widget(pos, function (view, getPosUnsafe) {
|
|
40
40
|
var element = document.createElement('span');
|
|
41
|
-
//
|
|
42
|
-
|
|
43
|
-
element.style.display = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
|
|
41
|
+
// inline decoration causes focus issues when refocusing Editor into first line
|
|
42
|
+
element.style.display = 'block';
|
|
44
43
|
element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
|
|
45
44
|
element.setAttribute('data-blocks-drag-handle-container', 'true');
|
|
46
45
|
element.setAttribute('data-blocks-drag-handle-key', key);
|
|
@@ -73,7 +73,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
73
73
|
// We want to exlude handles from showing for wrapped nodes
|
|
74
74
|
// TODO We should be able remove these check if we decided to
|
|
75
75
|
// go we not decoration for wrapped image solution.
|
|
76
|
-
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')
|
|
76
|
+
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
|
|
77
77
|
return false;
|
|
78
78
|
}
|
|
79
79
|
var parentRootElement = rootElement.parentElement;
|
|
@@ -7,7 +7,6 @@ exports.setCursorPositionAtMovedNode = exports.selectNode = exports.getSelection
|
|
|
7
7
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
8
8
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
9
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
10
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
10
|
var getInlineNodePos = exports.getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
|
|
12
11
|
var $startPos = tr.doc.resolve(start);
|
|
13
12
|
// To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
|
|
@@ -82,7 +81,7 @@ var setCursorPositionAtMovedNode = exports.setCursorPositionAtMovedNode = functi
|
|
|
82
81
|
var selection;
|
|
83
82
|
// decisionList node is not selectable, but we want to select the whole node not just text
|
|
84
83
|
// blockQuote is selectable, but we want to set cursor at the inline end Pos instead of the gap cursor as this causes jittering post drop
|
|
85
|
-
if (isNodeSelection &&
|
|
84
|
+
if (isNodeSelection && node.type.name !== 'blockquote' || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
|
|
86
85
|
selection = new _selection.GapCursorSelection(tr.doc.resolve(start + node.nodeSize), _selection.Side.RIGHT);
|
|
87
86
|
} else {
|
|
88
87
|
var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
|
|
@@ -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 _hooks = require("@atlaskit/editor-common/hooks");
|
|
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 _constants = require("@atlaskit/theme/constants");
|
|
@@ -195,7 +194,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
|
|
|
195
194
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
196
195
|
dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle,
|
|
197
196
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
198
|
-
|
|
197
|
+
dropTargetMarginTopStyles]
|
|
199
198
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
200
199
|
,
|
|
201
200
|
style: dynamicStyle,
|
|
@@ -104,13 +104,8 @@ var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
|
|
|
104
104
|
var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
|
|
105
105
|
var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
|
|
106
106
|
var dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
|
|
107
|
-
var withInlineNodeStyleSelectors = [".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithPlaceholder, ")")].join(', ');
|
|
108
107
|
var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
|
|
109
|
-
var
|
|
110
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
111
|
-
display: 'none !important'
|
|
112
|
-
}));
|
|
113
|
-
var withInlineNodeStyleWithChromeFixSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
|
|
108
|
+
var withInlineNodeStyleSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
|
|
114
109
|
var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
|
|
115
110
|
|
|
116
111
|
/**
|
|
@@ -118,7 +113,7 @@ var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":firs
|
|
|
118
113
|
* Otherwise it might break composition input for Chrome
|
|
119
114
|
* https://product-fabric.atlassian.net/browse/ED-24136
|
|
120
115
|
*/
|
|
121
|
-
var
|
|
116
|
+
var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleSelectors, {
|
|
122
117
|
transform: 'scale(0)'
|
|
123
118
|
}));
|
|
124
119
|
var legacyBreakoutWideLayoutStyle = (0, _react.css)({
|
|
@@ -189,9 +184,6 @@ var headingWithIndentationInLayoutStyleFix = (0, _react.css)((0, _defineProperty
|
|
|
189
184
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
190
185
|
marginTop: '0 !important'
|
|
191
186
|
}));
|
|
192
|
-
var getTextNodeStyle = function getTextNodeStyle() {
|
|
193
|
-
return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
194
|
-
};
|
|
195
187
|
var withRelativePosStyle = (0, _react.css)({
|
|
196
188
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
197
189
|
'.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector), {
|
|
@@ -230,6 +222,6 @@ var blockCardWithoutLayout = (0, _react.css)({
|
|
|
230
222
|
});
|
|
231
223
|
var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
232
224
|
return (0, _react.jsx)(_react.Global, {
|
|
233
|
-
styles: [globalStyles(), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(),
|
|
225
|
+
styles: [globalStyles(), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
|
|
234
226
|
});
|
|
235
227
|
};
|
|
@@ -209,7 +209,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
|
|
|
209
209
|
mappedTo = tr.mapping.map(to);
|
|
210
210
|
tr.insert(mappedTo, nodeCopy); // insert the content at the new position
|
|
211
211
|
}
|
|
212
|
-
tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP
|
|
212
|
+
tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : selectNode(tr, mappedTo, node.type.name);
|
|
213
213
|
tr.setMeta(key, {
|
|
214
214
|
nodeMoved: true
|
|
215
215
|
});
|
|
@@ -29,9 +29,8 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
|
|
|
29
29
|
const key = uuid();
|
|
30
30
|
return Decoration.widget(pos, (view, getPosUnsafe) => {
|
|
31
31
|
const element = document.createElement('span');
|
|
32
|
-
//
|
|
33
|
-
|
|
34
|
-
element.style.display = fg('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
|
|
32
|
+
// inline decoration causes focus issues when refocusing Editor into first line
|
|
33
|
+
element.style.display = 'block';
|
|
35
34
|
element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
|
|
36
35
|
element.setAttribute('data-blocks-drag-handle-container', 'true');
|
|
37
36
|
element.setAttribute('data-blocks-drag-handle-key', key);
|
|
@@ -68,7 +68,7 @@ export const handleMouseOver = (view, event, api) => {
|
|
|
68
68
|
// We want to exlude handles from showing for wrapped nodes
|
|
69
69
|
// TODO We should be able remove these check if we decided to
|
|
70
70
|
// go we not decoration for wrapped image solution.
|
|
71
|
-
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')
|
|
71
|
+
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
|
|
72
72
|
return false;
|
|
73
73
|
}
|
|
74
74
|
const parentRootElement = rootElement.parentElement;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
|
|
2
2
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
export const getInlineNodePos = (tr, start, nodeSize) => {
|
|
6
5
|
const $startPos = tr.doc.resolve(start);
|
|
7
6
|
// To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
|
|
@@ -77,7 +76,7 @@ export const setCursorPositionAtMovedNode = (tr, start) => {
|
|
|
77
76
|
let selection;
|
|
78
77
|
// decisionList node is not selectable, but we want to select the whole node not just text
|
|
79
78
|
// blockQuote is selectable, but we want to set cursor at the inline end Pos instead of the gap cursor as this causes jittering post drop
|
|
80
|
-
if (isNodeSelection &&
|
|
79
|
+
if (isNodeSelection && node.type.name !== 'blockquote' || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
|
|
81
80
|
selection = new GapCursorSelection(tr.doc.resolve(start + node.nodeSize), Side.RIGHT);
|
|
82
81
|
} else {
|
|
83
82
|
const {
|
|
@@ -7,7 +7,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
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 { layers } from '@atlaskit/theme/constants';
|
|
@@ -185,7 +184,7 @@ export const DropTarget = ({
|
|
|
185
184
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
186
185
|
dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle,
|
|
187
186
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
188
|
-
|
|
187
|
+
dropTargetMarginTopStyles]
|
|
189
188
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
190
189
|
,
|
|
191
190
|
style: dynamicStyle,
|
|
@@ -126,16 +126,8 @@ const paragraphWithPlaceholder = '+ p > .placeholder-decoration';
|
|
|
126
126
|
const dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
|
|
127
127
|
const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
|
|
128
128
|
const dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
|
|
129
|
-
const withInlineNodeStyleSelectors = [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreakAsOnlyChild})`, `.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${indentatedParagraphWithTrailingBreakAsOnlyChild})`, `.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithPlaceholder})`].join(', ');
|
|
130
129
|
const dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
|
|
131
|
-
const
|
|
132
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
133
|
-
[withInlineNodeStyleSelectors]: {
|
|
134
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
135
|
-
display: 'none !important'
|
|
136
|
-
}
|
|
137
|
-
});
|
|
138
|
-
const withInlineNodeStyleWithChromeFixSelectors = [`${dragHandleContainer}:has(${paragraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${indentatedParagraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${paragraphWithPlaceholder}) ${dragHandleSelector}`].join(', ');
|
|
130
|
+
const withInlineNodeStyleSelectors = [`${dragHandleContainer}:has(${paragraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${indentatedParagraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${paragraphWithPlaceholder}) ${dragHandleSelector}`].join(', ');
|
|
139
131
|
const withFormatInLayoutStyleFixSelectors = [`${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child`].join(', ');
|
|
140
132
|
|
|
141
133
|
/**
|
|
@@ -143,9 +135,9 @@ const withFormatInLayoutStyleFixSelectors = [`${dragHandleContainer}:first-child
|
|
|
143
135
|
* Otherwise it might break composition input for Chrome
|
|
144
136
|
* https://product-fabric.atlassian.net/browse/ED-24136
|
|
145
137
|
*/
|
|
146
|
-
const
|
|
138
|
+
const withInlineNodeStyle = css({
|
|
147
139
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
148
|
-
[
|
|
140
|
+
[withInlineNodeStyleSelectors]: {
|
|
149
141
|
transform: 'scale(0)'
|
|
150
142
|
}
|
|
151
143
|
});
|
|
@@ -230,9 +222,6 @@ const headingWithIndentationInLayoutStyleFix = css({
|
|
|
230
222
|
marginTop: '0 !important'
|
|
231
223
|
}
|
|
232
224
|
});
|
|
233
|
-
const getTextNodeStyle = () => {
|
|
234
|
-
return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
235
|
-
};
|
|
236
225
|
const withRelativePosStyle = css({
|
|
237
226
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
238
227
|
'.ProseMirror': {
|
|
@@ -277,6 +266,6 @@ const blockCardWithoutLayout = css({
|
|
|
277
266
|
});
|
|
278
267
|
export const GlobalStylesWrapper = () => {
|
|
279
268
|
return jsx(Global, {
|
|
280
|
-
styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(),
|
|
269
|
+
styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
|
|
281
270
|
});
|
|
282
271
|
};
|
|
@@ -209,7 +209,7 @@ export var moveNode = function moveNode(api) {
|
|
|
209
209
|
mappedTo = tr.mapping.map(to);
|
|
210
210
|
tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
|
|
211
211
|
}
|
|
212
|
-
tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP
|
|
212
|
+
tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : selectNode(tr, mappedTo, node.type.name);
|
|
213
213
|
tr.setMeta(key, {
|
|
214
214
|
nodeMoved: true
|
|
215
215
|
});
|
|
@@ -31,9 +31,8 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
|
|
|
31
31
|
var key = uuid();
|
|
32
32
|
return Decoration.widget(pos, function (view, getPosUnsafe) {
|
|
33
33
|
var element = document.createElement('span');
|
|
34
|
-
//
|
|
35
|
-
|
|
36
|
-
element.style.display = fg('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
|
|
34
|
+
// inline decoration causes focus issues when refocusing Editor into first line
|
|
35
|
+
element.style.display = 'block';
|
|
37
36
|
element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
|
|
38
37
|
element.setAttribute('data-blocks-drag-handle-container', 'true');
|
|
39
38
|
element.setAttribute('data-blocks-drag-handle-key', key);
|
|
@@ -67,7 +67,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
|
|
|
67
67
|
// We want to exlude handles from showing for wrapped nodes
|
|
68
68
|
// TODO We should be able remove these check if we decided to
|
|
69
69
|
// go we not decoration for wrapped image solution.
|
|
70
|
-
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')
|
|
70
|
+
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
|
|
71
71
|
return false;
|
|
72
72
|
}
|
|
73
73
|
var parentRootElement = rootElement.parentElement;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
|
|
2
2
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
export var getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
|
|
6
5
|
var $startPos = tr.doc.resolve(start);
|
|
7
6
|
// To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
|
|
@@ -76,7 +75,7 @@ export var setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(
|
|
|
76
75
|
var selection;
|
|
77
76
|
// decisionList node is not selectable, but we want to select the whole node not just text
|
|
78
77
|
// blockQuote is selectable, but we want to set cursor at the inline end Pos instead of the gap cursor as this causes jittering post drop
|
|
79
|
-
if (isNodeSelection &&
|
|
78
|
+
if (isNodeSelection && node.type.name !== 'blockquote' || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
|
|
80
79
|
selection = new GapCursorSelection(tr.doc.resolve(start + node.nodeSize), Side.RIGHT);
|
|
81
80
|
} else {
|
|
82
81
|
var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
|
|
@@ -9,7 +9,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
|
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
10
|
import { css, jsx } from '@emotion/react';
|
|
11
11
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
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 { layers } from '@atlaskit/theme/constants';
|
|
@@ -187,7 +186,7 @@ export var DropTarget = function DropTarget(_ref3) {
|
|
|
187
186
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
188
187
|
dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle,
|
|
189
188
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
190
|
-
|
|
189
|
+
dropTargetMarginTopStyles]
|
|
191
190
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
192
191
|
,
|
|
193
192
|
style: dynamicStyle,
|
|
@@ -97,13 +97,8 @@ var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
|
|
|
97
97
|
var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
|
|
98
98
|
var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
|
|
99
99
|
var dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
|
|
100
|
-
var withInlineNodeStyleSelectors = [".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithPlaceholder, ")")].join(', ');
|
|
101
100
|
var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
|
|
102
|
-
var
|
|
103
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
104
|
-
display: 'none !important'
|
|
105
|
-
}));
|
|
106
|
-
var withInlineNodeStyleWithChromeFixSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
|
|
101
|
+
var withInlineNodeStyleSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
|
|
107
102
|
var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
|
|
108
103
|
|
|
109
104
|
/**
|
|
@@ -111,7 +106,7 @@ var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":firs
|
|
|
111
106
|
* Otherwise it might break composition input for Chrome
|
|
112
107
|
* https://product-fabric.atlassian.net/browse/ED-24136
|
|
113
108
|
*/
|
|
114
|
-
var
|
|
109
|
+
var withInlineNodeStyle = css(_defineProperty({}, withInlineNodeStyleSelectors, {
|
|
115
110
|
transform: 'scale(0)'
|
|
116
111
|
}));
|
|
117
112
|
var legacyBreakoutWideLayoutStyle = css({
|
|
@@ -182,9 +177,6 @@ var headingWithIndentationInLayoutStyleFix = css(_defineProperty({}, "".concat(d
|
|
|
182
177
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
183
178
|
marginTop: '0 !important'
|
|
184
179
|
}));
|
|
185
|
-
var getTextNodeStyle = function getTextNodeStyle() {
|
|
186
|
-
return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
|
|
187
|
-
};
|
|
188
180
|
var withRelativePosStyle = css({
|
|
189
181
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
190
182
|
'.ProseMirror': _defineProperty({}, "&& ".concat(dragHandlerAnchorSelector), {
|
|
@@ -223,6 +215,6 @@ var blockCardWithoutLayout = css({
|
|
|
223
215
|
});
|
|
224
216
|
export var GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
225
217
|
return jsx(Global, {
|
|
226
|
-
styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(),
|
|
218
|
+
styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
|
|
227
219
|
});
|
|
228
220
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "2.17.
|
|
3
|
+
"version": "2.17.2",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -115,30 +115,18 @@
|
|
|
115
115
|
"platform_editor_element_drag_and_drop_ed_23873": {
|
|
116
116
|
"type": "boolean"
|
|
117
117
|
},
|
|
118
|
-
"platform_editor_element_controls_chrome_input_fix": {
|
|
119
|
-
"type": "boolean"
|
|
120
|
-
},
|
|
121
118
|
"platform_editor_element_drag_and_drop_ed_24321": {
|
|
122
119
|
"type": "boolean"
|
|
123
120
|
},
|
|
124
|
-
"platform_editor_element_drag_and_drop_ed_24227": {
|
|
125
|
-
"type": "boolean"
|
|
126
|
-
},
|
|
127
121
|
"platform_editor_element_drag_and_drop_debug": {
|
|
128
122
|
"type": "boolean"
|
|
129
123
|
},
|
|
130
124
|
"platform_editor_element_drag_and_drop_ed_24885": {
|
|
131
125
|
"type": "boolean"
|
|
132
126
|
},
|
|
133
|
-
"platform_editor_element_dnd_nested_fix_patch_2": {
|
|
134
|
-
"type": "boolean"
|
|
135
|
-
},
|
|
136
127
|
"platform_editor_element_dnd_nested_fix_patch_3": {
|
|
137
128
|
"type": "boolean"
|
|
138
129
|
},
|
|
139
|
-
"platform_editor_element_dnd_nested_fix_patch_4": {
|
|
140
|
-
"type": "boolean"
|
|
141
|
-
},
|
|
142
130
|
"platform_editor_element_dnd_nested_fix_patch_5": {
|
|
143
131
|
"type": "boolean"
|
|
144
132
|
},
|