feat: work on previewing post

src/components/Editor.tsx

@@ -1,23 +1,53 @@
 'use client';
 
 import { useCodeMirror } from '@/hooks';
+import { darkTheme } from '@/lib/codemirror';
+import { indentWithTab } from '@codemirror/commands';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
-import { EditorState } from '@codemirror/state';
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
 import { basicSetup } from 'codemirror';
-import { useState } from 'react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
 
 export default function Editor() {
+  const { theme } = useTheme();
+  const editorTheme = new Compartment();
+  const [currentDoc, setCurrentDoc] = useState('');
+
   const doc = [''];
   const extensions = [
     basicSetup,
     markdown({ base: markdownLanguage, codeLanguages: languages }),
     EditorState.tabSize.of(2),
+    editorTheme.of([]),
+    keymap.of([indentWithTab]),
+    EditorView.updateListener.of(vu => {
+      setCurrentDoc(vu.state.doc.toString());
+    }),
   ];
 
   const [mode, setMode] = useState<'write' | 'preview'>('write');
   const { editorRef, editorView } = useCodeMirror({ doc, extensions });
 
+  useEffect(() => {
+    if (editorView === null) {
+      return;
+    }
+
+    if (theme === 'dark') {
+      editorView.dispatch({
+        effects: editorTheme.reconfigure([darkTheme]),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [theme, editorView]);
+
   return (
     <form className='flex flex-col shadow-md rounded-md dark:bg-secondary-gray border border-gray-600'>
       <div className='flex items-center justify-between rounded-t-md p-4 pb-0 border-b border-gray-600 dark:bg-primary-gray'>
@@ -42,7 +72,38 @@ export default function Editor() {
         <div></div>
       </div>
       <div className='p-4'>
-        <div ref={editorRef}></div>
+        <div
+          className={`${mode === 'write' ? '' : 'hidden'}`}
+          ref={editorRef}
+        ></div>
+        <ReactMarkdown
+          className={`${mode === 'preview' ? '' : 'hidden'}`}
+          remarkPlugins={[remarkGfm]}
+          components={{
+            code({ node, inline, className, children, ...props }) {
+              const match = /language-(\w+)/.exec(className || '');
+              return !inline && match ? (
+                <SyntaxHighlighter
+                  {...props}
+                  style={oneDark}
+                  language={match[1]}
+                  PreTag='div'
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              ) : (
+                <code
+                  {...props}
+                  className={className}
+                >
+                  {children}
+                </code>
+              );
+            },
+          }}
+        >
+          {currentDoc}
+        </ReactMarkdown>
       </div>
       <div className='flex items-center justify-end'>
         <button type='submit'>Post</button>