refactor useEditorSettings

packages/editor/src/client/stores/use-editor-settings.ts

@@ -15,90 +15,96 @@ import {
   getEditorTheme, getKeymap, insertNewlineContinueMarkup, insertNewRowToMarkdownTable, isInTable,
 } from '../services-internal';
 
-
-export const useEditorSettings = (
+const useStyleActiveLine = (
     codeMirrorEditor?: UseCodeMirrorEditor,
-    editorSettings?: EditorSettings,
-    onSave?: () => void,
+    styleActiveLine?: boolean,
 ): void => {
-
   useEffect(() => {
-    if (editorSettings?.styleActiveLine == null) {
+    if (styleActiveLine == null) {
       return;
     }
-    const extensions = (editorSettings?.styleActiveLine) ? [[highlightActiveLine(), highlightActiveLineGutter()]] : [[]];
-
+    const extensions = styleActiveLine ? [[highlightActiveLine(), highlightActiveLineGutter()]] : [[]];
     const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extensions);
     return cleanupFunction;
+  }, [codeMirrorEditor, styleActiveLine]);
+};
 
-  }, [codeMirrorEditor, editorSettings?.styleActiveLine]);
-
+const useEnterKeyHandler = (
+    codeMirrorEditor?: UseCodeMirrorEditor,
+    autoFormatMarkdownTable?: boolean,
+): void => {
   const onPressEnter: Command = useCallback((editor) => {
-    if (isInTable(editor) && editorSettings?.autoFormatMarkdownTable) {
+    if (isInTable(editor) && autoFormatMarkdownTable) {
       insertNewRowToMarkdownTable(editor);
       return true;
     }
     insertNewlineContinueMarkup(editor);
     return true;
-  }, [editorSettings?.autoFormatMarkdownTable]);
-
+  }, [autoFormatMarkdownTable]);
 
   useEffect(() => {
-
     const extension = keymap.of([
       { key: 'Enter', run: onPressEnter },
     ]);
-
     const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
     return cleanupFunction;
-
   }, [codeMirrorEditor, onPressEnter]);
+};
 
+const useThemeExtension = (
+    codeMirrorEditor?: UseCodeMirrorEditor,
+    theme?: EditorTheme,
+): void => {
   const [themeExtension, setThemeExtension] = useState<Extension | undefined>(undefined);
+
   useEffect(() => {
     const settingTheme = async(name?: EditorTheme) => {
       setThemeExtension(await getEditorTheme(name));
     };
-    settingTheme(editorSettings?.theme);
-  }, [codeMirrorEditor, editorSettings?.theme, setThemeExtension]);
+    settingTheme(theme);
+  }, [theme]);
 
   useEffect(() => {
     if (themeExtension == null) {
       return;
     }
-    // React CodeMirror has default theme which is default prec
-    // and extension have to be higher prec here than default theme.
     const cleanupFunction = codeMirrorEditor?.appendExtensions(Prec.high(themeExtension));
     return cleanupFunction;
   }, [codeMirrorEditor, themeExtension]);
+};
 
-
+const useKeymapExtension = (
+    codeMirrorEditor?: UseCodeMirrorEditor,
+    keymapMode?: KeyMapMode,
+    onSave?: () => void,
+): void => {
   const [keymapExtension, setKeymapExtension] = useState<Extension | undefined>(undefined);
+
   useEffect(() => {
     const settingKeyMap = async(name?: KeyMapMode) => {
       setKeymapExtension(await getKeymap(name, onSave));
     };
-    settingKeyMap(editorSettings?.keymapMode);
-
-  }, [codeMirrorEditor, editorSettings?.keymapMode, setKeymapExtension, onSave]);
+    settingKeyMap(keymapMode);
+  }, [keymapMode, onSave]);
 
   useEffect(() => {
     if (keymapExtension == null) {
       return;
     }
-
-    // Prevent these Keybind from overwriting the originally defined keymap.
     const cleanupFunction = codeMirrorEditor?.appendExtensions(Prec.low(keymapExtension));
     return cleanupFunction;
-
   }, [codeMirrorEditor, keymapExtension]);
+};
 
-
+const useUnifiedMergeView = (
+    codeMirrorEditor?: UseCodeMirrorEditor,
+    unifiedMergeViewEnabled?: boolean,
+): void => {
   useEffect(() => {
-    if (editorSettings?.unifiedMergeView == null) {
+    if (unifiedMergeViewEnabled == null) {
       return;
     }
-    const extension = editorSettings.unifiedMergeView ? [
+    const extension = unifiedMergeViewEnabled ? [
       unifiedMergeView({
         original: codeMirrorEditor?.getDoc() ?? '',
       }),
@@ -106,6 +112,17 @@ export const useEditorSettings = (
 
     const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
     return cleanupFunction;
-  }, [codeMirrorEditor, editorSettings?.unifiedMergeView]);
+  }, [codeMirrorEditor, unifiedMergeViewEnabled]);
+};
 
+export const useEditorSettings = (
+    codeMirrorEditor?: UseCodeMirrorEditor,
+    editorSettings?: EditorSettings,
+    onSave?: () => void,
+): void => {
+  useStyleActiveLine(codeMirrorEditor, editorSettings?.styleActiveLine);
+  useEnterKeyHandler(codeMirrorEditor, editorSettings?.autoFormatMarkdownTable);
+  useThemeExtension(codeMirrorEditor, editorSettings?.theme);
+  useKeymapExtension(codeMirrorEditor, editorSettings?.keymapMode, onSave);
+  useUnifiedMergeView(codeMirrorEditor, editorSettings?.unifiedMergeView);
 };