Syncing codeview and preview windows

[jwes]

I am trying to write a plugin to fix typos found on an e-reader. I am using PySide6 and have a QPlainTextEdit widget for the source and a QWebEngineView widget for a preview. The input is a list of phrases around the typo from the e-reader. The first problem is finding the phrase in the html source (there may be invisible html). My thought is using bs4.get_text() but then I have to find the equivalent source location. Any suggestions?

The second problem is syncing the preview window to the code window. I tried reading the Sigil source, but it is not clear to me how it works. Can someone explain it?

[KevinH]

How syncing works in general ... Take a character starting position in an html file, you can reverse walk back up the dom tree recording parent tag and child number in that parent tag (typically not counting text nodes) and generate what Sigil calls a WebPath or TagPath

This is a simplification of the epub CFI spec approach, just single file based not reliant on the OPF.

Then in you can give Preview that WebPath and run a javascript to scroll to that location.

You can of course run the process in reverse, by generating the WebPath in Preview using javascript and pass it to the editor to move to that location.

For the CodeView side of syncing see the routines starting here:

https://github.com/Sigil-Ebook/Sigil...itor.cpp#L2704



For the Preview side of things see the javascripts here:

https://github.com/Sigil-Ebook/Sigil...les/javascript



and the code to use them starting with this routine:

https://github.com/Sigil-Ebook/Sigil...eview.cpp#L419



and higher level support code starting here (see routine names with Caret in them):

https://github.com/Sigil-Ebook/Sigil...indow.cpp#L445

[KevinH]

Note: The position finding and syncing code has evolved to be quite complex due mainly to time and porting from QWebKit to QWebEngine across multiple platforms. Something much simpler may work but the theory of using webpaths is the key idea.

[KevinH]

FWIW, at its simplest use the built in regular expression Find ability in QPlainTextEdit to find your string.

Then if you need to sync Preview, then extract the current cursor position in the file being edited and use an xml parser (Qt has one) to extract the webpath for that position and build up a javascript command to scroll to it and run that on Preview.

[jwes]

I found a simpler way that works for me though I don't know if it would be useful for Sigil. The ability to search for text strings ignoring embedded HTML tags might be nice. I did find that I could eliminate screen flashing on the preview window by using setUpdatesEnabled(False) before updating and resetting it after scrolling and a short (200ms for now) timer delay.

I use html.parser to create a string of all the text in the HTML file and a list of offsets from the start of the HTML file for each character in the string. I could then use string find and the offsets to move the cursor in the code window. For the preview window I used findText() to scroll to the text and javascript to get scrollY. For updating the preview window, I used scrollTo(0, scrollY) to return after reloading the HTML file.

I'm sure there are special cases I have overlooked, but I happy with it for now.

[KevinH]

Sounds good. The idea of extracting text and starting position is also used by Sigil when building up a list of spellchecking words to search for. It works just fine.

Good luck with your project.