give more control over tabulator usage, force spaces in python and yaml

CHANGELOG.md

@@ -6,10 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
-### Changed
+### Added
 
 -   `<CodeEditor />`
     -   visualize the usage of tabulator chars by background color and arrow symbol
+    -   new `tabIntentSize`, `tabIntentStyle`, `tabForceSpaceForModes` properties to give better control over tabulator usage
 
 ### Fixed
 

src/extensions/codemirror/CodeMirror.tsx

@@ -66,6 +66,22 @@ export interface CodeEditorProps {
     wrapLines?: boolean;
 
     outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
+
+    /**
+     * Size in spaces that is used for a tabulator key.
+     */
+    tabIntentSize?: number;
+
+    /**
+     * Set the char type that is used for the tabulator key.
+     * If set to `space` the a number of `tabIntentSize` spaces is used instead of a tab.
+     */
+    tabIntentStyle?: "tab" | "space";
+
+    /**
+     * For some modes an indent style with `space` can be forced, even if `tabIntentStyle="tab"` is set.
+     */
+    tabForceSpaceForModes?: SupportedCodeEditorModes[];
 }
 
 /**
@@ -82,6 +98,9 @@ export const CodeEditor = ({
     height,
     wrapLines = false,
     outerDivAttributes,
+    tabIntentSize = 2,
+    tabIntentStyle = "tab",
+    tabForceSpaceForModes = ["python", "yaml"],
 }: CodeEditorProps) => {
     const domRef = useRef<HTMLTextAreaElement>(null);
 
@@ -90,9 +109,16 @@ export const CodeEditor = ({
             mode: convertMode(mode),
             lineWrapping: wrapLines,
             lineNumbers: !preventLineNumbers,
-            tabSize: 2,
+            tabSize: tabIntentSize,
+            indentUnit: tabIntentSize,
+            indentWithTabs: tabIntentStyle === "tab" && !(tabForceSpaceForModes ?? []).includes(mode),
             theme: "xq-light",
             readOnly: readOnly,
+            extraKeys: {
+                Tab: function (cm) {
+                    cm.execCommand(cm.getOption("indentWithTabs") ? "insertTab" : "insertSoftTab");
+                },
+            },
         });
 
         editorInstance.on("change", (api) => {