Add ability to change Emacs meta key on Mac

electron/config.js

@@ -16,6 +16,7 @@ const schema = {
         additionalProperties: false,
     },
     keymap: { "enum": ["default", "emacs"] },
+    emacsMetaKey: { "enum": [null, "alt", "meta"] },
 }
 
 export default new Store({schema})

electron/keymap.js

@@ -1,3 +1,4 @@
+import CONFIG from "./config"
 import { isMac } from "./detect-platform"
 
 
@@ -5,7 +6,7 @@ export function onBeforeInputEvent({win, event, input, currentKeymap}) {
     //console.log("keyboard event", input)
     let metaKey = "alt"
     if (isMac) {
-        metaKey = "meta"
+        metaKey = CONFIG.get("emacsMetaKey", "meta")
     }
     if (currentKeymap === "emacs") {
         /**
@@ -13,13 +14,13 @@ export function onBeforeInputEvent({win, event, input, currentKeymap}) {
          * using Codemirror's bind function. Therefore we have to bind them in electron land, and send 
          * cut, paste and copy to window.webContents
          */
-        if (input.key === "y" && input.control) {
+        if (input.code === "KeyY" && input.control) {
             event.preventDefault()
             win.webContents.paste()
-        } else if (input.key === "w" && input.control) {
+        } else if (input.code === "KeyW" && input.control) {
             event.preventDefault()
             win.webContents.cut()
-        } else if (input.key === "w" && input[metaKey]) {
+        } else if (input.code === "KeyW" && input[metaKey]) {
             event.preventDefault()
             win.webContents.copy()
         }

electron/preload/index.ts

@@ -5,14 +5,16 @@ import { ipcRenderer } from "electron"
 import { WINDOW_CLOSE_EVENT, KEYMAP_CHANGE_EVENT, OPEN_SETTINGS_EVENT } from "../constants"
 import CONFIG from "../config"
 
-contextBridge.exposeInMainWorld("platform", {
+//contextBridge.exposeInMainWorld("platform", )
-    isMac,
-    isWindows,
-    isLinux,
-})
 contextBridge.exposeInMainWorld('darkMode', darkMode)
 
 contextBridge.exposeInMainWorld("heynote", {
+    platform: {
+        isMac,
+        isWindows,
+        isLinux,
+    },
+
     quit() {
         console.log("quitting")
         //ipcRenderer.invoke("app_quit")
@@ -30,7 +32,7 @@ contextBridge.exposeInMainWorld("heynote", {
         async load() {
             return await ipcRenderer.invoke("buffer-content:load")
         },
-    
+
         async save(content) {
             return await ipcRenderer.invoke("buffer-content:save", content)
         },
@@ -44,7 +46,11 @@ contextBridge.exposeInMainWorld("heynote", {
         set(keymap) {
             ipcRenderer.invoke("keymap:set", keymap);
         },
+        setEmacsMetaKey(key) {
+            CONFIG.set("emacsMetaKey", key)
+        },
         initial: CONFIG.get("keymap", "default"),
+        getEmacsMetaKey: () => CONFIG.get("emacsMetaKey", isMac ? "meta" : "alt"),
         onKeymapChange(callback) {
             ipcRenderer.on(KEYMAP_CHANGE_EVENT, (event, keymap) => callback(keymap))
         },

src/components/App.vue

@@ -127,7 +127,7 @@
             />
             <Settings 
                 v-if="showSettings"
-                :keymap="keymap"
+                :initialKeymap="keymap"
                 @closeSettings="closeSettings"
             />
         </div>

src/components/settings/Settings.vue

@@ -1,7 +1,19 @@
 <script>
     export default {
         props: {
-            keymap: String,
+            initialKeymap: String,
+        },
+
+        data() {
+            return {
+                keymaps: [
+                    { name: "Default", value: "default" },
+                    { name: "Emacs", value: "emacs" },
+                ],
+                keymap: this.initialKeymap,
+                metaKey: window.heynote.keymap.getEmacsMetaKey(),
+                isMac: window.heynote.platform.isMac,
+            }
         },
 
         mounted() {
@@ -12,11 +24,17 @@
             window.removeEventListener("keydown", this.onKeyDown);
         },
 
-        methods: {
+        watch: {
-            onKeymapChange(event) {
+            keymap(value) {
-                window.heynote.keymap.set(event.target.value)
+                window.heynote.keymap.set(value)
             },
 
+            metaKey(value) {
+                window.heynote.keymap.setEmacsMetaKey(value)
+            }
+        },
+
+        methods: {
             onKeyDown(event) {
                 if (event.key === "Escape") {
                     this.$emit("closeSettings")
@@ -31,12 +49,22 @@
         <div class="dialog">
             <div>
                 <h1>Settings</h1>
-                <div class="entry">
+                <div class="row">
-                    <h2>Keymap:</h2>
+                    <div class="entry">
-                    <select ref="keymapSelector" @change="onKeymapChange">
+                        <h2>Keymap</h2>
-                        <option :selected="keymap==='default'" value="default">Default</option>
+                        <select ref="keymapSelector" v-model="keymap">
-                        <option :selected="keymap==='emacs'" value="emacs">Emacs</option>
+                            <template v-for="km in keymaps" :key="km.value">
-                    </select>
+                                <option :selected="km.value === keymap" :value="km.value">{{ km.name }}</option>
+                            </template>
+                        </select>
+                    </div>
+                    <div class="entry" v-if="keymap === 'emacs' && isMac">
+                        <h2>Meta Key</h2>
+                        <select v-model="metaKey">
+                            <option :selected="metaKey === 'meta'" value="meta">Command</option>
+                            <option :selected="metaKey === 'alt'" value="alt">Option</option>
+                        </select>
+                    </div>
                 </div>
             </div>
             <button 
@@ -95,15 +123,18 @@
                 font-weight: 600
                 margin-bottom: 20px
             
-            .entry
+            .row
-                margin-bottom: 20px
+                display: flex
-                h2
+                .entry
-                    font-weight: 600
+                    margin-bottom: 20px
-                    margin-bottom: 10px
+                    margin-right: 20px
-                select
+                    h2
-                    width: 200px
+                        font-weight: 600
-                    &:focus
+                        margin-bottom: 10px
-                        outline: none
+                    select
+                        width: 200px
+                        &:focus
+                            outline: none
 
             .close
                 height: 32px