@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 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 _utils = require("@atlaskit/editor-prosemirror/utils");
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, _utils.findSelectedNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock])(selection);
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, _utils.findParentNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.listItem, nodes.taskItem])(selection);
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
- if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
130
- var shouldUpdateNode = tr.docChanged || tr.selectionSet;
131
- if (shouldUpdateNode) {
132
- var newSelectedNode = getSelectedNode(newState);
133
- var oldNode = pluginState.selectedNode;
134
- var hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
135
- if (hasNodeChanged) {
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
- if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_patch_7')) {
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 = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
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)(toolbarTitle)(editorView, position);
80
+ return (0, _utils.calculateToolbarPositionOnCellSelection)(_consts.SELECTION_TOOLBAR_LABEL)(editorView, position);
85
81
  }
86
- return (0, _utils.calculateToolbarPositionTrackHead)(toolbarTitle)(editorView, position);
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
- }, function (editorView) {
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
- selection = _usePluginState.selection;
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: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? keyboardNavigation : undefined
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
  };
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -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: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
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 { SelectionToolbar, SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
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
- if (expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
117
- const shouldUpdateNode = tr.docChanged || tr.selectionSet;
118
- if (shouldUpdateNode) {
119
- const newSelectedNode = getSelectedNode(newState);
120
- const oldNode = pluginState.selectedNode;
121
- const hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
122
- if (hasNodeChanged) {
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
- if (fg('platform_editor_toolbar_aifc_patch_7')) {
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 = conditionalHooksFactory(() => fg('platform_editor_toolbar_aifc_patch_7'), editorView => {
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(toolbarTitle)(editorView, position);
71
+ return calculateToolbarPositionOnCellSelection(SELECTION_TOOLBAR_LABEL)(editorView, position);
74
72
  }
75
- return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
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
- }, editorView => {
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: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? keyboardNavigation : undefined
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: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
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 { SelectionToolbar, SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
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
- if (expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
123
- var shouldUpdateNode = tr.docChanged || tr.selectionSet;
124
- if (shouldUpdateNode) {
125
- var newSelectedNode = getSelectedNode(newState);
126
- var oldNode = pluginState.selectedNode;
127
- var hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
128
- if (hasNodeChanged) {
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
- if (fg('platform_editor_toolbar_aifc_patch_7')) {
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 = conditionalHooksFactory(function () {
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(toolbarTitle)(editorView, position);
72
+ return calculateToolbarPositionOnCellSelection(SELECTION_TOOLBAR_LABEL)(editorView, position);
77
73
  }
78
- return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
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
- }, function (editorView) {
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
- selection = _usePluginState.selection;
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: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? keyboardNavigation : undefined
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: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
24
+ testId: 'editor-floating-toolbar'
25
25
  }, children);
26
26
  }
27
27
  }];
@@ -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 {};
@@ -0,0 +1,6 @@
1
+ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ export type Position = {
3
+ left?: number;
4
+ top?: number;
5
+ };
6
+ export type CalculateToolbarPosition = (editorView: EditorView, position: Position) => Position;
@@ -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 {};
@@ -0,0 +1,6 @@
1
+ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ export type Position = {
3
+ left?: number;
4
+ top?: number;
5
+ };
6
+ export type CalculateToolbarPosition = (editorView: EditorView, position: Position) => Position;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-toolbar",
3
- "version": "4.0.3",
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.13.0",
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.7.0",
49
+ "@atlaskit/editor-common": "^111.8.0",
50
50
  "react": "^18.2.0"
51
51
  },
52
52
  "platform-feature-flags": {