feat: more work on building editor

src/components/Editor.tsx

@@ -1,9 +1,22 @@
 'use client';
 
+import { useCodeMirror } from '@/hooks';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { languages } from '@codemirror/language-data';
+import { EditorState } from '@codemirror/state';
+import { basicSetup } from 'codemirror';
 import { useState } from 'react';
 
 export default function Editor() {
+  const doc = [''];
+  const extensions = [
+    basicSetup,
+    markdown({ base: markdownLanguage, codeLanguages: languages }),
+    EditorState.tabSize.of(2),
+  ];
+
   const [mode, setMode] = useState<'write' | 'preview'>('write');
+  const { editorRef, editorView } = useCodeMirror({ doc, extensions });
 
   return (
     <form className='flex flex-col shadow-md rounded-md dark:bg-secondary-gray border border-gray-600'>
@@ -28,7 +41,9 @@ export default function Editor() {
         </div>
         <div></div>
       </div>
-      <div></div>
+      <div className='p-4'>
+        <div ref={editorRef}></div>
+      </div>
       <div className='flex items-center justify-end'>
         <button type='submit'>Post</button>
       </div>

src/hooks/index.ts

@@ -0,0 +1,36 @@
+import { EditorState, Extension, Text } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { useEffect, useRef, useState } from 'react';
+
+export function useCodeMirror({
+  doc,
+  extensions,
+}: {
+  doc: string[];
+  extensions: Extension;
+}) {
+  const editorRef = useRef(null);
+  const [editorView, setEditorView] = useState<EditorView | null>(null);
+
+  useEffect(() => {
+    if (editorRef.current === null) {
+      return;
+    }
+
+    const state = EditorState.create({
+      doc: Text.of(doc),
+      extensions: extensions,
+    });
+
+    const view = new EditorView({
+      state: state,
+      parent: editorRef.current,
+    });
+
+    setEditorView(view);
+    return () => view.destroy();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorRef]);
+
+  return { editorRef, editorView };
+}