@atlaskit/editor-plugin-paste-options-toolbar 8.0.3 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-paste-options-toolbar
 
+## 8.1.0
+
+### Minor Changes
+
+- [`a0aa8f73bbd02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0aa8f73bbd02) -
+  [ux] EDITOR-5466 Introduce new popup menu for paste actions which includes existing functionality
+  used by the existing floatingToolbar implementation
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.0.3
 
 ### Patch Changes

package/dist/cjs/editor-commands/commands.js

@@ -11,7 +11,7 @@ var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _formatHandlers = require("../pm-plugins/util/format-handlers");
 var _types = require("../types/types");
 var showToolbar = exports.showToolbar = function showToolbar(lastContentPasted, selectedOption) {
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     var _lastContentPasted$te;
     return {
       type: _actions.PastePluginActionTypes.SHOW_PASTE_OPTIONS,
@@ -35,7 +35,7 @@ var changeToPlainText = exports.changeToPlainText = function changeToPlainText()
     }
     return (0, _formatHandlers.formatPlainText)(tr, pluginState);
   };
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: _actions.PastePluginActionTypes.CHANGE_FORMAT,
       data: {
@@ -71,7 +71,7 @@ var changeToRichText = exports.changeToRichText = function changeToRichText() {
     }
     return (0, _formatHandlers.formatRichText)(tr, pluginState);
   };
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: _actions.PastePluginActionTypes.CHANGE_FORMAT,
       data: {
@@ -109,7 +109,7 @@ var changeToMarkDown = exports.changeToMarkDown = function changeToMarkDown() {
     }
     return (0, _formatHandlers.formatMarkdown)(tr, pluginState);
   };
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: _actions.PastePluginActionTypes.CHANGE_FORMAT,
       data: {
@@ -135,7 +135,7 @@ var changeToMarkdownWithAnalytics = exports.changeToMarkdownWithAnalytics = func
   };
 };
 var highlightContent = exports.highlightContent = function highlightContent() {
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: _actions.PastePluginActionTypes.HIGHLIGHT_CONTENT
     };
@@ -143,7 +143,7 @@ var highlightContent = exports.highlightContent = function highlightContent() {
   return (0, _pluginFactory.createCommand)(commandAction);
 };
 var hideToolbar = exports.hideToolbar = function hideToolbar() {
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: _actions.PastePluginActionTypes.HIDE_PASTE_OPTIONS
     };

package/dist/cjs/pasteOptionsToolbarPlugin.js

@@ -1,21 +1,46 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pasteOptionsToolbarPlugin = void 0;
-var _react = require("react");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("./editor-commands/commands");
 var _main = require("./pm-plugins/main");
 var _types = require("./types/types");
+var _PasteActionsMenu = require("./ui/on-paste-actions-menu/PasteActionsMenu");
 var _toolbar = require("./ui/toolbar");
+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); }
+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; }
+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; }
 var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref) {
   var _api$analytics;
-  var config = _ref.config,
-    api = _ref.api;
+  var api = _ref.api;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  return {
+  var getSharedState = function getSharedState(editorState) {
+    var _pluginState$isPlainT, _pluginState$plaintex, _pluginState$selected, _pluginState$showTool;
+    if (!editorState) {
+      return {
+        isPlainText: false,
+        plaintextLength: 0,
+        selectedOption: _types.ToolbarDropdownOption.None,
+        showToolbar: false
+      };
+    }
+    var pluginState = _types.pasteOptionsPluginKey.getState(editorState);
+    return {
+      isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
+      plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
+      selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : _types.ToolbarDropdownOption.None,
+      showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
+    };
+  };
+  return _objectSpread(_objectSpread({
     name: 'pasteOptionsToolbarPlugin',
     pmPlugins: function pmPlugins() {
       return [{
@@ -25,9 +50,15 @@ var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pas
           return (0, _main.createPlugin)(dispatch);
         }
       }];
-    },
+    }
+  }, (0, _expValEquals.expValEquals)('platform_editor_paste_actions_menu', 'isEnabled', true) ? {
+    getSharedState: getSharedState
+  } : {}), {}, {
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
+        if ((0, _expValEquals.expValEquals)('platform_editor_paste_actions_menu', 'isEnabled', true)) {
+          return;
+        }
         var pastePluginState = _types.pasteOptionsPluginKey.getState(state);
         if (pastePluginState.showToolbar) {
           return (0, _toolbar.buildToolbar)(state, intl, editorAnalyticsAPI);
@@ -35,8 +66,25 @@ var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pas
         return;
       }
     },
-    usePluginHook: function usePluginHook(_ref3) {
-      var editorView = _ref3.editorView;
+    contentComponent: function contentComponent(_ref3) {
+      var editorView = _ref3.editorView,
+        popupsMountPoint = _ref3.popupsMountPoint,
+        popupsBoundariesElement = _ref3.popupsBoundariesElement,
+        popupsScrollableElement = _ref3.popupsScrollableElement;
+      if (!(0, _expValEquals.expValEquals)('platform_editor_paste_actions_menu', 'isEnabled', true) || !editorView) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_PasteActionsMenu.PasteActionsMenu, {
+        api: api,
+        editorView: editorView,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement,
+        editorAnalyticsAPI: editorAnalyticsAPI
+      });
+    },
+    usePluginHook: function usePluginHook(_ref4) {
+      var editorView = _ref4.editorView;
       var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['paste'], function (states) {
           var _states$pasteState;
           return {
@@ -63,5 +111,5 @@ var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pas
         (0, _commands.showToolbar)(lastContentPasted, selectedOption)(editorView.state, editorView.dispatch);
       }, [lastContentPasted, editorView]);
     }
-  };
+  });
 };

package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenu.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasteActionsMenu = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _commands = require("../../editor-commands/commands");
+var _types = require("../../types/types");
+var _PasteActionsMenuContent = require("./PasteActionsMenuContent");
+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); }
+var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
+function getTargetElement(editorView) {
+  var from = editorView.state.selection.from;
+  try {
+    var domRef = (0, _utils.findDomRefAtPos)(from, editorView.domAtPos.bind(editorView));
+    if (domRef instanceof HTMLElement) {
+      return domRef;
+    }
+    return null;
+  } catch (_unused) {
+    return null;
+  }
+}
+function getPopupOffset(dom) {
+  if (!dom) {
+    return [0, 20];
+  }
+  var rightEdge = dom.getBoundingClientRect().right;
+  return [-(window.innerWidth - rightEdge - 50), 20];
+}
+var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    mountTo = _ref.mountTo,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['pasteOptionsToolbarPlugin'], function (states) {
+      var _pluginState$showTool, _pluginState$isPlainT, _pluginState$selected, _pluginState$plaintex;
+      var pluginState = states.pasteOptionsToolbarPluginState;
+      return {
+        showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false,
+        isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
+        selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : _types.ToolbarDropdownOption.None,
+        plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintextLength) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0
+      };
+    }),
+    showToolbar = _useSharedPluginState.showToolbar,
+    isPlainText = _useSharedPluginState.isPlainText,
+    selectedOption = _useSharedPluginState.selectedOption,
+    plaintextLength = _useSharedPluginState.plaintextLength;
+  var preventEditorFocusLoss = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+  }, []);
+  var handleDismiss = (0, _react.useCallback)(function () {
+    (0, _commands.hideToolbar)()(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    (0, _commands.highlightContent)()(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  var handleRichText = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    (0, _commands.changeToRichTextWithAnalytics)(editorAnalyticsAPI)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI]);
+  var handleMarkdown = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    (0, _commands.changeToMarkdownWithAnalytics)(editorAnalyticsAPI, plaintextLength)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI, plaintextLength]);
+  var handlePlainText = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    (0, _commands.changeToPlainTextWithAnalytics)(editorAnalyticsAPI, plaintextLength)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI, plaintextLength]);
+  var options = (0, _react.useMemo)(function () {
+    var items = [];
+    if (!isPlainText) {
+      items.push({
+        id: 'editor.paste.richText',
+        label: intl.formatMessage(_messages.pasteOptionsToolbarMessages.richText),
+        selected: selectedOption === _types.ToolbarDropdownOption.RichText,
+        onClick: handleRichText
+      });
+    }
+    items.push({
+      id: 'editor.paste.markdown',
+      label: intl.formatMessage(_messages.pasteOptionsToolbarMessages.markdown),
+      selected: selectedOption === _types.ToolbarDropdownOption.Markdown,
+      onClick: handleMarkdown
+    });
+    items.push({
+      id: 'editor.paste.plainText',
+      label: intl.formatMessage(_messages.pasteOptionsToolbarMessages.plainText),
+      selected: selectedOption === _types.ToolbarDropdownOption.PlainText,
+      onClick: handlePlainText
+    });
+    return items;
+  }, [isPlainText, selectedOption, intl, handleRichText, handleMarkdown, handlePlainText]);
+  if (!showToolbar) {
+    return null;
+  }
+  var target = getTargetElement(editorView);
+  if (!target) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
+    target: target,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    offset: getPopupOffset(target),
+    zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+    alignX: "right",
+    alignY: "bottom",
+    handleClickOutside: handleDismiss,
+    handleEscapeKeydown: handleDismiss
+  }, /*#__PURE__*/_react.default.createElement(_PasteActionsMenuContent.PasteActionsMenuContent, {
+    options: options,
+    onMouseDown: preventEditorFocusLoss,
+    onMouseEnter: handleMouseEnter
+  }));
+};

package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenuContent.compiled.css

@@ -0,0 +1,10 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}

package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenuContent.js

@@ -0,0 +1,39 @@
+/* PasteActionsMenuContent.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasteActionsMenuContent = void 0;
+require("./PasteActionsMenuContent.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _css = require("@atlaskit/css");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _compiled = require("@atlaskit/primitives/compiled");
+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); }
+var styles = {
+  container: "_2rko12b0 _1rjc1b66 _bfhk1bhr _16qs130s",
+  option: "_1rjcu2gc _18zrpxbi _syazi7uo _bfhksm61 _irr31dpa",
+  selectedOption: "_k48pwu06"
+};
+var PasteActionsMenuContent = exports.PasteActionsMenuContent = function PasteActionsMenuContent(_ref) {
+  var options = _ref.options,
+    onMouseDown = _ref.onMouseDown,
+    onMouseEnter = _ref.onMouseEnter;
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    ref: setOutsideClickTargetRef,
+    xcss: styles.container
+  }, options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+      key: option.id,
+      xcss: (0, _css.cx)(styles.option, option.selected && styles.selectedOption),
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onFocus: onMouseEnter,
+      onClick: option.onClick
+    }, option.label);
+  }));
+};

package/dist/cjs/ui/toolbar.js

@@ -78,7 +78,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, edi
     onPositionCalculated: onPositionCalculated
   };
 };
-var onPositionCalculated = function onPositionCalculated(editorView, nextPos) {
+var onPositionCalculated = function onPositionCalculated(editorView, _nextPos) {
   var from = editorView.state.selection.from;
   var fromCoords = editorView.coordsAtPos(from);
 

package/dist/es2019/editor-commands/commands.js

@@ -5,7 +5,7 @@ import { createCommand } from '../pm-plugins/plugin-factory';
 import { formatMarkdown, formatPlainText, formatRichText } from '../pm-plugins/util/format-handlers';
 import { pasteOptionsPluginKey, ToolbarDropdownOption } from '../types/types';
 export const showToolbar = (lastContentPasted, selectedOption) => {
-  const commandAction = editorState => {
+  const commandAction = _editorState => {
     var _lastContentPasted$te;
     return {
       type: ActionTypes.SHOW_PASTE_OPTIONS,
@@ -29,7 +29,7 @@ export const changeToPlainText = () => {
     }
     return formatPlainText(tr, pluginState);
   };
-  const commandAction = editorState => {
+  const commandAction = _editorState => {
     return {
       type: ActionTypes.CHANGE_FORMAT,
       data: {
@@ -63,7 +63,7 @@ export const changeToRichText = () => {
     }
     return formatRichText(tr, pluginState);
   };
-  const commandAction = editorState => {
+  const commandAction = _editorState => {
     return {
       type: ActionTypes.CHANGE_FORMAT,
       data: {
@@ -99,7 +99,7 @@ export const changeToMarkDown = () => {
     }
     return formatMarkdown(tr, pluginState);
   };
-  const commandAction = editorState => {
+  const commandAction = _editorState => {
     return {
       type: ActionTypes.CHANGE_FORMAT,
       data: {
@@ -123,7 +123,7 @@ export const changeToMarkdownWithAnalytics = (editorAnalyticsAPI, sliceSize) =>
   })(changeToMarkDown());
 };
 export const highlightContent = () => {
-  const commandAction = editorState => {
+  const commandAction = _editorState => {
     return {
       type: ActionTypes.HIGHLIGHT_CONTENT
     };
@@ -131,7 +131,7 @@ export const highlightContent = () => {
   return createCommand(commandAction);
 };
 export const hideToolbar = () => {
-  const commandAction = editorState => {
+  const commandAction = _editorState => {
     return {
       type: ActionTypes.HIDE_PASTE_OPTIONS
     };

package/dist/es2019/pasteOptionsToolbarPlugin.js

@@ -1,15 +1,34 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { hideToolbar, showToolbar } from './editor-commands/commands';
 import { createPlugin } from './pm-plugins/main';
 import { pasteOptionsPluginKey, ToolbarDropdownOption } from './types/types';
+import { PasteActionsMenu } from './ui/on-paste-actions-menu/PasteActionsMenu';
 import { buildToolbar, isToolbarVisible } from './ui/toolbar';
 export const pasteOptionsToolbarPlugin = ({
-  config,
   api
 }) => {
   var _api$analytics;
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  const getSharedState = editorState => {
+    var _pluginState$isPlainT, _pluginState$plaintex, _pluginState$selected, _pluginState$showTool;
+    if (!editorState) {
+      return {
+        isPlainText: false,
+        plaintextLength: 0,
+        selectedOption: ToolbarDropdownOption.None,
+        showToolbar: false
+      };
+    }
+    const pluginState = pasteOptionsPluginKey.getState(editorState);
+    return {
+      isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
+      plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
+      selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
+      showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
+    };
+  };
   return {
     name: 'pasteOptionsToolbarPlugin',
     pmPlugins() {
@@ -20,8 +39,14 @@ export const pasteOptionsToolbarPlugin = ({
         }) => createPlugin(dispatch)
       }];
     },
+    ...(expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true) ? {
+      getSharedState
+    } : {}),
     pluginsOptions: {
       floatingToolbar(state, intl) {
+        if (expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true)) {
+          return;
+        }
         const pastePluginState = pasteOptionsPluginKey.getState(state);
         if (pastePluginState.showToolbar) {
           return buildToolbar(state, intl, editorAnalyticsAPI);
@@ -29,6 +54,24 @@ export const pasteOptionsToolbarPlugin = ({
         return;
       }
     },
+    contentComponent({
+      editorView,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement
+    }) {
+      if (!expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true) || !editorView) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(PasteActionsMenu, {
+        api: api,
+        editorView: editorView,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement,
+        editorAnalyticsAPI: editorAnalyticsAPI
+      });
+    },
     usePluginHook({
       editorView
     }) {

package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenu.js

@@ -0,0 +1,126 @@
+import React, { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { pasteOptionsToolbarMessages as messages } from '@atlaskit/editor-common/messages';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { changeToMarkdownWithAnalytics, changeToPlainTextWithAnalytics, changeToRichTextWithAnalytics, hideToolbar, highlightContent } from '../../editor-commands/commands';
+import { ToolbarDropdownOption } from '../../types/types';
+import { PasteActionsMenuContent } from './PasteActionsMenuContent';
+const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
+function getTargetElement(editorView) {
+  const {
+    from
+  } = editorView.state.selection;
+  try {
+    const domRef = findDomRefAtPos(from, editorView.domAtPos.bind(editorView));
+    if (domRef instanceof HTMLElement) {
+      return domRef;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function getPopupOffset(dom) {
+  if (!dom) {
+    return [0, 20];
+  }
+  const rightEdge = dom.getBoundingClientRect().right;
+  return [-(window.innerWidth - rightEdge - 50), 20];
+}
+export const PasteActionsMenu = ({
+  api,
+  editorView,
+  mountTo,
+  boundariesElement,
+  scrollableElement,
+  editorAnalyticsAPI
+}) => {
+  const intl = useIntl();
+  const {
+    showToolbar,
+    isPlainText,
+    selectedOption,
+    plaintextLength
+  } = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], states => {
+    var _pluginState$showTool, _pluginState$isPlainT, _pluginState$selected, _pluginState$plaintex;
+    const pluginState = states.pasteOptionsToolbarPluginState;
+    return {
+      showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false,
+      isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
+      selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
+      plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintextLength) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0
+    };
+  });
+  const preventEditorFocusLoss = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const handleDismiss = useCallback(() => {
+    hideToolbar()(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  const handleMouseEnter = useCallback(() => {
+    highlightContent()(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  const handleRichText = useCallback(e => {
+    e.preventDefault();
+    changeToRichTextWithAnalytics(editorAnalyticsAPI)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI]);
+  const handleMarkdown = useCallback(e => {
+    e.preventDefault();
+    changeToMarkdownWithAnalytics(editorAnalyticsAPI, plaintextLength)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI, plaintextLength]);
+  const handlePlainText = useCallback(e => {
+    e.preventDefault();
+    changeToPlainTextWithAnalytics(editorAnalyticsAPI, plaintextLength)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI, plaintextLength]);
+  const options = useMemo(() => {
+    const items = [];
+    if (!isPlainText) {
+      items.push({
+        id: 'editor.paste.richText',
+        label: intl.formatMessage(messages.richText),
+        selected: selectedOption === ToolbarDropdownOption.RichText,
+        onClick: handleRichText
+      });
+    }
+    items.push({
+      id: 'editor.paste.markdown',
+      label: intl.formatMessage(messages.markdown),
+      selected: selectedOption === ToolbarDropdownOption.Markdown,
+      onClick: handleMarkdown
+    });
+    items.push({
+      id: 'editor.paste.plainText',
+      label: intl.formatMessage(messages.plainText),
+      selected: selectedOption === ToolbarDropdownOption.PlainText,
+      onClick: handlePlainText
+    });
+    return items;
+  }, [isPlainText, selectedOption, intl, handleRichText, handleMarkdown, handlePlainText]);
+  if (!showToolbar) {
+    return null;
+  }
+  const target = getTargetElement(editorView);
+  if (!target) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    target: target,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    offset: getPopupOffset(target),
+    zIndex: akEditorFloatingPanelZIndex,
+    alignX: "right",
+    alignY: "bottom",
+    handleClickOutside: handleDismiss,
+    handleEscapeKeydown: handleDismiss
+  }, /*#__PURE__*/React.createElement(PasteActionsMenuContent, {
+    options: options,
+    onMouseDown: preventEditorFocusLoss,
+    onMouseEnter: handleMouseEnter
+  }));
+};

package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenuContent.compiled.css

@@ -0,0 +1,10 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}