import React, { useEffect, createElement } from "react";
import MediumEditor from "medium-editor";
import { css } from "emotion";
var editorClass = /*#__PURE__*/css({
  width: "100%",
  minWidth: 25,
  "&:focus": {
    outline: "none"
  },
  "& b": {
    fontWeight: "bold"
  },
  "& u": {
    textDecoration: "underline"
  },
  "& i": {
    fontStyle: "italic"
  },
  "& blockquote": {
    display: "block",
    paddingLeft: "20px",
    borderLeft: "6px solid #df0d32",
    marginLeft: "-15px",
    fontStyle: "italic",
    color: "#555"
  }
}, "label:editorClass;");

var ReactMediumEditor = function ReactMediumEditor(_ref) {
  var _ref$value = _ref.value,
      value = _ref$value === void 0 ? 'Please input your text here' : _ref$value,
      onChange = _ref.onChange,
      _ref$disableEditing = _ref.disableEditing,
      disableEditing = _ref$disableEditing === void 0 ? false : _ref$disableEditing,
      _ref$toolbarDisable = _ref.toolbarDisable,
      toolbarDisable = _ref$toolbarDisable === void 0 ? true : _ref$toolbarDisable;
  var elementRef = React.useRef();
  var editorRef = React.useRef();

  var handleChange = function handleChange(data, editable) {
    if (typeof onChange === "function") {
      onChange(editable.innerText.replace(/<[^>]+>/g, ""));
    }
  };
  /**
   * Here we're recreating the "Medium editor" whenever the "tag" changes because that's the element editor is mounted on.
   */


  useEffect(function () {
    if (!elementRef && !elementRef.current) {
      return;
    } // Create "MediumEditor" instance


    editorRef.current = new MediumEditor(elementRef.current, {
      disableEditing: disableEditing,
      toolbar: !toolbarDisable ? {
        buttons: ['bold', 'italic', 'underline', 'strikethrough', 'quote', 'anchor', 'image', 'orderedlist', 'unorderedlist', 'h2', 'h3', 'html']
      } : !toolbarDisable
    });
    editorRef.current.subscribe("blur", handleChange);
    return function () {
      editorRef.current.destroy();
    };
  }, []);
  return /*#__PURE__*/createElement('div', {
    dangerouslySetInnerHTML: {
      __html: value
    },
    ref: elementRef,
    className: editorClass
  });
};

export default /*#__PURE__*/React.memo(ReactMediumEditor);
//# sourceMappingURL=MediumEditor.js.map