@atlaskit/editor-plugin-paste-options-toolbar 8.4.1 → 9.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/editor-commands/commands.js +9 -6
- package/dist/cjs/pasteOptionsToolbarPlugin.js +1 -2
- package/dist/cjs/pm-plugins/plugin-factory.js +33 -33
- package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenu.js +21 -2
- package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenuContent.compiled.css +1 -2
- package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenuContent.js +1 -1
- package/dist/cjs/ui/on-paste-actions-menu/PasteMenuComponents.js +14 -7
- package/dist/cjs/ui/on-paste-actions-menu/hasVisibleButton.js +17 -6
- package/dist/es2019/editor-commands/commands.js +9 -6
- package/dist/es2019/pasteOptionsToolbarPlugin.js +1 -2
- package/dist/es2019/pm-plugins/plugin-factory.js +4 -5
- package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenu.js +23 -4
- package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenuContent.compiled.css +1 -2
- package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenuContent.js +1 -1
- package/dist/es2019/ui/on-paste-actions-menu/PasteMenuComponents.js +17 -10
- package/dist/es2019/ui/on-paste-actions-menu/hasVisibleButton.js +10 -2
- package/dist/esm/editor-commands/commands.js +9 -6
- package/dist/esm/pasteOptionsToolbarPlugin.js +1 -2
- package/dist/esm/pm-plugins/plugin-factory.js +33 -34
- package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenu.js +23 -4
- package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenuContent.compiled.css +1 -2
- package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenuContent.js +1 -1
- package/dist/esm/ui/on-paste-actions-menu/PasteMenuComponents.js +15 -8
- package/dist/esm/ui/on-paste-actions-menu/hasVisibleButton.js +16 -5
- package/dist/types/editor-commands/commands.d.ts +3 -3
- package/dist/types/pm-plugins/main.d.ts +2 -1
- package/dist/types/pm-plugins/plugin-factory.d.ts +7 -1
- package/dist/types/types/types.d.ts +1 -1
- package/dist/types/ui/on-paste-actions-menu/PasteMenuComponents.d.ts +1 -3
- package/dist/types/ui/on-paste-actions-menu/hasVisibleButton.d.ts +5 -0
- package/dist/types-ts4.5/editor-commands/commands.d.ts +3 -3
- package/dist/types-ts4.5/pm-plugins/main.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/plugin-factory.d.ts +7 -1
- package/dist/types-ts4.5/types/types.d.ts +1 -1
- package/dist/types-ts4.5/ui/on-paste-actions-menu/PasteMenuComponents.d.ts +1 -3
- package/dist/types-ts4.5/ui/on-paste-actions-menu/hasVisibleButton.d.ts +5 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-paste-options-toolbar
|
|
2
2
|
|
|
3
|
+
## 9.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`52d4528d79431`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/52d4528d79431) -
|
|
8
|
+
[ux] EDITOR-5896 Minor paste menu cleanup. Reduce padding and remove separator from legacy paste
|
|
9
|
+
actions when there's no AI paste actions
|
|
10
|
+
|
|
11
|
+
## 9.0.0
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`7091cae4a7f26`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7091cae4a7f26) -
|
|
16
|
+
EDITOR-5607 Add analytics for new editor paste menu
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 8.4.1
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -49,7 +49,7 @@ var changeToPlainText = exports.changeToPlainText = function changeToPlainText()
|
|
|
49
49
|
};
|
|
50
50
|
return (0, _pluginFactory.createCommand)(commandAction, plaintextTransformer);
|
|
51
51
|
};
|
|
52
|
-
var changeToPlainTextWithAnalytics = exports.changeToPlainTextWithAnalytics = function changeToPlainTextWithAnalytics(editorAnalyticsAPI, sliceSize) {
|
|
52
|
+
var changeToPlainTextWithAnalytics = exports.changeToPlainTextWithAnalytics = function changeToPlainTextWithAnalytics(editorAnalyticsAPI, sliceSize, invokedFrom) {
|
|
53
53
|
return function () {
|
|
54
54
|
return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
|
|
55
55
|
action: _analytics.ACTION.PASTED,
|
|
@@ -59,7 +59,8 @@ var changeToPlainTextWithAnalytics = exports.changeToPlainTextWithAnalytics = fu
|
|
|
59
59
|
inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
|
|
60
60
|
type: _analytics.PasteTypes.plain,
|
|
61
61
|
content: _analytics.PasteContents.text,
|
|
62
|
-
pasteSize: sliceSize
|
|
62
|
+
pasteSize: sliceSize,
|
|
63
|
+
invokedFrom: invokedFrom
|
|
63
64
|
}
|
|
64
65
|
})(changeToPlainText());
|
|
65
66
|
};
|
|
@@ -85,7 +86,7 @@ var changeToRichText = exports.changeToRichText = function changeToRichText() {
|
|
|
85
86
|
};
|
|
86
87
|
return (0, _pluginFactory.createCommand)(commandAction, transformer);
|
|
87
88
|
};
|
|
88
|
-
var changeToRichTextWithAnalytics = exports.changeToRichTextWithAnalytics = function changeToRichTextWithAnalytics(editorAnalyticsAPI) {
|
|
89
|
+
var changeToRichTextWithAnalytics = exports.changeToRichTextWithAnalytics = function changeToRichTextWithAnalytics(editorAnalyticsAPI, invokedFrom) {
|
|
89
90
|
return function () {
|
|
90
91
|
var payloadCallback = function payloadCallback(state) {
|
|
91
92
|
var _pastePluginState$ric;
|
|
@@ -98,7 +99,8 @@ var changeToRichTextWithAnalytics = exports.changeToRichTextWithAnalytics = func
|
|
|
98
99
|
inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
|
|
99
100
|
type: _analytics.PasteTypes.richText,
|
|
100
101
|
content: _analytics.PasteContents.text,
|
|
101
|
-
pasteSize: ((_pastePluginState$ric = pastePluginState.richTextSlice) === null || _pastePluginState$ric === void 0 ? void 0 : _pastePluginState$ric.size) || 0
|
|
102
|
+
pasteSize: ((_pastePluginState$ric = pastePluginState.richTextSlice) === null || _pastePluginState$ric === void 0 ? void 0 : _pastePluginState$ric.size) || 0,
|
|
103
|
+
invokedFrom: invokedFrom
|
|
102
104
|
}
|
|
103
105
|
};
|
|
104
106
|
};
|
|
@@ -123,7 +125,7 @@ var changeToMarkDown = exports.changeToMarkDown = function changeToMarkDown() {
|
|
|
123
125
|
};
|
|
124
126
|
return (0, _pluginFactory.createCommand)(commandAction, markdownTransformer);
|
|
125
127
|
};
|
|
126
|
-
var changeToMarkdownWithAnalytics = exports.changeToMarkdownWithAnalytics = function changeToMarkdownWithAnalytics(editorAnalyticsAPI, sliceSize) {
|
|
128
|
+
var changeToMarkdownWithAnalytics = exports.changeToMarkdownWithAnalytics = function changeToMarkdownWithAnalytics(editorAnalyticsAPI, sliceSize, invokedFrom) {
|
|
127
129
|
return function () {
|
|
128
130
|
return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
|
|
129
131
|
action: _analytics.ACTION.PASTED,
|
|
@@ -133,7 +135,8 @@ var changeToMarkdownWithAnalytics = exports.changeToMarkdownWithAnalytics = func
|
|
|
133
135
|
inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
|
|
134
136
|
type: _analytics.PasteTypes.markdown,
|
|
135
137
|
content: _analytics.PasteContents.text,
|
|
136
|
-
pasteSize: sliceSize
|
|
138
|
+
pasteSize: sliceSize,
|
|
139
|
+
invokedFrom: invokedFrom
|
|
137
140
|
}
|
|
138
141
|
})(changeToMarkDown());
|
|
139
142
|
};
|
|
@@ -22,8 +22,7 @@ var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pas
|
|
|
22
22
|
if ((0, _expValEquals.expValEquals)('platform_editor_paste_actions_menu', 'isEnabled', true)) {
|
|
23
23
|
var _api$uiControlRegistr;
|
|
24
24
|
api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _PasteMenuComponents.getPasteMenuComponents)({
|
|
25
|
-
api: api
|
|
26
|
-
editorAnalyticsAPI: editorAnalyticsAPI
|
|
25
|
+
api: api
|
|
27
26
|
}));
|
|
28
27
|
}
|
|
29
28
|
return {
|
|
@@ -13,45 +13,45 @@ var _constants = require("./constants");
|
|
|
13
13
|
var _reducer = require("./reducer");
|
|
14
14
|
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; }
|
|
15
15
|
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; }
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
var dest = (0, _utils.pluginFactory)(_types.pasteOptionsPluginKey, _reducer.reducer, {
|
|
17
|
+
mapping: function mapping(tr, pluginState) {
|
|
18
|
+
if (!tr.docChanged || !pluginState.showToolbar) {
|
|
19
|
+
return pluginState;
|
|
20
|
+
}
|
|
21
|
+
var oldPasteStartPos = pluginState.pasteStartPos;
|
|
22
|
+
var oldPasteEndPos = pluginState.pasteEndPos;
|
|
23
|
+
var newPasteStartPos = tr.mapping.map(oldPasteStartPos);
|
|
24
|
+
var newPasteEndPos = tr.mapping.map(oldPasteEndPos);
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
30
|
-
pasteEndPos: newPasteEndPos
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
if (oldPasteStartPos === newPasteStartPos && oldPasteEndPos === newPasteEndPos) {
|
|
34
|
-
return pluginState;
|
|
35
|
-
}
|
|
26
|
+
//this is true when user changes format from the toolbar.
|
|
27
|
+
//only change pasteEndPos in this case
|
|
28
|
+
if (changedFormatFromToolbar(tr)) {
|
|
36
29
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
37
|
-
pasteStartPos: newPasteStartPos,
|
|
38
30
|
pasteEndPos: newPasteEndPos
|
|
39
31
|
});
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// Detect click outside the editor
|
|
43
|
-
if (tr.getMeta('outsideProsemirrorEditorClicked')) {
|
|
44
|
-
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
45
|
-
showToolbar: false,
|
|
46
|
-
highlightContent: false
|
|
47
|
-
});
|
|
48
|
-
}
|
|
32
|
+
}
|
|
33
|
+
if (oldPasteStartPos === newPasteStartPos && oldPasteEndPos === newPasteEndPos) {
|
|
49
34
|
return pluginState;
|
|
50
35
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
36
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
37
|
+
pasteStartPos: newPasteStartPos,
|
|
38
|
+
pasteEndPos: newPasteEndPos
|
|
39
|
+
});
|
|
40
|
+
},
|
|
41
|
+
onSelectionChanged: function onSelectionChanged(tr, pluginState) {
|
|
42
|
+
// Detect click outside the editor
|
|
43
|
+
if (tr.getMeta('outsideProsemirrorEditorClicked')) {
|
|
44
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
45
|
+
showToolbar: false,
|
|
46
|
+
highlightContent: false
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
return pluginState;
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
var createPluginState = exports.createPluginState = dest.createPluginState;
|
|
53
|
+
var createCommand = exports.createCommand = dest.createCommand;
|
|
54
|
+
var getPluginState = exports.getPluginState = dest.getPluginState;
|
|
55
55
|
var changedFormatFromToolbar = function changedFormatFromToolbar(tr) {
|
|
56
56
|
var meta = tr.getMeta(_constants.PASTE_OPTIONS_META_ID);
|
|
57
57
|
if (meta && meta.type === _actions.PastePluginActionTypes.CHANGE_FORMAT) {
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.PasteActionsMenu = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
9
10
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
10
11
|
var _toolbar = require("@atlaskit/editor-common/toolbar");
|
|
11
12
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
@@ -40,12 +41,13 @@ function getPopupOffset(dom) {
|
|
|
40
41
|
return [-(window.innerWidth - rightEdge - 50), 20];
|
|
41
42
|
}
|
|
42
43
|
var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref) {
|
|
43
|
-
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
44
|
+
var _api$analytics, _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
|
|
44
45
|
var api = _ref.api,
|
|
45
46
|
editorView = _ref.editorView,
|
|
46
47
|
mountTo = _ref.mountTo,
|
|
47
48
|
boundariesElement = _ref.boundariesElement,
|
|
48
49
|
scrollableElement = _ref.scrollableElement;
|
|
50
|
+
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
49
51
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['paste'], function (states) {
|
|
50
52
|
var _states$pasteState;
|
|
51
53
|
return {
|
|
@@ -53,6 +55,7 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
|
|
|
53
55
|
};
|
|
54
56
|
}),
|
|
55
57
|
lastContentPasted = _useSharedPluginState.lastContentPasted;
|
|
58
|
+
var prevShowToolbarRef = (0, _react.useRef)(false);
|
|
56
59
|
(0, _react.useEffect)(function () {
|
|
57
60
|
if (!lastContentPasted) {
|
|
58
61
|
(0, _commands.hideToolbar)()(editorView.state, editorView.dispatch);
|
|
@@ -82,6 +85,22 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
|
|
|
82
85
|
};
|
|
83
86
|
}),
|
|
84
87
|
isToolbarShown = _useSharedPluginState2.showToolbar;
|
|
88
|
+
var aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents('ai-paste-menu')) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
89
|
+
var visibleAiActionKeys = (0, _hasVisibleButton.getVisibleKeys)(aiSurfaceComponents, ['button', 'menu-item']);
|
|
90
|
+
(0, _react.useEffect)(function () {
|
|
91
|
+
if (!prevShowToolbarRef.current && isToolbarShown) {
|
|
92
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent({
|
|
93
|
+
action: _analytics.ACTION.OPENED,
|
|
94
|
+
actionSubject: _analytics.ACTION_SUBJECT.PASTE_ACTIONS_MENU,
|
|
95
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
96
|
+
attributes: {
|
|
97
|
+
visibleAiActions: visibleAiActionKeys
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
prevShowToolbarRef.current = isToolbarShown;
|
|
102
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
103
|
+
}, [isToolbarShown, editorAnalyticsAPI]);
|
|
85
104
|
var preventEditorFocusLoss = (0, _react.useCallback)(function (e) {
|
|
86
105
|
e.preventDefault();
|
|
87
106
|
}, []);
|
|
@@ -105,7 +124,7 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
|
|
|
105
124
|
handleDismiss();
|
|
106
125
|
}
|
|
107
126
|
}, [handleDismiss]);
|
|
108
|
-
var pasteMenuComponents = (_api$
|
|
127
|
+
var pasteMenuComponents = (_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(_toolbar.PASTE_MENU.key)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [];
|
|
109
128
|
var anyComponentVisible = (0, _hasVisibleButton.hasVisibleButton)(pasteMenuComponents);
|
|
110
129
|
if (!isToolbarShown) {
|
|
111
130
|
return null;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
|
|
2
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._1rjc1b66{padding-block:var(--ds-space-050,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
2
|
+
._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
4
3
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
@@ -17,7 +17,7 @@ var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
|
|
|
17
17
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
18
18
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
19
19
|
var styles = {
|
|
20
|
-
container: "_2rko12b0
|
|
20
|
+
container: "_2rko12b0 _bfhk1bhr _16qs130s"
|
|
21
21
|
};
|
|
22
22
|
var PasteActionsMenuContent = exports.PasteActionsMenuContent = function PasteActionsMenuContent(_ref) {
|
|
23
23
|
var onMouseDown = _ref.onMouseDown,
|
|
@@ -21,6 +21,7 @@ var _clipboard = _interopRequireDefault(require("@atlaskit/icon/core/clipboard")
|
|
|
21
21
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
22
22
|
var _commands = require("../../editor-commands/commands");
|
|
23
23
|
var _types = require("../../types/types");
|
|
24
|
+
var _hasVisibleButton = require("./hasVisibleButton");
|
|
24
25
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
25
26
|
var nestedMenuStyles = {
|
|
26
27
|
narrowSection: "_10gv1lit"
|
|
@@ -38,12 +39,13 @@ var isPasteOptionSelected = exports.isPasteOptionSelected = function isPasteOpti
|
|
|
38
39
|
}
|
|
39
40
|
};
|
|
40
41
|
var PasteMenuItem = function PasteMenuItem(_ref) {
|
|
42
|
+
var _api$analytics;
|
|
41
43
|
var api = _ref.api,
|
|
42
|
-
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
|
|
43
44
|
pasteType = _ref.pasteType;
|
|
44
45
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
45
46
|
var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
|
|
46
47
|
editorView = _useEditorToolbar.editorView;
|
|
48
|
+
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
47
49
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['pasteOptionsToolbarPlugin'], function (states) {
|
|
48
50
|
var _pluginState$selected, _pluginState$plaintex, _pluginState$isPlainT;
|
|
49
51
|
var pluginState = states.pasteOptionsToolbarPluginState;
|
|
@@ -114,8 +116,7 @@ var PasteOptionsNestedMenu = function PasteOptionsNestedMenu(_ref2) {
|
|
|
114
116
|
}, children);
|
|
115
117
|
};
|
|
116
118
|
var getPasteMenuComponents = exports.getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
|
|
117
|
-
var api = _ref3.api
|
|
118
|
-
editorAnalyticsAPI = _ref3.editorAnalyticsAPI;
|
|
119
|
+
var api = _ref3.api;
|
|
119
120
|
return [{
|
|
120
121
|
type: _toolbar.PASTE_MENU.type,
|
|
121
122
|
key: _toolbar.PASTE_MENU.key
|
|
@@ -133,8 +134,17 @@ var getPasteMenuComponents = exports.getPasteMenuComponents = function getPasteM
|
|
|
133
134
|
return !((_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false);
|
|
134
135
|
},
|
|
135
136
|
component: function component(props) {
|
|
137
|
+
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
138
|
+
var allComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_toolbar.PASTE_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
139
|
+
var aiMenuItems = allComponents.filter(function (c) {
|
|
140
|
+
var _c$parents;
|
|
141
|
+
return c.type === 'menu-item' && ((_c$parents = c.parents) === null || _c$parents === void 0 ? void 0 : _c$parents.some(function (p) {
|
|
142
|
+
return p.key === _toolbar.AI_PASTE_MENU_SECTION.key;
|
|
143
|
+
}));
|
|
144
|
+
});
|
|
145
|
+
var hasVisibleAiActions = (0, _hasVisibleButton.getVisibleKeys)(aiMenuItems, ['menu-item']).length > 0;
|
|
136
146
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
|
|
137
|
-
hasSeparator:
|
|
147
|
+
hasSeparator: hasVisibleAiActions
|
|
138
148
|
}, props.children);
|
|
139
149
|
}
|
|
140
150
|
}, {
|
|
@@ -167,7 +177,6 @@ var getPasteMenuComponents = exports.getPasteMenuComponents = function getPasteM
|
|
|
167
177
|
component: function component() {
|
|
168
178
|
return /*#__PURE__*/_react.default.createElement(PasteMenuItem, {
|
|
169
179
|
api: api,
|
|
170
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
171
180
|
pasteType: "rich-text"
|
|
172
181
|
});
|
|
173
182
|
},
|
|
@@ -182,7 +191,6 @@ var getPasteMenuComponents = exports.getPasteMenuComponents = function getPasteM
|
|
|
182
191
|
component: function component() {
|
|
183
192
|
return /*#__PURE__*/_react.default.createElement(PasteMenuItem, {
|
|
184
193
|
api: api,
|
|
185
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
186
194
|
pasteType: "markdown"
|
|
187
195
|
});
|
|
188
196
|
},
|
|
@@ -197,7 +205,6 @@ var getPasteMenuComponents = exports.getPasteMenuComponents = function getPasteM
|
|
|
197
205
|
component: function component() {
|
|
198
206
|
return /*#__PURE__*/_react.default.createElement(PasteMenuItem, {
|
|
199
207
|
api: api,
|
|
200
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
201
208
|
pasteType: "plain-text"
|
|
202
209
|
});
|
|
203
210
|
},
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.hasVisibleButton = void 0;
|
|
6
|
+
exports.hasVisibleButton = exports.getVisibleKeys = void 0;
|
|
7
7
|
var _isComponentOrAncestorHidden = function isComponentOrAncestorHidden(component, componentsByKey) {
|
|
8
8
|
var _component$isHidden, _component$parents;
|
|
9
9
|
if ((_component$isHidden = component.isHidden) !== null && _component$isHidden !== void 0 && _component$isHidden.call(component)) {
|
|
@@ -16,16 +16,27 @@ var _isComponentOrAncestorHidden = function isComponentOrAncestorHidden(componen
|
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
|
-
* Returns
|
|
20
|
-
* A
|
|
19
|
+
* Returns the keys of visible button/menu-item components in the list.
|
|
20
|
+
* A component is visible when neither it nor any of its ancestors are hidden.
|
|
21
21
|
*/
|
|
22
|
-
var
|
|
22
|
+
var getVisibleKeys = exports.getVisibleKeys = function getVisibleKeys(components) {
|
|
23
|
+
var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['menu-item'];
|
|
23
24
|
var componentsByKey = new Map(components.map(function (c) {
|
|
24
25
|
return [c.key, c];
|
|
25
26
|
}));
|
|
26
27
|
return components.filter(function (c) {
|
|
27
|
-
return c.type
|
|
28
|
-
}).
|
|
28
|
+
return types.includes(c.type);
|
|
29
|
+
}).filter(function (c) {
|
|
29
30
|
return !_isComponentOrAncestorHidden(c, componentsByKey);
|
|
31
|
+
}).map(function (c) {
|
|
32
|
+
return c.key;
|
|
30
33
|
});
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Returns true when at least one menu-item button in the list is visible.
|
|
38
|
+
* A button is visible when neither it nor any of its ancestors are hidden.
|
|
39
|
+
*/
|
|
40
|
+
var hasVisibleButton = exports.hasVisibleButton = function hasVisibleButton(components) {
|
|
41
|
+
return getVisibleKeys(components).length > 0;
|
|
31
42
|
};
|
|
@@ -41,7 +41,7 @@ export const changeToPlainText = () => {
|
|
|
41
41
|
};
|
|
42
42
|
return createCommand(commandAction, plaintextTransformer);
|
|
43
43
|
};
|
|
44
|
-
export const changeToPlainTextWithAnalytics = (editorAnalyticsAPI, sliceSize) => () => {
|
|
44
|
+
export const changeToPlainTextWithAnalytics = (editorAnalyticsAPI, sliceSize, invokedFrom) => () => {
|
|
45
45
|
return withAnalytics(editorAnalyticsAPI, {
|
|
46
46
|
action: ACTION.PASTED,
|
|
47
47
|
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
@@ -50,7 +50,8 @@ export const changeToPlainTextWithAnalytics = (editorAnalyticsAPI, sliceSize) =>
|
|
|
50
50
|
inputMethod: INPUT_METHOD.TOOLBAR,
|
|
51
51
|
type: PasteTypes.plain,
|
|
52
52
|
content: PasteContents.text,
|
|
53
|
-
pasteSize: sliceSize
|
|
53
|
+
pasteSize: sliceSize,
|
|
54
|
+
invokedFrom
|
|
54
55
|
}
|
|
55
56
|
})(changeToPlainText());
|
|
56
57
|
};
|
|
@@ -75,7 +76,7 @@ export const changeToRichText = () => {
|
|
|
75
76
|
};
|
|
76
77
|
return createCommand(commandAction, transformer);
|
|
77
78
|
};
|
|
78
|
-
export const changeToRichTextWithAnalytics = editorAnalyticsAPI => () => {
|
|
79
|
+
export const changeToRichTextWithAnalytics = (editorAnalyticsAPI, invokedFrom) => () => {
|
|
79
80
|
const payloadCallback = state => {
|
|
80
81
|
var _pastePluginState$ric;
|
|
81
82
|
const pastePluginState = pasteOptionsPluginKey.getState(state);
|
|
@@ -87,7 +88,8 @@ export const changeToRichTextWithAnalytics = editorAnalyticsAPI => () => {
|
|
|
87
88
|
inputMethod: INPUT_METHOD.TOOLBAR,
|
|
88
89
|
type: PasteTypes.richText,
|
|
89
90
|
content: PasteContents.text,
|
|
90
|
-
pasteSize: ((_pastePluginState$ric = pastePluginState.richTextSlice) === null || _pastePluginState$ric === void 0 ? void 0 : _pastePluginState$ric.size) || 0
|
|
91
|
+
pasteSize: ((_pastePluginState$ric = pastePluginState.richTextSlice) === null || _pastePluginState$ric === void 0 ? void 0 : _pastePluginState$ric.size) || 0,
|
|
92
|
+
invokedFrom
|
|
91
93
|
}
|
|
92
94
|
};
|
|
93
95
|
};
|
|
@@ -111,7 +113,7 @@ export const changeToMarkDown = () => {
|
|
|
111
113
|
};
|
|
112
114
|
return createCommand(commandAction, markdownTransformer);
|
|
113
115
|
};
|
|
114
|
-
export const changeToMarkdownWithAnalytics = (editorAnalyticsAPI, sliceSize) => () => {
|
|
116
|
+
export const changeToMarkdownWithAnalytics = (editorAnalyticsAPI, sliceSize, invokedFrom) => () => {
|
|
115
117
|
return withAnalytics(editorAnalyticsAPI, {
|
|
116
118
|
action: ACTION.PASTED,
|
|
117
119
|
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
@@ -120,7 +122,8 @@ export const changeToMarkdownWithAnalytics = (editorAnalyticsAPI, sliceSize) =>
|
|
|
120
122
|
inputMethod: INPUT_METHOD.TOOLBAR,
|
|
121
123
|
type: PasteTypes.markdown,
|
|
122
124
|
content: PasteContents.text,
|
|
123
|
-
pasteSize: sliceSize
|
|
125
|
+
pasteSize: sliceSize,
|
|
126
|
+
invokedFrom
|
|
124
127
|
}
|
|
125
128
|
})(changeToMarkDown());
|
|
126
129
|
};
|
|
@@ -15,8 +15,7 @@ export const pasteOptionsToolbarPlugin = ({
|
|
|
15
15
|
if (expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true)) {
|
|
16
16
|
var _api$uiControlRegistr;
|
|
17
17
|
api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getPasteMenuComponents({
|
|
18
|
-
api
|
|
19
|
-
editorAnalyticsAPI
|
|
18
|
+
api
|
|
20
19
|
}));
|
|
21
20
|
}
|
|
22
21
|
return {
|
|
@@ -3,11 +3,7 @@ import { PastePluginActionTypes } from '../editor-actions/actions';
|
|
|
3
3
|
import { pasteOptionsPluginKey } from '../types/types';
|
|
4
4
|
import { PASTE_OPTIONS_META_ID } from './constants';
|
|
5
5
|
import { reducer } from './reducer';
|
|
6
|
-
|
|
7
|
-
createPluginState,
|
|
8
|
-
createCommand,
|
|
9
|
-
getPluginState
|
|
10
|
-
} = pluginFactory(pasteOptionsPluginKey, reducer, {
|
|
6
|
+
const dest = pluginFactory(pasteOptionsPluginKey, reducer, {
|
|
11
7
|
mapping: (tr, pluginState) => {
|
|
12
8
|
if (!tr.docChanged || !pluginState.showToolbar) {
|
|
13
9
|
return pluginState;
|
|
@@ -46,6 +42,9 @@ export const {
|
|
|
46
42
|
return pluginState;
|
|
47
43
|
}
|
|
48
44
|
});
|
|
45
|
+
export const createPluginState = dest.createPluginState;
|
|
46
|
+
export const createCommand = dest.createCommand;
|
|
47
|
+
export const getPluginState = dest.getPluginState;
|
|
49
48
|
const changedFormatFromToolbar = tr => {
|
|
50
49
|
const meta = tr.getMeta(PASTE_OPTIONS_META_ID);
|
|
51
50
|
if (meta && meta.type === PastePluginActionTypes.CHANGE_FORMAT) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, { useCallback, useEffect } from 'react';
|
|
1
|
+
import React, { useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
3
4
|
import { EditorToolbarProvider, PASTE_MENU } from '@atlaskit/editor-common/toolbar';
|
|
4
5
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -9,7 +10,7 @@ import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
|
|
|
9
10
|
import { hideToolbar, highlightContent, showToolbar } from '../../editor-commands/commands';
|
|
10
11
|
import { ToolbarDropdownOption } from '../../types/types';
|
|
11
12
|
import { isToolbarVisible } from '../toolbar';
|
|
12
|
-
import { hasVisibleButton } from './hasVisibleButton';
|
|
13
|
+
import { getVisibleKeys, hasVisibleButton } from './hasVisibleButton';
|
|
13
14
|
import { PasteActionsMenuContent } from './PasteActionsMenuContent';
|
|
14
15
|
const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
|
|
15
16
|
function getTargetElement(editorView) {
|
|
@@ -40,7 +41,8 @@ export const PasteActionsMenu = ({
|
|
|
40
41
|
boundariesElement,
|
|
41
42
|
scrollableElement
|
|
42
43
|
}) => {
|
|
43
|
-
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
44
|
+
var _api$analytics, _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
|
|
45
|
+
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
44
46
|
const {
|
|
45
47
|
lastContentPasted
|
|
46
48
|
} = useSharedPluginStateWithSelector(api, ['paste'], states => {
|
|
@@ -49,6 +51,7 @@ export const PasteActionsMenu = ({
|
|
|
49
51
|
lastContentPasted: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.lastContentPasted
|
|
50
52
|
};
|
|
51
53
|
});
|
|
54
|
+
const prevShowToolbarRef = useRef(false);
|
|
52
55
|
useEffect(() => {
|
|
53
56
|
if (!lastContentPasted) {
|
|
54
57
|
hideToolbar()(editorView.state, editorView.dispatch);
|
|
@@ -79,6 +82,22 @@ export const PasteActionsMenu = ({
|
|
|
79
82
|
showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
|
|
80
83
|
};
|
|
81
84
|
});
|
|
85
|
+
const aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents('ai-paste-menu')) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
86
|
+
const visibleAiActionKeys = getVisibleKeys(aiSurfaceComponents, ['button', 'menu-item']);
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
if (!prevShowToolbarRef.current && isToolbarShown) {
|
|
89
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent({
|
|
90
|
+
action: ACTION.OPENED,
|
|
91
|
+
actionSubject: ACTION_SUBJECT.PASTE_ACTIONS_MENU,
|
|
92
|
+
eventType: EVENT_TYPE.UI,
|
|
93
|
+
attributes: {
|
|
94
|
+
visibleAiActions: visibleAiActionKeys
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
prevShowToolbarRef.current = isToolbarShown;
|
|
99
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
100
|
+
}, [isToolbarShown, editorAnalyticsAPI]);
|
|
82
101
|
const preventEditorFocusLoss = useCallback(e => {
|
|
83
102
|
e.preventDefault();
|
|
84
103
|
}, []);
|
|
@@ -102,7 +121,7 @@ export const PasteActionsMenu = ({
|
|
|
102
121
|
handleDismiss();
|
|
103
122
|
}
|
|
104
123
|
}, [handleDismiss]);
|
|
105
|
-
const pasteMenuComponents = (_api$
|
|
124
|
+
const pasteMenuComponents = (_api$uiControlRegistr3 = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(PASTE_MENU.key)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [];
|
|
106
125
|
const anyComponentVisible = hasVisibleButton(pasteMenuComponents);
|
|
107
126
|
if (!isToolbarShown) {
|
|
108
127
|
return null;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
|
|
2
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._1rjc1b66{padding-block:var(--ds-space-050,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
2
|
+
._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
4
3
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
@@ -9,7 +9,7 @@ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
|
9
9
|
import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
|
|
10
10
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
11
11
|
const styles = {
|
|
12
|
-
container: "_2rko12b0
|
|
12
|
+
container: "_2rko12b0 _bfhk1bhr _16qs130s"
|
|
13
13
|
};
|
|
14
14
|
export const PasteActionsMenuContent = ({
|
|
15
15
|
onMouseDown,
|
|
@@ -6,13 +6,14 @@ import { cx } from '@compiled/react';
|
|
|
6
6
|
import { useIntl } from 'react-intl-next';
|
|
7
7
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
8
8
|
import { pasteOptionsToolbarMessages as messages } from '@atlaskit/editor-common/messages';
|
|
9
|
-
import { useEditorToolbar, PASTE_MENU, PASTE_MENU_SECTION, PASTE_NESTED_MENU, PASTE_MENU_NESTED_SECTION, PASTE_RICH_TEXT_MENU_ITEM, PASTE_MARKDOWN_MENU_ITEM, PASTE_PLAIN_TEXT_MENU_ITEM, PASTE_MENU_RANK, PASTE_MENU_SECTION_RANK, PASTE_NESTED_MENU_RANK, PASTE_MENU_NESTED_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
|
|
9
|
+
import { useEditorToolbar, PASTE_MENU, PASTE_MENU_SECTION, PASTE_NESTED_MENU, PASTE_MENU_NESTED_SECTION, PASTE_RICH_TEXT_MENU_ITEM, PASTE_MARKDOWN_MENU_ITEM, PASTE_PLAIN_TEXT_MENU_ITEM, PASTE_MENU_RANK, PASTE_MENU_SECTION_RANK, PASTE_NESTED_MENU_RANK, PASTE_MENU_NESTED_SECTION_RANK, AI_PASTE_MENU_SECTION } from '@atlaskit/editor-common/toolbar';
|
|
10
10
|
import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
11
11
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
12
12
|
import ClipboardIcon from '@atlaskit/icon/core/clipboard';
|
|
13
13
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
14
14
|
import { changeToMarkdownWithAnalytics, changeToPlainTextWithAnalytics, changeToRichTextWithAnalytics } from '../../editor-commands/commands';
|
|
15
15
|
import { ToolbarDropdownOption } from '../../types/types';
|
|
16
|
+
import { getVisibleKeys } from './hasVisibleButton';
|
|
16
17
|
const nestedMenuStyles = {
|
|
17
18
|
narrowSection: "_10gv1lit"
|
|
18
19
|
};
|
|
@@ -30,13 +31,14 @@ export const isPasteOptionSelected = (pasteType, selectedOption) => {
|
|
|
30
31
|
};
|
|
31
32
|
const PasteMenuItem = ({
|
|
32
33
|
api,
|
|
33
|
-
editorAnalyticsAPI,
|
|
34
34
|
pasteType
|
|
35
35
|
}) => {
|
|
36
|
+
var _api$analytics;
|
|
36
37
|
const intl = useIntl();
|
|
37
38
|
const {
|
|
38
39
|
editorView
|
|
39
40
|
} = useEditorToolbar();
|
|
41
|
+
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
40
42
|
const {
|
|
41
43
|
selectedOption,
|
|
42
44
|
plaintextLength,
|
|
@@ -109,8 +111,7 @@ const PasteOptionsNestedMenu = ({
|
|
|
109
111
|
}, children);
|
|
110
112
|
};
|
|
111
113
|
export const getPasteMenuComponents = ({
|
|
112
|
-
api
|
|
113
|
-
editorAnalyticsAPI
|
|
114
|
+
api
|
|
114
115
|
}) => [{
|
|
115
116
|
type: PASTE_MENU.type,
|
|
116
117
|
key: PASTE_MENU.key
|
|
@@ -127,9 +128,18 @@ export const getPasteMenuComponents = ({
|
|
|
127
128
|
const pluginState = api === null || api === void 0 ? void 0 : (_api$pasteOptionsTool = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool === void 0 ? void 0 : _api$pasteOptionsTool.sharedState.currentState();
|
|
128
129
|
return !((_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false);
|
|
129
130
|
},
|
|
130
|
-
component: props =>
|
|
131
|
-
|
|
132
|
-
|
|
131
|
+
component: props => {
|
|
132
|
+
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
133
|
+
const allComponents = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(PASTE_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
134
|
+
const aiMenuItems = allComponents.filter(c => {
|
|
135
|
+
var _c$parents;
|
|
136
|
+
return c.type === 'menu-item' && ((_c$parents = c.parents) === null || _c$parents === void 0 ? void 0 : _c$parents.some(p => p.key === AI_PASTE_MENU_SECTION.key));
|
|
137
|
+
});
|
|
138
|
+
const hasVisibleAiActions = getVisibleKeys(aiMenuItems, ['menu-item']).length > 0;
|
|
139
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
|
|
140
|
+
hasSeparator: hasVisibleAiActions
|
|
141
|
+
}, props.children);
|
|
142
|
+
}
|
|
133
143
|
}, {
|
|
134
144
|
type: PASTE_NESTED_MENU.type,
|
|
135
145
|
key: PASTE_NESTED_MENU.key,
|
|
@@ -155,7 +165,6 @@ export const getPasteMenuComponents = ({
|
|
|
155
165
|
type: PASTE_RICH_TEXT_MENU_ITEM.type,
|
|
156
166
|
component: () => /*#__PURE__*/React.createElement(PasteMenuItem, {
|
|
157
167
|
api: api,
|
|
158
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
159
168
|
pasteType: "rich-text"
|
|
160
169
|
}),
|
|
161
170
|
parents: [{
|
|
@@ -168,7 +177,6 @@ export const getPasteMenuComponents = ({
|
|
|
168
177
|
type: PASTE_MARKDOWN_MENU_ITEM.type,
|
|
169
178
|
component: () => /*#__PURE__*/React.createElement(PasteMenuItem, {
|
|
170
179
|
api: api,
|
|
171
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
172
180
|
pasteType: "markdown"
|
|
173
181
|
}),
|
|
174
182
|
parents: [{
|
|
@@ -181,7 +189,6 @@ export const getPasteMenuComponents = ({
|
|
|
181
189
|
type: PASTE_PLAIN_TEXT_MENU_ITEM.type,
|
|
182
190
|
component: () => /*#__PURE__*/React.createElement(PasteMenuItem, {
|
|
183
191
|
api: api,
|
|
184
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
185
192
|
pasteType: "plain-text"
|
|
186
193
|
}),
|
|
187
194
|
parents: [{
|
|
@@ -9,11 +9,19 @@ const isComponentOrAncestorHidden = (component, componentsByKey) => {
|
|
|
9
9
|
});
|
|
10
10
|
};
|
|
11
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Returns the keys of visible button/menu-item components in the list.
|
|
14
|
+
* A component is visible when neither it nor any of its ancestors are hidden.
|
|
15
|
+
*/
|
|
16
|
+
export const getVisibleKeys = (components, types = ['menu-item']) => {
|
|
17
|
+
const componentsByKey = new Map(components.map(c => [c.key, c]));
|
|
18
|
+
return components.filter(c => types.includes(c.type)).filter(c => !isComponentOrAncestorHidden(c, componentsByKey)).map(c => c.key);
|
|
19
|
+
};
|
|
20
|
+
|
|
12
21
|
/**
|
|
13
22
|
* Returns true when at least one menu-item button in the list is visible.
|
|
14
23
|
* A button is visible when neither it nor any of its ancestors are hidden.
|
|
15
24
|
*/
|
|
16
25
|
export const hasVisibleButton = components => {
|
|
17
|
-
|
|
18
|
-
return components.filter(c => c.type === 'menu-item').some(c => !isComponentOrAncestorHidden(c, componentsByKey));
|
|
26
|
+
return getVisibleKeys(components).length > 0;
|
|
19
27
|
};
|
|
@@ -43,7 +43,7 @@ export var changeToPlainText = function changeToPlainText() {
|
|
|
43
43
|
};
|
|
44
44
|
return createCommand(commandAction, plaintextTransformer);
|
|
45
45
|
};
|
|
46
|
-
export var changeToPlainTextWithAnalytics = function changeToPlainTextWithAnalytics(editorAnalyticsAPI, sliceSize) {
|
|
46
|
+
export var changeToPlainTextWithAnalytics = function changeToPlainTextWithAnalytics(editorAnalyticsAPI, sliceSize, invokedFrom) {
|
|
47
47
|
return function () {
|
|
48
48
|
return withAnalytics(editorAnalyticsAPI, {
|
|
49
49
|
action: ACTION.PASTED,
|
|
@@ -53,7 +53,8 @@ export var changeToPlainTextWithAnalytics = function changeToPlainTextWithAnalyt
|
|
|
53
53
|
inputMethod: INPUT_METHOD.TOOLBAR,
|
|
54
54
|
type: PasteTypes.plain,
|
|
55
55
|
content: PasteContents.text,
|
|
56
|
-
pasteSize: sliceSize
|
|
56
|
+
pasteSize: sliceSize,
|
|
57
|
+
invokedFrom: invokedFrom
|
|
57
58
|
}
|
|
58
59
|
})(changeToPlainText());
|
|
59
60
|
};
|
|
@@ -79,7 +80,7 @@ export var changeToRichText = function changeToRichText() {
|
|
|
79
80
|
};
|
|
80
81
|
return createCommand(commandAction, transformer);
|
|
81
82
|
};
|
|
82
|
-
export var changeToRichTextWithAnalytics = function changeToRichTextWithAnalytics(editorAnalyticsAPI) {
|
|
83
|
+
export var changeToRichTextWithAnalytics = function changeToRichTextWithAnalytics(editorAnalyticsAPI, invokedFrom) {
|
|
83
84
|
return function () {
|
|
84
85
|
var payloadCallback = function payloadCallback(state) {
|
|
85
86
|
var _pastePluginState$ric;
|
|
@@ -92,7 +93,8 @@ export var changeToRichTextWithAnalytics = function changeToRichTextWithAnalytic
|
|
|
92
93
|
inputMethod: INPUT_METHOD.TOOLBAR,
|
|
93
94
|
type: PasteTypes.richText,
|
|
94
95
|
content: PasteContents.text,
|
|
95
|
-
pasteSize: ((_pastePluginState$ric = pastePluginState.richTextSlice) === null || _pastePluginState$ric === void 0 ? void 0 : _pastePluginState$ric.size) || 0
|
|
96
|
+
pasteSize: ((_pastePluginState$ric = pastePluginState.richTextSlice) === null || _pastePluginState$ric === void 0 ? void 0 : _pastePluginState$ric.size) || 0,
|
|
97
|
+
invokedFrom: invokedFrom
|
|
96
98
|
}
|
|
97
99
|
};
|
|
98
100
|
};
|
|
@@ -117,7 +119,7 @@ export var changeToMarkDown = function changeToMarkDown() {
|
|
|
117
119
|
};
|
|
118
120
|
return createCommand(commandAction, markdownTransformer);
|
|
119
121
|
};
|
|
120
|
-
export var changeToMarkdownWithAnalytics = function changeToMarkdownWithAnalytics(editorAnalyticsAPI, sliceSize) {
|
|
122
|
+
export var changeToMarkdownWithAnalytics = function changeToMarkdownWithAnalytics(editorAnalyticsAPI, sliceSize, invokedFrom) {
|
|
121
123
|
return function () {
|
|
122
124
|
return withAnalytics(editorAnalyticsAPI, {
|
|
123
125
|
action: ACTION.PASTED,
|
|
@@ -127,7 +129,8 @@ export var changeToMarkdownWithAnalytics = function changeToMarkdownWithAnalytic
|
|
|
127
129
|
inputMethod: INPUT_METHOD.TOOLBAR,
|
|
128
130
|
type: PasteTypes.markdown,
|
|
129
131
|
content: PasteContents.text,
|
|
130
|
-
pasteSize: sliceSize
|
|
132
|
+
pasteSize: sliceSize,
|
|
133
|
+
invokedFrom: invokedFrom
|
|
131
134
|
}
|
|
132
135
|
})(changeToMarkDown());
|
|
133
136
|
};
|
|
@@ -14,8 +14,7 @@ export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref)
|
|
|
14
14
|
if (expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true)) {
|
|
15
15
|
var _api$uiControlRegistr;
|
|
16
16
|
api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getPasteMenuComponents({
|
|
17
|
-
api: api
|
|
18
|
-
editorAnalyticsAPI: editorAnalyticsAPI
|
|
17
|
+
api: api
|
|
19
18
|
}));
|
|
20
19
|
}
|
|
21
20
|
return {
|
|
@@ -6,46 +6,45 @@ import { PastePluginActionTypes } from '../editor-actions/actions';
|
|
|
6
6
|
import { pasteOptionsPluginKey } from '../types/types';
|
|
7
7
|
import { PASTE_OPTIONS_META_ID } from './constants';
|
|
8
8
|
import { reducer } from './reducer';
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
9
|
+
var dest = pluginFactory(pasteOptionsPluginKey, reducer, {
|
|
10
|
+
mapping: function mapping(tr, pluginState) {
|
|
11
|
+
if (!tr.docChanged || !pluginState.showToolbar) {
|
|
12
|
+
return pluginState;
|
|
13
|
+
}
|
|
14
|
+
var oldPasteStartPos = pluginState.pasteStartPos;
|
|
15
|
+
var oldPasteEndPos = pluginState.pasteEndPos;
|
|
16
|
+
var newPasteStartPos = tr.mapping.map(oldPasteStartPos);
|
|
17
|
+
var newPasteEndPos = tr.mapping.map(oldPasteEndPos);
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
23
|
-
pasteEndPos: newPasteEndPos
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
if (oldPasteStartPos === newPasteStartPos && oldPasteEndPos === newPasteEndPos) {
|
|
27
|
-
return pluginState;
|
|
28
|
-
}
|
|
19
|
+
//this is true when user changes format from the toolbar.
|
|
20
|
+
//only change pasteEndPos in this case
|
|
21
|
+
if (changedFormatFromToolbar(tr)) {
|
|
29
22
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
30
|
-
pasteStartPos: newPasteStartPos,
|
|
31
23
|
pasteEndPos: newPasteEndPos
|
|
32
24
|
});
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// Detect click outside the editor
|
|
36
|
-
if (tr.getMeta('outsideProsemirrorEditorClicked')) {
|
|
37
|
-
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
38
|
-
showToolbar: false,
|
|
39
|
-
highlightContent: false
|
|
40
|
-
});
|
|
41
|
-
}
|
|
25
|
+
}
|
|
26
|
+
if (oldPasteStartPos === newPasteStartPos && oldPasteEndPos === newPasteEndPos) {
|
|
42
27
|
return pluginState;
|
|
43
28
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
29
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
30
|
+
pasteStartPos: newPasteStartPos,
|
|
31
|
+
pasteEndPos: newPasteEndPos
|
|
32
|
+
});
|
|
33
|
+
},
|
|
34
|
+
onSelectionChanged: function onSelectionChanged(tr, pluginState) {
|
|
35
|
+
// Detect click outside the editor
|
|
36
|
+
if (tr.getMeta('outsideProsemirrorEditorClicked')) {
|
|
37
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
38
|
+
showToolbar: false,
|
|
39
|
+
highlightContent: false
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
return pluginState;
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
export var createPluginState = dest.createPluginState;
|
|
46
|
+
export var createCommand = dest.createCommand;
|
|
47
|
+
export var getPluginState = dest.getPluginState;
|
|
49
48
|
var changedFormatFromToolbar = function changedFormatFromToolbar(tr) {
|
|
50
49
|
var meta = tr.getMeta(PASTE_OPTIONS_META_ID);
|
|
51
50
|
if (meta && meta.type === PastePluginActionTypes.CHANGE_FORMAT) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, { useCallback, useEffect } from 'react';
|
|
1
|
+
import React, { useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
3
4
|
import { EditorToolbarProvider, PASTE_MENU } from '@atlaskit/editor-common/toolbar';
|
|
4
5
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -9,7 +10,7 @@ import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
|
|
|
9
10
|
import { hideToolbar, highlightContent, showToolbar } from '../../editor-commands/commands';
|
|
10
11
|
import { ToolbarDropdownOption } from '../../types/types';
|
|
11
12
|
import { isToolbarVisible } from '../toolbar';
|
|
12
|
-
import { hasVisibleButton } from './hasVisibleButton';
|
|
13
|
+
import { getVisibleKeys, hasVisibleButton } from './hasVisibleButton';
|
|
13
14
|
import { PasteActionsMenuContent } from './PasteActionsMenuContent';
|
|
14
15
|
var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
|
|
15
16
|
function getTargetElement(editorView) {
|
|
@@ -32,12 +33,13 @@ function getPopupOffset(dom) {
|
|
|
32
33
|
return [-(window.innerWidth - rightEdge - 50), 20];
|
|
33
34
|
}
|
|
34
35
|
export var PasteActionsMenu = function PasteActionsMenu(_ref) {
|
|
35
|
-
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
36
|
+
var _api$analytics, _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
|
|
36
37
|
var api = _ref.api,
|
|
37
38
|
editorView = _ref.editorView,
|
|
38
39
|
mountTo = _ref.mountTo,
|
|
39
40
|
boundariesElement = _ref.boundariesElement,
|
|
40
41
|
scrollableElement = _ref.scrollableElement;
|
|
42
|
+
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
41
43
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['paste'], function (states) {
|
|
42
44
|
var _states$pasteState;
|
|
43
45
|
return {
|
|
@@ -45,6 +47,7 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
|
|
|
45
47
|
};
|
|
46
48
|
}),
|
|
47
49
|
lastContentPasted = _useSharedPluginState.lastContentPasted;
|
|
50
|
+
var prevShowToolbarRef = useRef(false);
|
|
48
51
|
useEffect(function () {
|
|
49
52
|
if (!lastContentPasted) {
|
|
50
53
|
hideToolbar()(editorView.state, editorView.dispatch);
|
|
@@ -74,6 +77,22 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
|
|
|
74
77
|
};
|
|
75
78
|
}),
|
|
76
79
|
isToolbarShown = _useSharedPluginState2.showToolbar;
|
|
80
|
+
var aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents('ai-paste-menu')) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
81
|
+
var visibleAiActionKeys = getVisibleKeys(aiSurfaceComponents, ['button', 'menu-item']);
|
|
82
|
+
useEffect(function () {
|
|
83
|
+
if (!prevShowToolbarRef.current && isToolbarShown) {
|
|
84
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent({
|
|
85
|
+
action: ACTION.OPENED,
|
|
86
|
+
actionSubject: ACTION_SUBJECT.PASTE_ACTIONS_MENU,
|
|
87
|
+
eventType: EVENT_TYPE.UI,
|
|
88
|
+
attributes: {
|
|
89
|
+
visibleAiActions: visibleAiActionKeys
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
prevShowToolbarRef.current = isToolbarShown;
|
|
94
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
95
|
+
}, [isToolbarShown, editorAnalyticsAPI]);
|
|
77
96
|
var preventEditorFocusLoss = useCallback(function (e) {
|
|
78
97
|
e.preventDefault();
|
|
79
98
|
}, []);
|
|
@@ -97,7 +116,7 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
|
|
|
97
116
|
handleDismiss();
|
|
98
117
|
}
|
|
99
118
|
}, [handleDismiss]);
|
|
100
|
-
var pasteMenuComponents = (_api$
|
|
119
|
+
var pasteMenuComponents = (_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(PASTE_MENU.key)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [];
|
|
101
120
|
var anyComponentVisible = hasVisibleButton(pasteMenuComponents);
|
|
102
121
|
if (!isToolbarShown) {
|
|
103
122
|
return null;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
|
|
2
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._1rjc1b66{padding-block:var(--ds-space-050,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
2
|
+
._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
4
3
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
@@ -9,7 +9,7 @@ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
|
9
9
|
import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
|
|
10
10
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
11
11
|
var styles = {
|
|
12
|
-
container: "_2rko12b0
|
|
12
|
+
container: "_2rko12b0 _bfhk1bhr _16qs130s"
|
|
13
13
|
};
|
|
14
14
|
export var PasteActionsMenuContent = function PasteActionsMenuContent(_ref) {
|
|
15
15
|
var onMouseDown = _ref.onMouseDown,
|
|
@@ -6,13 +6,14 @@ import { cx } from '@compiled/react';
|
|
|
6
6
|
import { useIntl } from 'react-intl-next';
|
|
7
7
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
8
8
|
import { pasteOptionsToolbarMessages as messages } from '@atlaskit/editor-common/messages';
|
|
9
|
-
import { useEditorToolbar, PASTE_MENU, PASTE_MENU_SECTION, PASTE_NESTED_MENU, PASTE_MENU_NESTED_SECTION, PASTE_RICH_TEXT_MENU_ITEM, PASTE_MARKDOWN_MENU_ITEM, PASTE_PLAIN_TEXT_MENU_ITEM, PASTE_MENU_RANK, PASTE_MENU_SECTION_RANK, PASTE_NESTED_MENU_RANK, PASTE_MENU_NESTED_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
|
|
9
|
+
import { useEditorToolbar, PASTE_MENU, PASTE_MENU_SECTION, PASTE_NESTED_MENU, PASTE_MENU_NESTED_SECTION, PASTE_RICH_TEXT_MENU_ITEM, PASTE_MARKDOWN_MENU_ITEM, PASTE_PLAIN_TEXT_MENU_ITEM, PASTE_MENU_RANK, PASTE_MENU_SECTION_RANK, PASTE_NESTED_MENU_RANK, PASTE_MENU_NESTED_SECTION_RANK, AI_PASTE_MENU_SECTION } from '@atlaskit/editor-common/toolbar';
|
|
10
10
|
import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
11
11
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
12
12
|
import ClipboardIcon from '@atlaskit/icon/core/clipboard';
|
|
13
13
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
14
14
|
import { changeToMarkdownWithAnalytics, changeToPlainTextWithAnalytics, changeToRichTextWithAnalytics } from '../../editor-commands/commands';
|
|
15
15
|
import { ToolbarDropdownOption } from '../../types/types';
|
|
16
|
+
import { getVisibleKeys } from './hasVisibleButton';
|
|
16
17
|
var nestedMenuStyles = {
|
|
17
18
|
narrowSection: "_10gv1lit"
|
|
18
19
|
};
|
|
@@ -29,12 +30,13 @@ export var isPasteOptionSelected = function isPasteOptionSelected(pasteType, sel
|
|
|
29
30
|
}
|
|
30
31
|
};
|
|
31
32
|
var PasteMenuItem = function PasteMenuItem(_ref) {
|
|
33
|
+
var _api$analytics;
|
|
32
34
|
var api = _ref.api,
|
|
33
|
-
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
|
|
34
35
|
pasteType = _ref.pasteType;
|
|
35
36
|
var intl = useIntl();
|
|
36
37
|
var _useEditorToolbar = useEditorToolbar(),
|
|
37
38
|
editorView = _useEditorToolbar.editorView;
|
|
39
|
+
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
38
40
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], function (states) {
|
|
39
41
|
var _pluginState$selected, _pluginState$plaintex, _pluginState$isPlainT;
|
|
40
42
|
var pluginState = states.pasteOptionsToolbarPluginState;
|
|
@@ -105,8 +107,7 @@ var PasteOptionsNestedMenu = function PasteOptionsNestedMenu(_ref2) {
|
|
|
105
107
|
}, children);
|
|
106
108
|
};
|
|
107
109
|
export var getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
|
|
108
|
-
var api = _ref3.api
|
|
109
|
-
editorAnalyticsAPI = _ref3.editorAnalyticsAPI;
|
|
110
|
+
var api = _ref3.api;
|
|
110
111
|
return [{
|
|
111
112
|
type: PASTE_MENU.type,
|
|
112
113
|
key: PASTE_MENU.key
|
|
@@ -124,8 +125,17 @@ export var getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
|
|
|
124
125
|
return !((_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false);
|
|
125
126
|
},
|
|
126
127
|
component: function component(props) {
|
|
128
|
+
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
129
|
+
var allComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(PASTE_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
130
|
+
var aiMenuItems = allComponents.filter(function (c) {
|
|
131
|
+
var _c$parents;
|
|
132
|
+
return c.type === 'menu-item' && ((_c$parents = c.parents) === null || _c$parents === void 0 ? void 0 : _c$parents.some(function (p) {
|
|
133
|
+
return p.key === AI_PASTE_MENU_SECTION.key;
|
|
134
|
+
}));
|
|
135
|
+
});
|
|
136
|
+
var hasVisibleAiActions = getVisibleKeys(aiMenuItems, ['menu-item']).length > 0;
|
|
127
137
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
|
|
128
|
-
hasSeparator:
|
|
138
|
+
hasSeparator: hasVisibleAiActions
|
|
129
139
|
}, props.children);
|
|
130
140
|
}
|
|
131
141
|
}, {
|
|
@@ -158,7 +168,6 @@ export var getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
|
|
|
158
168
|
component: function component() {
|
|
159
169
|
return /*#__PURE__*/React.createElement(PasteMenuItem, {
|
|
160
170
|
api: api,
|
|
161
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
162
171
|
pasteType: "rich-text"
|
|
163
172
|
});
|
|
164
173
|
},
|
|
@@ -173,7 +182,6 @@ export var getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
|
|
|
173
182
|
component: function component() {
|
|
174
183
|
return /*#__PURE__*/React.createElement(PasteMenuItem, {
|
|
175
184
|
api: api,
|
|
176
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
177
185
|
pasteType: "markdown"
|
|
178
186
|
});
|
|
179
187
|
},
|
|
@@ -188,7 +196,6 @@ export var getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
|
|
|
188
196
|
component: function component() {
|
|
189
197
|
return /*#__PURE__*/React.createElement(PasteMenuItem, {
|
|
190
198
|
api: api,
|
|
191
|
-
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
192
199
|
pasteType: "plain-text"
|
|
193
200
|
});
|
|
194
201
|
},
|
|
@@ -10,16 +10,27 @@ var _isComponentOrAncestorHidden = function isComponentOrAncestorHidden(componen
|
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
* Returns
|
|
14
|
-
* A
|
|
13
|
+
* Returns the keys of visible button/menu-item components in the list.
|
|
14
|
+
* A component is visible when neither it nor any of its ancestors are hidden.
|
|
15
15
|
*/
|
|
16
|
-
export var
|
|
16
|
+
export var getVisibleKeys = function getVisibleKeys(components) {
|
|
17
|
+
var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['menu-item'];
|
|
17
18
|
var componentsByKey = new Map(components.map(function (c) {
|
|
18
19
|
return [c.key, c];
|
|
19
20
|
}));
|
|
20
21
|
return components.filter(function (c) {
|
|
21
|
-
return c.type
|
|
22
|
-
}).
|
|
22
|
+
return types.includes(c.type);
|
|
23
|
+
}).filter(function (c) {
|
|
23
24
|
return !_isComponentOrAncestorHidden(c, componentsByKey);
|
|
25
|
+
}).map(function (c) {
|
|
26
|
+
return c.key;
|
|
24
27
|
});
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Returns true when at least one menu-item button in the list is visible.
|
|
32
|
+
* A button is visible when neither it nor any of its ancestors are hidden.
|
|
33
|
+
*/
|
|
34
|
+
export var hasVisibleButton = function hasVisibleButton(components) {
|
|
35
|
+
return getVisibleKeys(components).length > 0;
|
|
25
36
|
};
|
|
@@ -5,12 +5,12 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
5
5
|
import { ToolbarDropdownOption } from '../types/types';
|
|
6
6
|
export declare const showToolbar: (lastContentPasted: LastContentPasted, selectedOption: ToolbarDropdownOption, showLegacyOptions?: boolean, pasteAncestorNodeNames?: string[]) => Command;
|
|
7
7
|
export declare const changeToPlainText: () => Command;
|
|
8
|
-
export declare const changeToPlainTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number) => () => Command;
|
|
8
|
+
export declare const changeToPlainTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number, invokedFrom?: string) => () => Command;
|
|
9
9
|
export declare const dropdownClickHandler: () => Command;
|
|
10
10
|
export declare const changeToRichText: () => Command;
|
|
11
|
-
export declare const changeToRichTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => () => Command;
|
|
11
|
+
export declare const changeToRichTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, invokedFrom?: string) => () => Command;
|
|
12
12
|
export declare const changeToMarkDown: () => Command;
|
|
13
|
-
export declare const changeToMarkdownWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number) => () => Command;
|
|
13
|
+
export declare const changeToMarkdownWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number, invokedFrom?: string) => () => Command;
|
|
14
14
|
export declare const highlightContent: () => Command;
|
|
15
15
|
export declare const hideToolbar: () => Command;
|
|
16
16
|
export declare const checkAndHideToolbar: (view: EditorView) => void;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
+
import { type PasteOptionsPluginState } from '../types/types';
|
|
3
4
|
export declare function createPlugin(dispatch: Dispatch, options?: {
|
|
4
5
|
useNewPasteMenu?: boolean;
|
|
5
|
-
}): SafePlugin<
|
|
6
|
+
}): SafePlugin<PasteOptionsPluginState>;
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
+
import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
|
+
import type { Command } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { EditorState, SafeStateField, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
import { type PastePluginAction } from '../editor-actions/actions';
|
|
1
5
|
import type { PasteOptionsPluginState } from '../types/types';
|
|
2
|
-
export declare const createPluginState: (dispatch:
|
|
6
|
+
export declare const createPluginState: (dispatch: Dispatch, initialState: PasteOptionsPluginState | ((state: EditorState) => PasteOptionsPluginState)) => SafeStateField<PasteOptionsPluginState>;
|
|
7
|
+
export declare const createCommand: <A = PastePluginAction>(action: A | ((state: Readonly<EditorState>) => false | A), transform?: (tr: Transaction, state: EditorState) => Transaction) => Command;
|
|
8
|
+
export declare const getPluginState: (state: EditorState) => PasteOptionsPluginState;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
export declare const pasteOptionsPluginKey: PluginKey
|
|
4
|
+
export declare const pasteOptionsPluginKey: PluginKey;
|
|
5
5
|
export declare enum ToolbarDropdownOption {
|
|
6
6
|
Markdown = 0,
|
|
7
7
|
RichText = 1,
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
2
1
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
2
|
import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
|
|
4
3
|
import type { PasteOptionsToolbarPlugin } from '../../pasteOptionsToolbarPluginType';
|
|
@@ -6,7 +5,6 @@ import { ToolbarDropdownOption, type PasteType } from '../../types/types';
|
|
|
6
5
|
export declare const isPasteOptionSelected: (pasteType: PasteType, selectedOption: ToolbarDropdownOption) => boolean;
|
|
7
6
|
interface PasteMenuComponentsConfig {
|
|
8
7
|
api: ExtractInjectionAPI<PasteOptionsToolbarPlugin> | undefined;
|
|
9
|
-
editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
|
|
10
8
|
}
|
|
11
|
-
export declare const getPasteMenuComponents: ({ api,
|
|
9
|
+
export declare const getPasteMenuComponents: ({ api, }: PasteMenuComponentsConfig) => RegisterComponent[];
|
|
12
10
|
export {};
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
|
|
2
|
+
/**
|
|
3
|
+
* Returns the keys of visible button/menu-item components in the list.
|
|
4
|
+
* A component is visible when neither it nor any of its ancestors are hidden.
|
|
5
|
+
*/
|
|
6
|
+
export declare const getVisibleKeys: (components: RegisterComponent[], types?: RegisterComponent["type"][]) => string[];
|
|
2
7
|
/**
|
|
3
8
|
* Returns true when at least one menu-item button in the list is visible.
|
|
4
9
|
* A button is visible when neither it nor any of its ancestors are hidden.
|
|
@@ -5,12 +5,12 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
5
5
|
import { ToolbarDropdownOption } from '../types/types';
|
|
6
6
|
export declare const showToolbar: (lastContentPasted: LastContentPasted, selectedOption: ToolbarDropdownOption, showLegacyOptions?: boolean, pasteAncestorNodeNames?: string[]) => Command;
|
|
7
7
|
export declare const changeToPlainText: () => Command;
|
|
8
|
-
export declare const changeToPlainTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number) => () => Command;
|
|
8
|
+
export declare const changeToPlainTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number, invokedFrom?: string) => () => Command;
|
|
9
9
|
export declare const dropdownClickHandler: () => Command;
|
|
10
10
|
export declare const changeToRichText: () => Command;
|
|
11
|
-
export declare const changeToRichTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => () => Command;
|
|
11
|
+
export declare const changeToRichTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, invokedFrom?: string) => () => Command;
|
|
12
12
|
export declare const changeToMarkDown: () => Command;
|
|
13
|
-
export declare const changeToMarkdownWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number) => () => Command;
|
|
13
|
+
export declare const changeToMarkdownWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number, invokedFrom?: string) => () => Command;
|
|
14
14
|
export declare const highlightContent: () => Command;
|
|
15
15
|
export declare const hideToolbar: () => Command;
|
|
16
16
|
export declare const checkAndHideToolbar: (view: EditorView) => void;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
+
import { type PasteOptionsPluginState } from '../types/types';
|
|
3
4
|
export declare function createPlugin(dispatch: Dispatch, options?: {
|
|
4
5
|
useNewPasteMenu?: boolean;
|
|
5
|
-
}): SafePlugin<
|
|
6
|
+
}): SafePlugin<PasteOptionsPluginState>;
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
+
import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
|
+
import type { Command } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { EditorState, SafeStateField, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
import { type PastePluginAction } from '../editor-actions/actions';
|
|
1
5
|
import type { PasteOptionsPluginState } from '../types/types';
|
|
2
|
-
export declare const createPluginState: (dispatch:
|
|
6
|
+
export declare const createPluginState: (dispatch: Dispatch, initialState: PasteOptionsPluginState | ((state: EditorState) => PasteOptionsPluginState)) => SafeStateField<PasteOptionsPluginState>;
|
|
7
|
+
export declare const createCommand: <A = PastePluginAction>(action: A | ((state: Readonly<EditorState>) => false | A), transform?: (tr: Transaction, state: EditorState) => Transaction) => Command;
|
|
8
|
+
export declare const getPluginState: (state: EditorState) => PasteOptionsPluginState;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
export declare const pasteOptionsPluginKey: PluginKey
|
|
4
|
+
export declare const pasteOptionsPluginKey: PluginKey;
|
|
5
5
|
export declare enum ToolbarDropdownOption {
|
|
6
6
|
Markdown = 0,
|
|
7
7
|
RichText = 1,
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
2
1
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
2
|
import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
|
|
4
3
|
import type { PasteOptionsToolbarPlugin } from '../../pasteOptionsToolbarPluginType';
|
|
@@ -6,7 +5,6 @@ import { ToolbarDropdownOption, type PasteType } from '../../types/types';
|
|
|
6
5
|
export declare const isPasteOptionSelected: (pasteType: PasteType, selectedOption: ToolbarDropdownOption) => boolean;
|
|
7
6
|
interface PasteMenuComponentsConfig {
|
|
8
7
|
api: ExtractInjectionAPI<PasteOptionsToolbarPlugin> | undefined;
|
|
9
|
-
editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
|
|
10
8
|
}
|
|
11
|
-
export declare const getPasteMenuComponents: ({ api,
|
|
9
|
+
export declare const getPasteMenuComponents: ({ api, }: PasteMenuComponentsConfig) => RegisterComponent[];
|
|
12
10
|
export {};
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
|
|
2
|
+
/**
|
|
3
|
+
* Returns the keys of visible button/menu-item components in the list.
|
|
4
|
+
* A component is visible when neither it nor any of its ancestors are hidden.
|
|
5
|
+
*/
|
|
6
|
+
export declare const getVisibleKeys: (components: RegisterComponent[], types?: RegisterComponent["type"][]) => string[];
|
|
2
7
|
/**
|
|
3
8
|
* Returns true when at least one menu-item button in the list is visible.
|
|
4
9
|
* A button is visible when neither it nor any of its ancestors are hidden.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-paste-options-toolbar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.0.1",
|
|
4
4
|
"description": "Paste options toolbar for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@atlaskit/css": "^0.19.0",
|
|
33
33
|
"@atlaskit/editor-markdown-transformer": "^5.20.0",
|
|
34
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
35
|
-
"@atlaskit/editor-plugin-paste": "^
|
|
36
|
-
"@atlaskit/editor-plugin-ui-control-registry": "^
|
|
34
|
+
"@atlaskit/editor-plugin-analytics": "^8.0.0",
|
|
35
|
+
"@atlaskit/editor-plugin-paste": "^9.0.0",
|
|
36
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^2.0.0",
|
|
37
37
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
38
38
|
"@atlaskit/editor-shared-styles": "^3.10.0",
|
|
39
39
|
"@atlaskit/editor-toolbar": "^0.19.0",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/icon": "^32.0.0",
|
|
42
42
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
43
43
|
"@atlaskit/primitives": "^18.0.0",
|
|
44
|
-
"@atlaskit/tmp-editor-statsig": "^35.
|
|
44
|
+
"@atlaskit/tmp-editor-statsig": "^35.10.0",
|
|
45
45
|
"@atlaskit/tokens": "^11.1.0",
|
|
46
46
|
"@babel/runtime": "^7.0.0",
|
|
47
47
|
"@compiled/react": "^0.20.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@atlaskit/editor-common": "^
|
|
52
|
+
"@atlaskit/editor-common": "^112.0.0",
|
|
53
53
|
"react": "^18.2.0",
|
|
54
54
|
"react-dom": "^18.2.0"
|
|
55
55
|
},
|