@atlaskit/editor-plugin-selection-toolbar 1.8.1 → 1.9.0
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 +8 -0
- package/dist/cjs/pm-plugins/commands.js +11 -1
- package/dist/cjs/selectionToolbarPlugin.js +19 -4
- package/dist/cjs/ui/overflow-toolbar-config.js +39 -28
- package/dist/es2019/pm-plugins/commands.js +10 -0
- package/dist/es2019/selectionToolbarPlugin.js +21 -6
- package/dist/es2019/ui/overflow-toolbar-config.js +16 -7
- package/dist/esm/pm-plugins/commands.js +10 -0
- package/dist/esm/selectionToolbarPlugin.js +21 -6
- package/dist/esm/ui/overflow-toolbar-config.js +37 -27
- package/dist/types/pm-plugins/commands.d.ts +4 -0
- package/dist/types/selectionToolbarPluginType.d.ts +5 -0
- package/dist/types/types/index.d.ts +1 -0
- package/dist/types/ui/overflow-toolbar-config.d.ts +11 -1
- package/dist/types-ts4.5/pm-plugins/commands.d.ts +4 -0
- package/dist/types-ts4.5/selectionToolbarPluginType.d.ts +5 -0
- package/dist/types-ts4.5/types/index.d.ts +1 -0
- package/dist/types-ts4.5/ui/overflow-toolbar-config.d.ts +11 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-selection-toolbar
|
|
2
2
|
|
|
3
|
+
## 1.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#116013](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116013)
|
|
8
|
+
[`18e022766bfd3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/18e022766bfd3) -
|
|
9
|
+
[ux] ED-26464 Hiding primary toolbar and docking contextual toolbar items to top
|
|
10
|
+
|
|
3
11
|
## 1.8.1
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.toggleToolbar = void 0;
|
|
6
|
+
exports.toggleToolbar = exports.setToolbarDocking = void 0;
|
|
7
7
|
var _pluginKey = require("./plugin-key");
|
|
8
8
|
var toggleToolbar = exports.toggleToolbar = function toggleToolbar(_ref) {
|
|
9
9
|
var hide = _ref.hide;
|
|
@@ -14,4 +14,14 @@ var toggleToolbar = exports.toggleToolbar = function toggleToolbar(_ref) {
|
|
|
14
14
|
});
|
|
15
15
|
return tr;
|
|
16
16
|
};
|
|
17
|
+
};
|
|
18
|
+
var setToolbarDocking = exports.setToolbarDocking = function setToolbarDocking(_ref3) {
|
|
19
|
+
var toolbarDocking = _ref3.toolbarDocking;
|
|
20
|
+
return function (_ref4) {
|
|
21
|
+
var tr = _ref4.tr;
|
|
22
|
+
tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
|
|
23
|
+
toolbarDocking: toolbarDocking
|
|
24
|
+
});
|
|
25
|
+
return tr;
|
|
26
|
+
};
|
|
17
27
|
};
|
|
@@ -33,7 +33,19 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
33
33
|
return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute((0, _commands.toggleToolbar)({
|
|
34
34
|
hide: false
|
|
35
35
|
}))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
|
|
36
|
+
},
|
|
37
|
+
setToolbarDocking: function setToolbarDocking(toolbarDocking) {
|
|
38
|
+
var _options$api$core$act3, _options$api3;
|
|
39
|
+
return (_options$api$core$act3 = (_options$api3 = options.api) === null || _options$api3 === void 0 ? void 0 : _options$api3.core.actions.execute((0, _commands.setToolbarDocking)({
|
|
40
|
+
toolbarDocking: toolbarDocking
|
|
41
|
+
}))) !== null && _options$api$core$act3 !== void 0 ? _options$api$core$act3 : false;
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
getSharedState: function getSharedState(editorState) {
|
|
45
|
+
if (!editorState) {
|
|
46
|
+
return;
|
|
36
47
|
}
|
|
48
|
+
return _pluginKey.selectionToolbarPluginKey.getState(editorState);
|
|
37
49
|
},
|
|
38
50
|
pmPlugins: function pmPlugins(selectionToolbarHandlers) {
|
|
39
51
|
if (selectionToolbarHandlers) {
|
|
@@ -48,7 +60,8 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
48
60
|
init: function init() {
|
|
49
61
|
return {
|
|
50
62
|
selectionStable: false,
|
|
51
|
-
hide: false
|
|
63
|
+
hide: false,
|
|
64
|
+
toolbarDocking: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'none' : 'top'
|
|
52
65
|
};
|
|
53
66
|
},
|
|
54
67
|
apply: function apply(tr, pluginState) {
|
|
@@ -63,12 +76,12 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
63
76
|
var unbind = (0, _bindEventListener.bind)(_view.root, {
|
|
64
77
|
type: 'mouseup',
|
|
65
78
|
listener: function listener() {
|
|
66
|
-
var _options$
|
|
79
|
+
var _options$api4;
|
|
67
80
|
// We only want to set selectionStable to true if the editor has focus
|
|
68
81
|
// to prevent the toolbar from showing when the editor is blurred
|
|
69
82
|
// due to a click outside the editor.
|
|
70
83
|
|
|
71
|
-
var editorViewModePlugin = (_options$
|
|
84
|
+
var editorViewModePlugin = (_options$api4 = options.api) === null || _options$api4 === void 0 || (_options$api4 = _options$api4.editorViewMode) === null || _options$api4 === void 0 ? void 0 : _options$api4.sharedState.currentState();
|
|
72
85
|
var isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
|
|
73
86
|
_view.dispatch(_view.state.tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
|
|
74
87
|
selectionStable: !isViewModeEnabled ? _view.hasFocus() : true
|
|
@@ -168,7 +181,9 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
168
181
|
}
|
|
169
182
|
}
|
|
170
183
|
if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
171
|
-
items.push.apply(items, (0, _toConsumableArray2.default)(_overflowToolbarConfig.
|
|
184
|
+
items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowToolbarConfig)({
|
|
185
|
+
api: options.api
|
|
186
|
+
})));
|
|
172
187
|
}
|
|
173
188
|
var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
|
|
174
189
|
var toolbarTitle = 'Selection toolbar';
|
|
@@ -1,38 +1,49 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports.
|
|
8
|
-
var _react =
|
|
6
|
+
exports.getOverflowToolbarConfig = void 0;
|
|
7
|
+
var _react = require("@emotion/react");
|
|
9
8
|
var _ContextualToolbarIcon = require("./icons/ContextualToolbarIcon");
|
|
10
9
|
var _FixedToolbarIcon = require("./icons/FixedToolbarIcon");
|
|
10
|
+
/**
|
|
11
|
+
* @jsxRuntime classic
|
|
12
|
+
* @jsx jsx
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
16
|
+
|
|
11
17
|
// New editor controls
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
type: 'overflow-dropdown',
|
|
16
|
-
options: [{
|
|
18
|
+
var getOverflowToolbarConfig = exports.getOverflowToolbarConfig = function getOverflowToolbarConfig(_ref) {
|
|
19
|
+
var api = _ref.api;
|
|
20
|
+
return [{
|
|
17
21
|
type: 'separator'
|
|
18
22
|
}, {
|
|
19
|
-
type: 'overflow-dropdown
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
23
|
+
type: 'overflow-dropdown',
|
|
24
|
+
options: [{
|
|
25
|
+
type: 'separator'
|
|
26
|
+
}, {
|
|
27
|
+
type: 'overflow-dropdown-heading',
|
|
28
|
+
title: 'Toolbar position'
|
|
29
|
+
}, {
|
|
30
|
+
title: 'Contextual',
|
|
31
|
+
onClick: function onClick() {
|
|
32
|
+
var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
|
|
33
|
+
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;
|
|
34
|
+
},
|
|
35
|
+
icon: (0, _react.jsx)(_ContextualToolbarIcon.ContextualToolbarIcon, {
|
|
36
|
+
label: "Contextual toolbar"
|
|
37
|
+
})
|
|
38
|
+
}, {
|
|
39
|
+
title: 'Fixed at top',
|
|
40
|
+
onClick: function onClick() {
|
|
41
|
+
var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
|
|
42
|
+
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;
|
|
43
|
+
},
|
|
44
|
+
icon: (0, _react.jsx)(_FixedToolbarIcon.FixedToolbarIcon, {
|
|
45
|
+
label: "Fixed toolbar"
|
|
46
|
+
})
|
|
47
|
+
}]
|
|
48
|
+
}];
|
|
49
|
+
};
|
|
@@ -3,9 +3,9 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
3
3
|
import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
|
|
4
4
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
|
-
import { toggleToolbar } from './pm-plugins/commands';
|
|
6
|
+
import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
|
|
7
7
|
import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
8
|
-
import {
|
|
8
|
+
import { getOverflowToolbarConfig } from './ui/overflow-toolbar-config';
|
|
9
9
|
export const selectionToolbarPlugin = options => {
|
|
10
10
|
const __selectionToolbarHandlers = [];
|
|
11
11
|
return {
|
|
@@ -22,7 +22,19 @@ export const selectionToolbarPlugin = options => {
|
|
|
22
22
|
return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute(toggleToolbar({
|
|
23
23
|
hide: false
|
|
24
24
|
}))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
|
|
25
|
+
},
|
|
26
|
+
setToolbarDocking: toolbarDocking => {
|
|
27
|
+
var _options$api$core$act3, _options$api3;
|
|
28
|
+
return (_options$api$core$act3 = (_options$api3 = options.api) === null || _options$api3 === void 0 ? void 0 : _options$api3.core.actions.execute(setToolbarDocking({
|
|
29
|
+
toolbarDocking
|
|
30
|
+
}))) !== null && _options$api$core$act3 !== void 0 ? _options$api$core$act3 : false;
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
getSharedState(editorState) {
|
|
34
|
+
if (!editorState) {
|
|
35
|
+
return;
|
|
25
36
|
}
|
|
37
|
+
return selectionToolbarPluginKey.getState(editorState);
|
|
26
38
|
},
|
|
27
39
|
pmPlugins(selectionToolbarHandlers) {
|
|
28
40
|
if (selectionToolbarHandlers) {
|
|
@@ -37,7 +49,8 @@ export const selectionToolbarPlugin = options => {
|
|
|
37
49
|
init() {
|
|
38
50
|
return {
|
|
39
51
|
selectionStable: false,
|
|
40
|
-
hide: false
|
|
52
|
+
hide: false,
|
|
53
|
+
toolbarDocking: editorExperiment('platform_editor_controls', 'variant1') ? 'none' : 'top'
|
|
41
54
|
};
|
|
42
55
|
},
|
|
43
56
|
apply(tr, pluginState) {
|
|
@@ -55,12 +68,12 @@ export const selectionToolbarPlugin = options => {
|
|
|
55
68
|
const unbind = bind(view.root, {
|
|
56
69
|
type: 'mouseup',
|
|
57
70
|
listener: () => {
|
|
58
|
-
var _options$
|
|
71
|
+
var _options$api4, _options$api4$editorV;
|
|
59
72
|
// We only want to set selectionStable to true if the editor has focus
|
|
60
73
|
// to prevent the toolbar from showing when the editor is blurred
|
|
61
74
|
// due to a click outside the editor.
|
|
62
75
|
|
|
63
|
-
const editorViewModePlugin = (_options$
|
|
76
|
+
const editorViewModePlugin = (_options$api4 = options.api) === null || _options$api4 === void 0 ? void 0 : (_options$api4$editorV = _options$api4.editorViewMode) === null || _options$api4$editorV === void 0 ? void 0 : _options$api4$editorV.sharedState.currentState();
|
|
64
77
|
const isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
|
|
65
78
|
view.dispatch(view.state.tr.setMeta(selectionToolbarPluginKey, {
|
|
66
79
|
selectionStable: !isViewModeEnabled ? view.hasFocus() : true
|
|
@@ -157,7 +170,9 @@ export const selectionToolbarPlugin = options => {
|
|
|
157
170
|
}
|
|
158
171
|
}
|
|
159
172
|
if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
160
|
-
items.push(...
|
|
173
|
+
items.push(...getOverflowToolbarConfig({
|
|
174
|
+
api: options.api
|
|
175
|
+
}));
|
|
161
176
|
}
|
|
162
177
|
const calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
|
|
163
178
|
const toolbarTitle = 'Selection toolbar';
|
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
|
+
import { jsx } from '@emotion/react';
|
|
2
8
|
import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
|
|
3
9
|
import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
|
|
4
|
-
|
|
5
10
|
// New editor controls
|
|
6
|
-
export const
|
|
11
|
+
export const getOverflowToolbarConfig = ({
|
|
12
|
+
api
|
|
13
|
+
}) => [{
|
|
7
14
|
type: 'separator'
|
|
8
15
|
}, {
|
|
9
16
|
type: 'overflow-dropdown',
|
|
@@ -15,17 +22,19 @@ export const overflowToolbarConfig = [{
|
|
|
15
22
|
}, {
|
|
16
23
|
title: 'Contextual',
|
|
17
24
|
onClick: () => {
|
|
18
|
-
|
|
25
|
+
var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
|
|
26
|
+
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;
|
|
19
27
|
},
|
|
20
|
-
icon:
|
|
28
|
+
icon: jsx(ContextualToolbarIcon, {
|
|
21
29
|
label: "Contextual toolbar"
|
|
22
30
|
})
|
|
23
31
|
}, {
|
|
24
32
|
title: 'Fixed at top',
|
|
25
33
|
onClick: () => {
|
|
26
|
-
|
|
34
|
+
var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
|
|
35
|
+
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;
|
|
27
36
|
},
|
|
28
|
-
icon:
|
|
37
|
+
icon: jsx(FixedToolbarIcon, {
|
|
29
38
|
label: "Fixed toolbar"
|
|
30
39
|
})
|
|
31
40
|
}]
|
|
@@ -8,4 +8,14 @@ export var toggleToolbar = function toggleToolbar(_ref) {
|
|
|
8
8
|
});
|
|
9
9
|
return tr;
|
|
10
10
|
};
|
|
11
|
+
};
|
|
12
|
+
export var setToolbarDocking = function setToolbarDocking(_ref3) {
|
|
13
|
+
var toolbarDocking = _ref3.toolbarDocking;
|
|
14
|
+
return function (_ref4) {
|
|
15
|
+
var tr = _ref4.tr;
|
|
16
|
+
tr.setMeta(selectionToolbarPluginKey, {
|
|
17
|
+
toolbarDocking: toolbarDocking
|
|
18
|
+
});
|
|
19
|
+
return tr;
|
|
20
|
+
};
|
|
11
21
|
};
|
|
@@ -7,9 +7,9 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
7
7
|
import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
|
|
8
8
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
|
-
import { toggleToolbar } from './pm-plugins/commands';
|
|
10
|
+
import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
|
|
11
11
|
import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
12
|
-
import {
|
|
12
|
+
import { getOverflowToolbarConfig } from './ui/overflow-toolbar-config';
|
|
13
13
|
export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
|
|
14
14
|
var __selectionToolbarHandlers = [];
|
|
15
15
|
return {
|
|
@@ -26,7 +26,19 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
|
|
|
26
26
|
return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute(toggleToolbar({
|
|
27
27
|
hide: false
|
|
28
28
|
}))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
|
|
29
|
+
},
|
|
30
|
+
setToolbarDocking: function setToolbarDocking(toolbarDocking) {
|
|
31
|
+
var _options$api$core$act3, _options$api3;
|
|
32
|
+
return (_options$api$core$act3 = (_options$api3 = options.api) === null || _options$api3 === void 0 ? void 0 : _options$api3.core.actions.execute(_setToolbarDocking({
|
|
33
|
+
toolbarDocking: toolbarDocking
|
|
34
|
+
}))) !== null && _options$api$core$act3 !== void 0 ? _options$api$core$act3 : false;
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
getSharedState: function getSharedState(editorState) {
|
|
38
|
+
if (!editorState) {
|
|
39
|
+
return;
|
|
29
40
|
}
|
|
41
|
+
return selectionToolbarPluginKey.getState(editorState);
|
|
30
42
|
},
|
|
31
43
|
pmPlugins: function pmPlugins(selectionToolbarHandlers) {
|
|
32
44
|
if (selectionToolbarHandlers) {
|
|
@@ -41,7 +53,8 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
|
|
|
41
53
|
init: function init() {
|
|
42
54
|
return {
|
|
43
55
|
selectionStable: false,
|
|
44
|
-
hide: false
|
|
56
|
+
hide: false,
|
|
57
|
+
toolbarDocking: editorExperiment('platform_editor_controls', 'variant1') ? 'none' : 'top'
|
|
45
58
|
};
|
|
46
59
|
},
|
|
47
60
|
apply: function apply(tr, pluginState) {
|
|
@@ -56,12 +69,12 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
|
|
|
56
69
|
var unbind = bind(_view.root, {
|
|
57
70
|
type: 'mouseup',
|
|
58
71
|
listener: function listener() {
|
|
59
|
-
var _options$
|
|
72
|
+
var _options$api4;
|
|
60
73
|
// We only want to set selectionStable to true if the editor has focus
|
|
61
74
|
// to prevent the toolbar from showing when the editor is blurred
|
|
62
75
|
// due to a click outside the editor.
|
|
63
76
|
|
|
64
|
-
var editorViewModePlugin = (_options$
|
|
77
|
+
var editorViewModePlugin = (_options$api4 = options.api) === null || _options$api4 === void 0 || (_options$api4 = _options$api4.editorViewMode) === null || _options$api4 === void 0 ? void 0 : _options$api4.sharedState.currentState();
|
|
65
78
|
var isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
|
|
66
79
|
_view.dispatch(_view.state.tr.setMeta(selectionToolbarPluginKey, {
|
|
67
80
|
selectionStable: !isViewModeEnabled ? _view.hasFocus() : true
|
|
@@ -161,7 +174,9 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
|
|
|
161
174
|
}
|
|
162
175
|
}
|
|
163
176
|
if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
164
|
-
items.push.apply(items, _toConsumableArray(
|
|
177
|
+
items.push.apply(items, _toConsumableArray(getOverflowToolbarConfig({
|
|
178
|
+
api: options.api
|
|
179
|
+
})));
|
|
165
180
|
}
|
|
166
181
|
var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
|
|
167
182
|
var toolbarTitle = 'Selection toolbar';
|
|
@@ -1,32 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
|
+
import { jsx } from '@emotion/react';
|
|
2
8
|
import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
|
|
3
9
|
import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
|
|
4
|
-
|
|
5
10
|
// New editor controls
|
|
6
|
-
export var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
type: 'overflow-dropdown',
|
|
10
|
-
options: [{
|
|
11
|
+
export var getOverflowToolbarConfig = function getOverflowToolbarConfig(_ref) {
|
|
12
|
+
var api = _ref.api;
|
|
13
|
+
return [{
|
|
11
14
|
type: 'separator'
|
|
12
15
|
}, {
|
|
13
|
-
type: 'overflow-dropdown
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
16
|
+
type: 'overflow-dropdown',
|
|
17
|
+
options: [{
|
|
18
|
+
type: 'separator'
|
|
19
|
+
}, {
|
|
20
|
+
type: 'overflow-dropdown-heading',
|
|
21
|
+
title: 'Toolbar position'
|
|
22
|
+
}, {
|
|
23
|
+
title: 'Contextual',
|
|
24
|
+
onClick: function onClick() {
|
|
25
|
+
var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
|
|
26
|
+
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;
|
|
27
|
+
},
|
|
28
|
+
icon: jsx(ContextualToolbarIcon, {
|
|
29
|
+
label: "Contextual toolbar"
|
|
30
|
+
})
|
|
31
|
+
}, {
|
|
32
|
+
title: 'Fixed at top',
|
|
33
|
+
onClick: function onClick() {
|
|
34
|
+
var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
|
|
35
|
+
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;
|
|
36
|
+
},
|
|
37
|
+
icon: jsx(FixedToolbarIcon, {
|
|
38
|
+
label: "Fixed toolbar"
|
|
39
|
+
})
|
|
40
|
+
}]
|
|
41
|
+
}];
|
|
42
|
+
};
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import type { EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { ToolbarDocking } from '../types';
|
|
2
3
|
export declare const toggleToolbar: ({ hide }: {
|
|
3
4
|
hide: boolean;
|
|
4
5
|
}) => EditorCommand;
|
|
6
|
+
export declare const setToolbarDocking: ({ toolbarDocking }: {
|
|
7
|
+
toolbarDocking: ToolbarDocking;
|
|
8
|
+
}) => EditorCommand;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
3
|
+
import type { ToolbarDocking } from './types';
|
|
3
4
|
export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
|
|
5
|
+
sharedState: {
|
|
6
|
+
toolbarDocking: ToolbarDocking;
|
|
7
|
+
};
|
|
4
8
|
pluginConfiguration: {
|
|
5
9
|
/**
|
|
6
10
|
* Defaults to false
|
|
@@ -11,5 +15,6 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
|
|
|
11
15
|
actions?: {
|
|
12
16
|
suppressToolbar?: () => boolean;
|
|
13
17
|
unsuppressToolbar?: () => boolean;
|
|
18
|
+
setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean;
|
|
14
19
|
};
|
|
15
20
|
}>;
|
|
@@ -1,2 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
1
5
|
import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
|
|
2
|
-
|
|
6
|
+
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
7
|
+
import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
|
|
8
|
+
type OverflowToobarConfigOptions = {
|
|
9
|
+
api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
|
|
10
|
+
};
|
|
11
|
+
export declare const getOverflowToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
|
|
12
|
+
export {};
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import type { EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { ToolbarDocking } from '../types';
|
|
2
3
|
export declare const toggleToolbar: ({ hide }: {
|
|
3
4
|
hide: boolean;
|
|
4
5
|
}) => EditorCommand;
|
|
6
|
+
export declare const setToolbarDocking: ({ toolbarDocking }: {
|
|
7
|
+
toolbarDocking: ToolbarDocking;
|
|
8
|
+
}) => EditorCommand;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
3
|
+
import type { ToolbarDocking } from './types';
|
|
3
4
|
export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
|
|
5
|
+
sharedState: {
|
|
6
|
+
toolbarDocking: ToolbarDocking;
|
|
7
|
+
};
|
|
4
8
|
pluginConfiguration: {
|
|
5
9
|
/**
|
|
6
10
|
* Defaults to false
|
|
@@ -13,5 +17,6 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
|
|
|
13
17
|
actions?: {
|
|
14
18
|
suppressToolbar?: () => boolean;
|
|
15
19
|
unsuppressToolbar?: () => boolean;
|
|
20
|
+
setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean;
|
|
16
21
|
};
|
|
17
22
|
}>;
|
|
@@ -1,2 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
1
5
|
import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
|
|
2
|
-
|
|
6
|
+
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
7
|
+
import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
|
|
8
|
+
type OverflowToobarConfigOptions = {
|
|
9
|
+
api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
|
|
10
|
+
};
|
|
11
|
+
export declare const getOverflowToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
|
|
12
|
+
export {};
|
package/package.json
CHANGED