Stub json import

src/components/Editor.vue

@@ -1,11 +1,13 @@
 <template>
   <v-container class="pa-4" fluid style="height:85vh">
-    <div>
-      <!-- Editor actions -->
-      <v-btn class="mb-4" append-icon="fa-solid fa-indent" @click="formatCode">Format</v-btn>
+    <!-- Editor actions -->
+    <div class="d-flex">
+      <v-btn class="mb-4 mr-4" variant="tonal" append-icon="fa-solid fa-file-import" @click="importKeymap">Import</v-btn>
+      <v-spacer/>
+      <v-btn class="mb-4 mr-4" variant="tonal" append-icon="fa-solid fa-indent" @click="formatCode">Format</v-btn>
     </div>
 
-    <p style="color:red" v-if="error">{{ error }}</p>
+    <p class="text-red pa-4" v-if="error">{{ error }}</p>
 
     <vue-monaco-editor
     v-model:value="code"
@@ -20,20 +22,20 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, computed } from 'vue'
+import { ref, shallowRef, computed } from "vue";
 import { useTheme } from "vuetify";
-import { useTimeoutFn } from '@vueuse/core'
-import { useKeymapState } from '@/composables/useKeymapState'
+import { useTimeoutFn } from "@vueuse/core";
+import { useKeymapState } from "@/composables/useKeymapState";
 
 const theme = useTheme();
-const { keymap } = useKeymapState()
+const { keymap } = useKeymapState();
 
 const MONACO_EDITOR_OPTIONS = {
   automaticLayout: true,
   formatOnType: true,
   formatOnPaste: true,
   minimap: { enabled: false },
-}
+};
 
 const code = computed({
   get() {
@@ -42,37 +44,59 @@ const code = computed({
   set(km_str) {
     try {
       const km = JSON.parse(km_str);
-      keymap.value = km
+      keymap.value = km;
     } catch (error) {
       // log?
     }
-  }
-})
+  },
+});
 
-const editor = shallowRef()
+const editor = shallowRef();
 const handleMount = (editorInstance: any) => {
   editor.value = editorInstance;
 
   useTimeoutFn(() => {
     formatCode();
-  }, 200)
-}
+  }, 200);
+};
 
-const error = ref("")
+const error = ref("");
 
 // your action
 const formatCode = () => {
-  editor.value?.getAction('editor.action.formatDocument').run()
-}
+  editor.value?.getAction("editor.action.formatDocument").run();
+};
 
-const handleChange= () => {
+const handleChange = () => {
   // ??
-}
+};
+
+const handleError = (markers: any[]) => {
+  console.log(markers);
+  error.value = markers.length ? "Errors detected..." : "";
+};
+
+const importKeymap = () => {
+  // TODO: find npm FileReader.readAsText lib like file-saver
+  const i = document.createElement("input");
+  i.type = "file";
+  // eslint-disable-next-line func-names
+  i.onchange = function (event: Event) {
+    const files = (event.target as HTMLInputElement).files;
+    if (!files || !files.length){
+      return;
+    }
 
-const handleError= (markers: any[]) => {
-  console.log(markers)
-  error.value = markers.length ? "Errors detected..." : '';
-}
+    const file = files[0];
+    const fr = new FileReader();
+    fr.onload = () => {
+      const km = JSON.parse(fr.result as string);
+      keymap.value = km;
+    };
 
+    fr.readAsText(file);
+  };
+  i.click();
+};
 </script>