@atlaskit/editor-plugin-toolbar 3.3.3 → 3.4.1
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 +21 -0
- package/afm-products/tsconfig.json +60 -0
- package/dist/cjs/pm-plugins/experiences/SelectionToolbarOpenExperience.js +77 -12
- package/dist/cjs/toolbarPlugin.js +8 -3
- package/dist/cjs/ui/Section.js +10 -2
- package/dist/cjs/ui/toolbar-components.js +28 -4
- package/dist/es2019/pm-plugins/experiences/SelectionToolbarOpenExperience.js +75 -12
- package/dist/es2019/toolbarPlugin.js +7 -3
- package/dist/es2019/ui/Section.js +10 -2
- package/dist/es2019/ui/toolbar-components.js +28 -4
- package/dist/esm/pm-plugins/experiences/SelectionToolbarOpenExperience.js +76 -12
- package/dist/esm/toolbarPlugin.js +8 -3
- package/dist/esm/ui/Section.js +10 -2
- package/dist/esm/ui/toolbar-components.js +28 -4
- package/dist/types/pm-plugins/experiences/SelectionToolbarOpenExperience.d.ts +7 -0
- package/dist/types/toolbarPluginType.d.ts +13 -0
- package/dist/types/types/index.d.ts +53 -0
- package/dist/types/ui/toolbar-components.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/experiences/SelectionToolbarOpenExperience.d.ts +7 -0
- package/dist/types-ts4.5/toolbarPluginType.d.ts +13 -0
- package/dist/types-ts4.5/types/index.d.ts +53 -0
- package/dist/types-ts4.5/ui/toolbar-components.d.ts +2 -1
- package/package.json +6 -3
- package/afm-dev-agents/tsconfig.json +0 -60
- package/afm-passionfruit/tsconfig.json +0 -60
- package/afm-rovo-extension/tsconfig.json +0 -60
- package/afm-volt/tsconfig.json +0 -36
|
@@ -1,16 +1,49 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
1
2
|
import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
|
|
2
3
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
5
|
var pluginKey = new PluginKey('selectionToolbarOpenExperience');
|
|
6
|
+
var START_METHOD = {
|
|
7
|
+
MOUSE_UP: 'mouse-up',
|
|
8
|
+
KEY_DOWN: 'key-down'
|
|
9
|
+
};
|
|
10
|
+
var ABORT_REASON = {
|
|
11
|
+
SELECTION_CLEARED: 'selection-cleared',
|
|
12
|
+
BLOCK_MENU_OPENED: 'block-menu-opened',
|
|
13
|
+
EDITOR_DESTROYED: 'editor-destroyed'
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* This experience tracks when the selection toolbar is opened.
|
|
17
|
+
*
|
|
18
|
+
* Start: When user makes a selection via mouseup or shift+arrow key down
|
|
19
|
+
* Success: When the selection toolbar is added to the DOM within 500ms of start
|
|
20
|
+
* Abort: When selection transition to empty or block menu is opened
|
|
21
|
+
*/
|
|
5
22
|
export default (function (_ref) {
|
|
6
23
|
var popupsMountPointRef = _ref.popupsMountPointRef,
|
|
7
24
|
editorViewDomRef = _ref.editorViewDomRef;
|
|
25
|
+
var cachedTarget = null;
|
|
8
26
|
var getTarget = function getTarget() {
|
|
9
|
-
|
|
10
|
-
|
|
27
|
+
if (!cachedTarget) {
|
|
28
|
+
var _editorViewDomRef$cur;
|
|
29
|
+
cachedTarget = popupsMountPointRef.current || ((_editorViewDomRef$cur = editorViewDomRef.current) === null || _editorViewDomRef$cur === void 0 || (_editorViewDomRef$cur = _editorViewDomRef$cur.closest('.ak-editor-content-area')) === null || _editorViewDomRef$cur === void 0 ? void 0 : _editorViewDomRef$cur.querySelector(':scope > [data-testid="plugins-components-wrapper"]')) || null;
|
|
30
|
+
}
|
|
31
|
+
return cachedTarget;
|
|
11
32
|
};
|
|
12
33
|
var experience = new Experience('selection-toolbar-open', {
|
|
13
|
-
checks: [new ExperienceCheckTimeout(
|
|
34
|
+
checks: [new ExperienceCheckTimeout({
|
|
35
|
+
durationMs: 500,
|
|
36
|
+
onTimeout: function onTimeout() {
|
|
37
|
+
if (isBlockMenuWithinNode(getTarget())) {
|
|
38
|
+
return {
|
|
39
|
+
status: 'abort',
|
|
40
|
+
metadata: {
|
|
41
|
+
reason: ABORT_REASON.BLOCK_MENU_OPENED
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}), new ExperienceCheckDomMutation({
|
|
14
47
|
onDomMutation: function onDomMutation(_ref2) {
|
|
15
48
|
var mutations = _ref2.mutations;
|
|
16
49
|
if (mutations.some(isSelectionToolbarAddedInMutation)) {
|
|
@@ -23,8 +56,7 @@ export default (function (_ref) {
|
|
|
23
56
|
return {
|
|
24
57
|
target: getTarget(),
|
|
25
58
|
options: {
|
|
26
|
-
childList: true
|
|
27
|
-
subtree: true
|
|
59
|
+
childList: true
|
|
28
60
|
}
|
|
29
61
|
};
|
|
30
62
|
}
|
|
@@ -38,7 +70,11 @@ export default (function (_ref) {
|
|
|
38
70
|
},
|
|
39
71
|
apply: function apply(_tr, pluginState, oldState, newState) {
|
|
40
72
|
if (!oldState.selection.empty && newState.selection.empty) {
|
|
41
|
-
experience.abort(
|
|
73
|
+
experience.abort({
|
|
74
|
+
metadata: {
|
|
75
|
+
reason: ABORT_REASON.SELECTION_CLEARED
|
|
76
|
+
}
|
|
77
|
+
});
|
|
42
78
|
}
|
|
43
79
|
return pluginState;
|
|
44
80
|
}
|
|
@@ -46,15 +82,23 @@ export default (function (_ref) {
|
|
|
46
82
|
props: {
|
|
47
83
|
handleDOMEvents: {
|
|
48
84
|
mouseup: function mouseup(view) {
|
|
49
|
-
if (!view.state.selection.empty) {
|
|
50
|
-
experience.start(
|
|
85
|
+
if (!view.state.selection.empty && !isSelectionToolbarWithinNode(getTarget())) {
|
|
86
|
+
experience.start({
|
|
87
|
+
metadata: {
|
|
88
|
+
method: START_METHOD.MOUSE_UP
|
|
89
|
+
}
|
|
90
|
+
});
|
|
51
91
|
}
|
|
52
92
|
},
|
|
53
93
|
keydown: function keydown(_view, _ref3) {
|
|
54
94
|
var shiftKey = _ref3.shiftKey,
|
|
55
95
|
key = _ref3.key;
|
|
56
96
|
if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
|
|
57
|
-
experience.start(
|
|
97
|
+
experience.start({
|
|
98
|
+
metadata: {
|
|
99
|
+
method: START_METHOD.KEY_DOWN
|
|
100
|
+
}
|
|
101
|
+
});
|
|
58
102
|
}
|
|
59
103
|
}
|
|
60
104
|
}
|
|
@@ -62,7 +106,11 @@ export default (function (_ref) {
|
|
|
62
106
|
view: function view() {
|
|
63
107
|
return {
|
|
64
108
|
destroy: function destroy() {
|
|
65
|
-
experience.abort(
|
|
109
|
+
experience.abort({
|
|
110
|
+
metadata: {
|
|
111
|
+
reason: ABORT_REASON.EDITOR_DESTROYED
|
|
112
|
+
}
|
|
113
|
+
});
|
|
66
114
|
}
|
|
67
115
|
};
|
|
68
116
|
}
|
|
@@ -71,8 +119,24 @@ export default (function (_ref) {
|
|
|
71
119
|
var isSelectionToolbarAddedInMutation = function isSelectionToolbarAddedInMutation(_ref4) {
|
|
72
120
|
var type = _ref4.type,
|
|
73
121
|
addedNodes = _ref4.addedNodes;
|
|
74
|
-
return type === 'childList' &&
|
|
122
|
+
return type === 'childList' && _toConsumableArray(addedNodes).some(isSelectionToolbarWithinNode);
|
|
75
123
|
};
|
|
76
124
|
var isSelectionToolbarWithinNode = function isSelectionToolbarWithinNode(node) {
|
|
77
|
-
return node
|
|
125
|
+
return containsPopupWithNestedTestId(node, 'editor-floating-toolbar');
|
|
126
|
+
};
|
|
127
|
+
var isBlockMenuWithinNode = function isBlockMenuWithinNode(node) {
|
|
128
|
+
return containsPopupWithNestedTestId(node, 'editor-block-menu');
|
|
129
|
+
};
|
|
130
|
+
var containsPopupWithNestedTestId = function containsPopupWithNestedTestId(node, testId) {
|
|
131
|
+
if (!(node instanceof HTMLElement)) {
|
|
132
|
+
return false;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Check if node itself has the popup attribute and contains the element with testId
|
|
136
|
+
if (node.matches('[data-editor-popup="true"]')) {
|
|
137
|
+
return !!node.querySelector("[data-testid=\"".concat(testId, "\"]"));
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Check if any direct child with popup attribute contains the element with testId
|
|
141
|
+
return !!node.querySelector(":scope > [data-editor-popup=\"true\"] [data-testid=\"".concat(testId, "\"]"));
|
|
78
142
|
};
|
|
@@ -71,9 +71,11 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
71
71
|
var popupsMountPointRef = {};
|
|
72
72
|
var editorViewDomRef = {};
|
|
73
73
|
var disableSelectionToolbar = config.disableSelectionToolbar,
|
|
74
|
-
disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned
|
|
74
|
+
disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned,
|
|
75
|
+
_config$contextualFor = config.contextualFormattingEnabled,
|
|
76
|
+
contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor;
|
|
75
77
|
var registry = createComponentRegistry();
|
|
76
|
-
registry.register(getToolbarComponents(api, disableSelectionToolbar));
|
|
78
|
+
registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar));
|
|
77
79
|
return {
|
|
78
80
|
name: 'toolbar',
|
|
79
81
|
actions: {
|
|
@@ -87,6 +89,9 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
87
89
|
},
|
|
88
90
|
getComponents: function getComponents() {
|
|
89
91
|
return registry.components;
|
|
92
|
+
},
|
|
93
|
+
contextualFormattingMode: function contextualFormattingMode() {
|
|
94
|
+
return contextualFormattingEnabled;
|
|
90
95
|
}
|
|
91
96
|
},
|
|
92
97
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -175,7 +180,7 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
175
180
|
}
|
|
176
181
|
});
|
|
177
182
|
}
|
|
178
|
-
}].concat(_toConsumableArray(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
|
|
183
|
+
}].concat(_toConsumableArray(!disableSelectionToolbar && expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
|
|
179
184
|
name: 'selectionToolbarOpenExperience',
|
|
180
185
|
plugin: function plugin() {
|
|
181
186
|
return selectionToolbarOpenExperience({
|
package/dist/esm/ui/Section.js
CHANGED
|
@@ -2,14 +2,22 @@ import React from 'react';
|
|
|
2
2
|
import { TOOLBARS, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
3
3
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
4
4
|
import { ToolbarSection, SeparatorPosition } from '@atlaskit/editor-toolbar';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
|
|
6
7
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
8
|
var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDocking, disableSelectionToolbar) {
|
|
8
9
|
if (editMode === 'view') {
|
|
9
10
|
return false;
|
|
10
11
|
}
|
|
11
|
-
|
|
12
|
-
|
|
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
|
+
}
|
|
13
21
|
}
|
|
14
22
|
if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
|
|
15
23
|
return true;
|
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
|
|
5
5
|
import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
|
|
6
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
7
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
8
|
import { SELECTION_TOOLBAR_LABEL } from './consts';
|
|
8
9
|
import { OverflowMenu } from './OverflowMenu';
|
|
@@ -10,8 +11,8 @@ import { OverflowSection } from './OverflowSection';
|
|
|
10
11
|
import { PrimaryToolbar } from './PrimaryToolbar';
|
|
11
12
|
import { Section } from './Section';
|
|
12
13
|
import { TextCollapsedMenu } from './TextCollapsedMenu';
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
|
|
15
|
+
return [{
|
|
15
16
|
type: 'toolbar',
|
|
16
17
|
key: TOOLBARS.INLINE_TEXT_TOOLBAR,
|
|
17
18
|
component: function component(_ref) {
|
|
@@ -22,7 +23,10 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
|
|
|
22
23
|
testId: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
|
|
23
24
|
}, children);
|
|
24
25
|
}
|
|
25
|
-
}
|
|
26
|
+
}];
|
|
27
|
+
};
|
|
28
|
+
var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
|
|
29
|
+
return [{
|
|
26
30
|
type: 'toolbar',
|
|
27
31
|
key: TOOLBARS.PRIMARY_TOOLBAR,
|
|
28
32
|
component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : function (_ref2) {
|
|
@@ -32,7 +36,10 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
|
|
|
32
36
|
testId: "primary-toolbar"
|
|
33
37
|
}, children);
|
|
34
38
|
}
|
|
35
|
-
}
|
|
39
|
+
}];
|
|
40
|
+
};
|
|
41
|
+
export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar) {
|
|
42
|
+
var components = [{
|
|
36
43
|
type: TEXT_SECTION.type,
|
|
37
44
|
key: TEXT_SECTION.key,
|
|
38
45
|
parents: [{
|
|
@@ -242,5 +249,22 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
|
|
|
242
249
|
}
|
|
243
250
|
});
|
|
244
251
|
}
|
|
252
|
+
if (fg('platform_editor_toolbar_aifc_placement_config')) {
|
|
253
|
+
switch (contextualFormattingEnabled) {
|
|
254
|
+
case 'always-inline':
|
|
255
|
+
components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
|
|
256
|
+
break;
|
|
257
|
+
case 'always-pinned':
|
|
258
|
+
components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
|
|
259
|
+
break;
|
|
260
|
+
case 'controlled':
|
|
261
|
+
components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
|
|
262
|
+
components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
|
|
263
|
+
break;
|
|
264
|
+
}
|
|
265
|
+
} else {
|
|
266
|
+
components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
|
|
267
|
+
components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
|
|
268
|
+
}
|
|
245
269
|
return components;
|
|
246
270
|
};
|
|
@@ -7,5 +7,12 @@ type SelectionToolbarOpenExperienceOptions = {
|
|
|
7
7
|
current?: HTMLElement;
|
|
8
8
|
};
|
|
9
9
|
};
|
|
10
|
+
/**
|
|
11
|
+
* This experience tracks when the selection toolbar is opened.
|
|
12
|
+
*
|
|
13
|
+
* Start: When user makes a selection via mouseup or shift+arrow key down
|
|
14
|
+
* Success: When the selection toolbar is added to the DOM within 500ms of start
|
|
15
|
+
* Abort: When selection transition to empty or block menu is opened
|
|
16
|
+
*/
|
|
10
17
|
declare const _default: ({ popupsMountPointRef, editorViewDomRef, }: SelectionToolbarOpenExperienceOptions) => SafePlugin<{}>;
|
|
11
18
|
export default _default;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
|
|
1
2
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
3
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
3
4
|
import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
|
|
@@ -19,6 +20,18 @@ export type EditorToolbarPluginState = {
|
|
|
19
20
|
};
|
|
20
21
|
export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
|
|
21
22
|
actions: {
|
|
23
|
+
/**
|
|
24
|
+
* Returns the current contextual formatting toolbar mode configuration.
|
|
25
|
+
*
|
|
26
|
+
* This method retrieves the active setting that determines the behavior and placement
|
|
27
|
+
* of the contextual formatting toolbar in the editor.
|
|
28
|
+
*
|
|
29
|
+
* @returns The active contextual formatting mode:
|
|
30
|
+
* - `always-inline`: Formatting controls appear in a floating toolbar near selected text
|
|
31
|
+
* - `always-pinned`: Formatting controls are pinned to the top toolbar (default)
|
|
32
|
+
* - `controlled`: Both inline and primary toolbars are available
|
|
33
|
+
*/
|
|
34
|
+
contextualFormattingMode: () => ContextualFormattingEnabledOptions;
|
|
22
35
|
getComponents: () => Array<RegisterComponent>;
|
|
23
36
|
registerComponents: RegisterComponentsAction;
|
|
24
37
|
};
|
|
@@ -1,5 +1,58 @@
|
|
|
1
|
+
import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
|
|
1
2
|
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
2
3
|
export type ToolbarPluginOptions = {
|
|
4
|
+
/**
|
|
5
|
+
* Controls which toolbars are available for in the editor.
|
|
6
|
+
*
|
|
7
|
+
* The contextual formatting toolbar provides text formatting options (bold, italic, links, etc.)
|
|
8
|
+
* that appear contextually based on user selection and interaction.
|
|
9
|
+
*
|
|
10
|
+
* @remarks
|
|
11
|
+
* This option determines where and when the formatting toolbar is displayed:
|
|
12
|
+
* - **Primary Toolbar**: The toolbar mounted at the top of the editor that is always visible
|
|
13
|
+
* - **Inline Text Toolbar**: A floating toolbar that appears near the selected text
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* // Always show formatting controls in a floating (inline) toolbar near selection
|
|
18
|
+
* const toolbarPlugin = createToolbarPlugin({
|
|
19
|
+
* contextualFormattingEnabled: 'always-inline',
|
|
20
|
+
* });
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* // Always show formatting controls pinned to the top (primary) toolbar
|
|
26
|
+
* const toolbarPlugin = createToolbarPlugin({
|
|
27
|
+
* contextualFormattingEnabled: 'always-pinned',
|
|
28
|
+
* });
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* // Allow dynamic control of toolbar placement (both inline and primary available)
|
|
34
|
+
* const toolbarPlugin = createToolbarPlugin({
|
|
35
|
+
* contextualFormattingEnabled: 'controlled',
|
|
36
|
+
* });
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @public
|
|
40
|
+
*/
|
|
41
|
+
contextualFormattingEnabled?: ContextualFormattingEnabledOptions;
|
|
42
|
+
/**
|
|
43
|
+
* @private
|
|
44
|
+
* @deprecated
|
|
45
|
+
* @description
|
|
46
|
+
* This option is deprecated and will be removed in the future, replaced with `contextualFormattingEnabled`.
|
|
47
|
+
*
|
|
48
|
+
* To disable the selection toolbar (so only the primary toolbar is shown), use `contextualFormattingEnabled: 'always-pinned'`.
|
|
49
|
+
* @example
|
|
50
|
+
* ```ts
|
|
51
|
+
* const toolbarPlugin = createToolbarPlugin({
|
|
52
|
+
* contextualFormattingEnabled: 'always-inline',
|
|
53
|
+
* });
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
3
56
|
disableSelectionToolbar?: boolean;
|
|
4
57
|
disableSelectionToolbarWhenPinned?: boolean;
|
|
5
58
|
/**
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
|
|
1
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
3
|
import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
3
4
|
import type { ToolbarPlugin } from '../toolbarPluginType';
|
|
4
|
-
export declare const getToolbarComponents: (api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
|
|
5
|
+
export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
|
|
@@ -7,5 +7,12 @@ type SelectionToolbarOpenExperienceOptions = {
|
|
|
7
7
|
current?: HTMLElement;
|
|
8
8
|
};
|
|
9
9
|
};
|
|
10
|
+
/**
|
|
11
|
+
* This experience tracks when the selection toolbar is opened.
|
|
12
|
+
*
|
|
13
|
+
* Start: When user makes a selection via mouseup or shift+arrow key down
|
|
14
|
+
* Success: When the selection toolbar is added to the DOM within 500ms of start
|
|
15
|
+
* Abort: When selection transition to empty or block menu is opened
|
|
16
|
+
*/
|
|
10
17
|
declare const _default: ({ popupsMountPointRef, editorViewDomRef, }: SelectionToolbarOpenExperienceOptions) => SafePlugin<{}>;
|
|
11
18
|
export default _default;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
|
|
1
2
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
3
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
3
4
|
import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
|
|
@@ -19,6 +20,18 @@ export type EditorToolbarPluginState = {
|
|
|
19
20
|
};
|
|
20
21
|
export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
|
|
21
22
|
actions: {
|
|
23
|
+
/**
|
|
24
|
+
* Returns the current contextual formatting toolbar mode configuration.
|
|
25
|
+
*
|
|
26
|
+
* This method retrieves the active setting that determines the behavior and placement
|
|
27
|
+
* of the contextual formatting toolbar in the editor.
|
|
28
|
+
*
|
|
29
|
+
* @returns The active contextual formatting mode:
|
|
30
|
+
* - `always-inline`: Formatting controls appear in a floating toolbar near selected text
|
|
31
|
+
* - `always-pinned`: Formatting controls are pinned to the top toolbar (default)
|
|
32
|
+
* - `controlled`: Both inline and primary toolbars are available
|
|
33
|
+
*/
|
|
34
|
+
contextualFormattingMode: () => ContextualFormattingEnabledOptions;
|
|
22
35
|
getComponents: () => Array<RegisterComponent>;
|
|
23
36
|
registerComponents: RegisterComponentsAction;
|
|
24
37
|
};
|
|
@@ -1,5 +1,58 @@
|
|
|
1
|
+
import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
|
|
1
2
|
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
2
3
|
export type ToolbarPluginOptions = {
|
|
4
|
+
/**
|
|
5
|
+
* Controls which toolbars are available for in the editor.
|
|
6
|
+
*
|
|
7
|
+
* The contextual formatting toolbar provides text formatting options (bold, italic, links, etc.)
|
|
8
|
+
* that appear contextually based on user selection and interaction.
|
|
9
|
+
*
|
|
10
|
+
* @remarks
|
|
11
|
+
* This option determines where and when the formatting toolbar is displayed:
|
|
12
|
+
* - **Primary Toolbar**: The toolbar mounted at the top of the editor that is always visible
|
|
13
|
+
* - **Inline Text Toolbar**: A floating toolbar that appears near the selected text
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* // Always show formatting controls in a floating (inline) toolbar near selection
|
|
18
|
+
* const toolbarPlugin = createToolbarPlugin({
|
|
19
|
+
* contextualFormattingEnabled: 'always-inline',
|
|
20
|
+
* });
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* // Always show formatting controls pinned to the top (primary) toolbar
|
|
26
|
+
* const toolbarPlugin = createToolbarPlugin({
|
|
27
|
+
* contextualFormattingEnabled: 'always-pinned',
|
|
28
|
+
* });
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* // Allow dynamic control of toolbar placement (both inline and primary available)
|
|
34
|
+
* const toolbarPlugin = createToolbarPlugin({
|
|
35
|
+
* contextualFormattingEnabled: 'controlled',
|
|
36
|
+
* });
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @public
|
|
40
|
+
*/
|
|
41
|
+
contextualFormattingEnabled?: ContextualFormattingEnabledOptions;
|
|
42
|
+
/**
|
|
43
|
+
* @private
|
|
44
|
+
* @deprecated
|
|
45
|
+
* @description
|
|
46
|
+
* This option is deprecated and will be removed in the future, replaced with `contextualFormattingEnabled`.
|
|
47
|
+
*
|
|
48
|
+
* To disable the selection toolbar (so only the primary toolbar is shown), use `contextualFormattingEnabled: 'always-pinned'`.
|
|
49
|
+
* @example
|
|
50
|
+
* ```ts
|
|
51
|
+
* const toolbarPlugin = createToolbarPlugin({
|
|
52
|
+
* contextualFormattingEnabled: 'always-inline',
|
|
53
|
+
* });
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
3
56
|
disableSelectionToolbar?: boolean;
|
|
4
57
|
disableSelectionToolbarWhenPinned?: boolean;
|
|
5
58
|
/**
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
|
|
1
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
3
|
import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
3
4
|
import type { ToolbarPlugin } from '../toolbarPluginType';
|
|
4
|
-
export declare const getToolbarComponents: (api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
|
|
5
|
+
export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-toolbar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.1",
|
|
4
4
|
"description": "Toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -40,13 +40,13 @@
|
|
|
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.3.0",
|
|
43
|
-
"@atlaskit/tmp-editor-statsig": "^13.
|
|
43
|
+
"@atlaskit/tmp-editor-statsig": "^13.19.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"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"@atlaskit/editor-common": "^110.
|
|
49
|
+
"@atlaskit/editor-common": "^110.18.0",
|
|
50
50
|
"react": "^18.2.0"
|
|
51
51
|
},
|
|
52
52
|
"platform-feature-flags": {
|
|
@@ -55,6 +55,9 @@
|
|
|
55
55
|
},
|
|
56
56
|
"platform_editor_toolbar_aifc_user_intent_fix": {
|
|
57
57
|
"type": "boolean"
|
|
58
|
+
},
|
|
59
|
+
"platform_editor_toolbar_aifc_placement_config": {
|
|
60
|
+
"type": "boolean"
|
|
58
61
|
}
|
|
59
62
|
},
|
|
60
63
|
"techstack": {
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../../../tsconfig.entry-points.dev-agents.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"target": "es5",
|
|
5
|
-
"outDir": "../../../../../dev-agents/tsDist/@atlaskit__editor-plugin-toolbar/app",
|
|
6
|
-
"rootDir": "../",
|
|
7
|
-
"composite": true
|
|
8
|
-
},
|
|
9
|
-
"include": [
|
|
10
|
-
"../src/**/*.ts",
|
|
11
|
-
"../src/**/*.tsx"
|
|
12
|
-
],
|
|
13
|
-
"exclude": [
|
|
14
|
-
"../src/**/__tests__/*",
|
|
15
|
-
"../src/**/*.test.*",
|
|
16
|
-
"../src/**/test.*",
|
|
17
|
-
"../src/**/examples.*"
|
|
18
|
-
],
|
|
19
|
-
"references": [
|
|
20
|
-
{
|
|
21
|
-
"path": "../../../helpers/browser-apis/afm-dev-agents/tsconfig.json"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"path": "../../editor-plugin-analytics/afm-dev-agents/tsconfig.json"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"path": "../../editor-plugin-connectivity/afm-dev-agents/tsconfig.json"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"path": "../../editor-plugin-editor-viewmode/afm-dev-agents/tsconfig.json"
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"path": "../../editor-plugin-selection/afm-dev-agents/tsconfig.json"
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"path": "../../editor-plugin-user-intent/afm-dev-agents/tsconfig.json"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"path": "../../editor-plugin-user-preferences/afm-dev-agents/tsconfig.json"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"path": "../../editor-toolbar/afm-dev-agents/tsconfig.json"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"path": "../../editor-toolbar-model/afm-dev-agents/tsconfig.json"
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"path": "../../../platform/feature-flags-react/afm-dev-agents/tsconfig.json"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"path": "../../tmp-editor-statsig/afm-dev-agents/tsconfig.json"
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"path": "../../editor-common/afm-dev-agents/tsconfig.json"
|
|
58
|
-
}
|
|
59
|
-
]
|
|
60
|
-
}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../../../tsconfig.entry-points.passionfruit.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"target": "es5",
|
|
5
|
-
"outDir": "../../../../../passionfruit/tsDist/@atlaskit__editor-plugin-toolbar/app",
|
|
6
|
-
"rootDir": "../",
|
|
7
|
-
"composite": true
|
|
8
|
-
},
|
|
9
|
-
"include": [
|
|
10
|
-
"../src/**/*.ts",
|
|
11
|
-
"../src/**/*.tsx"
|
|
12
|
-
],
|
|
13
|
-
"exclude": [
|
|
14
|
-
"../src/**/__tests__/*",
|
|
15
|
-
"../src/**/*.test.*",
|
|
16
|
-
"../src/**/test.*",
|
|
17
|
-
"../src/**/examples.*"
|
|
18
|
-
],
|
|
19
|
-
"references": [
|
|
20
|
-
{
|
|
21
|
-
"path": "../../../helpers/browser-apis/afm-passionfruit/tsconfig.json"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"path": "../../editor-plugin-analytics/afm-passionfruit/tsconfig.json"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"path": "../../editor-plugin-connectivity/afm-passionfruit/tsconfig.json"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"path": "../../editor-plugin-editor-viewmode/afm-passionfruit/tsconfig.json"
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"path": "../../editor-plugin-selection/afm-passionfruit/tsconfig.json"
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"path": "../../editor-plugin-user-intent/afm-passionfruit/tsconfig.json"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"path": "../../editor-plugin-user-preferences/afm-passionfruit/tsconfig.json"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"path": "../../editor-toolbar/afm-passionfruit/tsconfig.json"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"path": "../../editor-toolbar-model/afm-passionfruit/tsconfig.json"
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"path": "../../editor-common/afm-passionfruit/tsconfig.json"
|
|
58
|
-
}
|
|
59
|
-
]
|
|
60
|
-
}
|