突出显示文本在react-pdf-viewer中不起作用

Question

我有两个 div。

1. 显示pdf内容。示例：“虚拟 PDF 文件”。
2. 显示 pdf 中的单词。示例：“虚拟 PDF 文件”。

我的要求是，当我将鼠标悬停在第二个pdf内容中的某个单词上时，比如说“Dummy”，那么该单词应该在第一个pdf内容中突出显示。

当我将鼠标悬停在文本上时，我在控制台中获得了正确的文本，但“renderHighlights”功能未触发，并且未在 pdf 中突出显示文本。

下面是我的代码：

import React, { useState } from 'react';
import { Worker } from '@react-pdf-viewer/core';
import { Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import { highlightPlugin, Trigger } from '@react-pdf-viewer/highlight';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import '@react-pdf-viewer/highlight/lib/styles/index.css';

const BoundingBox = () => {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  // Using Trigger.TextSelection to allow text selection to trigger highlighting
  const highlightPluginInstance = highlightPlugin({
    trigger: Trigger.TextSelection,
  });

  const [highlightedWord, setHighlightedWord] = useState('');

  // Function to return the highlight areas dynamically
  const renderHighlights = () => {
    console.log("renderHighlights called with:", highlightedWord); // Debug log
    if (!highlightedWord) return [];

    const highlightColor = 'rgba(255, 255, 0, 0.5)'; // Yellow color for highlight

    // Define the highlight areas based on the highlighted word
    if (highlightedWord === 'Dummy') {
  return [{
    pageIndex: 0, // Change to the correct page index
    rects: [
      { x: 50, y: 100, width: 100, height: 20, color: highlightColor }, // Adjust coordinates
    ],
  }];
} else if (highlightedWord === 'PDF') {
  return [{
    pageIndex: 0,
    rects: [
      { x: 50, y: 130, width: 100, height: 20, color: highlightColor }, // Adjust coordinates
    ],
  }];
} else if (highlightedWord === 'File') {
  return [{
    pageIndex: 0,
    rects: [
      { x: 50, y: 160, width: 100, height: 20, color: highlightColor }, // Adjust coordinates
    ],
  }];
}
return [];
  };

  return (
    <div style={{ display: 'flex', height: '600px' }}>
      {/* Left container for PDF */}
      <div style={{ flex: 1, border: '1px solid rgba(0, 0, 0, 0.3)', padding: '10px' }}>
        <Worker workerUrl={`https://unpkg.com/[email protected]/build/pdf.worker.min.js`}>
          <Viewer
            fileUrl="/files/sample.pdf"
            plugins={[
              defaultLayoutPluginInstance,
              highlightPluginInstance,
            ]}
             renderHighlights={renderHighlights} // Render highlight based on the state
          />
        </Worker>
      </div>

      {/* Right container for text */}
      <div style={{ flex: 1, padding: '10px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <h2
          onMouseEnter={() => setHighlightedWord('Dummy')}
          onMouseLeave={() => setHighlightedWord('')}
          style={{ cursor: 'pointer' }}
        >
      Dummy
    </h2>
    <h2
      onMouseEnter={() => setHighlightedWord('PDF')}
      onMouseLeave={() => setHighlightedWord('')}
      style={{ cursor: 'pointer' }}
    >
      PDF
    </h2>
    <h2
      onMouseEnter={() => setHighlightedWord('File')}
      onMouseLeave={() => setHighlightedWord('')}
      style={{ cursor: 'pointer' }}
    >
      File
    </h2>
  </div>
</div>
  );
};

 export default BoundingBox;

需要一些宝贵的帮助。

Answer 1

问题似乎是 renderHighlights 函数没有被触发或正确更新。

您正在使用highlightPlugin中的Trigger.TextSelection。但是，由于您的目标是基于悬停事件（外部触发器）突出显示文本，因此最好将触发器设置为手动，而不是依赖于文本选择。将插件配置更新为：

const highlightPluginInstance = highlightPlugin({
trigger: Trigger.None,
});

这样，高亮将由你的状态（highlightedWord）和renderHighlights手动控制

为了确保在更新highlightWord时重新触发renderHighlights，请确保将状态正确传递给查看器并处理更新。一种方法是显式调用查看器的forceRender函数，或者在highlightWord发生变化时重新渲染查看器。