/learning-with-books

Learn languages by reading books, highlighting and seeing translation of selected phrases

Primary LanguageJavaScriptMIT LicenseMIT

In this code I am testing the react-pdf-highlighter library.

Install

  • Install the dependencies
$ npm install
$ cd server & npm install
  • Run locally
$ cd server & node server.js
$ npm start

Visit http://localhost:3000 to see it in action.

Todo

  • highlighting by phrase.
  • add possibility of selecting text, then store it as new phrase with it's description
  • multiple line highlights (every line is a span)
  • dynamicaly chose pdf file
  • design db
  • create & consume api
    • create phrase
    • update phrase
    • delete phrase

Spotlights

App.js:

import { Viewer, Worker } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import { searchPlugin } from '@react-pdf-viewer/search';

import '@react-pdf-viewer/search/lib/styles/index.css';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

const data = ['should', 'States', 'Group', 'Opening', 'pdf', 'example', 'File', 'includes']

// defining renderHighlights

const defaultLayoutPluginInstance = defaultLayoutPlugin();
const searchPluginInstance = searchPlugin({
        keyword: [
            ...data.map(text => new RegExp(text)) 
        ],
        renderHighlights,
})

return (
    <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">
        <div style={{ height: '750px' }}>
            <Viewer
                fileUrl={`${process.env.PUBLIC_URL}/pdf-open-parameters.pdf`}
                plugins={[
                    defaultLayoutPluginInstance,
                    searchPluginInstance,
                ]}
            />
        </div>
    </Worker>
);

overview