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

package/dist/es2019/toolbar.js

@@ -0,0 +1,92 @@
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { changeToMarkdownWithAnalytics, changeToPlainTextWithAnalytics, changeToRichTextWithAnalytics, dropdownClickHandler } from './commands';
+import { messages } from './messages';
+import { PASTE_OPTIONS_TEST_ID, PASTE_TOOLBAR_CLASS, PASTE_TOOLBAR_ITEM_CLASS } from './pm-plugins/constants';
+import { pasteOptionsPluginKey, ToolbarDropdownOption } from './types';
+import EditorPasteIcon from './ui/paste-icon';
+import { hasLinkMark, hasMediaNode, hasRuleNode, isPastedFromFabricEditor } from './util';
+export const 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 (!getBooleanFF('platform.editor.paste-options-toolbar')) {
+    return false;
+  }
+  const $from = state.selection.$from;
+  if (hasRuleNode(lastContentPasted.pastedSlice, state.schema)) {
+    return false;
+  }
+  const 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 && !isPastedFromFabricEditor(lastContentPasted.pasteSource) && !hasLinkMark(state, lastContentPasted.pasteStartPos, lastContentPasted.pasteEndPos) && !hasMediaNode(lastContentPasted.pastedSlice)) {
+    return true;
+  }
+  return false;
+};
+export const getToolbarMenuConfig = (pluginState, pasteStartPos, plaintext, intl, editorAnalyticsAPI) => {
+  const options = [{
+    id: 'editor.paste.richText',
+    title: intl.formatMessage(messages.richText),
+    selected: pluginState.selectedOption === ToolbarDropdownOption.RichText,
+    hidden: pluginState.isPlainText,
+    onClick: changeToRichTextWithAnalytics(editorAnalyticsAPI)(pasteStartPos)
+  }, {
+    id: 'editor.paste.markdown',
+    title: intl.formatMessage(messages.markdown),
+    selected: pluginState.selectedOption === ToolbarDropdownOption.Markdown,
+    onClick: changeToMarkdownWithAnalytics(editorAnalyticsAPI, plaintext.length)(pasteStartPos, plaintext)
+  }, {
+    id: 'editor.paste.plainText',
+    title: intl.formatMessage(messages.plainText),
+    selected: pluginState.selectedOption === ToolbarDropdownOption.PlainText,
+    onClick: changeToPlainTextWithAnalytics(editorAnalyticsAPI, plaintext.length)(pasteStartPos, plaintext)
+  }];
+  return {
+    id: PASTE_TOOLBAR_ITEM_CLASS,
+    icon: EditorPasteIcon,
+    type: 'dropdown',
+    testId: PASTE_OPTIONS_TEST_ID,
+    title: intl.formatMessage(messages.pasteOptions),
+    options,
+    onToggle: onToggleHandler
+  };
+};
+const onToggleHandler = (state, dispatch) => {
+  return dropdownClickHandler()(state, dispatch);
+};
+export const buildToolbar = (state, pasteStartPos, plaintext, intl, editorAnalyticsAPI) => {
+  const {
+    schema
+  } = state;
+  const validNodes = Object.values(schema.nodes);
+  const pluginState = pasteOptionsPluginKey.getState(state);
+  const menu = getToolbarMenuConfig(pluginState, pasteStartPos, plaintext, intl, editorAnalyticsAPI);
+  return {
+    title: intl.formatMessage(messages.pasteOptions),
+    nodeType: validNodes,
+    zIndex: akEditorFloatingPanelZIndex,
+    className: PASTE_TOOLBAR_CLASS,
+    items: [menu],
+    align: 'right',
+    onPositionCalculated
+  };
+};
+const onPositionCalculated = (editorView, nextPos) => {
+  const toolbar = document.querySelector(`div[aria-label="${messages.pasteOptions.defaultMessage}"]`);
+  const cursorHeight = parseFloat(window.getComputedStyle(toolbar, undefined).lineHeight || '');
+  const {
+    from
+  } = editorView.state.tr.selection;
+  const fromCoords = editorView.coordsAtPos(from);
+  return {
+    top: fromCoords.top + cursorHeight,
+    left: fromCoords.left
+  };
+};

package/dist/es2019/types.js

@@ -0,0 +1,9 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pasteOptionsPluginKey = new PluginKey('paste-options');
+export let 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/es2019/ui/paste-icon.js

@@ -0,0 +1,14 @@
+//Using a custom icon for now since Design System Team is in the process of updating the icon set for project griffin.
+
+const _react = _interopRequireDefault(require('react'));
+const _base = require('@atlaskit/icon/base');
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+const EditorPasteIcon = props => /*#__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';
+export default EditorPasteIcon;

package/dist/es2019/ui/styles.js

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+import { TEXT_HIGHLIGHT_CLASS } from '../pm-plugins/constants';
+export const textHighlightStyle = css`
+  .${TEXT_HIGHLIGHT_CLASS} {
+    background-color: ${"var(--ds-background-accent-blue-subtlest, #E9F2FF)"};
+
+    border-bottom: 2px solid
+      ${"var(--ds-background-accent-blue-subtler, #cce0ff)"};
+  }
+`;

package/dist/es2019/util/format-handlers.js

@@ -0,0 +1,196 @@
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { md } from '@atlaskit/editor-common/paste';
+import { MarkdownTransformer } from '@atlaskit/editor-markdown-transformer';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { escapeLinks } from './index';
+export const formatMarkdown = (state, pasteStartPos, plaintext) => {
+  const schema = state.schema;
+  let {
+    tr
+  } = state;
+  const {
+    selection
+  } = tr;
+  if (pasteStartPos < 0) {
+    return tr;
+  }
+  const resolvedPasteStartPos = tr.doc.resolve(pasteStartPos);
+  const parentOffset = resolvedPasteStartPos.parentOffset;
+  if (parentOffset === 0 && resolvedPasteStartPos.depth > 0) {
+    pasteStartPos = resolvedPasteStartPos.before();
+  }
+  const markdownSlice = getMarkdownSlice(plaintext, schema, selection);
+  if (!markdownSlice) {
+    return tr;
+  }
+  const pasteEndPos = selection.$to.pos;
+  pasteSliceIntoTransactionWithSelectionAdjust({
+    tr,
+    pasteStartPos,
+    pasteEndPos,
+    slice: markdownSlice
+  });
+  return tr;
+};
+export const getRichTextSlice = (state, pasteStartPos) => {
+  const {
+    tr
+  } = state;
+  const {
+    selection
+  } = tr;
+  let pasteEndPos = selection.$to.pos;
+  return state.doc.slice(pasteStartPos, pasteEndPos);
+};
+export const formatRichText = (state, pasteStartPos, richTextSlice) => {
+  let {
+    tr
+  } = state;
+  const {
+    selection
+  } = tr;
+  if (pasteStartPos < 0) {
+    return tr;
+  }
+  if (richTextSlice === Slice.empty) {
+    return tr;
+  }
+  let pasteEndPos = selection.$to.pos;
+  const resolvedPasteStartPos = tr.doc.resolve(pasteStartPos);
+  const parentOffset = resolvedPasteStartPos.parentOffset;
+  if (parentOffset === 0 && resolvedPasteStartPos.depth > 0) {
+    pasteStartPos = resolvedPasteStartPos.before();
+  }
+  richTextSliceTransactionWithSelectionAdjust({
+    tr,
+    pasteStartPos,
+    pasteEndPos,
+    slice: richTextSlice
+  });
+  return tr;
+};
+export const formatPlainText = (state, pasteStartPos, plaintext) => {
+  const {
+    tr,
+    schema
+  } = state;
+
+  //not possible to create plain text slice with empty string
+  if (pasteStartPos < 0 || plaintext === '') {
+    return tr;
+  }
+  const {
+    selection
+  } = tr;
+  const pasteEndPos = selection.$to.pos;
+  const resolvedPasteStartPos = tr.doc.resolve(pasteStartPos);
+  const parentOffset = resolvedPasteStartPos.parentOffset;
+  if (parentOffset === 0 && resolvedPasteStartPos.depth > 0) {
+    pasteStartPos = resolvedPasteStartPos.before();
+  }
+  const plainTextNode = schema.text(plaintext);
+  const plainTextFragment = Fragment.from(schema.nodes.paragraph.createAndFill(null, plainTextNode));
+  const plainTextSlice = new Slice(plainTextFragment, resolvedPasteStartPos.depth, resolvedPasteStartPos.depth);
+  pasteSliceIntoTransactionWithSelectionAdjust({
+    tr,
+    pasteStartPos,
+    pasteEndPos,
+    slice: plainTextSlice
+  });
+  return tr;
+};
+function pasteSliceIntoTransactionWithSelectionAdjust({
+  tr,
+  pasteStartPos,
+  pasteEndPos,
+  slice
+}) {
+  tr.replaceRange(pasteStartPos, pasteEndPos, slice);
+
+  // ProseMirror doesn't give a proper way to tell us where something was inserted.
+  // However, we can know "how" it inserted something.
+  //
+  // So, instead of weird depth calculations, we can use the step produced by the transform.
+  // For instance:
+  //    The `replaceStep.to and replaceStep.from`, tell us the real position
+  //    where the content will be insert.
+  //    Then, we can use the `tr.mapping.map` to the updated position after the replace operation
+  const replaceStep = tr.steps[0];
+  if (!(replaceStep instanceof ReplaceStep)) {
+    return tr;
+  }
+  const lastInsertNode = replaceStep.slice.content.lastChild;
+  const emptyNodeReference = lastInsertNode === null || lastInsertNode === void 0 ? void 0 : lastInsertNode.type.createAndFill();
+  const isLastNodeEmpty = (emptyNodeReference === null || emptyNodeReference === void 0 ? void 0 : emptyNodeReference.nodeSize) === (lastInsertNode === null || lastInsertNode === void 0 ? void 0 : lastInsertNode.nodeSize);
+  const isStepSplitingTarget = !(lastInsertNode !== null && lastInsertNode !== void 0 && lastInsertNode.isLeaf) && isLastNodeEmpty;
+  const $nextHead = tr.doc.resolve(tr.mapping.map(replaceStep.to));
+  const $nextPosition = isStepSplitingTarget && $nextHead.depth > 0 ? tr.doc.resolve($nextHead.before()) : $nextHead;
+
+  // The findFrom will make search for both: TextSelection and NodeSelections.
+  const nextSelection = Selection.findFrom($nextPosition, -1);
+  if (nextSelection) {
+    tr.setSelection(nextSelection);
+  }
+}
+function richTextSliceTransactionWithSelectionAdjust({
+  tr,
+  pasteStartPos,
+  pasteEndPos,
+  slice
+}) {
+  tr.replaceRange(pasteStartPos, pasteEndPos, slice);
+
+  // ProseMirror doesn't give a proper way to tell us where something was inserted.
+  // However, we can know "how" it inserted something.
+  //
+  // So, instead of weird depth calculations, we can use the step produced by the transform.
+  // For instance:
+  //    The `replaceStep.to and replaceStep.from`, tell us the real position
+  //    where the content will be insert.
+  //    Then, we can use the `tr.mapping.map` to the updated position after the replace operation
+  const replaceStep = tr.steps[0];
+  if (!(replaceStep instanceof ReplaceStep)) {
+    return tr;
+  }
+  const nextPosition = tr.mapping.map(replaceStep.to);
+
+  // The findFrom will make search for both: TextSelection and NodeSelections.
+  const nextSelection = Selection.findFrom(tr.doc.resolve(Math.min(nextPosition, tr.doc.content.size)), -1);
+  if (nextSelection) {
+    tr.setSelection(nextSelection);
+  }
+}
+export function getMarkdownSlice(text, schema, selection) {
+  const targetOpenStartNode = selection.$from.parent;
+  const targetOpenEndNode = selection.$to.parent;
+  try {
+    var _doc$content$firstChi, _doc$content$lastChil;
+    let textInput = text;
+    const textSplitByCodeBlock = textInput.split(/```/);
+    for (let i = 0; i < textSplitByCodeBlock.length; i++) {
+      if (i % 2 === 0) {
+        textSplitByCodeBlock[i] = textSplitByCodeBlock[i].replace(/\\/g, '\\\\');
+      }
+    }
+    textInput = textSplitByCodeBlock.join('```');
+    const atlassianMarkDownParser = new MarkdownTransformer(schema, md);
+    const doc = atlassianMarkDownParser.parse(escapeLinks(textInput));
+    if (!doc || !doc.content) {
+      return;
+    }
+    const canMergeOpenStart = targetOpenStartNode.type === ((_doc$content$firstChi = doc.content.firstChild) === null || _doc$content$firstChi === void 0 ? void 0 : _doc$content$firstChi.type);
+    const canMergeOpenEnd = targetOpenEndNode.type === ((_doc$content$lastChil = doc.content.lastChild) === null || _doc$content$lastChil === void 0 ? void 0 : _doc$content$lastChil.type);
+    const $start = Selection.atStart(doc).$from;
+    const $end = Selection.atEnd(doc).$from;
+    const openStart = canMergeOpenStart ? $start.depth : 0;
+    const openEnd = canMergeOpenEnd ? $end.depth : 0;
+    return new Slice(doc.content, openStart, openEnd);
+  } catch (error) {
+    logException(error, {
+      location: 'editor-plugin-paste-options-toolbar/util'
+    });
+    return;
+  }
+}

package/dist/es2019/util/index.js

@@ -0,0 +1,37 @@
+export function isPastedFromFabricEditor(pastedFrom) {
+  return pastedFrom === 'fabric-editor';
+}
+
+// @see https://product-fabric.atlassian.net/browse/ED-3159
+// @see https://github.com/markdown-it/markdown-it/issues/38
+export function escapeLinks(text) {
+  return text.replace(/(\[([^\]]+)\]\()?((https?|ftp|jamfselfservice):\/\/[^\s"'>]+)/g, str => {
+    return str.match(/^(https?|ftp|jamfselfservice):\/\/[^\s"'>]+$/) ? `<${str}>` : str;
+  });
+}
+export const hasMediaNode = slice => {
+  if (!slice) {
+    return false;
+  }
+  let hasMedia = false;
+  slice.content.descendants(node => {
+    if (['media', 'mediaInline', 'mediaGroup', 'mediaSingle'].includes(node.type.name)) {
+      hasMedia = true;
+      return false;
+    }
+    return true;
+  });
+  return hasMedia;
+};
+export const hasRuleNode = (slice, schema) => {
+  let hasRuleNode = false;
+  slice.content.nodesBetween(0, slice.content.size, (node, start) => {
+    if (node.type === schema.nodes.rule) {
+      hasRuleNode = true;
+    }
+  });
+  return hasRuleNode;
+};
+export const hasLinkMark = (state, pasteStartPos, pasteEndPos) => {
+  return state.doc.rangeHasMark(pasteStartPos, pasteEndPos, state.schema.marks.link);
+};

package/dist/esm/actions.js

@@ -0,0 +1,9 @@
+export var 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/esm/commands.js

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

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { pasteOptionsToolbarPlugin } from './plugin';

package/dist/esm/messages.js

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = 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/esm/plugin.js

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { hideToolbar, showToolbar } from './commands';
+import { createPlugin } from './pm-plugins/main';
+import { buildToolbar, isToolbarVisible } from './toolbar';
+import { pasteOptionsPluginKey, ToolbarDropdownOption } from './types';
+export var 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 createPlugin(dispatch);
+        }
+      }];
+    },
+    pluginsOptions: {
+      floatingToolbar: function floatingToolbar(state, intl) {
+        var pastePluginState = pasteOptionsPluginKey.getState(state);
+        var _ref3 = pastePluginState || {},
+          showToolbar = _ref3.showToolbar,
+          pasteStartPos = _ref3.pasteStartPos,
+          plaintext = _ref3.plaintext;
+        if (showToolbar) {
+          return buildToolbar(state, pasteStartPos, plaintext, intl, editorAnalyticsAPI);
+        }
+        return;
+      }
+    },
+    usePluginHook: function usePluginHook(_ref4) {
+      var editorView = _ref4.editorView;
+      var _useSharedPluginState = useSharedPluginState(api, ['paste']),
+        pasteState = _useSharedPluginState.pasteState;
+      var lastContentPasted = pasteState === null || pasteState === void 0 ? void 0 : pasteState.lastContentPasted;
+      useEffect(function () {
+        if (!lastContentPasted) {
+          hideToolbar()(editorView.state, editorView.dispatch);
+          return;
+        }
+        var selectedOption = ToolbarDropdownOption.None;
+        if (!lastContentPasted.isPlainText) {
+          selectedOption = ToolbarDropdownOption.RichText;
+        } else if (lastContentPasted.isShiftPressed) {
+          selectedOption = ToolbarDropdownOption.PlainText;
+        } else {
+          selectedOption = ToolbarDropdownOption.Markdown;
+        }
+        if (!isToolbarVisible(editorView.state, lastContentPasted)) {
+          return;
+        }
+        showToolbar(lastContentPasted, selectedOption)(editorView.state, editorView.dispatch);
+      }, [lastContentPasted, editorView]);
+    }
+  };
+};

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

@@ -0,0 +1,7 @@
+export var PASTE_TOOLBAR_CLASS = 'ak-editor-paste-toolbar';
+export var PASTE_TOOLBAR_MENU_ID = 'ak-editor-paste-toolbar-item-dropdownList';
+export var TEXT_HIGHLIGHT_CLASS = 'text-highlight';
+export var PASTE_HIGHLIGHT_DECORATION_KEY = 'paste-highlight-decoration-key';
+export var PASTE_TOOLBAR_ITEM_CLASS = 'ak-editor-paste-toolbar-item';
+export var EDITOR_WRAPPER_CLASS = 'akEditor';
+export var PASTE_OPTIONS_TEST_ID = 'paste-options-testid';

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

@@ -0,0 +1,60 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { Slice } from '@atlaskit/editor-prosemirror/model';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { checkAndHideToolbar } from '../commands';
+import { pasteOptionsPluginKey, ToolbarDropdownOption } from '../types';
+import { PASTE_HIGHLIGHT_DECORATION_KEY, TEXT_HIGHLIGHT_CLASS } from './constants';
+import { createPluginState } from './plugin-factory';
+export function createPlugin(dispatch) {
+  return new SafePlugin({
+    key: pasteOptionsPluginKey,
+    state: createPluginState(dispatch, {
+      showToolbar: false,
+      pasteStartPos: 0,
+      pasteEndPos: 0,
+      plaintext: '',
+      isPlainText: false,
+      highlightContent: false,
+      highlightDecorationSet: DecorationSet.empty,
+      richTextSlice: Slice.empty,
+      selectedOption: ToolbarDropdownOption.None
+    }),
+    view: function view(editorView) {
+      return {
+        update: function update(view, prevState) {
+          return prevState;
+        }
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        // Hide toolbar when clicked outside the editor
+        blur: 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: checkAndHideToolbar
+      },
+      handleKeyDown: function handleKeyDown(view) {
+        checkAndHideToolbar(view);
+        return false;
+      },
+      decorations: function decorations(state) {
+        var _pasteOptionsPluginKe, _pasteOptionsPluginKe2;
+        var _ref = pasteOptionsPluginKey.getState(state) || {},
+          highlightContent = _ref.highlightContent,
+          pasteStartPos = _ref.pasteStartPos;
+        var decorationSet = (_pasteOptionsPluginKe = (_pasteOptionsPluginKe2 = pasteOptionsPluginKey.getState(state)) === null || _pasteOptionsPluginKe2 === void 0 ? void 0 : _pasteOptionsPluginKe2.highlightDecorationSet) !== null && _pasteOptionsPluginKe !== void 0 ? _pasteOptionsPluginKe : DecorationSet.empty;
+        if (!highlightContent) {
+          return decorationSet;
+        }
+        var selection = state.tr.selection;
+        var pasteEndPos = selection.$anchor.pos;
+        var highlightDecoration = Decoration.inline(pasteStartPos, pasteEndPos, {
+          class: TEXT_HIGHLIGHT_CLASS
+        }, {
+          key: PASTE_HIGHLIGHT_DECORATION_KEY
+        });
+        return decorationSet.add(state.doc, [highlightDecoration]);
+      }
+    }
+  });
+}