import SummernoteLite from "react-summernote-lite";

// you need to iport the css style yourself
import 'react-summernote-lite/dist/summernote-lite.min.css';

// only import if you want to add some languages
import 'react-summernote-lite/dist/lang/summernote-zh-CN.min';

// only import if you want to add some fonts
import 'react-summernote-lite/dist/font/summernote.ttf';

const App = () => {
  const [imageFiles, setImageFiles] = useState([]);

  const noteRef = useRef();

  return (
    <div>
    <SummernoteLite
      ref={noteRef}
      defaultCodeValue={'<p>This is the default html value</p>'}
      placeholder={"Write something here..."}
      tabsize={2}
      lang="zh-CN" // only if you want to change the default language
      height={350 || "50vh"}
      dialogsInBody={true}
      blockquoteBreakingLevel={0}
      toolbar={[
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear', 'strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['fontname', ['fontname']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video', 'hr']],
        ['view', ['fullscreen', 'codeview', 'help']]
      ]}
      fontNames={[
        "Arial",
        "Georgia",
        "Verdana",
        "e.t.c..."
      ]}
      callbacks={
        onImageUpload: function (files){
            setImageFiles(files);
        },
        onKeyup: function (e){},
        onKeyDown: function (e){},
        onPaste: function (e){}
      }
    />

    <button
        style={{ marginTop: 9 }}
        onClick={() => {
            noteRef.current.summernote('fullscreen.toggle');
        }}>
        Fullscreen
    </button>
    </div>
  );
};

export default App;