refactor UseCodeMirrorEditor

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

@@ -1 +1 @@
-export * from './use-codemirror-editor';
+export * from './use-codemirror-editor/use-codemirror-editor';

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

@@ -2,23 +2,23 @@ import { useCallback, useMemo } from 'react';
 
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
-import {
-  StateEffect, type Extension, Compartment, Transaction,
-} from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 
-import type { UseCodeMirrorEditorStates } from './interfaces/react-codemirror';
+import type { UseCodeMirrorEditorStates } from '../interfaces/react-codemirror';
+
+import { AppendExtension, useAppendExtension } from './utils/append-extension';
+import { useInitDoc, type InitDoc } from './utils/init-doc';
 
 type UseCodeMirrorEditorUtils = {
-  initDoc: (doc?: string) => void,
-  appendExtension: (extension: Extension, compartment?: Compartment) => CleanupFunction | undefined,
+  initDoc: InitDoc,
+  appendExtension: AppendExtension,
   getDoc: () => string | undefined,
   focus: () => void,
   setCaretLine: (lineNumber?: number) => void,
 }
 export type UseCodeMirrorEditor = UseCodeMirrorEditorStates & UseCodeMirrorEditorUtils;
 
-type CleanupFunction = () => void;
 
 const defaultExtensions: Extension[] = [
   markdown({ base: markdownLanguage, codeLanguages: languages }),
@@ -40,34 +40,8 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
 
   const { view } = codemirror;
 
-  // implement initDoc method
-  const initDoc = useCallback((doc?: string): void => {
-    view?.dispatch({
-      changes: {
-        from: 0,
-        to: view.state.doc.length,
-        insert: doc,
-      },
-      annotations: Transaction.addToHistory.of(false),
-    });
-  }, [view]);
-
-  // implement appendExtension method
-  const appendExtension = useCallback((extension: Extension): CleanupFunction | undefined => {
-    const compartment = new Compartment();
-    view?.dispatch({
-      effects: StateEffect.appendConfig.of(
-        compartment.of(extension),
-      ),
-    });
-
-    // return cleanup function
-    return () => {
-      view?.dispatch({
-        effects: compartment?.reconfigure([]),
-      });
-    };
-  }, [view]);
+  const initDoc = useInitDoc(view);
+  const appendExtension = useAppendExtension(view);
 
   // implement getDoc method
   const getDoc = useCallback((): string | undefined => {

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

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+
+import { Compartment, Extension, StateEffect } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+type CleanupFunction = () => void;
+export type AppendExtension = (extension: Extension) => CleanupFunction | undefined;
+
+export const useAppendExtension = (view?: EditorView): AppendExtension => {
+
+  const { dispatch } = view ?? {};
+
+  return useCallback((extension: Extension): CleanupFunction | undefined => {
+    const compartment = new Compartment();
+    dispatch?.({
+      effects: StateEffect.appendConfig.of(
+        compartment.of(extension),
+      ),
+    });
+
+    // return cleanup function
+    return () => {
+      dispatch?.({
+        effects: compartment.reconfigure([]),
+      });
+    };
+  }, [dispatch]);
+
+};

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

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+import { Transaction } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+export type InitDoc = (doc?: string) => void;
+
+export const useInitDoc = (view?: EditorView): InitDoc => {
+
+  const { dispatch } = view ?? {};
+  const docLength = view?.state.doc.length;
+
+  return useCallback((doc?: string): void => {
+    dispatch?.({
+      changes: {
+        from: 0,
+        to: docLength,
+        insert: doc,
+      },
+      annotations: Transaction.addToHistory.of(false),
+    });
+  }, [docLength, dispatch]);
+
+};