提交 964ca990 authored 作者: 王鹏飞's avatar 王鹏飞

refactor(admin): host preview and history dialogs

上级 b16eb3b9
import { Modal } from 'antd'
import HistoryDialog from './HistoryDialog'
export default function HistoryFeatureDialog({ open, onClose, runtime }) {
return <Modal open={open} header={null} footer={null} destroyOnHidden centered keyboard={false} closeIcon={false} maskClosable={false} width="90%" onCancel={onClose} wrapClassName="history1" style={{ padding: 0 }}>
<HistoryDialog chapterId={runtime.chapterId} bookId={runtime.bookId} saveContent={runtime.saveContent} setContent={runtime.setContent} setHistoryVisible={visible => !visible && onClose()} />
</Modal>
}
import { defineEditorFeature } from '../../core/define-editor-feature'
import HistoryFeatureDialog from './FeatureDialog'
export default defineEditorFeature({ id: 'history' })
export default defineEditorFeature({ id: 'history', dialogs: [{ id: 'history.open', component: HistoryFeatureDialog }] })
import { Modal } from 'antd'
import { CloseOutlined } from '@ant-design/icons'
import PreviewDialog from './PreviewDialog'
export default function PreviewFeatureDialog({ open, onClose, runtime }) {
return <Modal open={open} header={null} footer={null} destroyOnHidden centered keyboard={false} closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#fff' }} />} maskClosable={false} classNames={{ body: 'phone-body', wrapper: 'phone-wrapper' }} wrapClassName="wrap-phone-privew" width="494px" onCancel={onClose}>
<PreviewDialog gData={runtime.gData} editor={runtime.editor} chapterId={runtime.chapterId} bookId={runtime.bookId} nowTitle={runtime.nowTitle} />
</Modal>
}
import { defineEditorFeature } from '../../core/define-editor-feature'
import PreviewFeatureDialog from './FeatureDialog'
export default defineEditorFeature({ id: 'preview' })
export default defineEditorFeature({ id: 'preview', dialogs: [{ id: 'preview.open', component: PreviewFeatureDialog }] })
import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from "react";
import { Button, Divider, Space, Modal } from "antd";
import { EyeOutlined, SaveOutlined, CloseOutlined, HistoryOutlined } from "@ant-design/icons";
import { EyeOutlined, SaveOutlined, HistoryOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import "../utils/iconfont";
......@@ -10,6 +10,7 @@ import "../utils/jax.less";
import { Boot } from "@wangeditor/editor";
import { registerEditorFeatures } from "../core/register-editor-features";
import { EditorDialogHost } from "../core/EditorDialogHost";
import { openEditorDialog } from '../core/editor-dialog'
import { editorFeatureRegistry } from "../features";
import { DomEditor, SlateTransforms } from "@wangeditor/editor";
......@@ -24,8 +25,6 @@ dayjs.extend(relativeTime);
import PreviewModal from "../features/preview/PreviewDialog";
import HistoryModal from "../features/history/HistoryDialog";
import { EditorHeader } from './EditorHeader'
import { EditorSidebar } from './EditorSidebar'
import { useEditorLifecycle } from './useEditorLifecycle'
......@@ -63,8 +62,6 @@ const WangEditorCustomer = (props, ref) => {
const saveRef = useRef();
const [priviewVisible, setPreviewVisible] = useState(false);
const [historyVisible, setHistoryVisible] = useState(false); //点击历史
useImperativeHandle(ref, () => {
......@@ -144,7 +141,6 @@ const WangEditorCustomer = (props, ref) => {
],
};
const previewRef = useRef();
const jsonContent = [
{
......@@ -259,12 +255,12 @@ const WangEditorCustomer = (props, ref) => {
if (!isView) {
await saveContent();
}
setPreviewVisible(true);
openEditorDialog(editor, 'preview.open');
};
// 历史
const historyIt = async () => {
setHistoryVisible(true);
openEditorDialog(editor, 'history.open');
};
const colorList = [
......@@ -313,55 +309,6 @@ const WangEditorCustomer = (props, ref) => {
/>
</div>
{!isView && <EditorSidebar editor={editor} toolbarConfig={toolbarConfig} toolbarRef={toolbarRef} tabKey={tabKey} onTabChange={tabKeyChange} colorList={colorList} onApplyColor={setColor} />}
{/* 预览 */}
<Modal
open={priviewVisible}
header={null}
footer={null}
destroyOnHidden
centered
keyboard={false}
closeIcon={<CloseOutlined style={{ fontSize: 20, color: "#fff" }} />}
maskClosable={false}
classNames={{ body: "phone-body", wrapper: "phone-wrapper" }}
wrapClassName="wrap-phone-privew"
width="494px"
onCancel={() => setPreviewVisible(false)}
>
<PreviewModal
ref={previewRef}
gData={gData}
editor={editor}
chapterId={chapterId}
bookId={bookId}
nowTitle={nowTitle}
/>
</Modal>
{/* 历史 */}
<Modal
open={historyVisible}
header={null}
footer={null}
destroyOnHidden
centered
keyboard={false}
closeIcon={false}
maskClosable={false}
width="90%"
onCancel={() => setHistoryVisible(false)}
wrapClassName="history1"
style={{ padding: 0 }}
>
<HistoryModal
setHistoryVisible={setHistoryVisible}
chapterId={chapterId}
bookId={bookId}
editor={editor}
saveContent={saveContent}
setContent={setContent}
/>
</Modal>
<EditorDialogHost
editor={editor}
registry={editorFeatureRegistry}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论