refactor hooks

packages/editor/src/components/playground/Playground.tsx

@@ -9,9 +9,7 @@ export const Playground = (): JSX.Element => {
 
   const containerRef = useRef(null);
 
-  useCodeMirrorEditorMain({
-    container: containerRef.current,
-  });
+  useCodeMirrorEditorMain(containerRef.current);
 
   return (
     <>

packages/editor/src/components/playground/PlaygroundController.tsx

@@ -1,5 +1,9 @@
 import { useCallback } from 'react';
 
+import { EditorState } from '@codemirror/state';
+import { basicSetup } from '@uiw/react-codemirror';
+
+import { defaultExtensions } from '../../services/codemirror-editor';
 import { useCodeMirrorEditorMain } from '../../stores';
 
 export const PlaygroundController = (): JSX.Element => {
@@ -7,18 +11,20 @@ export const PlaygroundController = (): JSX.Element => {
   const { data: states } = useCodeMirrorEditorMain();
 
   const initEditorValue = useCallback(() => {
-    if (states == null) {
+    if (states?.view == null) {
       return;
     }
 
-    states.view?.dispatch({
-      changes: {
-        from: 0,
-        to: states.view.state.doc.toString().length,
-        insert: '# Header\n\n- foo\n-bar\n',
-      },
+    const newState = EditorState.create({
+      doc: '# Header\n\n- foo\n-bar\n',
+      extensions: [
+        ...basicSetup(),
+        defaultExtensions,
+      ],
     });
 
+    states.view?.setState(newState);
+
   }, [states]);
 
   return (

packages/editor/src/services/codemirror-editor.ts

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
-import { EditorState, Extension } from '@codemirror/state';
-import { EditorView, scrollPastEnd } from '@codemirror/view';
+import type { EditorState, Extension } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
 import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 
 
@@ -18,9 +18,8 @@ export type UseCodeMirrorEditorStates = {
   setContainer: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | undefined>>;
 }
 
-const defaultExtensions: Extension[] = [
+export const defaultExtensions: Extension[] = [
   markdown({ base: markdownLanguage, codeLanguages: languages }),
-  scrollPastEnd(),
 ];
 
 export const useCodeMirrorEditor = (props?: UseCodeMirrorEditor): UseCodeMirrorEditorStates => {

packages/editor/src/stores/codemirror-editor.ts

@@ -1,12 +1,24 @@
+import type { Extension } from '@codemirror/state';
+import { scrollPastEnd } from '@codemirror/view';
 import type { SWRResponse } from 'swr';
 
 
-import type { UseCodeMirrorEditor, UseCodeMirrorEditorStates } from '../services';
+import type { UseCodeMirrorEditorStates } from '../services';
 import { useCodeMirrorEditor } from '../services';
 
 import { useStaticSWR } from './use-static-swr';
 
-export const useCodeMirrorEditorMain = (props?: UseCodeMirrorEditor): SWRResponse<UseCodeMirrorEditorStates> => {
-  const states = useCodeMirrorEditor(props);
-  return useStaticSWR('codeMirrorEditorMain', props != null ? states : undefined);
+export const defaultExtensionsMain: Extension[] = [
+  scrollPastEnd(),
+];
+
+export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null): SWRResponse<UseCodeMirrorEditorStates> => {
+  const states = useCodeMirrorEditor({
+    container,
+    autoFocus: true,
+    extensions: [
+      scrollPastEnd(),
+    ],
+  });
+  return useStaticSWR('codeMirrorEditorMain', container != null ? states : undefined);
 };