change indentSize in CodeMirrorEditor

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -520,6 +520,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   useEffect(() => {
     // do nothing if the indent size fixed
     if (isIndentSizeForced == null || isIndentSizeForced) {
+      mutateCurrentIndentSize(undefined);
       return;
     }
 

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -1,7 +1,8 @@
 import {
-  forwardRef, useMemo, useRef,
+  forwardRef, useMemo, useRef, useEffect,
 } from 'react';
 
+import { indentUnit } from '@codemirror/language';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
@@ -21,12 +22,14 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   onChange?: (value: string) => void,
+  indentSize?: number,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const {
     editorKey,
     onChange,
+    indentSize,
   } = props;
 
   const containerRef = useRef(null);
@@ -36,7 +39,18 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
       onChange,
     };
   }, [onChange]);
-  useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
+
+  useEffect(() => {
+    if (indentSize == null) {
+      return;
+    }
+    const extension = indentUnit.of(' '.repeat(indentSize));
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
+    return cleanupFunction;
+
+  }, [codeMirrorEditor, indentSize]);
 
   return (
     <div className="flex-expand-vert">

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
-import { indentUnit } from '@codemirror/language';
-import { Compartment, type Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { keymap, scrollPastEnd } from '@codemirror/view';
 
 import { GlobalCodeMirrorEditorKey } from '../consts';
@@ -14,7 +13,6 @@ const additionalExtensions: Extension[] = [
   scrollPastEnd(),
 ];
 
-
 type Props = {
   onChange?: (value: string) => void,
   onSave?: () => void,
@@ -58,29 +56,11 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
     return cleanupFunction;
   }, [codeMirrorEditor, onSave]);
 
-  // Change indentUnit size
-  useEffect(() => {
-    if (indentSize == null) {
-      return;
-    }
-
-    const extension = indentUnit.of(' '.repeat(indentSize));
-
-    const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
-
-    return cleanupFunction;
-    // const compartment = new Compartment();
-    // codeMirrorEditor?.view?.dispatch({
-    //   effects: compartment.reconfigure(indentUnit.of(' '.repeat(indentSize))),
-    // });
-
-
-  }, [codeMirrorEditor, indentSize]);
-
   return (
     <CodeMirrorEditor
       editorKey={GlobalCodeMirrorEditorKey.MAIN}
       onChange={onChange}
+      indentSize={indentSize}
     />
   );
 };