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 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 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 ### Other changes

View File

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

View File

@ -45,6 +45,7 @@
showInMenu: this.initialSettings.showInMenu, showInMenu: this.initialSettings.showInMenu,
alwaysOnTop: this.initialSettings.alwaysOnTop, alwaysOnTop: this.initialSettings.alwaysOnTop,
bracketClosing: this.initialSettings.bracketClosing, bracketClosing: this.initialSettings.bracketClosing,
tabSize: this.initialSettings.tabSize || 4,
autoUpdate: this.initialSettings.autoUpdate, autoUpdate: this.initialSettings.autoUpdate,
bufferPath: this.initialSettings.bufferPath, bufferPath: this.initialSettings.bufferPath,
fontFamily: this.initialSettings.fontFamily || defaultFontFamily, fontFamily: this.initialSettings.fontFamily || defaultFontFamily,
@ -116,6 +117,7 @@
alwaysOnTop: this.alwaysOnTop, alwaysOnTop: this.alwaysOnTop,
autoUpdate: this.autoUpdate, autoUpdate: this.autoUpdate,
bracketClosing: this.bracketClosing, bracketClosing: this.bracketClosing,
tabSize: this.tabSize,
bufferPath: this.bufferPath, bufferPath: this.bufferPath,
fontFamily: this.fontFamily === defaultFontFamily ? undefined : this.fontFamily, fontFamily: this.fontFamily === defaultFontFamily ? undefined : this.fontFamily,
fontSize: this.fontSize === defaultFontSize ? undefined : this.fontSize, fontSize: this.fontSize === defaultFontSize ? undefined : this.fontSize,
@ -279,6 +281,19 @@
</label> </label>
</div> </div>
</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="row">
<div class="entry"> <div class="entry">
<h2>Default Block Language</h2> <h2>Default Block Language</h2>

View File

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

View File

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