@atlaskit/editor-plugin-selection-toolbar 3.4.1 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/pm-plugins/commands.js +15 -5
- package/dist/cjs/selectionToolbarPlugin.js +21 -4
- package/dist/cjs/ui/PageVisibilityWatcher.js +60 -0
- package/dist/es2019/pm-plugins/commands.js +10 -0
- package/dist/es2019/selectionToolbarPlugin.js +20 -5
- package/dist/es2019/ui/PageVisibilityWatcher.js +30 -0
- package/dist/esm/pm-plugins/commands.js +14 -4
- package/dist/esm/selectionToolbarPlugin.js +22 -5
- package/dist/esm/ui/PageVisibilityWatcher.js +53 -0
- package/dist/types/pm-plugins/commands.d.ts +3 -0
- package/dist/types/selectionToolbarPluginType.d.ts +1 -0
- package/dist/types/ui/PageVisibilityWatcher.d.ts +6 -0
- package/dist/types-ts4.5/pm-plugins/commands.d.ts +3 -0
- package/dist/types-ts4.5/selectionToolbarPluginType.d.ts +1 -0
- package/dist/types-ts4.5/ui/PageVisibilityWatcher.d.ts +6 -0
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-selection-toolbar
|
|
2
2
|
|
|
3
|
+
## 3.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#141267](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141267)
|
|
8
|
+
[`105e8bc4d7bd5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/105e8bc4d7bd5) -
|
|
9
|
+
ED-27501 apply user preference across tabs without a refresh
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 3.4.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.toggleToolbar = exports.setToolbarDocking = void 0;
|
|
6
|
+
exports.updateToolbarDocking = exports.toggleToolbar = exports.setToolbarDocking = void 0;
|
|
7
7
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
8
8
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
9
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
@@ -18,12 +18,22 @@ var toggleToolbar = exports.toggleToolbar = function toggleToolbar(_ref) {
|
|
|
18
18
|
return tr;
|
|
19
19
|
};
|
|
20
20
|
};
|
|
21
|
-
var
|
|
22
|
-
var toolbarDocking = _ref3.toolbarDocking
|
|
23
|
-
userPreferencesProvider = _ref3.userPreferencesProvider,
|
|
24
|
-
editorAnalyticsApi = _ref3.editorAnalyticsApi;
|
|
21
|
+
var updateToolbarDocking = exports.updateToolbarDocking = function updateToolbarDocking(_ref3) {
|
|
22
|
+
var toolbarDocking = _ref3.toolbarDocking;
|
|
25
23
|
return function (_ref4) {
|
|
26
24
|
var tr = _ref4.tr;
|
|
25
|
+
tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
|
|
26
|
+
toolbarDocking: toolbarDocking
|
|
27
|
+
});
|
|
28
|
+
return tr;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
var setToolbarDocking = exports.setToolbarDocking = function setToolbarDocking(_ref5) {
|
|
32
|
+
var toolbarDocking = _ref5.toolbarDocking,
|
|
33
|
+
userPreferencesProvider = _ref5.userPreferencesProvider,
|
|
34
|
+
editorAnalyticsApi = _ref5.editorAnalyticsApi;
|
|
35
|
+
return function (_ref6) {
|
|
36
|
+
var tr = _ref6.tr;
|
|
27
37
|
// We currently ignore any update failures, need to confirm this is the desired behaviour
|
|
28
38
|
userPreferencesProvider === null || userPreferencesProvider === void 0 || userPreferencesProvider.updatePreference('toolbarDockingInitialPosition', toolbarDocking);
|
|
29
39
|
tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
|
|
@@ -18,10 +18,11 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
|
18
18
|
var _commands = require("./pm-plugins/commands");
|
|
19
19
|
var _pluginKey = require("./pm-plugins/plugin-key");
|
|
20
20
|
var _overflowToolbarConfig = require("./ui/overflow-toolbar-config");
|
|
21
|
+
var _PageVisibilityWatcher = require("./ui/PageVisibilityWatcher");
|
|
21
22
|
var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
|
|
22
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
24
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
|
-
var
|
|
25
|
+
var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
|
|
25
26
|
if (contextualFormattingEnabled && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
26
27
|
var _userPreferencesProvi;
|
|
27
28
|
return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
|
|
@@ -79,6 +80,16 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
79
80
|
userPreferencesProvider: userPreferencesProvider,
|
|
80
81
|
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
|
|
81
82
|
}))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
|
|
83
|
+
},
|
|
84
|
+
refreshToolbarDocking: function refreshToolbarDocking() {
|
|
85
|
+
if (userPreferencesProvider) {
|
|
86
|
+
var _api$core$actions$exe4;
|
|
87
|
+
var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
88
|
+
return (_api$core$actions$exe4 = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.updateToolbarDocking)({
|
|
89
|
+
toolbarDocking: userToolbarDockingPref
|
|
90
|
+
}))) !== null && _api$core$actions$exe4 !== void 0 ? _api$core$actions$exe4 : false;
|
|
91
|
+
}
|
|
92
|
+
return false;
|
|
82
93
|
}
|
|
83
94
|
},
|
|
84
95
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -101,7 +112,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
101
112
|
return {
|
|
102
113
|
selectionStable: false,
|
|
103
114
|
hide: false,
|
|
104
|
-
toolbarDocking:
|
|
115
|
+
toolbarDocking: getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
|
|
105
116
|
};
|
|
106
117
|
},
|
|
107
118
|
apply: function apply(tr, pluginState) {
|
|
@@ -117,7 +128,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
117
128
|
var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
|
|
118
129
|
if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
|
|
119
130
|
previousToolbarDocking = toolbarDockingPreference;
|
|
120
|
-
var userToolbarDockingPref =
|
|
131
|
+
var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
121
132
|
if (pluginState.toolbarDocking !== userToolbarDockingPref) {
|
|
122
133
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
123
134
|
toolbarDocking: userToolbarDockingPref
|
|
@@ -165,7 +176,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
165
176
|
if (toolbarDockingPreference !== undefined) {
|
|
166
177
|
var _api$analytics2;
|
|
167
178
|
isPreferenceInitialized = true;
|
|
168
|
-
var userToolbarDockingPref =
|
|
179
|
+
var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
169
180
|
var tr = newState.tr;
|
|
170
181
|
if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
|
|
171
182
|
tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
|
|
@@ -309,6 +320,12 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
|
|
|
309
320
|
});
|
|
310
321
|
}
|
|
311
322
|
},
|
|
323
|
+
contentComponent: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_user_preferences_provider_update') ? function () {
|
|
324
|
+
return /*#__PURE__*/_react.default.createElement(_PageVisibilityWatcher.PageVisibilityWatcher, {
|
|
325
|
+
api: api,
|
|
326
|
+
userPreferencesProvider: userPreferencesProvider
|
|
327
|
+
});
|
|
328
|
+
} : undefined,
|
|
312
329
|
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
|
|
313
330
|
exposure: true
|
|
314
331
|
}) ? primaryToolbarComponent : undefined
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.PageVisibilityWatcher = void 0;
|
|
8
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
9
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var _bindEventListener = require("bind-event-listener");
|
|
12
|
+
var _monitoring = require("@atlaskit/editor-common/monitoring");
|
|
13
|
+
var PageVisibilityWatcher = exports.PageVisibilityWatcher = function PageVisibilityWatcher(_ref) {
|
|
14
|
+
var api = _ref.api,
|
|
15
|
+
userPreferencesProvider = _ref.userPreferencesProvider;
|
|
16
|
+
(0, _react.useEffect)(function () {
|
|
17
|
+
if (!userPreferencesProvider || !api) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
return (0, _bindEventListener.bind)(document, {
|
|
21
|
+
type: 'visibilitychange',
|
|
22
|
+
listener: function () {
|
|
23
|
+
var _listener = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
|
|
24
|
+
var _api$selectionToolbar, _api$selectionToolbar2;
|
|
25
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
26
|
+
while (1) switch (_context.prev = _context.next) {
|
|
27
|
+
case 0:
|
|
28
|
+
if (!(document.visibilityState === 'visible')) {
|
|
29
|
+
_context.next = 10;
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
_context.prev = 1;
|
|
33
|
+
_context.next = 4;
|
|
34
|
+
return userPreferencesProvider.loadPreferences();
|
|
35
|
+
case 4:
|
|
36
|
+
_context.next = 9;
|
|
37
|
+
break;
|
|
38
|
+
case 6:
|
|
39
|
+
_context.prev = 6;
|
|
40
|
+
_context.t0 = _context["catch"](1);
|
|
41
|
+
(0, _monitoring.logException)(_context.t0, {
|
|
42
|
+
location: 'editor-plugin-selection-toolbar/PageVisibilityWatcher'
|
|
43
|
+
});
|
|
44
|
+
case 9:
|
|
45
|
+
api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.actions) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar2 = _api$selectionToolbar.refreshToolbarDocking) === null || _api$selectionToolbar2 === void 0 || _api$selectionToolbar2.call(_api$selectionToolbar);
|
|
46
|
+
case 10:
|
|
47
|
+
case "end":
|
|
48
|
+
return _context.stop();
|
|
49
|
+
}
|
|
50
|
+
}, _callee, null, [[1, 6]]);
|
|
51
|
+
}));
|
|
52
|
+
function listener() {
|
|
53
|
+
return _listener.apply(this, arguments);
|
|
54
|
+
}
|
|
55
|
+
return listener;
|
|
56
|
+
}()
|
|
57
|
+
});
|
|
58
|
+
}, [api, userPreferencesProvider]);
|
|
59
|
+
return null;
|
|
60
|
+
};
|
|
@@ -12,6 +12,16 @@ export const toggleToolbar = ({
|
|
|
12
12
|
});
|
|
13
13
|
return tr;
|
|
14
14
|
};
|
|
15
|
+
export const updateToolbarDocking = ({
|
|
16
|
+
toolbarDocking
|
|
17
|
+
}) => ({
|
|
18
|
+
tr
|
|
19
|
+
}) => {
|
|
20
|
+
tr.setMeta(selectionToolbarPluginKey, {
|
|
21
|
+
toolbarDocking
|
|
22
|
+
});
|
|
23
|
+
return tr;
|
|
24
|
+
};
|
|
15
25
|
export const setToolbarDocking = ({
|
|
16
26
|
toolbarDocking,
|
|
17
27
|
userPreferencesProvider,
|
|
@@ -6,11 +6,12 @@ import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellS
|
|
|
6
6
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
8
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
|
-
import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
|
|
9
|
+
import { setToolbarDocking, toggleToolbar, updateToolbarDocking } from './pm-plugins/commands';
|
|
10
10
|
import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
11
11
|
import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
|
|
12
|
+
import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
|
|
12
13
|
import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
|
|
13
|
-
const
|
|
14
|
+
const getToolbarDocking = (contextualFormattingEnabled, userPreferencesProvider) => {
|
|
14
15
|
if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
15
16
|
var _userPreferencesProvi;
|
|
16
17
|
return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
|
|
@@ -70,6 +71,16 @@ export const selectionToolbarPlugin = ({
|
|
|
70
71
|
userPreferencesProvider,
|
|
71
72
|
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
|
|
72
73
|
}))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
|
|
74
|
+
},
|
|
75
|
+
refreshToolbarDocking: () => {
|
|
76
|
+
if (userPreferencesProvider) {
|
|
77
|
+
var _api$core$actions$exe4;
|
|
78
|
+
const userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
79
|
+
return (_api$core$actions$exe4 = api === null || api === void 0 ? void 0 : api.core.actions.execute(updateToolbarDocking({
|
|
80
|
+
toolbarDocking: userToolbarDockingPref
|
|
81
|
+
}))) !== null && _api$core$actions$exe4 !== void 0 ? _api$core$actions$exe4 : false;
|
|
82
|
+
}
|
|
83
|
+
return false;
|
|
73
84
|
}
|
|
74
85
|
},
|
|
75
86
|
getSharedState(editorState) {
|
|
@@ -92,7 +103,7 @@ export const selectionToolbarPlugin = ({
|
|
|
92
103
|
return {
|
|
93
104
|
selectionStable: false,
|
|
94
105
|
hide: false,
|
|
95
|
-
toolbarDocking:
|
|
106
|
+
toolbarDocking: getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
|
|
96
107
|
};
|
|
97
108
|
},
|
|
98
109
|
apply(tr, pluginState) {
|
|
@@ -111,7 +122,7 @@ export const selectionToolbarPlugin = ({
|
|
|
111
122
|
const toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
|
|
112
123
|
if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
|
|
113
124
|
previousToolbarDocking = toolbarDockingPreference;
|
|
114
|
-
const userToolbarDockingPref =
|
|
125
|
+
const userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
115
126
|
if (pluginState.toolbarDocking !== userToolbarDockingPref) {
|
|
116
127
|
return {
|
|
117
128
|
...pluginState,
|
|
@@ -160,7 +171,7 @@ export const selectionToolbarPlugin = ({
|
|
|
160
171
|
if (toolbarDockingPreference !== undefined) {
|
|
161
172
|
var _api$analytics2;
|
|
162
173
|
isPreferenceInitialized = true;
|
|
163
|
-
const userToolbarDockingPref =
|
|
174
|
+
const userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
164
175
|
const tr = newState.tr;
|
|
165
176
|
if (!fg('platform_editor_controls_patch_4')) {
|
|
166
177
|
tr.setMeta(selectionToolbarPluginKey, {
|
|
@@ -301,6 +312,10 @@ export const selectionToolbarPlugin = ({
|
|
|
301
312
|
};
|
|
302
313
|
}
|
|
303
314
|
},
|
|
315
|
+
contentComponent: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_user_preferences_provider_update') ? () => /*#__PURE__*/React.createElement(PageVisibilityWatcher, {
|
|
316
|
+
api: api,
|
|
317
|
+
userPreferencesProvider: userPreferencesProvider
|
|
318
|
+
}) : undefined,
|
|
304
319
|
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
|
|
305
320
|
exposure: true
|
|
306
321
|
}) ? primaryToolbarComponent : undefined
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { bind } from 'bind-event-listener';
|
|
3
|
+
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
4
|
+
export const PageVisibilityWatcher = ({
|
|
5
|
+
api,
|
|
6
|
+
userPreferencesProvider
|
|
7
|
+
}) => {
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (!userPreferencesProvider || !api) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
return bind(document, {
|
|
13
|
+
type: 'visibilitychange',
|
|
14
|
+
listener: async () => {
|
|
15
|
+
if (document.visibilityState === 'visible') {
|
|
16
|
+
var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
|
|
17
|
+
try {
|
|
18
|
+
await userPreferencesProvider.loadPreferences();
|
|
19
|
+
} catch (error) {
|
|
20
|
+
logException(error, {
|
|
21
|
+
location: 'editor-plugin-selection-toolbar/PageVisibilityWatcher'
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.refreshToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
}, [api, userPreferencesProvider]);
|
|
29
|
+
return null;
|
|
30
|
+
};
|
|
@@ -12,12 +12,22 @@ export var toggleToolbar = function toggleToolbar(_ref) {
|
|
|
12
12
|
return tr;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
|
-
export var
|
|
16
|
-
var toolbarDocking = _ref3.toolbarDocking
|
|
17
|
-
userPreferencesProvider = _ref3.userPreferencesProvider,
|
|
18
|
-
editorAnalyticsApi = _ref3.editorAnalyticsApi;
|
|
15
|
+
export var updateToolbarDocking = function updateToolbarDocking(_ref3) {
|
|
16
|
+
var toolbarDocking = _ref3.toolbarDocking;
|
|
19
17
|
return function (_ref4) {
|
|
20
18
|
var tr = _ref4.tr;
|
|
19
|
+
tr.setMeta(selectionToolbarPluginKey, {
|
|
20
|
+
toolbarDocking: toolbarDocking
|
|
21
|
+
});
|
|
22
|
+
return tr;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export var setToolbarDocking = function setToolbarDocking(_ref5) {
|
|
26
|
+
var toolbarDocking = _ref5.toolbarDocking,
|
|
27
|
+
userPreferencesProvider = _ref5.userPreferencesProvider,
|
|
28
|
+
editorAnalyticsApi = _ref5.editorAnalyticsApi;
|
|
29
|
+
return function (_ref6) {
|
|
30
|
+
var tr = _ref6.tr;
|
|
21
31
|
// We currently ignore any update failures, need to confirm this is the desired behaviour
|
|
22
32
|
userPreferencesProvider === null || userPreferencesProvider === void 0 || userPreferencesProvider.updatePreference('toolbarDockingInitialPosition', toolbarDocking);
|
|
23
33
|
tr.setMeta(selectionToolbarPluginKey, {
|
|
@@ -10,11 +10,12 @@ import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellS
|
|
|
10
10
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
11
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
|
-
import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
|
|
13
|
+
import { setToolbarDocking as _setToolbarDocking, toggleToolbar, updateToolbarDocking } from './pm-plugins/commands';
|
|
14
14
|
import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
15
15
|
import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
|
|
16
|
+
import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
|
|
16
17
|
import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
|
|
17
|
-
var
|
|
18
|
+
var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
|
|
18
19
|
if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
19
20
|
var _userPreferencesProvi;
|
|
20
21
|
return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
|
|
@@ -72,6 +73,16 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
|
|
|
72
73
|
userPreferencesProvider: userPreferencesProvider,
|
|
73
74
|
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
|
|
74
75
|
}))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
|
|
76
|
+
},
|
|
77
|
+
refreshToolbarDocking: function refreshToolbarDocking() {
|
|
78
|
+
if (userPreferencesProvider) {
|
|
79
|
+
var _api$core$actions$exe4;
|
|
80
|
+
var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
81
|
+
return (_api$core$actions$exe4 = api === null || api === void 0 ? void 0 : api.core.actions.execute(updateToolbarDocking({
|
|
82
|
+
toolbarDocking: userToolbarDockingPref
|
|
83
|
+
}))) !== null && _api$core$actions$exe4 !== void 0 ? _api$core$actions$exe4 : false;
|
|
84
|
+
}
|
|
85
|
+
return false;
|
|
75
86
|
}
|
|
76
87
|
},
|
|
77
88
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -94,7 +105,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
|
|
|
94
105
|
return {
|
|
95
106
|
selectionStable: false,
|
|
96
107
|
hide: false,
|
|
97
|
-
toolbarDocking:
|
|
108
|
+
toolbarDocking: getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
|
|
98
109
|
};
|
|
99
110
|
},
|
|
100
111
|
apply: function apply(tr, pluginState) {
|
|
@@ -110,7 +121,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
|
|
|
110
121
|
var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
|
|
111
122
|
if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
|
|
112
123
|
previousToolbarDocking = toolbarDockingPreference;
|
|
113
|
-
var userToolbarDockingPref =
|
|
124
|
+
var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
114
125
|
if (pluginState.toolbarDocking !== userToolbarDockingPref) {
|
|
115
126
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
116
127
|
toolbarDocking: userToolbarDockingPref
|
|
@@ -158,7 +169,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
|
|
|
158
169
|
if (toolbarDockingPreference !== undefined) {
|
|
159
170
|
var _api$analytics2;
|
|
160
171
|
isPreferenceInitialized = true;
|
|
161
|
-
var userToolbarDockingPref =
|
|
172
|
+
var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
|
|
162
173
|
var tr = newState.tr;
|
|
163
174
|
if (!fg('platform_editor_controls_patch_4')) {
|
|
164
175
|
tr.setMeta(selectionToolbarPluginKey, {
|
|
@@ -302,6 +313,12 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
|
|
|
302
313
|
});
|
|
303
314
|
}
|
|
304
315
|
},
|
|
316
|
+
contentComponent: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_user_preferences_provider_update') ? function () {
|
|
317
|
+
return /*#__PURE__*/React.createElement(PageVisibilityWatcher, {
|
|
318
|
+
api: api,
|
|
319
|
+
userPreferencesProvider: userPreferencesProvider
|
|
320
|
+
});
|
|
321
|
+
} : undefined,
|
|
305
322
|
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
|
|
306
323
|
exposure: true
|
|
307
324
|
}) ? primaryToolbarComponent : undefined
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
|
+
import { useEffect } from 'react';
|
|
4
|
+
import { bind } from 'bind-event-listener';
|
|
5
|
+
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
6
|
+
export var PageVisibilityWatcher = function PageVisibilityWatcher(_ref) {
|
|
7
|
+
var api = _ref.api,
|
|
8
|
+
userPreferencesProvider = _ref.userPreferencesProvider;
|
|
9
|
+
useEffect(function () {
|
|
10
|
+
if (!userPreferencesProvider || !api) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
return bind(document, {
|
|
14
|
+
type: 'visibilitychange',
|
|
15
|
+
listener: function () {
|
|
16
|
+
var _listener = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
17
|
+
var _api$selectionToolbar, _api$selectionToolbar2;
|
|
18
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
19
|
+
while (1) switch (_context.prev = _context.next) {
|
|
20
|
+
case 0:
|
|
21
|
+
if (!(document.visibilityState === 'visible')) {
|
|
22
|
+
_context.next = 10;
|
|
23
|
+
break;
|
|
24
|
+
}
|
|
25
|
+
_context.prev = 1;
|
|
26
|
+
_context.next = 4;
|
|
27
|
+
return userPreferencesProvider.loadPreferences();
|
|
28
|
+
case 4:
|
|
29
|
+
_context.next = 9;
|
|
30
|
+
break;
|
|
31
|
+
case 6:
|
|
32
|
+
_context.prev = 6;
|
|
33
|
+
_context.t0 = _context["catch"](1);
|
|
34
|
+
logException(_context.t0, {
|
|
35
|
+
location: 'editor-plugin-selection-toolbar/PageVisibilityWatcher'
|
|
36
|
+
});
|
|
37
|
+
case 9:
|
|
38
|
+
api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.actions) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar2 = _api$selectionToolbar.refreshToolbarDocking) === null || _api$selectionToolbar2 === void 0 || _api$selectionToolbar2.call(_api$selectionToolbar);
|
|
39
|
+
case 10:
|
|
40
|
+
case "end":
|
|
41
|
+
return _context.stop();
|
|
42
|
+
}
|
|
43
|
+
}, _callee, null, [[1, 6]]);
|
|
44
|
+
}));
|
|
45
|
+
function listener() {
|
|
46
|
+
return _listener.apply(this, arguments);
|
|
47
|
+
}
|
|
48
|
+
return listener;
|
|
49
|
+
}()
|
|
50
|
+
});
|
|
51
|
+
}, [api, userPreferencesProvider]);
|
|
52
|
+
return null;
|
|
53
|
+
};
|
|
@@ -4,6 +4,9 @@ import type { ToolbarDocking } from '../types';
|
|
|
4
4
|
export declare const toggleToolbar: ({ hide }: {
|
|
5
5
|
hide: boolean;
|
|
6
6
|
}) => EditorCommand;
|
|
7
|
+
export declare const updateToolbarDocking: ({ toolbarDocking }: {
|
|
8
|
+
toolbarDocking: ToolbarDocking;
|
|
9
|
+
}) => EditorCommand;
|
|
7
10
|
export declare const setToolbarDocking: ({ toolbarDocking, userPreferencesProvider, editorAnalyticsApi, }: {
|
|
8
11
|
toolbarDocking: ToolbarDocking;
|
|
9
12
|
userPreferencesProvider?: UserPreferencesProvider | undefined;
|
|
@@ -25,5 +25,6 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
|
|
|
25
25
|
suppressToolbar?: () => boolean;
|
|
26
26
|
unsuppressToolbar?: () => boolean;
|
|
27
27
|
setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean;
|
|
28
|
+
refreshToolbarDocking?: () => boolean;
|
|
28
29
|
};
|
|
29
30
|
}>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ExtractInjectionAPI, UserPreferencesProvider } from '@atlaskit/editor-common/types';
|
|
2
|
+
import { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
|
|
3
|
+
export declare const PageVisibilityWatcher: ({ api, userPreferencesProvider, }: {
|
|
4
|
+
api: ExtractInjectionAPI<SelectionToolbarPlugin> | undefined;
|
|
5
|
+
userPreferencesProvider?: UserPreferencesProvider | undefined;
|
|
6
|
+
}) => null;
|
|
@@ -4,6 +4,9 @@ import type { ToolbarDocking } from '../types';
|
|
|
4
4
|
export declare const toggleToolbar: ({ hide }: {
|
|
5
5
|
hide: boolean;
|
|
6
6
|
}) => EditorCommand;
|
|
7
|
+
export declare const updateToolbarDocking: ({ toolbarDocking }: {
|
|
8
|
+
toolbarDocking: ToolbarDocking;
|
|
9
|
+
}) => EditorCommand;
|
|
7
10
|
export declare const setToolbarDocking: ({ toolbarDocking, userPreferencesProvider, editorAnalyticsApi, }: {
|
|
8
11
|
toolbarDocking: ToolbarDocking;
|
|
9
12
|
userPreferencesProvider?: UserPreferencesProvider | undefined;
|
|
@@ -25,5 +25,6 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
|
|
|
25
25
|
suppressToolbar?: () => boolean;
|
|
26
26
|
unsuppressToolbar?: () => boolean;
|
|
27
27
|
setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean;
|
|
28
|
+
refreshToolbarDocking?: () => boolean;
|
|
28
29
|
};
|
|
29
30
|
}>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ExtractInjectionAPI, UserPreferencesProvider } from '@atlaskit/editor-common/types';
|
|
2
|
+
import { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
|
|
3
|
+
export declare const PageVisibilityWatcher: ({ api, userPreferencesProvider, }: {
|
|
4
|
+
api: ExtractInjectionAPI<SelectionToolbarPlugin> | undefined;
|
|
5
|
+
userPreferencesProvider?: UserPreferencesProvider | undefined;
|
|
6
|
+
}) => null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-selection-toolbar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/css": "^0.10.0",
|
|
37
|
-
"@atlaskit/editor-common": "^103.
|
|
37
|
+
"@atlaskit/editor-common": "^103.8.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-block-controls": "^3.10.0",
|
|
40
40
|
"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"@atlaskit/icon-lab": "^4.8.0",
|
|
45
45
|
"@atlaskit/menu": "^3.2.0",
|
|
46
46
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
47
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
48
|
-
"@atlaskit/tokens": "^4.
|
|
47
|
+
"@atlaskit/tmp-editor-statsig": "^4.9.0",
|
|
48
|
+
"@atlaskit/tokens": "^4.8.0",
|
|
49
49
|
"@babel/runtime": "^7.0.0",
|
|
50
50
|
"bind-event-listener": "^3.0.0"
|
|
51
51
|
},
|
|
@@ -95,6 +95,9 @@
|
|
|
95
95
|
}
|
|
96
96
|
},
|
|
97
97
|
"platform-feature-flags": {
|
|
98
|
+
"platform_editor_user_preferences_provider_update": {
|
|
99
|
+
"type": "boolean"
|
|
100
|
+
},
|
|
98
101
|
"platform_editor_controls_patch_2": {
|
|
99
102
|
"type": "boolean"
|
|
100
103
|
},
|