@atlaskit/editor-plugin-selection-toolbar 4.2.2 → 4.3.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 +12 -0
- package/dist/cjs/selectionToolbarPlugin.js +20 -14
- package/dist/cjs/ui/PinMenuItem.js +38 -0
- package/dist/cjs/ui/toolbar-components.js +34 -0
- package/dist/es2019/selectionToolbarPlugin.js +21 -15
- package/dist/es2019/ui/PinMenuItem.js +32 -0
- package/dist/es2019/ui/toolbar-components.js +27 -0
- package/dist/esm/selectionToolbarPlugin.js +20 -14
- package/dist/esm/ui/PinMenuItem.js +31 -0
- package/dist/esm/ui/toolbar-components.js +27 -0
- package/dist/types/selectionToolbarPluginType.d.ts +3 -1
- package/dist/types/ui/PinMenuItem.d.ts +11 -0
- package/dist/types/ui/toolbar-components.d.ts +4 -0
- package/dist/types-ts4.5/selectionToolbarPluginType.d.ts +3 -1
- package/dist/types-ts4.5/ui/PinMenuItem.d.ts +11 -0
- package/dist/types-ts4.5/ui/toolbar-components.d.ts +4 -0
- package/package.json +8 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-selection-toolbar
|
|
2
2
|
|
|
3
|
+
## 4.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#196043](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/196043)
|
|
8
|
+
[`c6cb0ed855827`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c6cb0ed855827) -
|
|
9
|
+
Add new ShowMoreHorizontal Icon, add new ranks to support overflow menu, add pin as a menu item
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 4.2.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -21,6 +21,7 @@ var _pluginKey = require("./pm-plugins/plugin-key");
|
|
|
21
21
|
var _PageVisibilityWatcher = require("./ui/PageVisibilityWatcher");
|
|
22
22
|
var _pinToolbarConfig = require("./ui/pin-toolbar-config");
|
|
23
23
|
var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
|
|
24
|
+
var _toolbarComponents = require("./ui/toolbar-components");
|
|
24
25
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
25
26
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
26
27
|
var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
|
|
@@ -43,21 +44,26 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
43
44
|
var primaryToolbarComponent;
|
|
44
45
|
var userPreferencesProvider = config.userPreferencesProvider,
|
|
45
46
|
contextualFormattingEnabled = config.contextualFormattingEnabled;
|
|
46
|
-
if ((0,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
|
|
48
|
+
var _api$toolbar;
|
|
49
|
+
api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
|
|
50
|
+
} else {
|
|
51
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
|
|
52
|
+
exposure: true
|
|
53
|
+
})) {
|
|
54
|
+
var _api$primaryToolbar;
|
|
55
|
+
primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
|
|
56
|
+
var disabled = _ref2.disabled;
|
|
57
|
+
return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
|
|
58
|
+
api: api,
|
|
59
|
+
disabled: disabled
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
|
|
63
|
+
name: 'pinToolbar',
|
|
64
|
+
component: primaryToolbarComponent
|
|
55
65
|
});
|
|
56
|
-
}
|
|
57
|
-
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
|
|
58
|
-
name: 'pinToolbar',
|
|
59
|
-
component: primaryToolbarComponent
|
|
60
|
-
});
|
|
66
|
+
}
|
|
61
67
|
}
|
|
62
68
|
var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
|
|
63
69
|
var isPreferenceInitialized = false;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.PinMenuItem = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _reactIntlNext = require("react-intl-next");
|
|
10
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
11
|
+
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
12
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
|
+
var shouldShowPinMenuItem = function shouldShowPinMenuItem(api) {
|
|
14
|
+
var _api$userPreferences, _api$selectionToolbar;
|
|
15
|
+
var isDocked = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? (api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition) === 'top' : (api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
|
|
16
|
+
return !isDocked;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
|
|
20
|
+
*/
|
|
21
|
+
var PinMenuItem = exports.PinMenuItem = function PinMenuItem(_ref) {
|
|
22
|
+
var api = _ref.api;
|
|
23
|
+
var intl = (0, _reactIntlNext.useIntl)();
|
|
24
|
+
if (!shouldShowPinMenuItem(api)) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
var onClick = function onClick() {
|
|
28
|
+
var _api$selectionToolbar2, _api$selectionToolbar3;
|
|
29
|
+
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 || _api$selectionToolbar3.call(_api$selectionToolbar2, 'top');
|
|
30
|
+
};
|
|
31
|
+
var message = intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionUnpinnedConcise);
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
33
|
+
onClick: onClick,
|
|
34
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.PinIcon, {
|
|
35
|
+
label: ""
|
|
36
|
+
})
|
|
37
|
+
}, message);
|
|
38
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.getToolbarComponents = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _toolbar = require("@atlaskit/editor-common/toolbar");
|
|
10
|
+
var _PinMenuItem = require("./PinMenuItem");
|
|
11
|
+
var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
|
|
12
|
+
return [{
|
|
13
|
+
type: _toolbar.PIN_MENU_SECTION.type,
|
|
14
|
+
key: _toolbar.PIN_MENU_SECTION.key,
|
|
15
|
+
parents: [{
|
|
16
|
+
type: _toolbar.OVERFLOW_MENU.type,
|
|
17
|
+
key: _toolbar.OVERFLOW_MENU.key,
|
|
18
|
+
rank: _toolbar.OVERFLOW_MENU_RANK[_toolbar.PIN_MENU_SECTION.key]
|
|
19
|
+
}]
|
|
20
|
+
}, {
|
|
21
|
+
type: _toolbar.PIN_MENU_ITEM.type,
|
|
22
|
+
key: _toolbar.PIN_MENU_ITEM.key,
|
|
23
|
+
parents: [{
|
|
24
|
+
type: _toolbar.PIN_MENU_SECTION.type,
|
|
25
|
+
key: _toolbar.PIN_MENU_SECTION.key,
|
|
26
|
+
rank: _toolbar.PIN_MENU_SECTION_RANK[_toolbar.PIN_MENU_ITEM.key]
|
|
27
|
+
}],
|
|
28
|
+
component: function component() {
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_PinMenuItem.PinMenuItem, {
|
|
30
|
+
api: api
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}];
|
|
34
|
+
};
|
|
@@ -12,6 +12,7 @@ import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
|
12
12
|
import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
|
|
13
13
|
import { getPinOptionToolbarConfig } from './ui/pin-toolbar-config';
|
|
14
14
|
import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
|
|
15
|
+
import { getToolbarComponents } from './ui/toolbar-components';
|
|
15
16
|
const getToolbarDocking = (contextualFormattingEnabled, userPreferencesProvider) => {
|
|
16
17
|
if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
17
18
|
var _userPreferencesProvi;
|
|
@@ -35,22 +36,27 @@ export const selectionToolbarPlugin = ({
|
|
|
35
36
|
userPreferencesProvider,
|
|
36
37
|
contextualFormattingEnabled
|
|
37
38
|
} = config;
|
|
38
|
-
if (
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
})
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
disabled
|
|
39
|
+
if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
|
|
40
|
+
var _api$toolbar;
|
|
41
|
+
api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
|
|
42
|
+
} else {
|
|
43
|
+
if (editorExperiment('platform_editor_controls', 'variant1', {
|
|
44
|
+
exposure: true
|
|
45
|
+
})) {
|
|
46
|
+
var _api$primaryToolbar;
|
|
47
|
+
primaryToolbarComponent = ({
|
|
48
|
+
disabled
|
|
49
|
+
}) => {
|
|
50
|
+
return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
|
|
51
|
+
api: api,
|
|
52
|
+
disabled: disabled
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
|
|
56
|
+
name: 'pinToolbar',
|
|
57
|
+
component: primaryToolbarComponent
|
|
48
58
|
});
|
|
49
|
-
}
|
|
50
|
-
api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
|
|
51
|
-
name: 'pinToolbar',
|
|
52
|
-
component: primaryToolbarComponent
|
|
53
|
-
});
|
|
59
|
+
}
|
|
54
60
|
}
|
|
55
61
|
let previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
|
|
56
62
|
let isPreferenceInitialized = false;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl-next';
|
|
3
|
+
import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
4
|
+
import { PinIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
const shouldShowPinMenuItem = api => {
|
|
7
|
+
var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar;
|
|
8
|
+
const isDocked = fg('platform_editor_use_preferences_plugin') ? (api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition) === 'top' : (api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
|
|
9
|
+
return !isDocked;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
|
|
13
|
+
*/
|
|
14
|
+
export const PinMenuItem = ({
|
|
15
|
+
api
|
|
16
|
+
}) => {
|
|
17
|
+
const intl = useIntl();
|
|
18
|
+
if (!shouldShowPinMenuItem(api)) {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
const onClick = () => {
|
|
22
|
+
var _api$selectionToolbar2, _api$selectionToolbar3;
|
|
23
|
+
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, 'top');
|
|
24
|
+
};
|
|
25
|
+
const message = intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpinnedConcise);
|
|
26
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
27
|
+
onClick: onClick,
|
|
28
|
+
elemBefore: /*#__PURE__*/React.createElement(PinIcon, {
|
|
29
|
+
label: ""
|
|
30
|
+
})
|
|
31
|
+
}, message);
|
|
32
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { OVERFLOW_MENU, OVERFLOW_MENU_RANK, PIN_MENU_ITEM, PIN_MENU_SECTION, PIN_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
|
|
3
|
+
import { PinMenuItem } from './PinMenuItem';
|
|
4
|
+
export const getToolbarComponents = api => {
|
|
5
|
+
return [{
|
|
6
|
+
type: PIN_MENU_SECTION.type,
|
|
7
|
+
key: PIN_MENU_SECTION.key,
|
|
8
|
+
parents: [{
|
|
9
|
+
type: OVERFLOW_MENU.type,
|
|
10
|
+
key: OVERFLOW_MENU.key,
|
|
11
|
+
rank: OVERFLOW_MENU_RANK[PIN_MENU_SECTION.key]
|
|
12
|
+
}]
|
|
13
|
+
}, {
|
|
14
|
+
type: PIN_MENU_ITEM.type,
|
|
15
|
+
key: PIN_MENU_ITEM.key,
|
|
16
|
+
parents: [{
|
|
17
|
+
type: PIN_MENU_SECTION.type,
|
|
18
|
+
key: PIN_MENU_SECTION.key,
|
|
19
|
+
rank: PIN_MENU_SECTION_RANK[PIN_MENU_ITEM.key]
|
|
20
|
+
}],
|
|
21
|
+
component: () => {
|
|
22
|
+
return /*#__PURE__*/React.createElement(PinMenuItem, {
|
|
23
|
+
api: api
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
}];
|
|
27
|
+
};
|
|
@@ -16,6 +16,7 @@ import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
|
16
16
|
import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
|
|
17
17
|
import { getPinOptionToolbarConfig } from './ui/pin-toolbar-config';
|
|
18
18
|
import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
|
|
19
|
+
import { getToolbarComponents } from './ui/toolbar-components';
|
|
19
20
|
var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
|
|
20
21
|
if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
21
22
|
var _userPreferencesProvi;
|
|
@@ -36,21 +37,26 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
|
|
|
36
37
|
var primaryToolbarComponent;
|
|
37
38
|
var userPreferencesProvider = config.userPreferencesProvider,
|
|
38
39
|
contextualFormattingEnabled = config.contextualFormattingEnabled;
|
|
39
|
-
if (
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
|
|
41
|
+
var _api$toolbar;
|
|
42
|
+
api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api));
|
|
43
|
+
} else {
|
|
44
|
+
if (editorExperiment('platform_editor_controls', 'variant1', {
|
|
45
|
+
exposure: true
|
|
46
|
+
})) {
|
|
47
|
+
var _api$primaryToolbar;
|
|
48
|
+
primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
|
|
49
|
+
var disabled = _ref2.disabled;
|
|
50
|
+
return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
|
|
51
|
+
api: api,
|
|
52
|
+
disabled: disabled
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
|
|
56
|
+
name: 'pinToolbar',
|
|
57
|
+
component: primaryToolbarComponent
|
|
48
58
|
});
|
|
49
|
-
}
|
|
50
|
-
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
|
|
51
|
-
name: 'pinToolbar',
|
|
52
|
-
component: primaryToolbarComponent
|
|
53
|
-
});
|
|
59
|
+
}
|
|
54
60
|
}
|
|
55
61
|
var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
|
|
56
62
|
var isPreferenceInitialized = false;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl-next';
|
|
3
|
+
import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
4
|
+
import { PinIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
var shouldShowPinMenuItem = function shouldShowPinMenuItem(api) {
|
|
7
|
+
var _api$userPreferences, _api$selectionToolbar;
|
|
8
|
+
var isDocked = fg('platform_editor_use_preferences_plugin') ? (api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition) === 'top' : (api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
|
|
9
|
+
return !isDocked;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
|
|
13
|
+
*/
|
|
14
|
+
export var PinMenuItem = function PinMenuItem(_ref) {
|
|
15
|
+
var api = _ref.api;
|
|
16
|
+
var intl = useIntl();
|
|
17
|
+
if (!shouldShowPinMenuItem(api)) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
var onClick = function onClick() {
|
|
21
|
+
var _api$selectionToolbar2, _api$selectionToolbar3;
|
|
22
|
+
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 || _api$selectionToolbar3.call(_api$selectionToolbar2, 'top');
|
|
23
|
+
};
|
|
24
|
+
var message = intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpinnedConcise);
|
|
25
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
26
|
+
onClick: onClick,
|
|
27
|
+
elemBefore: /*#__PURE__*/React.createElement(PinIcon, {
|
|
28
|
+
label: ""
|
|
29
|
+
})
|
|
30
|
+
}, message);
|
|
31
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { OVERFLOW_MENU, OVERFLOW_MENU_RANK, PIN_MENU_ITEM, PIN_MENU_SECTION, PIN_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
|
|
3
|
+
import { PinMenuItem } from './PinMenuItem';
|
|
4
|
+
export var getToolbarComponents = function getToolbarComponents(api) {
|
|
5
|
+
return [{
|
|
6
|
+
type: PIN_MENU_SECTION.type,
|
|
7
|
+
key: PIN_MENU_SECTION.key,
|
|
8
|
+
parents: [{
|
|
9
|
+
type: OVERFLOW_MENU.type,
|
|
10
|
+
key: OVERFLOW_MENU.key,
|
|
11
|
+
rank: OVERFLOW_MENU_RANK[PIN_MENU_SECTION.key]
|
|
12
|
+
}]
|
|
13
|
+
}, {
|
|
14
|
+
type: PIN_MENU_ITEM.type,
|
|
15
|
+
key: PIN_MENU_ITEM.key,
|
|
16
|
+
parents: [{
|
|
17
|
+
type: PIN_MENU_SECTION.type,
|
|
18
|
+
key: PIN_MENU_SECTION.key,
|
|
19
|
+
rank: PIN_MENU_SECTION_RANK[PIN_MENU_ITEM.key]
|
|
20
|
+
}],
|
|
21
|
+
component: function component() {
|
|
22
|
+
return /*#__PURE__*/React.createElement(PinMenuItem, {
|
|
23
|
+
api: api
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
}];
|
|
27
|
+
};
|
|
@@ -4,6 +4,7 @@ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls
|
|
|
4
4
|
import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
|
|
5
5
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
6
6
|
import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
|
|
7
|
+
import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
7
8
|
import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
|
|
8
9
|
import type { ToolbarDocking } from './types';
|
|
9
10
|
export type SelectionToolbarPluginOptions = {
|
|
@@ -23,7 +24,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
|
|
|
23
24
|
OptionalPlugin<AnalyticsPlugin>,
|
|
24
25
|
OptionalPlugin<BlockControlsPlugin>,
|
|
25
26
|
OptionalPlugin<ConnectivityPlugin>,
|
|
26
|
-
OptionalPlugin<UserPreferencesPlugin
|
|
27
|
+
OptionalPlugin<UserPreferencesPlugin>,
|
|
28
|
+
OptionalPlugin<ToolbarPlugin>
|
|
27
29
|
];
|
|
28
30
|
actions?: {
|
|
29
31
|
suppressToolbar?: () => boolean;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
|
|
4
|
+
type PinMenuItemProps = {
|
|
5
|
+
api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
|
|
9
|
+
*/
|
|
10
|
+
export declare const PinMenuItem: ({ api }: PinMenuItemProps) => React.JSX.Element | null;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
3
|
+
import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
|
|
4
|
+
export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SelectionToolbarPlugin>) => RegisterComponent[];
|
|
@@ -4,6 +4,7 @@ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls
|
|
|
4
4
|
import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
|
|
5
5
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
6
6
|
import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
|
|
7
|
+
import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
7
8
|
import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
|
|
8
9
|
import type { ToolbarDocking } from './types';
|
|
9
10
|
export type SelectionToolbarPluginOptions = {
|
|
@@ -23,7 +24,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
|
|
|
23
24
|
OptionalPlugin<AnalyticsPlugin>,
|
|
24
25
|
OptionalPlugin<BlockControlsPlugin>,
|
|
25
26
|
OptionalPlugin<ConnectivityPlugin>,
|
|
26
|
-
OptionalPlugin<UserPreferencesPlugin
|
|
27
|
+
OptionalPlugin<UserPreferencesPlugin>,
|
|
28
|
+
OptionalPlugin<ToolbarPlugin>
|
|
27
29
|
];
|
|
28
30
|
actions?: {
|
|
29
31
|
suppressToolbar?: () => boolean;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
|
|
4
|
+
type PinMenuItemProps = {
|
|
5
|
+
api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
|
|
9
|
+
*/
|
|
10
|
+
export declare const PinMenuItem: ({ api }: PinMenuItemProps) => React.JSX.Element | null;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
3
|
+
import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
|
|
4
|
+
export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SelectionToolbarPlugin>) => RegisterComponent[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-selection-toolbar",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0",
|
|
4
4
|
"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,19 +38,22 @@
|
|
|
38
38
|
"@atlaskit/editor-plugin-connectivity": "^3.1.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
|
|
41
|
+
"@atlaskit/editor-plugin-toolbar": "^0.1.0",
|
|
41
42
|
"@atlaskit/editor-plugin-user-preferences": "^1.2.0",
|
|
42
43
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
43
|
-
"@atlaskit/
|
|
44
|
-
"@atlaskit/
|
|
44
|
+
"@atlaskit/editor-toolbar": "^0.1.0",
|
|
45
|
+
"@atlaskit/editor-toolbar-model": "^0.0.4",
|
|
46
|
+
"@atlaskit/icon": "^27.10.0",
|
|
47
|
+
"@atlaskit/icon-lab": "^5.4.0",
|
|
45
48
|
"@atlaskit/menu": "^8.1.0",
|
|
46
49
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
47
|
-
"@atlaskit/tmp-editor-statsig": "^9.
|
|
50
|
+
"@atlaskit/tmp-editor-statsig": "^9.25.0",
|
|
48
51
|
"@atlaskit/tokens": "^6.0.0",
|
|
49
52
|
"@babel/runtime": "^7.0.0",
|
|
50
53
|
"bind-event-listener": "^3.0.0"
|
|
51
54
|
},
|
|
52
55
|
"peerDependencies": {
|
|
53
|
-
"@atlaskit/editor-common": "^107.
|
|
56
|
+
"@atlaskit/editor-common": "^107.19.0",
|
|
54
57
|
"react": "^18.2.0",
|
|
55
58
|
"react-dom": "^18.2.0",
|
|
56
59
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -60,7 +63,6 @@
|
|
|
60
63
|
"@atlaskit/ssr": "workspace:^",
|
|
61
64
|
"@atlaskit/visual-regression": "workspace:^",
|
|
62
65
|
"@testing-library/react": "^13.4.0",
|
|
63
|
-
"typescript": "~5.4.2",
|
|
64
66
|
"wait-for-expect": "^1.2.0"
|
|
65
67
|
},
|
|
66
68
|
"techstack": {
|