import { createStyles, makeStyles } from '@material-ui/core';
import { EditorContent, useEditor } from '@tiptap/react';
import React, { useCallback, useState } from 'react';
import { LocalizationProvider } from "../context/index.js";
import { createExtensions } from "../extension-list.js";
import { getCommonStyles } from "../styles.js";
import { BubbleMenu } from "./bubble-menu.js";
import { ContextMenu } from "./context-menu.js";
import { MenuBar } from "./menu-bar.js";
const useStyles = makeStyles(theme => {
  const commonStyles = getCommonStyles(theme);
  return 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}`
          }
        }
      }
    }
  });
});
export const Editor = props => {
  var _props$autofocus;

  const classes = useStyles();
  const [contextMenuOpen, setContextMenuOpen] = useState(false);
  const [contextMenuPosition, setContextMenuPosition] = useState({
    x: null,
    y: null
  });
  const sensenetEditor = useEditor({
    extensions: 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 = 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__*/React.createElement(LocalizationProvider, {
    localization: props.localization
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(MenuBar, {
    editor: sensenetEditor
  }), sensenetEditor && /*#__PURE__*/React.createElement(BubbleMenu, {
    editor: sensenetEditor
  }), sensenetEditor && /*#__PURE__*/React.createElement(ContextMenu, {
    editor: sensenetEditor,
    open: contextMenuOpen,
    setOpen: setContextMenuOpen,
    mousePosition: contextMenuPosition,
    setMousePosition: setContextMenuPosition
  }), /*#__PURE__*/React.createElement(EditorContent, {
    editor: sensenetEditor,
    className: classes.editorWrapper,
    onContextMenu: handleContextMenu
  })));
};
//# sourceMappingURL=editor.js.map