@atlaskit/editor-plugin-paste-options-toolbar 0.2.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-paste-options-toolbar

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,9 @@
+# EditorPluginPasteOptionsToolbar
+
+Paste options toolbar for @atlaskit/editor-core
+
+## Usage
+
+`import EditorPluginPasteOptionsToolbar from '@atlaskit/editor-plugin-paste-options-toolbar';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/editor/editor-plugin-paste-options-toolbar).

package/dist/cjs/actions.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PastePluginActionTypes = void 0;
+var PastePluginActionTypes = exports.PastePluginActionTypes = /*#__PURE__*/function (PastePluginActionTypes) {
+  PastePluginActionTypes["START_TRACKING_PASTED_MACRO_POSITIONS"] = "START_TRACKING_PASTED_MACRO_POSITIONS";
+  PastePluginActionTypes["STOP_TRACKING_PASTED_MACRO_POSITIONS"] = "STOP_TRACKING_PASTED_MACRO_POSITIONS";
+  PastePluginActionTypes["SHOW_PASTE_OPTIONS"] = "SHOW_PASTE_OPTIONS";
+  PastePluginActionTypes["HIDE_PASTE_OPTIONS"] = "HIDE_PASTE_OPTIONS";
+  PastePluginActionTypes["HIGHLIGHT_CONTENT"] = "HIGHLIGHT_CONTENT";
+  PastePluginActionTypes["CHANGE_FORMAT"] = "CHANGE_FORMAT";
+  return PastePluginActionTypes;
+}({});

package/dist/cjs/commands.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showToolbar = exports.highlightContent = exports.hideToolbar = exports.dropdownClickHandler = exports.checkAndHideToolbar = exports.changeToRichTextWithAnalytics = exports.changeToRichText = exports.changeToPlainTextWithAnalytics = exports.changeToPlainText = exports.changeToMarkdownWithAnalytics = exports.changeToMarkDown = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _actions = require("./actions");
+var _pluginFactory = require("./pm-plugins/plugin-factory");
+var _types = require("./types");
+var _formatHandlers = require("./util/format-handlers");
+var showToolbar = exports.showToolbar = function showToolbar(lastContentPasted, selectedOption) {
+  var commandAction = function commandAction(editorState) {
+    return {
+      type: _actions.PastePluginActionTypes.SHOW_PASTE_OPTIONS,
+      data: {
+        selectedOption: selectedOption,
+        plaintext: lastContentPasted.text,
+        isPlainText: lastContentPasted.isPlainText,
+        richTextSlice: lastContentPasted.pastedSlice,
+        pasteStartPos: lastContentPasted.pasteStartPos,
+        pasteEndPos: lastContentPasted.pasteEndPos
+      }
+    };
+  };
+  return (0, _pluginFactory.createCommand)(commandAction);
+};
+var changeToPlainText = exports.changeToPlainText = function changeToPlainText(pasteStartPos, plaintext) {
+  var plaintextTransformer = function plaintextTransformer(tr, state) {
+    return (0, _formatHandlers.formatPlainText)(state, pasteStartPos, plaintext);
+  };
+  var commandAction = function commandAction(editorState) {
+    return {
+      type: _actions.PastePluginActionTypes.CHANGE_FORMAT,
+      data: {
+        selectedOption: _types.ToolbarDropdownOption.PlainText
+      }
+    };
+  };
+  return (0, _pluginFactory.createCommand)(commandAction, plaintextTransformer);
+};
+var changeToPlainTextWithAnalytics = exports.changeToPlainTextWithAnalytics = function changeToPlainTextWithAnalytics(editorAnalyticsAPI, sliceSize) {
+  return function (pasteStartPos, plaintext) {
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      action: _analytics.ACTION.PASTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
+        type: _analytics.PasteTypes.plain,
+        content: _analytics.PasteContents.text,
+        pasteSize: sliceSize
+      }
+    })(changeToPlainText(pasteStartPos, plaintext));
+  };
+};
+var dropdownClickHandler = exports.dropdownClickHandler = function dropdownClickHandler() {
+  return highlightContent();
+};
+var changeToRichText = exports.changeToRichText = function changeToRichText(pasteStartPos) {
+  var transformer = function transformer(tr, state) {
+    var pastePluginState = _types.pasteOptionsPluginKey.getState(state);
+    return (0, _formatHandlers.formatRichText)(state, pasteStartPos, pastePluginState.richTextSlice);
+  };
+  var commandAction = function commandAction(editorState) {
+    return {
+      type: _actions.PastePluginActionTypes.CHANGE_FORMAT,
+      data: {
+        selectedOption: _types.ToolbarDropdownOption.RichText
+      }
+    };
+  };
+  return (0, _pluginFactory.createCommand)(commandAction, transformer);
+};
+var changeToRichTextWithAnalytics = exports.changeToRichTextWithAnalytics = function changeToRichTextWithAnalytics(editorAnalyticsAPI) {
+  return function (pasteStartPos) {
+    var payloadCallback = function payloadCallback(state) {
+      var _pastePluginState$ric;
+      var pastePluginState = _types.pasteOptionsPluginKey.getState(state);
+      return {
+        action: _analytics.ACTION.PASTED,
+        actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
+          type: _analytics.PasteTypes.richText,
+          content: _analytics.PasteContents.text,
+          pasteSize: ((_pastePluginState$ric = pastePluginState.richTextSlice) === null || _pastePluginState$ric === void 0 ? void 0 : _pastePluginState$ric.size) || 0
+        }
+      };
+    };
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payloadCallback)(changeToRichText(pasteStartPos));
+  };
+};
+var changeToMarkDown = exports.changeToMarkDown = function changeToMarkDown(pasteStartPos, plaintext) {
+  var markdownTransformer = function markdownTransformer(tr, state) {
+    return (0, _formatHandlers.formatMarkdown)(state, pasteStartPos, plaintext);
+  };
+  var commandAction = function commandAction(editorState) {
+    return {
+      type: _actions.PastePluginActionTypes.CHANGE_FORMAT,
+      data: {
+        selectedOption: _types.ToolbarDropdownOption.Markdown
+      }
+    };
+  };
+  return (0, _pluginFactory.createCommand)(commandAction, markdownTransformer);
+};
+var changeToMarkdownWithAnalytics = exports.changeToMarkdownWithAnalytics = function changeToMarkdownWithAnalytics(editorAnalyticsAPI, sliceSize) {
+  return function (pasteStartPos, plaintext) {
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      action: _analytics.ACTION.PASTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
+        type: _analytics.PasteTypes.markdown,
+        content: _analytics.PasteContents.text,
+        pasteSize: sliceSize
+      }
+    })(changeToMarkDown(pasteStartPos, plaintext));
+  };
+};
+var highlightContent = exports.highlightContent = function highlightContent() {
+  var commandAction = function commandAction(editorState) {
+    return {
+      type: _actions.PastePluginActionTypes.HIGHLIGHT_CONTENT
+    };
+  };
+  return (0, _pluginFactory.createCommand)(commandAction);
+};
+var hideToolbar = exports.hideToolbar = function hideToolbar() {
+  var commandAction = function commandAction(editorState) {
+    return {
+      type: _actions.PastePluginActionTypes.HIDE_PASTE_OPTIONS
+    };
+  };
+  return (0, _pluginFactory.createCommand)(commandAction);
+};
+var checkAndHideToolbar = exports.checkAndHideToolbar = function checkAndHideToolbar(view) {
+  var pluginState = _types.pasteOptionsPluginKey.getState(view.state);
+  if (pluginState.showToolbar) {
+    hideToolbar()(view.state, view.dispatch);
+  }
+};

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "pasteOptionsToolbarPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.pasteOptionsToolbarPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/messages.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  pasteOptions: {
+    id: 'fabric.editor.pasteOptions',
+    defaultMessage: 'Paste options floating controls',
+    description: 'Opens a menu with additional paste options'
+  },
+  plainText: {
+    id: 'fabric.editor.plainText',
+    defaultMessage: 'Use plain text',
+    description: 'Converts pasted text into plain text'
+  },
+  markdown: {
+    id: 'fabric.editor.useMarkdown',
+    defaultMessage: 'Use Markdown',
+    description: 'Converts pasted text into Markdown'
+  },
+  richText: {
+    id: 'fabric.editor.richText',
+    defaultMessage: 'Use rich text',
+    description: 'Converts pasted text into Rich text'
+  }
+});

package/dist/cjs/plugin.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pasteOptionsToolbarPlugin = void 0;
+var _react = require("react");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _commands = require("./commands");
+var _main = require("./pm-plugins/main");
+var _toolbar = require("./toolbar");
+var _types = require("./types");
+var pasteOptionsToolbarPlugin = exports.pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref) {
+  var _api$analytics;
+  var config = _ref.config,
+    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 {
+    name: 'pasteOptionsToolbarPlugin',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'pasteOptionsToolbarPlugin',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch;
+          return (0, _main.createPlugin)(dispatch);
+        }
+      }];
+    },
+    pluginsOptions: {
+      floatingToolbar: function floatingToolbar(state, intl) {
+        var pastePluginState = _types.pasteOptionsPluginKey.getState(state);
+        var _ref3 = pastePluginState || {},
+          showToolbar = _ref3.showToolbar,
+          pasteStartPos = _ref3.pasteStartPos,
+          plaintext = _ref3.plaintext;
+        if (showToolbar) {
+          return (0, _toolbar.buildToolbar)(state, pasteStartPos, plaintext, intl, editorAnalyticsAPI);
+        }
+        return;
+      }
+    },
+    usePluginHook: function usePluginHook(_ref4) {
+      var editorView = _ref4.editorView;
+      var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['paste']),
+        pasteState = _useSharedPluginState.pasteState;
+      var lastContentPasted = pasteState === null || pasteState === void 0 ? void 0 : pasteState.lastContentPasted;
+      (0, _react.useEffect)(function () {
+        if (!lastContentPasted) {
+          (0, _commands.hideToolbar)()(editorView.state, editorView.dispatch);
+          return;
+        }
+        var selectedOption = _types.ToolbarDropdownOption.None;
+        if (!lastContentPasted.isPlainText) {
+          selectedOption = _types.ToolbarDropdownOption.RichText;
+        } else if (lastContentPasted.isShiftPressed) {
+          selectedOption = _types.ToolbarDropdownOption.PlainText;
+        } else {
+          selectedOption = _types.ToolbarDropdownOption.Markdown;
+        }
+        if (!(0, _toolbar.isToolbarVisible)(editorView.state, lastContentPasted)) {
+          return;
+        }
+        (0, _commands.showToolbar)(lastContentPasted, selectedOption)(editorView.state, editorView.dispatch);
+      }, [lastContentPasted, editorView]);
+    }
+  };
+};

package/dist/cjs/pm-plugins/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEXT_HIGHLIGHT_CLASS = exports.PASTE_TOOLBAR_MENU_ID = exports.PASTE_TOOLBAR_ITEM_CLASS = exports.PASTE_TOOLBAR_CLASS = exports.PASTE_OPTIONS_TEST_ID = exports.PASTE_HIGHLIGHT_DECORATION_KEY = exports.EDITOR_WRAPPER_CLASS = void 0;
+var PASTE_TOOLBAR_CLASS = exports.PASTE_TOOLBAR_CLASS = 'ak-editor-paste-toolbar';
+var PASTE_TOOLBAR_MENU_ID = exports.PASTE_TOOLBAR_MENU_ID = 'ak-editor-paste-toolbar-item-dropdownList';
+var TEXT_HIGHLIGHT_CLASS = exports.TEXT_HIGHLIGHT_CLASS = 'text-highlight';
+var PASTE_HIGHLIGHT_DECORATION_KEY = exports.PASTE_HIGHLIGHT_DECORATION_KEY = 'paste-highlight-decoration-key';
+var PASTE_TOOLBAR_ITEM_CLASS = exports.PASTE_TOOLBAR_ITEM_CLASS = 'ak-editor-paste-toolbar-item';
+var EDITOR_WRAPPER_CLASS = exports.EDITOR_WRAPPER_CLASS = 'akEditor';
+var PASTE_OPTIONS_TEST_ID = exports.PASTE_OPTIONS_TEST_ID = 'paste-options-testid';

package/dist/cjs/pm-plugins/main.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = createPlugin;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _commands = require("../commands");
+var _types = require("../types");
+var _constants = require("./constants");
+var _pluginFactory = require("./plugin-factory");
+function createPlugin(dispatch) {
+  return new _safePlugin.SafePlugin({
+    key: _types.pasteOptionsPluginKey,
+    state: (0, _pluginFactory.createPluginState)(dispatch, {
+      showToolbar: false,
+      pasteStartPos: 0,
+      pasteEndPos: 0,
+      plaintext: '',
+      isPlainText: false,
+      highlightContent: false,
+      highlightDecorationSet: _view.DecorationSet.empty,
+      richTextSlice: _model.Slice.empty,
+      selectedOption: _types.ToolbarDropdownOption.None
+    }),
+    view: function view(editorView) {
+      return {
+        update: function update(view, prevState) {
+          return prevState;
+        }
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        // Hide toolbar when clicked outside the editor
+        blur: _commands.checkAndHideToolbar,
+        // Hide toolbar when clicked anywhere within the editor, tr.getMeta('pointer') does not work if clicked on the same line after pasting so relying on mousedown event
+        mousedown: _commands.checkAndHideToolbar
+      },
+      handleKeyDown: function handleKeyDown(view) {
+        (0, _commands.checkAndHideToolbar)(view);
+        return false;
+      },
+      decorations: function decorations(state) {
+        var _pasteOptionsPluginKe, _pasteOptionsPluginKe2;
+        var _ref = _types.pasteOptionsPluginKey.getState(state) || {},
+          highlightContent = _ref.highlightContent,
+          pasteStartPos = _ref.pasteStartPos;
+        var decorationSet = (_pasteOptionsPluginKe = (_pasteOptionsPluginKe2 = _types.pasteOptionsPluginKey.getState(state)) === null || _pasteOptionsPluginKe2 === void 0 ? void 0 : _pasteOptionsPluginKe2.highlightDecorationSet) !== null && _pasteOptionsPluginKe !== void 0 ? _pasteOptionsPluginKe : _view.DecorationSet.empty;
+        if (!highlightContent) {
+          return decorationSet;
+        }
+        var selection = state.tr.selection;
+        var pasteEndPos = selection.$anchor.pos;
+        var highlightDecoration = _view.Decoration.inline(pasteStartPos, pasteEndPos, {
+          class: _constants.TEXT_HIGHLIGHT_CLASS
+        }, {
+          key: _constants.PASTE_HIGHLIGHT_DECORATION_KEY
+        });
+        return decorationSet.add(state.doc, [highlightDecoration]);
+      }
+    }
+  });
+}

package/dist/cjs/pm-plugins/plugin-factory.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPluginState = exports.createPluginState = exports.createCommand = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _reducer = require("../reducer");
+var _types = require("../types");
+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 _pluginFactory = (0, _utils.pluginFactory)(_types.pasteOptionsPluginKey, _reducer.reducer, {
+    mapping: function mapping(tr, pluginState) {
+      return pluginState;
+    },
+    onSelectionChanged: function onSelectionChanged(tr, pluginState) {
+      // Detect click outside the editor
+      if (tr.getMeta('outsideProsemirrorEditorClicked')) {
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          showToolbar: false,
+          highlightContent: false
+        });
+      }
+      return pluginState;
+    }
+  }),
+  createPluginState = exports.createPluginState = _pluginFactory.createPluginState,
+  createCommand = exports.createCommand = _pluginFactory.createCommand,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState;

package/dist/cjs/reducer.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reducer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("./actions");
+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 reducer = exports.reducer = function reducer(state, action) {
+  switch (action.type) {
+    case _actions.PastePluginActionTypes.SHOW_PASTE_OPTIONS:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          showToolbar: true,
+          highlightContent: false,
+          isPlainText: action.data.isPlainText,
+          plaintext: action.data.plaintext,
+          selectedOption: action.data.selectedOption,
+          richTextSlice: action.data.richTextSlice,
+          pasteStartPos: action.data.pasteStartPos,
+          pasteEndPos: action.data.pasteEndPos
+        });
+      }
+    case _actions.PastePluginActionTypes.HIDE_PASTE_OPTIONS:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          highlightContent: false,
+          showToolbar: false
+        });
+      }
+    case _actions.PastePluginActionTypes.HIGHLIGHT_CONTENT:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          highlightContent: true
+        });
+      }
+    case _actions.PastePluginActionTypes.CHANGE_FORMAT:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          highlightContent: true,
+          selectedOption: action.data.selectedOption
+        });
+      }
+    default:
+      return state;
+  }
+};

package/dist/cjs/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "textHighlightStyle", {
+  enumerable: true,
+  get: function get() {
+    return _styles.textHighlightStyle;
+  }
+});
+var _styles = require("./ui/styles");

package/dist/cjs/toolbar.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isToolbarVisible = exports.getToolbarMenuConfig = exports.buildToolbar = void 0;
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _commands = require("./commands");
+var _messages = require("./messages");
+var _constants = require("./pm-plugins/constants");
+var _types = require("./types");
+var _pasteIcon = _interopRequireDefault(require("./ui/paste-icon"));
+var _util = require("./util");
+var isToolbarVisible = exports.isToolbarVisible = function isToolbarVisible(state, lastContentPasted) {
+  var _$from$node;
+  /**
+   * Conditions for not showing the toolbar:
+   * 1. Feature flag is disabled
+   * 2. Content is pasted at gap cursor
+   * 3. Pasting horizontal rule
+   * 4. Pasting link, media or text containing media(note: markdown link and images are allowed)
+   * 5. Content is pasted in a nested node(i.e. inside a table, panel etc.).
+   *    (grandParent node should be root doc for showing up the toolbar)
+   */
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.paste-options-toolbar')) {
+    return false;
+  }
+  var $from = state.selection.$from;
+  if ((0, _util.hasRuleNode)(lastContentPasted.pastedSlice, state.schema)) {
+    return false;
+  }
+  var grandParentNodeType = (_$from$node = $from.node($from.depth - 1)) === null || _$from$node === void 0 ? void 0 : _$from$node.type;
+  if (grandParentNodeType && grandParentNodeType.name === state.schema.nodes.doc.name && !(0, _util.isPastedFromFabricEditor)(lastContentPasted.pasteSource) && !(0, _util.hasLinkMark)(state, lastContentPasted.pasteStartPos, lastContentPasted.pasteEndPos) && !(0, _util.hasMediaNode)(lastContentPasted.pastedSlice)) {
+    return true;
+  }
+  return false;
+};
+var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(pluginState, pasteStartPos, plaintext, intl, editorAnalyticsAPI) {
+  var options = [{
+    id: 'editor.paste.richText',
+    title: intl.formatMessage(_messages.messages.richText),
+    selected: pluginState.selectedOption === _types.ToolbarDropdownOption.RichText,
+    hidden: pluginState.isPlainText,
+    onClick: (0, _commands.changeToRichTextWithAnalytics)(editorAnalyticsAPI)(pasteStartPos)
+  }, {
+    id: 'editor.paste.markdown',
+    title: intl.formatMessage(_messages.messages.markdown),
+    selected: pluginState.selectedOption === _types.ToolbarDropdownOption.Markdown,
+    onClick: (0, _commands.changeToMarkdownWithAnalytics)(editorAnalyticsAPI, plaintext.length)(pasteStartPos, plaintext)
+  }, {
+    id: 'editor.paste.plainText',
+    title: intl.formatMessage(_messages.messages.plainText),
+    selected: pluginState.selectedOption === _types.ToolbarDropdownOption.PlainText,
+    onClick: (0, _commands.changeToPlainTextWithAnalytics)(editorAnalyticsAPI, plaintext.length)(pasteStartPos, plaintext)
+  }];
+  return {
+    id: _constants.PASTE_TOOLBAR_ITEM_CLASS,
+    icon: _pasteIcon.default,
+    type: 'dropdown',
+    testId: _constants.PASTE_OPTIONS_TEST_ID,
+    title: intl.formatMessage(_messages.messages.pasteOptions),
+    options: options,
+    onToggle: onToggleHandler
+  };
+};
+var onToggleHandler = function onToggleHandler(state, dispatch) {
+  return (0, _commands.dropdownClickHandler)()(state, dispatch);
+};
+var buildToolbar = exports.buildToolbar = function buildToolbar(state, pasteStartPos, plaintext, intl, editorAnalyticsAPI) {
+  var schema = state.schema;
+  var validNodes = Object.values(schema.nodes);
+  var pluginState = _types.pasteOptionsPluginKey.getState(state);
+  var menu = getToolbarMenuConfig(pluginState, pasteStartPos, plaintext, intl, editorAnalyticsAPI);
+  return {
+    title: intl.formatMessage(_messages.messages.pasteOptions),
+    nodeType: validNodes,
+    zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+    className: _constants.PASTE_TOOLBAR_CLASS,
+    items: [menu],
+    align: 'right',
+    onPositionCalculated: onPositionCalculated
+  };
+};
+var onPositionCalculated = function onPositionCalculated(editorView, nextPos) {
+  var toolbar = document.querySelector("div[aria-label=\"".concat(_messages.messages.pasteOptions.defaultMessage, "\"]"));
+  var cursorHeight = parseFloat(window.getComputedStyle(toolbar, undefined).lineHeight || '');
+  var from = editorView.state.tr.selection.from;
+  var fromCoords = editorView.coordsAtPos(from);
+  return {
+    top: fromCoords.top + cursorHeight,
+    left: fromCoords.left
+  };
+};

package/dist/cjs/types.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pasteOptionsPluginKey = exports.ToolbarDropdownOption = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pasteOptionsPluginKey = exports.pasteOptionsPluginKey = new _state.PluginKey('paste-options');
+var ToolbarDropdownOption = exports.ToolbarDropdownOption = /*#__PURE__*/function (ToolbarDropdownOption) {
+  ToolbarDropdownOption[ToolbarDropdownOption["Markdown"] = 0] = "Markdown";
+  ToolbarDropdownOption[ToolbarDropdownOption["RichText"] = 1] = "RichText";
+  ToolbarDropdownOption[ToolbarDropdownOption["PlainText"] = 2] = "PlainText";
+  ToolbarDropdownOption[ToolbarDropdownOption["None"] = 3] = "None";
+  return ToolbarDropdownOption;
+}({});

package/dist/cjs/ui/paste-icon.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+//Using a custom icon for now since Design System Team is in the process of updating the icon set for project griffin.
+
+var _react = _interopRequireDefault(require('react'));
+var _base = require('@atlaskit/icon/base');
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+var EditorPasteIcon = function EditorPasteIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_base.Icon, Object.assign({
+    dangerouslySetGlyph: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.8293 4C14.4175 2.83481 13.3062 2 12 2C10.6938 2 9.58254 2.83481 9.17071 4H9H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H15H14.8293ZM6 6H8V7C8 7.55228 8.44772 8 9 8H15C15.5523 8 16 7.55228 16 7V6H18V18H6V6ZM12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\" fill=\"currentColor\"/><rect x=\"8\" y=\"11\" width=\"8\" height=\"2\" rx=\"1\" fill=\"currentColor\"/><rect x=\"8\" y=\"14\" width=\"5\" height=\"2\" rx=\"1\" fill=\"currentColor\"/></svg>"
+  }, props));
+};
+EditorPasteIcon.displayName = 'EditorPasteIcon';
+var _default = exports.default = EditorPasteIcon;

package/dist/cjs/ui/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textHighlightStyle = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _constants = require("../pm-plugins/constants");
+var _templateObject;
+var textHighlightStyle = exports.textHighlightStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background-color: ", ";\n\n    border-bottom: 2px solid\n      ", ";\n  }\n"])), _constants.TEXT_HIGHLIGHT_CLASS, "var(--ds-background-accent-blue-subtlest, #E9F2FF)", "var(--ds-background-accent-blue-subtler, #cce0ff)");