mirror of https://github.com/heyman/heynote.git
CloseBrackets setting toggle (#102)
* Add a setting to toggle the auto bracket-closing of CodeMirror * Move Auto-close brackets setting into new settings tab Editing * Add tests for Auto-close bracket setting --------- Co-authored-by: Jonatan Heyman <jonatan@heyman.info>
This commit is contained in:
parent
acb7ddf189
commit
0f3c714d56
|
@ -32,6 +32,7 @@ const schema = {
|
|||
"bufferPath" : {type: "string", default: ""},
|
||||
"showInDock": {type: "boolean", default: true},
|
||||
"showInMenu": {type: "boolean", default: false},
|
||||
"bracketClosing": {type: "boolean", default: false},
|
||||
},
|
||||
},
|
||||
|
||||
|
@ -59,6 +60,7 @@ const defaults = {
|
|||
bufferPath: "",
|
||||
showInDock: true,
|
||||
showInMenu: false,
|
||||
bracketClosing: false,
|
||||
},
|
||||
theme: "system",
|
||||
}
|
||||
|
|
|
@ -118,6 +118,7 @@
|
|||
:keymap="settings.keymap"
|
||||
:showLineNumberGutter="settings.showLineNumberGutter"
|
||||
:showFoldGutter="settings.showFoldGutter"
|
||||
:bracketClosing="settings.bracketClosing"
|
||||
class="editor"
|
||||
ref="editor"
|
||||
@openLanguageSelector="openLanguageSelector"
|
||||
|
|
|
@ -19,6 +19,10 @@
|
|||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
bracketClosing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
components: {},
|
||||
|
@ -61,6 +65,7 @@
|
|||
keymap: this.keymap,
|
||||
showLineNumberGutter: this.showLineNumberGutter,
|
||||
showFoldGutter: this.showFoldGutter,
|
||||
bracketClosing: this.bracketClosing,
|
||||
})
|
||||
window._heynote_editor = this.editor
|
||||
window.document.addEventListener("currenciesLoaded", this.onCurrenciesLoaded)
|
||||
|
@ -116,6 +121,10 @@
|
|||
showFoldGutter(show) {
|
||||
this.editor.setFoldGutter(show)
|
||||
},
|
||||
|
||||
bracketClosing(value) {
|
||||
this.editor.setBracketClosing(value)
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
@ -30,6 +30,7 @@
|
|||
globalHotkey: this.initialSettings.globalHotkey,
|
||||
showInDock: this.initialSettings.showInDock,
|
||||
showInMenu: this.initialSettings.showInMenu,
|
||||
bracketClosing: this.initialSettings.bracketClosing,
|
||||
autoUpdate: this.initialSettings.autoUpdate,
|
||||
|
||||
activeTab: "general",
|
||||
|
@ -64,6 +65,7 @@
|
|||
showInDock: this.showInDock,
|
||||
showInMenu: this.showInMenu || !this.showInDock,
|
||||
autoUpdate: this.autoUpdate,
|
||||
bracketClosing: this.bracketClosing,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
@ -83,6 +85,12 @@
|
|||
:activeTab="activeTab"
|
||||
@click="activeTab = 'general'"
|
||||
/>
|
||||
<TabListItem
|
||||
name="Editing"
|
||||
tab="editing"
|
||||
:activeTab="activeTab"
|
||||
@click="activeTab = 'editing'"
|
||||
/>
|
||||
<TabListItem
|
||||
name="Appearance"
|
||||
tab="appearance"
|
||||
|
@ -140,22 +148,38 @@
|
|||
<div class="entry">
|
||||
<h2>Show In</h2>
|
||||
<label v-if="isMac">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="showInDock"
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="showInDock"
|
||||
@change="updateSettings"
|
||||
/>
|
||||
Show in dock
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
<input
|
||||
type="checkbox"
|
||||
:disabled="!showInDock"
|
||||
v-model="showInMenu"
|
||||
v-model="showInMenu"
|
||||
@change="updateSettings"
|
||||
/>
|
||||
Show system tray
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</TabContent>
|
||||
|
||||
<TabContent tab="editing" :activeTab="activeTab">
|
||||
<div class="row">
|
||||
<div class="entry">
|
||||
<h2>Input settings</h2>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="bracketClosing"
|
||||
@change="updateSettings"
|
||||
/>
|
||||
Auto-close brackets and quotation marks
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</TabContent>
|
||||
|
|
|
@ -2,6 +2,7 @@ import { Annotation, EditorState, Compartment } from "@codemirror/state"
|
|||
import { EditorView, keymap, drawSelection, ViewPlugin, lineNumbers } from "@codemirror/view"
|
||||
import { indentUnit, forceParsing, foldGutter } from "@codemirror/language"
|
||||
import { markdown } from "@codemirror/lang-markdown"
|
||||
import { closeBrackets } from "@codemirror/autocomplete";
|
||||
|
||||
import { heynoteLight } from "./theme/light.js"
|
||||
import { heynoteDark } from "./theme/dark.js"
|
||||
|
@ -41,6 +42,7 @@ export class HeynoteEditor {
|
|||
keymap="default",
|
||||
showLineNumberGutter=true,
|
||||
showFoldGutter=true,
|
||||
bracketClosing=false,
|
||||
}) {
|
||||
this.element = element
|
||||
this.themeCompartment = new Compartment
|
||||
|
@ -49,6 +51,7 @@ export class HeynoteEditor {
|
|||
this.lineNumberCompartment = new Compartment
|
||||
this.foldGutterCompartment = new Compartment
|
||||
this.readOnlyCompartment = new Compartment
|
||||
this.closeBracketsCompartment = new Compartment
|
||||
this.deselectOnCopy = keymap === "emacs"
|
||||
|
||||
const state = EditorState.create({
|
||||
|
@ -62,6 +65,8 @@ export class HeynoteEditor {
|
|||
customSetup,
|
||||
this.foldGutterCompartment.of(showFoldGutter ? [foldGutter()] : []),
|
||||
|
||||
this.closeBracketsCompartment.of(bracketClosing ? [closeBrackets()] : []),
|
||||
|
||||
this.readOnlyCompartment.of([]),
|
||||
|
||||
this.themeCompartment.of(theme === "dark" ? heynoteDark : heynoteLight),
|
||||
|
@ -177,6 +182,12 @@ export class HeynoteEditor {
|
|||
})
|
||||
}
|
||||
|
||||
setBracketClosing(value) {
|
||||
this.view.dispatch({
|
||||
effects: this.closeBracketsCompartment.reconfigure(value ? [closeBrackets()] : []),
|
||||
})
|
||||
}
|
||||
|
||||
formatCurrentBlock() {
|
||||
formatBlockContent({
|
||||
state: this.view.state,
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
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 bracket closing default off", async ({ page }) => {
|
||||
await page.locator("body").pressSequentially("{")
|
||||
expect(await heynotePage.getBlockContent(0)).toBe("{")
|
||||
})
|
||||
|
||||
test("test bracket closing", async ({ page }) => {
|
||||
await page.locator("css=.status-block.settings").click()
|
||||
await page.locator("css=li.tab-editing").click()
|
||||
await page.getByLabel("Auto-close brackets and quotation marks").click()
|
||||
await page.locator("body").press("Escape")
|
||||
await page.locator("body").pressSequentially("{")
|
||||
expect(await heynotePage.getBlockContent(0)).toBe("{}")
|
||||
await page.locator("body").press("Backspace")
|
||||
expect(await heynotePage.getBlockContent(0)).toBe("")
|
||||
await page.locator("body").pressSequentially("(hej")
|
||||
await page.locator("body").pressSequentially("(hej)")
|
||||
})
|
|
@ -64,6 +64,7 @@ let initialSettings = {
|
|||
emacsMetaKey: "meta",
|
||||
showLineNumberGutter: true,
|
||||
showFoldGutter: true,
|
||||
bracketClosing: false,
|
||||
}
|
||||
if (settingsData !== null) {
|
||||
initialSettings = Object.assign(initialSettings, JSON.parse(settingsData))
|
||||
|
|
Loading…
Reference in New Issue