change indentUnit extension position

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

@@ -5,8 +5,6 @@ import React, {
 import EventEmitter from 'events';
 import nodePath from 'path';
 
-import { indentUnit } from '@codemirror/language';
-import { keymap } from '@codemirror/view';
 import type { IPageHasId } from '@growi/core';
 import { pathUtils } from '@growi/core/dist/utils';
 import { CodeMirrorEditorMain, GlobalCodeMirrorEditorKey, useCodeMirrorEditorIsolated } from '@growi/editor';
@@ -21,6 +19,7 @@ import { toastError, toastSuccess } from '~/client/util/toastr';
 import { OptionsToSave } from '~/interfaces/page-operation';
 import { SocketEventName } from '~/interfaces/websocket';
 import {
+  useDefaultIndentSize,
   useCurrentPathname, useIsEnabledAttachTitleHeader,
   useIsEditable, useIsUploadableFile, useIsUploadableImage, useIsIndentSizeForced,
 } from '~/stores/context';
@@ -105,6 +104,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { data: isSlackEnabled } = useIsSlackEnabled();
   const { data: isIndentSizeForced } = useIsIndentSizeForced();
   const { data: currentIndentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
+  const { data: defaultIndentSize } = useDefaultIndentSize();
   const { data: isUploadableFile } = useIsUploadableFile();
   const { data: isUploadableImage } = useIsUploadableImage();
   const { data: conflictDiffModalStatus, close: closeConflictDiffModal } = useConflictDiffModal();
@@ -532,17 +532,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     }
   }, [initialValue, isIndentSizeForced, mutateCurrentIndentSize]);
 
-  // Change indentUnit size
-  useEffect(() => {
-    const extension = indentUnit.of(' '.repeat(currentIndentSize ?? 4));
-
-    const cleanupFunction = codeMirrorEditor?.appendExtension(extension);
-
-    return cleanupFunction;
-
-  }, [codeMirrorEditor, currentIndentSize]);
-
-
   // when transitioning to a different page, if the initialValue is the same,
   // UnControlled CodeMirror value does not reset, so explicitly set the value to initialValue
   const onRouterChangeComplete = useCallback(() => {
@@ -585,6 +574,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
         <CodeMirrorEditorMain
           onChange={markdownChangedHandler}
           onSave={saveWithShortcut}
+          indentSize={currentIndentSize ?? defaultIndentSize}
         />
       </div>
       <div className="page-editor-preview-container flex-expand-vert d-none d-lg-flex">

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 
+import { indentUnit, getIndentUnit } from '@codemirror/language';
 import type { Extension } from '@codemirror/state';
 import { keymap, scrollPastEnd } from '@codemirror/view';
 
@@ -17,11 +18,12 @@ const additionalExtensions: Extension[] = [
 type Props = {
   onChange?: (value: string) => void,
   onSave?: () => void,
+  indentSize?: number,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    onSave, onChange,
+    onSave, onChange, indentSize,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -56,6 +58,18 @@ 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;
+  }, [codeMirrorEditor, indentSize]);
+
   return (
     <CodeMirrorEditor
       editorKey={GlobalCodeMirrorEditorKey.MAIN}