@atlaskit/editor-plugin-toolbar 4.0.5 → 4.0.7
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 +16 -0
- package/dist/cjs/toolbarPlugin.js +1 -1
- package/dist/cjs/ui/Section.js +3 -14
- package/dist/cjs/ui/SelectionToolbar/index.js +2 -3
- package/dist/cjs/ui/toolbar-components.js +12 -22
- package/dist/es2019/toolbarPlugin.js +1 -1
- package/dist/es2019/ui/Section.js +3 -14
- package/dist/es2019/ui/SelectionToolbar/index.js +2 -4
- package/dist/es2019/ui/toolbar-components.js +12 -22
- package/dist/esm/toolbarPlugin.js +1 -1
- package/dist/esm/ui/Section.js +3 -14
- package/dist/esm/ui/SelectionToolbar/index.js +2 -3
- package/dist/esm/ui/toolbar-components.js +12 -22
- package/dist/types/ui/Section.d.ts +1 -2
- package/dist/types/ui/toolbar-components.d.ts +1 -1
- package/dist/types-ts4.5/ui/Section.d.ts +1 -2
- package/dist/types-ts4.5/ui/toolbar-components.d.ts +1 -1
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-toolbar
|
|
2
2
|
|
|
3
|
+
## 4.0.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`e1361a964ccd9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1361a964ccd9) -
|
|
8
|
+
Clean up platform_editor_toolbar_aifc_placement_config feature flag
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 4.0.6
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`c9c11b2544f4e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c9c11b2544f4e) -
|
|
16
|
+
Remove platform_editor_toolbar_aifc_template_editor feature flag
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 4.0.5
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -83,7 +83,7 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
83
83
|
contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor,
|
|
84
84
|
breakpointPreset = config.breakpointPreset;
|
|
85
85
|
var registry = (0, _editorToolbarModel.createComponentRegistry)();
|
|
86
|
-
registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api,
|
|
86
|
+
registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api, breakpointPreset));
|
|
87
87
|
var cachedCalculateToolbarPosition = (0, _expValEquals.expValEquals)('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? (0, _utils.calculateToolbarPositionTrackHead)(_consts.SELECTION_TOOLBAR_LABEL) : undefined;
|
|
88
88
|
return {
|
|
89
89
|
name: 'toolbar',
|
package/dist/cjs/ui/Section.js
CHANGED
|
@@ -12,20 +12,10 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
|
12
12
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
13
|
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
|
|
14
14
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
15
|
-
var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDocking, contextualFormattingEnabled
|
|
15
|
+
var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDocking, contextualFormattingEnabled) {
|
|
16
16
|
if (editMode === 'view') {
|
|
17
17
|
return false;
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* This check is no longer needed with plugin config changes, the selection toolbar will not be registered and so
|
|
22
|
-
* no components will render
|
|
23
|
-
*/
|
|
24
|
-
if (!(0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_placement_config')) {
|
|
25
|
-
if (disableSelectionToolbar) {
|
|
26
|
-
return true;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
19
|
if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_placement_overridden')) {
|
|
30
20
|
if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR) {
|
|
31
21
|
return toolbarDocking !== 'top' || contextualFormattingEnabled === 'always-inline';
|
|
@@ -74,8 +64,7 @@ var Section = exports.Section = function Section(_ref) {
|
|
|
74
64
|
testId = _ref.testId,
|
|
75
65
|
showSeparatorInFullPagePrimaryToolbar = _ref.showSeparatorInFullPagePrimaryToolbar,
|
|
76
66
|
_ref$isSharedSection = _ref.isSharedSection,
|
|
77
|
-
isSharedSection = _ref$isSharedSection === void 0 ? true : _ref$isSharedSection
|
|
78
|
-
disableSelectionToolbar = _ref.disableSelectionToolbar;
|
|
67
|
+
isSharedSection = _ref$isSharedSection === void 0 ? true : _ref$isSharedSection;
|
|
79
68
|
var _usePluginState = usePluginState(api),
|
|
80
69
|
editorViewMode = _usePluginState.editorViewMode,
|
|
81
70
|
editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
|
|
@@ -84,7 +73,7 @@ var Section = exports.Section = function Section(_ref) {
|
|
|
84
73
|
return parent.type === 'toolbar';
|
|
85
74
|
});
|
|
86
75
|
var contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
|
|
87
|
-
if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, contextualFormattingEnabled
|
|
76
|
+
if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, contextualFormattingEnabled)) {
|
|
88
77
|
return null;
|
|
89
78
|
}
|
|
90
79
|
var isFullPage = editorAppearance === 'full-page';
|
|
@@ -100,8 +100,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
|
|
|
100
100
|
editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
|
|
101
101
|
currentUserIntent = _usePluginState.currentUserIntent,
|
|
102
102
|
shouldShowToolbar = _usePluginState.shouldShowToolbar,
|
|
103
|
-
editorViewMode = _usePluginState.editorViewMode
|
|
104
|
-
_selection = _usePluginState.selection;
|
|
103
|
+
editorViewMode = _usePluginState.editorViewMode;
|
|
105
104
|
var contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
|
|
106
105
|
var selectionToolbarConfigEnabled = (0, _toolbar.shouldShowSelectionToolbar)(contextualFormattingEnabled, editorToolbarDockingPreference);
|
|
107
106
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
@@ -120,7 +119,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
|
|
|
120
119
|
var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.AllSelection;
|
|
121
120
|
var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
|
|
122
121
|
var onPositionCalculated = useOnPositionCalculated(editorView);
|
|
123
|
-
if (
|
|
122
|
+
if (selectionToolbarConfigEnabled && disableSelectionToolbarWhenPinned || !components || !toolbar) {
|
|
124
123
|
return null;
|
|
125
124
|
}
|
|
126
125
|
if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_user_intent_fix') ?
|
|
@@ -51,7 +51,7 @@ var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(breakpoin
|
|
|
51
51
|
}
|
|
52
52
|
}];
|
|
53
53
|
};
|
|
54
|
-
var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api,
|
|
54
|
+
var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, breakpointPreset) {
|
|
55
55
|
var components = [{
|
|
56
56
|
type: _toolbar.TEXT_SECTION.type,
|
|
57
57
|
key: _toolbar.TEXT_SECTION.key,
|
|
@@ -69,14 +69,12 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
|
|
|
69
69
|
}, /*#__PURE__*/_react.default.createElement(_Section.Section, {
|
|
70
70
|
parents: parents,
|
|
71
71
|
api: api,
|
|
72
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
73
72
|
testId: "text-section"
|
|
74
73
|
}, children));
|
|
75
74
|
}
|
|
76
75
|
return /*#__PURE__*/_react.default.createElement(_Section.Section, {
|
|
77
76
|
parents: parents,
|
|
78
77
|
api: api,
|
|
79
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
80
78
|
testId: "text-section"
|
|
81
79
|
}, children);
|
|
82
80
|
}
|
|
@@ -97,14 +95,12 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
|
|
|
97
95
|
}, /*#__PURE__*/_react.default.createElement(_Section.Section, {
|
|
98
96
|
parents: parents,
|
|
99
97
|
api: api,
|
|
100
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
101
98
|
testId: "text-section"
|
|
102
99
|
}, children));
|
|
103
100
|
}
|
|
104
101
|
return /*#__PURE__*/_react.default.createElement(_Section.Section, {
|
|
105
102
|
parents: parents,
|
|
106
103
|
api: api,
|
|
107
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
108
104
|
testId: "text-section"
|
|
109
105
|
}, children);
|
|
110
106
|
}
|
|
@@ -128,7 +124,6 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
|
|
|
128
124
|
}, /*#__PURE__*/_react.default.createElement(_Section.Section, {
|
|
129
125
|
parents: parents,
|
|
130
126
|
api: api,
|
|
131
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
132
127
|
testId: "text-section"
|
|
133
128
|
}, children));
|
|
134
129
|
}
|
|
@@ -279,22 +274,17 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
|
|
|
279
274
|
return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
|
|
280
275
|
}
|
|
281
276
|
});
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
break;
|
|
294
|
-
}
|
|
295
|
-
} else {
|
|
296
|
-
components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
|
|
297
|
-
components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
|
|
277
|
+
switch (contextualFormattingEnabled) {
|
|
278
|
+
case 'always-inline':
|
|
279
|
+
components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
|
|
280
|
+
break;
|
|
281
|
+
case 'always-pinned':
|
|
282
|
+
components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
|
|
283
|
+
break;
|
|
284
|
+
case 'controlled':
|
|
285
|
+
components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
|
|
286
|
+
components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
|
|
287
|
+
break;
|
|
298
288
|
}
|
|
299
289
|
if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_undo_redo_confluence')) {
|
|
300
290
|
components.push({
|
|
@@ -69,7 +69,7 @@ export const toolbarPlugin = ({
|
|
|
69
69
|
breakpointPreset
|
|
70
70
|
} = config;
|
|
71
71
|
const registry = createComponentRegistry();
|
|
72
|
-
registry.register(getToolbarComponents(contextualFormattingEnabled, api,
|
|
72
|
+
registry.register(getToolbarComponents(contextualFormattingEnabled, api, breakpointPreset));
|
|
73
73
|
const cachedCalculateToolbarPosition = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL) : undefined;
|
|
74
74
|
return {
|
|
75
75
|
name: 'toolbar',
|
|
@@ -5,20 +5,10 @@ import { ToolbarSection, SeparatorPosition } from '@atlaskit/editor-toolbar';
|
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
|
|
7
7
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
|
-
const shouldShowSection = (editMode, toolbar, toolbarDocking, contextualFormattingEnabled
|
|
8
|
+
const shouldShowSection = (editMode, toolbar, toolbarDocking, contextualFormattingEnabled) => {
|
|
9
9
|
if (editMode === 'view') {
|
|
10
10
|
return false;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* This check is no longer needed with plugin config changes, the selection toolbar will not be registered and so
|
|
15
|
-
* no components will render
|
|
16
|
-
*/
|
|
17
|
-
if (!fg('platform_editor_toolbar_aifc_placement_config')) {
|
|
18
|
-
if (disableSelectionToolbar) {
|
|
19
|
-
return true;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
12
|
if (fg('platform_editor_toolbar_aifc_placement_overridden')) {
|
|
23
13
|
if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR) {
|
|
24
14
|
return toolbarDocking !== 'top' || contextualFormattingEnabled === 'always-inline';
|
|
@@ -65,8 +55,7 @@ export const Section = ({
|
|
|
65
55
|
api,
|
|
66
56
|
testId,
|
|
67
57
|
showSeparatorInFullPagePrimaryToolbar,
|
|
68
|
-
isSharedSection = true
|
|
69
|
-
disableSelectionToolbar
|
|
58
|
+
isSharedSection = true
|
|
70
59
|
}) => {
|
|
71
60
|
var _api$toolbar$actions$, _api$toolbar;
|
|
72
61
|
const {
|
|
@@ -76,7 +65,7 @@ export const Section = ({
|
|
|
76
65
|
} = usePluginState(api);
|
|
77
66
|
const toolbar = parents.find(parent => parent.type === 'toolbar');
|
|
78
67
|
const contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
|
|
79
|
-
if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, contextualFormattingEnabled
|
|
68
|
+
if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, contextualFormattingEnabled)) {
|
|
80
69
|
return null;
|
|
81
70
|
}
|
|
82
71
|
const isFullPage = editorAppearance === 'full-page';
|
|
@@ -92,9 +92,7 @@ export const SelectionToolbar = ({
|
|
|
92
92
|
editorToolbarDockingPreference,
|
|
93
93
|
currentUserIntent,
|
|
94
94
|
shouldShowToolbar,
|
|
95
|
-
editorViewMode
|
|
96
|
-
// @ts-ignore
|
|
97
|
-
selection: _selection
|
|
95
|
+
editorViewMode
|
|
98
96
|
} = usePluginState(api);
|
|
99
97
|
const contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
|
|
100
98
|
const selectionToolbarConfigEnabled = shouldShowSelectionToolbar(contextualFormattingEnabled, editorToolbarDockingPreference);
|
|
@@ -113,7 +111,7 @@ export const SelectionToolbar = ({
|
|
|
113
111
|
const isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection;
|
|
114
112
|
const isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
|
|
115
113
|
const onPositionCalculated = useOnPositionCalculated(editorView);
|
|
116
|
-
if (
|
|
114
|
+
if (selectionToolbarConfigEnabled && disableSelectionToolbarWhenPinned || !components || !toolbar) {
|
|
117
115
|
return null;
|
|
118
116
|
}
|
|
119
117
|
if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || (fg('platform_editor_toolbar_aifc_user_intent_fix') ?
|
|
@@ -42,7 +42,7 @@ const getPrimaryToolbarComponents = breakpointPreset => {
|
|
|
42
42
|
}, children)
|
|
43
43
|
}];
|
|
44
44
|
};
|
|
45
|
-
export const getToolbarComponents = (contextualFormattingEnabled, api,
|
|
45
|
+
export const getToolbarComponents = (contextualFormattingEnabled, api, breakpointPreset) => {
|
|
46
46
|
const components = [{
|
|
47
47
|
type: TEXT_SECTION.type,
|
|
48
48
|
key: TEXT_SECTION.key,
|
|
@@ -61,14 +61,12 @@ export const getToolbarComponents = (contextualFormattingEnabled, api, disableSe
|
|
|
61
61
|
}, /*#__PURE__*/React.createElement(Section, {
|
|
62
62
|
parents: parents,
|
|
63
63
|
api: api,
|
|
64
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
65
64
|
testId: "text-section"
|
|
66
65
|
}, children));
|
|
67
66
|
}
|
|
68
67
|
return /*#__PURE__*/React.createElement(Section, {
|
|
69
68
|
parents: parents,
|
|
70
69
|
api: api,
|
|
71
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
72
70
|
testId: "text-section"
|
|
73
71
|
}, children);
|
|
74
72
|
}
|
|
@@ -90,14 +88,12 @@ export const getToolbarComponents = (contextualFormattingEnabled, api, disableSe
|
|
|
90
88
|
}, /*#__PURE__*/React.createElement(Section, {
|
|
91
89
|
parents: parents,
|
|
92
90
|
api: api,
|
|
93
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
94
91
|
testId: "text-section"
|
|
95
92
|
}, children));
|
|
96
93
|
}
|
|
97
94
|
return /*#__PURE__*/React.createElement(Section, {
|
|
98
95
|
parents: parents,
|
|
99
96
|
api: api,
|
|
100
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
101
97
|
testId: "text-section"
|
|
102
98
|
}, children);
|
|
103
99
|
}
|
|
@@ -122,7 +118,6 @@ export const getToolbarComponents = (contextualFormattingEnabled, api, disableSe
|
|
|
122
118
|
}, /*#__PURE__*/React.createElement(Section, {
|
|
123
119
|
parents: parents,
|
|
124
120
|
api: api,
|
|
125
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
126
121
|
testId: "text-section"
|
|
127
122
|
}, children));
|
|
128
123
|
}
|
|
@@ -275,22 +270,17 @@ export const getToolbarComponents = (contextualFormattingEnabled, api, disableSe
|
|
|
275
270
|
return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
|
|
276
271
|
}
|
|
277
272
|
});
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
break;
|
|
290
|
-
}
|
|
291
|
-
} else {
|
|
292
|
-
components.unshift(...getInlineTextToolbarComponents());
|
|
293
|
-
components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
|
|
273
|
+
switch (contextualFormattingEnabled) {
|
|
274
|
+
case 'always-inline':
|
|
275
|
+
components.unshift(...getInlineTextToolbarComponents());
|
|
276
|
+
break;
|
|
277
|
+
case 'always-pinned':
|
|
278
|
+
components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
|
|
279
|
+
break;
|
|
280
|
+
case 'controlled':
|
|
281
|
+
components.unshift(...getInlineTextToolbarComponents());
|
|
282
|
+
components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
|
|
283
|
+
break;
|
|
294
284
|
}
|
|
295
285
|
if (fg('platform_editor_toolbar_aifc_undo_redo_confluence')) {
|
|
296
286
|
components.push({
|
|
@@ -76,7 +76,7 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
76
76
|
contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor,
|
|
77
77
|
breakpointPreset = config.breakpointPreset;
|
|
78
78
|
var registry = createComponentRegistry();
|
|
79
|
-
registry.register(getToolbarComponents(contextualFormattingEnabled, api,
|
|
79
|
+
registry.register(getToolbarComponents(contextualFormattingEnabled, api, breakpointPreset));
|
|
80
80
|
var cachedCalculateToolbarPosition = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL) : undefined;
|
|
81
81
|
return {
|
|
82
82
|
name: 'toolbar',
|
package/dist/esm/ui/Section.js
CHANGED
|
@@ -5,20 +5,10 @@ import { ToolbarSection, SeparatorPosition } from '@atlaskit/editor-toolbar';
|
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
|
|
7
7
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
|
-
var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDocking, contextualFormattingEnabled
|
|
8
|
+
var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDocking, contextualFormattingEnabled) {
|
|
9
9
|
if (editMode === 'view') {
|
|
10
10
|
return false;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* This check is no longer needed with plugin config changes, the selection toolbar will not be registered and so
|
|
15
|
-
* no components will render
|
|
16
|
-
*/
|
|
17
|
-
if (!fg('platform_editor_toolbar_aifc_placement_config')) {
|
|
18
|
-
if (disableSelectionToolbar) {
|
|
19
|
-
return true;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
12
|
if (fg('platform_editor_toolbar_aifc_placement_overridden')) {
|
|
23
13
|
if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR) {
|
|
24
14
|
return toolbarDocking !== 'top' || contextualFormattingEnabled === 'always-inline';
|
|
@@ -67,8 +57,7 @@ export var Section = function Section(_ref) {
|
|
|
67
57
|
testId = _ref.testId,
|
|
68
58
|
showSeparatorInFullPagePrimaryToolbar = _ref.showSeparatorInFullPagePrimaryToolbar,
|
|
69
59
|
_ref$isSharedSection = _ref.isSharedSection,
|
|
70
|
-
isSharedSection = _ref$isSharedSection === void 0 ? true : _ref$isSharedSection
|
|
71
|
-
disableSelectionToolbar = _ref.disableSelectionToolbar;
|
|
60
|
+
isSharedSection = _ref$isSharedSection === void 0 ? true : _ref$isSharedSection;
|
|
72
61
|
var _usePluginState = usePluginState(api),
|
|
73
62
|
editorViewMode = _usePluginState.editorViewMode,
|
|
74
63
|
editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
|
|
@@ -77,7 +66,7 @@ export var Section = function Section(_ref) {
|
|
|
77
66
|
return parent.type === 'toolbar';
|
|
78
67
|
});
|
|
79
68
|
var contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
|
|
80
|
-
if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, contextualFormattingEnabled
|
|
69
|
+
if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, contextualFormattingEnabled)) {
|
|
81
70
|
return null;
|
|
82
71
|
}
|
|
83
72
|
var isFullPage = editorAppearance === 'full-page';
|
|
@@ -92,8 +92,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
|
|
|
92
92
|
editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
|
|
93
93
|
currentUserIntent = _usePluginState.currentUserIntent,
|
|
94
94
|
shouldShowToolbar = _usePluginState.shouldShowToolbar,
|
|
95
|
-
editorViewMode = _usePluginState.editorViewMode
|
|
96
|
-
_selection = _usePluginState.selection;
|
|
95
|
+
editorViewMode = _usePluginState.editorViewMode;
|
|
97
96
|
var contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
|
|
98
97
|
var selectionToolbarConfigEnabled = shouldShowSelectionToolbar(contextualFormattingEnabled, editorToolbarDockingPreference);
|
|
99
98
|
var intl = useIntl();
|
|
@@ -112,7 +111,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
|
|
|
112
111
|
var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection;
|
|
113
112
|
var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
|
|
114
113
|
var onPositionCalculated = useOnPositionCalculated(editorView);
|
|
115
|
-
if (
|
|
114
|
+
if (selectionToolbarConfigEnabled && disableSelectionToolbarWhenPinned || !components || !toolbar) {
|
|
116
115
|
return null;
|
|
117
116
|
}
|
|
118
117
|
if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || (fg('platform_editor_toolbar_aifc_user_intent_fix') ?
|
|
@@ -44,7 +44,7 @@ var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(breakpoin
|
|
|
44
44
|
}
|
|
45
45
|
}];
|
|
46
46
|
};
|
|
47
|
-
export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api,
|
|
47
|
+
export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, breakpointPreset) {
|
|
48
48
|
var components = [{
|
|
49
49
|
type: TEXT_SECTION.type,
|
|
50
50
|
key: TEXT_SECTION.key,
|
|
@@ -62,14 +62,12 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
|
|
|
62
62
|
}, /*#__PURE__*/React.createElement(Section, {
|
|
63
63
|
parents: parents,
|
|
64
64
|
api: api,
|
|
65
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
66
65
|
testId: "text-section"
|
|
67
66
|
}, children));
|
|
68
67
|
}
|
|
69
68
|
return /*#__PURE__*/React.createElement(Section, {
|
|
70
69
|
parents: parents,
|
|
71
70
|
api: api,
|
|
72
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
73
71
|
testId: "text-section"
|
|
74
72
|
}, children);
|
|
75
73
|
}
|
|
@@ -90,14 +88,12 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
|
|
|
90
88
|
}, /*#__PURE__*/React.createElement(Section, {
|
|
91
89
|
parents: parents,
|
|
92
90
|
api: api,
|
|
93
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
94
91
|
testId: "text-section"
|
|
95
92
|
}, children));
|
|
96
93
|
}
|
|
97
94
|
return /*#__PURE__*/React.createElement(Section, {
|
|
98
95
|
parents: parents,
|
|
99
96
|
api: api,
|
|
100
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
101
97
|
testId: "text-section"
|
|
102
98
|
}, children);
|
|
103
99
|
}
|
|
@@ -121,7 +117,6 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
|
|
|
121
117
|
}, /*#__PURE__*/React.createElement(Section, {
|
|
122
118
|
parents: parents,
|
|
123
119
|
api: api,
|
|
124
|
-
disableSelectionToolbar: disableSelectionToolbar,
|
|
125
120
|
testId: "text-section"
|
|
126
121
|
}, children));
|
|
127
122
|
}
|
|
@@ -272,22 +267,17 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
|
|
|
272
267
|
return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
|
|
273
268
|
}
|
|
274
269
|
});
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
break;
|
|
287
|
-
}
|
|
288
|
-
} else {
|
|
289
|
-
components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
|
|
290
|
-
components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
|
|
270
|
+
switch (contextualFormattingEnabled) {
|
|
271
|
+
case 'always-inline':
|
|
272
|
+
components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
|
|
273
|
+
break;
|
|
274
|
+
case 'always-pinned':
|
|
275
|
+
components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
|
|
276
|
+
break;
|
|
277
|
+
case 'controlled':
|
|
278
|
+
components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
|
|
279
|
+
components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
|
|
280
|
+
break;
|
|
291
281
|
}
|
|
292
282
|
if (fg('platform_editor_toolbar_aifc_undo_redo_confluence')) {
|
|
293
283
|
components.push({
|
|
@@ -5,11 +5,10 @@ import type { ToolbarPlugin } from '../toolbarPluginType';
|
|
|
5
5
|
type SectionProps = {
|
|
6
6
|
api?: ExtractInjectionAPI<ToolbarPlugin>;
|
|
7
7
|
children: React.ReactNode;
|
|
8
|
-
disableSelectionToolbar?: boolean;
|
|
9
8
|
isSharedSection?: boolean;
|
|
10
9
|
parents: ToolbarComponentTypes;
|
|
11
10
|
showSeparatorInFullPagePrimaryToolbar?: boolean;
|
|
12
11
|
testId?: string;
|
|
13
12
|
};
|
|
14
|
-
export declare const Section: ({ children, parents, api, testId, showSeparatorInFullPagePrimaryToolbar, isSharedSection,
|
|
13
|
+
export declare const Section: ({ children, parents, api, testId, showSeparatorInFullPagePrimaryToolbar, isSharedSection, }: SectionProps) => React.JSX.Element | null;
|
|
15
14
|
export {};
|
|
@@ -3,4 +3,4 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
|
3
3
|
import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
|
|
4
4
|
import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
5
5
|
import type { ToolbarPlugin } from '../toolbarPluginType';
|
|
6
|
-
export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>,
|
|
6
|
+
export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, breakpointPreset?: BreakpointPreset) => RegisterComponent[];
|
|
@@ -5,11 +5,10 @@ import type { ToolbarPlugin } from '../toolbarPluginType';
|
|
|
5
5
|
type SectionProps = {
|
|
6
6
|
api?: ExtractInjectionAPI<ToolbarPlugin>;
|
|
7
7
|
children: React.ReactNode;
|
|
8
|
-
disableSelectionToolbar?: boolean;
|
|
9
8
|
isSharedSection?: boolean;
|
|
10
9
|
parents: ToolbarComponentTypes;
|
|
11
10
|
showSeparatorInFullPagePrimaryToolbar?: boolean;
|
|
12
11
|
testId?: string;
|
|
13
12
|
};
|
|
14
|
-
export declare const Section: ({ children, parents, api, testId, showSeparatorInFullPagePrimaryToolbar, isSharedSection,
|
|
13
|
+
export declare const Section: ({ children, parents, api, testId, showSeparatorInFullPagePrimaryToolbar, isSharedSection, }: SectionProps) => React.JSX.Element | null;
|
|
15
14
|
export {};
|
|
@@ -3,4 +3,4 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
|
3
3
|
import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
|
|
4
4
|
import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
5
5
|
import type { ToolbarPlugin } from '../toolbarPluginType';
|
|
6
|
-
export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>,
|
|
6
|
+
export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, breakpointPreset?: BreakpointPreset) => RegisterComponent[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-toolbar",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.7",
|
|
4
4
|
"description": "Toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@atlaskit/editor-toolbar-model": "^0.2.0",
|
|
41
41
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
42
42
|
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
43
|
-
"@atlaskit/tmp-editor-statsig": "^16.
|
|
43
|
+
"@atlaskit/tmp-editor-statsig": "^16.23.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"bind-event-listener": "^3.0.0",
|
|
46
46
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -56,9 +56,6 @@
|
|
|
56
56
|
"platform_editor_toolbar_aifc_user_intent_fix": {
|
|
57
57
|
"type": "boolean"
|
|
58
58
|
},
|
|
59
|
-
"platform_editor_toolbar_aifc_placement_config": {
|
|
60
|
-
"type": "boolean"
|
|
61
|
-
},
|
|
62
59
|
"platform_editor_toolbar_aifc_placement_overridden": {
|
|
63
60
|
"type": "boolean"
|
|
64
61
|
},
|