Merge pull request #35 from betterRunner/dev

Dev

Author: betterRunner

CHANGELOG.md

@@ -1,3 +1,23 @@
+## [1.3.5](https://github.com/betterRunner/context-note/compare/v1.3.2...v1.3.5) (2021-11-16)
+
+
+### Bug Fixes
+
+* clear search text when tag-searcher close ([56b0f2b](https://github.com/betterRunner/context-note/commit/56b0f2b2e78984a6691f5c8003b8779cd2b539be))
+* close button ([a2f46fd](https://github.com/betterRunner/context-note/commit/a2f46fd45ab62df661c3ee1335a4855e4e23caed))
+* handleClickOutsideEditor trigger bug ([045c6c8](https://github.com/betterRunner/context-note/commit/045c6c8c8f352928a0156f861560d2acd10f9624))
+* hightlight rects not occupying click event ([f0d4e07](https://github.com/betterRunner/context-note/commit/f0d4e07b3b7af6346cb4c59728b78b757a41a730))
+* more button top ([4032321](https://github.com/betterRunner/context-note/commit/40323213559fca34ea12d4fac55f8fc72f2a8c8c))
+* tag & more css ([b88539f](https://github.com/betterRunner/context-note/commit/b88539fc2a1790ab1c59c3b946a1c8ec0c64b732))
+* wait to run storage oper until prev one finished ([64e3806](https://github.com/betterRunner/context-note/commit/64e38062388e533048507ac34bbeb0ba50e9c5f5))
+
+
+### Features
+
+* copy note to clipboard ([403f7f7](https://github.com/betterRunner/context-note/commit/403f7f7460f1ce9ad086ae9477cc7f2a0acb7007))
+
+
+
 ## [1.3.4](https://github.com/betterRunner/context-note/compare/v1.3.2...v1.3.4) (2021-11-07)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "context-note",
-    "version": "1.3.4",
+    "version": "1.3.5",
     "scripts": {
         "dev": "vite build --mode developmemnt",
         "build": "vite build",

src/content-scripts/main.css

@@ -2,6 +2,7 @@ body {}
 
 /* Rewrite el-popper and el-overlay z-index, should be higher than extension mask z-index */
 .el-popper, .el-overlay {
+  padding: 5px !important;
   z-index: 10001 !important;
 }
 

src/content-scripts/renderer/dom/rect.ts

@@ -5,9 +5,11 @@ import {
   PREFIX_RECT,
   PREFIX_RECT_GROUP,
 } from "@/utils/constant";
+import { EnumValueVisiteeWithNull } from "ts-enum-util";
 
 function setHighlightStyle(ele: HTMLElement, rect: Rect) {
   const PADDING = 6;
+  ele.style.pointerEvents = "none"; // not occupy the click event of the node in this position
   ele.style.position = "absolute";
   ele.style.left = rect.x - PADDING / 2 + "px";
   ele.style.top = rect.y - PADDING / 2 + "px";
@@ -43,7 +45,7 @@ function setRectStyleWithIds(ids: string[], key: string, value: string) {
 }
 
 const groupRectIdsMap: { [key: string]: string[] } = {};
-/** 
+/**
  * Generate the highlight rect doms and register their click event.
  */
 export function genHighlightRects(
@@ -65,8 +67,11 @@ export function genHighlightRects(
 
     // click event
     document.addEventListener("mouseup", (event) => {
-      const withinBoundaries = event.composedPath().includes(ele);
-
+      const withinBoundaries =
+        event.pageX >= ele.offsetLeft &&
+        event.pageX <= ele.offsetWidth + ele.offsetLeft &&
+        event.pageY >= ele.offsetTop &&
+        event.pageY <= ele.offsetHeight + ele.offsetTop;
       if (withinBoundaries) {
         const groupId = boldHighlightGroupRects(ele?.id, "");
         clickCb?.(groupId);
@@ -78,15 +83,17 @@ export function genHighlightRects(
   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 query = !noteId
+    ? `[${DOMATTR_RECT_GROUP}]`
+    : `[${DOMATTR_RECT_GROUP}=${noteId}]`;
   const rectDoms = document.querySelectorAll(query);
-  rectDoms.forEach(dom => {
+  rectDoms.forEach((dom) => {
     dom.parentElement?.removeChild(dom);
-  })
+  });
 }
 
 /**

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

@@ -1,6 +1,7 @@
 <template>
   <div v-show="visible">
     <div class="popup-wrapper" :style="wrapperStyle">
+      <el-icon class="popup-close" @click="handleClose"><Close /></el-icon>
       <NoteBook :expanded="appExpanded" v-clickoutside="handleClickOutside" />
       <Footer :width="appWidth" />
     </div>
@@ -9,6 +10,7 @@
 
 <script lang="ts">
 import { defineComponent, provide, ref, reactive, computed } from "vue";
+import { Close } from "@element-plus/icons";
 import NoteBook from "./note-book/index.vue";
 import Footer from "./footer/index.vue";
 import { Note } from "@/types/note";
@@ -20,6 +22,7 @@ import { StorageKeys, AppWidth } from "@/utils/constant";
 
 export default defineComponent({
   components: {
+    Close,
     NoteBook,
     Footer,
   },
@@ -44,6 +47,9 @@ export default defineComponent({
     const handleClickOutside = () => {
       visible.value = false;
     };
+    const handleClose = () => {
+       visible.value = false;
+    }
 
     // global reading `notes` and `tags` from storage and provide to sub components.
     const storage = reactive<Storage>({
@@ -72,6 +78,7 @@ export default defineComponent({
       wrapperStyle,
       visible,
       handleClickOutside,
+      handleClose,
     };
   },
 });
@@ -90,5 +97,12 @@ export default defineComponent({
   opacity: 1;
   border-radius: 10px;
   z-index: 9999;
+
+  .popup-close {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    cursor: pointer;
+  }
 }
 </style>

src/content-scripts/renderer/popup/note-book/note-list.vue

@@ -138,6 +138,8 @@ export default defineComponent({
       const { noteId = "", tag = "", isAddOrDelete = false } = data as any;
       const fn = isAddOrDelete ? addItemToArrProperty : delItemFromArrProperty;
       storage.notes = await fn(StorageKeys.notes, "id", noteId, "tags", tag);
+
+      mitt.emit("update-note-tag-cb");
     });
 
     /// update note of note

src/content-scripts/renderer/popup/note-book/note.vue

@@ -353,7 +353,7 @@ export default {
 }
 .note-more-opers {
   position: absolute;
-  top: 10px;
+  top: 5px;
   right: 10px;
   cursor: pointer;
   padding: 5px;

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

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

src/content-scripts/renderer/popup/tag-book/index.vue

@@ -22,7 +22,7 @@ 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 mitt, { sendEmitAndWait } from "@/utils/mitt";
 import {
   addItemToArr,
   addItemToArrProperty,
@@ -91,6 +91,7 @@ export default {
     );
     const handleClickOutside = () => {
       ctx.emit("close");
+      mitt.emit('tag-search-clear');
     };
 
     const storage: Storage = inject("storage", {
@@ -149,7 +150,7 @@ export default {
       } else {
         tag.isSelect = !tag.isSelect;
         if (tag.isSelect) {
-          mitt.emit("update-note-tag", {
+          await sendEmitAndWait("update-note-tag", {
             noteId: props.noteId,
             tag: tag.name,
             isAddOrDelete: true,
@@ -162,7 +163,7 @@ export default {
             props.noteId
           );
         } else {
-          mitt.emit("update-note-tag", {
+          await sendEmitAndWait("update-note-tag", {
             noteId: props.noteId,
             tag: tag.name,
             isAddOrDelete: false,

src/content-scripts/renderer/popup/tag-book/tag-searcher.vue

@@ -36,6 +36,9 @@ export default {
       }
     );
     const taginput = ref(null);
+    mitt.on('tag-search-clear', () => {
+      searchText.value = "";
+    })
     mitt.on('tag-search-focus', () => {
       (taginput.value as unknown as HTMLElement)?.focus();
     })

src/content-scripts/renderer/popup/tag-book/tag-selector/tag-list.vue

@@ -12,7 +12,7 @@
         @click="handleSelectTagItem(tag)"
       >
         <div class="tag-item-content">
-          <el-icon v-if="tag.isSelect" :size="12"><Check /></el-icon>
+          <el-icon class="tag-item-icon" v-if="tag.isSelect" :size="12"><Check /></el-icon>
           {{ tag.name }}
         </div>
       </el-tag>
@@ -77,6 +77,10 @@ export default {
     .tag-item-content {
       display: flex;
       align-items: center;
+      .tag-item-icon {
+        top: 0 !important;
+        right: 0 !important;
+      }
     }
   }
 }

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "context-note",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "manifest_version": 3,
   "action": {
     "default_icon": {