@atlaskit/editor-plugin-paste-options-toolbar/dist/cjs/ui/toolbar.js

Paste options toolbar for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.isToolbarVisible = exports.getToolbarMenuConfig = exports.buildToolbar = void 0;
var _messages = require("@atlaskit/editor-common/messages");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _commands = require("../editor-commands/commands");
var _constants = require("../pm-plugins/constants");
var _util = require("../pm-plugins/util");
var _types = require("../types/types");
var _pasteIcon = _interopRequireDefault(require("./paste-icon"));
var isToolbarVisible = exports.isToolbarVisible = function isToolbarVisible(state, lastContentPasted) {
  var _$from$parent, _$from$node, _state$schema$nodes$c;
  /**
   * Conditions for not showing the toolbar:
   * 1. Pasting link, media or text containing media(note: markdown link and images are allowed)
   * 2. 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)
   * 3. Cursor is inside the codeblock.
   */
  var $from = state.selection.$from;
  if ((0, _util.hasRuleNode)(lastContentPasted.pastedSlice, state.schema)) {
    return false;
  }
  var parentNodeType = (_$from$parent = $from.parent) === null || _$from$parent === void 0 ? void 0 : _$from$parent.type;
  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 && parentNodeType.name !== ((_state$schema$nodes$c = state.schema.nodes.codeBlock) === null || _state$schema$nodes$c === void 0 ? void 0 : _state$schema$nodes$c.name) && !(0, _util.isPastedFromFabricEditor)(lastContentPasted.pasteSource) && !(0, _util.hasLinkMark)(lastContentPasted.pastedSlice) && !(0, _util.hasMediaNode)(lastContentPasted.pastedSlice)) {
    return true;
  }
  return false;
};
var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(pluginState, intl, editorAnalyticsAPI) {
  var options = [{
    id: 'editor.paste.richText',
    title: intl.formatMessage(_messages.pasteOptionsToolbarMessages.richText),
    selected: pluginState.selectedOption === _types.ToolbarDropdownOption.RichText,
    hidden: pluginState.isPlainText,
    onClick: (0, _commands.changeToRichTextWithAnalytics)(editorAnalyticsAPI)()
  }, {
    id: 'editor.paste.markdown',
    title: intl.formatMessage(_messages.pasteOptionsToolbarMessages.markdown),
    selected: pluginState.selectedOption === _types.ToolbarDropdownOption.Markdown,
    onClick: (0, _commands.changeToMarkdownWithAnalytics)(editorAnalyticsAPI, pluginState.plaintext.length)()
  }, {
    id: 'editor.paste.plainText',
    title: intl.formatMessage(_messages.pasteOptionsToolbarMessages.plainText),
    selected: pluginState.selectedOption === _types.ToolbarDropdownOption.PlainText,
    onClick: (0, _commands.changeToPlainTextWithAnalytics)(editorAnalyticsAPI, pluginState.plaintext.length)()
  }];
  return {
    id: _constants.PASTE_TOOLBAR_ITEM_CLASS,
    icon: _pasteIcon.default,
    type: 'dropdown',
    testId: _constants.PASTE_OPTIONS_TEST_ID,
    title: intl.formatMessage(_messages.pasteOptionsToolbarMessages.pasteOptions),
    options: options,
    onToggle: onToggleHandler
  };
};
var onToggleHandler = function onToggleHandler(state, dispatch) {
  return (0, _commands.dropdownClickHandler)()(state, dispatch);
};
var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, editorAnalyticsAPI) {
  var schema = state.schema;
  var validNodes = Object.values(schema.nodes);
  var pluginState = _types.pasteOptionsPluginKey.getState(state);
  var menu = getToolbarMenuConfig(pluginState, intl, editorAnalyticsAPI);
  return {
    title: intl.formatMessage(_messages.pasteOptionsToolbarMessages.pasteOptions),
    nodeType: validNodes,
    zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
    className: _constants.PASTE_TOOLBAR_CLASS,
    items: [menu],
    align: 'right',
    onPositionCalculated: onPositionCalculated
  };
};
var onPositionCalculated = function onPositionCalculated(editorView, _nextPos) {
  var from = editorView.state.selection.from;
  var fromCoords = editorView.coordsAtPos(from);

  // Ignored via go/ees005
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
  var toolbar = document.querySelector("div[aria-label=\"".concat(_messages.pasteOptionsToolbarMessages.pasteOptions.defaultMessage, "\"]"));
  var offsetParent = (toolbar === null || toolbar === void 0 ? void 0 : toolbar.offsetParent) || editorView.dom;
  var offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
  var offsetTop = (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) || 0;
  var offsetLeft = (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) || 0;
  var offsetScrollTop = (offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.scrollTop) || 0;
  var cursorHeight = getCursorHeight(editorView, from);
  return {
    top: fromCoords.top - offsetTop + offsetScrollTop + cursorHeight,
    left: fromCoords.left - offsetLeft
  };
};
var getCursorHeight = function getCursorHeight(editorView, from) {
  var nodeAtFrom = editorView.domAtPos(from).node;
  var nearestNonTextNode = (nodeAtFrom === null || nodeAtFrom === void 0 ? void 0 : nodeAtFrom.nodeType) === Node.TEXT_NODE ?
  // Ignored via go/ees005
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
  nodeAtFrom.parentNode :
  // Ignored via go/ees005
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
  nodeAtFrom;
  return parseFloat(window.getComputedStyle(nearestNonTextNode, undefined).lineHeight || '');
};