import { UnControlled as CodeMirror } from 'react-codemirror2';
import { useState, useEffect } from 'react';
import { Button } from 'antd';
import { saveAs } from 'file-saver';
import styles from './index.css';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
let timer = null;
let html = `
Document
(H5编辑器)H5-Dooring是一款功能强大,开源免费的H5可视化页面配置解决方案,
致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。
`;
export default function() {
const [isUpdate, setUpdate] = useState(false);
const [cursor, setCursor] = useState({ line: 1, cn: 1 });
const handleChange = (editor, data, value) => {
// codeStr = value
fetchPage(value);
};
const fetchPage = v => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fetch('http://localhost:80/dooring/render', { method: 'POST', body: v }).then(res => {
html = v;
setUpdate(prev => !prev);
});
}, 1000);
};
const downLoadHtml = () => {
var file = new File([html], `${Date.now()}.html`, { type: 'text/html;charset=utf-8' });
saveAs(file);
};
const onCursorChange = (editor, data) => {
const { line, ch } = data;
setCursor({ line, ch });
};
useEffect(() => {
fetch('http://localhost:80/dooring/render', { method: 'POST', body: html }).then(res => {
setUpdate(prev => !prev);
});
}, []);
return (
);
}