"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SlateEditor;
var _react = _interopRequireWildcard(require("react"));
var _slateReact = require("slate-react");
var _slate = require("slate");
var _extension = require("../../extension");
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
var _eventHandler = _interopRequireDefault(require("../../utils/event-handler"));
var _withPropsEditor = _interopRequireDefault(require("./with-props-editor"));
var _editorHelp = _interopRequireDefault(require("./editor-help"));
var _core = require("../../extension/core");
var _useScrollContext = require("../../hooks/use-scroll-context");
var _useAttachments = _interopRequireDefault(require("../../hooks/use-attachments"));
var _common = require("../../utils/common");
var _outline = _interopRequireDefault(require("../../containers/outline"));
var _useContainerStyle = _interopRequireDefault(require("../../hooks/use-container-style"));
require("./style.css");
const isMacOS = (0, _common.isMac)();
function SlateEditor(_ref) {
  let {
    value,
    editorApi,
    onSave,
    onContentChanged,
    isReadonly,
    isSupportFormula,
    isSupportInsertSeafileImage,
    children
  } = _ref;
  const scrollRef = (0, _react.useRef)(null);
  const [slateValue, setSlateValue] = (0, _react.useState)(value);
  const {
    containerStyle
  } = (0, _useContainerStyle.default)(scrollRef);
  const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
    editorApi,
    onSave
  }), [editorApi, onSave]);
  const eventProxy = (0, _react.useMemo)(() => {
    return new _eventHandler.default(editor);
  }, [editor]);
  (0, _useAttachments.default)(editor);
  const decorate = (0, _extension.useHighlight)(editor);
  const onChange = (0, _react.useCallback)(value => {
    setSlateValue(value);
    if (editor.forceNormalize) return;
    const operations = editor.operations;
    const modifyOps = operations.filter(o => o.type !== 'set_selection');
    if (modifyOps.length > 0) {
      onContentChanged && onContentChanged(value);
    }
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch('change');
  }, [editor.forceNormalize, editor.operations, onContentChanged]);
  const focusFirstNode = (0, _react.useCallback)(editor => {
    const [firstNode] = editor.children;
    if (!firstNode) return;
    const [firstNodeFirstChild] = firstNode.children;
    if (firstNodeFirstChild) {
      const startOfFirstNode = _slate.Editor.start(editor, [0, 0]);
      const range = {
        anchor: startOfFirstNode,
        focus: startOfFirstNode
      };
      (0, _core.focusEditor)(editor, range);
    }
  }, []);

  // useMount: focus editor
  (0, _react.useEffect)(() => {
    editor.forceNormalize = true;
    _slate.Editor.normalize(editor, {
      force: true
    });
    const timer = setTimeout(() => {
      editor.forceNormalize = false;
      focusFirstNode(editor);
    }, 300);
    return () => {
      editor.forceNormalize = false;
      clearTimeout(timer);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // willUnmount
  (0, _react.useEffect)(() => {
    return () => {
      editor.selection = null;
      editor.history = {
        redos: [],
        undos: []
      };
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Focus at start of document, when document is empty
  const onEditorClick = (0, _react.useCallback)(() => {
    const isDocEmpty = (0, _common.isDocumentEmpty)(editor);
    if (isDocEmpty) {
      focusFirstNode(editor);
    }
  }, [editor, focusFirstNode]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-editor-container ".concat(_common.isMobile && 'mobile')
  }, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
    editor: editor,
    readonly: isReadonly,
    isRichEditor: true,
    isSupportFormula: isSupportFormula,
    isSupportInsertSeafileImage: isSupportInsertSeafileImage
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-editor-content",
    onClick: onEditorClick
  }, /*#__PURE__*/_react.default.createElement(_useScrollContext.ScrollContext.Provider, {
    value: {
      scrollRef
    }
  }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
    editor: editor,
    initialValue: slateValue,
    onChange: onChange
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: scrollRef,
    className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-article-content"
  }, !_common.isMobile && /*#__PURE__*/_react.default.createElement(_outline.default, {
    editor: editor
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-article-container",
    style: containerStyle
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "article"
  }, /*#__PURE__*/_react.default.createElement(_extension.SetNodeToDecorations, null), /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
    readOnly: isReadonly,
    decorate: decorate,
    renderElement: _extension.renderElement,
    renderLeaf: _extension.renderLeaf,
    onKeyDown: eventProxy.onKeyDown,
    onCopy: eventProxy.onCopy
  }))))), /*#__PURE__*/_react.default.createElement(_editorHelp.default, {
    children: children
  })))));
}