feat: import notes

src/content-scripts/renderer/popup/footer/ex-import.ts

@@ -1,8 +1,10 @@
 import { $enum } from "ts-enum-util";
+import { ElMessageBox, ElMessage } from "element-plus";
 
 import { Oper } from "@/types/common";
 import { StorageKeys } from "@/utils/constant";
-import { get } from "@/utils/storage";
+import { get, set } from "@/utils/storage";
+import mitt from "@/utils/mitt";
 
 export const exportOper: Oper = {
   title: "Export notes to json",
@@ -23,3 +25,85 @@ export const exportOper: Oper = {
   },
   isConfirm: false,
 };
+
+export const importOper: Oper = {
+  title: "Import notes from json",
+  onClick: async () => {
+    const input = document.createElement("input");
+    input.setAttribute("id", "import-note-input");
+    const deleteInput = () => document.removeChild(input);
+    input.type = "file";
+    input.onchange = (e) => {
+      const errMsg =
+      "The parsing progress gets errors, please make sure to import the json file exported by Context-Note.";
+      const file = (e?.target as any)?.files?.[0];
+      const fileName = file?.name;
+      if (!fileName?.endsWith(".json")) {
+        ElMessage.error(
+          "The file format is wrong, please make sure to import the json file exported by Context-Note."
+        );
+        deleteInput();
+        return;
+      }
+      const reader = new FileReader();
+      reader.readAsText(file, "UTF-8");
+      reader.onload = async (readerEvent) => {
+        const content = readerEvent?.target?.result?.toString(); // this is the content!
+        if (!content) {
+          ElMessage.error(errMsg);
+          deleteInput();
+          return;
+        }
+        try {
+          const json = JSON.parse(content) ?? {};
+          const keys = Array.from($enum(StorageKeys).keys()) as string[];
+          // is the json valid or not
+          const isValid = Object.keys(json).reduce(
+            (prev, cur) => (keys.includes(cur) ? prev : false),
+            true
+          );
+          if (!isValid) {
+            ElMessage.error(errMsg);
+            deleteInput();
+            return;
+          }
+          const items = (await Promise.all(keys.map((k) => get(k)))).map(
+            (item) => item ?? []
+          ) as [][];
+          const isNotEmpty = items.some((item) => item.length);
+          if (isNotEmpty) {
+            await ElMessageBox.confirm(
+              "You have already saved some notes, are you sure to overwrite them by the new importing one?",
+              "Warning",
+              {
+                confirmButtonText: "Yes",
+                cancelButtonText: "No",
+                type: "warning",
+              }
+            )
+              .then(res => res)
+              .catch(() => {
+                deleteInput();
+                return;
+              });
+          }
+          for (const key of keys) {
+            set(key, json[key] ?? []);
+          }
+          mitt.emit("update-storage", null);
+          ElMessage.success(
+            `Notes are imported from ${fileName} successfully.`
+          );
+        } catch (err) {
+          ElMessage.error(err as string);
+        }
+        deleteInput();
+      };
+      reader.onerror = () => {
+        ElMessage.error(errMsg);
+        deleteInput();
+      };
+    };
+    input.click();
+  },
+};

src/content-scripts/renderer/popup/footer/index.vue

@@ -23,7 +23,7 @@ import { DArrowLeft, DArrowRight } from "@element-plus/icons";
 import { Oper } from "@/types/common";
 import mitt from "@/utils/mitt";
 import More from "../shared/more.vue";
-import { exportOper } from "./ex-import";
+import { exportOper, importOper } from "./ex-import";
 import { EventType } from "mitt";
 
 export default {
@@ -52,7 +52,7 @@ export default {
     );
 
     const githubLogoSrc = chrome.runtime.getURL("assets/github-logo.png");
-    const opers = ref<Oper[]>([exportOper]);
+    const opers = ref<Oper[]>([exportOper, importOper]);
 
     return {
       footerStyle,

src/content-scripts/renderer/popup/shared/more.vue

@@ -107,6 +107,10 @@ export default {
   .more-opers-item {
     cursor: pointer;
     user-select: none;
+    padding: 10px;
+    &:hover {
+      background: #ccc;
+    }
   }
 }
 </style>

todo.md

@@ -1,6 +1,6 @@
 - [ ] export/import notes' data by json
   - [x] export
-  - [ ] import
+  - [x] import
 - [ ] expand the notes(classify by tag)
 - [ ] more precise rects selection rather than coor (select the real dom by text)
 - [ ] screenshot features