@atlaskit/editor-plugin-paste-options-toolbar 8.3.0 → 8.4.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.
Files changed (38) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/editor-commands/commands.js +5 -1
  3. package/dist/cjs/pasteOptionsToolbarPlugin.js +32 -32
  4. package/dist/cjs/pm-plugins/main.js +7 -5
  5. package/dist/cjs/pm-plugins/reducer.js +2 -0
  6. package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenu.js +42 -14
  7. package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenuContent.js +10 -9
  8. package/dist/cjs/ui/on-paste-actions-menu/PasteMenuComponents.js +5 -0
  9. package/dist/cjs/ui/on-paste-actions-menu/hasVisibleButton.js +31 -0
  10. package/dist/es2019/editor-commands/commands.js +4 -2
  11. package/dist/es2019/pasteOptionsToolbarPlugin.js +29 -25
  12. package/dist/es2019/pm-plugins/main.js +3 -1
  13. package/dist/es2019/pm-plugins/reducer.js +2 -0
  14. package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenu.js +44 -15
  15. package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenuContent.js +10 -9
  16. package/dist/es2019/ui/on-paste-actions-menu/PasteMenuComponents.js +5 -0
  17. package/dist/es2019/ui/on-paste-actions-menu/hasVisibleButton.js +19 -0
  18. package/dist/esm/editor-commands/commands.js +5 -1
  19. package/dist/esm/pasteOptionsToolbarPlugin.js +32 -31
  20. package/dist/esm/pm-plugins/main.js +3 -1
  21. package/dist/esm/pm-plugins/reducer.js +2 -0
  22. package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenu.js +44 -16
  23. package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenuContent.js +10 -9
  24. package/dist/esm/ui/on-paste-actions-menu/PasteMenuComponents.js +5 -0
  25. package/dist/esm/ui/on-paste-actions-menu/hasVisibleButton.js +25 -0
  26. package/dist/types/editor-actions/actions.d.ts +2 -0
  27. package/dist/types/editor-commands/commands.d.ts +1 -1
  28. package/dist/types/pasteOptionsToolbarPluginType.d.ts +3 -0
  29. package/dist/types/types/types.d.ts +2 -0
  30. package/dist/types/ui/on-paste-actions-menu/PasteActionsMenuContent.d.ts +3 -5
  31. package/dist/types/ui/on-paste-actions-menu/hasVisibleButton.d.ts +6 -0
  32. package/dist/types-ts4.5/editor-actions/actions.d.ts +2 -0
  33. package/dist/types-ts4.5/editor-commands/commands.d.ts +1 -1
  34. package/dist/types-ts4.5/pasteOptionsToolbarPluginType.d.ts +3 -0
  35. package/dist/types-ts4.5/types/types.d.ts +2 -0
  36. package/dist/types-ts4.5/ui/on-paste-actions-menu/PasteActionsMenuContent.d.ts +3 -5
  37. package/dist/types-ts4.5/ui/on-paste-actions-menu/hasVisibleButton.d.ts +6 -0
  38. package/package.json +4 -4
@@ -2,7 +2,10 @@
2
2
  import "./PasteActionsMenuContent.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useContext } from 'react';
5
+ import { useIntl } from 'react-intl-next';
6
+ import { pasteOptionsToolbarMessages as messages } from '@atlaskit/editor-common/messages';
5
7
  import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
8
+ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
6
9
  import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
7
10
  import { Box } from '@atlaskit/primitives/compiled';
8
11
  const styles = {
@@ -11,24 +14,22 @@ const styles = {
11
14
  export const PasteActionsMenuContent = ({
12
15
  onMouseDown,
13
16
  onMouseEnter,
14
- aiSurface,
15
- aiSurfaceComponents,
16
- pasteSurfaceComponents
17
+ components
17
18
  }) => {
18
19
  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
20
+ const intl = useIntl();
19
21
  return /*#__PURE__*/React.createElement(Box, {
20
22
  ref: setOutsideClickTargetRef,
21
23
  xcss: styles.container,
22
24
  onMouseDown: onMouseDown,
23
25
  onMouseEnter: onMouseEnter
24
- }, aiSurface && aiSurfaceComponents && aiSurfaceComponents.length > 0 && /*#__PURE__*/React.createElement(SurfaceRenderer, {
25
- surface: aiSurface,
26
- components: aiSurfaceComponents
27
- }), pasteSurfaceComponents && pasteSurfaceComponents.length > 0 && /*#__PURE__*/React.createElement(SurfaceRenderer, {
26
+ }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
27
+ title: intl.formatMessage(messages.pasteMenuActionsTitle)
28
+ }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
28
29
  surface: {
29
30
  type: 'menu',
30
31
  key: 'paste-menu'
31
32
  },
32
- components: pasteSurfaceComponents
33
- }));
33
+ components: components
34
+ })));
34
35
  };
@@ -122,6 +122,11 @@ export const getPasteMenuComponents = ({
122
122
  key: PASTE_MENU.key,
123
123
  rank: PASTE_MENU_RANK[PASTE_MENU_SECTION.key]
124
124
  }],
125
+ isHidden: () => {
126
+ var _api$pasteOptionsTool, _pluginState$showLega;
127
+ 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
+ return !((_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false);
129
+ },
125
130
  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
126
131
  hasSeparator: true
127
132
  }, props.children)
@@ -0,0 +1,19 @@
1
+ const isComponentOrAncestorHidden = (component, componentsByKey) => {
2
+ var _component$isHidden, _component$parents;
3
+ if ((_component$isHidden = component.isHidden) !== null && _component$isHidden !== void 0 && _component$isHidden.call(component)) {
4
+ return true;
5
+ }
6
+ return ((_component$parents = component.parents) !== null && _component$parents !== void 0 ? _component$parents : []).some(parent => {
7
+ const parentComponent = componentsByKey.get(parent.key);
8
+ return parentComponent ? isComponentOrAncestorHidden(parentComponent, componentsByKey) : false;
9
+ });
10
+ };
11
+
12
+ /**
13
+ * Returns true when at least one menu-item button in the list is visible.
14
+ * A button is visible when neither it nor any of its ancestors are hidden.
15
+ */
16
+ export const hasVisibleButton = components => {
17
+ const componentsByKey = new Map(components.map(c => [c.key, c]));
18
+ return components.filter(c => c.type === 'menu-item').some(c => !isComponentOrAncestorHidden(c, componentsByKey));
19
+ };
@@ -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 { hideToolbar, highlightContent, showToolbar } from '../../editor-commands/commands';
10
+ import { ToolbarDropdownOption } from '../../types/types';
11
+ import { isToolbarVisible } from '../toolbar';
12
+ import { hasVisibleButton } from './hasVisibleButton';
10
13
  import { PasteActionsMenuContent } from './PasteActionsMenuContent';
11
14
  var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
12
15
  function getTargetElement(editorView) {
@@ -29,20 +32,48 @@ function getPopupOffset(dom) {
29
32
  return [-(window.innerWidth - rightEdge - 50), 20];
30
33
  }
31
34
  export var PasteActionsMenu = function PasteActionsMenu(_ref) {
32
- var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
35
+ var _api$uiControlRegistr, _api$uiControlRegistr2;
33
36
  var api = _ref.api,
34
37
  editorView = _ref.editorView,
35
38
  mountTo = _ref.mountTo,
36
39
  boundariesElement = _ref.boundariesElement,
37
40
  scrollableElement = _ref.scrollableElement;
38
- var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], function (states) {
41
+ var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['paste'], function (states) {
42
+ var _states$pasteState;
43
+ return {
44
+ lastContentPasted: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.lastContentPasted
45
+ };
46
+ }),
47
+ lastContentPasted = _useSharedPluginState.lastContentPasted;
48
+ useEffect(function () {
49
+ if (!lastContentPasted) {
50
+ hideToolbar()(editorView.state, editorView.dispatch);
51
+ return;
52
+ }
53
+ var selectedOption = ToolbarDropdownOption.None;
54
+ if (!lastContentPasted.isPlainText) {
55
+ selectedOption = ToolbarDropdownOption.RichText;
56
+ } else if (lastContentPasted.isShiftPressed) {
57
+ selectedOption = ToolbarDropdownOption.PlainText;
58
+ } else {
59
+ selectedOption = ToolbarDropdownOption.Markdown;
60
+ }
61
+ var $pos = editorView.state.doc.resolve(lastContentPasted.pasteStartPos);
62
+ var pasteAncestorNodeNames = [];
63
+ for (var depth = $pos.depth; depth > 0; depth--) {
64
+ pasteAncestorNodeNames.push($pos.node(depth).type.name);
65
+ }
66
+ var legacyVisible = isToolbarVisible(editorView.state, lastContentPasted);
67
+ showToolbar(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
68
+ }, [lastContentPasted, editorView]);
69
+ var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], function (states) {
39
70
  var _pluginState$showTool;
40
71
  var pluginState = states.pasteOptionsToolbarPluginState;
41
72
  return {
42
73
  showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
43
74
  };
44
75
  }),
45
- showToolbar = _useSharedPluginState.showToolbar;
76
+ isToolbarShown = _useSharedPluginState2.showToolbar;
46
77
  var preventEditorFocusLoss = useCallback(function (e) {
47
78
  e.preventDefault();
48
79
  }, []);
@@ -66,19 +97,18 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
66
97
  handleDismiss();
67
98
  }
68
99
  }, [handleDismiss]);
69
- if (!showToolbar) {
100
+ var pasteMenuComponents = (_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 : [];
101
+ var anyComponentVisible = hasVisibleButton(pasteMenuComponents);
102
+ if (!isToolbarShown) {
103
+ return null;
104
+ }
105
+ if (!anyComponentVisible) {
70
106
  return null;
71
107
  }
72
108
  var target = getTargetElement(editorView);
73
109
  if (!target) {
74
110
  return null;
75
111
  }
76
- var aiSurface = {
77
- type: 'menu',
78
- key: 'ai-paste-menu'
79
- };
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(aiSurface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
81
- 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 : [];
82
112
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
83
113
  target: target,
84
114
  mountTo: mountTo,
@@ -93,13 +123,11 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
93
123
  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
94
124
  editorView: editorView
95
125
  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
96
- isOpen: showToolbar,
126
+ isOpen: isToolbarShown,
97
127
  setIsOpen: handleSetIsOpen
98
128
  }, /*#__PURE__*/React.createElement(PasteActionsMenuContent, {
99
129
  onMouseDown: preventEditorFocusLoss,
100
130
  onMouseEnter: handleMouseEnter,
101
- aiSurface: aiSurface,
102
- aiSurfaceComponents: aiSurfaceComponents,
103
- pasteSurfaceComponents: pasteSurfaceComponents
131
+ components: pasteMenuComponents
104
132
  }))));
105
133
  };
@@ -2,7 +2,10 @@
2
2
  import "./PasteActionsMenuContent.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useContext } from 'react';
5
+ import { useIntl } from 'react-intl-next';
6
+ import { pasteOptionsToolbarMessages as messages } from '@atlaskit/editor-common/messages';
5
7
  import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
8
+ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
6
9
  import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
7
10
  import { Box } from '@atlaskit/primitives/compiled';
8
11
  var styles = {
@@ -11,23 +14,21 @@ var styles = {
11
14
  export var PasteActionsMenuContent = function PasteActionsMenuContent(_ref) {
12
15
  var onMouseDown = _ref.onMouseDown,
13
16
  onMouseEnter = _ref.onMouseEnter,
14
- aiSurface = _ref.aiSurface,
15
- aiSurfaceComponents = _ref.aiSurfaceComponents,
16
- pasteSurfaceComponents = _ref.pasteSurfaceComponents;
17
+ components = _ref.components;
17
18
  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
19
+ var intl = useIntl();
18
20
  return /*#__PURE__*/React.createElement(Box, {
19
21
  ref: setOutsideClickTargetRef,
20
22
  xcss: styles.container,
21
23
  onMouseDown: onMouseDown,
22
24
  onMouseEnter: onMouseEnter
23
- }, aiSurface && aiSurfaceComponents && aiSurfaceComponents.length > 0 && /*#__PURE__*/React.createElement(SurfaceRenderer, {
24
- surface: aiSurface,
25
- components: aiSurfaceComponents
26
- }), pasteSurfaceComponents && pasteSurfaceComponents.length > 0 && /*#__PURE__*/React.createElement(SurfaceRenderer, {
25
+ }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
26
+ title: intl.formatMessage(messages.pasteMenuActionsTitle)
27
+ }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
27
28
  surface: {
28
29
  type: 'menu',
29
30
  key: 'paste-menu'
30
31
  },
31
- components: pasteSurfaceComponents
32
- }));
32
+ components: components
33
+ })));
33
34
  };
@@ -118,6 +118,11 @@ export var getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
118
118
  key: PASTE_MENU.key,
119
119
  rank: PASTE_MENU_RANK[PASTE_MENU_SECTION.key]
120
120
  }],
121
+ isHidden: function isHidden() {
122
+ var _api$pasteOptionsTool, _pluginState$showLega;
123
+ var pluginState = api === null || api === void 0 || (_api$pasteOptionsTool = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool === void 0 ? void 0 : _api$pasteOptionsTool.sharedState.currentState();
124
+ return !((_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false);
125
+ },
121
126
  component: function component(props) {
122
127
  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
123
128
  hasSeparator: true
@@ -0,0 +1,25 @@
1
+ var _isComponentOrAncestorHidden = function isComponentOrAncestorHidden(component, componentsByKey) {
2
+ var _component$isHidden, _component$parents;
3
+ if ((_component$isHidden = component.isHidden) !== null && _component$isHidden !== void 0 && _component$isHidden.call(component)) {
4
+ return true;
5
+ }
6
+ return ((_component$parents = component.parents) !== null && _component$parents !== void 0 ? _component$parents : []).some(function (parent) {
7
+ var parentComponent = componentsByKey.get(parent.key);
8
+ return parentComponent ? _isComponentOrAncestorHidden(parentComponent, componentsByKey) : false;
9
+ });
10
+ };
11
+
12
+ /**
13
+ * Returns true when at least one menu-item button in the list is visible.
14
+ * A button is visible when neither it nor any of its ancestors are hidden.
15
+ */
16
+ export var hasVisibleButton = function hasVisibleButton(components) {
17
+ var componentsByKey = new Map(components.map(function (c) {
18
+ return [c.key, c];
19
+ }));
20
+ return components.filter(function (c) {
21
+ return c.type === 'menu-item';
22
+ }).some(function (c) {
23
+ return !_isComponentOrAncestorHidden(c, componentsByKey);
24
+ });
25
+ };
@@ -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 {
@@ -1,11 +1,9 @@
1
1
  import React from 'react';
2
- import type { RegisterComponent, SurfaceIdentifier } from '@atlaskit/editor-ui-control-model';
2
+ import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
3
3
  interface PasteActionsMenuContentProps {
4
- aiSurface?: SurfaceIdentifier;
5
- aiSurfaceComponents?: RegisterComponent[];
4
+ components: RegisterComponent[];
6
5
  onMouseDown: (e: React.MouseEvent) => void;
7
6
  onMouseEnter: () => void;
8
- pasteSurfaceComponents?: RegisterComponent[];
9
7
  }
10
- export declare const PasteActionsMenuContent: ({ onMouseDown, onMouseEnter, aiSurface, aiSurfaceComponents, pasteSurfaceComponents, }: PasteActionsMenuContentProps) => React.JSX.Element;
8
+ export declare const PasteActionsMenuContent: ({ onMouseDown, onMouseEnter, components, }: PasteActionsMenuContentProps) => React.JSX.Element;
11
9
  export {};
@@ -0,0 +1,6 @@
1
+ import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
2
+ /**
3
+ * Returns true when at least one menu-item button in the list is visible.
4
+ * A button is visible when neither it nor any of its ancestors are hidden.
5
+ */
6
+ export declare const hasVisibleButton: (components: RegisterComponent[]) => boolean;
@@ -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 {
@@ -1,11 +1,9 @@
1
1
  import React from 'react';
2
- import type { RegisterComponent, SurfaceIdentifier } from '@atlaskit/editor-ui-control-model';
2
+ import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
3
3
  interface PasteActionsMenuContentProps {
4
- aiSurface?: SurfaceIdentifier;
5
- aiSurfaceComponents?: RegisterComponent[];
4
+ components: RegisterComponent[];
6
5
  onMouseDown: (e: React.MouseEvent) => void;
7
6
  onMouseEnter: () => void;
8
- pasteSurfaceComponents?: RegisterComponent[];
9
7
  }
10
- export declare const PasteActionsMenuContent: ({ onMouseDown, onMouseEnter, aiSurface, aiSurfaceComponents, pasteSurfaceComponents, }: PasteActionsMenuContentProps) => React.JSX.Element;
8
+ export declare const PasteActionsMenuContent: ({ onMouseDown, onMouseEnter, components, }: PasteActionsMenuContentProps) => React.JSX.Element;
11
9
  export {};
@@ -0,0 +1,6 @@
1
+ import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
2
+ /**
3
+ * Returns true when at least one menu-item button in the list is visible.
4
+ * A button is visible when neither it nor any of its ancestors are hidden.
5
+ */
6
+ export declare const hasVisibleButton: (components: RegisterComponent[]) => boolean;
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.1",
4
4
  "description": "Paste options toolbar for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -41,15 +41,15 @@
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",
45
- "@atlaskit/tokens": "^11.0.0",
44
+ "@atlaskit/tmp-editor-statsig": "^35.5.0",
45
+ "@atlaskit/tokens": "^11.1.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@compiled/react": "^0.20.0",
48
48
  "@emotion/react": "^11.7.1",
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.32.0",
53
53
  "react": "^18.2.0",
54
54
  "react-dom": "^18.2.0"
55
55
  },