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>

electron/config.js

@@ -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",
 }

src/components/App.vue

@@ -118,6 +118,7 @@
             :keymap="settings.keymap"
             :showLineNumberGutter="settings.showLineNumberGutter"
             :showFoldGutter="settings.showFoldGutter"
+            :bracketClosing="settings.bracketClosing"
             class="editor"
             ref="editor"
             @openLanguageSelector="openLanguageSelector"

src/components/Editor.vue

@@ -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: {

src/components/settings/Settings.vue

@@ -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"
@@ -160,6 +168,22 @@
                         </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>
+
                     <TabContent tab="appearance" :activeTab="activeTab">
                         <div class="row">
                             <div class="entry">

src/editor/editor.js

@@ -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, 

tests/auto-closing-brackets.spec.js

@@ -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)")
+})

webapp/bridge.js

@@ -64,6 +64,7 @@ let initialSettings = {
     emacsMetaKey: "meta",
     showLineNumberGutter: true,
     showFoldGutter: true,
+    bracketClosing: false,
 }
 if (settingsData !== null) {
     initialSettings = Object.assign(initialSettings, JSON.parse(settingsData))