WIP: [feat] add highlight comment

packages/client/package.json

@@ -122,7 +122,8 @@
     "@vueuse/core": "^9.13.0",
     "autosize": "^6.0.1",
     "marked": "^4.3.0",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "web-highlighter": "^0.7.4"
   },
   "devDependencies": {
     "@babel/core": "7.21.4",

packages/client/src/components/HightComment.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>Hello</div>
+
+  <Teleport to="article">
+    <div
+      v-show="overlayPos.visible"
+      class="wl-cthl-overlay-wrapper"
+      :style="{ left: overlayPos.x + 'px', top: overlayPos.y + 'px' }"
+    >
+      <div class="wl-cthl-menu-item" @click="handleHighlightComment">
+        <CommentOutlinedIcon />
+      </div>
+    </div>
+  </Teleport>
+
+  <Teleport to="body">
+    <div v-if="!showModal" class="wl-cthl-modal">
+      <div class="wl-cthl-modal_header">
+        <div class="wl-cthl-modal_title">Comment</div>
+        <div class="wl-cthl-modal_close" @click="handleHighlightComment">×</div>
+      </div>
+      <div class="wl-cthl-modal_body">
+        <div class="wl-cards">
+          <CommentCard
+            v-for="comment in data"
+            :key="comment.objectId"
+            :root-id="comment.objectId"
+            :comment="comment"
+            :reply="reply"
+            :edit="edit"
+            @log="refresh"
+            @reply="onReply"
+            @edit="onEdit"
+            @submit="onSubmit"
+            @status="onStatusChange"
+            @delete="onDelete"
+            @sticky="onSticky"
+            @like="onLike"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Highlighter from 'web-highlighter';
+
+import CommentCard from './CommentCard.vue';
+import { CommentOutlinedIcon } from './icons';
+import { WalineComment } from '../typings';
+
+interface OverlayPos {
+  x: number;
+  y: number;
+  visible: boolean;
+}
+
+const overlayPos = ref<OverlayPos>({ x: 0, y: 0, visible: false });
+const showModal = ref<boolean>(false);
+const data = ref<WalineComment[]>();
+
+const highlighter = new Highlighter({
+  $root: document.querySelector('article') || document.documentElement,
+  style: {
+    className: 'wl-comment-highlight',
+  },
+});
+
+// highlighter.on(Highlighter.event.CREATE, function (data, inst, e) {
+//   console.log(data, inst, e);
+// });
+
+// highlighter.run();
+
+
+function handleHighlightComment() {
+  showModal.value = !showModal.value;
+}
+
+document.addEventListener('selectionchange', function (e) {
+  const range = window.getSelection()?.getRangeAt(0);
+
+  if (!range) {
+    setTimeout(() => {
+      overlayPos.value = { x: 0, y: 0, visible: false };
+    }, 100);
+
+    return;
+  }
+
+  const rects = Array.from(range?.getClientRects() || []);
+  const text = range.toString();
+
+  if (!rects?.length || !text) {
+    setTimeout(() => {
+      overlayPos.value = { x: 0, y: 0, visible: false };
+    }, 100);
+
+    return;
+  }
+
+  const rect = rects[0];
+
+  overlayPos.value = {
+    x: rect.x + rect.width / 2,
+    y: (document.scrollingElement?.scrollTop || 0) + rect.y - 52,
+    visible: true,
+  };
+});
+</script>

packages/client/src/components/Icons.ts

@@ -179,3 +179,22 @@ export const GifIcon: FunctionalComponent = () =>
       }),
     ]
   );
+
+export const CommentOutlinedIcon: FunctionalComponent = () =>
+  h(
+    'svg',
+    {
+      width: 24,
+      height: 24,
+      fill: 'currentcolor',
+      viewBox: '0 0 24 24',
+    },
+    [
+      h('path', {
+        d: 'M7 11a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z'
+      }),
+      h('path', {
+        d: 'M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v11.5a2 2 0 0 1-2 2h-3.812a.5.5 0 0 0-.33.124l-2.541 2.224a2 2 0 0 1-2.634 0l-2.542-2.224a.5.5 0 0 0-.329-.124H4a2 2 0 0 1-2-2V5Zm2 0v11.5h3.812a2.5 2.5 0 0 1 1.646.619L12 19.343l2.542-2.224a2.5 2.5 0 0 1 1.646-.619H20V5H4Z'
+      }),
+    ]
+  );

packages/client/src/components/WalineComment.vue

@@ -81,6 +81,8 @@
       v{{ version }}
     </div>
   </div>
+
+  <HightComment></HightComment>
 </template>
 
 <script setup lang="ts">
@@ -94,6 +96,7 @@ import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue';
 import Reaction from './ArticleReaction.vue';
 import CommentBox from './CommentBox.vue';
 import CommentCard from './CommentCard.vue';
+import HightComment from './HightComment.vue';
 import { LoadingIcon } from './Icons.js';
 import { deleteComment, getComment, updateComment } from '../api/index.js';
 import { useUserInfo, useLikeStorage } from '../composables/index.js';
@@ -185,6 +188,7 @@ const getCommentData = (pageNumber: number): void => {
     .then((resp) => {
       status.value = 'success';
       count.value = resp.count;
+      console.log(resp.data);
       data.value.push(...resp.data);
       page.value = pageNumber;
       totalPages.value = resp.totalPages;

packages/client/src/styles/highlight-comment.scss

@@ -0,0 +1,114 @@
+.wl-comment-highlight {
+  padding-bottom:2px;
+  border-bottom:2px solid #f8e6ab;
+}
+
+.wl-cthl-overlay-wrapper {
+  display: inline-block;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 8px rgba(31,35,41,0.1);
+  border-radius: 6px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  border: 1px solid rgb(222,224,227);
+  padding: 8px;
+  position: absolute;
+  background: #FFF;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.wl-cthl-menu-item {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background: rgba(31,35,41,.1);
+  }
+}
+
+.wl-cthl-modal {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 294px;
+  min-height: 100%;
+  border-left: 1px solid #dee0e3;
+  z-index: 1;
+  background-color: #FFF;
+  transition: transform 0.3s ease 0s;
+  visibility: visible;
+  transform: translateX(0px);
+  display: block;
+
+  &_header {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 40px;
+    padding: 8px 16px;
+    position: sticky;
+    top: 0px;
+    border-style: solid;
+    border-width: 0px 0px 1px;
+    border-color: #dee0e3;
+    transform: translateZ(1px);
+    user-select: none;
+    box-sizing: border-box;
+    background-color: #FFF;
+    z-index: 1;
+  }
+
+  &_close {
+    padding: 0 10px;
+    cursor: pointer;
+  }
+
+
+  &_body {
+    padding: 12px 12px 96px 12px;
+  }
+
+  & .wl-user,
+  & .wl-badge,
+  & .wl-meta,
+  & .wl-comment-actions {
+    display: none !important;
+  }
+
+  & .wl-quotes {
+    border-inline-start: none !important;
+  }
+
+  & .wl-card {
+    border: none !important;
+  }
+
+  & .wl-content {
+    margin-bottom: 0;
+    padding-top: 0;
+  }
+
+  & .wl-cards > .wl-card-item {
+    line-height: 1.5;
+    border-radius: 6px;
+    background-color: #FFF;
+    border: 1px solid #dee0e3;
+    cursor: pointer;
+
+    & + .wl-card-item {
+      margin-top: 15px;
+    }
+  }
+}

packages/client/src/styles/index.scss

@@ -10,3 +10,4 @@
 @use 'highlight';
 @use 'recent';
 @use 'user-list';
+@use 'highlight-comment';