implement initDoc method

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

@@ -1,31 +1,16 @@
 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 => {
 
-  const { data: states } = useCodeMirrorEditorMain();
+  const { initDoc } = useCodeMirrorEditorMain();
 
   const initEditorValue = useCallback(() => {
-    if (states?.view == null) {
-      return;
-    }
-
-    const newState = EditorState.create({
-      doc: '# Header\n\n- foo\n-bar\n',
-      extensions: [
-        ...basicSetup(),
-        defaultExtensions,
-      ],
-    });
 
-    states.view?.setState(newState);
+    initDoc('# Header\n\n- foo\n-bar\n');
 
-  }, [states]);
+  }, [initDoc]);
 
   return (
     <>

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

@@ -4,7 +4,7 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 import type { EditorState, Extension } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
-import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
+import { basicSetup, useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 
 
 export type UseCodeMirrorEditor = UseCodeMirror;
@@ -22,6 +22,11 @@ export const defaultExtensions: Extension[] = [
   markdown({ base: markdownLanguage, codeLanguages: languages }),
 ];
 
+export const defaultExtensionsToInit: Extension[] = [
+  ...basicSetup(),
+  ...defaultExtensions,
+];
+
 export const useCodeMirrorEditor = (props?: UseCodeMirrorEditor): UseCodeMirrorEditorStates => {
 
   const codemirror = useCodeMirror({

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

@@ -1,24 +1,56 @@
-import type { Extension } from '@codemirror/state';
-import { scrollPastEnd } from '@codemirror/view';
-import type { SWRResponse } from 'swr';
+import { useMemo } from 'react';
 
+import { EditorState, type Extension } from '@codemirror/state';
+import { scrollPastEnd } from '@codemirror/view';
+import {
+  type SWRResponseWithUtils, withUtils,
+} from '@growi/core/dist/swr';
 
-import type { UseCodeMirrorEditorStates } from '../services';
-import { useCodeMirrorEditor } from '../services';
+import type { UseCodeMirrorEditor, UseCodeMirrorEditorStates } from '../services';
+import { defaultExtensionsToInit, useCodeMirrorEditor } from '../services';
 
 import { useStaticSWR } from './use-static-swr';
 
-export const defaultExtensionsMain: Extension[] = [
+const defaultExtensionsMain: Extension[] = [
   scrollPastEnd(),
 ];
 
-export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null): SWRResponse<UseCodeMirrorEditorStates> => {
-  const states = useCodeMirrorEditor({
-    container,
-    autoFocus: true,
-    extensions: [
-      scrollPastEnd(),
-    ],
+const defaultExtensionsToInitMain: Extension[] = [
+  ...defaultExtensionsToInit,
+  ...defaultExtensionsMain,
+];
+
+type OperationUtils = {
+  initDoc: (doc?: string) => void,
+}
+
+export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null): SWRResponseWithUtils<OperationUtils, UseCodeMirrorEditorStates> => {
+  const props = useMemo<UseCodeMirrorEditor>(() => {
+    return {
+      container,
+      autoFocus: true,
+      extensions: defaultExtensionsMain,
+    };
+  }, [container]);
+
+  const states = useCodeMirrorEditor(props);
+
+  const swrResponse = useStaticSWR('codeMirrorEditorMain', container != null ? states : undefined);
+
+  return withUtils(swrResponse, {
+    initDoc: (doc) => {
+      const currentView = swrResponse.data?.view;
+      if (currentView == null) {
+        return;
+      }
+
+      // create a new state
+      const newState = EditorState.create({
+        doc,
+        extensions: defaultExtensionsToInitMain,
+      });
+
+      currentView.setState(newState);
+    },
   });
-  return useStaticSWR('codeMirrorEditorMain', container != null ? states : undefined);
 };