CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: use next/dynamic for react markdown rendering

Browse source
This commit is contained in:
Max Leiter 2022-03-21 20:43:50 -07:00
parent 97f354a271
commit d83cdf3eeb
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
4 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/components/document/index.tsx
View file

@ -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

2
client/components/new-post/drag-and-drop/index.tsx
View file

@ -91,6 +91,8 @@ const allowedFileExtensions = [
'sql',
'xml',
'webmanifest',
'vue',
'vuex',
]
function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {

3
client/components/post-page/index.tsx
View file

@ -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,

4
client/components/preview/react-markdown-preview.tsx
View file

@ -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]}