diff --git a/src/editor/editor.js b/src/editor/editor.js
index 2914858..ab1742b 100644
--- a/src/editor/editor.js
+++ b/src/editor/editor.js
@@ -1,8 +1,7 @@
import { Annotation, EditorState, Compartment, Facet, EditorSelection, Transaction, Prec } from "@codemirror/state"
import { EditorView, keymap as cmKeymap, drawSelection, ViewPlugin, lineNumbers } from "@codemirror/view"
-import { indentUnit, forceParsing, foldGutter, ensureSyntaxTree } from "@codemirror/language"
+import { foldGutter, ensureSyntaxTree } from "@codemirror/language"
import { markdown, markdownKeymap } from "@codemirror/lang-markdown"
-import { closeBrackets } from "@codemirror/autocomplete";
import { undo, redo } from "@codemirror/commands"
import { heynoteLight } from "./theme/light.js"
@@ -22,6 +21,7 @@ import { languageDetection } from "./language-detection/autodetect.js"
import { autoSaveContent } from "./save.js"
import { todoCheckboxPlugin} from "./todo-checkbox.ts"
import { links } from "./links.js"
+import { indentation } from "./indentation.js"
import { HEYNOTE_COMMANDS } from "./commands.js";
import { NoteFormat } from "../common/note-format.js"
import { AUTO_SAVE_INTERVAL } from "../common/constants.js"
@@ -43,6 +43,7 @@ export class HeynoteEditor {
bracketClosing=false,
fontFamily,
fontSize,
+ indentType="space",
tabSize=4,
defaultBlockToken,
defaultBlockAutoDetect,
@@ -86,7 +87,7 @@ export class HeynoteEditor {
this.themeCompartment.of(theme === "dark" ? heynoteDark : heynoteLight),
heynoteBase,
this.fontTheme.of(getFontTheme(fontFamily, fontSize)),
- this.indentUnitCompartment.of(indentUnit.of(" ".repeat(tabSize))),
+ this.indentUnitCompartment.of(indentation(indentType, tabSize)),
EditorView.scrollMargins.of(f => {
return {top: 80, bottom: 80}
}),
@@ -427,9 +428,9 @@ export class HeynoteEditor {
selectAll(this.view)
}
- setTabSize(tabSize) {
+ setIndentSettings(indentType, tabSize) {
this.view.dispatch({
- effects: this.indentUnitCompartment.reconfigure(indentUnit.of(" ".repeat(tabSize)))
+ effects: this.indentUnitCompartment.reconfigure(indentation(indentType, tabSize))
})
}
diff --git a/src/editor/indentation.js b/src/editor/indentation.js
new file mode 100644
index 0000000..17655cd
--- /dev/null
+++ b/src/editor/indentation.js
@@ -0,0 +1,14 @@
+import { EditorState } from "@codemirror/state"
+import { indentUnit } from "@codemirror/language"
+
+export function indentation(indentType, tabSize) {
+ let unit
+ if (indentType === "tab") {
+ unit = indentUnit.of("\t")
+ } else if (indentType === "space") {
+ unit = indentUnit.of(" ".repeat(tabSize))
+ } else {
+ throw new Error("Invalid indent type")
+ }
+ return [unit, EditorState.tabSize.of(tabSize)]
+}
diff --git a/src/stores/editor-cache.js b/src/stores/editor-cache.js
index 4912ce5..17ae46b 100644
--- a/src/stores/editor-cache.js
+++ b/src/stores/editor-cache.js
@@ -36,6 +36,7 @@ export const useEditorCacheStore = defineStore("editorCache", {
bracketClosing: settingsStore.settings.bracketClosing,
fontFamily: settingsStore.settings.fontFamily,
fontSize: settingsStore.settings.fontSize,
+ indentType: settingsStore.settings.indentType,
tabSize: settingsStore.settings.tabSize,
defaultBlockToken: settingsStore.settings.defaultBlockLanguage,
defaultBlockAutoDetect: settingsStore.settings.defaultBlockLanguageAutoDetect,
@@ -140,8 +141,9 @@ export const useEditorCacheStore = defineStore("editorCache", {
case "fontSize":
editor.setFont(newSettings.fontFamily, newSettings.fontSize)
break
+ case "indentType":
case "tabSize":
- editor.setTabSize(newSettings.tabSize)
+ editor.setIndentSettings(newSettings.indentType, newSettings.tabSize)
break
case "defaultBlockLanguage":
case "defaultBlockLanguageAutoDetect":
diff --git a/tests/tab-size-setting.spec.js b/tests/tab-size-setting.spec.js
index cb8c2cb..9d4881e 100644
--- a/tests/tab-size-setting.spec.js
+++ b/tests/tab-size-setting.spec.js
@@ -21,3 +21,12 @@ test("test custom tab size", async ({ page }) => {
await page.locator("body").press("Tab")
expect(await heynotePage.getBlockContent(0)).toBe(" ")
})
+
+test("test indent type", async ({ page }) => {
+ await page.locator("css=.status-block.settings").click()
+ await page.locator("css=li.tab-editing").click()
+ await page.locator("css=select.indent-type").selectOption("tab")
+ await page.locator("body").press("Escape")
+ await page.locator("body").press("Tab")
+ expect(await heynotePage.getBlockContent(0)).toBe("\t")
+})