feat: add Preview with react-pdf-highlighter

web/package-lock.json

@@ -24,6 +24,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",
@@ -7264,6 +7265,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==",
+      "deprecated": "dommatrix is no longer maintained. Please use @thednp/dommatrix."
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz",
@@ -8562,6 +8569,11 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "peer": true
     },
+    "node_modules/fast-memoize": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmmirror.com/fast-memoize/-/fast-memoize-2.5.2.tgz",
+      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+    },
     "node_modules/fast-redact": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/fast-redact/-/fast-redact-3.3.0.tgz",
@@ -11209,8 +11221,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
-      "dev": true
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -14417,6 +14428,18 @@
         "react-dom": "*"
       }
     },
+    "node_modules/re-resizable": {
+      "version": "6.9.6",
+      "resolved": "https://registry.npmmirror.com/re-resizable/-/re-resizable-6.9.6.tgz",
+      "integrity": "sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ==",
+      "dependencies": {
+        "fast-memoize": "^2.5.1"
+      },
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmmirror.com/react/-/react-18.2.0.tgz",
@@ -14736,6 +14759,27 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmmirror.com/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/react-draggable/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
@@ -14872,6 +14916,37 @@
         }
       }
     },
+    "node_modules/react-pdf-highlighter": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/react-pdf-highlighter/-/react-pdf-highlighter-6.1.0.tgz",
+      "integrity": "sha512-PD7l+0q1v+pZahLA/2AeWIb0n8d1amL6o+mOKnldIqtyChBHSE3gfnY5ZNMSFrhWXdlM6l4Eet+aydnYo6Skow==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "pdfjs-dist": "2.16.105",
+        "react-rnd": "^10.1.10"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
+    "node_modules/react-pdf-highlighter/node_modules/pdfjs-dist": {
+      "version": "2.16.105",
+      "resolved": "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz",
+      "integrity": "sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==",
+      "dependencies": {
+        "dommatrix": "^1.0.3",
+        "web-streams-polyfill": "^3.2.1"
+      },
+      "peerDependencies": {
+        "worker-loader": "^3.0.8"
+      },
+      "peerDependenciesMeta": {
+        "worker-loader": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -14880,6 +14955,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-rnd": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/react-rnd/-/react-rnd-10.4.1.tgz",
+      "integrity": "sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q==",
+      "dependencies": {
+        "re-resizable": "6.9.6",
+        "react-draggable": "4.4.5",
+        "tslib": "2.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
+    "node_modules/react-rnd/node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
     "node_modules/react-router": {
       "version": "6.3.0",
       "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.3.0.tgz",

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/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,6 +1,8 @@
+import { useGetKnowledgeSearchParams } from '@/hooks/knowledgeHook';
+import { api_host } from '@/utils/api';
 import { useSize } from 'ahooks';
 import { CustomTextRenderer } from 'node_modules/react-pdf/dist/esm/shared/types';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export const useDocumentResizeObserver = () => {
   const [containerWidth, setContainerWidth] = useState<number>();
@@ -21,8 +23,6 @@ export const useDocumentResizeObserver = () => {
 };
 
 function highlightPattern(text: string, pattern: string, pageNumber: number) {
-  const finalText = '';
-  console.info(text);
   if (pageNumber === 2) {
     return `<mark>${text}</mark>`;
   }
@@ -43,3 +43,13 @@ export const useHighlightText = (searchText: string = '') => {
 
   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-y: auto;
-  overflow-x: hidden;
+  //   overflow-x: hidden;
+  position: relative;
+  :global(.PdfHighlighter) {
+    overflow-x: hidden;
+    // left: 0;
+  }
 }

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

@@ -0,0 +1,189 @@
+import { Spin } from 'antd';
+import { useRef, useState } from 'react';
+import type { NewHighlight } from 'react-pdf-highlighter';
+import {
+  AreaHighlight,
+  Highlight,
+  PdfHighlighter,
+  PdfLoader,
+  Popup,
+  Tip,
+} from 'react-pdf-highlighter';
+import { useGetSelectedChunk } from '../../hooks';
+import { testHighlights } from './hightlights';
+import { useGetDocumentUrl } from './hooks';
+
+import styles from './index.less';
+
+interface IProps {
+  selectedChunkId: string;
+}
+
+const getNextId = () => String(Math.random()).slice(2);
+
+const HighlightPopup = ({
+  comment,
+}: {
+  comment: { text: string; emoji: string };
+}) =>
+  comment.text ? (
+    <div className="Highlight__popup">
+      {comment.emoji} {comment.text}
+    </div>
+  ) : null;
+
+const Preview = ({ selectedChunkId }: IProps) => {
+  const url = useGetDocumentUrl();
+  const selectedChunk = useGetSelectedChunk(selectedChunkId);
+
+  const [state, setState] = useState<any>(testHighlights);
+  const ref = useRef((highlight: any) => {});
+
+  const parseIdFromHash = () =>
+    document.location.hash.slice('#highlight-'.length);
+
+  const resetHash = () => {
+    document.location.hash = '';
+  };
+
+  const getHighlightById = (id: string) => {
+    const highlights = state;
+
+    return highlights.find((highlight: any) => highlight.id === id);
+  };
+
+  //   let scrollViewerTo = (highlight: any) => {};
+
+  let scrollToHighlightFromHash = () => {
+    const highlight = getHighlightById(parseIdFromHash());
+
+    if (highlight) {
+      ref.current(highlight);
+    }
+  };
+
+  const addHighlight = (highlight: NewHighlight) => {
+    const highlights = state;
+
+    console.log('Saving highlight', highlight);
+
+    setState([{ ...highlight, id: getNextId() }, ...highlights]);
+  };
+
+  const updateHighlight = (
+    highlightId: string,
+    position: Object,
+    content: Object,
+  ) => {
+    console.log('Updating highlight', highlightId, position, content);
+
+    setState(
+      state.map((h: any) => {
+        const {
+          id,
+          position: originalPosition,
+          content: originalContent,
+          ...rest
+        } = h;
+        return id === highlightId
+          ? {
+              id,
+              position: { ...originalPosition, ...position },
+              content: { ...originalContent, ...content },
+              ...rest,
+            }
+          : h;
+      }),
+    );
+  };
+
+  // useEffect(() => {
+  //   ref.current(testHighlights[0]);
+  // }, [selectedChunk]);
+
+  return (
+    <div className={styles.documentContainer}>
+      <PdfLoader url={url} beforeLoad={<Spin />}>
+        {(pdfDocument) => (
+          <PdfHighlighter
+            pdfDocument={pdfDocument}
+            enableAreaSelection={(event) => event.altKey}
+            onScrollChange={resetHash}
+            // pdfScaleValue="page-width"
+
+            scrollRef={(scrollTo) => {
+              //   scrollViewerTo = scrollTo;
+              ref.current = scrollTo;
+
+              scrollToHighlightFromHash();
+            }}
+            onSelectionFinished={(
+              position,
+              content,
+              hideTipAndSelection,
+              transformSelection,
+            ) => (
+              <Tip
+                onOpen={transformSelection}
+                onConfirm={(comment) => {
+                  addHighlight({ content, position, comment });
+
+                  hideTipAndSelection();
+                }}
+              />
+            )}
+            highlightTransform={(
+              highlight,
+              index,
+              setTip,
+              hideTip,
+              viewportToScaled,
+              screenshot,
+              isScrolledTo,
+            ) => {
+              const isTextHighlight = !Boolean(
+                highlight.content && highlight.content.image,
+              );
+
+              const component = isTextHighlight ? (
+                <Highlight
+                  isScrolledTo={isScrolledTo}
+                  position={highlight.position}
+                  comment={highlight.comment}
+                />
+              ) : (
+                <AreaHighlight
+                  isScrolledTo={isScrolledTo}
+                  highlight={highlight}
+                  onChange={(boundingRect) => {
+                    updateHighlight(
+                      highlight.id,
+                      { boundingRect: viewportToScaled(boundingRect) },
+                      { image: screenshot(boundingRect) },
+                    );
+                  }}
+                />
+              );
+
+              return (
+                <Popup
+                  popupContent={<HighlightPopup {...highlight} />}
+                  onMouseOver={(popupContent) =>
+                    setTip(highlight, (highlight: any) => popupContent)
+                  }
+                  onMouseOut={hideTip}
+                  key={index}
+                >
+                  {component}
+                </Popup>
+              );
+            }}
+            highlights={state}
+          />
+        )}
+      </PdfLoader>
+    </div>
+  );
+};
+
+export default Preview;

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

@@ -8,7 +8,8 @@ import CreatingModal from './components/chunk-creating-modal';
 import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
 import ChunkCard from './components/chunk-card';
 import ChunkToolBar from './components/chunk-toolbar';
-import DocumentPreview from './components/document-preview';
+// import DocumentPreview from './components/document-preview';
+import DocumentPreview from './components/document-preview/preview';
 import { useHandleChunkCardClick, useSelectDocumentInfo } from './hooks';
 import styles from './index.less';
 import { ChunkModelState } from './model';