chore: make editor sticky

web/src/components/MemoCardDialog.tsx

@@ -35,8 +35,12 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
         const matchedArr = [...memo.content.matchAll(MEMO_LINK_REG)];
         for (const matchRes of matchedArr) {
           if (matchRes && matchRes.length === 3) {
-            const id = matchRes[2];
-            const memoTemp = memoService.getMemoById(Number(id));
+            const id = Number(matchRes[2]);
+            if (id === memo.id) {
+              continue;
+            }
+
+            const memoTemp = memoService.getMemoById(id);
             if (memoTemp) {
               linkMemos.push({
                 ...memoTemp,
@@ -51,6 +55,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
         const linkedMemos = await memoService.getLinkedMemos(memo.id);
         setLinkedMemos(
           linkedMemos
+            .filter((m) => m.rowStatus === "NORMAL" && m.id !== memo.id)
             .sort((a, b) => utils.getTimeStampByDate(b.createdTs) - utils.getTimeStampByDate(a.createdTs))
             .map((m) => ({
               ...m,

web/src/less/editor.less

@@ -9,7 +9,6 @@
     min-height: 40px;
     max-height: 300px;
     .pretty-scroll-bar(2px, 0);
-    z-index: 1;
 
     &::placeholder {
       padding-left: 2px;
@@ -49,7 +48,7 @@
           }
 
           > .tag-list {
-            @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-10 rounded w-32 max-h-52 overflow-auto bg-black;
+            @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-32 max-h-52 overflow-auto bg-black;
 
             > span {
               @apply w-full text-white cursor-pointer rounded text-sm leading-6 px-2 hover:bg-gray-700;

web/src/less/home.less

@@ -1,19 +1,23 @@
 @import "./mixin.less";
 
 .page-wrapper.home {
-  @apply relative top-0 w-full h-screen overflow-y-auto;
+  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
   background-color: #f6f5f4;
 
   > .page-container {
-    @apply relative w-full min-h-screen mx-auto flex flex-row justify-center items-start;
+    @apply relative w-full min-h-screen mx-auto flex flex-row justify-start sm:justify-center items-start;
 
-    >.sidebar-wrapper{
+    > .sidebar-wrapper {
       @apply flex-shrink-0;
     }
 
     > .memos-wrapper {
-      @apply relative w-full max-w-2xl min-h-full overflow-x-hidden flex flex-col justify-start items-start px-4 sm:pr-6;
+      @apply relative w-full max-w-2xl min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
 
+      > .memos-editor-wrapper {
+        @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-1;
+        background-color: #f6f5f4;
+      }
     }
   }
 }

web/src/less/memo.less

@@ -23,7 +23,7 @@
       @apply flex flex-row justify-end items-center relative flex-shrink-0;
 
       > .more-action-btns-wrapper {
-        @apply hidden flex-col justify-start items-center absolute top-2 -right-4 z-10 flex-nowrap hover:flex p-3;
+        @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
 
         > .more-action-btns-container {
           @apply w-28 h-auto p-1 whitespace-nowrap rounded-lg bg-white;

web/src/less/memos-header.less

@@ -2,15 +2,13 @@
 
 .section-header-container,
 .memos-header-container {
-  .flex(row, space-between, center);
-  @apply w-full h-10 flex-nowrap mt-4 mb-2 shrink-0;
+  @apply sticky top-4 flex flex-row justify-between items-center w-full h-10 flex-nowrap mt-4 mb-2 shrink-0 z-1;
 
   > .title-container {
     @apply flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden;
 
     > .action-btn {
-      @apply flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0;
-      background-color: unset;
+      @apply flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent;
 
       > .icon-img {
         @apply w-5 h-auto;
@@ -18,12 +16,11 @@
     }
 
     > .title-text {
-      @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden;
-      color: @text-black;
+      @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700;
     }
   }
 
   > .btns-container {
-    .flex(row, flex-end, center);
+    @apply flex flex-row justify-end items-center;
   }
 }

web/src/less/preview-image-dialog.less

@@ -20,12 +20,12 @@
     }
 
     > .img-container {
-      @apply w-full h-full flex flex-col justify-center items-center;
+      @apply w-full h-full p-4 flex flex-col justify-center items-center;
       background-color: unset;
       .hide-scroll-bar();
 
       > img {
-        @apply h-auto w-auto max-w-full max-h-full p-4;
+        @apply h-auto w-auto max-w-full max-h-full shadow;
       }
     }
   }

web/src/less/share-memo-image-dialog.less

@@ -40,8 +40,7 @@
         @apply w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start;
 
         > .memo-shortcut-img {
-          @apply absolute top-0 left-0 w-full h-auto rounded-b-lg;
-          z-index: 1;
+          @apply absolute top-0 left-0 w-full h-auto rounded-b-lg z-10;
         }
 
         > .time-text {

web/src/less/shortcut-list.less

@@ -83,7 +83,7 @@
         }
 
         > .action-btns-wrapper {
-          @apply flex-col justify-start items-start absolute top-6 right-0 w-auto h-auto px-4 pt-3 hidden z-10;
+          @apply flex-col justify-start items-start absolute top-6 right-0 w-auto h-auto px-4 pt-3 hidden z-1;
 
           > .action-btns-container {
             @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white shadow;

web/src/pages/Home.tsx

@@ -37,9 +37,11 @@ function Home() {
         <div className="page-container">
           <Sidebar />
           <main className="memos-wrapper">
-            <MemosHeader />
-            <MemoEditor />
-            <MemoFilter />
+            <div className="memos-editor-wrapper">
+              <MemosHeader />
+              <MemoEditor />
+              <MemoFilter />
+            </div>
             <MemoList />
           </main>
         </div>

web/src/services/memoService.ts

@@ -48,7 +48,8 @@ const memoService = {
 
   getLinkedMemos: async (memoId: MemoId): Promise<Memo[]> => {
     const { memos } = memoService.getState();
-    return memos.filter((m) => m.content.includes(`${memoId}`));
+    const regex = new RegExp(`[@(.+?)](${memoId})`);
+    return memos.filter((m) => m.content.match(regex));
   },
 
   createMemo: async (memoCreate: MemoCreate) => {

web/tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
         180: "45rem",
       },
       zIndex: {
+        1: "1",
         100: "100",
         1000: "1000",
       },