import {jsx}from'react/jsx-runtime';import {useState,useEffect}from'react';import PropTypes from'prop-types';import'react-quill/dist/quill.snow.css';const Editor = ({
  placeholder,
  name,
  id,
  value,
  onChange
}) => {
  const [mounted, setMounted] = useState(false);
  const [ReactQuill, setReactQuill] = useState(null);
  useEffect(() => {
    let cancelled = false;
    import('react-quill').then(module => {
      if (!cancelled) {
        setMounted(true);
        setReactQuill(() => module.default);
      }
    });
    return () => {
      cancelled = true;
    };
  }, []);
  const modules = {
    toolbar: [[{
      header: '1'
    }, {
      header: '2'
    }, {
      font: []
    }],
    //   [{ size: [] }],
    ['bold', 'italic', 'underline', 'blockquote'], [{
      list: 'ordered'
    }, {
      list: 'bullet'
    }], ['link', 'image']
    //   ['clean'],
    ],
    clipboard: {
      matchVisual: true
    }
  };
  const formats = ['header', 'font', 'size', 'bold', 'italic', 'underline', 'blockquote', 'list', 'bullet', 'link', 'image'];
  // SSR / pre-hydration: show textarea so form works and no hydration mismatch
  if (!mounted || !ReactQuill) {
    return jsx("div", {
      style: {
        marginTop: '8px'
      },
      children: jsx("textarea", {
        name: name,
        id: id,
        value: value || '',
        onChange: e => onChange(e.target.value),
        placeholder: placeholder,
        className: "block w-full py-2 px-3 text-sm text-gray-800 font-light border border-gray-300 rounded bg-transparent focus:border-[#3182ce] focus:outline-none min-h-[120px]",
        rows: 5
      })
    });
  }
  const Quill = ReactQuill;
  return jsx("div", {
    children: jsx(Quill, {
      name: name,
      id: id,
      style: {
        marginTop: '8px'
      },
      onChange: onChange,
      value: value,
      modules: modules,
      formats: formats,
      bounds: ".app",
      placeholder: placeholder
    })
  });
};
Editor.propTypes = {
  placeholder: PropTypes.string
};export{Editor as default};//# sourceMappingURL=editor.js.map
