From 2e5dd5056596bd008e6ebe8cb12e09b7b3adabbe Mon Sep 17 00:00:00 2001
From: kjimlau <neochannel@163.com>
Date: Mon, 6 Sep 2021 13:25:13 +0800
Subject: [PATCH] feat: renderer folder

---
 src/content-scripts/renderer/dom/logo-icon.ts |  55 +++
 src/content-scripts/renderer/dom/rect.ts      | 133 +++++++
 src/content-scripts/renderer/highlight.ts     |  15 -
 src/content-scripts/renderer/popup/index.vue  |  47 +++
 .../renderer/popup/note-book/index.vue        |  64 ++++
 .../renderer/popup/note-book/note-list.vue    | 171 +++++++++
 .../renderer/popup/note-book/note.vue         | 355 ++++++++++++++++++
 .../renderer/popup/tag-book/index.vue         | 191 ++++++++++
 .../renderer/popup/tag-book/tag-searcher.vue  |  59 +++
 .../popup/tag-book/tag-selector/index.vue     |  92 +++++
 .../popup/tag-book/tag-selector/tag-list.vue  |  83 ++++
 11 files changed, 1250 insertions(+), 15 deletions(-)
 create mode 100644 src/content-scripts/renderer/dom/logo-icon.ts
 create mode 100644 src/content-scripts/renderer/dom/rect.ts
 delete mode 100644 src/content-scripts/renderer/highlight.ts
 create mode 100644 src/content-scripts/renderer/popup/index.vue
 create mode 100644 src/content-scripts/renderer/popup/note-book/index.vue
 create mode 100644 src/content-scripts/renderer/popup/note-book/note-list.vue
 create mode 100644 src/content-scripts/renderer/popup/note-book/note.vue
 create mode 100644 src/content-scripts/renderer/popup/tag-book/index.vue
 create mode 100644 src/content-scripts/renderer/popup/tag-book/tag-searcher.vue
 create mode 100644 src/content-scripts/renderer/popup/tag-book/tag-selector/index.vue
 create mode 100644 src/content-scripts/renderer/popup/tag-book/tag-selector/tag-list.vue

diff --git a/src/content-scripts/renderer/dom/logo-icon.ts b/src/content-scripts/renderer/dom/logo-icon.ts
new file mode 100644
index 0000000..7605066
--- /dev/null
+++ b/src/content-scripts/renderer/dom/logo-icon.ts
@@ -0,0 +1,55 @@
+const DOM_ICON_ID = "context-note-logo-icon";
+
+let onClickEvt: EventListener;
+/**
+ * generate a logo icon image dom on top left of selected text
+ * @param x mouse x
+ * @param y mouse y
+ * @param cb callback when clicked
+ * @returns 
+ */
+export function genLogoIconAndRegisterClickCb(
+  x: number,
+  y: number,
+  cb: () => void
+) {
+  const iconSize = 35;
+
+  const ele = document
+    .querySelector("body")
+    ?.appendChild(document.createElement("img")) as HTMLImageElement;
+  if (!ele) return;
+
+  ele.id = DOM_ICON_ID;
+  ele.style.position = "absolute";
+  ele.style.left = `${x}px`;
+  ele.style.top = `${y - iconSize}px`;
+  ele.style.width = `${iconSize}px`;
+  ele.style.height = `${iconSize}px`;
+  ele.style.cursor = "pointer";
+  ele.style.zIndex = '100';
+
+  // get assets of exteison by `chrome.runtime.getURL`
+  // https://stackoverflow.com/questions/11804332/insert-an-image-in-chrome-extension
+  ele.src = chrome.runtime.getURL("assets/icon16.png");
+
+  onClickEvt = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    cb?.();
+    clearLogoIcon();
+  };
+  ele.addEventListener("mouseup", onClickEvt);
+}
+
+export function clearLogoIcon() {
+  // delete all logo icon doms
+  const eles = document.querySelectorAll(`#${DOM_ICON_ID}`);
+  eles.forEach((ele) => {
+    onClickEvt && ele.removeEventListener("mouseup", onClickEvt);
+    const parent = ele.parentElement;
+    if (parent) {
+      parent.removeChild(ele);
+    }
+  });
+}
diff --git a/src/content-scripts/renderer/dom/rect.ts b/src/content-scripts/renderer/dom/rect.ts
new file mode 100644
index 0000000..c32ea4b
--- /dev/null
+++ b/src/content-scripts/renderer/dom/rect.ts
@@ -0,0 +1,133 @@
+import { v4 as uuid } from "uuid";
+import { Rect } from "@/types/common";
+import {
+  DOMATTR_RECT_GROUP,
+  PREFIX_RECT,
+  PREFIX_RECT_GROUP,
+} from "@/utils/constant";
+
+function setHighlightStyle(ele: HTMLElement, rect: Rect) {
+  const PADDING = 6;
+  ele.style.position = "absolute";
+  ele.style.left = rect.x - PADDING / 2 + "px";
+  ele.style.top = rect.y - PADDING / 2 + "px";
+  ele.style.width = `${rect.width + PADDING}px`;
+  ele.style.height = `${rect.height + PADDING}px`;
+  ele.style.background = "yellow";
+  ele.style.opacity = "0.3";
+  ele.style.content = " ";
+}
+
+function findRelatedIds(
+  id: string,
+  idMap: { [key: string]: string[] }
+): [string, string[]] {
+  for (const key in idMap) {
+    const ids = idMap[key] || [];
+    if (ids.includes(id)) {
+      return [key, ids];
+    }
+  }
+  return ["", []];
+}
+
+function setRectStyleWithIds(ids: string[], key: string, value: string) {
+  if (ids.length === 0) return;
+
+  const rects = (document.querySelectorAll(
+    (ids.map((id) => `#${id}`) as unknown) as string
+  ) as unknown) as HTMLElement[];
+  rects.forEach((rect) => {
+    ((rect.style as { [key: string]: any }) || {})[key] = value;
+  });
+}
+
+const groupRectIdsMap: { [key: string]: string[] } = {};
+/** 
+ * Generate the highlight rect doms and register their click event.
+ */
+export function genHighlightRects(
+  noteId: string,
+  rects: Rect[] = [],
+  clickCb?: (groupId: string) => void
+) {
+  const groupId = noteId || `${PREFIX_RECT_GROUP}-${uuid()}`;
+  groupRectIdsMap[groupId] = [];
+  for (const rect of rects) {
+    const ele = document.createElement("div");
+    const id = `${PREFIX_RECT}-${uuid()}`;
+    ele.setAttribute("id", id);
+    ele.setAttribute(DOMATTR_RECT_GROUP, groupId);
+    // highlight the rect
+    setHighlightStyle(ele, rect);
+    document.querySelector("body")?.appendChild(ele);
+    groupRectIdsMap[groupId].push(ele.id);
+
+    // click event
+    document.addEventListener("mouseup", (event) => {
+      const withinBoundaries = event.composedPath().includes(ele);
+
+      if (withinBoundaries) {
+        const groupId = boldHighlightGroupRects(ele?.id, "");
+        clickCb?.(groupId);
+      } else {
+        unboldHighlightGroupRects(ele?.id);
+      }
+    });
+  }
+  return groupId;
+}
+
+/** 
+ * Delete all rects with `noteId`, if `noteId` is not provided, delete all rects.
+ */
+export function delHighlightRects(noteId?: string | undefined) {
+  const query = !noteId ? `[${DOMATTR_RECT_GROUP}]` : `[${DOMATTR_RECT_GROUP}=${noteId}]`
+  const rectDoms = document.querySelectorAll(query);
+  rectDoms.forEach(dom => {
+    dom.parentElement?.removeChild(dom);
+  })
+}
+
+/**
+ * Bold the group highlight rects.
+ * @param id one id of the group rects
+ * @param groupId the group id
+ * @param scrollIntoView if need scrollIntoView when bolding
+ * @returns groupId
+ */
+export function boldHighlightGroupRects(
+  id?: string,
+  groupId?: string,
+  scrollIntoView?: boolean
+): string {
+  // set all related rects border to dotted
+  let relatedIds: string[];
+  if (groupId) {
+    relatedIds = groupRectIdsMap[groupId] || [];
+  } else {
+    [groupId, relatedIds] = findRelatedIds(id || "", groupRectIdsMap);
+  }
+  setTimeout(() => {
+    setRectStyleWithIds(relatedIds, "border", "2px dotted #000");
+  });
+  if (groupId) {
+    if (scrollIntoView) {
+      // scroll to first rect
+      const firstRectId = relatedIds?.[0];
+      const firstRect = document.querySelector(`#${firstRectId}`);
+      firstRect && firstRect.scrollIntoView({ block: "center" });
+    }
+  }
+  return groupId;
+}
+
+/**
+ * Unbold the group highlight rects.
+ * @param id one id of the group rects.
+ */
+export function unboldHighlightGroupRects(id: string) {
+  // set all related rects border to none
+  const [_, relatedIds] = findRelatedIds(id, groupRectIdsMap);
+  setRectStyleWithIds(relatedIds, "border", "none");
+}
diff --git a/src/content-scripts/renderer/highlight.ts b/src/content-scripts/renderer/highlight.ts
deleted file mode 100644
index 7e9378c..0000000
--- a/src/content-scripts/renderer/highlight.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/// 借助rect的坐标高亮rects（由于是坐标因此rects可以存储起来后续反显）
-export function highlightRects(rects: DOMRect[] = []) {
-  for (const rect of rects) {
-    const ele = document.createElement('div')
-    ele.style.position = 'absolute'
-    ele.style.left = rect.x + 'px'
-    ele.style.top = rect.y + 'px'
-    ele.style.width = `${rect.width}px`
-    ele.style.height = `${rect.height}px`
-    ele.style.background = 'yellow'
-    ele.style.opacity = '0.2'
-    ele.style.content = ' '
-    document.querySelector('body')?.appendChild(ele)
-  }
-}
\ No newline at end of file
diff --git a/src/content-scripts/renderer/popup/index.vue b/src/content-scripts/renderer/popup/index.vue
new file mode 100644
index 0000000..fc0043b
--- /dev/null
+++ b/src/content-scripts/renderer/popup/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div v-show="visible">
+    <NoteBook v-clickoutside="handleClickOutside"></NoteBook>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, ref, reactive } from "vue";
+import NoteBook from "./note-book/index.vue";
+import { Note } from "@/types/note";
+import { Tag } from "@/types/tag";
+import { Storage } from "@/types/storage";
+import { get } from "@/utils/storage";
+import { StorageKeys } from "@/utils/constant";
+
+export default defineComponent({
+  components: {
+    NoteBook,
+  },
+  setup() {
+    const visible = ref(false);
+    const handleClickOutside = () => {
+      visible.value = false;
+    };
+
+    // global reading `notes` and `tags` from storage and provide to sub components.
+    const storage = reactive<Storage>({
+      [StorageKeys.notes]: [],
+      [StorageKeys.tags]: [],
+    });
+    get(StorageKeys.notes).then((res) => {
+      storage.notes = (res as Note[]) || [];
+    });
+    get(StorageKeys.tags).then((res) => {
+      storage.tags = (res as Tag[]) || [];
+    });
+    provide("storage", storage);
+
+    return {
+      visible,
+      handleClickOutside,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/content-scripts/renderer/popup/note-book/index.vue b/src/content-scripts/renderer/popup/note-book/index.vue
new file mode 100644
index 0000000..e36d42d
--- /dev/null
+++ b/src/content-scripts/renderer/popup/note-book/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="note-book-wrapper">
+    <NoteList></NoteList>
+    <TagBook
+      v-show="!!curNoteId"
+      :noteId="curNoteId"
+      :coor="tagBookCoor"
+      @close="handleCloseTagBook"
+    ></TagBook>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import mitt from "@/utils/mitt";
+import { Coor } from "@/types/common";
+import TagBook from "../tag-book/index.vue";
+import NoteList from "./note-list.vue";
+export default {
+  components: {
+    NoteList,
+    TagBook,
+  },
+  setup(props) {
+    const tagBookCoor = ref<Coor>({ x: 0, y: 0 });
+    const curNoteId = ref("");
+
+    mitt.on("open-tag-book", ({ noteId, coor }: any) => {
+      if (coor) {
+        // `setTimeout` to let `handleCloseTagBook` trigger first.
+        setTimeout(() => {
+          tagBookCoor.value = coor as Coor;
+          curNoteId.value = noteId;
+        });
+      }
+    });
+    const handleCloseTagBook = () => {
+      curNoteId.value = "";
+    };
+
+    return {
+      tagBookCoor,
+      curNoteId,
+      handleCloseTagBook,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.note-book-wrapper {
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  width: 500px;
+  min-width: 500px;
+  height: 100vh;
+  overflow-y: scroll;
+  background-color: #646cff80;
+  opacity: 1;
+  border-radius: 10px;
+  z-index: 9999;
+}
+</style>
diff --git a/src/content-scripts/renderer/popup/note-book/note-list.vue b/src/content-scripts/renderer/popup/note-book/note-list.vue
new file mode 100644
index 0000000..5987e9b
--- /dev/null
+++ b/src/content-scripts/renderer/popup/note-book/note-list.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="note-list-wrapper">
+    <Note
+      v-for="(note, i) in notes"
+      :ref="
+        (el) => {
+          noteDivs[i] = el;
+        }
+      "
+      :id="note.id"
+      :note="note"
+      :curNoteId="curNoteId"
+      :key="note.id"
+      @delete="handleDeleteNote(note)"
+      @updateNoteNote="handleUpdateNoteNote"
+      @focus="(noteId) => handleSelectNote(noteId, false)"
+      @select="(noteId) => handleSelectNote(noteId, true)"
+    ></Note>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onBeforeUpdate, inject, ref, computed } from "vue";
+import dayjs from "dayjs";
+import { Rect } from "@/types/common";
+import { Note as TNote } from "@/types/note";
+import { Storage } from "@/types/storage";
+import mitt from "@/utils/mitt";
+import {
+  addItemToArr,
+  updateArrItemProperty,
+  addItemToArrProperty,
+  delItemFromArrProperty,
+  delItemFromArr,
+} from "@/utils/storage";
+import { StorageKeys } from "@/utils/constant";
+import { removeUrlPostfix } from "@/utils/utils";
+import Note from "./note.vue";
+
+export default defineComponent({
+  name: "note-list",
+  components: {
+    Note,
+  },
+  props: {},
+  setup() {
+    const storage: Storage = inject("storage", {
+      notes: [],
+      tags: [],
+    });
+    const notes = computed<TNote[]>(() => storage.notes);
+
+    /// create note
+    const noteDivs = ref([]);
+    // make sure to reset the refs before each update
+    onBeforeUpdate(() => {
+      noteDivs.value = [];
+    });
+    // listen the `take-note` event
+    mitt.on("take-note", async (data) => {
+      const { noteId = "", text = "", rects = [] } = data as {
+        noteId: string;
+        text: string;
+        rects: Rect[];
+      };
+
+      // 1. create the note item
+      const note: TNote = {
+        id: noteId,
+        createTime: dayjs().unix(),
+        updateTime: dayjs().unix(),
+        link: removeUrlPostfix(window.location.href),
+        content: text,
+        rects: rects,
+        tags: [],
+      };
+      storage.notes = await addItemToArr(StorageKeys.notes, note);
+
+      // make sure the note dom is created
+      setTimeout(() => {
+        // 2. scroll to the note item
+        const divNote = (noteDivs.value[noteDivs.value.length - 1] as {
+          $el: HTMLElement;
+        })?.$el;
+        if (divNote) {
+          divNote.scrollIntoView();
+        }
+
+        // 3. focus the content editor of this note
+        mitt.emit("focus-editor", note.id);
+      });
+
+      // 4. send back the cb event
+      mitt.emit("take-note-cb", note.id);
+    });
+    // liseten the `select-note` event
+    mitt.on("select-note", (noteId) => {
+      const divNote = document.querySelector(`#${noteId}`);
+      if (divNote) {
+        divNote.scrollIntoView({
+          block: "center",
+        });
+      }
+      mitt.emit("focus-editor", noteId);
+      mitt.emit("select-note-cb", noteId);
+    });
+    // listen the `update-note-tag` event
+    mitt.on("update-note-tag", async (data) => {
+      const { noteId = "", tag = "", isAddOrDelete = false } = data as any;
+      const fn = isAddOrDelete ? addItemToArrProperty : delItemFromArrProperty;
+      storage.notes = await fn(StorageKeys.notes, "id", noteId, "tags", tag);
+    });
+
+    /// update note of note
+    const handleUpdateNoteNote = async (data: any) => {
+      const { id = "", content } = data || {};
+      storage.notes = await updateArrItemProperty(
+        StorageKeys.notes,
+        "id",
+        id,
+        "note",
+        content
+      );
+    };
+
+    /// delete note
+    const handleDeleteNote = async (note: TNote) => {
+      const { id } = note;
+      // delete id from  `noteIds` of all tags
+      storage.tags.forEach((tag) => {
+        const index = tag.noteIds.findIndex((nid) => nid === id);
+        if (index !== -1) {
+          tag.noteIds.splice(index, 1);
+        }
+      });
+      // delete note from `notes`
+      storage.notes = await delItemFromArr(StorageKeys.notes, id, "id");
+      // delete highlight rects dom
+      mitt.emit("del-note", id);
+    };
+
+    /// select note
+    const curNoteId = ref("");
+    const handleSelectNote = (id: string, scrollIntoView: boolean) => {
+      curNoteId.value = id;
+      mitt.emit("bold-note", {
+        id,
+        scrollIntoView,
+      });
+    };
+
+    return {
+      notes,
+      noteDivs,
+
+      handleUpdateNoteNote,
+
+      handleDeleteNote,
+
+      curNoteId,
+      handleSelectNote,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.note-list-wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/src/content-scripts/renderer/popup/note-book/note.vue b/src/content-scripts/renderer/popup/note-book/note.vue
new file mode 100644
index 0000000..23971c6
--- /dev/null
+++ b/src/content-scripts/renderer/popup/note-book/note.vue
@@ -0,0 +1,355 @@
+<template>
+  <div
+    class="note-wrapper"
+    :class="{ 'note-wrapper__notselected': notSelected }"
+    :style="colorBarStyle"
+  >
+    <!-- website link -->
+    <el-tooltip placement="left">
+      <div :id="`link-${note.id}`" class="note-link">{{ note.link }}</div>
+      <template #content>
+        {{ note.link }}
+        <div class="note-link-opers">
+          <span
+            class="note-link-oper"
+            v-clipboard:copy="note.link"
+            v-clipboard:success="handleCopy"
+            >Copy</span
+          >
+          <span class="note-link-oper" @click="handleOpenLink(note.link)">Open</span>
+        </div>
+      </template>
+    </el-tooltip>
+    <!-- opers area -->
+    <div class="note-opers">
+      <!-- delete icon -->
+      <el-popconfirm
+        confirmButtonText="yes"
+        cancelButtonText="no"
+        icon="el-icon-info"
+        iconColor="red"
+        title="delete this note?"
+        size="small"
+        @confirm="handleDeleteNote"
+      >
+        <template #reference>
+          <el-icon class="note-delete-icon" :size="12">
+            <Delete></Delete>
+          </el-icon>
+        </template>
+      </el-popconfirm>
+      <!-- tag=list -->
+      <div :id="`note-item-${note.id || ''}`" class="note-tag-wrapper">
+        <div
+          v-if="tags.length === 0"
+          class="note-tag-adder"
+          @click="handleOpenTagBook(note?.id)"
+        >
+          #Add tag..
+        </div>
+        <div
+          v-else
+          v-for="tag in tags || []"
+          :key="tag.id"
+          class="note-tag-item"
+          :style="getNoteTagItemStyle(tag)"
+          @click="handleOpenTagBook(note.id)"
+        >
+          {{ `#${tag.name}` }}
+        </div>
+      </div>
+      <!-- time -->
+      <div class="note-time">{{ dayjs.unix(note.createTime).format("MM/DD HH:mm") }}</div>
+    </div>
+    <!-- note content -->
+    <p class="note-content">{{ note.content }}</p>
+    <!-- note editor -->
+
+    <div
+      v-clickoutside="handleClickOutsideEditor"
+      :class="[
+        'note-editor',
+        enableEditor ? 'note-editor__edit' : 'note-editor__readonly',
+      ]"
+    >
+      <QuillEditor
+        ref="editorDom"
+        v-model:content="editorContent"
+        :toolbar="editorToolbar"
+        @click="handleClickEditor"
+      ></QuillEditor>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { inject, ref, computed, watch, nextTick, PropType } from "vue";
+import randomcolor from "randomcolor";
+import dayjs from "dayjs";
+import { Delete } from "@element-plus/icons";
+import { ElMessage } from "element-plus";
+
+import { QuillEditor, Delta } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+
+import { Note } from "@/types/note";
+import { Tag } from "@/types/tag";
+import { Storage } from "@/types/storage";
+import { Coor } from "@/types/common";
+import mitt from "@/utils/mitt";
+import TagBook from "../tag-book/index.vue";
+
+export default {
+  components: {
+    TagBook,
+    Delete,
+    QuillEditor,
+  },
+  props: {
+    curNoteId: {
+      type: Object as PropType<string>,
+      default: "",
+    },
+    note: {
+      required: true,
+      type: Object as PropType<Note>,
+    },
+  },
+  setup(props, ctx) {
+    const colorBarStyle = ref({
+      borderTop: `8px solid ${randomcolor({
+        alpha: 0.5,
+      })}`,
+    });
+    const storage: Storage = inject("storage", {
+      notes: [],
+      tags: [],
+    });
+
+    /// note link
+    const noteLink = ref(props.note.link || "");
+    const handleCopy = () => {
+      ElMessage.success("Copied");
+    };
+    const handleOpenLink = (link: string) => {
+      window.open(link);
+    };
+
+    /// is note selected or not
+    const notSelected = computed(
+      () => props.curNoteId && props.curNoteId !== props.note.id
+    );
+
+    /// close note
+    const handleDeleteNote = () => {
+      ctx.emit("delete");
+    };
+
+    /// note tags
+    const getNoteTagItemStyle = (tag: Tag) => {
+      return {
+        color: tag.color,
+      };
+    };
+    const tags = computed(() =>
+      storage.tags.filter((tag) => props.note.tags.includes(tag.name))
+    );
+    // open tag book
+    const handleOpenTagBook = (noteId: string) => {
+      if (noteId) {
+        const noteDom = document.querySelector(`#note-item-${noteId}`);
+        const rect = noteDom?.getBoundingClientRect();
+        if (rect) {
+          mitt.emit("open-tag-book", {
+            noteId,
+            coor: {
+              x: rect.left,
+              y: rect.top,
+            } as Coor,
+          });
+        }
+      }
+    };
+
+    /// note editor
+    const enableEditor = ref(true);
+    // bug: need `nextTick` to work
+    nextTick(() => {
+      enableEditor.value = false;
+    });
+    const editorToolbar = [
+      [{ header: [1, 2, 3, 4, false] }, { font: [] }],
+      ["bold", "italic", "underline", "strike", { color: [] }, { background: [] }],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["link", "image", "blockquote", "code-block"],
+      ["clean"],
+    ];
+    const editorContent = ref<Delta | string>(props.note.note);
+    const editorDom = ref(null);
+    mitt.on("focus-editor", (id) => {
+      if (id === props.note.id) {
+        enableEditor.value = true;
+        setTimeout(() => {
+          const e = (editorDom.value as any)?.editor?.children[0];
+          if (e) {
+            // TODO: cursor to the end
+            e.focus();
+          }
+        });
+      }
+      // ensure `handleClickOutsideEditor` trigger first
+      nextTick(() => ctx.emit("focus", id));
+    });
+
+    const handleClickEditor = () => {
+      enableEditor.value = true;
+      nextTick(() => ctx.emit("select", props.note.id));
+    };
+    const handleClickOutsideEditor = () => {
+      enableEditor.value = false;
+      // save the note
+      if (!notSelected) {
+        // quill would turn `ops` from array to indexes object, turn it back to array
+        const content = !editorContent.value
+          ? ""
+          : {
+              ops: Object.values(editorContent.value?.ops || {}),
+            };
+        ctx.emit("update-note-note", {
+          id: props.note.id,
+          content: content,
+        });
+      }
+      ctx.emit("select", "");
+    };
+
+    return {
+      dayjs,
+      colorBarStyle,
+      notSelected,
+
+      noteLink,
+      handleCopy,
+      handleOpenLink,
+
+      handleDeleteNote,
+
+      getNoteTagItemStyle,
+      tags,
+      handleOpenTagBook,
+
+      enableEditor,
+      editorToolbar,
+      editorContent,
+      editorDom,
+      handleClickEditor,
+      handleClickOutsideEditor,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.note-wrapper {
+  padding: 16px;
+  background: white;
+  box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.1);
+  margin-bottom: 38px;
+  border-radius: 6px 6px 8px 8px;
+  position: relative;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  .note-delete-icon {
+    position: absolute;
+    top: 0px;
+    right: 15px;
+    cursor: pointer;
+    padding: 5px;
+  }
+
+  .note-link {
+    font-size: 12px;
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 400px;
+    color: #409eff;
+    cursor: pointer;
+  }
+
+  .note-opers {
+    font-size: 12px;
+    color: #666;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0;
+
+    .note-tag-wrapper {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 300px;
+      position: relative;
+
+      .note-tag-adder {
+        cursor: pointer;
+        user-select: none;
+      }
+      .note-tag-item {
+        margin: 2px 10px 2px 0;
+        cursor: pointer;
+      }
+    }
+    .note-time {
+      text-align: right;
+      user-select: none;
+    }
+  }
+
+  .note-content {
+    margin: 10px 0;
+    font-size: 14px;
+    font-weight: 400;
+    white-space: pre-wrap;
+  }
+
+  .note-editor {
+    background-color: #eee;
+  }
+  .note-editor__readonly {
+    > :first-child {
+      display: none;
+    }
+    > :nth-child(2) {
+      border-top: solid 1px #d1d5db;
+      border-radius: 5px;
+    }
+  }
+  .note-editor__edit {
+    > :first-child {
+      display: flex;
+    }
+    > :nth-child(2) {
+      border-top: none;
+    }
+  }
+}
+.note-wrapper__notselected {
+  opacity: 0.5;
+}
+.note-link-opers {
+  padding: 5px 0px;
+  cursor: pointer;
+}
+.note-link-oper {
+  margin-right: 10px;
+  color: #0077cc;
+  &:hover {
+    color: #0095ff;
+  }
+}
+</style>
diff --git a/src/content-scripts/renderer/popup/tag-book/index.vue b/src/content-scripts/renderer/popup/tag-book/index.vue
new file mode 100644
index 0000000..00ba0a3
--- /dev/null
+++ b/src/content-scripts/renderer/popup/tag-book/index.vue
@@ -0,0 +1,191 @@
+<template>
+  <div v-clickoutside="handleClickOutside" class="tag-book-wrapper" :style="tagBookStyle">
+    <TagSearcher
+      :tags="tagsWithSelect"
+      @onSearch="handleSearchTags"
+      @onEnter="handleCreateTag"
+    ></TagSearcher>
+    <TagSelector
+      :tags="tagsWithSelect"
+      :searchText="searchText"
+      :searchTags="searchTags"
+      @onSelect="handleSelectTagItem"
+    ></TagSelector>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, inject, ref, computed, watch } from "vue";
+import dayjs from "dayjs";
+import randomColor from "randomcolor";
+
+import { Coor } from "@/types/common";
+import { Tag } from "@/types/tag";
+import { Storage } from "@/types/storage";
+import mitt from "@/utils/mitt";
+import { addItemToArr, addItemToArrProperty, delItemFromArr, delItemFromArrProperty } from "@/utils/storage";
+import { StorageKeys } from "@/utils/constant";
+import TagSelector from "./tag-selector/index.vue";
+import TagSearcher from "./tag-searcher.vue";
+
+export default {
+  props: {
+    noteId: {
+      type: Object as PropType<string>,
+      required: true,
+    },
+    coor: {
+      type: Object as PropType<Coor>,
+      default: {
+        x: 0,
+        y: 0,
+      },
+    },
+  },
+  components: {
+    TagSearcher,
+    TagSelector,
+  },
+  setup(props, ctx) {
+    const TAG_BOOK_WIDTH = 400;
+    const TAG_BOOK_HEIGHT = 400;
+    const TAG_BOOK_MARGIN = 20;
+
+    /// tag book modal
+    const tagBookStyle = ref<{ [key: string]: any }>({
+      width: `${TAG_BOOK_WIDTH}px`,
+      height: `${TAG_BOOK_HEIGHT}px`,
+      minHeight: `${TAG_BOOK_HEIGHT}px`,
+    });
+    watch(
+      () => props.coor,
+      () => {
+        let { x = 0, y = 0 } = props.coor;
+        // compare y + `TAG_BOOK_HEIGHT` + `TAG_BOOK_MARGIN` with browser height, adjust if overflow
+        const wh = window.outerHeight;
+        if (y + TAG_BOOK_HEIGHT + TAG_BOOK_MARGIN * 2 > wh) {
+          y = y - TAG_BOOK_MARGIN - TAG_BOOK_HEIGHT;
+        } else {
+          y = y + TAG_BOOK_MARGIN;
+        }
+
+        tagBookStyle.value = {
+          ...tagBookStyle.value,
+          left: `${x}px`,
+          top: `${y}px`,
+        };
+      },
+      {
+        deep: true,
+      }
+    );
+    const handleClickOutside = () => {
+      ctx.emit("close");
+    };
+
+    const storage: Storage = inject("storage", {
+      notes: [],
+      tags: []
+    });
+    /// mark tags with this noteId to `isSelect`
+    const tagsWithSelect = computed(() => {
+      return storage.tags.map((tag) => ({
+        ...tag,
+        isSelect: tag.noteIds.includes(props.noteId),
+      }));
+    })
+
+    /// search tag
+    const searchText = ref("");
+    const searchTags = ref<Tag[]>([]);
+    const handleSearchTags = ({ text = "", result = [] }) => {
+      searchText.value = text;
+      searchTags.value = result;
+    };
+
+    /// create tag
+    const handleCreateTag = async (tagName: string) => {
+      // update tags db
+      storage.tags = await addItemToArr(StorageKeys.tags, {
+        id: tagName,
+        name: tagName,
+        noteIds: [props.noteId],
+        color: randomColor(),
+        updateTime: dayjs().unix(),
+      });
+
+      // update note tags
+      mitt.emit("update-note-tag", {
+        noteId: props.noteId,
+        tag: tagName,
+        isAddOrDelete: true,
+      });
+    };
+    /// select tag
+    const handleSelectTagItem = async (tag: Tag) => {
+      if (tag.isCreating) {
+        mitt.emit("tag-complete-search");
+        tag.isSelect = true;
+      } else {
+        tag.isSelect = !tag.isSelect;
+        if (tag.isSelect) {
+          mitt.emit("update-note-tag", {
+            noteId: props.noteId,
+            tag: tag.name,
+            isAddOrDelete: true,
+          });
+          storage.tags = await addItemToArrProperty(StorageKeys.tags, "id", tag.id, "noteIds", props.noteId);
+        } else {
+          mitt.emit("update-note-tag", {
+            noteId: props.noteId,
+            tag: tag.name,
+            isAddOrDelete: false,
+          });
+          storage.tags = await delItemFromArrProperty(StorageKeys.tags, "id", tag.id, "noteIds", props.noteId);
+          // if tag's noteIds is empty, delete this tag
+          const newTag = storage.tags.find(t => t.id === tag?.id);
+          if (newTag?.noteIds.length === 0) {
+            storage.tags = await delItemFromArr(StorageKeys.tags, tag.id, "id");
+          }
+        }
+      }
+    };
+
+    return {
+      tagBookStyle,
+      handleClickOutside,
+
+      tagsWithSelect,
+      searchText,
+      searchTags,
+      handleSearchTags,
+
+      handleCreateTag,
+
+      handleSelectTagItem,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.tag-book-wrapper {
+  position: fixed;
+  z-index: 10000; /* should be higher than extension mask z-index */
+  overflow-y: scroll;
+  background-color: #fff;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  box-shadow: rgb(14 30 62 / 8%) 0px 3px 6px 0px;
+}
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  background: #aaa;
+}
+</style>
diff --git a/src/content-scripts/renderer/popup/tag-book/tag-searcher.vue b/src/content-scripts/renderer/popup/tag-book/tag-searcher.vue
new file mode 100644
index 0000000..b7841d5
--- /dev/null
+++ b/src/content-scripts/renderer/popup/tag-book/tag-searcher.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="tag-searcher-wrapper">
+    <el-input
+      v-model="searchText"
+      size="mini"
+      placeholder="create or search tag.."
+      @keydown.enter="handleEnter"
+    ></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, ref, watch } from "vue";
+import { Tag } from "@/types/tag";
+import mitt from "@/utils/mitt";
+import { filterBySearchText } from "@/utils/search-filter";
+export default {
+  props: {
+    tags: {
+      type: Object as PropType<Tag[]>,
+      default: [],
+    },
+  },
+  setup(props, ctx) {
+    const searchText = ref("");
+    watch(
+      () => searchText.value,
+      (val) => {
+        const searchTags = filterBySearchText(props.tags, "name", val);
+        ctx.emit("on-search", {
+          text: searchText.value,
+          result: searchTags,
+        });
+      }
+    );
+    const handleEnter = () => {
+      if (!searchText.value) return;
+
+      ctx.emit("on-enter", searchText.value);
+      searchText.value = "";
+    };
+    mitt.on("tag-complete-search", () => {
+      handleEnter();
+    });
+
+    return {
+      searchText,
+      handleEnter,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tag-searcher-wrapper {
+  border-top: #646cff80 solid 20px;
+  padding: 20px 20px;
+}
+</style>
diff --git a/src/content-scripts/renderer/popup/tag-book/tag-selector/index.vue b/src/content-scripts/renderer/popup/tag-book/tag-selector/index.vue
new file mode 100644
index 0000000..0c18338
--- /dev/null
+++ b/src/content-scripts/renderer/popup/tag-book/tag-selector/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <!-- show when not searching -->
+  <template v-if="searchText">
+    <TagList title="" :tags="optionalTags"></TagList>
+  </template>
+  <!-- show when searching -->
+  <template v-else>
+    <!-- recent use tags -->
+    <TagList
+      title="Recent Used"
+      :tags="recentTags"
+      @onSelect="(tag) => $emit('on-select', tag)"
+    ></TagList>
+    <!-- A-Z order tags -->
+    <TagList
+      v-for="key of Object.keys(allTagsMap).sort((a, b) => (a < b ? -1 : 1))"
+      :key="key"
+      :title="`${key === '_' ? 'Others' : key} (${(allTagsMap[key] || []).length})`"
+      :tags="allTagsMap[key] || []"
+      @onSelect="(tag) => $emit('on-select', tag)"
+    ></TagList>
+  </template>
+</template>
+
+<script lang="ts">
+import { PropType, ref, computed, watch } from "vue";
+import dayjs from "dayjs";
+import randomColor from "randomcolor";
+import { transArrInfoLetterMap } from "@/utils/letter-map";
+import { Tag } from "@/types/tag";
+import TagList from "./tag-list.vue";
+export default {
+  components: {
+    TagList,
+  },
+  props: {
+    tags: {
+      type: Object as PropType<Tag[]>,
+      default: [],
+    },
+    searchText: {
+      type: Object as PropType<string>,
+      default: "",
+    },
+    searchTags: {
+      type: Object as PropType<Tag[]>,
+      default: [],
+    },
+  },
+  setup(props) {
+    // recently used tags
+    const recentTags = computed(() => props.tags);
+    // show the tags in alphabetical order
+    const allTagsMap = computed(() => transArrInfoLetterMap(props.tags, "name"));
+
+    // watch and create the optinal tags
+    const optionalTags = ref<Tag[]>([]);
+    watch(
+      () => props.searchText,
+      (val) => {
+        if (val) {
+          const newTag: Tag | null = props.searchTags.find((tag) => tag.id === val)
+            ? null
+            : {
+                id: val,
+                name: `Create # ${val} tag`,
+                color: randomColor(),
+                updateTime: dayjs().unix(),
+                noteIds: [],
+                isCreating: true,
+              };
+          optionalTags.value = props.searchTags;
+          if (newTag) {
+            optionalTags.value.unshift(newTag);
+          }
+        }
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    return {
+      recentTags,
+      allTagsMap,
+      optionalTags,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/content-scripts/renderer/popup/tag-book/tag-selector/tag-list.vue b/src/content-scripts/renderer/popup/tag-book/tag-selector/tag-list.vue
new file mode 100644
index 0000000..c74ebcf
--- /dev/null
+++ b/src/content-scripts/renderer/popup/tag-book/tag-selector/tag-list.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="tag-list-wrapper">
+    <div class="tag-list-title">{{ title }}</div>
+    <div class="tag-list-content">
+      <el-tag
+        v-for="tag in tags"
+        :key="tag.id"
+        size="small"
+        type="info"
+        class="tag-item"
+        :class="{ 'tag-item-selected': tag.isSelect }"
+        @click="handleSelectTagItem(tag)"
+      >
+        <div class="tag-item-content">
+          <el-icon v-if="tag.isSelect" :size="12"><Check /></el-icon>
+          {{ tag.name }}
+        </div>
+      </el-tag>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType } from "vue";
+import { Check } from "@element-plus/icons";
+import { Tag } from "@/types/tag";
+export default {
+  components: {
+    Check,
+  },
+  props: {
+    title: {
+      type: Object as PropType<string>,
+      default: "",
+    },
+    tags: {
+      type: Object as PropType<Tag[]>,
+      default: [],
+    },
+  },
+  setup(props, ctx) {
+    const handleSelectTagItem = (tag: Tag) => {
+      ctx.emit("on-select", tag);
+    };
+
+    return {
+      handleSelectTagItem,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tag-list-wrapper {
+  padding: 5px 20px 0 20px;
+  font-size: 12px;
+
+  .tag-list-title {
+    text-align: left;
+    font-weight: bold;
+    user-select: none;
+  }
+  .tag-list-content {
+    padding: 5px 0;
+    display: flex;
+    flex-wrap: wrap;
+    .tag-item {
+      cursor: pointer;
+      user-select: none;
+      margin: 0 10px 10px 0;
+      color: #000;
+    }
+    .tag-item-selected {
+      color: rgb(25, 65, 197);
+      background-color: rgb(180, 203, 245);
+    }
+    .tag-item-content {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>