Merge pull request #311 from datalater/feat-configure-tab-size

Add configuration of tab size
This commit is contained in:
Jonatan Heyman 2025-04-22 17:22:57 +02:00 committed by GitHub
commit 3e204c8e9b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 54 additions and 1 deletions

View File

@ -8,6 +8,7 @@ Here are the most notable changes in each release. For a more detailed list of c
- Added support for custom key bindings. See [the documentation](https://heynote.com/docs/#user-content-custom-key-bindings) for more info.
- Added a "command palette" that can be accessed by pressing `Ctrl/Cmd+Shift+P`, or just typing `>` in the buffer selector. The command palette allows you to discover all available commands in the app, and to quickly execute them.
- Added support for configuring the tab size.
### Other changes

View File

@ -48,6 +48,7 @@ const schema = {
"showInMenu": {type: "boolean", default: false},
"alwaysOnTop": {type: "boolean", default: false},
"bracketClosing": {type: "boolean", default: false},
"tabSize": {type: "integer", default: 4},
"defaultBlockLanguage": {type: "string"},
"defaultBlockLanguageAutoDetect": {type: "boolean"},
@ -86,6 +87,7 @@ const defaults = {
showInMenu: false,
alwaysOnTop: false,
bracketClosing: false,
tabSize: 4,
},
theme: "system",
}

View File

@ -45,6 +45,7 @@
showInMenu: this.initialSettings.showInMenu,
alwaysOnTop: this.initialSettings.alwaysOnTop,
bracketClosing: this.initialSettings.bracketClosing,
tabSize: this.initialSettings.tabSize || 4,
autoUpdate: this.initialSettings.autoUpdate,
bufferPath: this.initialSettings.bufferPath,
fontFamily: this.initialSettings.fontFamily || defaultFontFamily,
@ -116,6 +117,7 @@
alwaysOnTop: this.alwaysOnTop,
autoUpdate: this.autoUpdate,
bracketClosing: this.bracketClosing,
tabSize: this.tabSize,
bufferPath: this.bufferPath,
fontFamily: this.fontFamily === defaultFontFamily ? undefined : this.fontFamily,
fontSize: this.fontSize === defaultFontSize ? undefined : this.fontSize,
@ -279,6 +281,19 @@
</label>
</div>
</div>
<div class="row">
<div class="entry">
<h2>Tab Size</h2>
<select v-model="tabSize" @change="updateSettings" class="tab-size">
<option
v-for="size in [1, 2, 3, 4, 5, 6, 7, 8]"
:key="size"
:selected="tabSize === size"
:value="size"
>{{ size }} {{ size === 1 ? 'space' : 'spaces' }}</option>
</select>
</div>
</div>
<div class="row">
<div class="entry">
<h2>Default Block Language</h2>

View File

@ -43,6 +43,7 @@ export class HeynoteEditor {
bracketClosing=false,
fontFamily,
fontSize,
tabSize=4,
defaultBlockToken,
defaultBlockAutoDetect,
keyBindings,
@ -56,6 +57,7 @@ export class HeynoteEditor {
this.foldGutterCompartment = new Compartment
this.readOnlyCompartment = new Compartment
this.closeBracketsCompartment = new Compartment
this.indentUnitCompartment = new Compartment
this.deselectOnCopy = keymap === "emacs"
this.emacsMetaKey = emacsMetaKey
this.fontTheme = new Compartment
@ -84,7 +86,7 @@ export class HeynoteEditor {
this.themeCompartment.of(theme === "dark" ? heynoteDark : heynoteLight),
heynoteBase,
this.fontTheme.of(getFontTheme(fontFamily, fontSize)),
indentUnit.of(" "),
this.indentUnitCompartment.of(indentUnit.of(" ".repeat(tabSize))),
EditorView.scrollMargins.of(f => {
return {top: 80, bottom: 80}
}),
@ -425,6 +427,12 @@ export class HeynoteEditor {
selectAll(this.view)
}
setTabSize(tabSize) {
this.view.dispatch({
effects: this.indentUnitCompartment.reconfigure(indentUnit.of(" ".repeat(tabSize)))
})
}
executeCommand(command) {
const cmd = HEYNOTE_COMMANDS[command]
if (!cmd) {

View File

@ -36,6 +36,7 @@ export const useEditorCacheStore = defineStore("editorCache", {
bracketClosing: settingsStore.settings.bracketClosing,
fontFamily: settingsStore.settings.fontFamily,
fontSize: settingsStore.settings.fontSize,
tabSize: settingsStore.settings.tabSize,
defaultBlockToken: settingsStore.settings.defaultBlockLanguage,
defaultBlockAutoDetect: settingsStore.settings.defaultBlockLanguageAutoDetect,
keyBindings: settingsStore.settings.keyBindings,
@ -139,6 +140,9 @@ export const useEditorCacheStore = defineStore("editorCache", {
case "fontSize":
editor.setFont(newSettings.fontFamily, newSettings.fontSize)
break
case "tabSize":
editor.setTabSize(newSettings.tabSize)
break
case "defaultBlockLanguage":
case "defaultBlockLanguageAutoDetect":
editor.setDefaultBlockLanguage(newSettings.defaultBlockLanguage, newSettings.defaultBlockLanguageAutoDetect)

View File

@ -0,0 +1,23 @@
import { test, expect } from "@playwright/test";
import { HeynotePage } from "./test-utils.js";
let heynotePage
test.beforeEach(async ({ page }) => {
heynotePage = new HeynotePage(page)
await heynotePage.goto()
});
test("test default tab size", async ({ page }) => {
await page.locator("body").press("Tab")
expect(await heynotePage.getBlockContent(0)).toBe(" ")
})
test("test custom tab size", async ({ page }) => {
await page.locator("css=.status-block.settings").click()
await page.locator("css=li.tab-editing").click()
await page.locator("css=select.tab-size").selectOption("2")
await page.locator("body").press("Escape")
await page.locator("body").press("Tab")
expect(await heynotePage.getBlockContent(0)).toBe(" ")
})