@atlaskit/editor-plugin-paste-options-toolbar 8.0.4 → 8.1.1

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

@@ -0,0 +1,30 @@
+/* PasteActionsMenuContent.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./PasteActionsMenuContent.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useContext } from 'react';
+import { cx } from '@atlaskit/css';
+import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_2rko12b0 _1rjc1b66 _bfhk1bhr _16qs130s",
+  option: "_1rjcu2gc _18zrpxbi _syazi7uo _bfhksm61 _irr31dpa",
+  selectedOption: "_k48pwu06"
+};
+export const PasteActionsMenuContent = ({
+  options,
+  onMouseDown,
+  onMouseEnter
+}) => {
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: setOutsideClickTargetRef,
+    xcss: styles.container
+  }, options.map(option => /*#__PURE__*/React.createElement(Pressable, {
+    key: option.id,
+    xcss: cx(styles.option, option.selected && styles.selectedOption),
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onFocus: onMouseEnter,
+    onClick: option.onClick
+  }, option.label)));
+};

package/dist/es2019/ui/toolbar.js

@@ -73,7 +73,7 @@ export const buildToolbar = (state, intl, editorAnalyticsAPI) => {
     onPositionCalculated
   };
 };
-const onPositionCalculated = (editorView, nextPos) => {
+const onPositionCalculated = (editorView, _nextPos) => {
   const {
     from
   } = editorView.state.selection;

package/dist/esm/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 var showToolbar = function showToolbar(lastContentPasted, selectedOption) {
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     var _lastContentPasted$te;
     return {
       type: ActionTypes.SHOW_PASTE_OPTIONS,
@@ -29,7 +29,7 @@ export var changeToPlainText = function changeToPlainText() {
     }
     return formatPlainText(tr, pluginState);
   };
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: ActionTypes.CHANGE_FORMAT,
       data: {
@@ -65,7 +65,7 @@ export var changeToRichText = function changeToRichText() {
     }
     return formatRichText(tr, pluginState);
   };
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: ActionTypes.CHANGE_FORMAT,
       data: {
@@ -103,7 +103,7 @@ export var changeToMarkDown = function changeToMarkDown() {
     }
     return formatMarkdown(tr, pluginState);
   };
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: ActionTypes.CHANGE_FORMAT,
       data: {
@@ -129,7 +129,7 @@ export var changeToMarkdownWithAnalytics = function changeToMarkdownWithAnalytic
   };
 };
 export var highlightContent = function highlightContent() {
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: ActionTypes.HIGHLIGHT_CONTENT
     };
@@ -137,7 +137,7 @@ export var highlightContent = function highlightContent() {
   return createCommand(commandAction);
 };
 export var hideToolbar = function hideToolbar() {
-  var commandAction = function commandAction(editorState) {
+  var commandAction = function commandAction(_editorState) {
     return {
       type: ActionTypes.HIDE_PASTE_OPTIONS
     };

package/dist/esm/pasteOptionsToolbarPlugin.js

@@ -1,15 +1,37 @@
-import { useEffect } from 'react';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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; }
+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 var 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: ToolbarDropdownOption.None,
+        showToolbar: false
+      };
+    }
+    var 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 _objectSpread(_objectSpread({
     name: 'pasteOptionsToolbarPlugin',
     pmPlugins: function pmPlugins() {
       return [{
@@ -19,9 +41,15 @@ export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref)
           return createPlugin(dispatch);
         }
       }];
-    },
+    }
+  }, expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true) ? {
+    getSharedState: getSharedState
+  } : {}), {}, {
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
+        if (expValEquals('platform_editor_paste_actions_menu', 'isEnabled', true)) {
+          return;
+        }
         var pastePluginState = pasteOptionsPluginKey.getState(state);
         if (pastePluginState.showToolbar) {
           return buildToolbar(state, intl, editorAnalyticsAPI);
@@ -29,8 +57,25 @@ export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref)
         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 (!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: function usePluginHook(_ref4) {
+      var editorView = _ref4.editorView;
       var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['paste'], function (states) {
           var _states$pasteState;
           return {
@@ -57,5 +102,5 @@ export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref)
         showToolbar(lastContentPasted, selectedOption)(editorView.state, editorView.dispatch);
       }, [lastContentPasted, editorView]);
     }
-  };
+  });
 };

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

@@ -0,0 +1,122 @@
+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';
+var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
+function getTargetElement(editorView) {
+  var from = editorView.state.selection.from;
+  try {
+    var domRef = 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];
+}
+export var 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 = useIntl();
+  var _useSharedPluginState = 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 : 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 = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var handleDismiss = useCallback(function () {
+    hideToolbar()(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  var handleMouseEnter = useCallback(function () {
+    highlightContent()(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  var handleRichText = useCallback(function (e) {
+    e.preventDefault();
+    changeToRichTextWithAnalytics(editorAnalyticsAPI)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI]);
+  var handleMarkdown = useCallback(function (e) {
+    e.preventDefault();
+    changeToMarkdownWithAnalytics(editorAnalyticsAPI, plaintextLength)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI, plaintextLength]);
+  var handlePlainText = useCallback(function (e) {
+    e.preventDefault();
+    changeToPlainTextWithAnalytics(editorAnalyticsAPI, plaintextLength)()(editorView.state, editorView.dispatch);
+  }, [editorView, editorAnalyticsAPI, plaintextLength]);
+  var options = useMemo(function () {
+    var 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;
+  }
+  var 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/esm/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/esm/ui/on-paste-actions-menu/PasteActionsMenuContent.js

@@ -0,0 +1,31 @@
+/* PasteActionsMenuContent.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./PasteActionsMenuContent.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useContext } from 'react';
+import { cx } from '@atlaskit/css';
+import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
+var styles = {
+  container: "_2rko12b0 _1rjc1b66 _bfhk1bhr _16qs130s",
+  option: "_1rjcu2gc _18zrpxbi _syazi7uo _bfhksm61 _irr31dpa",
+  selectedOption: "_k48pwu06"
+};
+export var PasteActionsMenuContent = function PasteActionsMenuContent(_ref) {
+  var options = _ref.options,
+    onMouseDown = _ref.onMouseDown,
+    onMouseEnter = _ref.onMouseEnter;
+  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: setOutsideClickTargetRef,
+    xcss: styles.container
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: option.id,
+      xcss: cx(styles.option, option.selected && styles.selectedOption),
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onFocus: onMouseEnter,
+      onClick: option.onClick
+    }, option.label);
+  }));
+};

package/dist/esm/ui/toolbar.js

@@ -71,7 +71,7 @@ export var buildToolbar = function buildToolbar(state, intl, editorAnalyticsAPI)
     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/types/index.d.ts

@@ -1,2 +1,2 @@
 export { pasteOptionsToolbarPlugin } from './pasteOptionsToolbarPlugin';
-export type { PasteOptionsToolbarPlugin, PasteOptionsToolbarPluginDependencies, } from './pasteOptionsToolbarPluginType';
+export type { PasteOptionsToolbarPlugin, PasteOptionsToolbarPluginDependencies, PasteOptionsToolbarSharedState, } from './pasteOptionsToolbarPluginType';

package/dist/types/pasteOptionsToolbarPluginType.d.ts

@@ -1,7 +1,14 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { PastePlugin } from '@atlaskit/editor-plugin-paste';
+import type { ToolbarDropdownOption } from './types/types';
 export type PasteOptionsToolbarPluginDependencies = [OptionalPlugin<AnalyticsPlugin>, PastePlugin];
+export interface PasteOptionsToolbarSharedState {
+    isPlainText: boolean;
+    plaintextLength: number;
+    selectedOption: ToolbarDropdownOption;
+    showToolbar: boolean;
+}
 export type PasteOptionsToolbarPlugin = NextEditorPlugin<'pasteOptionsToolbarPlugin', {
     dependencies: PasteOptionsToolbarPluginDependencies;
 }>;

package/dist/types/pm-plugins/main.d.ts

@@ -1,3 +1,3 @@
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-export declare function createPlugin(dispatch: Dispatch): SafePlugin<import("../types/types").PasteOtionsPluginState>;
+export declare function createPlugin(dispatch: Dispatch): SafePlugin<import("../types/types").PasteOptionsPluginState>;

package/dist/types/pm-plugins/plugin-factory.d.ts

@@ -1,2 +1,2 @@
-import type { PasteOtionsPluginState } from '../types/types';
-export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch, initialState: PasteOtionsPluginState | ((state: import("prosemirror-state").EditorState) => PasteOtionsPluginState)) => import("prosemirror-state").SafeStateField<PasteOtionsPluginState>, createCommand: <A = import("../editor-actions/actions").PastePluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: (tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => PasteOtionsPluginState;
+import type { PasteOptionsPluginState } from '../types/types';
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch, initialState: PasteOptionsPluginState | ((state: import("prosemirror-state").EditorState) => PasteOptionsPluginState)) => import("prosemirror-state").SafeStateField<PasteOptionsPluginState>, createCommand: <A = import("../editor-actions/actions").PastePluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: (tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => PasteOptionsPluginState;

package/dist/types/pm-plugins/reducer.d.ts

@@ -1,3 +1,3 @@
 import type { PastePluginAction as Action } from '../editor-actions/actions';
-import type { PasteOtionsPluginState as State } from '../types/types';
+import type { PasteOptionsPluginState as State } from '../types/types';
 export declare const reducer: (state: State, action: Action) => State;

package/dist/types/pm-plugins/util/format-handlers.d.ts

@@ -2,8 +2,8 @@ import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
-import type { PasteOtionsPluginState } from '../../types/types';
-export declare const formatMarkdown: (tr: Transaction, pluginState: PasteOtionsPluginState) => Transaction;
-export declare const formatRichText: (tr: Transaction, pluginState: PasteOtionsPluginState) => Transaction;
-export declare const formatPlainText: (tr: Transaction, pluginState: PasteOtionsPluginState) => Transaction;
+import type { PasteOptionsPluginState } from '../../types/types';
+export declare const formatMarkdown: (tr: Transaction, pluginState: PasteOptionsPluginState) => Transaction;
+export declare const formatRichText: (tr: Transaction, pluginState: PasteOptionsPluginState) => Transaction;
+export declare const formatPlainText: (tr: Transaction, pluginState: PasteOptionsPluginState) => Transaction;
 export declare function getMarkdownSlice(text: string, schema: Schema, selection: Selection): Slice | undefined;

package/dist/types/types/types.d.ts

@@ -8,7 +8,7 @@ export declare enum ToolbarDropdownOption {
     PlainText = 2,
     None = 3
 }
-export interface PasteOtionsPluginState {
+export interface PasteOptionsPluginState {
     highlightContent: boolean;
     highlightDecorationSet: DecorationSet;
     isPlainText: boolean;

package/dist/types/ui/on-paste-actions-menu/PasteActionsMenu.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PasteOptionsToolbarPlugin } from '../../pasteOptionsToolbarPluginType';
+interface PasteActionsMenuProps {
+    api: ExtractInjectionAPI<PasteOptionsToolbarPlugin> | undefined;
+    boundariesElement?: HTMLElement;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
+    editorView: EditorView;
+    mountTo?: HTMLElement;
+    scrollableElement?: HTMLElement;
+}
+export declare const PasteActionsMenu: ({ api, editorView, mountTo, boundariesElement, scrollableElement, editorAnalyticsAPI, }: PasteActionsMenuProps) => React.JSX.Element | null;
+export {};

package/dist/types/ui/on-paste-actions-menu/PasteActionsMenuContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface MenuOption {
+    id: string;
+    label: string;
+    onClick: (e: React.MouseEvent) => void;
+    selected: boolean;
+}
+interface PasteActionsMenuContentProps {
+    onMouseDown: (e: React.MouseEvent) => void;
+    onMouseEnter: () => void;
+    options: MenuOption[];
+}
+export declare const PasteActionsMenuContent: ({ options, onMouseDown, onMouseEnter, }: PasteActionsMenuContentProps) => React.JSX.Element;
+export {};

package/dist/types/ui/toolbar.d.ts

@@ -3,7 +3,7 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarConfig, FloatingToolbarDropdown } from '@atlaskit/editor-common/types';
 import type { LastContentPasted } from '@atlaskit/editor-plugin-paste';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { PasteOtionsPluginState } from '../types/types';
+import type { PasteOptionsPluginState } from '../types/types';
 export declare const isToolbarVisible: (state: EditorState, lastContentPasted: LastContentPasted) => boolean;
-export declare const getToolbarMenuConfig: (pluginState: PasteOtionsPluginState, intl: IntlShape, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarDropdown<Command>;
+export declare const getToolbarMenuConfig: (pluginState: PasteOptionsPluginState, intl: IntlShape, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarDropdown<Command>;
 export declare const buildToolbar: (state: EditorState, intl: IntlShape, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarConfig | undefined;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
 export { pasteOptionsToolbarPlugin } from './pasteOptionsToolbarPlugin';
-export type { PasteOptionsToolbarPlugin, PasteOptionsToolbarPluginDependencies, } from './pasteOptionsToolbarPluginType';
+export type { PasteOptionsToolbarPlugin, PasteOptionsToolbarPluginDependencies, PasteOptionsToolbarSharedState, } from './pasteOptionsToolbarPluginType';

package/dist/types-ts4.5/pasteOptionsToolbarPluginType.d.ts

@@ -1,10 +1,17 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { PastePlugin } from '@atlaskit/editor-plugin-paste';
+import type { ToolbarDropdownOption } from './types/types';
 export type PasteOptionsToolbarPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,
     PastePlugin
 ];
+export interface PasteOptionsToolbarSharedState {
+    isPlainText: boolean;
+    plaintextLength: number;
+    selectedOption: ToolbarDropdownOption;
+    showToolbar: boolean;
+}
 export type PasteOptionsToolbarPlugin = NextEditorPlugin<'pasteOptionsToolbarPlugin', {
     dependencies: PasteOptionsToolbarPluginDependencies;
 }>;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -1,3 +1,3 @@
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-export declare function createPlugin(dispatch: Dispatch): SafePlugin<import("../types/types").PasteOtionsPluginState>;
+export declare function createPlugin(dispatch: Dispatch): SafePlugin<import("../types/types").PasteOptionsPluginState>;

package/dist/types-ts4.5/pm-plugins/plugin-factory.d.ts

@@ -1,2 +1,2 @@
-import type { PasteOtionsPluginState } from '../types/types';
-export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch, initialState: PasteOtionsPluginState | ((state: import("prosemirror-state").EditorState) => PasteOtionsPluginState)) => import("prosemirror-state").SafeStateField<PasteOtionsPluginState>, createCommand: <A = import("../editor-actions/actions").PastePluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: (tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => PasteOtionsPluginState;
+import type { PasteOptionsPluginState } from '../types/types';
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch, initialState: PasteOptionsPluginState | ((state: import("prosemirror-state").EditorState) => PasteOptionsPluginState)) => import("prosemirror-state").SafeStateField<PasteOptionsPluginState>, createCommand: <A = import("../editor-actions/actions").PastePluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: (tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => PasteOptionsPluginState;

package/dist/types-ts4.5/pm-plugins/reducer.d.ts

@@ -1,3 +1,3 @@
 import type { PastePluginAction as Action } from '../editor-actions/actions';
-import type { PasteOtionsPluginState as State } from '../types/types';
+import type { PasteOptionsPluginState as State } from '../types/types';
 export declare const reducer: (state: State, action: Action) => State;

package/dist/types-ts4.5/pm-plugins/util/format-handlers.d.ts

@@ -2,8 +2,8 @@ import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
-import type { PasteOtionsPluginState } from '../../types/types';
-export declare const formatMarkdown: (tr: Transaction, pluginState: PasteOtionsPluginState) => Transaction;
-export declare const formatRichText: (tr: Transaction, pluginState: PasteOtionsPluginState) => Transaction;
-export declare const formatPlainText: (tr: Transaction, pluginState: PasteOtionsPluginState) => Transaction;
+import type { PasteOptionsPluginState } from '../../types/types';
+export declare const formatMarkdown: (tr: Transaction, pluginState: PasteOptionsPluginState) => Transaction;
+export declare const formatRichText: (tr: Transaction, pluginState: PasteOptionsPluginState) => Transaction;
+export declare const formatPlainText: (tr: Transaction, pluginState: PasteOptionsPluginState) => Transaction;
 export declare function getMarkdownSlice(text: string, schema: Schema, selection: Selection): Slice | undefined;

package/dist/types-ts4.5/types/types.d.ts

@@ -8,7 +8,7 @@ export declare enum ToolbarDropdownOption {
     PlainText = 2,
     None = 3
 }
-export interface PasteOtionsPluginState {
+export interface PasteOptionsPluginState {
     highlightContent: boolean;
     highlightDecorationSet: DecorationSet;
     isPlainText: boolean;

package/dist/types-ts4.5/ui/on-paste-actions-menu/PasteActionsMenu.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PasteOptionsToolbarPlugin } from '../../pasteOptionsToolbarPluginType';
+interface PasteActionsMenuProps {
+    api: ExtractInjectionAPI<PasteOptionsToolbarPlugin> | undefined;
+    boundariesElement?: HTMLElement;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
+    editorView: EditorView;
+    mountTo?: HTMLElement;
+    scrollableElement?: HTMLElement;
+}
+export declare const PasteActionsMenu: ({ api, editorView, mountTo, boundariesElement, scrollableElement, editorAnalyticsAPI, }: PasteActionsMenuProps) => React.JSX.Element | null;
+export {};

package/dist/types-ts4.5/ui/on-paste-actions-menu/PasteActionsMenuContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface MenuOption {
+    id: string;
+    label: string;
+    onClick: (e: React.MouseEvent) => void;
+    selected: boolean;
+}
+interface PasteActionsMenuContentProps {
+    onMouseDown: (e: React.MouseEvent) => void;
+    onMouseEnter: () => void;
+    options: MenuOption[];
+}
+export declare const PasteActionsMenuContent: ({ options, onMouseDown, onMouseEnter, }: PasteActionsMenuContentProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/toolbar.d.ts

@@ -3,7 +3,7 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarConfig, FloatingToolbarDropdown } from '@atlaskit/editor-common/types';
 import type { LastContentPasted } from '@atlaskit/editor-plugin-paste';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { PasteOtionsPluginState } from '../types/types';
+import type { PasteOptionsPluginState } from '../types/types';
 export declare const isToolbarVisible: (state: EditorState, lastContentPasted: LastContentPasted) => boolean;
-export declare const getToolbarMenuConfig: (pluginState: PasteOtionsPluginState, intl: IntlShape, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarDropdown<Command>;
+export declare const getToolbarMenuConfig: (pluginState: PasteOptionsPluginState, intl: IntlShape, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarDropdown<Command>;
 export declare const buildToolbar: (state: EditorState, intl: IntlShape, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarConfig | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-paste-options-toolbar",
-	"version": "8.0.4",
+	"version": "8.1.1",
 	"description": "Paste options toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,6 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
+		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-markdown-transformer": "^5.20.0",
 		"@atlaskit/editor-plugin-analytics": "^7.0.0",
 		"@atlaskit/editor-plugin-paste": "^8.2.0",
@@ -36,6 +37,9 @@
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/tmp-editor-statsig": "^30.0.0",
+		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-intl-next": "npm:react-intl@^5.18.1"