fix tab size on codemirror

cpinitiative · Dec 19, 2023 · 9429cc6 · 9429cc6
1 parent 5ac3267
commit 9429cc6
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/components/editor/CodemirrorEditor/CodemirrorEditor.tsx b/src/components/editor/CodemirrorEditor/CodemirrorEditor.tsx
@@ -1,6 +1,7 @@
 // A codemirror editor, used on mobile devices
 
 import ReactCodeMirror, { Extension } from '@uiw/react-codemirror';
+import { indentUnit } from '@codemirror/language';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import { cpp } from '@codemirror/lang-cpp';
@@ -44,6 +45,8 @@ export const CodemirrorEditor = (props: EditorProps): JSX.Element => {
 
   const extensions = useMemo(() => {
     let extensions = [];
+    const tabSize = props.options?.tabSize || 4;
+    extensions.push(indentUnit.of(' '.repeat(tabSize)));
     if (yCollabExtension) {
       extensions.push(yCollabExtension);
     }
@@ -59,8 +62,9 @@ export const CodemirrorEditor = (props: EditorProps): JSX.Element => {
       }
     }
     return extensions;
-  }, [props.language, yCollabExtension]);
+  }, [props.language, yCollabExtension, props.options?.tabSize]);
 
+  // todo: need to deal with props.options.tabSize
   return (
     <ReactCodeMirror
       // force entire component to re-mount (and re-initialize codemirror) when yjs document ID changes