"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SlateViewer;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
var _react = _interopRequireWildcard(require("react"));
var _extension = require("../../extension");
var _slateReact = require("slate-react");
var _outline = _interopRequireDefault(require("../../containers/outline"));
var _useScrollContext = require("../../hooks/use-scroll-context");
var _userLinkClick = _interopRequireDefault(require("../../hooks/user-link-click"));
var _common = require("../../utils/common");
var _useContainerStyle = _interopRequireDefault(require("../../hooks/use-container-style"));
require("./style.css");
const isMacOS = (0, _common.isMac)();
function SlateViewer(_ref) {
  var _window, _window$location;
  let {
    value,
    isShowOutline,
    scrollRef: externalScrollRef,
    onLinkClick,
    options
  } = _ref;
  const scrollRef = (0, _react.useRef)(null);
  const {
    containerStyle
  } = (0, _useContainerStyle.default)(scrollRef, isShowOutline);
  const editor = (0, _react.useMemo)(() => {
    return (0, _extension.createSlateEditor)();
  }, []);
  const containerScrollRef = externalScrollRef ? externalScrollRef : scrollRef;
  const decorate = (0, _extension.useHighlight)(editor);
  (0, _userLinkClick.default)(editor._id, (_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.origin, onLinkClick);

  // willUnmount
  (0, _react.useEffect)(() => {
    return () => {
      editor.selection = null;
      editor.history = {
        redos: [],
        undos: []
      };
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  (0, _react.useEffect)(() => {
    editor.children = value;
  }, [editor, value]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-viewer-container ".concat(_common.isMobile && 'mobile')
  }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
    editor: editor,
    initialValue: value
  }, /*#__PURE__*/_react.default.createElement(_useScrollContext.ScrollContext.Provider, {
    value: {
      scrollRef: containerScrollRef
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: scrollRef,
    className: "sf-slate-viewer-scroll-container ".concat(isMacOS ? '' : 'isWin', " ").concat(isShowOutline ? 'outline' : '')
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-article-content"
  }, isShowOutline && !_common.isMobile && /*#__PURE__*/_react.default.createElement(_outline.default, {
    editor: editor
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-viewer-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: true,
    decorate: decorate,
    renderElement: props => (0, _extension.renderElement)((0, _objectSpread2.default)({
      options
    }, props)),
    renderLeaf: _extension.renderLeaf
  }))))))));
}