import { MarkdownEditor } from '@seafile/seafile-editor';

import axios from 'axios';

class API {

  getFileContent() {
    const fileUrl = '';
    return axios.get(fileUrl);
  }

  saveFileContent(content) {
    const updateLink = '';
    const formData = new FormData();
    const blob = new Blob([data], { type: 'text/plain' });
    formData.append('file', blob);
    axios.post(updateLink, formData);
  }

  uploadLocalImage(file) {
    const uploadLink = '';
    const formData = new FormData();
    formData.append('file', file);
    return axios.post(uploadLink, formData);
  }

}

const editorApi = new API();

export default editorApi;

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Button } from 'reactstrap';
import { MarkdownEditor } from '@seafile/seafile-editor';
import editorApi from './api';

export default function SimpleMarkdownEditor() {

  const editorRef = useRef(null);
  const [fileContent, setFileContent] = useState('');
  const [isFetching, setIsFetching] = useState(true);
  const [contentVersion, setContentVersion] = useState(0);

  const mathJaxSource = '';

  useEffect(() => {
    editorApi.getFileContent().then(res => {
      setFileContent(res.data);
      setIsFetching(false);
    });
  }, []);

  const onSave = useCallback(() => {
    const content = editorRef.current.getValue();
     editorApi.saveFileContent(content).then(res => {
      window.alert('Saved successfully')
    });
  }, []);

  const onContentChanged = useCallback(() => {
    setContentVersion(contentVersion + 1);
  }, [contentVersion]);

  return (
    <div className='seafile-editor'>
      <MarkdownEditor
        ref={editorRef}
        isFetching={isFetching}
        value={fileContent}
        initValue={''}
        editorApi={editorApi}
        onSave={onSave}
        onContentChanged={onContentChanged}
        mathJaxSource={mathJaxSource}
      />
    </div>
  );
}

const string = '# Hello, I am first level title'
processor.process(string).then(result => {
  const html = String(result);
  ...
})