@atlaskit/editor-plugin-block-controls 4.0.3 → 4.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/blockControlsPlugin.js +4 -6
- package/dist/cjs/pm-plugins/decorations-drag-handle.js +1 -1
- package/dist/cjs/pm-plugins/decorations-quick-insert-button.js +13 -31
- package/dist/cjs/pm-plugins/utils/getSelection.js +2 -2
- package/dist/cjs/ui/global-styles.js +1 -1
- package/dist/cjs/ui/quick-insert-button.js +4 -19
- package/dist/es2019/blockControlsPlugin.js +4 -6
- package/dist/es2019/pm-plugins/decorations-drag-handle.js +1 -1
- package/dist/es2019/pm-plugins/decorations-quick-insert-button.js +12 -28
- package/dist/es2019/pm-plugins/utils/getSelection.js +2 -2
- package/dist/es2019/ui/global-styles.js +1 -1
- package/dist/es2019/ui/quick-insert-button.js +4 -19
- package/dist/esm/blockControlsPlugin.js +4 -6
- package/dist/esm/pm-plugins/decorations-drag-handle.js +1 -1
- package/dist/esm/pm-plugins/decorations-quick-insert-button.js +14 -32
- package/dist/esm/pm-plugins/utils/getSelection.js +2 -2
- package/dist/esm/ui/global-styles.js +1 -1
- package/dist/esm/ui/quick-insert-button.js +4 -19
- package/package.json +5 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 4.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#181011](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181011)
|
|
8
|
+
[`bf9c278fde34d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf9c278fde34d) -
|
|
9
|
+
[ED-27887] Clean up platform_editor_controls_widget_visibility
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 4.0.3
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -36,12 +36,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
36
36
|
}
|
|
37
37
|
}];
|
|
38
38
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
});
|
|
44
|
-
}
|
|
39
|
+
pmPlugins.push({
|
|
40
|
+
name: 'blockControlsInteractionTrackingPlugin',
|
|
41
|
+
plugin: _pmPlugin.createInteractionTrackingPlugin
|
|
42
|
+
});
|
|
45
43
|
pmPlugins.push({
|
|
46
44
|
name: 'firstNodeDec',
|
|
47
45
|
plugin: _firstNodeDecPlugin.firstNodeDecPlugin
|
|
@@ -137,7 +137,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
|
|
|
137
137
|
// key,
|
|
138
138
|
// );
|
|
139
139
|
|
|
140
|
-
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
140
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
141
141
|
_reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandleWithVisibility, {
|
|
142
142
|
view: view,
|
|
143
143
|
api: api,
|
|
@@ -88,37 +88,19 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
|
|
|
88
88
|
element.appendChild(vanillaElement);
|
|
89
89
|
return element;
|
|
90
90
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
anchorRectCache: anchorRectCache
|
|
105
|
-
});
|
|
106
|
-
}, element, key);
|
|
107
|
-
} else {
|
|
108
|
-
nodeViewPortalProviderAPI.render(function () {
|
|
109
|
-
return /*#__PURE__*/(0, _react.createElement)(_quickInsertButton.TypeAheadControl, {
|
|
110
|
-
api: api,
|
|
111
|
-
getPos: getPos,
|
|
112
|
-
formatMessage: formatMessage,
|
|
113
|
-
view: view,
|
|
114
|
-
nodeType: nodeType,
|
|
115
|
-
anchorName: anchorName,
|
|
116
|
-
rootAnchorName: rootAnchorName,
|
|
117
|
-
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
|
|
118
|
-
anchorRectCache: anchorRectCache
|
|
119
|
-
});
|
|
120
|
-
}, element, key);
|
|
121
|
-
}
|
|
91
|
+
nodeViewPortalProviderAPI.render(function () {
|
|
92
|
+
return /*#__PURE__*/(0, _react.createElement)(_quickInsertButton.QuickInsertWithVisibility, {
|
|
93
|
+
api: api,
|
|
94
|
+
getPos: getPos,
|
|
95
|
+
formatMessage: formatMessage,
|
|
96
|
+
view: view,
|
|
97
|
+
nodeType: nodeType,
|
|
98
|
+
anchorName: anchorName,
|
|
99
|
+
rootAnchorName: rootAnchorName,
|
|
100
|
+
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
|
|
101
|
+
anchorRectCache: anchorRectCache
|
|
102
|
+
});
|
|
103
|
+
}, element, key);
|
|
122
104
|
return element;
|
|
123
105
|
}, widgetSpec);
|
|
124
106
|
};
|
|
@@ -103,7 +103,7 @@ var newGetSelection = function newGetSelection(tr, start) {
|
|
|
103
103
|
return new _state.TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
|
|
104
104
|
};
|
|
105
105
|
var getSelection = exports.getSelection = function getSelection(tr, start) {
|
|
106
|
-
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
106
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
107
107
|
return newGetSelection(tr, start);
|
|
108
108
|
}
|
|
109
109
|
return oldGetSelection(tr, start);
|
|
@@ -134,7 +134,7 @@ var setCursorPositionAtMovedNode = exports.setCursorPositionAtMovedNode = functi
|
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
// this is a fix for empty paragraph selection - can safely use start position as the paragraph is empty
|
|
137
|
-
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
137
|
+
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
138
138
|
var _selection = new _state.TextSelection(tr.doc.resolve(start));
|
|
139
139
|
tr.setSelection(_selection);
|
|
140
140
|
return tr;
|
|
@@ -307,6 +307,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
|
|
|
307
307
|
disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !(0, _platformFeatureFlags.fg)('platform_editor_block_controls_perf_opt_patch_1')
|
|
308
308
|
});
|
|
309
309
|
return (0, _react.jsx)(_react.Global, {
|
|
310
|
-
styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
310
|
+
styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
|
|
311
311
|
});
|
|
312
312
|
};
|
|
@@ -19,7 +19,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
19
19
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
20
20
|
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
21
21
|
var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
|
|
22
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
23
22
|
var _primitives = require("@atlaskit/primitives");
|
|
24
23
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
25
24
|
var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
|
|
@@ -36,15 +35,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
36
35
|
* @jsx jsx
|
|
37
36
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
38
37
|
var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
|
|
39
|
-
var disabledStyles = (0, _primitives.xcss)({
|
|
40
|
-
pointerEvents: 'none',
|
|
41
|
-
':hover': {
|
|
42
|
-
backgroundColor: 'color.background.disabled'
|
|
43
|
-
},
|
|
44
|
-
':active': {
|
|
45
|
-
backgroundColor: 'color.background.disabled'
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
38
|
var stickyButtonStyles = (0, _primitives.xcss)({
|
|
49
39
|
top: '0',
|
|
50
40
|
position: 'sticky',
|
|
@@ -74,9 +64,6 @@ var containerStaticStyles = (0, _primitives.xcss)({
|
|
|
74
64
|
position: 'absolute',
|
|
75
65
|
zIndex: 'card'
|
|
76
66
|
});
|
|
77
|
-
var disabledContainerStyles = (0, _primitives.xcss)({
|
|
78
|
-
cursor: 'not-allowed'
|
|
79
|
-
});
|
|
80
67
|
var tooltipContainerStyles = (0, _react2.css)({
|
|
81
68
|
top: '8px',
|
|
82
69
|
bottom: '-8px',
|
|
@@ -114,7 +101,6 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
114
101
|
rootNodeType = _ref.rootNodeType,
|
|
115
102
|
anchorRectCache = _ref.anchorRectCache;
|
|
116
103
|
var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
|
|
117
|
-
var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
|
|
118
104
|
var _useState = (0, _react.useState)({
|
|
119
105
|
display: 'none'
|
|
120
106
|
}),
|
|
@@ -290,13 +276,12 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
290
276
|
testId: "editor-quick-insert-button",
|
|
291
277
|
type: "button",
|
|
292
278
|
"aria-label": formatMessage(_messages.blockControlsMessages.insert),
|
|
293
|
-
xcss: [stickyButtonStyles
|
|
279
|
+
xcss: [stickyButtonStyles],
|
|
294
280
|
onClick: handleQuickInsert,
|
|
295
|
-
onMouseDown: handleMouseDown
|
|
296
|
-
isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && isTypeAheadOpen
|
|
281
|
+
onMouseDown: handleMouseDown
|
|
297
282
|
}, (0, _react2.jsx)(_add.default, {
|
|
298
283
|
label: "add",
|
|
299
|
-
color:
|
|
284
|
+
color: "var(--ds-icon-subtle, #626F86)",
|
|
300
285
|
size: "small"
|
|
301
286
|
})));
|
|
302
287
|
};
|
|
@@ -304,7 +289,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
304
289
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
305
290
|
, {
|
|
306
291
|
style: positionStyles,
|
|
307
|
-
xcss: [containerStaticStyles
|
|
292
|
+
xcss: [containerStaticStyles]
|
|
308
293
|
}, (0, _react2.jsx)("span", {
|
|
309
294
|
css: [tooltipContainerStyles, tooltipContainerStylesStickyHeader, tooltipContainerStylesStickyHeaderWithMarksFix]
|
|
310
295
|
}, tooltipPressable()));
|
|
@@ -25,12 +25,10 @@ export const blockControlsPlugin = ({
|
|
|
25
25
|
}) => createPlugin(api, getIntl, nodeViewPortalProviderAPI)
|
|
26
26
|
}];
|
|
27
27
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
});
|
|
33
|
-
}
|
|
28
|
+
pmPlugins.push({
|
|
29
|
+
name: 'blockControlsInteractionTrackingPlugin',
|
|
30
|
+
plugin: createInteractionTrackingPlugin
|
|
31
|
+
});
|
|
34
32
|
pmPlugins.push({
|
|
35
33
|
name: 'firstNodeDec',
|
|
36
34
|
plugin: firstNodeDecPlugin
|
|
@@ -129,7 +129,7 @@ export const dragHandleDecoration = ({
|
|
|
129
129
|
// key,
|
|
130
130
|
// );
|
|
131
131
|
|
|
132
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
132
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
133
133
|
ReactDOM.render( /*#__PURE__*/createElement(DragHandleWithVisibility, {
|
|
134
134
|
view,
|
|
135
135
|
api,
|
|
@@ -3,7 +3,7 @@ import uuid from 'uuid';
|
|
|
3
3
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
|
-
import { QuickInsertWithVisibility
|
|
6
|
+
import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
|
|
7
7
|
import { getActiveBlockMarks } from './utils/marks';
|
|
8
8
|
import { createVanillaButton } from './vanilla-quick-insert';
|
|
9
9
|
const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
|
|
@@ -80,33 +80,17 @@ export const quickInsertButtonDecoration = ({
|
|
|
80
80
|
element.appendChild(vanillaElement);
|
|
81
81
|
return element;
|
|
82
82
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
|
|
95
|
-
anchorRectCache
|
|
96
|
-
}), element, key);
|
|
97
|
-
} else {
|
|
98
|
-
nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(TypeAheadControl, {
|
|
99
|
-
api,
|
|
100
|
-
getPos,
|
|
101
|
-
formatMessage,
|
|
102
|
-
view,
|
|
103
|
-
nodeType,
|
|
104
|
-
anchorName,
|
|
105
|
-
rootAnchorName,
|
|
106
|
-
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
|
|
107
|
-
anchorRectCache
|
|
108
|
-
}), element, key);
|
|
109
|
-
}
|
|
83
|
+
nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(QuickInsertWithVisibility, {
|
|
84
|
+
api,
|
|
85
|
+
getPos,
|
|
86
|
+
formatMessage,
|
|
87
|
+
view,
|
|
88
|
+
nodeType,
|
|
89
|
+
anchorName,
|
|
90
|
+
rootAnchorName,
|
|
91
|
+
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
|
|
92
|
+
anchorRectCache
|
|
93
|
+
}), element, key);
|
|
110
94
|
return element;
|
|
111
95
|
}, widgetSpec);
|
|
112
96
|
};
|
|
@@ -99,7 +99,7 @@ const newGetSelection = (tr, start) => {
|
|
|
99
99
|
return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
|
|
100
100
|
};
|
|
101
101
|
export const getSelection = (tr, start) => {
|
|
102
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
102
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
103
103
|
return newGetSelection(tr, start);
|
|
104
104
|
}
|
|
105
105
|
return oldGetSelection(tr, start);
|
|
@@ -130,7 +130,7 @@ export const setCursorPositionAtMovedNode = (tr, start) => {
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
// this is a fix for empty paragraph selection - can safely use start position as the paragraph is empty
|
|
133
|
-
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && editorExperiment('platform_editor_controls', 'variant1')
|
|
133
|
+
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
134
134
|
const selection = new TextSelection(tr.doc.resolve(start));
|
|
135
135
|
tr.setSelection(selection);
|
|
136
136
|
return tr;
|
|
@@ -340,6 +340,6 @@ export const GlobalStylesWrapper = ({
|
|
|
340
340
|
disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !fg('platform_editor_block_controls_perf_opt_patch_1')
|
|
341
341
|
});
|
|
342
342
|
return jsx(Global, {
|
|
343
|
-
styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, editorExperiment('platform_editor_controls', 'variant1')
|
|
343
|
+
styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
|
|
344
344
|
});
|
|
345
345
|
};
|
|
@@ -16,7 +16,6 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
16
16
|
import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
17
17
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
18
18
|
import AddIcon from '@atlaskit/icon/core/add';
|
|
19
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
20
19
|
import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
21
20
|
import Tooltip from '@atlaskit/tooltip';
|
|
22
21
|
import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
|
|
@@ -27,15 +26,6 @@ import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectio
|
|
|
27
26
|
import { createNewLine } from './utils/editor-commands';
|
|
28
27
|
import { VisibilityContainer } from './visibility-container';
|
|
29
28
|
const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
|
|
30
|
-
const disabledStyles = xcss({
|
|
31
|
-
pointerEvents: 'none',
|
|
32
|
-
':hover': {
|
|
33
|
-
backgroundColor: 'color.background.disabled'
|
|
34
|
-
},
|
|
35
|
-
':active': {
|
|
36
|
-
backgroundColor: 'color.background.disabled'
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
29
|
const stickyButtonStyles = xcss({
|
|
40
30
|
top: '0',
|
|
41
31
|
position: 'sticky',
|
|
@@ -65,9 +55,6 @@ const containerStaticStyles = xcss({
|
|
|
65
55
|
position: 'absolute',
|
|
66
56
|
zIndex: 'card'
|
|
67
57
|
});
|
|
68
|
-
const disabledContainerStyles = xcss({
|
|
69
|
-
cursor: 'not-allowed'
|
|
70
|
-
});
|
|
71
58
|
const tooltipContainerStyles = css({
|
|
72
59
|
top: '8px',
|
|
73
60
|
bottom: '-8px',
|
|
@@ -106,7 +93,6 @@ export const TypeAheadControl = ({
|
|
|
106
93
|
anchorRectCache
|
|
107
94
|
}) => {
|
|
108
95
|
const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
|
|
109
|
-
const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
|
|
110
96
|
const [positionStyles, setPositionStyles] = useState({
|
|
111
97
|
display: 'none'
|
|
112
98
|
});
|
|
@@ -285,20 +271,19 @@ export const TypeAheadControl = ({
|
|
|
285
271
|
testId: "editor-quick-insert-button",
|
|
286
272
|
type: "button",
|
|
287
273
|
"aria-label": formatMessage(messages.insert),
|
|
288
|
-
xcss: [stickyButtonStyles
|
|
274
|
+
xcss: [stickyButtonStyles],
|
|
289
275
|
onClick: handleQuickInsert,
|
|
290
|
-
onMouseDown: handleMouseDown
|
|
291
|
-
isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
|
|
276
|
+
onMouseDown: handleMouseDown
|
|
292
277
|
}, jsx(AddIcon, {
|
|
293
278
|
label: "add",
|
|
294
|
-
color:
|
|
279
|
+
color: "var(--ds-icon-subtle, #626F86)",
|
|
295
280
|
size: "small"
|
|
296
281
|
})));
|
|
297
282
|
return jsx(Box
|
|
298
283
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
299
284
|
, {
|
|
300
285
|
style: positionStyles,
|
|
301
|
-
xcss: [containerStaticStyles
|
|
286
|
+
xcss: [containerStaticStyles]
|
|
302
287
|
}, jsx("span", {
|
|
303
288
|
css: [tooltipContainerStyles, tooltipContainerStylesStickyHeader, tooltipContainerStylesStickyHeaderWithMarksFix]
|
|
304
289
|
}, tooltipPressable()));
|
|
@@ -29,12 +29,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}];
|
|
31
31
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
});
|
|
37
|
-
}
|
|
32
|
+
pmPlugins.push({
|
|
33
|
+
name: 'blockControlsInteractionTrackingPlugin',
|
|
34
|
+
plugin: createInteractionTrackingPlugin
|
|
35
|
+
});
|
|
38
36
|
pmPlugins.push({
|
|
39
37
|
name: 'firstNodeDec',
|
|
40
38
|
plugin: firstNodeDecPlugin
|
|
@@ -130,7 +130,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
|
|
|
130
130
|
// key,
|
|
131
131
|
// );
|
|
132
132
|
|
|
133
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
133
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
134
134
|
ReactDOM.render( /*#__PURE__*/createElement(DragHandleWithVisibility, {
|
|
135
135
|
view: view,
|
|
136
136
|
api: api,
|
|
@@ -3,7 +3,7 @@ import uuid from 'uuid';
|
|
|
3
3
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
|
-
import { QuickInsertWithVisibility
|
|
6
|
+
import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
|
|
7
7
|
import { getActiveBlockMarks } from './utils/marks';
|
|
8
8
|
import { createVanillaButton } from './vanilla-quick-insert';
|
|
9
9
|
var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
|
|
@@ -81,37 +81,19 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
|
|
|
81
81
|
element.appendChild(vanillaElement);
|
|
82
82
|
return element;
|
|
83
83
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
anchorRectCache: anchorRectCache
|
|
98
|
-
});
|
|
99
|
-
}, element, key);
|
|
100
|
-
} else {
|
|
101
|
-
nodeViewPortalProviderAPI.render(function () {
|
|
102
|
-
return /*#__PURE__*/createElement(TypeAheadControl, {
|
|
103
|
-
api: api,
|
|
104
|
-
getPos: getPos,
|
|
105
|
-
formatMessage: formatMessage,
|
|
106
|
-
view: view,
|
|
107
|
-
nodeType: nodeType,
|
|
108
|
-
anchorName: anchorName,
|
|
109
|
-
rootAnchorName: rootAnchorName,
|
|
110
|
-
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
|
|
111
|
-
anchorRectCache: anchorRectCache
|
|
112
|
-
});
|
|
113
|
-
}, element, key);
|
|
114
|
-
}
|
|
84
|
+
nodeViewPortalProviderAPI.render(function () {
|
|
85
|
+
return /*#__PURE__*/createElement(QuickInsertWithVisibility, {
|
|
86
|
+
api: api,
|
|
87
|
+
getPos: getPos,
|
|
88
|
+
formatMessage: formatMessage,
|
|
89
|
+
view: view,
|
|
90
|
+
nodeType: nodeType,
|
|
91
|
+
anchorName: anchorName,
|
|
92
|
+
rootAnchorName: rootAnchorName,
|
|
93
|
+
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
|
|
94
|
+
anchorRectCache: anchorRectCache
|
|
95
|
+
});
|
|
96
|
+
}, element, key);
|
|
115
97
|
return element;
|
|
116
98
|
}, widgetSpec);
|
|
117
99
|
};
|
|
@@ -97,7 +97,7 @@ var newGetSelection = function newGetSelection(tr, start) {
|
|
|
97
97
|
return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
|
|
98
98
|
};
|
|
99
99
|
export var getSelection = function getSelection(tr, start) {
|
|
100
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
100
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
101
101
|
return newGetSelection(tr, start);
|
|
102
102
|
}
|
|
103
103
|
return oldGetSelection(tr, start);
|
|
@@ -128,7 +128,7 @@ export var setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(
|
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
// this is a fix for empty paragraph selection - can safely use start position as the paragraph is empty
|
|
131
|
-
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && editorExperiment('platform_editor_controls', 'variant1')
|
|
131
|
+
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
132
132
|
var _selection = new TextSelection(tr.doc.resolve(start));
|
|
133
133
|
tr.setSelection(_selection);
|
|
134
134
|
return tr;
|
|
@@ -300,6 +300,6 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
|
|
|
300
300
|
disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !fg('platform_editor_block_controls_perf_opt_patch_1')
|
|
301
301
|
});
|
|
302
302
|
return jsx(Global, {
|
|
303
|
-
styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, editorExperiment('platform_editor_controls', 'variant1')
|
|
303
|
+
styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
|
|
304
304
|
});
|
|
305
305
|
};
|
|
@@ -20,7 +20,6 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
20
20
|
import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
21
21
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
22
22
|
import AddIcon from '@atlaskit/icon/core/add';
|
|
23
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
24
23
|
import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
25
24
|
import Tooltip from '@atlaskit/tooltip';
|
|
26
25
|
import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
|
|
@@ -31,15 +30,6 @@ import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectio
|
|
|
31
30
|
import { createNewLine } from './utils/editor-commands';
|
|
32
31
|
import { VisibilityContainer } from './visibility-container';
|
|
33
32
|
var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
|
|
34
|
-
var disabledStyles = xcss({
|
|
35
|
-
pointerEvents: 'none',
|
|
36
|
-
':hover': {
|
|
37
|
-
backgroundColor: 'color.background.disabled'
|
|
38
|
-
},
|
|
39
|
-
':active': {
|
|
40
|
-
backgroundColor: 'color.background.disabled'
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
33
|
var stickyButtonStyles = xcss({
|
|
44
34
|
top: '0',
|
|
45
35
|
position: 'sticky',
|
|
@@ -69,9 +59,6 @@ var containerStaticStyles = xcss({
|
|
|
69
59
|
position: 'absolute',
|
|
70
60
|
zIndex: 'card'
|
|
71
61
|
});
|
|
72
|
-
var disabledContainerStyles = xcss({
|
|
73
|
-
cursor: 'not-allowed'
|
|
74
|
-
});
|
|
75
62
|
var tooltipContainerStyles = css({
|
|
76
63
|
top: '8px',
|
|
77
64
|
bottom: '-8px',
|
|
@@ -109,7 +96,6 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
109
96
|
rootNodeType = _ref.rootNodeType,
|
|
110
97
|
anchorRectCache = _ref.anchorRectCache;
|
|
111
98
|
var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
|
|
112
|
-
var isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
|
|
113
99
|
var _useState = useState({
|
|
114
100
|
display: 'none'
|
|
115
101
|
}),
|
|
@@ -285,13 +271,12 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
285
271
|
testId: "editor-quick-insert-button",
|
|
286
272
|
type: "button",
|
|
287
273
|
"aria-label": formatMessage(messages.insert),
|
|
288
|
-
xcss: [stickyButtonStyles
|
|
274
|
+
xcss: [stickyButtonStyles],
|
|
289
275
|
onClick: handleQuickInsert,
|
|
290
|
-
onMouseDown: handleMouseDown
|
|
291
|
-
isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
|
|
276
|
+
onMouseDown: handleMouseDown
|
|
292
277
|
}, jsx(AddIcon, {
|
|
293
278
|
label: "add",
|
|
294
|
-
color:
|
|
279
|
+
color: "var(--ds-icon-subtle, #626F86)",
|
|
295
280
|
size: "small"
|
|
296
281
|
})));
|
|
297
282
|
};
|
|
@@ -299,7 +284,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
299
284
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
300
285
|
, {
|
|
301
286
|
style: positionStyles,
|
|
302
|
-
xcss: [containerStaticStyles
|
|
287
|
+
xcss: [containerStaticStyles]
|
|
303
288
|
}, jsx("span", {
|
|
304
289
|
css: [tooltipContainerStyles, tooltipContainerStylesStickyHeader, tooltipContainerStylesStickyHeaderWithMarksFix]
|
|
305
290
|
}, tooltipPressable()));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.4",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
".": "./src/index.ts"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@atlaskit/adf-schema": "^
|
|
34
|
+
"@atlaskit/adf-schema": "^49.0.6",
|
|
35
35
|
"@atlaskit/editor-plugin-accessibility-utils": "^3.0.0",
|
|
36
36
|
"@atlaskit/editor-plugin-analytics": "^3.0.0",
|
|
37
37
|
"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
|
|
55
55
|
"@atlaskit/primitives": "^14.10.0",
|
|
56
56
|
"@atlaskit/theme": "^19.0.0",
|
|
57
|
-
"@atlaskit/tmp-editor-statsig": "^9.
|
|
58
|
-
"@atlaskit/tokens": "^5.
|
|
57
|
+
"@atlaskit/tmp-editor-statsig": "^9.6.0",
|
|
58
|
+
"@atlaskit/tokens": "^5.5.0",
|
|
59
59
|
"@atlaskit/tooltip": "^20.3.0",
|
|
60
60
|
"@babel/runtime": "^7.0.0",
|
|
61
61
|
"@emotion/react": "^11.7.1",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"uuid": "^3.1.0"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
|
-
"@atlaskit/editor-common": "^107.
|
|
69
|
+
"@atlaskit/editor-common": "^107.8.0",
|
|
70
70
|
"react": "^18.2.0",
|
|
71
71
|
"react-dom": "^18.2.0",
|
|
72
72
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -152,9 +152,6 @@
|
|
|
152
152
|
"platform_editor_fix_safari_cursor_hidden_empty": {
|
|
153
153
|
"type": "boolean"
|
|
154
154
|
},
|
|
155
|
-
"platform_editor_controls_widget_visibility": {
|
|
156
|
-
"type": "boolean"
|
|
157
|
-
},
|
|
158
155
|
"platform_editor_drag_and_drop_perf_analytics": {
|
|
159
156
|
"type": "boolean"
|
|
160
157
|
},
|