73 lines
2.9 KiB
JavaScript
73 lines
2.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Editor } from '@wangeditor/editor-for-react';
|
|
import { SlateNode } from '@wangeditor/editor';
|
|
import { Col, Row } from 'antd';
|
|
import classNames from 'classnames';
|
|
import { TocView } from '../toc/tocView';
|
|
import Styles from './web.module.less';
|
|
export default function Render(props) {
|
|
const { className, content, tocPosition = 'none', tocFixed, highlightBgColor = 'none', headerTop = 0, tocClosed = false, scrollId } = props.data;
|
|
const editorConfig = {
|
|
readOnly: true,
|
|
autoFocus: true,
|
|
// scroll: false,
|
|
};
|
|
const [editor, setEditor] = useState(null);
|
|
const [html, setHtml] = useState('');
|
|
const [toc, setToc] = useState([]);
|
|
const [showToc, setShowToc] = useState(false);
|
|
useEffect(() => {
|
|
return () => {
|
|
if (editor == null)
|
|
return;
|
|
editor.destroy();
|
|
setEditor(null);
|
|
};
|
|
}, [editor]);
|
|
useEffect(() => {
|
|
if (content) {
|
|
setHtml(content);
|
|
}
|
|
}, [content]);
|
|
useEffect(() => {
|
|
if (tocPosition !== 'none') {
|
|
setShowToc(true);
|
|
}
|
|
}, [tocPosition]);
|
|
return (<div className={classNames(Styles.container, className)}>
|
|
<Row gutter={[16, 0]}>
|
|
{tocPosition === 'left' && (<Col flex="228px">
|
|
<TocView toc={toc} showToc={showToc} tocPosition='left' setShowToc={setShowToc} highlightBgColor={highlightBgColor} headerTop={headerTop} fixed={tocFixed} closed={tocClosed} scrollId={scrollId}/>
|
|
</Col>)}
|
|
|
|
<Col flex="auto">
|
|
<div className={Styles.content}>
|
|
<div className={Styles.editorContainer}>
|
|
<div style={{ width: "100%" }}>
|
|
<Editor defaultConfig={editorConfig} value={html} mode="default" style={{
|
|
width: '100%'
|
|
}} onCreated={setEditor} onChange={(editor) => {
|
|
setHtml(editor.getHtml());
|
|
const headers = editor.getElemsByTypePrefix('header');
|
|
const tocItems = headers.map((header) => {
|
|
const text = SlateNode.string(header);
|
|
const { id, type } = header;
|
|
return {
|
|
text,
|
|
level: parseInt(type.substring(6)),
|
|
id,
|
|
};
|
|
});
|
|
setToc([...tocItems]);
|
|
}}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
{tocPosition === 'right' && (<Col flex="228px">
|
|
<TocView toc={toc} showToc={showToc} tocPosition='right' setShowToc={setShowToc} highlightBgColor={highlightBgColor} headerTop={headerTop} fixed={tocFixed} closed={tocClosed} scrollId={scrollId}/>
|
|
</Col>)}
|
|
</Row>
|
|
</div>);
|
|
}
|