@atlaskit/editor-plugin-toolbar 3.3.2 → 3.3.3
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 +8 -0
- package/dist/cjs/pm-plugins/experiences/SelectionToolbarOpenExperience.js +84 -0
- package/dist/cjs/toolbarPlugin.js +10 -3
- package/dist/es2019/pm-plugins/experiences/SelectionToolbarOpenExperience.js +78 -0
- package/dist/es2019/toolbarPlugin.js +10 -3
- package/dist/esm/pm-plugins/experiences/SelectionToolbarOpenExperience.js +78 -0
- package/dist/esm/toolbarPlugin.js +10 -3
- package/dist/types/pm-plugins/experiences/SelectionToolbarOpenExperience.d.ts +11 -0
- package/dist/types-ts4.5/pm-plugins/experiences/SelectionToolbarOpenExperience.d.ts +11 -0
- package/package.json +2 -2
- package/dist/cjs/pm-plugins/experiences/ContextualToolbarOpenExperience.js +0 -73
- package/dist/es2019/pm-plugins/experiences/ContextualToolbarOpenExperience.js +0 -61
- package/dist/esm/pm-plugins/experiences/ContextualToolbarOpenExperience.js +0 -66
- package/dist/types/pm-plugins/experiences/ContextualToolbarOpenExperience.d.ts +0 -5
- package/dist/types-ts4.5/pm-plugins/experiences/ContextualToolbarOpenExperience.d.ts +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-toolbar
|
|
2
2
|
|
|
3
|
+
## 3.3.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`74c8f9fcfdf9d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/74c8f9fcfdf9d) -
|
|
8
|
+
Selection toolbar experience tracking
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 3.3.2
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _experiences = require("@atlaskit/editor-common/experiences");
|
|
8
|
+
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
9
|
+
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
10
|
+
var pluginKey = new _state.PluginKey('selectionToolbarOpenExperience');
|
|
11
|
+
var _default = exports.default = function _default(_ref) {
|
|
12
|
+
var popupsMountPointRef = _ref.popupsMountPointRef,
|
|
13
|
+
editorViewDomRef = _ref.editorViewDomRef;
|
|
14
|
+
var getTarget = function getTarget() {
|
|
15
|
+
var _editorViewDomRef$cur;
|
|
16
|
+
return popupsMountPointRef.current || ((_editorViewDomRef$cur = editorViewDomRef.current) === null || _editorViewDomRef$cur === void 0 ? void 0 : _editorViewDomRef$cur.closest('.ak-editor-content-area'));
|
|
17
|
+
};
|
|
18
|
+
var experience = new _experiences.Experience('selection-toolbar-open', {
|
|
19
|
+
checks: [new _experiences.ExperienceCheckTimeout(500), new _experiences.ExperienceCheckDomMutation({
|
|
20
|
+
onDomMutation: function onDomMutation(_ref2) {
|
|
21
|
+
var mutations = _ref2.mutations;
|
|
22
|
+
if (mutations.some(isSelectionToolbarAddedInMutation)) {
|
|
23
|
+
return {
|
|
24
|
+
status: 'success'
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
observeConfig: function observeConfig() {
|
|
29
|
+
return {
|
|
30
|
+
target: getTarget(),
|
|
31
|
+
options: {
|
|
32
|
+
childList: true,
|
|
33
|
+
subtree: true
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
})]
|
|
38
|
+
});
|
|
39
|
+
return new _safePlugin.SafePlugin({
|
|
40
|
+
key: pluginKey,
|
|
41
|
+
state: {
|
|
42
|
+
init: function init() {
|
|
43
|
+
return {};
|
|
44
|
+
},
|
|
45
|
+
apply: function apply(_tr, pluginState, oldState, newState) {
|
|
46
|
+
if (!oldState.selection.empty && newState.selection.empty) {
|
|
47
|
+
experience.abort();
|
|
48
|
+
}
|
|
49
|
+
return pluginState;
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
props: {
|
|
53
|
+
handleDOMEvents: {
|
|
54
|
+
mouseup: function mouseup(view) {
|
|
55
|
+
if (!view.state.selection.empty) {
|
|
56
|
+
experience.start();
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
keydown: function keydown(_view, _ref3) {
|
|
60
|
+
var shiftKey = _ref3.shiftKey,
|
|
61
|
+
key = _ref3.key;
|
|
62
|
+
if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
|
|
63
|
+
experience.start();
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
view: function view() {
|
|
69
|
+
return {
|
|
70
|
+
destroy: function destroy() {
|
|
71
|
+
experience.abort();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
var isSelectionToolbarAddedInMutation = function isSelectionToolbarAddedInMutation(_ref4) {
|
|
78
|
+
var type = _ref4.type,
|
|
79
|
+
addedNodes = _ref4.addedNodes;
|
|
80
|
+
return type === 'childList' && Array.from(addedNodes).some(isSelectionToolbarWithinNode);
|
|
81
|
+
};
|
|
82
|
+
var isSelectionToolbarWithinNode = function isSelectionToolbarWithinNode(node) {
|
|
83
|
+
return node instanceof HTMLElement && !!node.querySelector('[data-testid="editor-floating-toolbar"]');
|
|
84
|
+
};
|
|
@@ -15,7 +15,7 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
|
15
15
|
var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
|
|
16
16
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
17
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
18
|
-
var
|
|
18
|
+
var _SelectionToolbarOpenExperience = _interopRequireDefault(require("./pm-plugins/experiences/SelectionToolbarOpenExperience"));
|
|
19
19
|
var _pluginKey = require("./pm-plugins/plugin-key");
|
|
20
20
|
var _consts = require("./ui/consts");
|
|
21
21
|
var _SelectionToolbar = require("./ui/SelectionToolbar");
|
|
@@ -75,6 +75,8 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
75
75
|
disableSelectionToolbar: false,
|
|
76
76
|
disableSelectionToolbarWhenPinned: false
|
|
77
77
|
} : _ref$config;
|
|
78
|
+
var popupsMountPointRef = {};
|
|
79
|
+
var editorViewDomRef = {};
|
|
78
80
|
var disableSelectionToolbar = config.disableSelectionToolbar,
|
|
79
81
|
disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned;
|
|
80
82
|
var registry = (0, _editorToolbarModel.createComponentRegistry)();
|
|
@@ -134,6 +136,7 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
134
136
|
}
|
|
135
137
|
},
|
|
136
138
|
view: function view(_view) {
|
|
139
|
+
editorViewDomRef.current = _view.dom;
|
|
137
140
|
var unbind = (0, _bindEventListener.bind)(_view.root, {
|
|
138
141
|
type: 'mouseup',
|
|
139
142
|
listener: function listener(ev) {
|
|
@@ -180,15 +183,19 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
180
183
|
});
|
|
181
184
|
}
|
|
182
185
|
}].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_experience_tracking', 'isEnabled', true) ? [{
|
|
183
|
-
name: '
|
|
186
|
+
name: 'selectionToolbarOpenExperience',
|
|
184
187
|
plugin: function plugin() {
|
|
185
|
-
return (0,
|
|
188
|
+
return (0, _SelectionToolbarOpenExperience.default)({
|
|
189
|
+
popupsMountPointRef: popupsMountPointRef,
|
|
190
|
+
editorViewDomRef: editorViewDomRef
|
|
191
|
+
});
|
|
186
192
|
}
|
|
187
193
|
}] : []));
|
|
188
194
|
},
|
|
189
195
|
contentComponent: !disableSelectionToolbar ? function (_ref2) {
|
|
190
196
|
var editorView = _ref2.editorView,
|
|
191
197
|
popupsMountPoint = _ref2.popupsMountPoint;
|
|
198
|
+
popupsMountPointRef.current = popupsMountPoint;
|
|
192
199
|
if (!editorView) {
|
|
193
200
|
return null;
|
|
194
201
|
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
|
|
2
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
const pluginKey = new PluginKey('selectionToolbarOpenExperience');
|
|
5
|
+
export default (({
|
|
6
|
+
popupsMountPointRef,
|
|
7
|
+
editorViewDomRef
|
|
8
|
+
}) => {
|
|
9
|
+
const getTarget = () => {
|
|
10
|
+
var _editorViewDomRef$cur;
|
|
11
|
+
return popupsMountPointRef.current || ((_editorViewDomRef$cur = editorViewDomRef.current) === null || _editorViewDomRef$cur === void 0 ? void 0 : _editorViewDomRef$cur.closest('.ak-editor-content-area'));
|
|
12
|
+
};
|
|
13
|
+
const experience = new Experience('selection-toolbar-open', {
|
|
14
|
+
checks: [new ExperienceCheckTimeout(500), new ExperienceCheckDomMutation({
|
|
15
|
+
onDomMutation: ({
|
|
16
|
+
mutations
|
|
17
|
+
}) => {
|
|
18
|
+
if (mutations.some(isSelectionToolbarAddedInMutation)) {
|
|
19
|
+
return {
|
|
20
|
+
status: 'success'
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
observeConfig: () => ({
|
|
25
|
+
target: getTarget(),
|
|
26
|
+
options: {
|
|
27
|
+
childList: true,
|
|
28
|
+
subtree: true
|
|
29
|
+
}
|
|
30
|
+
})
|
|
31
|
+
})]
|
|
32
|
+
});
|
|
33
|
+
return new SafePlugin({
|
|
34
|
+
key: pluginKey,
|
|
35
|
+
state: {
|
|
36
|
+
init: () => ({}),
|
|
37
|
+
apply: (_tr, pluginState, oldState, newState) => {
|
|
38
|
+
if (!oldState.selection.empty && newState.selection.empty) {
|
|
39
|
+
experience.abort();
|
|
40
|
+
}
|
|
41
|
+
return pluginState;
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
props: {
|
|
45
|
+
handleDOMEvents: {
|
|
46
|
+
mouseup: view => {
|
|
47
|
+
if (!view.state.selection.empty) {
|
|
48
|
+
experience.start();
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
keydown: (_view, {
|
|
52
|
+
shiftKey,
|
|
53
|
+
key
|
|
54
|
+
}) => {
|
|
55
|
+
if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
|
|
56
|
+
experience.start();
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
view: () => {
|
|
62
|
+
return {
|
|
63
|
+
destroy: () => {
|
|
64
|
+
experience.abort();
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
const isSelectionToolbarAddedInMutation = ({
|
|
71
|
+
type,
|
|
72
|
+
addedNodes
|
|
73
|
+
}) => {
|
|
74
|
+
return type === 'childList' && Array.from(addedNodes).some(isSelectionToolbarWithinNode);
|
|
75
|
+
};
|
|
76
|
+
const isSelectionToolbarWithinNode = node => {
|
|
77
|
+
return node instanceof HTMLElement && !!node.querySelector('[data-testid="editor-floating-toolbar"]');
|
|
78
|
+
};
|
|
@@ -6,7 +6,7 @@ import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-p
|
|
|
6
6
|
import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
8
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
|
-
import
|
|
9
|
+
import selectionToolbarOpenExperience from './pm-plugins/experiences/SelectionToolbarOpenExperience';
|
|
10
10
|
import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
11
11
|
import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
|
|
12
12
|
import { SelectionToolbar, SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
|
|
@@ -60,6 +60,8 @@ export const toolbarPlugin = ({
|
|
|
60
60
|
disableSelectionToolbarWhenPinned: false
|
|
61
61
|
}
|
|
62
62
|
}) => {
|
|
63
|
+
const popupsMountPointRef = {};
|
|
64
|
+
const editorViewDomRef = {};
|
|
63
65
|
const {
|
|
64
66
|
disableSelectionToolbar,
|
|
65
67
|
disableSelectionToolbarWhenPinned
|
|
@@ -125,6 +127,7 @@ export const toolbarPlugin = ({
|
|
|
125
127
|
}
|
|
126
128
|
},
|
|
127
129
|
view(view) {
|
|
130
|
+
editorViewDomRef.current = view.dom;
|
|
128
131
|
const unbind = bind(view.root, {
|
|
129
132
|
type: 'mouseup',
|
|
130
133
|
listener: function (ev) {
|
|
@@ -171,14 +174,18 @@ export const toolbarPlugin = ({
|
|
|
171
174
|
});
|
|
172
175
|
}
|
|
173
176
|
}, ...(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
|
|
174
|
-
name: '
|
|
175
|
-
plugin: () =>
|
|
177
|
+
name: 'selectionToolbarOpenExperience',
|
|
178
|
+
plugin: () => selectionToolbarOpenExperience({
|
|
179
|
+
popupsMountPointRef,
|
|
180
|
+
editorViewDomRef
|
|
181
|
+
})
|
|
176
182
|
}] : [])];
|
|
177
183
|
},
|
|
178
184
|
contentComponent: !disableSelectionToolbar ? ({
|
|
179
185
|
editorView,
|
|
180
186
|
popupsMountPoint
|
|
181
187
|
}) => {
|
|
188
|
+
popupsMountPointRef.current = popupsMountPoint;
|
|
182
189
|
if (!editorView) {
|
|
183
190
|
return null;
|
|
184
191
|
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
|
|
2
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
var pluginKey = new PluginKey('selectionToolbarOpenExperience');
|
|
5
|
+
export default (function (_ref) {
|
|
6
|
+
var popupsMountPointRef = _ref.popupsMountPointRef,
|
|
7
|
+
editorViewDomRef = _ref.editorViewDomRef;
|
|
8
|
+
var getTarget = function getTarget() {
|
|
9
|
+
var _editorViewDomRef$cur;
|
|
10
|
+
return popupsMountPointRef.current || ((_editorViewDomRef$cur = editorViewDomRef.current) === null || _editorViewDomRef$cur === void 0 ? void 0 : _editorViewDomRef$cur.closest('.ak-editor-content-area'));
|
|
11
|
+
};
|
|
12
|
+
var experience = new Experience('selection-toolbar-open', {
|
|
13
|
+
checks: [new ExperienceCheckTimeout(500), new ExperienceCheckDomMutation({
|
|
14
|
+
onDomMutation: function onDomMutation(_ref2) {
|
|
15
|
+
var mutations = _ref2.mutations;
|
|
16
|
+
if (mutations.some(isSelectionToolbarAddedInMutation)) {
|
|
17
|
+
return {
|
|
18
|
+
status: 'success'
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
observeConfig: function observeConfig() {
|
|
23
|
+
return {
|
|
24
|
+
target: getTarget(),
|
|
25
|
+
options: {
|
|
26
|
+
childList: true,
|
|
27
|
+
subtree: true
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
})]
|
|
32
|
+
});
|
|
33
|
+
return new SafePlugin({
|
|
34
|
+
key: pluginKey,
|
|
35
|
+
state: {
|
|
36
|
+
init: function init() {
|
|
37
|
+
return {};
|
|
38
|
+
},
|
|
39
|
+
apply: function apply(_tr, pluginState, oldState, newState) {
|
|
40
|
+
if (!oldState.selection.empty && newState.selection.empty) {
|
|
41
|
+
experience.abort();
|
|
42
|
+
}
|
|
43
|
+
return pluginState;
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
props: {
|
|
47
|
+
handleDOMEvents: {
|
|
48
|
+
mouseup: function mouseup(view) {
|
|
49
|
+
if (!view.state.selection.empty) {
|
|
50
|
+
experience.start();
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
keydown: function keydown(_view, _ref3) {
|
|
54
|
+
var shiftKey = _ref3.shiftKey,
|
|
55
|
+
key = _ref3.key;
|
|
56
|
+
if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
|
|
57
|
+
experience.start();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
view: function view() {
|
|
63
|
+
return {
|
|
64
|
+
destroy: function destroy() {
|
|
65
|
+
experience.abort();
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
var isSelectionToolbarAddedInMutation = function isSelectionToolbarAddedInMutation(_ref4) {
|
|
72
|
+
var type = _ref4.type,
|
|
73
|
+
addedNodes = _ref4.addedNodes;
|
|
74
|
+
return type === 'childList' && Array.from(addedNodes).some(isSelectionToolbarWithinNode);
|
|
75
|
+
};
|
|
76
|
+
var isSelectionToolbarWithinNode = function isSelectionToolbarWithinNode(node) {
|
|
77
|
+
return node instanceof HTMLElement && !!node.querySelector('[data-testid="editor-floating-toolbar"]');
|
|
78
|
+
};
|
|
@@ -10,7 +10,7 @@ import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-p
|
|
|
10
10
|
import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
|
|
11
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
12
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
|
-
import
|
|
13
|
+
import selectionToolbarOpenExperience from './pm-plugins/experiences/SelectionToolbarOpenExperience';
|
|
14
14
|
import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
|
|
15
15
|
import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
|
|
16
16
|
import { SelectionToolbar, SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
|
|
@@ -68,6 +68,8 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
68
68
|
disableSelectionToolbar: false,
|
|
69
69
|
disableSelectionToolbarWhenPinned: false
|
|
70
70
|
} : _ref$config;
|
|
71
|
+
var popupsMountPointRef = {};
|
|
72
|
+
var editorViewDomRef = {};
|
|
71
73
|
var disableSelectionToolbar = config.disableSelectionToolbar,
|
|
72
74
|
disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned;
|
|
73
75
|
var registry = createComponentRegistry();
|
|
@@ -127,6 +129,7 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
127
129
|
}
|
|
128
130
|
},
|
|
129
131
|
view: function view(_view) {
|
|
132
|
+
editorViewDomRef.current = _view.dom;
|
|
130
133
|
var unbind = bind(_view.root, {
|
|
131
134
|
type: 'mouseup',
|
|
132
135
|
listener: function listener(ev) {
|
|
@@ -173,15 +176,19 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
173
176
|
});
|
|
174
177
|
}
|
|
175
178
|
}].concat(_toConsumableArray(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
|
|
176
|
-
name: '
|
|
179
|
+
name: 'selectionToolbarOpenExperience',
|
|
177
180
|
plugin: function plugin() {
|
|
178
|
-
return
|
|
181
|
+
return selectionToolbarOpenExperience({
|
|
182
|
+
popupsMountPointRef: popupsMountPointRef,
|
|
183
|
+
editorViewDomRef: editorViewDomRef
|
|
184
|
+
});
|
|
179
185
|
}
|
|
180
186
|
}] : []));
|
|
181
187
|
},
|
|
182
188
|
contentComponent: !disableSelectionToolbar ? function (_ref2) {
|
|
183
189
|
var editorView = _ref2.editorView,
|
|
184
190
|
popupsMountPoint = _ref2.popupsMountPoint;
|
|
191
|
+
popupsMountPointRef.current = popupsMountPoint;
|
|
185
192
|
if (!editorView) {
|
|
186
193
|
return null;
|
|
187
194
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
type SelectionToolbarOpenExperienceOptions = {
|
|
3
|
+
editorViewDomRef: {
|
|
4
|
+
current?: HTMLElement;
|
|
5
|
+
};
|
|
6
|
+
popupsMountPointRef: {
|
|
7
|
+
current?: HTMLElement;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
declare const _default: ({ popupsMountPointRef, editorViewDomRef, }: SelectionToolbarOpenExperienceOptions) => SafePlugin<{}>;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
type SelectionToolbarOpenExperienceOptions = {
|
|
3
|
+
editorViewDomRef: {
|
|
4
|
+
current?: HTMLElement;
|
|
5
|
+
};
|
|
6
|
+
popupsMountPointRef: {
|
|
7
|
+
current?: HTMLElement;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
declare const _default: ({ popupsMountPointRef, editorViewDomRef, }: SelectionToolbarOpenExperienceOptions) => SafePlugin<{}>;
|
|
11
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-toolbar",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.3",
|
|
4
4
|
"description": "Toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"@atlaskit/editor-common": "^110.
|
|
49
|
+
"@atlaskit/editor-common": "^110.17.0",
|
|
50
50
|
"react": "^18.2.0"
|
|
51
51
|
},
|
|
52
52
|
"platform-feature-flags": {
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _experiences = require("@atlaskit/editor-common/experiences");
|
|
10
|
-
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
11
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
12
|
-
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; }
|
|
13
|
-
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; }
|
|
14
|
-
var pluginKey = new _state.PluginKey('contextualToolbarOpenExperience');
|
|
15
|
-
var _default = exports.default = function _default() {
|
|
16
|
-
var contextualToolbarOpenExperience = new _experiences.Experience('platform-editor-contextual-toolbar-open-experience', {
|
|
17
|
-
checks: [new _experiences.ExperienceCheckTimeout(500), new _experiences.ExperienceCheckDomMutation({
|
|
18
|
-
onDomMutation: function onDomMutation(_ref) {
|
|
19
|
-
var mutations = _ref.mutations;
|
|
20
|
-
if (mutations.some(isMutationAddingContextualToolbar)) {
|
|
21
|
-
return {
|
|
22
|
-
status: 'success'
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
observeConfig: function observeConfig() {
|
|
27
|
-
return {
|
|
28
|
-
target: document.body,
|
|
29
|
-
options: {
|
|
30
|
-
childList: true,
|
|
31
|
-
subtree: true
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
})]
|
|
36
|
-
});
|
|
37
|
-
return new _safePlugin.SafePlugin({
|
|
38
|
-
key: pluginKey,
|
|
39
|
-
state: {
|
|
40
|
-
init: function init() {
|
|
41
|
-
return {
|
|
42
|
-
shouldShowContextualToolbar: false
|
|
43
|
-
};
|
|
44
|
-
},
|
|
45
|
-
apply: function apply(_tr, pluginState, _, newState) {
|
|
46
|
-
var isTextSelection = newState.selection instanceof _state.TextSelection;
|
|
47
|
-
var isNotEmptySelection = !newState.selection.empty;
|
|
48
|
-
var shouldShowContextualToolbar = isTextSelection && isNotEmptySelection;
|
|
49
|
-
if (shouldShowContextualToolbar && !pluginState.shouldShowContextualToolbar) {
|
|
50
|
-
contextualToolbarOpenExperience.start();
|
|
51
|
-
} else if (!shouldShowContextualToolbar && pluginState.shouldShowContextualToolbar) {
|
|
52
|
-
contextualToolbarOpenExperience.abort();
|
|
53
|
-
}
|
|
54
|
-
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
55
|
-
shouldShowContextualToolbar: shouldShowContextualToolbar
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
view: function view() {
|
|
60
|
-
return {
|
|
61
|
-
destroy: function destroy() {
|
|
62
|
-
contextualToolbarOpenExperience.abort();
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
};
|
|
68
|
-
var isMutationAddingContextualToolbar = function isMutationAddingContextualToolbar(mutation) {
|
|
69
|
-
return mutation.type === 'childList' && Array.from(mutation.addedNodes).some(nodeIncludesContextualToolbar);
|
|
70
|
-
};
|
|
71
|
-
var nodeIncludesContextualToolbar = function nodeIncludesContextualToolbar(node) {
|
|
72
|
-
return node instanceof HTMLElement && node.getAttribute('data-testid') === 'popup-wrapper' && node.querySelector('[data-testid="text-section"]');
|
|
73
|
-
};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
|
|
2
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
-
import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
-
const pluginKey = new PluginKey('contextualToolbarOpenExperience');
|
|
5
|
-
export default (() => {
|
|
6
|
-
const contextualToolbarOpenExperience = new Experience('platform-editor-contextual-toolbar-open-experience', {
|
|
7
|
-
checks: [new ExperienceCheckTimeout(500), new ExperienceCheckDomMutation({
|
|
8
|
-
onDomMutation: ({
|
|
9
|
-
mutations
|
|
10
|
-
}) => {
|
|
11
|
-
if (mutations.some(isMutationAddingContextualToolbar)) {
|
|
12
|
-
return {
|
|
13
|
-
status: 'success'
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
observeConfig: () => ({
|
|
18
|
-
target: document.body,
|
|
19
|
-
options: {
|
|
20
|
-
childList: true,
|
|
21
|
-
subtree: true
|
|
22
|
-
}
|
|
23
|
-
})
|
|
24
|
-
})]
|
|
25
|
-
});
|
|
26
|
-
return new SafePlugin({
|
|
27
|
-
key: pluginKey,
|
|
28
|
-
state: {
|
|
29
|
-
init: () => ({
|
|
30
|
-
shouldShowContextualToolbar: false
|
|
31
|
-
}),
|
|
32
|
-
apply: (_tr, pluginState, _, newState) => {
|
|
33
|
-
const isTextSelection = newState.selection instanceof TextSelection;
|
|
34
|
-
const isNotEmptySelection = !newState.selection.empty;
|
|
35
|
-
const shouldShowContextualToolbar = isTextSelection && isNotEmptySelection;
|
|
36
|
-
if (shouldShowContextualToolbar && !pluginState.shouldShowContextualToolbar) {
|
|
37
|
-
contextualToolbarOpenExperience.start();
|
|
38
|
-
} else if (!shouldShowContextualToolbar && pluginState.shouldShowContextualToolbar) {
|
|
39
|
-
contextualToolbarOpenExperience.abort();
|
|
40
|
-
}
|
|
41
|
-
return {
|
|
42
|
-
...pluginState,
|
|
43
|
-
shouldShowContextualToolbar
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
view: () => {
|
|
48
|
-
return {
|
|
49
|
-
destroy: () => {
|
|
50
|
-
contextualToolbarOpenExperience.abort();
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
});
|
|
56
|
-
const isMutationAddingContextualToolbar = mutation => {
|
|
57
|
-
return mutation.type === 'childList' && Array.from(mutation.addedNodes).some(nodeIncludesContextualToolbar);
|
|
58
|
-
};
|
|
59
|
-
const nodeIncludesContextualToolbar = node => {
|
|
60
|
-
return node instanceof HTMLElement && node.getAttribute('data-testid') === 'popup-wrapper' && node.querySelector('[data-testid="text-section"]');
|
|
61
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
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; }
|
|
3
|
-
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) { _defineProperty(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; }
|
|
4
|
-
import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
|
|
5
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
6
|
-
import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
|
-
var pluginKey = new PluginKey('contextualToolbarOpenExperience');
|
|
8
|
-
export default (function () {
|
|
9
|
-
var contextualToolbarOpenExperience = new Experience('platform-editor-contextual-toolbar-open-experience', {
|
|
10
|
-
checks: [new ExperienceCheckTimeout(500), new ExperienceCheckDomMutation({
|
|
11
|
-
onDomMutation: function onDomMutation(_ref) {
|
|
12
|
-
var mutations = _ref.mutations;
|
|
13
|
-
if (mutations.some(isMutationAddingContextualToolbar)) {
|
|
14
|
-
return {
|
|
15
|
-
status: 'success'
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
observeConfig: function observeConfig() {
|
|
20
|
-
return {
|
|
21
|
-
target: document.body,
|
|
22
|
-
options: {
|
|
23
|
-
childList: true,
|
|
24
|
-
subtree: true
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
})]
|
|
29
|
-
});
|
|
30
|
-
return new SafePlugin({
|
|
31
|
-
key: pluginKey,
|
|
32
|
-
state: {
|
|
33
|
-
init: function init() {
|
|
34
|
-
return {
|
|
35
|
-
shouldShowContextualToolbar: false
|
|
36
|
-
};
|
|
37
|
-
},
|
|
38
|
-
apply: function apply(_tr, pluginState, _, newState) {
|
|
39
|
-
var isTextSelection = newState.selection instanceof TextSelection;
|
|
40
|
-
var isNotEmptySelection = !newState.selection.empty;
|
|
41
|
-
var shouldShowContextualToolbar = isTextSelection && isNotEmptySelection;
|
|
42
|
-
if (shouldShowContextualToolbar && !pluginState.shouldShowContextualToolbar) {
|
|
43
|
-
contextualToolbarOpenExperience.start();
|
|
44
|
-
} else if (!shouldShowContextualToolbar && pluginState.shouldShowContextualToolbar) {
|
|
45
|
-
contextualToolbarOpenExperience.abort();
|
|
46
|
-
}
|
|
47
|
-
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
48
|
-
shouldShowContextualToolbar: shouldShowContextualToolbar
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
view: function view() {
|
|
53
|
-
return {
|
|
54
|
-
destroy: function destroy() {
|
|
55
|
-
contextualToolbarOpenExperience.abort();
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
var isMutationAddingContextualToolbar = function isMutationAddingContextualToolbar(mutation) {
|
|
62
|
-
return mutation.type === 'childList' && Array.from(mutation.addedNodes).some(nodeIncludesContextualToolbar);
|
|
63
|
-
};
|
|
64
|
-
var nodeIncludesContextualToolbar = function nodeIncludesContextualToolbar(node) {
|
|
65
|
-
return node instanceof HTMLElement && node.getAttribute('data-testid') === 'popup-wrapper' && node.querySelector('[data-testid="text-section"]');
|
|
66
|
-
};
|