@atlaskit/editor-plugin-toolbar 4.0.3 → 4.0.5
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 +20 -0
- package/dist/cjs/toolbarPlugin.js +15 -22
- package/dist/cjs/ui/SelectionToolbar/index.js +11 -26
- package/dist/cjs/ui/SelectionToolbar/types.js +5 -0
- package/dist/cjs/ui/toolbar-components.js +1 -1
- package/dist/es2019/toolbarPlugin.js +14 -21
- package/dist/es2019/ui/SelectionToolbar/index.js +11 -24
- package/dist/es2019/ui/SelectionToolbar/types.js +1 -0
- package/dist/es2019/ui/toolbar-components.js +1 -1
- package/dist/esm/toolbarPlugin.js +14 -21
- package/dist/esm/ui/SelectionToolbar/index.js +11 -26
- package/dist/esm/ui/SelectionToolbar/types.js +1 -0
- package/dist/esm/ui/toolbar-components.js +1 -1
- package/dist/types/index.d.ts +2 -2
- package/dist/types/ui/SelectionToolbar/index.d.ts +3 -1
- package/dist/types/ui/SelectionToolbar/types.d.ts +6 -0
- package/dist/types-ts4.5/index.d.ts +2 -2
- package/dist/types-ts4.5/ui/SelectionToolbar/index.d.ts +3 -1
- package/dist/types-ts4.5/ui/SelectionToolbar/types.d.ts +6 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-toolbar
|
|
2
2
|
|
|
3
|
+
## 4.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`0caee373bff2d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0caee373bff2d) -
|
|
8
|
+
Exported additional types to fix typescript portable annotation errors
|
|
9
|
+
- [`20d29306fb10e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/20d29306fb10e) -
|
|
10
|
+
[ED-29451] clean up platform_editor_toolbar_aifc_patch_5
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
13
|
+
## 4.0.4
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [`ba05557f777bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba05557f777bf) -
|
|
18
|
+
Add support to render selection toolbar in editors which have an ancestor elemenent which has
|
|
19
|
+
position fixed, most common use case is for the chromeless appearance when rendered inside modals,
|
|
20
|
+
popups etc.
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
|
|
3
23
|
## 4.0.3
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -10,8 +10,9 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
var _bindEventListener = require("bind-event-listener");
|
|
12
12
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
13
|
+
var _utils = require("@atlaskit/editor-common/utils");
|
|
13
14
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
14
|
-
var
|
|
15
|
+
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
15
16
|
var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
|
|
16
17
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
18
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
@@ -36,7 +37,7 @@ function getSelectedNode(editorState) {
|
|
|
36
37
|
};
|
|
37
38
|
}
|
|
38
39
|
var nodes = editorState.schema.nodes;
|
|
39
|
-
var selectedNode = (0,
|
|
40
|
+
var selectedNode = (0, _utils2.findSelectedNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock])(selection);
|
|
40
41
|
if (selectedNode) {
|
|
41
42
|
return {
|
|
42
43
|
node: selectedNode.node,
|
|
@@ -47,7 +48,7 @@ function getSelectedNode(editorState) {
|
|
|
47
48
|
})
|
|
48
49
|
};
|
|
49
50
|
}
|
|
50
|
-
var parentNode = (0,
|
|
51
|
+
var parentNode = (0, _utils2.findParentNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.listItem, nodes.taskItem])(selection);
|
|
51
52
|
if (parentNode) {
|
|
52
53
|
return {
|
|
53
54
|
node: parentNode.node,
|
|
@@ -83,6 +84,7 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
83
84
|
breakpointPreset = config.breakpointPreset;
|
|
84
85
|
var registry = (0, _editorToolbarModel.createComponentRegistry)();
|
|
85
86
|
registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
|
|
87
|
+
var cachedCalculateToolbarPosition = (0, _expValEquals.expValEquals)('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? (0, _utils.calculateToolbarPositionTrackHead)(_consts.SELECTION_TOOLBAR_LABEL) : undefined;
|
|
86
88
|
return {
|
|
87
89
|
name: 'toolbar',
|
|
88
90
|
actions: {
|
|
@@ -126,15 +128,13 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
126
128
|
apply: function apply(tr, pluginState, _, newState) {
|
|
127
129
|
var meta = tr.getMeta(_pluginKey.editorToolbarPluginKey);
|
|
128
130
|
var newPluginState = _objectSpread({}, pluginState);
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
newPluginState.selectedNode = newSelectedNode;
|
|
137
|
-
}
|
|
131
|
+
var shouldUpdateNode = tr.docChanged || tr.selectionSet;
|
|
132
|
+
if (shouldUpdateNode) {
|
|
133
|
+
var newSelectedNode = getSelectedNode(newState);
|
|
134
|
+
var oldNode = pluginState.selectedNode;
|
|
135
|
+
var hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
|
|
136
|
+
if (hasNodeChanged) {
|
|
137
|
+
newPluginState.selectedNode = newSelectedNode;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
if (meta) {
|
|
@@ -209,19 +209,12 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
209
209
|
if (!editorView) {
|
|
210
210
|
return null;
|
|
211
211
|
}
|
|
212
|
-
|
|
213
|
-
return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbarWithErrorBoundary, {
|
|
214
|
-
api: api,
|
|
215
|
-
editorView: editorView,
|
|
216
|
-
mountPoint: popupsMountPoint,
|
|
217
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
|
|
218
|
-
});
|
|
219
|
-
}
|
|
220
|
-
return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbar, {
|
|
212
|
+
return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbarWithErrorBoundary, {
|
|
221
213
|
api: api,
|
|
222
214
|
editorView: editorView,
|
|
223
215
|
mountPoint: popupsMountPoint,
|
|
224
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
|
|
216
|
+
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
|
|
217
|
+
calculateToolbarPosition: cachedCalculateToolbarPosition
|
|
225
218
|
});
|
|
226
219
|
} : undefined
|
|
227
220
|
};
|
|
@@ -70,42 +70,25 @@ var usePluginState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(fun
|
|
|
70
70
|
selectedNode: selectedNode
|
|
71
71
|
};
|
|
72
72
|
});
|
|
73
|
-
var useOnPositionCalculated = (
|
|
74
|
-
return (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_patch_7');
|
|
75
|
-
}, function (editorView) {
|
|
73
|
+
var useOnPositionCalculated = function useOnPositionCalculated(editorView, cachedCalculateToolbarPosition) {
|
|
76
74
|
var onPositionCalculated = (0, _react.useCallback)(function (position) {
|
|
77
75
|
try {
|
|
78
|
-
var toolbarTitle = _consts.SELECTION_TOOLBAR_LABEL;
|
|
79
|
-
|
|
80
76
|
// Show special position on cell selection only when editor controls experiment is enabled
|
|
81
77
|
var isEditorControlsEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1');
|
|
82
78
|
var isCellSelection = ('$anchorCell' in editorView.state.selection);
|
|
83
79
|
if (isCellSelection && isEditorControlsEnabled) {
|
|
84
|
-
return (0, _utils.calculateToolbarPositionOnCellSelection)(
|
|
80
|
+
return (0, _utils.calculateToolbarPositionOnCellSelection)(_consts.SELECTION_TOOLBAR_LABEL)(editorView, position);
|
|
85
81
|
}
|
|
86
|
-
return (0, _utils.calculateToolbarPositionTrackHead)(
|
|
82
|
+
return cachedCalculateToolbarPosition ? cachedCalculateToolbarPosition(editorView, position) : (0, _utils.calculateToolbarPositionTrackHead)(_consts.SELECTION_TOOLBAR_LABEL)(editorView, position);
|
|
87
83
|
} catch (error) {
|
|
88
84
|
(0, _monitoring.logException)(error, {
|
|
89
85
|
location: 'editor-plugin-toolbar/selectionToolbar'
|
|
90
86
|
});
|
|
91
87
|
return position;
|
|
92
88
|
}
|
|
93
|
-
}, [editorView]);
|
|
89
|
+
}, [editorView, cachedCalculateToolbarPosition]);
|
|
94
90
|
return onPositionCalculated;
|
|
95
|
-
}
|
|
96
|
-
var onPositionCalculated = (0, _react.useCallback)(function (position) {
|
|
97
|
-
var toolbarTitle = _consts.SELECTION_TOOLBAR_LABEL;
|
|
98
|
-
|
|
99
|
-
// Show special position on cell selection only when editor controls experiment is enabled
|
|
100
|
-
var isEditorControlsEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1');
|
|
101
|
-
var isCellSelection = ('$anchorCell' in editorView.state.selection);
|
|
102
|
-
if (isCellSelection && isEditorControlsEnabled) {
|
|
103
|
-
return (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle)(editorView, position);
|
|
104
|
-
}
|
|
105
|
-
return (0, _utils.calculateToolbarPositionTrackHead)(toolbarTitle)(editorView, position);
|
|
106
|
-
}, [editorView]);
|
|
107
|
-
return onPositionCalculated;
|
|
108
|
-
});
|
|
91
|
+
};
|
|
109
92
|
var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
|
|
110
93
|
var _api$toolbar$actions$, _api$toolbar, _api$toolbar2;
|
|
111
94
|
var api = _ref.api,
|
|
@@ -118,7 +101,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
|
|
|
118
101
|
currentUserIntent = _usePluginState.currentUserIntent,
|
|
119
102
|
shouldShowToolbar = _usePluginState.shouldShowToolbar,
|
|
120
103
|
editorViewMode = _usePluginState.editorViewMode,
|
|
121
|
-
|
|
104
|
+
_selection = _usePluginState.selection;
|
|
122
105
|
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';
|
|
123
106
|
var selectionToolbarConfigEnabled = (0, _toolbar.shouldShowSelectionToolbar)(contextualFormattingEnabled, editorToolbarDockingPreference);
|
|
124
107
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
@@ -162,7 +145,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
|
|
|
162
145
|
var _api$analytics;
|
|
163
146
|
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
|
|
164
147
|
},
|
|
165
|
-
keyboardNavigation:
|
|
148
|
+
keyboardNavigation: keyboardNavigation
|
|
166
149
|
}, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
|
|
167
150
|
toolbar: toolbar,
|
|
168
151
|
components: components,
|
|
@@ -178,7 +161,8 @@ var SelectionToolbarWithErrorBoundary = exports.SelectionToolbarWithErrorBoundar
|
|
|
178
161
|
var api = _ref2.api,
|
|
179
162
|
editorView = _ref2.editorView,
|
|
180
163
|
mountPoint = _ref2.mountPoint,
|
|
181
|
-
disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned
|
|
164
|
+
disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned,
|
|
165
|
+
calculateToolbarPosition = _ref2.calculateToolbarPosition;
|
|
182
166
|
return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
|
|
183
167
|
component: _analytics.ACTION_SUBJECT.TOOLBAR,
|
|
184
168
|
componentId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
|
|
@@ -188,6 +172,7 @@ var SelectionToolbarWithErrorBoundary = exports.SelectionToolbarWithErrorBoundar
|
|
|
188
172
|
api: api,
|
|
189
173
|
editorView: editorView,
|
|
190
174
|
mountPoint: mountPoint,
|
|
191
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
|
|
175
|
+
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
|
|
176
|
+
calculateToolbarPosition: calculateToolbarPosition
|
|
192
177
|
}));
|
|
193
178
|
};
|
|
@@ -28,7 +28,7 @@ var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
|
|
|
28
28
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.Toolbar, {
|
|
29
29
|
label: _consts.SELECTION_TOOLBAR_LABEL,
|
|
30
30
|
actionSubjectId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
|
|
31
|
-
testId:
|
|
31
|
+
testId: 'editor-floating-toolbar'
|
|
32
32
|
}, children);
|
|
33
33
|
}
|
|
34
34
|
}];
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { bind } from 'bind-event-listener';
|
|
3
3
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
4
|
+
import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
|
|
4
5
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
6
|
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
6
7
|
import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
|
|
@@ -8,8 +9,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
8
9
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
10
|
import { getSelectionToolbarOpenExperiencePlugin } from './pm-plugins/experiences/selection-toolbar-open-experience';
|
|
10
11
|
import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
11
|
-
import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
|
|
12
|
-
import {
|
|
12
|
+
import { DEFAULT_POPUP_SELECTORS, SELECTION_TOOLBAR_LABEL } from './ui/consts';
|
|
13
|
+
import { SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
|
|
13
14
|
import { getToolbarComponents } from './ui/toolbar-components';
|
|
14
15
|
import { isEventInContainer } from './ui/utils/toolbar';
|
|
15
16
|
function getSelectedNode(editorState) {
|
|
@@ -69,6 +70,7 @@ export const toolbarPlugin = ({
|
|
|
69
70
|
} = config;
|
|
70
71
|
const registry = createComponentRegistry();
|
|
71
72
|
registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
|
|
73
|
+
const cachedCalculateToolbarPosition = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL) : undefined;
|
|
72
74
|
return {
|
|
73
75
|
name: 'toolbar',
|
|
74
76
|
actions: {
|
|
@@ -113,15 +115,13 @@ export const toolbarPlugin = ({
|
|
|
113
115
|
let newPluginState = {
|
|
114
116
|
...pluginState
|
|
115
117
|
};
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
newPluginState.selectedNode = newSelectedNode;
|
|
124
|
-
}
|
|
118
|
+
const shouldUpdateNode = tr.docChanged || tr.selectionSet;
|
|
119
|
+
if (shouldUpdateNode) {
|
|
120
|
+
const newSelectedNode = getSelectedNode(newState);
|
|
121
|
+
const oldNode = pluginState.selectedNode;
|
|
122
|
+
const hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
|
|
123
|
+
if (hasNodeChanged) {
|
|
124
|
+
newPluginState.selectedNode = newSelectedNode;
|
|
125
125
|
}
|
|
126
126
|
}
|
|
127
127
|
if (meta) {
|
|
@@ -198,19 +198,12 @@ export const toolbarPlugin = ({
|
|
|
198
198
|
if (!editorView) {
|
|
199
199
|
return null;
|
|
200
200
|
}
|
|
201
|
-
|
|
202
|
-
return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
|
|
203
|
-
api: api,
|
|
204
|
-
editorView: editorView,
|
|
205
|
-
mountPoint: popupsMountPoint,
|
|
206
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
return /*#__PURE__*/React.createElement(SelectionToolbar, {
|
|
201
|
+
return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
|
|
210
202
|
api: api,
|
|
211
203
|
editorView: editorView,
|
|
212
204
|
mountPoint: popupsMountPoint,
|
|
213
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
|
|
205
|
+
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
|
|
206
|
+
calculateToolbarPosition: cachedCalculateToolbarPosition
|
|
214
207
|
});
|
|
215
208
|
} : undefined
|
|
216
209
|
};
|
|
@@ -61,40 +61,25 @@ const usePluginState = conditionalHooksFactory(() => expValEquals('platform_edit
|
|
|
61
61
|
selectedNode
|
|
62
62
|
};
|
|
63
63
|
});
|
|
64
|
-
const useOnPositionCalculated =
|
|
64
|
+
const useOnPositionCalculated = (editorView, cachedCalculateToolbarPosition) => {
|
|
65
65
|
const onPositionCalculated = useCallback(position => {
|
|
66
66
|
try {
|
|
67
|
-
const toolbarTitle = SELECTION_TOOLBAR_LABEL;
|
|
68
|
-
|
|
69
67
|
// Show special position on cell selection only when editor controls experiment is enabled
|
|
70
68
|
const isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
|
|
71
69
|
const isCellSelection = ('$anchorCell' in editorView.state.selection);
|
|
72
70
|
if (isCellSelection && isEditorControlsEnabled) {
|
|
73
|
-
return calculateToolbarPositionOnCellSelection(
|
|
71
|
+
return calculateToolbarPositionOnCellSelection(SELECTION_TOOLBAR_LABEL)(editorView, position);
|
|
74
72
|
}
|
|
75
|
-
return calculateToolbarPositionTrackHead(
|
|
73
|
+
return cachedCalculateToolbarPosition ? cachedCalculateToolbarPosition(editorView, position) : calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL)(editorView, position);
|
|
76
74
|
} catch (error) {
|
|
77
75
|
logException(error, {
|
|
78
76
|
location: 'editor-plugin-toolbar/selectionToolbar'
|
|
79
77
|
});
|
|
80
78
|
return position;
|
|
81
79
|
}
|
|
82
|
-
}, [editorView]);
|
|
80
|
+
}, [editorView, cachedCalculateToolbarPosition]);
|
|
83
81
|
return onPositionCalculated;
|
|
84
|
-
}
|
|
85
|
-
const onPositionCalculated = useCallback(position => {
|
|
86
|
-
const toolbarTitle = SELECTION_TOOLBAR_LABEL;
|
|
87
|
-
|
|
88
|
-
// Show special position on cell selection only when editor controls experiment is enabled
|
|
89
|
-
const isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
|
|
90
|
-
const isCellSelection = ('$anchorCell' in editorView.state.selection);
|
|
91
|
-
if (isCellSelection && isEditorControlsEnabled) {
|
|
92
|
-
return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
|
|
93
|
-
}
|
|
94
|
-
return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
|
|
95
|
-
}, [editorView]);
|
|
96
|
-
return onPositionCalculated;
|
|
97
|
-
});
|
|
82
|
+
};
|
|
98
83
|
export const SelectionToolbar = ({
|
|
99
84
|
api,
|
|
100
85
|
editorView,
|
|
@@ -109,7 +94,7 @@ export const SelectionToolbar = ({
|
|
|
109
94
|
shouldShowToolbar,
|
|
110
95
|
editorViewMode,
|
|
111
96
|
// @ts-ignore
|
|
112
|
-
selection
|
|
97
|
+
selection: _selection
|
|
113
98
|
} = usePluginState(api);
|
|
114
99
|
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';
|
|
115
100
|
const selectionToolbarConfigEnabled = shouldShowSelectionToolbar(contextualFormattingEnabled, editorToolbarDockingPreference);
|
|
@@ -153,7 +138,7 @@ export const SelectionToolbar = ({
|
|
|
153
138
|
var _api$analytics;
|
|
154
139
|
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent(payload);
|
|
155
140
|
},
|
|
156
|
-
keyboardNavigation:
|
|
141
|
+
keyboardNavigation: keyboardNavigation
|
|
157
142
|
}, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
|
|
158
143
|
toolbar: toolbar,
|
|
159
144
|
components: components,
|
|
@@ -168,7 +153,8 @@ export const SelectionToolbarWithErrorBoundary = ({
|
|
|
168
153
|
api,
|
|
169
154
|
editorView,
|
|
170
155
|
mountPoint,
|
|
171
|
-
disableSelectionToolbarWhenPinned
|
|
156
|
+
disableSelectionToolbarWhenPinned,
|
|
157
|
+
calculateToolbarPosition
|
|
172
158
|
}) => {
|
|
173
159
|
var _api$analytics2;
|
|
174
160
|
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
@@ -180,6 +166,7 @@ export const SelectionToolbarWithErrorBoundary = ({
|
|
|
180
166
|
api: api,
|
|
181
167
|
editorView: editorView,
|
|
182
168
|
mountPoint: mountPoint,
|
|
183
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
|
|
169
|
+
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
|
|
170
|
+
calculateToolbarPosition: calculateToolbarPosition
|
|
184
171
|
}));
|
|
185
172
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -21,7 +21,7 @@ const getInlineTextToolbarComponents = () => {
|
|
|
21
21
|
return /*#__PURE__*/React.createElement(Toolbar, {
|
|
22
22
|
label: SELECTION_TOOLBAR_LABEL,
|
|
23
23
|
actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
|
|
24
|
-
testId:
|
|
24
|
+
testId: 'editor-floating-toolbar'
|
|
25
25
|
}, children);
|
|
26
26
|
}
|
|
27
27
|
}];
|
|
@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { bind } from 'bind-event-listener';
|
|
7
7
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
8
|
+
import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
|
|
8
9
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
10
|
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
10
11
|
import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
|
|
@@ -12,8 +13,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
12
13
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
14
|
import { getSelectionToolbarOpenExperiencePlugin } from './pm-plugins/experiences/selection-toolbar-open-experience';
|
|
14
15
|
import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
15
|
-
import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
|
|
16
|
-
import {
|
|
16
|
+
import { DEFAULT_POPUP_SELECTORS, SELECTION_TOOLBAR_LABEL } from './ui/consts';
|
|
17
|
+
import { SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
|
|
17
18
|
import { getToolbarComponents } from './ui/toolbar-components';
|
|
18
19
|
import { isEventInContainer } from './ui/utils/toolbar';
|
|
19
20
|
function getSelectedNode(editorState) {
|
|
@@ -76,6 +77,7 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
76
77
|
breakpointPreset = config.breakpointPreset;
|
|
77
78
|
var registry = createComponentRegistry();
|
|
78
79
|
registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
|
|
80
|
+
var cachedCalculateToolbarPosition = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL) : undefined;
|
|
79
81
|
return {
|
|
80
82
|
name: 'toolbar',
|
|
81
83
|
actions: {
|
|
@@ -119,15 +121,13 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
119
121
|
apply: function apply(tr, pluginState, _, newState) {
|
|
120
122
|
var meta = tr.getMeta(editorToolbarPluginKey);
|
|
121
123
|
var newPluginState = _objectSpread({}, pluginState);
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
newPluginState.selectedNode = newSelectedNode;
|
|
130
|
-
}
|
|
124
|
+
var shouldUpdateNode = tr.docChanged || tr.selectionSet;
|
|
125
|
+
if (shouldUpdateNode) {
|
|
126
|
+
var newSelectedNode = getSelectedNode(newState);
|
|
127
|
+
var oldNode = pluginState.selectedNode;
|
|
128
|
+
var hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
|
|
129
|
+
if (hasNodeChanged) {
|
|
130
|
+
newPluginState.selectedNode = newSelectedNode;
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
if (meta) {
|
|
@@ -202,19 +202,12 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
202
202
|
if (!editorView) {
|
|
203
203
|
return null;
|
|
204
204
|
}
|
|
205
|
-
|
|
206
|
-
return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
|
|
207
|
-
api: api,
|
|
208
|
-
editorView: editorView,
|
|
209
|
-
mountPoint: popupsMountPoint,
|
|
210
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
|
|
211
|
-
});
|
|
212
|
-
}
|
|
213
|
-
return /*#__PURE__*/React.createElement(SelectionToolbar, {
|
|
205
|
+
return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
|
|
214
206
|
api: api,
|
|
215
207
|
editorView: editorView,
|
|
216
208
|
mountPoint: popupsMountPoint,
|
|
217
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
|
|
209
|
+
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
|
|
210
|
+
calculateToolbarPosition: cachedCalculateToolbarPosition
|
|
218
211
|
});
|
|
219
212
|
} : undefined
|
|
220
213
|
};
|
|
@@ -62,42 +62,25 @@ var usePluginState = conditionalHooksFactory(function () {
|
|
|
62
62
|
selectedNode: selectedNode
|
|
63
63
|
};
|
|
64
64
|
});
|
|
65
|
-
var useOnPositionCalculated =
|
|
66
|
-
return fg('platform_editor_toolbar_aifc_patch_7');
|
|
67
|
-
}, function (editorView) {
|
|
65
|
+
var useOnPositionCalculated = function useOnPositionCalculated(editorView, cachedCalculateToolbarPosition) {
|
|
68
66
|
var onPositionCalculated = useCallback(function (position) {
|
|
69
67
|
try {
|
|
70
|
-
var toolbarTitle = SELECTION_TOOLBAR_LABEL;
|
|
71
|
-
|
|
72
68
|
// Show special position on cell selection only when editor controls experiment is enabled
|
|
73
69
|
var isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
|
|
74
70
|
var isCellSelection = ('$anchorCell' in editorView.state.selection);
|
|
75
71
|
if (isCellSelection && isEditorControlsEnabled) {
|
|
76
|
-
return calculateToolbarPositionOnCellSelection(
|
|
72
|
+
return calculateToolbarPositionOnCellSelection(SELECTION_TOOLBAR_LABEL)(editorView, position);
|
|
77
73
|
}
|
|
78
|
-
return calculateToolbarPositionTrackHead(
|
|
74
|
+
return cachedCalculateToolbarPosition ? cachedCalculateToolbarPosition(editorView, position) : calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL)(editorView, position);
|
|
79
75
|
} catch (error) {
|
|
80
76
|
logException(error, {
|
|
81
77
|
location: 'editor-plugin-toolbar/selectionToolbar'
|
|
82
78
|
});
|
|
83
79
|
return position;
|
|
84
80
|
}
|
|
85
|
-
}, [editorView]);
|
|
81
|
+
}, [editorView, cachedCalculateToolbarPosition]);
|
|
86
82
|
return onPositionCalculated;
|
|
87
|
-
}
|
|
88
|
-
var onPositionCalculated = useCallback(function (position) {
|
|
89
|
-
var toolbarTitle = SELECTION_TOOLBAR_LABEL;
|
|
90
|
-
|
|
91
|
-
// Show special position on cell selection only when editor controls experiment is enabled
|
|
92
|
-
var isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
|
|
93
|
-
var isCellSelection = ('$anchorCell' in editorView.state.selection);
|
|
94
|
-
if (isCellSelection && isEditorControlsEnabled) {
|
|
95
|
-
return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
|
|
96
|
-
}
|
|
97
|
-
return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
|
|
98
|
-
}, [editorView]);
|
|
99
|
-
return onPositionCalculated;
|
|
100
|
-
});
|
|
83
|
+
};
|
|
101
84
|
export var SelectionToolbar = function SelectionToolbar(_ref) {
|
|
102
85
|
var _api$toolbar$actions$, _api$toolbar, _api$toolbar2;
|
|
103
86
|
var api = _ref.api,
|
|
@@ -110,7 +93,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
|
|
|
110
93
|
currentUserIntent = _usePluginState.currentUserIntent,
|
|
111
94
|
shouldShowToolbar = _usePluginState.shouldShowToolbar,
|
|
112
95
|
editorViewMode = _usePluginState.editorViewMode,
|
|
113
|
-
|
|
96
|
+
_selection = _usePluginState.selection;
|
|
114
97
|
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';
|
|
115
98
|
var selectionToolbarConfigEnabled = shouldShowSelectionToolbar(contextualFormattingEnabled, editorToolbarDockingPreference);
|
|
116
99
|
var intl = useIntl();
|
|
@@ -154,7 +137,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
|
|
|
154
137
|
var _api$analytics;
|
|
155
138
|
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
|
|
156
139
|
},
|
|
157
|
-
keyboardNavigation:
|
|
140
|
+
keyboardNavigation: keyboardNavigation
|
|
158
141
|
}, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
|
|
159
142
|
toolbar: toolbar,
|
|
160
143
|
components: components,
|
|
@@ -170,7 +153,8 @@ export var SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErro
|
|
|
170
153
|
var api = _ref2.api,
|
|
171
154
|
editorView = _ref2.editorView,
|
|
172
155
|
mountPoint = _ref2.mountPoint,
|
|
173
|
-
disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned
|
|
156
|
+
disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned,
|
|
157
|
+
calculateToolbarPosition = _ref2.calculateToolbarPosition;
|
|
174
158
|
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
175
159
|
component: ACTION_SUBJECT.TOOLBAR,
|
|
176
160
|
componentId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
|
|
@@ -180,6 +164,7 @@ export var SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErro
|
|
|
180
164
|
api: api,
|
|
181
165
|
editorView: editorView,
|
|
182
166
|
mountPoint: mountPoint,
|
|
183
|
-
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
|
|
167
|
+
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
|
|
168
|
+
calculateToolbarPosition: calculateToolbarPosition
|
|
184
169
|
}));
|
|
185
170
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -21,7 +21,7 @@ var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
|
|
|
21
21
|
return /*#__PURE__*/React.createElement(Toolbar, {
|
|
22
22
|
label: SELECTION_TOOLBAR_LABEL,
|
|
23
23
|
actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
|
|
24
|
-
testId:
|
|
24
|
+
testId: 'editor-floating-toolbar'
|
|
25
25
|
}, children);
|
|
26
26
|
}
|
|
27
27
|
}];
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { toolbarPlugin } from './toolbarPlugin';
|
|
2
|
-
export type { ToolbarPlugin } from './toolbarPluginType';
|
|
3
|
-
export type { ToolbarPluginOptions } from './types';
|
|
2
|
+
export type { ToolbarPlugin, EditorToolbarPluginState } from './toolbarPluginType';
|
|
3
|
+
export type { ToolbarPluginOptions, RegisterComponentsAction } from './types';
|
|
@@ -2,12 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
3
|
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import type { ToolbarPlugin } from '../../toolbarPluginType';
|
|
5
|
+
import type { CalculateToolbarPosition } from './types';
|
|
5
6
|
type SelectionToolbarProps = {
|
|
6
7
|
api?: ExtractInjectionAPI<ToolbarPlugin>;
|
|
8
|
+
calculateToolbarPosition?: CalculateToolbarPosition;
|
|
7
9
|
disableSelectionToolbarWhenPinned: boolean;
|
|
8
10
|
editorView: EditorView;
|
|
9
11
|
mountPoint: HTMLElement | undefined;
|
|
10
12
|
};
|
|
11
13
|
export declare const SelectionToolbar: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element | null;
|
|
12
|
-
export declare const SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element;
|
|
14
|
+
export declare const SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, calculateToolbarPosition, }: SelectionToolbarProps) => React.JSX.Element;
|
|
13
15
|
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { toolbarPlugin } from './toolbarPlugin';
|
|
2
|
-
export type { ToolbarPlugin } from './toolbarPluginType';
|
|
3
|
-
export type { ToolbarPluginOptions } from './types';
|
|
2
|
+
export type { ToolbarPlugin, EditorToolbarPluginState } from './toolbarPluginType';
|
|
3
|
+
export type { ToolbarPluginOptions, RegisterComponentsAction } from './types';
|
|
@@ -2,12 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
3
|
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import type { ToolbarPlugin } from '../../toolbarPluginType';
|
|
5
|
+
import type { CalculateToolbarPosition } from './types';
|
|
5
6
|
type SelectionToolbarProps = {
|
|
6
7
|
api?: ExtractInjectionAPI<ToolbarPlugin>;
|
|
8
|
+
calculateToolbarPosition?: CalculateToolbarPosition;
|
|
7
9
|
disableSelectionToolbarWhenPinned: boolean;
|
|
8
10
|
editorView: EditorView;
|
|
9
11
|
mountPoint: HTMLElement | undefined;
|
|
10
12
|
};
|
|
11
13
|
export declare const SelectionToolbar: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element | null;
|
|
12
|
-
export declare const SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element;
|
|
14
|
+
export declare const SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, calculateToolbarPosition, }: SelectionToolbarProps) => React.JSX.Element;
|
|
13
15
|
export {};
|
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.5",
|
|
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.4.0",
|
|
43
|
-
"@atlaskit/tmp-editor-statsig": "^16.
|
|
43
|
+
"@atlaskit/tmp-editor-statsig": "^16.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": "^111.
|
|
49
|
+
"@atlaskit/editor-common": "^111.8.0",
|
|
50
50
|
"react": "^18.2.0"
|
|
51
51
|
},
|
|
52
52
|
"platform-feature-flags": {
|