Support highlight a text
Closed this issue · 4 comments
Hi @gerhardsletten , I'm very interested in your project. I can use this to show ePub file well. But now I want to make a highlight of text in ePub file. I see that in ePubjs that support highlight function through a "hook". I don't know how to integrate it with your project.
Basically, I want to create a reader like this by react. It supports highlight and note function.
http://futurepress.github.io/epub.js/reader/
Can you teach me how to do it?
`
EPUBJS.Hooks.register("beforeChapterDisplay").highlight = function(callback, renderer){
// EPUBJS.core.addScript("js/libs/jquery.highlight.js", null, renderer.doc.head);
var s = document.createElement("style");
s.innerHTML =".highlight { background: yellow; font-weight: normal; }";
renderer.render.document.head.appendChild(s);
if(callback) callback();
}
`
Hi @miwa911, I have merged the latest version of epubjs v3 branch today, and added a function where you will have access to epubjs's rendition object through react-reader, see demo/App.js for an example, and let me know it this will work for you.
React-readers are building on top of the v3 branch of epubjs, so not all features are available there yet, but the selection-api was added recently. But I dont use it myself, so I am not sure how stable it is in the v3 branch yet.
Thank you @gerhardsletten, I will check it.
@gerhardsletten Awesome, the highlight function works like charm.
One more question, has v3 branch of epubjs support note?
I did some research
In reader demo, there is a note_controller
https://github.com/futurepress/epub.js/blob/70fb1c957017db6010d77c541da889825aa88fb9/reader_src/controllers/notes_controller.js
In note_controller, they used function addMarker to insert element to html.
How can I do the same thing, insert an element to html when I use react?
Thank you very much.
Not sure, you will need to inspect which underlaying epub-features this note-thing use, and check if its available in the v3 branch. I am not planing react-reader to be a full stack reader in its self, its more like a component you can use to display epubs, but let me know if there are underlaying epubjs api's you cant reach.