refactor UseCodeMirrorEditor

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
@@ -8,14 +8,17 @@ 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';
 import { useInitDoc, type InitDoc } from './utils/init-doc';
+import { useSetCaretLine, type SetCaretLine } from './utils/set-caret-line';
 
 type UseCodeMirrorEditorUtils = {
   initDoc: InitDoc,
   appendExtension: AppendExtension,
-  getDoc: () => string | undefined,
-  focus: () => void,
-  setCaretLine: (lineNumber?: number) => void,
+  getDoc: GetDoc,
+  focus: Focus,
+  setCaretLine: SetCaretLine,
 }
 export type UseCodeMirrorEditor = UseCodeMirrorEditorStates & UseCodeMirrorEditorUtils;
 
@@ -42,33 +45,9 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
 
   const initDoc = useInitDoc(view);
   const appendExtension = useAppendExtension(view);
-
-  // implement getDoc method
-  const getDoc = useCallback((): string | undefined => {
-    return view?.state.doc.toString();
-  }, [view]);
-
-  // implement focus method
-  const focus = useCallback((): void => {
-    view?.focus();
-  }, [view]);
-
-  // implement setCaretLine method
-  const setCaretLine = useCallback((lineNumber?: number): void => {
-    if (view == null) {
-      return;
-    }
-
-    const posOfLineEnd = view.state.doc.line(lineNumber ?? 1).to;
-    view.dispatch({
-      selection: {
-        anchor: posOfLineEnd,
-        head: posOfLineEnd,
-      },
-    });
-    // focus
-    view.focus();
-  }, [view]);
+  const getDoc = useGetDoc(view);
+  const focus = useFocus(view);
+  const setCaretLine = useSetCaretLine(view);
 
   return {
     ...codemirror,

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/append-extension.ts

@@ -10,7 +10,7 @@ export const useAppendExtension = (view?: EditorView): AppendExtension => {
 
   const { dispatch } = view ?? {};
 
-  return useCallback((extension: Extension): CleanupFunction | undefined => {
+  return useCallback((extension) => {
     const compartment = new Compartment();
     dispatch?.({
       effects: StateEffect.appendConfig.of(

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

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+export type Focus = () => void;
+
+export const useFocus = (view?: EditorView): Focus => {
+
+  return useCallback(() => {
+    view?.focus?.();
+    // compromise to put the view into deps
+    //   in order to ignore "TypeError: this is undefined" caused by invoking focus()
+  }, [view]);
+
+};

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/get-doc.ts

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+export type GetDoc = () => string;
+
+export const useGetDoc = (view?: EditorView): GetDoc => {
+
+  const doc = view?.state.doc ?? '';
+
+  return useCallback(() => {
+    return doc.toString();
+  }, [doc]);
+
+};

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/init-doc.ts

@@ -10,7 +10,7 @@ export const useInitDoc = (view?: EditorView): InitDoc => {
   const { dispatch } = view ?? {};
   const docLength = view?.state.doc.length;
 
-  return useCallback((doc?: string): void => {
+  return useCallback((doc) => {
     dispatch?.({
       changes: {
         from: 0,

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/set-caret-line.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+export type SetCaretLine = (lineNumber?: number) => void;
+
+export const useSetCaretLine = (view?: EditorView): SetCaretLine => {
+
+  const dispatch = view?.dispatch;
+  const doc = view?.state.doc;
+
+  return useCallback((lineNumber) => {
+    if (dispatch == null || doc == null) {
+      return;
+    }
+
+    const posOfLineEnd = doc.line(lineNumber ?? 1).to;
+    dispatch({
+      selection: {
+        anchor: posOfLineEnd,
+        head: posOfLineEnd,
+      },
+    });
+    // focus
+    view?.focus();
+
+    // compromise to put the view into deps
+    //   in order to ignore "TypeError: this is undefined" caused by invoking focus()
+  }, [dispatch, doc, view]);
+
+};