text: "use strict";
  var __importDefault = (this && this.__importDefault) || function (mod) {
      return (mod && mod.__esModule) ? mod : { "default": mod };
  };
  Object.defineProperty(exports, "__esModule", { value: true });
  const react_1 = __importDefault(require("react"));
  const react_quilljs_1 = require("react-quilljs");
  require("quill/dist/quill.snow.css");
  const utils_1 = require("../../../utils");
  require("./index.css");
  const _name = 'editor';
  const Editor = (props, ref) => {
      let { value, onChange } = props;
      const { quill, quillRef } = react_quilljs_1.useQuill();
      utils_1.utils.extendRef(ref, quillRef);
      const [EditorValue, setEditorValue] = react_1.default.useState(() => {
          return value !== undefined ? value : '';
      });
      utils_1.utils.extendRef(ref, quillRef, {
          getValue: () => quill ? quill.root.innerHTML : null,
          setFocus: () => quill && quill.focus()
      });
      react_1.default.useEffect(() => {
          value !== undefined && value !== EditorValue && setEditorValue(value);
      }, [value]);
      react_1.default.useEffect(() => {
          quill && EditorValue !== quill.root.innerHTML && quill.clipboard.dangerouslyPasteHTML(EditorValue);
      }, [EditorValue]);
      react_1.default.useEffect(() => {
          if (quill) {
              quill.getModule('toolbar').addHandler('image', () => selectLocalImage(quill, props));
              quill.on('text-change', () => {
                  if (EditorValue !== quill.root.innerHTML) {
                      setEditorValue(quill.root.innerHTML);
                      typeof onChange === 'function' && onChange(quill.root.innerHTML);
                  }
              });
          }
      }, [quill]);
      let { width = '100%', height = '100%' } = props;
      let wrapperCSS = {
          width,
          minHeight: height,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-start'
      };
      return react_1.default.createElement("div", { style: wrapperCSS },
          react_1.default.createElement("div", { style: { minHeight: height }, ref: quillRef }));
  };
  const selectLocalImage = (quill, props) => {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');
      input.click();
      input.onchange = () => {
          let files = input.files;
          (files === null || files === void 0 ? void 0 : files.length) && saveToServer(quill, files[0], props);
      };
  };
  const saveToServer = (quill, file, props) => {
      let { uploadTo } = props;
      if (!uploadTo) {
          fileToBase64(file).then(url => url && insertToEditor(quill, url));
          return;
      }
      let { path, name, responseName } = uploadTo;
      if (!path || !name || !responseName) {
          fileToBase64(file).then(url => url && insertToEditor(quill, url));
          return;
      }
      let form = new FormData();
      form.append('file', file);
      const res = fetch(path, { method: 'POST', body: form }).then(res => res.json()).then(data => {
          insertToEditor(quill, data[responseName]);
      });
  };
  const fileToBase64 = (file) => new Promise(resolve => {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
          resolve(reader.result ? reader.result.toString() : null);
      };
      reader.onerror = () => resolve(null);
  });
  const insertToEditor = (quill, url) => {
      const range = quill.getSelection();
      range && quill.insertEmbed(range.index, 'image', url);
  };
  exports.default = react_1.default.forwardRef(Editor);
  //# sourceMappingURL=index.js.map