feat: add Preview with react-pdf-highlighter (#89)

* feat: add selected style to chunk item

* feat: hightlight pdf

* feat: add Preview with react-pdf-highlighter

web/package.json

@@ -28,6 +28,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",
     "react-pdf": "^7.7.1",
+    "react-pdf-highlighter": "^6.1.0",
     "react-string-replace": "^1.1.1",
     "umi": "^4.0.90",
     "umi-request": "^1.4.0",

web/src/less/variable.less

@@ -7,6 +7,7 @@
 @gray8: rgba(165, 163, 169, 1);
 @gray11: rgba(232, 232, 234, 1);
 @purple: rgba(127, 86, 217, 1);
+@selectedBackgroundColor: rgba(239, 248, 255, 1);
 
 @fontSize12: 12px;
 @fontSize14: 14px;

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less

@@ -14,3 +14,7 @@
     font-style: normal;
   }
 }
+
+.cardSelected {
+  background-color: @selectedBackgroundColor;
+}

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -10,6 +10,8 @@ interface IProps {
   switchChunk: (available?: number, chunkIds?: string[]) => void;
   editChunk: (chunkId: string) => void;
   handleCheckboxClick: (chunkId: string, checked: boolean) => void;
+  selected: boolean;
+  clickChunkCard: (chunkId: string) => void;
 }
 
 const ChunkCard = ({
@@ -18,6 +20,8 @@ const ChunkCard = ({
   handleCheckboxClick,
   editChunk,
   switchChunk,
+  selected,
+  clickChunkCard,
 }: IProps) => {
   const available = Number(item.available_int);
   const [enabled, setEnabled] = useState(available === 1);
@@ -31,13 +35,17 @@ const ChunkCard = ({
     handleCheckboxClick(item.chunk_id, e.target.checked);
   };
 
-  const handleContentClick = () => {
+  const handleContentDoubleClick = () => {
     editChunk(item.chunk_id);
   };
 
+  const handleContentClick = () => {
+    clickChunkCard(item.chunk_id);
+  };
+
   return (
     <div>
-      <Card>
+      <Card className={selected ? styles.cardSelected : ''}>
         <Flex gap={'middle'} justify={'space-between'}>
           <Checkbox onChange={handleCheck} checked={checked}></Checkbox>
           {item.img_id && (
@@ -52,7 +60,8 @@ const ChunkCard = ({
           )}
 
           <section
-            onDoubleClick={handleContentClick}
+            onDoubleClick={handleContentDoubleClick}
+            onClick={handleContentClick}
             className={styles.content}
             dangerouslySetInnerHTML={{ __html: item.content_with_weight }}
           >

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hightlights.ts

@@ -0,0 +1,33 @@
+export const testHighlights = [
+  {
+    content: {
+      text: '实验证明，由氧氯化锆锂和高镍三元正极组成的全固态锂电池展示了极为优异的性能：在12 分钟快速充电的条件下，该电池仍然成功地在室温稳定循环2000 圈以上。',
+    },
+    position: {
+      boundingRect: {
+        x1: 219.7,
+        y1: 204.3,
+        x2: 547.0,
+        y2: 264.0,
+        width: 849,
+        height: 1200,
+      },
+      rects: [
+        {
+          x1: 219.7,
+          y1: 204.3,
+          x2: 547.0,
+          y2: 264.0,
+          width: 849,
+          height: 1200,
+        },
+      ],
+      pageNumber: 9,
+    },
+    comment: {
+      text: 'Flow or TypeScript?',
+      emoji: '🔥',
+    },
+    id: '8245652131754351',
+  },
+];

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts

@@ -1,5 +1,8 @@
+import { useGetKnowledgeSearchParams } from '@/hooks/knowledgeHook';
+import { api_host } from '@/utils/api';
 import { useSize } from 'ahooks';
-import { useCallback, useEffect, useState } from 'react';
+import { CustomTextRenderer } from 'node_modules/react-pdf/dist/esm/shared/types';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export const useDocumentResizeObserver = () => {
   const [containerWidth, setContainerWidth] = useState<number>();
@@ -18,3 +21,35 @@ export const useDocumentResizeObserver = () => {
 
   return { containerWidth, setContainerRef };
 };
+
+function highlightPattern(text: string, pattern: string, pageNumber: number) {
+  if (pageNumber === 2) {
+    return `<mark>${text}</mark>`;
+  }
+  if (text.trim() !== '' && pattern.match(text)) {
+    // return pattern.replace(text, (value) => `<mark>${value}</mark>`);
+    return `<mark>${text}</mark>`;
+  }
+  return text.replace(pattern, (value) => `<mark>${value}</mark>`);
+}
+
+export const useHighlightText = (searchText: string = '') => {
+  const textRenderer: CustomTextRenderer = useCallback(
+    (textItem) => {
+      return highlightPattern(textItem.str, searchText, textItem.pageNumber);
+    },
+    [searchText],
+  );
+
+  return textRenderer;
+};
+
+export const useGetDocumentUrl = () => {
+  const { documentId } = useGetKnowledgeSearchParams();
+
+  const url = useMemo(() => {
+    return `${api_host}/document/get/${documentId}`;
+  }, [documentId]);
+
+  return url;
+};

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.less

@@ -1,6 +1,11 @@
 .documentContainer {
   width: 100%;
   height: calc(100vh - 284px);
-  overflow-y: auto;
-  overflow-x: hidden;
+  //   overflow-y: auto;
+  //   overflow-x: hidden;
+  position: relative;
+  :global(.PdfHighlighter) {
+    overflow-x: hidden;
+    // left: 0;
+  }
 }