"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BubbleMenu = void 0;

var _core = require("@material-ui/core");

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));

var _react = require("@tiptap/react");

var _react2 = _interopRequireDefault(require("react"));

var _hooks = require("../hooks");

const useStyles = (0, _core.makeStyles)(theme => {
  return (0, _core.createStyles)({
    root: {
      backgroundColor: theme.palette.type === 'dark' ? '#222' : theme.palette.common.white,
      borderRadius: '10px',
      '&:not(:empty)': {
        padding: '3px 6px',
        boxShadow: `0 2px 7px 0 ${theme.palette.type === 'dark' ? 'rgb(255 255 255 / 50%)' : 'rgb(0 0 0 / 50%)'}`
      },
      '&:empty + .tippy-svg-arrow': {
        display: 'none'
      }
    }
  });
});

const BubbleMenu = props => {
  const classes = useStyles();
  const localization = (0, _hooks.useLocalization)();
  return /*#__PURE__*/_react2.default.createElement(_react.BubbleMenu, {
    className: classes.root,
    tippyOptions: {
      delay: 100,
      trigger: 'click',
      aria: {
        expanded: false
      },
      hideOnClick: false,
      getReferenceClientRect: null,
      onShow: instance => {
        const {
          state
        } = props.editor.view;
        const {
          selection
        } = state;
        const {
          ranges
        } = selection;
        const from = Math.min(...ranges.map(range => range.$from.pos));
        const to = Math.max(...ranges.map(range => range.$to.pos));
        instance.setProps({
          getReferenceClientRect: () => (0, _react.posToDOMRect)(props.editor.view, from, to)
        });
      }
    },
    editor: props.editor
  }, props.editor.isActive('image') && /*#__PURE__*/_react2.default.createElement(_core.IconButton, {
    "aria-label": localization.bubbleMenu.removeImage,
    size: "small",
    onClick: () => props.editor.chain().focus().deleteSelection().run()
  }, /*#__PURE__*/_react2.default.createElement(_Delete.default, {
    fontSize: "inherit"
  })), props.editor.isActive('link') && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_core.Link, {
    color: "inherit",
    href: props.editor.getAttributes('link').href,
    target: "_blank",
    rel: "noreferrer",
    style: {
      marginRight: '3px'
    }
  }, props.editor.getAttributes('link').href), /*#__PURE__*/_react2.default.createElement(_core.IconButton, {
    "aria-label": localization.bubbleMenu.removeLink,
    size: "small",
    onClick: () => props.editor.chain().focus().unsetLink().run()
  }, /*#__PURE__*/_react2.default.createElement(_Close.default, {
    fontSize: "inherit"
  }))));
};

exports.BubbleMenu = BubbleMenu;
//# sourceMappingURL=bubble-menu.js.map