"use strict";

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

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

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

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

var _context = require("../context");

var _extensionList = require("../extension-list");

var _styles = require("../styles");

var _bubbleMenu = require("./bubble-menu");

var _contextMenu = require("./context-menu");

var _menuBar = require("./menu-bar");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const useStyles = (0, _core.makeStyles)(theme => {
  const commonStyles = (0, _styles.getCommonStyles)(theme);
  return (0, _core.createStyles)({
    root: {
      margin: '0.5rem 0',
      boxShadow: '0px 10px 15px -7px rgba(0,0,0,0.4)',
      borderRadius: '10px'
    },
    editorWrapper: {
      padding: '0rem 1rem 0.5rem',
      marginTop: '1rem',
      background: commonStyles.editorBackground,
      borderRadius: commonStyles.editorBorderRadius,
      border: theme.palette.type === 'dark' ? commonStyles.editorBorder : 'unset',
      '& .ProseMirror': {
        outline: 0,
        '&:after': {
          clear: 'both',
          content: '""',
          display: 'block'
        },
        '& p.is-empty:only-child:before': {
          content: 'attr(data-placeholder)',
          float: 'left',
          opacity: 0.5,
          pointerEvents: 'none',
          height: 0,
          fontStyle: 'italic'
        },
        '& a': {
          textDecoration: 'underline',
          color: '#06c'
        },
        '& figure': {
          margin: 0,
          '& img': {
            maxWidth: '100%',
            height: 'auto'
          }
        },
        '& table': {
          borderCollapse: 'collapse',
          tableLayout: 'fixed',
          width: '100%',
          margin: 0,
          overflow: 'hidden',
          '& th': {
            fontWeight: 700,
            textAlign: 'left',
            backgroundColor: theme.palette.type === 'light' ? '#f1f3f5' : '#403f3f'
          },
          '& td, & th': {
            minWidth: '1em',
            border: '2px solid #ced4da',
            padding: '3px 5px',
            verticalAlign: 'top',
            boxSizing: 'border-box',
            position: 'relative',
            '& > *': {
              margin: 0
            }
          },
          '& .selectedCell:after': {
            zIndex: 2,
            position: 'absolute',
            content: '""',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            background: 'rgba(200, 200, 255, 0.4)',
            pointerEvents: 'none'
          }
        },
        '& .ProseMirror-selectednode': {
          '& img': {
            outline: `3px solid ${theme.palette.primary.main}`
          }
        }
      }
    }
  });
});

const Editor = props => {
  var _props$autofocus;

  const classes = useStyles();
  const [contextMenuOpen, setContextMenuOpen] = (0, _react2.useState)(false);
  const [contextMenuPosition, setContextMenuPosition] = (0, _react2.useState)({
    x: null,
    y: null
  });
  const sensenetEditor = (0, _react.useEditor)({
    extensions: (0, _extensionList.createExtensions)({
      placeholder: {
        placeholder: props.placeholder || ''
      }
    }),
    autofocus: (_props$autofocus = props.autofocus) !== null && _props$autofocus !== void 0 ? _props$autofocus : false,
    editable: !props.readOnly,
    content: props.content,

    onUpdate(updateProps) {
      var _props$onChange;

      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, updateProps);
    }

  });
  const handleContextMenu = (0, _react2.useCallback)(ev => {
    if (sensenetEditor !== null && sensenetEditor !== void 0 && sensenetEditor.isActive('table')) {
      ev.preventDefault();
      setContextMenuOpen(true);
      setContextMenuPosition({
        x: ev.clientX - 2,
        y: ev.clientY - 4
      });
    }
  }, [sensenetEditor]);
  return /*#__PURE__*/_react2.default.createElement(_context.LocalizationProvider, {
    localization: props.localization
  }, /*#__PURE__*/_react2.default.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react2.default.createElement(_menuBar.MenuBar, {
    editor: sensenetEditor
  }), sensenetEditor && /*#__PURE__*/_react2.default.createElement(_bubbleMenu.BubbleMenu, {
    editor: sensenetEditor
  }), sensenetEditor && /*#__PURE__*/_react2.default.createElement(_contextMenu.ContextMenu, {
    editor: sensenetEditor,
    open: contextMenuOpen,
    setOpen: setContextMenuOpen,
    mousePosition: contextMenuPosition,
    setMousePosition: setContextMenuPosition
  }), /*#__PURE__*/_react2.default.createElement(_react.EditorContent, {
    editor: sensenetEditor,
    className: classes.editorWrapper,
    onContextMenu: handleContextMenu
  })));
};

exports.Editor = Editor;
//# sourceMappingURL=editor.js.map