feat(settings): add editor settings for indentation

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/locales/en.json

@@ -609,9 +609,19 @@
         "label": "Line Wrapping",
         "help": "Breaks long lines so they're visible without scrolling."
       },
-      "spellCheck":{
+      "spellCheck": {
         "label": "Spell checking",
         "help": "Enables browser spell checking."
+      },
+      "indentWithTabs": {
+        "label": "Indentation character",
+        "help": "Sets which characters should be used for indentation",
+        "tabs": "Tabs",
+        "spaces": "Spaces"
+      },
+      "indentSpaces": {
+        "label": "Indentation size",
+        "help": "Sets the amount of spaces for indentation."
       }
     },
     "global": {

frontend/src/components/editor-page/editor-pane/editor-pane.tsx

@@ -45,6 +45,7 @@ import ReactCodeMirror from '@uiw/react-codemirror'
 import React, { useCallback, useEffect, useMemo } from 'react'
 import { useUiNotifications } from '../../notifications/ui-notification-boundary'
 import { Lock as IconLock } from 'react-bootstrap-icons'
+import { useCodeMirrorIndentationExtension } from './hooks/codemirror-extensions/use-code-mirror-indentation-extension'
 
 export type EditorPaneProps = ScrollProps
 
@@ -71,6 +72,7 @@ export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, o
   const fileInsertExtension = useCodeMirrorFileInsertExtension()
   const spellCheckExtension = useCodeMirrorSpellCheckExtension()
   const lineWrappingExtension = useCodeMirrorLineWrappingExtension()
+  const indentationExtension = useCodeMirrorIndentationExtension()
   const cursorActivityExtension = useCursorActivityCallback()
   const autoCompletionExtension = useCodeMirrorAutocompletionsExtension()
 
@@ -107,7 +109,8 @@ export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, o
       cursorActivityExtension,
       updateViewContextExtension,
       yjsExtension,
-      spellCheckExtension
+      spellCheckExtension,
+      indentationExtension
     ],
     [
       linterExtension,
@@ -120,7 +123,8 @@ export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, o
       updateViewContextExtension,
       yjsExtension,
       spellCheckExtension,
-      lineWrappingExtension
+      lineWrappingExtension,
+      indentationExtension
     ]
   )
 

frontend/src/components/editor-page/editor-pane/hooks/codemirror-extensions/use-code-mirror-indentation-extension.ts

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../../hooks/common/use-application-state'
+import type { Extension } from '@codemirror/state'
+import { useMemo } from 'react'
+import { indentUnit } from '@codemirror/language'
+
+/**
+ * Creates a {@link Extension codemirror extension} that manages the indentation config.
+ */
+export const useCodeMirrorIndentationExtension = (): Extension => {
+  const indentWithTabs = useApplicationState((state) => state.editorConfig.indentWithTabs)
+  const indentSpaces = useApplicationState((state) => state.editorConfig.indentSpaces)
+
+  return useMemo(() => indentUnit.of(indentWithTabs ? '\t' : ' '.repeat(indentSpaces)), [indentWithTabs, indentSpaces])
+}

frontend/src/components/global-dialogs/settings-dialog/editor/__snapshots__/editor-settings-tab-content.spec.tsx.snap

@@ -0,0 +1,587 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditorSettingsTabContent hides space settings indentWithTabs is true 1`] = `
+<div>
+  <div
+    class="list-group"
+  >
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.ligatures.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-ligatures"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-ligatures"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.ligatures.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.smartPaste.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-smart-paste"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-smart-paste"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.smartPaste.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.syncScroll.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-sync-scroll"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-sync-scroll"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.syncScroll.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.lineWrapping.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-line-wrapping"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-line-wrapping"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.lineWrapping.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.spellCheck.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-spell-check"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-spell-check"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.spellCheck.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.indentWithTabs.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-indent-with-tabs"
+              title="settings.editor.indentWithTabs.tabs"
+              type="radio"
+            >
+              settings.editor.indentWithTabs.tabs
+            </button>
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-indent-with-tabs"
+              title="settings.editor.indentWithTabs.spaces"
+              type="radio"
+            >
+              settings.editor.indentWithTabs.spaces
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.indentWithTabs.help
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditorSettingsTabContent renders space settings when indentWithTabs is false 1`] = `
+<div>
+  <div
+    class="list-group"
+  >
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.ligatures.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-ligatures"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-ligatures"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.ligatures.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.smartPaste.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-smart-paste"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-smart-paste"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.smartPaste.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.syncScroll.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-sync-scroll"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-sync-scroll"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.syncScroll.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.lineWrapping.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-line-wrapping"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-line-wrapping"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.lineWrapping.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.spellCheck.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-spell-check"
+              title="common.on"
+              type="radio"
+            >
+              common.on
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-spell-check"
+              title="common.off"
+              type="radio"
+            >
+              common.off
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.spellCheck.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.indentWithTabs.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <div
+            class="btn-group"
+            role="group"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              data-testid="onOffButtonGroupOn"
+              name="settings-indent-with-tabs"
+              title="settings.editor.indentWithTabs.tabs"
+              type="radio"
+            >
+              settings.editor.indentWithTabs.tabs
+            </button>
+            <button
+              class="btn btn-secondary"
+              data-testid="onOffButtonGroupOff"
+              name="settings-indent-with-tabs"
+              title="settings.editor.indentWithTabs.spaces"
+              type="radio"
+            >
+              settings.editor.indentWithTabs.spaces
+            </button>
+          </div>
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.indentWithTabs.help
+        </div>
+      </div>
+    </div>
+    <div
+      class="list-group-item"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-3"
+        >
+          settings.editor.indentSpaces.label
+        </div>
+        <div
+          class="col-md-4"
+        >
+          <input
+            class="w-auto form-control"
+            min="1"
+            type="number"
+            value="7"
+          />
+        </div>
+        <div
+          class="col-md-5"
+        >
+          settings.editor.indentSpaces.help
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

frontend/src/components/global-dialogs/settings-dialog/editor/editor-settings-tab-content.spec.tsx

@@ -0,0 +1,55 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { mockAppState } from '../../../../test-utils/mock-app-state'
+import { render } from '@testing-library/react'
+import { EditorSettingsTabContent } from './editor-settings-tab-content'
+import { mockI18n } from '../../../../test-utils/mock-i18n'
+
+jest.mock('../../../../hooks/common/use-application-state')
+
+describe('EditorSettingsTabContent', () => {
+  beforeEach(async () => {
+    await mockI18n()
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+    jest.resetModules()
+  })
+
+  it('renders space settings when indentWithTabs is false', () => {
+    mockAppState({
+      editorConfig: {
+        syncScroll: false,
+        spellCheck: false,
+        smartPaste: false,
+        lineWrapping: false,
+        ligatures: false,
+        indentWithTabs: false,
+        indentSpaces: 7
+      }
+    })
+    const view = render(<EditorSettingsTabContent />)
+    expect(view.container).toMatchSnapshot()
+  })
+
+  it('hides space settings indentWithTabs is true', () => {
+    mockAppState({
+      editorConfig: {
+        syncScroll: false,
+        spellCheck: false,
+        smartPaste: false,
+        lineWrapping: false,
+        ligatures: false,
+        indentWithTabs: true,
+        indentSpaces: 7
+      }
+    })
+    const view = render(<EditorSettingsTabContent />)
+    expect(view.container).toMatchSnapshot()
+  })
+})

frontend/src/components/global-dialogs/settings-dialog/editor/editor-settings-tab-content.tsx

@@ -12,12 +12,16 @@ import React from 'react'
 import { ListGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { SpellcheckSettingButtonGroup } from './spellcheck-setting-button-group'
+import { IndentWithTabsSettingButtonGroup } from './indent-with-tabs-setting-button-group'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { IndentSpacesSettingInput } from './indent-spaces-setting-input'
 
 /**
  * Shows the editor specific settings.
  */
 export const EditorSettingsTabContent: React.FC = () => {
   useTranslation()
+  const useTabs = useApplicationState((state) => state.editorConfig.indentWithTabs)
 
   return (
     <ListGroup>
@@ -36,6 +40,14 @@ export const EditorSettingsTabContent: React.FC = () => {
       <SettingLine i18nKey={'editor.spellCheck'}>
         <SpellcheckSettingButtonGroup />
       </SettingLine>
+      <SettingLine i18nKey={'editor.indentWithTabs'}>
+        <IndentWithTabsSettingButtonGroup />
+      </SettingLine>
+      {!useTabs && (
+        <SettingLine i18nKey={'editor.indentSpaces'}>
+          <IndentSpacesSettingInput />
+        </SettingLine>
+      )}
     </ListGroup>
   )
 }

frontend/src/components/global-dialogs/settings-dialog/editor/indent-spaces-setting-input.tsx

@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react'
+import { Form } from 'react-bootstrap'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { setEditorIndentSpaces } from '../../../../redux/editor/methods'
+import { useCallback } from 'react'
+
+/**
+ * Input to change the number of spaces that are used for indentation in the editor.
+ */
+export const IndentSpacesSettingInput: React.FC = () => {
+  const spaces = useApplicationState((state) => state.editorConfig.indentSpaces)
+
+  const onChangeHandler = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value)
+    if (value > 0) {
+      setEditorIndentSpaces(value)
+    }
+  }, [])
+
+  return <Form.Control className={'w-auto'} type={'number'} min={1} value={spaces} onChange={onChangeHandler} />
+}

frontend/src/components/global-dialogs/settings-dialog/editor/indent-with-tabs-setting-button-group.tsx

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { setEditorIndentWithTabs } from '../../../../redux/editor/methods'
+import { OnOffButtonGroup } from '../utils/on-off-button-group'
+import React from 'react'
+
+/**
+ * Allows to change whether spellchecking is enabled or not in the editor.
+ */
+export const IndentWithTabsSettingButtonGroup: React.FC = () => {
+  const enabled = useApplicationState((state) => state.editorConfig.indentWithTabs)
+  return (
+    <OnOffButtonGroup
+      value={enabled}
+      onSelect={setEditorIndentWithTabs}
+      overrideButtonOnI18nKey={'settings.editor.indentWithTabs.tabs'}
+      overrideButtonOffI18nKey={'settings.editor.indentWithTabs.spaces'}
+    />
+  )
+}

frontend/src/components/global-dialogs/settings-dialog/utils/__snapshots__/on-off-button-group.spec.tsx.snap

@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Settings On-Off Button Group accepts custom labels 1`] = `
+<div>
+  <div
+    class="btn-group"
+    role="group"
+  >
+    <button
+      class="btn btn-secondary"
+      data-testid="onOffButtonGroupOn"
+      name="dark-mode"
+      title="test.custom-on"
+      type="radio"
+    >
+      test.custom-on
+    </button>
+    <button
+      class="btn btn-outline-secondary"
+      data-testid="onOffButtonGroupOff"
+      name="dark-mode"
+      title="test.custom-off"
+      type="radio"
+    >
+      test.custom-off
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Settings On-Off Button Group can switch value 1`] = `
 <div>
   <div

frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.spec.tsx

@@ -30,4 +30,16 @@ describe('Settings On-Off Button Group', () => {
     })
     expect(value).toBeFalsy()
   })
+
+  it('accepts custom labels', () => {
+    const view = render(
+      <OnOffButtonGroup
+        value={true}
+        onSelect={() => {}}
+        overrideButtonOnI18nKey={'test.custom-on'}
+        overrideButtonOffI18nKey={'test.custom-off'}
+      />
+    )
+    expect(view.container).toMatchSnapshot()
+  })
 })

frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.tsx

@@ -16,6 +16,8 @@ enum OnOffState {
 export interface OnOffButtonGroupProps {
   value: boolean
   onSelect: (value: boolean) => void
+  overrideButtonOnI18nKey?: string
+  overrideButtonOffI18nKey?: string
 }
 
 /**
@@ -23,8 +25,15 @@ export interface OnOffButtonGroupProps {
  *
  * @param onSelect callback that is executed if the on/off value has changed
  * @param value the current on/off value that should be visible
+ * @param overrideButtonOnI18nKey Set to override the i18n key for the on-button
+ * @param overrideButtonOffI18nKey Set to override the i18n key for the off-button
  */
-export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({ onSelect, value }) => {
+export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({
+  onSelect,
+  value,
+  overrideButtonOffI18nKey,
+  overrideButtonOnI18nKey
+}) => {
   const buttonGroupValue = useMemo(() => (value ? OnOffState.ON : OnOffState.OFF), [value])
   const onButtonSelect = useCallback(
     (value: OnOffState) => {
@@ -39,16 +48,16 @@ export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({ onSelect, va
         onSelect={onButtonSelect}
         selected={buttonGroupValue === OnOffState.ON}
         value={OnOffState.ON}
-        i18nKeyTooltip={'common.on'}
+        i18nKeyTooltip={overrideButtonOnI18nKey ?? 'common.on'}
-        i18nKeyLabel={'common.on'}
+        i18nKeyLabel={overrideButtonOnI18nKey ?? 'common.on'}
         {...testId('onOffButtonGroupOn')}
       />
       <SettingsToggleButton
         onSelect={onButtonSelect}
         selected={buttonGroupValue === OnOffState.OFF}
         value={OnOffState.OFF}
-        i18nKeyTooltip={'common.off'}
+        i18nKeyTooltip={overrideButtonOffI18nKey ?? 'common.off'}
-        i18nKeyLabel={'common.off'}
+        i18nKeyLabel={overrideButtonOffI18nKey ?? 'common.off'}
         {...testId('onOffButtonGroupOff')}
       />
     </ToggleButtonGroup>

frontend/src/redux/editor/methods.ts

@@ -10,7 +10,9 @@ import type {
   SetEditorLineWrappingAction,
   SetEditorSmartPasteAction,
   SetEditorSyncScrollAction,
-  SetEditorSpellCheckAction
+  SetEditorSpellCheckAction,
+  SetEditorIndentWithTabsAction,
+  SetEditorIndentSpacesAction
 } from './types'
 import { EditorConfigActionType } from './types'
 
@@ -54,6 +56,22 @@ export const setEditorSpellCheck = (spellCheck: boolean): void => {
   store.dispatch(action)
 }
 
+export const setEditorIndentWithTabs = (indentWithTabs: boolean): void => {
+  const action: SetEditorIndentWithTabsAction = {
+    type: EditorConfigActionType.SET_INDENT_WITH_TABS,
+    indentWithTabs
+  }
+  store.dispatch(action)
+}
+
+export const setEditorIndentSpaces = (indentSpaces: number): void => {
+  const action: SetEditorIndentSpacesAction = {
+    type: EditorConfigActionType.SET_INDENT_SPACES,
+    indentSpaces
+  }
+  store.dispatch(action)
+}
+
 export const loadFromLocalStorage = (): void => {
   const action: LoadFromLocalStorageAction = {
     type: EditorConfigActionType.LOAD_FROM_LOCAL_STORAGE

frontend/src/redux/editor/reducers.ts

@@ -15,7 +15,9 @@ export const initialState: EditorConfig = {
   syncScroll: true,
   smartPaste: true,
   spellCheck: true,
-  lineWrapping: true
+  lineWrapping: true,
+  indentWithTabs: false,
+  indentSpaces: 2
 }
 
 export const EditorConfigReducer: Reducer<EditorConfig, EditorConfigActions> = (
@@ -61,6 +63,20 @@ export const EditorConfigReducer: Reducer<EditorConfig, EditorConfigActions> = (
       }
       saveToLocalStorage(newState)
       return newState
+    case EditorConfigActionType.SET_INDENT_WITH_TABS:
+      newState = {
+        ...state,
+        indentWithTabs: action.indentWithTabs
+      }
+      saveToLocalStorage(newState)
+      return newState
+    case EditorConfigActionType.SET_INDENT_SPACES:
+      newState = {
+        ...state,
+        indentSpaces: action.indentSpaces
+      }
+      saveToLocalStorage(newState)
+      return newState
     default:
       return state
   }
@@ -72,13 +88,15 @@ export const loadFromLocalStorage = (): EditorConfig | undefined => {
     if (!stored) {
       return undefined
     }
-    const storedConfiguration = JSON.parse(stored) as Record<string, boolean>
+    const storedConfiguration = JSON.parse(stored) as Partial<EditorConfig>
     return {
       ligatures: storedConfiguration?.ligatures === true ?? true,
       syncScroll: storedConfiguration?.syncScroll === true ?? true,
       smartPaste: storedConfiguration?.smartPaste === true ?? true,
-      spellCheck: storedConfiguration?.spellCheck === true ?? false,
+      spellCheck: storedConfiguration?.spellCheck === true ?? true,
-      lineWrapping: storedConfiguration?.lineWrapping === true ?? true
+      lineWrapping: storedConfiguration?.lineWrapping === true ?? true,
+      indentWithTabs: storedConfiguration?.indentWithTabs === true ?? false,
+      indentSpaces: storedConfiguration?.indentSpaces ?? 2
     }
   } catch (_) {
     return undefined

frontend/src/redux/editor/types.ts

@@ -6,13 +6,14 @@
 import type { Action } from 'redux'
 
 export enum EditorConfigActionType {
-  SET_EDITOR_VIEW_MODE = 'editor/view-mode/set',
   SET_SYNC_SCROLL = 'editor/syncScroll/set',
   LOAD_FROM_LOCAL_STORAGE = 'editor/preferences/load',
   SET_LIGATURES = 'editor/preferences/setLigatures',
   SET_LINE_WRAPPING = 'editor/preferences/setLineWrapping',
   SET_SMART_PASTE = 'editor/preferences/setSmartPaste',
-  SET_SPELL_CHECK = 'editor/preferences/setSpellCheck'
+  SET_SPELL_CHECK = 'editor/preferences/setSpellCheck',
+  SET_INDENT_WITH_TABS = 'editor/preferences/setIndentWithTabs',
+  SET_INDENT_SPACES = 'editor/preferences/setIndentSpaces'
 }
 
 export interface EditorConfig {
@@ -21,6 +22,8 @@ export interface EditorConfig {
   smartPaste: boolean
   spellCheck: boolean
   lineWrapping: boolean
+  indentWithTabs: boolean
+  indentSpaces: number
 }
 
 export type EditorConfigActions =
@@ -29,6 +32,8 @@ export type EditorConfigActions =
   | SetEditorSmartPasteAction
   | SetEditorLineWrappingAction
   | SetEditorSpellCheckAction
+  | SetEditorIndentWithTabsAction
+  | SetEditorIndentSpacesAction
   | LoadFromLocalStorageAction
 
 export interface LoadFromLocalStorageAction extends Action<EditorConfigActionType> {
@@ -59,3 +64,13 @@ export interface SetEditorSpellCheckAction extends Action<EditorConfigActionType
   type: EditorConfigActionType.SET_SPELL_CHECK
   spellCheck: boolean
 }
+
+export interface SetEditorIndentWithTabsAction extends Action<EditorConfigActionType> {
+  type: EditorConfigActionType.SET_INDENT_WITH_TABS
+  indentWithTabs: boolean
+}
+
+export interface SetEditorIndentSpacesAction extends Action<EditorConfigActionType> {
+  type: EditorConfigActionType.SET_INDENT_SPACES
+  indentSpaces: number
+}