WIP: refactor custom hools

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

@@ -1,11 +0,0 @@
-import type { EditorState } from '@codemirror/state';
-import type { EditorView } from '@codemirror/view';
-
-export type UseCodeMirrorEditorStates = {
-  state: EditorState | undefined;
-  setState: import('react').Dispatch<import('react').SetStateAction<EditorState | undefined>>;
-  view: EditorView | undefined;
-  setView: import('react').Dispatch<import('react').SetStateAction<EditorView | undefined>>;
-  container: HTMLDivElement | undefined;
-  setContainer: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | undefined>>;
-}

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

@@ -2,11 +2,10 @@ import { useMemo } from 'react';
 
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
-import { type Extension } from '@codemirror/state';
+import { EditorState, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 
-import type { UseCodeMirrorEditorStates } from '../interfaces/react-codemirror';
-
 import { AppendExtension, useAppendExtension } from './utils/append-extension';
 import { useFocus, type Focus } from './utils/focus';
 import { useGetDoc, type GetDoc } from './utils/get-doc';
@@ -20,7 +19,10 @@ type UseCodeMirrorEditorUtils = {
   focus: Focus,
   setCaretLine: SetCaretLine,
 }
-export type UseCodeMirrorEditor = UseCodeMirrorEditorStates & UseCodeMirrorEditorUtils;
+export type UseCodeMirrorEditor = {
+  state: EditorState | undefined;
+  view: EditorView | undefined;
+} & UseCodeMirrorEditorUtils;
 
 
 const defaultExtensions: Extension[] = [
@@ -39,9 +41,7 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
     };
   }, [props]);
 
-  const codemirror = useCodeMirror(mergedProps);
-
-  const { view } = codemirror;
+  const { state, view } = useCodeMirror(mergedProps);
 
   const initDoc = useInitDoc(view);
   const appendExtension = useAppendExtension(view);
@@ -50,7 +50,8 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
   const setCaretLine = useSetCaretLine(view);
 
   return {
-    ...codemirror,
+    state,
+    view,
     initDoc,
     appendExtension,
     getDoc,

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 import { type Extension } from '@codemirror/state';
 import { scrollPastEnd } from '@codemirror/view';
@@ -9,11 +9,21 @@ import type { SWRResponse } from 'swr';
 import type { UseCodeMirrorEditor } from '../services';
 import { useCodeMirrorEditor } from '../services';
 
+
+export const isDeepEquals = <T extends object>(obj1: T, obj2: T): boolean => {
+  const typedKeys = Object.keys(obj1) as (keyof typeof obj1)[];
+  return typedKeys.every(key => obj1[key] === obj2[key]);
+};
+
+
 const defaultExtensionsMain: Extension[] = [
   scrollPastEnd(),
 ];
 
 export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null, props?: ReactCodeMirrorProps): SWRResponse<UseCodeMirrorEditor> => {
+  const ref = useRef<UseCodeMirrorEditor>();
+  const prevData = ref.current;
+
   const mergedProps = useMemo<UseCodeMirror>(() => {
     return {
       ...props,
@@ -25,7 +35,17 @@ export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null, props
     };
   }, [container, props]);
 
-  const states = useCodeMirrorEditor(mergedProps);
+  const newData = useCodeMirrorEditor(mergedProps);
+
+  const shouldUpdate = prevData == null || (
+    container != null
+    && newData.state != null && newData.view != null
+    && !isDeepEquals(prevData, newData)
+  );
+
+  if (shouldUpdate) {
+    ref.current = newData;
+  }
 
-  return useSWRStatic('codeMirrorEditorMain', props != null ? states : undefined);
+  return useSWRStatic('codeMirrorEditorMain', shouldUpdate ? newData : undefined);
 };