@atlaskit/editor-plugin-selection-toolbar 2.1.1 → 2.1.3
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 +17 -0
- package/dist/cjs/selectionToolbarPlugin.js +10 -3
- package/dist/cjs/ui/overflow-toolbar-config.js +31 -28
- package/dist/es2019/selectionToolbarPlugin.js +11 -4
- package/dist/es2019/ui/overflow-toolbar-config.js +31 -28
- package/dist/esm/selectionToolbarPlugin.js +11 -4
- package/dist/esm/ui/overflow-toolbar-config.js +31 -28
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-selection-toolbar
|
|
2
2
|
|
|
3
|
+
## 2.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#126837](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126837)
|
|
8
|
+
[`3f513ff6dac97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f513ff6dac97) -
|
|
9
|
+
[ux] Displays Text Formatting toolbar on CellSelection.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 2.1.2
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#128803](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128803)
|
|
17
|
+
[`bee199a74385f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bee199a74385f) -
|
|
18
|
+
[ux] Keeps docking options in the overlow menu even when the toolbar is docked to top.
|
|
19
|
+
|
|
3
20
|
## 2.1.1
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -154,10 +154,12 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
154
154
|
selectionStable = _ref3.selectionStable,
|
|
155
155
|
hide = _ref3.hide,
|
|
156
156
|
toolbarDocking = _ref3.toolbarDocking;
|
|
157
|
+
var isCellSelection = ('$anchorCell' in state.selection);
|
|
157
158
|
if (state.selection.empty || !selectionStable || hide || state.selection instanceof _state.NodeSelection ||
|
|
158
159
|
// $anchorCell is only available in CellSelection, this check is to
|
|
159
160
|
// avoid importing CellSelection from @atlaskit/editor-tables
|
|
160
|
-
|
|
161
|
+
isCellSelection && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
|
|
162
|
+
) {
|
|
161
163
|
// If there is no active selection, or the selection is not stable, or the selection is a node selection,
|
|
162
164
|
// do not show the toolbar.
|
|
163
165
|
return;
|
|
@@ -225,9 +227,14 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
225
227
|
toolbarDocking: toolbarDocking
|
|
226
228
|
})));
|
|
227
229
|
}
|
|
228
|
-
var
|
|
230
|
+
var onPositionCalculated;
|
|
229
231
|
var toolbarTitle = 'Selection toolbar';
|
|
230
|
-
|
|
232
|
+
if (isCellSelection && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
233
|
+
onPositionCalculated = (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle);
|
|
234
|
+
} else {
|
|
235
|
+
var calcToolbarPosition = config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
|
|
236
|
+
onPositionCalculated = calcToolbarPosition(toolbarTitle);
|
|
237
|
+
}
|
|
231
238
|
var nodeType = getSelectionNodeTypes(state);
|
|
232
239
|
return {
|
|
233
240
|
title: 'Selection toolbar',
|
|
@@ -46,34 +46,37 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
|
|
|
46
46
|
label: ""
|
|
47
47
|
})
|
|
48
48
|
}];
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
49
|
+
var isDockedToTop = toolbarDocking === 'top';
|
|
50
|
+
dropdownOptions.push({
|
|
51
|
+
type: 'overflow-dropdown-heading',
|
|
52
|
+
title: 'Toolbar appears'
|
|
53
|
+
}, {
|
|
54
|
+
title: 'In-line with text',
|
|
55
|
+
onClick: function onClick() {
|
|
56
|
+
var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
|
|
57
|
+
return (_api$selectionToolbar = api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
|
|
58
|
+
},
|
|
59
|
+
icon: (0, _react.jsx)(_ContextualToolbarIcon.ContextualToolbarIcon, {
|
|
60
|
+
label: "Contextual toolbar"
|
|
61
|
+
}),
|
|
62
|
+
selected: !isDockedToTop,
|
|
63
|
+
elemAfter: !isDockedToTop ? (0, _react.jsx)(_checkMark.default, {
|
|
64
|
+
label: ""
|
|
65
|
+
}) : undefined
|
|
66
|
+
}, {
|
|
67
|
+
title: 'Fixed at top',
|
|
68
|
+
onClick: function onClick() {
|
|
69
|
+
var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
|
|
70
|
+
return (_api$selectionToolbar4 = api === null || api === void 0 || (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 || (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
|
|
71
|
+
},
|
|
72
|
+
icon: (0, _react.jsx)(_FixedToolbarIcon.FixedToolbarIcon, {
|
|
73
|
+
label: "Fixed toolbar"
|
|
74
|
+
}),
|
|
75
|
+
selected: isDockedToTop,
|
|
76
|
+
elemAfter: isDockedToTop ? (0, _react.jsx)(_checkMark.default, {
|
|
77
|
+
label: ""
|
|
78
|
+
}) : undefined
|
|
79
|
+
});
|
|
77
80
|
return [{
|
|
78
81
|
type: 'separator',
|
|
79
82
|
fullHeight: true
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { bind } from 'bind-event-listener';
|
|
3
3
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
4
|
-
import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
|
|
4
|
+
import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
|
|
5
5
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
6
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
7
|
import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
|
|
@@ -149,10 +149,12 @@ export const selectionToolbarPlugin = ({
|
|
|
149
149
|
hide,
|
|
150
150
|
toolbarDocking
|
|
151
151
|
} = selectionToolbarPluginKey.getState(state);
|
|
152
|
+
const isCellSelection = ('$anchorCell' in state.selection);
|
|
152
153
|
if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
|
|
153
154
|
// $anchorCell is only available in CellSelection, this check is to
|
|
154
155
|
// avoid importing CellSelection from @atlaskit/editor-tables
|
|
155
|
-
'
|
|
156
|
+
isCellSelection && editorExperiment('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
|
|
157
|
+
) {
|
|
156
158
|
// If there is no active selection, or the selection is not stable, or the selection is a node selection,
|
|
157
159
|
// do not show the toolbar.
|
|
158
160
|
return;
|
|
@@ -216,9 +218,14 @@ export const selectionToolbarPlugin = ({
|
|
|
216
218
|
toolbarDocking
|
|
217
219
|
}));
|
|
218
220
|
}
|
|
219
|
-
|
|
221
|
+
let onPositionCalculated;
|
|
220
222
|
const toolbarTitle = 'Selection toolbar';
|
|
221
|
-
|
|
223
|
+
if (isCellSelection && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
224
|
+
onPositionCalculated = calculateToolbarPositionOnCellSelection(toolbarTitle);
|
|
225
|
+
} else {
|
|
226
|
+
const calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
|
|
227
|
+
onPositionCalculated = calcToolbarPosition(toolbarTitle);
|
|
228
|
+
}
|
|
222
229
|
const nodeType = getSelectionNodeTypes(state);
|
|
223
230
|
return {
|
|
224
231
|
title: 'Selection toolbar',
|
|
@@ -39,34 +39,37 @@ export const getOverflowFloatingToolbarConfig = ({
|
|
|
39
39
|
label: ""
|
|
40
40
|
})
|
|
41
41
|
}];
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
42
|
+
const isDockedToTop = toolbarDocking === 'top';
|
|
43
|
+
dropdownOptions.push({
|
|
44
|
+
type: 'overflow-dropdown-heading',
|
|
45
|
+
title: 'Toolbar appears'
|
|
46
|
+
}, {
|
|
47
|
+
title: 'In-line with text',
|
|
48
|
+
onClick: () => {
|
|
49
|
+
var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
|
|
50
|
+
return (_api$selectionToolbar = api === null || api === void 0 ? void 0 : (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
|
|
51
|
+
},
|
|
52
|
+
icon: jsx(ContextualToolbarIcon, {
|
|
53
|
+
label: "Contextual toolbar"
|
|
54
|
+
}),
|
|
55
|
+
selected: !isDockedToTop,
|
|
56
|
+
elemAfter: !isDockedToTop ? jsx(CheckMarkIcon, {
|
|
57
|
+
label: ""
|
|
58
|
+
}) : undefined
|
|
59
|
+
}, {
|
|
60
|
+
title: 'Fixed at top',
|
|
61
|
+
onClick: () => {
|
|
62
|
+
var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
|
|
63
|
+
return (_api$selectionToolbar4 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 ? void 0 : (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
|
|
64
|
+
},
|
|
65
|
+
icon: jsx(FixedToolbarIcon, {
|
|
66
|
+
label: "Fixed toolbar"
|
|
67
|
+
}),
|
|
68
|
+
selected: isDockedToTop,
|
|
69
|
+
elemAfter: isDockedToTop ? jsx(CheckMarkIcon, {
|
|
70
|
+
label: ""
|
|
71
|
+
}) : undefined
|
|
72
|
+
});
|
|
70
73
|
return [{
|
|
71
74
|
type: 'separator',
|
|
72
75
|
fullHeight: true
|
|
@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { bind } from 'bind-event-listener';
|
|
7
7
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
8
|
-
import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
|
|
8
|
+
import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
|
|
9
9
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
10
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
11
|
import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
|
|
@@ -147,10 +147,12 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
|
|
|
147
147
|
selectionStable = _ref3.selectionStable,
|
|
148
148
|
hide = _ref3.hide,
|
|
149
149
|
toolbarDocking = _ref3.toolbarDocking;
|
|
150
|
+
var isCellSelection = ('$anchorCell' in state.selection);
|
|
150
151
|
if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
|
|
151
152
|
// $anchorCell is only available in CellSelection, this check is to
|
|
152
153
|
// avoid importing CellSelection from @atlaskit/editor-tables
|
|
153
|
-
'
|
|
154
|
+
isCellSelection && editorExperiment('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
|
|
155
|
+
) {
|
|
154
156
|
// If there is no active selection, or the selection is not stable, or the selection is a node selection,
|
|
155
157
|
// do not show the toolbar.
|
|
156
158
|
return;
|
|
@@ -218,9 +220,14 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
|
|
|
218
220
|
toolbarDocking: toolbarDocking
|
|
219
221
|
})));
|
|
220
222
|
}
|
|
221
|
-
var
|
|
223
|
+
var onPositionCalculated;
|
|
222
224
|
var toolbarTitle = 'Selection toolbar';
|
|
223
|
-
|
|
225
|
+
if (isCellSelection && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
226
|
+
onPositionCalculated = calculateToolbarPositionOnCellSelection(toolbarTitle);
|
|
227
|
+
} else {
|
|
228
|
+
var calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
|
|
229
|
+
onPositionCalculated = calcToolbarPosition(toolbarTitle);
|
|
230
|
+
}
|
|
224
231
|
var nodeType = getSelectionNodeTypes(state);
|
|
225
232
|
return {
|
|
226
233
|
title: 'Selection toolbar',
|
|
@@ -38,34 +38,37 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
|
|
|
38
38
|
label: ""
|
|
39
39
|
})
|
|
40
40
|
}];
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
41
|
+
var isDockedToTop = toolbarDocking === 'top';
|
|
42
|
+
dropdownOptions.push({
|
|
43
|
+
type: 'overflow-dropdown-heading',
|
|
44
|
+
title: 'Toolbar appears'
|
|
45
|
+
}, {
|
|
46
|
+
title: 'In-line with text',
|
|
47
|
+
onClick: function onClick() {
|
|
48
|
+
var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
|
|
49
|
+
return (_api$selectionToolbar = api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
|
|
50
|
+
},
|
|
51
|
+
icon: jsx(ContextualToolbarIcon, {
|
|
52
|
+
label: "Contextual toolbar"
|
|
53
|
+
}),
|
|
54
|
+
selected: !isDockedToTop,
|
|
55
|
+
elemAfter: !isDockedToTop ? jsx(CheckMarkIcon, {
|
|
56
|
+
label: ""
|
|
57
|
+
}) : undefined
|
|
58
|
+
}, {
|
|
59
|
+
title: 'Fixed at top',
|
|
60
|
+
onClick: function onClick() {
|
|
61
|
+
var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
|
|
62
|
+
return (_api$selectionToolbar4 = api === null || api === void 0 || (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 || (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
|
|
63
|
+
},
|
|
64
|
+
icon: jsx(FixedToolbarIcon, {
|
|
65
|
+
label: "Fixed toolbar"
|
|
66
|
+
}),
|
|
67
|
+
selected: isDockedToTop,
|
|
68
|
+
elemAfter: isDockedToTop ? jsx(CheckMarkIcon, {
|
|
69
|
+
label: ""
|
|
70
|
+
}) : undefined
|
|
71
|
+
});
|
|
69
72
|
return [{
|
|
70
73
|
type: 'separator',
|
|
71
74
|
fullHeight: true
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-selection-toolbar",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
".": "./src/index.ts"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@atlaskit/editor-common": "^102.
|
|
36
|
+
"@atlaskit/editor-common": "^102.11.0",
|
|
37
37
|
"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-primary-toolbar": "^3.0.0",
|
|
39
39
|
"@atlaskit/editor-prosemirror": "7.0.0",
|