refactor custom hook

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

@@ -1,6 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
+import {
+  useEffect, useMemo, useRef, useState,
+} from 'react';
 
 import { EditorView } from '@codemirror/view';
+import { ReactCodeMirrorProps, UseCodeMirror } from '@uiw/react-codemirror';
 
 import { CodeMirrorEditorContainer } from '..';
 import { useCodeMirrorEditorMain } from '../../stores';
@@ -14,21 +17,12 @@ export const Playground = (): JSX.Element => {
 
   const containerRef = useRef(null);
 
-  const { data: codeMirrorEditor } = useCodeMirrorEditorMain(containerRef.current);
-
-  // set handler to save with shortcut key
-  useEffect(() => {
-    const extension = EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        const doc = update.view.state.doc.toString();
-        setMarkdownToPreview(doc);
-      }
-    });
-
-    const cleanupFunction = codeMirrorEditor?.appendExtension?.(extension);
-
-    return cleanupFunction;
-  }, [codeMirrorEditor]);
+  const props = useMemo<ReactCodeMirrorProps>(() => {
+    return {
+      onChange: setMarkdownToPreview,
+    };
+  }, []);
+  const { data: codeMirrorEditor } = useCodeMirrorEditorMain(containerRef.current, props);
 
   return (
     <>

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

@@ -2,10 +2,9 @@ import { useMemo } from 'react';
 
 import { type Extension } from '@codemirror/state';
 import { scrollPastEnd } from '@codemirror/view';
-import {
-  type SWRResponseWithUtils, withUtils, useSWRStatic,
-} from '@growi/core/dist/swr';
-import type { UseCodeMirror } from '@uiw/react-codemirror';
+import { useSWRStatic } from '@growi/core/dist/swr';
+import type { ReactCodeMirrorProps, UseCodeMirror } from '@uiw/react-codemirror';
+import type { SWRResponse } from 'swr';
 
 import type { UseCodeMirrorEditor } from '../services';
 import { useCodeMirrorEditor } from '../services';
@@ -14,24 +13,19 @@ const defaultExtensionsMain: Extension[] = [
   scrollPastEnd(),
 ];
 
-type MainEditorUtils = {
-  // impl something
-};
-
-export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null): SWRResponseWithUtils<MainEditorUtils, UseCodeMirrorEditor> => {
-  const props = useMemo<UseCodeMirror>(() => {
+export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null, props?: ReactCodeMirrorProps): SWRResponse<UseCodeMirrorEditor> => {
+  const mergedProps = useMemo<UseCodeMirror>(() => {
     return {
+      ...props,
       container,
-      autoFocus: true,
-      extensions: defaultExtensionsMain,
+      extensions: [
+        ...(props?.extensions ?? []),
+        ...defaultExtensionsMain,
+      ],
     };
-  }, [container]);
-
-  const states = useCodeMirrorEditor(props);
+  }, [container, props]);
 
-  const swrResponse = useSWRStatic('codeMirrorEditorMain', container != null ? states : undefined);
+  const states = useCodeMirrorEditor(mergedProps);
 
-  return withUtils(swrResponse, {
-    // impl something
-  });
+  return useSWRStatic('codeMirrorEditorMain', props != null ? states : undefined);
 };