Integrate resource viewer code about paranext-core HOT 8 CLOSED

I found two USFM editors online, one of which is Klappy's, the other of which is someone else's. Klappy said there is an editor out there that forked off of his editor, but I don't know where that is.
https://github.com/klappy/simple-usfm-editor-app
https://github.com/friendsofagape/usfm-editor

from paranext-core.

The Simple USFM Editor App is a simple editor demo Chris Klapp made. The community-maintained editor based on it is the Xelah editor. The friendsofagape USFM Editor is a Slate-based editor that Autographa made and gave up on. They had a contractor make the editor for them over two years and did not make a lot of progress.

Marc Durdin, Makara Sok, and the Keyman team are running tests on various editor libraries for us:

• Prosemirror: keymanapp/keyman#7902 (comment)
  • Mobile: keymanapp/keyman#7978
• Lexical Text Editor: keymanapp/keyman#7937 (comment)
  • Mobile: keymanapp/keyman#7977
• SlateJS: keymanapp/keyman#7938 (comment)
  • Mobile: keymanapp/keyman#7979
• USX Editor: keymanapp/keyman#8312
  • Mobile: keymanapp/keyman#8461
• Xelah HtmlPerfEditor: keymanapp/keyman#8324
  • Mobile: keymanapp/keyman#8460

The USX Editor seems to be a good baseline for what works in practically just pure HTML contenteditable. There are a few differences between the baseline and tests in these other editors.

from paranext-core.

Quick USFM viewer? https://www.npmjs.com/org/xelah

from paranext-core.

Here is a document that contains some research done into existing scripture utilities. From what I can tell, VerseRef from ScriptureForge is probably what we want to use, but we will want to talk about this as a group.

from paranext-core.

from paranext-core.

This comment is mostly to capture learning and document helpful details about the journey to get to where we are now before we pivot to doing anything we can to get a resource viewer to work.

We started with the goal of using the Xelah editor in read only mode to display USFM resources. As I began, I learned that Xelah is "a collection of libraries" that is "...focused on ste-perf-html but architected to be useful for other projects needing to edit strings parsable into sections and blocks" according to their GitHub ReadMe. There are editors based on these libraries so the question then became which one to use. Ideally, we would use a pure USFM editor that took in USFM, edited USFM, and round tripped USFM back.
There is a beta of a pure USFM editor being developed, but it doesn't have an npm install yet and hasn't had a commit since late July last year. We could potentially package it and install it locally if we ever want to go back and pursue that path.
While talking with developers who work on xelah libraries and related tools about which editor to use, they suggested using the oce-editor. It used proskomma, but should still take in USFM and should be roundtrippable for all intents and purposes except for some white space differences. They were curious if we could come up with some cases where round tripping failed. The oce-editor is actively being worked on and is ready to be imported/installed. For a resource viewer that didn't need roundtripping, this seemed like the quickest way to go to get something working.
We started with oce-editor-tools/simple and tried to npm install that. We ran into some package dependency conflicts. The oce-editor-tools team gave us a basic boilerplate project that used oce-editor-tools/simple so we could see that it was successfully imported and so we could compare it with our extension installation and see where it was breaking down. Npm install failed in their basic project which had us bewildered until Ira noticed the project had a yarn file as well. Normally both yarn and npm will work, but since npm wasn't working we decided to give yarn install a try. Yarn worked and we were able to use synp on the created yarn file to generate a package-lock file that we could then successfully use npm install on. This worked in the boilerplate app and worked once in paranext-core. However, it was fragile in paranext-core and kept needing to be redone anytime a branch was switched or a change was pulled or merged in. Eventually, that trick stopped working all together. We tried without success to fix the package dependencies.
We went back to the oce-editor-tools team, who has been helpful and quick to respond throughout the process, and after a few attempts to fix it, they suggested using oce-editor-tools/core instead since they aren't really working on simple anymore. That made sense so we switched to that and got it working in the boiler plate app after some syntax changes. When we tried to get it working in parenext-core though we ran into similar package depency problems that we were again struggling to resolve. We were also concerned about the data file that didn't look like typical usfm. Since oce-editor-tools used proskomma to display and edit usfm it is possible it may have transformed the usfm to a certain point and put that in the data file to save a step, but I didn't look into that to confirm. The view takes advantage of proskomma and epitelete-html. Here is a vocabulary doc with some definitions of terms that was kind of helpful while researching this. The oce-editor-tools/core team is continuing to improve it and are removing some old dependencies pretty soon.
Now we are going to research the quickest way to get a resource viewer extension in paranext-core.

from paranext-core.

We got a basic resource viewer to work using Tom Hindle's USX Editor (see 60-resource-viewer-v2 branch). TJ and I tried that out to see how hard it would be and it went very smoothly and quickly. I added a BCV control, but it is not yet connected. This task could be ready for review if this task needs to be finished. If we have more time or want to create another task for these, it would be nice to swap out the USX Editor for the Slate Editor from the POC for better styling and some other functionality. It would also be nice to actually hook up the BCV control and give the option to open a resource (might not have the architecture for that part yet). Note: I changed Genesis to be a SYR resource instead of the WEB Bible. Here is a picture of what it looks like now:

from paranext-core.

Shared Editor Research Folder

from paranext-core.