@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.
- package/CHANGELOG.md +21 -0
- package/dist/cjs/editor-commands/commands.js +5 -1
- package/dist/cjs/pasteOptionsToolbarPlugin.js +32 -32
- package/dist/cjs/pm-plugins/main.js +7 -5
- package/dist/cjs/pm-plugins/reducer.js +2 -0
- package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenu.js +42 -14
- package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenuContent.js +10 -9
- package/dist/cjs/ui/on-paste-actions-menu/PasteMenuComponents.js +5 -0
- package/dist/cjs/ui/on-paste-actions-menu/hasVisibleButton.js +31 -0
- package/dist/es2019/editor-commands/commands.js +4 -2
- package/dist/es2019/pasteOptionsToolbarPlugin.js +29 -25
- package/dist/es2019/pm-plugins/main.js +3 -1
- package/dist/es2019/pm-plugins/reducer.js +2 -0
- package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenu.js +44 -15
- package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenuContent.js +10 -9
- package/dist/es2019/ui/on-paste-actions-menu/PasteMenuComponents.js +5 -0
- package/dist/es2019/ui/on-paste-actions-menu/hasVisibleButton.js +19 -0
- package/dist/esm/editor-commands/commands.js +5 -1
- package/dist/esm/pasteOptionsToolbarPlugin.js +32 -31
- package/dist/esm/pm-plugins/main.js +3 -1
- package/dist/esm/pm-plugins/reducer.js +2 -0
- package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenu.js +44 -16
- package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenuContent.js +10 -9
- package/dist/esm/ui/on-paste-actions-menu/PasteMenuComponents.js +5 -0
- package/dist/esm/ui/on-paste-actions-menu/hasVisibleButton.js +25 -0
- package/dist/types/editor-actions/actions.d.ts +2 -0
- package/dist/types/editor-commands/commands.d.ts +1 -1
- package/dist/types/pasteOptionsToolbarPluginType.d.ts +3 -0
- package/dist/types/types/types.d.ts +2 -0
- package/dist/types/ui/on-paste-actions-menu/PasteActionsMenuContent.d.ts +3 -5
- package/dist/types/ui/on-paste-actions-menu/hasVisibleButton.d.ts +6 -0
- package/dist/types-ts4.5/editor-actions/actions.d.ts +2 -0
- package/dist/types-ts4.5/editor-commands/commands.d.ts +1 -1
- package/dist/types-ts4.5/pasteOptionsToolbarPluginType.d.ts +3 -0
- package/dist/types-ts4.5/types/types.d.ts +2 -0
- package/dist/types-ts4.5/ui/on-paste-actions-menu/PasteActionsMenuContent.d.ts +3 -5
- package/dist/types-ts4.5/ui/on-paste-actions-menu/hasVisibleButton.d.ts +6 -0
- 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
|
-
|
|
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
|
-
},
|
|
25
|
-
|
|
26
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
60
|
-
|
|
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(
|
|
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
|
|
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, ['
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
126
|
+
isOpen: isToolbarShown,
|
|
97
127
|
setIsOpen: handleSetIsOpen
|
|
98
128
|
}, /*#__PURE__*/React.createElement(PasteActionsMenuContent, {
|
|
99
129
|
onMouseDown: preventEditorFocusLoss,
|
|
100
130
|
onMouseEnter: handleMouseEnter,
|
|
101
|
-
|
|
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
|
-
|
|
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
|
-
},
|
|
24
|
-
|
|
25
|
-
|
|
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:
|
|
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
|
|
2
|
+
import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
|
|
3
3
|
interface PasteActionsMenuContentProps {
|
|
4
|
-
|
|
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,
|
|
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
|
|
2
|
+
import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
|
|
3
3
|
interface PasteActionsMenuContentProps {
|
|
4
|
-
|
|
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,
|
|
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
|
+
"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.
|
|
45
|
-
"@atlaskit/tokens": "^11.
|
|
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.
|
|
52
|
+
"@atlaskit/editor-common": "^111.32.0",
|
|
53
53
|
"react": "^18.2.0",
|
|
54
54
|
"react-dom": "^18.2.0"
|
|
55
55
|
},
|