You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

84 lines
2.0 KiB

import { Box, Button,createStandaloneToast} from '@chakra-ui/react';
import React, { useEffect, useState } from 'react';
import { MarkdownEditor } from 'components/markdown-editor/editor';
import PageContainer from 'layouts/page-container';
import EditorNav from 'layouts/editor-nav'
import { EditMode } from 'src/types/editor';
import { MarkdownRender } from 'components/markdown-editor/render';
import { Post } from 'src/types/posts';
import { requestApi } from 'utils/axios/request';
import { useRouter } from 'next/router';
const toast = createStandaloneToast()
const content = `
# test原创
`
function PostEditPage() {
const router = useRouter()
const {id} = router.query
const [editMode, setEditMode] = useState(EditMode.Edit)
const [ar,setAr] = useState({
md: content,
title: ''
})
useEffect(() => {
if (id && id !== 'new') {
requestApi.get(`/editor/post/${id}`).then(res => setAr(res.data))
}
},[id])
const onChange = newMd => {
setAr({
...ar,
md: newMd
})
}
const publish = async () => {
await requestApi.post(`/editor/post`, ar)
toast({
description: "发布成功",
status: "success",
duration: 2000,
isClosable: true,
})
router.push('/editor/posts')
}
console.log(ar)
return (
<PageContainer
nav={<EditorNav
ar={ar}
changeEditMode={(v) => setEditMode(v)}
changeTitle={(e) => {setAr({...ar, title: e.target.value})}}
publish={() => publish()}
/>}
>
<Box style={{ height: 'calc(100vh - 145px)' }}>
{editMode === EditMode.Edit ?
<MarkdownEditor
options={{
overrides: {
Button: {
component: Button,
},
},
}}
onChange={(md) => onChange(md)}
md={ar.md}
/> :
<Box height="100%" p="6">
<MarkdownRender md={ar.md} />
</Box>
}
</Box>
</PageContainer>
);
}
export default PostEditPage