client: use next/dynamic for react markdown rendering
This commit is contained in:
parent
97f354a271
commit
d83cdf3eeb
4 changed files with 11 additions and 4 deletions
|
@ -9,12 +9,16 @@ import Tooltip from "@geist-ui/core/dist/tooltip"
|
|||
|
||||
import { ChangeEvent, memo, useCallback, useMemo, useRef, useState } from "react"
|
||||
import styles from './document.module.css'
|
||||
import MarkdownPreview from '../preview'
|
||||
import Trash from '@geist-ui/icons/trash'
|
||||
import Download from '@geist-ui/icons/download'
|
||||
import ExternalLink from '@geist-ui/icons/externalLink'
|
||||
import FormattingIcons from "./formatting-icons"
|
||||
import Skeleton from "react-loading-skeleton"
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const MarkdownPreview = dynamic(() => import("../preview"))
|
||||
|
||||
// import Link from "next/link"
|
||||
type Props = {
|
||||
editable?: boolean
|
||||
|
|
|
@ -91,6 +91,8 @@ const allowedFileExtensions = [
|
|||
'sql',
|
||||
'xml',
|
||||
'webmanifest',
|
||||
'vue',
|
||||
'vuex',
|
||||
]
|
||||
|
||||
function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {
|
||||
|
|
|
@ -5,7 +5,6 @@ import Page from "@geist-ui/core/dist/page"
|
|||
import Button from "@geist-ui/core/dist/button"
|
||||
import Text from "@geist-ui/core/dist/text"
|
||||
import DocumentComponent from '@components/document'
|
||||
import { downloadZip } from 'client-zip'
|
||||
import styles from './post-page.module.css'
|
||||
|
||||
import type { Post, ThemeProps } from "@lib/types"
|
||||
|
@ -16,7 +15,7 @@ type Props = ThemeProps & {
|
|||
|
||||
const PostPage = ({ post, changeTheme, theme }: Props) => {
|
||||
const download = async () => {
|
||||
|
||||
const downloadZip = (await import("client-zip")).downloadZip
|
||||
const blob = await downloadZip(post.files.map((file: any) => {
|
||||
return {
|
||||
name: file.title,
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import ReactMarkdown from "react-markdown"
|
||||
import remarkGfm from "remark-gfm"
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-async-light';
|
||||
import rehypeSlug from 'rehype-slug'
|
||||
|
@ -11,6 +10,8 @@ import styles from './preview.module.css'
|
|||
import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus'
|
||||
import light from 'react-syntax-highlighter/dist/cjs/styles/prism/vs'
|
||||
import useSharedState from "@lib/hooks/use-shared-state";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
|
||||
type Props = {
|
||||
content: string | undefined
|
||||
|
@ -19,6 +20,7 @@ type Props = {
|
|||
|
||||
const ReactMarkdownPreview = ({ content, height }: Props) => {
|
||||
const [themeType] = useSharedState<string>('theme')
|
||||
|
||||
return (<div style={{ height }}>
|
||||
<ReactMarkdown className={styles.markdownPreview}
|
||||
remarkPlugins={[remarkGfm]}
|
||||
|
|
Loading…
Reference in a new issue