@atlaskit/editor-plugin-paste-options-toolbar 8.3.0 → 8.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-paste-options-toolbar
2
2
 
3
+ ## 8.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`8cb8a3e42b2c2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cb8a3e42b2c2) -
8
+ [ux] EDITOR-5668 Introducing configurable visibility rules to determine which AI actions should
9
+ display in on-paste menu
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 8.3.0
4
16
 
5
17
  ### Minor Changes
@@ -11,6 +11,8 @@ var _pluginFactory = require("../pm-plugins/plugin-factory");
11
11
  var _formatHandlers = require("../pm-plugins/util/format-handlers");
12
12
  var _types = require("../types/types");
13
13
  var showToolbar = exports.showToolbar = function showToolbar(lastContentPasted, selectedOption) {
14
+ var showLegacyOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
15
+ var pasteAncestorNodeNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
14
16
  var commandAction = function commandAction(_editorState) {
15
17
  var _lastContentPasted$te;
16
18
  return {
@@ -21,7 +23,9 @@ var showToolbar = exports.showToolbar = function showToolbar(lastContentPasted,
21
23
  isPlainText: lastContentPasted.isPlainText,
22
24
  richTextSlice: lastContentPasted.pastedSlice,
23
25
  pasteStartPos: lastContentPasted.pasteStartPos,
24
- pasteEndPos: lastContentPasted.pasteEndPos
26
+ pasteEndPos: lastContentPasted.pasteEndPos,
27
+ showLegacyOptions: showLegacyOptions,
28
+ pasteAncestorNodeNames: pasteAncestorNodeNames
25
29
  }
26
30
  };
27
31
  };
@@ -1,12 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.pasteOptionsToolbarPlugin = void 0;
9
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
8
  var _react = _interopRequireWildcard(require("react"));
11
9
  var _hooks = require("@atlaskit/editor-common/hooks");
12
10
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -17,8 +15,6 @@ var _PasteActionsMenu = require("./ui/on-paste-actions-menu/PasteActionsMenu");
17
15
  var _PasteMenuComponents = require("./ui/on-paste-actions-menu/PasteMenuComponents");
18
16
  var _toolbar = require("./ui/toolbar");
19
17
  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); }
20
- 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; }
21
- 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; }
22
18
  var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref) {
23
19
  var _api$analytics;
24
20
  var api = _ref.api;
@@ -30,29 +26,7 @@ var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pas
30
26
  editorAnalyticsAPI: editorAnalyticsAPI
31
27
  }));
32
28
  }
33
- var getSharedState = function getSharedState(editorState) {
34
- var _pluginState$isPlainT, _pluginState$pasteEnd, _pluginState$pasteSta, _pluginState$plaintex, _pluginState$selected, _pluginState$showTool;
35
- if (!editorState) {
36
- return {
37
- isPlainText: false,
38
- pasteEndPos: 0,
39
- pasteStartPos: 0,
40
- plaintextLength: 0,
41
- selectedOption: _types.ToolbarDropdownOption.None,
42
- showToolbar: false
43
- };
44
- }
45
- var pluginState = _types.pasteOptionsPluginKey.getState(editorState);
46
- return {
47
- isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
48
- pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0,
49
- pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
50
- plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
51
- selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : _types.ToolbarDropdownOption.None,
52
- showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
53
- };
54
- };
55
- return _objectSpread(_objectSpread({
29
+ return {
56
30
  name: 'pasteOptionsToolbarPlugin',
57
31
  pmPlugins: function pmPlugins() {
58
32
  return [{
@@ -64,10 +38,33 @@ var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pas
64
38
  });
65
39
  }
66
40
  }];
67
- }
68
- }, (0, _expValEquals.expValEquals)('platform_editor_paste_actions_menu', 'isEnabled', true) ? {
69
- getSharedState: getSharedState
70
- } : {}), {}, {
41
+ },
42
+ getSharedState: function getSharedState(editorState) {
43
+ var _pluginState$isPlainT, _pluginState$pasteAnc, _pluginState$pasteEnd, _pluginState$pasteSta, _pluginState$plaintex, _pluginState$selected, _pluginState$showLega, _pluginState$showTool;
44
+ if (!editorState) {
45
+ return {
46
+ isPlainText: false,
47
+ pasteAncestorNodeNames: [],
48
+ pasteEndPos: 0,
49
+ pasteStartPos: 0,
50
+ plaintextLength: 0,
51
+ selectedOption: _types.ToolbarDropdownOption.None,
52
+ showLegacyOptions: false,
53
+ showToolbar: false
54
+ };
55
+ }
56
+ var pluginState = _types.pasteOptionsPluginKey.getState(editorState);
57
+ return {
58
+ isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
59
+ pasteAncestorNodeNames: (_pluginState$pasteAnc = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteAncestorNodeNames) !== null && _pluginState$pasteAnc !== void 0 ? _pluginState$pasteAnc : [],
60
+ pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0,
61
+ pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
62
+ plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
63
+ selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : _types.ToolbarDropdownOption.None,
64
+ showLegacyOptions: (_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false,
65
+ showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
66
+ };
67
+ },
71
68
  pluginsOptions: {
72
69
  floatingToolbar: function floatingToolbar(state, intl) {
73
70
  if ((0, _expValEquals.expValEquals)('platform_editor_paste_actions_menu', 'isEnabled', true)) {
@@ -106,6 +103,9 @@ var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pas
106
103
  }),
107
104
  lastContentPasted = _useSharedPluginState.lastContentPasted;
108
105
  (0, _react.useEffect)(function () {
106
+ if ((0, _expValEquals.expValEquals)('platform_editor_paste_actions_menu', 'isEnabled', true)) {
107
+ return;
108
+ }
109
109
  if (!lastContentPasted) {
110
110
  (0, _commands.hideToolbar)()(editorView.state, editorView.dispatch);
111
111
  return;
@@ -124,5 +124,5 @@ var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pas
124
124
  (0, _commands.showToolbar)(lastContentPasted, selectedOption)(editorView.state, editorView.dispatch);
125
125
  }, [lastContentPasted, editorView]);
126
126
  }
127
- });
127
+ };
128
128
  };
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.createPlugin = createPlugin;
7
7
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
8
8
  var _model = require("@atlaskit/editor-prosemirror/model");
9
- var _view = require("@atlaskit/editor-prosemirror/view");
9
+ var _view2 = require("@atlaskit/editor-prosemirror/view");
10
10
  var _commands = require("../editor-commands/commands");
11
11
  var _types = require("../types/types");
12
12
  var _constants = require("./constants");
@@ -16,18 +16,20 @@ function createPlugin(dispatch, options) {
16
16
  key: _types.pasteOptionsPluginKey,
17
17
  state: (0, _pluginFactory.createPluginState)(dispatch, {
18
18
  showToolbar: false,
19
+ showLegacyOptions: false,
20
+ pasteAncestorNodeNames: [],
19
21
  pasteStartPos: 0,
20
22
  pasteEndPos: 0,
21
23
  plaintext: '',
22
24
  isPlainText: false,
23
25
  highlightContent: false,
24
- highlightDecorationSet: _view.DecorationSet.empty,
26
+ highlightDecorationSet: _view2.DecorationSet.empty,
25
27
  richTextSlice: _model.Slice.empty,
26
28
  selectedOption: _types.ToolbarDropdownOption.None
27
29
  }),
28
30
  view: function view(_editorView) {
29
31
  return {
30
- update: function update(view, prevState) {
32
+ update: function update(_view, prevState) {
31
33
  return prevState;
32
34
  }
33
35
  };
@@ -53,13 +55,13 @@ function createPlugin(dispatch, options) {
53
55
  var _ref = _types.pasteOptionsPluginKey.getState(state) || {},
54
56
  highlightContent = _ref.highlightContent,
55
57
  pasteStartPos = _ref.pasteStartPos;
56
- var decorationSet = (_pasteOptionsPluginKe = (_pasteOptionsPluginKe2 = _types.pasteOptionsPluginKey.getState(state)) === null || _pasteOptionsPluginKe2 === void 0 ? void 0 : _pasteOptionsPluginKe2.highlightDecorationSet) !== null && _pasteOptionsPluginKe !== void 0 ? _pasteOptionsPluginKe : _view.DecorationSet.empty;
58
+ var decorationSet = (_pasteOptionsPluginKe = (_pasteOptionsPluginKe2 = _types.pasteOptionsPluginKey.getState(state)) === null || _pasteOptionsPluginKe2 === void 0 ? void 0 : _pasteOptionsPluginKe2.highlightDecorationSet) !== null && _pasteOptionsPluginKe !== void 0 ? _pasteOptionsPluginKe : _view2.DecorationSet.empty;
57
59
  if (!highlightContent) {
58
60
  return decorationSet;
59
61
  }
60
62
  var selection = state.tr.selection;
61
63
  var pasteEndPos = selection.$anchor.pos;
62
- var highlightDecoration = _view.Decoration.inline(pasteStartPos, pasteEndPos, {
64
+ var highlightDecoration = _view2.Decoration.inline(pasteStartPos, pasteEndPos, {
63
65
  class: _constants.TEXT_HIGHLIGHT_CLASS
64
66
  }, {
65
67
  key: _constants.PASTE_HIGHLIGHT_DECORATION_KEY
@@ -15,6 +15,8 @@ var reducer = exports.reducer = function reducer(state, action) {
15
15
  {
16
16
  return _objectSpread(_objectSpread({}, state), {}, {
17
17
  showToolbar: true,
18
+ showLegacyOptions: action.data.showLegacyOptions,
19
+ pasteAncestorNodeNames: action.data.pasteAncestorNodeNames,
18
20
  highlightContent: false,
19
21
  isPlainText: action.data.isPlainText,
20
22
  plaintext: action.data.plaintext,
@@ -13,7 +13,10 @@ var _uiReact = require("@atlaskit/editor-common/ui-react");
13
13
  var _utils = require("@atlaskit/editor-prosemirror/utils");
14
14
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
15
15
  var _editorToolbar = require("@atlaskit/editor-toolbar");
16
+ var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
16
17
  var _commands = require("../../editor-commands/commands");
18
+ var _types = require("../../types/types");
19
+ var _toolbar2 = require("../toolbar");
17
20
  var _PasteActionsMenuContent = require("./PasteActionsMenuContent");
18
21
  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
22
  var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
@@ -36,6 +39,18 @@ function getPopupOffset(dom) {
36
39
  var rightEdge = dom.getBoundingClientRect().right;
37
40
  return [-(window.innerWidth - rightEdge - 50), 20];
38
41
  }
42
+
43
+ /**
44
+ * Returns true when at least one component in the given list would produce
45
+ * visible output (i.e. is not hidden and, for containers, has at least one
46
+ * visible descendant).
47
+ */
48
+ var hasVisibleComponent = function hasVisibleComponent(components) {
49
+ var childrenMap = (0, _editorUiControlModel.buildChildrenMap)(components);
50
+ return components.some(function (c) {
51
+ return (0, _editorUiControlModel.willComponentRender)(c, childrenMap);
52
+ });
53
+ };
39
54
  var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref) {
40
55
  var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
41
56
  var api = _ref.api,
@@ -43,14 +58,44 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
43
58
  mountTo = _ref.mountTo,
44
59
  boundariesElement = _ref.boundariesElement,
45
60
  scrollableElement = _ref.scrollableElement;
46
- var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['pasteOptionsToolbarPlugin'], function (states) {
47
- var _pluginState$showTool;
61
+ var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['paste'], function (states) {
62
+ var _states$pasteState;
63
+ return {
64
+ lastContentPasted: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.lastContentPasted
65
+ };
66
+ }),
67
+ lastContentPasted = _useSharedPluginState.lastContentPasted;
68
+ (0, _react.useEffect)(function () {
69
+ if (!lastContentPasted) {
70
+ (0, _commands.hideToolbar)()(editorView.state, editorView.dispatch);
71
+ return;
72
+ }
73
+ var selectedOption = _types.ToolbarDropdownOption.None;
74
+ if (!lastContentPasted.isPlainText) {
75
+ selectedOption = _types.ToolbarDropdownOption.RichText;
76
+ } else if (lastContentPasted.isShiftPressed) {
77
+ selectedOption = _types.ToolbarDropdownOption.PlainText;
78
+ } else {
79
+ selectedOption = _types.ToolbarDropdownOption.Markdown;
80
+ }
81
+ var $pos = editorView.state.doc.resolve(lastContentPasted.pasteStartPos);
82
+ var pasteAncestorNodeNames = [];
83
+ for (var depth = $pos.depth; depth > 0; depth--) {
84
+ pasteAncestorNodeNames.push($pos.node(depth).type.name);
85
+ }
86
+ var legacyVisible = (0, _toolbar2.isToolbarVisible)(editorView.state, lastContentPasted);
87
+ (0, _commands.showToolbar)(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
88
+ }, [lastContentPasted, editorView]);
89
+ var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['pasteOptionsToolbarPlugin'], function (states) {
90
+ var _pluginState$showTool, _pluginState$showLega;
48
91
  var pluginState = states.pasteOptionsToolbarPluginState;
49
92
  return {
50
- showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
93
+ showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false,
94
+ showLegacyOptions: (_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false
51
95
  };
52
96
  }),
53
- showToolbar = _useSharedPluginState.showToolbar;
97
+ isToolbarShown = _useSharedPluginState2.showToolbar,
98
+ showLegacyOptions = _useSharedPluginState2.showLegacyOptions;
54
99
  var preventEditorFocusLoss = (0, _react.useCallback)(function (e) {
55
100
  e.preventDefault();
56
101
  }, []);
@@ -74,19 +119,23 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
74
119
  handleDismiss();
75
120
  }
76
121
  }, [handleDismiss]);
77
- if (!showToolbar) {
78
- return null;
79
- }
80
- var target = getTargetElement(editorView);
81
- if (!target) {
82
- return null;
83
- }
84
122
  var aiSurface = {
85
123
  type: 'menu',
86
124
  key: 'ai-paste-menu'
87
125
  };
88
126
  var aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(aiSurface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
89
127
  var pasteSurfaceComponents = (_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 : [];
128
+ var anyAiComponentVisible = hasVisibleComponent(aiSurfaceComponents);
129
+ if (!isToolbarShown) {
130
+ return null;
131
+ }
132
+ if (!showLegacyOptions && !anyAiComponentVisible) {
133
+ return null;
134
+ }
135
+ var target = getTargetElement(editorView);
136
+ if (!target) {
137
+ return null;
138
+ }
90
139
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
91
140
  target: target,
92
141
  mountTo: mountTo,
@@ -101,13 +150,13 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
101
150
  }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
102
151
  editorView: editorView
103
152
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
104
- isOpen: showToolbar,
153
+ isOpen: isToolbarShown,
105
154
  setIsOpen: handleSetIsOpen
106
155
  }, /*#__PURE__*/_react.default.createElement(_PasteActionsMenuContent.PasteActionsMenuContent, {
107
156
  onMouseDown: preventEditorFocusLoss,
108
157
  onMouseEnter: handleMouseEnter,
109
158
  aiSurface: aiSurface,
110
159
  aiSurfaceComponents: aiSurfaceComponents,
111
- pasteSurfaceComponents: pasteSurfaceComponents
160
+ pasteSurfaceComponents: showLegacyOptions ? pasteSurfaceComponents : []
112
161
  }))));
113
162
  };
@@ -4,7 +4,7 @@ import { PastePluginActionTypes as ActionTypes } from '../editor-actions/actions
4
4
  import { createCommand } from '../pm-plugins/plugin-factory';
5
5
  import { formatMarkdown, formatPlainText, formatRichText } from '../pm-plugins/util/format-handlers';
6
6
  import { pasteOptionsPluginKey, ToolbarDropdownOption } from '../types/types';
7
- export const showToolbar = (lastContentPasted, selectedOption) => {
7
+ export const showToolbar = (lastContentPasted, selectedOption, showLegacyOptions = true, pasteAncestorNodeNames = []) => {
8
8
  const commandAction = _editorState => {
9
9
  var _lastContentPasted$te;
10
10
  return {
@@ -15,7 +15,9 @@ export const showToolbar = (lastContentPasted, selectedOption) => {
15
15
  isPlainText: lastContentPasted.isPlainText,
16
16
  richTextSlice: lastContentPasted.pastedSlice,
17
17
  pasteStartPos: lastContentPasted.pasteStartPos,
18
- pasteEndPos: lastContentPasted.pasteEndPos
18
+ pasteEndPos: lastContentPasted.pasteEndPos,
19
+ showLegacyOptions,
20
+ pasteAncestorNodeNames
19
21
  }
20
22
  };
21
23
  };
@@ -19,28 +19,6 @@ export const pasteOptionsToolbarPlugin = ({
19
19
  editorAnalyticsAPI
20
20
  }));
21
21
  }
22
- const getSharedState = editorState => {
23
- var _pluginState$isPlainT, _pluginState$pasteEnd, _pluginState$pasteSta, _pluginState$plaintex, _pluginState$selected, _pluginState$showTool;
24
- if (!editorState) {
25
- return {
26
- isPlainText: false,
27
- pasteEndPos: 0,
28
- pasteStartPos: 0,
29
- plaintextLength: 0,
30
- selectedOption: ToolbarDropdownOption.None,
31
- showToolbar: false
32
- };
33
- }
34
- const pluginState = pasteOptionsPluginKey.getState(editorState);
35
- return {
36
- isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
37
- pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0,
38
- pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
39
- plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
40
- selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
41
- showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
42
- };
43
- };
44
22
  return {
45
23
  name: 'pasteOptionsToolbarPlugin',
46
24
  pmPlugins() {
@@ -53,9 +31,32 @@ export const pasteOptionsToolbarPlugin = ({
53
31
  })
54
32
  }];
55
33
  },
56
- ...(expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true) ? {
57
- getSharedState
58
- } : {}),
34
+ getSharedState(editorState) {
35
+ var _pluginState$isPlainT, _pluginState$pasteAnc, _pluginState$pasteEnd, _pluginState$pasteSta, _pluginState$plaintex, _pluginState$selected, _pluginState$showLega, _pluginState$showTool;
36
+ if (!editorState) {
37
+ return {
38
+ isPlainText: false,
39
+ pasteAncestorNodeNames: [],
40
+ pasteEndPos: 0,
41
+ pasteStartPos: 0,
42
+ plaintextLength: 0,
43
+ selectedOption: ToolbarDropdownOption.None,
44
+ showLegacyOptions: false,
45
+ showToolbar: false
46
+ };
47
+ }
48
+ const pluginState = pasteOptionsPluginKey.getState(editorState);
49
+ return {
50
+ isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
51
+ pasteAncestorNodeNames: (_pluginState$pasteAnc = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteAncestorNodeNames) !== null && _pluginState$pasteAnc !== void 0 ? _pluginState$pasteAnc : [],
52
+ pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0,
53
+ pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
54
+ plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
55
+ selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
56
+ showLegacyOptions: (_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false,
57
+ showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
58
+ };
59
+ },
59
60
  pluginsOptions: {
60
61
  floatingToolbar(state, intl) {
61
62
  if (expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true)) {
@@ -97,6 +98,9 @@ export const pasteOptionsToolbarPlugin = ({
97
98
  };
98
99
  });
99
100
  useEffect(() => {
101
+ if (expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true)) {
102
+ return;
103
+ }
100
104
  if (!lastContentPasted) {
101
105
  hideToolbar()(editorView.state, editorView.dispatch);
102
106
  return;
@@ -10,6 +10,8 @@ export function createPlugin(dispatch, options) {
10
10
  key: pasteOptionsPluginKey,
11
11
  state: createPluginState(dispatch, {
12
12
  showToolbar: false,
13
+ showLegacyOptions: false,
14
+ pasteAncestorNodeNames: [],
13
15
  pasteStartPos: 0,
14
16
  pasteEndPos: 0,
15
17
  plaintext: '',
@@ -21,7 +23,7 @@ export function createPlugin(dispatch, options) {
21
23
  }),
22
24
  view(_editorView) {
23
25
  return {
24
- update(view, prevState) {
26
+ update(_view, prevState) {
25
27
  return prevState;
26
28
  }
27
29
  };
@@ -6,6 +6,8 @@ export const reducer = (state, action) => {
6
6
  return {
7
7
  ...state,
8
8
  showToolbar: true,
9
+ showLegacyOptions: action.data.showLegacyOptions,
10
+ pasteAncestorNodeNames: action.data.pasteAncestorNodeNames,
9
11
  highlightContent: false,
10
12
  isPlainText: action.data.isPlainText,
11
13
  plaintext: action.data.plaintext,
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import React, { useCallback, useEffect } from 'react';
2
2
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { EditorToolbarProvider, PASTE_MENU } from '@atlaskit/editor-common/toolbar';
4
4
  import { Popup } from '@atlaskit/editor-common/ui';
@@ -6,7 +6,10 @@ import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-re
6
6
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
7
7
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
8
8
  import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
9
- import { hideToolbar, highlightContent } from '../../editor-commands/commands';
9
+ import { buildChildrenMap, willComponentRender } from '@atlaskit/editor-ui-control-model';
10
+ import { hideToolbar, highlightContent, showToolbar } from '../../editor-commands/commands';
11
+ import { ToolbarDropdownOption } from '../../types/types';
12
+ import { isToolbarVisible } from '../toolbar';
10
13
  import { PasteActionsMenuContent } from './PasteActionsMenuContent';
11
14
  const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
12
15
  function getTargetElement(editorView) {
@@ -30,6 +33,16 @@ function getPopupOffset(dom) {
30
33
  const rightEdge = dom.getBoundingClientRect().right;
31
34
  return [-(window.innerWidth - rightEdge - 50), 20];
32
35
  }
36
+
37
+ /**
38
+ * Returns true when at least one component in the given list would produce
39
+ * visible output (i.e. is not hidden and, for containers, has at least one
40
+ * visible descendant).
41
+ */
42
+ const hasVisibleComponent = components => {
43
+ const childrenMap = buildChildrenMap(components);
44
+ return components.some(c => willComponentRender(c, childrenMap));
45
+ };
33
46
  export const PasteActionsMenu = ({
34
47
  api,
35
48
  editorView,
@@ -39,12 +52,43 @@ export const PasteActionsMenu = ({
39
52
  }) => {
40
53
  var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
41
54
  const {
42
- showToolbar
55
+ lastContentPasted
56
+ } = useSharedPluginStateWithSelector(api, ['paste'], states => {
57
+ var _states$pasteState;
58
+ return {
59
+ lastContentPasted: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.lastContentPasted
60
+ };
61
+ });
62
+ useEffect(() => {
63
+ if (!lastContentPasted) {
64
+ hideToolbar()(editorView.state, editorView.dispatch);
65
+ return;
66
+ }
67
+ let selectedOption = ToolbarDropdownOption.None;
68
+ if (!lastContentPasted.isPlainText) {
69
+ selectedOption = ToolbarDropdownOption.RichText;
70
+ } else if (lastContentPasted.isShiftPressed) {
71
+ selectedOption = ToolbarDropdownOption.PlainText;
72
+ } else {
73
+ selectedOption = ToolbarDropdownOption.Markdown;
74
+ }
75
+ const $pos = editorView.state.doc.resolve(lastContentPasted.pasteStartPos);
76
+ const pasteAncestorNodeNames = [];
77
+ for (let depth = $pos.depth; depth > 0; depth--) {
78
+ pasteAncestorNodeNames.push($pos.node(depth).type.name);
79
+ }
80
+ const legacyVisible = isToolbarVisible(editorView.state, lastContentPasted);
81
+ showToolbar(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
82
+ }, [lastContentPasted, editorView]);
83
+ const {
84
+ showToolbar: isToolbarShown,
85
+ showLegacyOptions
43
86
  } = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], states => {
44
- var _pluginState$showTool;
87
+ var _pluginState$showTool, _pluginState$showLega;
45
88
  const pluginState = states.pasteOptionsToolbarPluginState;
46
89
  return {
47
- showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
90
+ showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false,
91
+ showLegacyOptions: (_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false
48
92
  };
49
93
  });
50
94
  const preventEditorFocusLoss = useCallback(e => {
@@ -70,19 +114,23 @@ export const PasteActionsMenu = ({
70
114
  handleDismiss();
71
115
  }
72
116
  }, [handleDismiss]);
73
- if (!showToolbar) {
74
- return null;
75
- }
76
- const target = getTargetElement(editorView);
77
- if (!target) {
78
- return null;
79
- }
80
117
  const aiSurface = {
81
118
  type: 'menu',
82
119
  key: 'ai-paste-menu'
83
120
  };
84
121
  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(aiSurface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
85
122
  const pasteSurfaceComponents = (_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 : [];
123
+ const anyAiComponentVisible = hasVisibleComponent(aiSurfaceComponents);
124
+ if (!isToolbarShown) {
125
+ return null;
126
+ }
127
+ if (!showLegacyOptions && !anyAiComponentVisible) {
128
+ return null;
129
+ }
130
+ const target = getTargetElement(editorView);
131
+ if (!target) {
132
+ return null;
133
+ }
86
134
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
87
135
  target: target,
88
136
  mountTo: mountTo,
@@ -97,13 +145,13 @@ export const PasteActionsMenu = ({
97
145
  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
98
146
  editorView: editorView
99
147
  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
100
- isOpen: showToolbar,
148
+ isOpen: isToolbarShown,
101
149
  setIsOpen: handleSetIsOpen
102
150
  }, /*#__PURE__*/React.createElement(PasteActionsMenuContent, {
103
151
  onMouseDown: preventEditorFocusLoss,
104
152
  onMouseEnter: handleMouseEnter,
105
153
  aiSurface: aiSurface,
106
154
  aiSurfaceComponents: aiSurfaceComponents,
107
- pasteSurfaceComponents: pasteSurfaceComponents
155
+ pasteSurfaceComponents: showLegacyOptions ? pasteSurfaceComponents : []
108
156
  }))));
109
157
  };
@@ -5,6 +5,8 @@ import { createCommand } from '../pm-plugins/plugin-factory';
5
5
  import { formatMarkdown, formatPlainText, formatRichText } from '../pm-plugins/util/format-handlers';
6
6
  import { pasteOptionsPluginKey, ToolbarDropdownOption } from '../types/types';
7
7
  export var showToolbar = function showToolbar(lastContentPasted, selectedOption) {
8
+ var showLegacyOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
9
+ var pasteAncestorNodeNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
8
10
  var commandAction = function commandAction(_editorState) {
9
11
  var _lastContentPasted$te;
10
12
  return {
@@ -15,7 +17,9 @@ export var showToolbar = function showToolbar(lastContentPasted, selectedOption)
15
17
  isPlainText: lastContentPasted.isPlainText,
16
18
  richTextSlice: lastContentPasted.pastedSlice,
17
19
  pasteStartPos: lastContentPasted.pasteStartPos,
18
- pasteEndPos: lastContentPasted.pasteEndPos
20
+ pasteEndPos: lastContentPasted.pasteEndPos,
21
+ showLegacyOptions: showLegacyOptions,
22
+ pasteAncestorNodeNames: pasteAncestorNodeNames
19
23
  }
20
24
  };
21
25
  };
@@ -1,6 +1,3 @@
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
1
  import React, { useEffect } from 'react';
5
2
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
6
3
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -21,29 +18,7 @@ export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref)
21
18
  editorAnalyticsAPI: editorAnalyticsAPI
22
19
  }));
23
20
  }
24
- var getSharedState = function getSharedState(editorState) {
25
- var _pluginState$isPlainT, _pluginState$pasteEnd, _pluginState$pasteSta, _pluginState$plaintex, _pluginState$selected, _pluginState$showTool;
26
- if (!editorState) {
27
- return {
28
- isPlainText: false,
29
- pasteEndPos: 0,
30
- pasteStartPos: 0,
31
- plaintextLength: 0,
32
- selectedOption: ToolbarDropdownOption.None,
33
- showToolbar: false
34
- };
35
- }
36
- var pluginState = pasteOptionsPluginKey.getState(editorState);
37
- return {
38
- isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
39
- pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0,
40
- pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
41
- plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
42
- selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
43
- showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
44
- };
45
- };
46
- return _objectSpread(_objectSpread({
21
+ return {
47
22
  name: 'pasteOptionsToolbarPlugin',
48
23
  pmPlugins: function pmPlugins() {
49
24
  return [{
@@ -55,10 +30,33 @@ export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref)
55
30
  });
56
31
  }
57
32
  }];
58
- }
59
- }, expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true) ? {
60
- getSharedState: getSharedState
61
- } : {}), {}, {
33
+ },
34
+ getSharedState: function getSharedState(editorState) {
35
+ var _pluginState$isPlainT, _pluginState$pasteAnc, _pluginState$pasteEnd, _pluginState$pasteSta, _pluginState$plaintex, _pluginState$selected, _pluginState$showLega, _pluginState$showTool;
36
+ if (!editorState) {
37
+ return {
38
+ isPlainText: false,
39
+ pasteAncestorNodeNames: [],
40
+ pasteEndPos: 0,
41
+ pasteStartPos: 0,
42
+ plaintextLength: 0,
43
+ selectedOption: ToolbarDropdownOption.None,
44
+ showLegacyOptions: false,
45
+ showToolbar: false
46
+ };
47
+ }
48
+ var pluginState = pasteOptionsPluginKey.getState(editorState);
49
+ return {
50
+ isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
51
+ pasteAncestorNodeNames: (_pluginState$pasteAnc = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteAncestorNodeNames) !== null && _pluginState$pasteAnc !== void 0 ? _pluginState$pasteAnc : [],
52
+ pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0,
53
+ pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
54
+ plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
55
+ selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
56
+ showLegacyOptions: (_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false,
57
+ showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
58
+ };
59
+ },
62
60
  pluginsOptions: {
63
61
  floatingToolbar: function floatingToolbar(state, intl) {
64
62
  if (expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true)) {
@@ -97,6 +95,9 @@ export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref)
97
95
  }),
98
96
  lastContentPasted = _useSharedPluginState.lastContentPasted;
99
97
  useEffect(function () {
98
+ if (expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true)) {
99
+ return;
100
+ }
100
101
  if (!lastContentPasted) {
101
102
  hideToolbar()(editorView.state, editorView.dispatch);
102
103
  return;
@@ -115,5 +116,5 @@ export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref)
115
116
  showToolbar(lastContentPasted, selectedOption)(editorView.state, editorView.dispatch);
116
117
  }, [lastContentPasted, editorView]);
117
118
  }
118
- });
119
+ };
119
120
  };
@@ -10,6 +10,8 @@ export function createPlugin(dispatch, options) {
10
10
  key: pasteOptionsPluginKey,
11
11
  state: createPluginState(dispatch, {
12
12
  showToolbar: false,
13
+ showLegacyOptions: false,
14
+ pasteAncestorNodeNames: [],
13
15
  pasteStartPos: 0,
14
16
  pasteEndPos: 0,
15
17
  plaintext: '',
@@ -21,7 +23,7 @@ export function createPlugin(dispatch, options) {
21
23
  }),
22
24
  view: function view(_editorView) {
23
25
  return {
24
- update: function update(view, prevState) {
26
+ update: function update(_view, prevState) {
25
27
  return prevState;
26
28
  }
27
29
  };
@@ -8,6 +8,8 @@ export var reducer = function reducer(state, action) {
8
8
  {
9
9
  return _objectSpread(_objectSpread({}, state), {}, {
10
10
  showToolbar: true,
11
+ showLegacyOptions: action.data.showLegacyOptions,
12
+ pasteAncestorNodeNames: action.data.pasteAncestorNodeNames,
11
13
  highlightContent: false,
12
14
  isPlainText: action.data.isPlainText,
13
15
  plaintext: action.data.plaintext,
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import React, { useCallback, useEffect } from 'react';
2
2
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { EditorToolbarProvider, PASTE_MENU } from '@atlaskit/editor-common/toolbar';
4
4
  import { Popup } from '@atlaskit/editor-common/ui';
@@ -6,7 +6,10 @@ import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-re
6
6
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
7
7
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
8
8
  import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
9
- import { hideToolbar, highlightContent } from '../../editor-commands/commands';
9
+ import { buildChildrenMap, willComponentRender } from '@atlaskit/editor-ui-control-model';
10
+ import { hideToolbar, highlightContent, showToolbar } from '../../editor-commands/commands';
11
+ import { ToolbarDropdownOption } from '../../types/types';
12
+ import { isToolbarVisible } from '../toolbar';
10
13
  import { PasteActionsMenuContent } from './PasteActionsMenuContent';
11
14
  var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
12
15
  function getTargetElement(editorView) {
@@ -28,6 +31,18 @@ function getPopupOffset(dom) {
28
31
  var rightEdge = dom.getBoundingClientRect().right;
29
32
  return [-(window.innerWidth - rightEdge - 50), 20];
30
33
  }
34
+
35
+ /**
36
+ * Returns true when at least one component in the given list would produce
37
+ * visible output (i.e. is not hidden and, for containers, has at least one
38
+ * visible descendant).
39
+ */
40
+ var hasVisibleComponent = function hasVisibleComponent(components) {
41
+ var childrenMap = buildChildrenMap(components);
42
+ return components.some(function (c) {
43
+ return willComponentRender(c, childrenMap);
44
+ });
45
+ };
31
46
  export var PasteActionsMenu = function PasteActionsMenu(_ref) {
32
47
  var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
33
48
  var api = _ref.api,
@@ -35,14 +50,44 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
35
50
  mountTo = _ref.mountTo,
36
51
  boundariesElement = _ref.boundariesElement,
37
52
  scrollableElement = _ref.scrollableElement;
38
- var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], function (states) {
39
- var _pluginState$showTool;
53
+ var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['paste'], function (states) {
54
+ var _states$pasteState;
55
+ return {
56
+ lastContentPasted: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.lastContentPasted
57
+ };
58
+ }),
59
+ lastContentPasted = _useSharedPluginState.lastContentPasted;
60
+ useEffect(function () {
61
+ if (!lastContentPasted) {
62
+ hideToolbar()(editorView.state, editorView.dispatch);
63
+ return;
64
+ }
65
+ var selectedOption = ToolbarDropdownOption.None;
66
+ if (!lastContentPasted.isPlainText) {
67
+ selectedOption = ToolbarDropdownOption.RichText;
68
+ } else if (lastContentPasted.isShiftPressed) {
69
+ selectedOption = ToolbarDropdownOption.PlainText;
70
+ } else {
71
+ selectedOption = ToolbarDropdownOption.Markdown;
72
+ }
73
+ var $pos = editorView.state.doc.resolve(lastContentPasted.pasteStartPos);
74
+ var pasteAncestorNodeNames = [];
75
+ for (var depth = $pos.depth; depth > 0; depth--) {
76
+ pasteAncestorNodeNames.push($pos.node(depth).type.name);
77
+ }
78
+ var legacyVisible = isToolbarVisible(editorView.state, lastContentPasted);
79
+ showToolbar(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
80
+ }, [lastContentPasted, editorView]);
81
+ var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], function (states) {
82
+ var _pluginState$showTool, _pluginState$showLega;
40
83
  var pluginState = states.pasteOptionsToolbarPluginState;
41
84
  return {
42
- showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
85
+ showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false,
86
+ showLegacyOptions: (_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false
43
87
  };
44
88
  }),
45
- showToolbar = _useSharedPluginState.showToolbar;
89
+ isToolbarShown = _useSharedPluginState2.showToolbar,
90
+ showLegacyOptions = _useSharedPluginState2.showLegacyOptions;
46
91
  var preventEditorFocusLoss = useCallback(function (e) {
47
92
  e.preventDefault();
48
93
  }, []);
@@ -66,19 +111,23 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
66
111
  handleDismiss();
67
112
  }
68
113
  }, [handleDismiss]);
69
- if (!showToolbar) {
70
- return null;
71
- }
72
- var target = getTargetElement(editorView);
73
- if (!target) {
74
- return null;
75
- }
76
114
  var aiSurface = {
77
115
  type: 'menu',
78
116
  key: 'ai-paste-menu'
79
117
  };
80
118
  var aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(aiSurface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
81
119
  var pasteSurfaceComponents = (_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 : [];
120
+ var anyAiComponentVisible = hasVisibleComponent(aiSurfaceComponents);
121
+ if (!isToolbarShown) {
122
+ return null;
123
+ }
124
+ if (!showLegacyOptions && !anyAiComponentVisible) {
125
+ return null;
126
+ }
127
+ var target = getTargetElement(editorView);
128
+ if (!target) {
129
+ return null;
130
+ }
82
131
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
83
132
  target: target,
84
133
  mountTo: mountTo,
@@ -93,13 +142,13 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
93
142
  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
94
143
  editorView: editorView
95
144
  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
96
- isOpen: showToolbar,
145
+ isOpen: isToolbarShown,
97
146
  setIsOpen: handleSetIsOpen
98
147
  }, /*#__PURE__*/React.createElement(PasteActionsMenuContent, {
99
148
  onMouseDown: preventEditorFocusLoss,
100
149
  onMouseEnter: handleMouseEnter,
101
150
  aiSurface: aiSurface,
102
151
  aiSurfaceComponents: aiSurfaceComponents,
103
- pasteSurfaceComponents: pasteSurfaceComponents
152
+ pasteSurfaceComponents: showLegacyOptions ? pasteSurfaceComponents : []
104
153
  }))));
105
154
  };
@@ -11,11 +11,13 @@ export declare enum PastePluginActionTypes {
11
11
  export interface ShowPasteOptions {
12
12
  data: {
13
13
  isPlainText: boolean;
14
+ pasteAncestorNodeNames: string[];
14
15
  pasteEndPos: number;
15
16
  pasteStartPos: number;
16
17
  plaintext: string;
17
18
  richTextSlice: Slice;
18
19
  selectedOption: ToolbarDropdownOption;
20
+ showLegacyOptions: boolean;
19
21
  };
20
22
  type: PastePluginActionTypes.SHOW_PASTE_OPTIONS;
21
23
  }
@@ -3,7 +3,7 @@ import type { Command } from '@atlaskit/editor-common/types';
3
3
  import type { LastContentPasted } from '@atlaskit/editor-plugin-paste';
4
4
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
5
  import { ToolbarDropdownOption } from '../types/types';
6
- export declare const showToolbar: (lastContentPasted: LastContentPasted, selectedOption: ToolbarDropdownOption) => Command;
6
+ export declare const showToolbar: (lastContentPasted: LastContentPasted, selectedOption: ToolbarDropdownOption, showLegacyOptions?: boolean, pasteAncestorNodeNames?: string[]) => Command;
7
7
  export declare const changeToPlainText: () => Command;
8
8
  export declare const changeToPlainTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number) => () => Command;
9
9
  export declare const dropdownClickHandler: () => Command;
@@ -10,12 +10,15 @@ export type PasteOptionsToolbarPluginDependencies = [
10
10
  ];
11
11
  export interface PasteOptionsToolbarSharedState {
12
12
  isPlainText: boolean;
13
+ pasteAncestorNodeNames: string[];
13
14
  pasteEndPos: number;
14
15
  pasteStartPos: number;
15
16
  plaintextLength: number;
16
17
  selectedOption: ToolbarDropdownOption;
18
+ showLegacyOptions: boolean;
17
19
  showToolbar: boolean;
18
20
  }
19
21
  export type PasteOptionsToolbarPlugin = NextEditorPlugin<'pasteOptionsToolbarPlugin', {
20
22
  dependencies: PasteOptionsToolbarPluginDependencies;
23
+ sharedState: PasteOptionsToolbarSharedState;
21
24
  }>;
@@ -12,11 +12,13 @@ export interface PasteOptionsPluginState {
12
12
  highlightContent: boolean;
13
13
  highlightDecorationSet: DecorationSet;
14
14
  isPlainText: boolean;
15
+ pasteAncestorNodeNames: string[];
15
16
  pasteEndPos: number;
16
17
  pasteStartPos: number;
17
18
  plaintext: string;
18
19
  richTextSlice: Slice;
19
20
  selectedOption: ToolbarDropdownOption;
21
+ showLegacyOptions: boolean;
20
22
  showToolbar: boolean;
21
23
  }
22
24
  export interface Position {
@@ -11,11 +11,13 @@ export declare enum PastePluginActionTypes {
11
11
  export interface ShowPasteOptions {
12
12
  data: {
13
13
  isPlainText: boolean;
14
+ pasteAncestorNodeNames: string[];
14
15
  pasteEndPos: number;
15
16
  pasteStartPos: number;
16
17
  plaintext: string;
17
18
  richTextSlice: Slice;
18
19
  selectedOption: ToolbarDropdownOption;
20
+ showLegacyOptions: boolean;
19
21
  };
20
22
  type: PastePluginActionTypes.SHOW_PASTE_OPTIONS;
21
23
  }
@@ -3,7 +3,7 @@ import type { Command } from '@atlaskit/editor-common/types';
3
3
  import type { LastContentPasted } from '@atlaskit/editor-plugin-paste';
4
4
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
5
  import { ToolbarDropdownOption } from '../types/types';
6
- export declare const showToolbar: (lastContentPasted: LastContentPasted, selectedOption: ToolbarDropdownOption) => Command;
6
+ export declare const showToolbar: (lastContentPasted: LastContentPasted, selectedOption: ToolbarDropdownOption, showLegacyOptions?: boolean, pasteAncestorNodeNames?: string[]) => Command;
7
7
  export declare const changeToPlainText: () => Command;
8
8
  export declare const changeToPlainTextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, sliceSize: number) => () => Command;
9
9
  export declare const dropdownClickHandler: () => Command;
@@ -10,12 +10,15 @@ export type PasteOptionsToolbarPluginDependencies = [
10
10
  ];
11
11
  export interface PasteOptionsToolbarSharedState {
12
12
  isPlainText: boolean;
13
+ pasteAncestorNodeNames: string[];
13
14
  pasteEndPos: number;
14
15
  pasteStartPos: number;
15
16
  plaintextLength: number;
16
17
  selectedOption: ToolbarDropdownOption;
18
+ showLegacyOptions: boolean;
17
19
  showToolbar: boolean;
18
20
  }
19
21
  export type PasteOptionsToolbarPlugin = NextEditorPlugin<'pasteOptionsToolbarPlugin', {
20
22
  dependencies: PasteOptionsToolbarPluginDependencies;
23
+ sharedState: PasteOptionsToolbarSharedState;
21
24
  }>;
@@ -12,11 +12,13 @@ export interface PasteOptionsPluginState {
12
12
  highlightContent: boolean;
13
13
  highlightDecorationSet: DecorationSet;
14
14
  isPlainText: boolean;
15
+ pasteAncestorNodeNames: string[];
15
16
  pasteEndPos: number;
16
17
  pasteStartPos: number;
17
18
  plaintext: string;
18
19
  richTextSlice: Slice;
19
20
  selectedOption: ToolbarDropdownOption;
21
+ showLegacyOptions: boolean;
20
22
  showToolbar: boolean;
21
23
  }
22
24
  export interface Position {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-paste-options-toolbar",
3
- "version": "8.3.0",
3
+ "version": "8.4.0",
4
4
  "description": "Paste options toolbar for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.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.1.0",
44
+ "@atlaskit/tmp-editor-statsig": "^35.4.0",
45
45
  "@atlaskit/tokens": "^11.0.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": "^111.30.0",
52
+ "@atlaskit/editor-common": "^111.31.0",
53
53
  "react": "^18.2.0",
54
54
  "react-dom": "^18.2.0"
55
55
  },