client: use next/dynamic for react markdown rendering

client/components/document/index.tsx

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

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

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

client/components/post-page/index.tsx

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

client/components/preview/react-markdown-preview.tsx

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