Merge pull request #41 from betterRunner/dev

Dev

Author: betterRunner

CHANGELOG.md

@@ -1,3 +1,34 @@
+## [1.3.7](https://github.com/betterRunner/context-note/compare/v1.2.2...v1.3.7) (2022-01-02)
+
+
+### Bug Fixes
+
+*  put the notes with the current location href to the head. ([81360db](https://github.com/betterRunner/context-note/commit/81360db9c0fcf46e5c98dcec9daf89372775b2fe))
+* 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))
+* close icon ([e9803dc](https://github.com/betterRunner/context-note/commit/e9803dcb2ca44f1a4f813695efaea018daebbdec))
+* css on windows ([4e6f22c](https://github.com/betterRunner/context-note/commit/4e6f22ca5cfd43f25500bf63c78d064e3bbe778e))
+* el-overlay z-index ([7e7b62d](https://github.com/betterRunner/context-note/commit/7e7b62df0dec2d7f0e821426252e92e8a419bba1))
+* 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))
+* keep query of url of note ([12dbe48](https://github.com/betterRunner/context-note/commit/12dbe48095fcf4ebf93a5b5a3b86e839239cfa12))
+* more button top ([4032321](https://github.com/betterRunner/context-note/commit/40323213559fca34ea12d4fac55f8fc72f2a8c8c))
+* note width in expaned mode & clickoutside ([5ae6c6b](https://github.com/betterRunner/context-note/commit/5ae6c6bcbfe63fa945c25ce19f1d9df36a316e8c))
+* padding & scrollbar ([ecedbb7](https://github.com/betterRunner/context-note/commit/ecedbb76d29d0b098bf7bd5995e5b3c41ed7621e))
+* popup is hided in small screen ([0950940](https://github.com/betterRunner/context-note/commit/0950940d7d1d668a22d1289989e03c976ff57710))
+* scrollbar of page disappers ([3f5dc31](https://github.com/betterRunner/context-note/commit/3f5dc319dc0149dbf18863ec2d66ca92ad124752))
+* storage write not working ([bf5827b](https://github.com/betterRunner/context-note/commit/bf5827b56b1f5cc02ac53d37554d85b44d9500ed))
+* 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))
+* import notes ([74857b1](https://github.com/betterRunner/context-note/commit/74857b12d45ba41cd0bb1a6db4823134a419f884))
+
+
+
 ## [1.3.6](https://github.com/betterRunner/context-note/compare/v1.2.2...v1.3.6) (2021-12-25)
 
 

package.json

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

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

@@ -34,7 +34,7 @@ export default defineComponent({
       appWidth.value = e ? AppWidth.expanded : AppWidth.normal;
     });
     const wrapperStyle = computed(() => {
-      const maxWidth = window.innerWidth * 0.8;
+      const maxWidth = window.innerWidth * 0.9;
       const width = appWidth.value > maxWidth ? maxWidth : appWidth.value;
       return {
         width: `${width}px`,

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

@@ -98,11 +98,13 @@ export default defineComponent({
       };
 
       // 1. create the note item
+      const href = window.location.href;
       const note: TNote = {
         id: noteId,
         createTime: dayjs().unix(),
         updateTime: dayjs().unix(),
-        link: removeUrlPostfix(window.location.href),
+        link: removeUrlPostfix(href),
+        rawLink: href,
         linkTitle: window.document.title ?? '',
         content: text,
         rects: rects,
@@ -198,13 +200,14 @@ export default defineComponent({
     };
 
     /// doms
-    const domNoteList = (notes: TNote[]) => {
+    const domNoteList = (notes: TNote[], expanded?: boolean) => {
       return notes.map((note, i) => (
         <Note
           ref={(el: any) => {
             noteDivs.value[i] = el;
           }}
           note={note as TNote}
+          expanded={expanded}
           curNoteId={curNoteId.value}
           onDelete={() => handleDeleteNote(note as TNote)}
           onUpdateNoteNote={handleUpdateNoteNote}
@@ -218,7 +221,7 @@ export default defineComponent({
       const domTag = (title: string = "", notes: TNote[] = []) => (
         <div class="note-list-tag">
           <div class="note-list-tag-title">{title}</div>
-          <div class="note-list-wrap-container">{domNoteList(notes)}</div>
+          <div class="note-list-wrap-container">{domNoteList(notes, true)}</div>
         </div>
       );
       if (tags.length) {
@@ -239,7 +242,7 @@ export default defineComponent({
         return domTags;
       } else {
         return (
-          <div class="note-list-wrap-container">{domNoteList(searchedNotes.value)}</div>
+          <div class="note-list-wrap-container">{domNoteList(searchedNotes.value, true)}</div>
         );
       }
     };

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

@@ -2,8 +2,9 @@
   <div
     class="note-wrapper"
     :class="{ 'note-wrapper__notselected': notSelected }"
-    :style="colorBarStyle"
+    :style="wrapperStyle"
     @click="handleClickNote"
+    v-clickoutside="handleClickOutsideNote"
   >
     <!-- website link -->
     <div :id="`link-${note.id}`" class="note-link">
@@ -75,7 +76,7 @@ import { Storage } from "@/types/storage";
 import { Coor, Oper } from "@/types/common";
 import { Query } from "@/types/dom";
 import mitt from "@/utils/mitt";
-import { wrapUrlWithQuery } from "@/utils/utils";
+import { appendUrlQuery } from "@/utils/utils";
 import TagBook from "../tag-book/index.vue";
 import More from "../shared/more.vue";
 
@@ -94,12 +95,17 @@ export default {
       required: true,
       type: Object as PropType<Note>,
     },
+    expanded: {
+      default: false,
+    },
   },
   setup(props, ctx) {
-    const colorBarStyle = ref({
+    const wrapperStyle = ref({
       borderTop: `8px solid ${randomcolor({
         alpha: 0.5,
       })}`,
+      width: `${props.expanded ? 420 : 460}px`,
+      maxWidth: `${props.expanded ? 420 : 460}px`,
     });
     const storage: Storage = inject("storage", {
       notes: [],
@@ -112,15 +118,12 @@ export default {
     );
 
     /// note link
-    const noteLink = ref(props.note.link || "");
-    const handleCopy = () => {
-      ElMessage.success("Copied");
-    };
     const handleOpenLink = (note: Note) => {
       const query: Query = {
         noteId: note.id,
       };
-      const url = wrapUrlWithQuery(note.link, query);
+      console.log(note.rawLink);
+      const url = appendUrlQuery(note.rawLink, query);
       window.open(url);
     };
 
@@ -136,8 +139,8 @@ export default {
       {
         title: "Copy to clipboard",
         onClick: () => {
-          const { link = '', linkTitle = '', content = '', tags = [] } : Note = props.note;
-          const text = `[${linkTitle || 'unknowned'}](${link})
+          const { rawLink = '', linkTitle = '', content = '', tags = [] } : Note = props.note;
+          const text = `[${linkTitle || 'unknowned'}](${rawLink})
         - ${content}
         ${tags.join(',')}`;
           toClipboard(text);
@@ -206,6 +209,10 @@ export default {
       // make sure the select event is trigger after `handleClickOutsideEditor`
       nextTick(() => ctx.emit("select", props.note.id));
     };
+    const handleClickOutsideNote = () => {
+      // make sure the select event is trigger after `handleClickOutsideEditor`
+      nextTick(() => ctx.emit("select", ""));
+    }
     const handleClickEditor = () => {
       enableEditor.value = true;
     };
@@ -233,11 +240,9 @@ export default {
 
     return {
       dayjs,
-      colorBarStyle,
+      wrapperStyle,
       notSelected,
 
-      noteLink,
-      handleCopy,
       handleOpenLink,
 
       moreOpers,
@@ -251,6 +256,7 @@ export default {
       editorContent,
       editorDom,
       handleClickNote,
+      handleClickOutsideNote,
       handleClickEditor,
       handleClickOutsideEditor,
     };
@@ -270,8 +276,6 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  width: 460px;
-  max-width: 460px;
   box-sizing: border-box !important;
   height: 100%;
 

src/manifest.json

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

src/types/note.ts

@@ -6,6 +6,7 @@ export interface Note {
   createTime: number;
   updateTime: number;
   link: string;
+  rawLink: string;
   linkTitle: string;
   content: string;
   tags: string[];

src/utils/utils.ts

@@ -1,29 +1,45 @@
+import appendQuery from 'append-query';
+
 export const isObject = (obj: any) => {
-  return typeof obj === "object" && obj !== null;
-};
+  return typeof obj === 'object' && obj !== null
+}
 
-export const getObjectType = (obj: any) => Object.prototype.toString.call(obj);
+export const getObjectType = (obj: any) => Object.prototype.toString.call(obj)
 
 export const removeUrlPostfix = (url: string) => {
-  let res = url.split("?")?.[0] ?? "";
-  res = res.split("#")?.[0] ?? "";
-  return res;
-};
+  let res = url.split('?')?.[0] ?? ''
+  res = res.split('#')?.[0] ?? ''
+  return res
+}
 
 export const getUrlQuery = (url: string) => {
-  const queryStr = url.split("?")?.[1] ?? "";
+  const queryStr = url.split('?')?.[1] ?? ''
   const res = Object.fromEntries(
-    queryStr.split("&").map((part) => {
-      return part.split("=");
+    queryStr.split('&').map((part) => {
+      return part.split('=')
     })
-  );
-  return res;
-};
+  )
+  return res
+}
+
+// export const appendUrlQuery = (
+//   url: string,
+//   query: { [key: string]: any }
+// ) => {
+//   return appendQuery(url, query)
+// }
 
-export const wrapUrlWithQuery = (
-  url: string,
-  query: { [key: string]: any }
-) => {
-  if (!query || Object.keys(query).length === 0) return url;
-  return `${url}?${Object.entries(query).map(e => e.join('=')).join('&')}`;
-};
+export const appendUrlQuery = (
+  baseUrl: string,
+  params: Record<string, any>
+): string => {
+  const Url = new URL(baseUrl);
+  const urlParams: URLSearchParams = new URLSearchParams(Url.search);
+  for (const key in params) {
+    if (params[key] !== undefined) {
+      urlParams.set(key, params[key]);
+    }
+  }
+  Url.search = urlParams.toString();
+  return Url.toString();
+};