client: optimize fetching rendered markdown
This commit is contained in:
parent
34b1ab979f
commit
eaffebb53c
4 changed files with 11 additions and 6 deletions
|
@ -68,7 +68,8 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
|
|||
|
||||
const onTitleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null, [setTitle])
|
||||
|
||||
const removeFile = useCallback(() => (remove?: () => void) => {
|
||||
const removeFile = useCallback((remove?: () => void) => {
|
||||
console.log(remove)
|
||||
if (remove) {
|
||||
if (content && content.trim().length > 0) {
|
||||
const confirmed = window.confirm("Are you sure you want to remove this file?")
|
||||
|
@ -121,7 +122,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
|
|||
width={"100%"}
|
||||
id={title}
|
||||
/>
|
||||
{remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={removeFile} />}
|
||||
{remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
|
||||
</div>
|
||||
<div className={styles.descriptionContainer}>
|
||||
{tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
|
||||
|
|
|
@ -111,7 +111,7 @@ const Post = () => {
|
|||
}, [docs, title])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 150 }}>
|
||||
<Title title={title} onChange={onChangeTitle} />
|
||||
<FileDropzone setDocs={uploadDocs} />
|
||||
<DocumentList docs={docs} updateDocTitle={updateDocTitle} updateDocContent={updateDocContent} removeDoc={removeDoc} />
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import useTheme from "@lib/hooks/use-theme"
|
||||
import { memo, useEffect, useState } from "react"
|
||||
import styles from './preview.module.css'
|
||||
|
||||
type Props = {
|
||||
height?: number | string
|
||||
|
@ -24,7 +25,7 @@ const MarkdownPreview = ({ height = 500, fileId, content, title }: Props) => {
|
|||
setPreview(res)
|
||||
setIsLoading(false)
|
||||
}
|
||||
} else {
|
||||
} else if (content) {
|
||||
const resp = await fetch(`/api/render-markdown`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
@ -41,11 +42,12 @@ const MarkdownPreview = ({ height = 500, fileId, content, title }: Props) => {
|
|||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
setIsLoading(false)
|
||||
}
|
||||
fetchPost()
|
||||
}, [content, fileId, title])
|
||||
return (<>
|
||||
{isLoading ? <div>Loading...</div> : <div data-theme={theme} dangerouslySetInnerHTML={{ __html: preview }} style={{
|
||||
{isLoading ? <div>Loading...</div> : <div data-theme={theme} className={styles.markdownPreview} dangerouslySetInnerHTML={{ __html: preview }} style={{
|
||||
height
|
||||
}} />}
|
||||
</>)
|
||||
|
|
|
@ -11,12 +11,14 @@ const renderMarkdown: NextApiHandler = async (req, res) => {
|
|||
return language
|
||||
}
|
||||
const type = fileType()
|
||||
let contentToRender: string = '\n' + (content || '');
|
||||
let contentToRender: string = (content || '');
|
||||
|
||||
if (!renderAsMarkdown.includes(type)) {
|
||||
contentToRender = `~~~${type}
|
||||
${content}
|
||||
~~~`
|
||||
} else {
|
||||
contentToRender = '\n' + content;
|
||||
}
|
||||
|
||||
if (typeof contentToRender !== 'string') {
|
||||
|
|
Loading…
Reference in a new issue