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