71 lines
2.9 KiB
JavaScript
71 lines
2.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Editor } from "@wangeditor/editor-for-react";
|
|
import { SlateNode } from "@wangeditor/editor";
|
|
import classNames from 'classnames';
|
|
import { TocView } from '../toc/tocView';
|
|
import Styles from './web.module.less';
|
|
export default function Render(props) {
|
|
const { className, name, content, tocPosition = 'none', tocFixed, highlightBgColor = 'none', headerTop = 0, tocClosed = false, scrollId, tocWidth, tocHeight } = 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]);
|
|
useEffect(() => {
|
|
if (name) {
|
|
window.document.title = name;
|
|
}
|
|
}, [name]);
|
|
return (<div className={classNames(Styles.container, className)}>
|
|
<div className={Styles.contentContainer}>
|
|
{tocPosition === "left" ? (<TocView toc={toc} showToc={showToc} tocPosition="left" setShowToc={setShowToc} highlightBgColor={highlightBgColor} headerTop={headerTop} fixed={tocFixed} closed={tocClosed} scrollId={scrollId} tocWidth={tocWidth} tocHeight={tocHeight}/>) : null}
|
|
|
|
<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>
|
|
{tocPosition === "right" ? (<TocView toc={toc} showToc={showToc} tocPosition="right" setShowToc={setShowToc} highlightBgColor={highlightBgColor} headerTop={headerTop} fixed={tocFixed} closed={tocClosed} scrollId={scrollId} tocWidth={tocWidth} tocHeight={tocHeight}/>) : null}
|
|
</div>
|
|
</div>);
|
|
}
|