xelahjs / xelah

Text editor component for the Bible.

XELAH: Simple Text Editor for React

XELAH is a collection of libraries that build on top of each other.

The primary implementation will be focused on ste-perf-html but architected to be useful for other projects needing to edit strings parsable into sections and blocks.

Packages

@xelah/core

A core library that others extend to edit their respective file formats.

@xelah/type-perf-html

An implementation of STE for editing HtmlPerf, a block based format based on Epitelete/PERF.

Pending packages

@xelah/ui-mui

A series of react components to be used with the ste-core to customize the rendering of STE using MUI.

@xelah/ui-tailwind

A series of react components to be used with the ste-core to customize the rendering of STE using tailwind.

@xelah/type-usfm

A precursor to ste-perf-html, STE USFM is an implementation that is a starting point to edit raw USFM files.

@xelah/type-markdown

A markdown implementation that is not comprehensive but a starting point that could use contributions.

Useful libraries:

Epitelete

https://www.npmjs.com/package/epitelete https://github.com/Proskomma/epitelete

Epitelete-Perf-Html

https://www.npmjs.com/package/epitelete-perf-html https://github.com/unfoldingWord-box3/Epitelete-Perf-Html

Xelah

https://www.npmjs.com/org/xelah https://github.com/xelahjs/xelah

xelah's Issues

Odd behaviour while adding text in newline.

Not able to add new text in the editor with the correct markers. Also need the feature to insert a particular tag (eg: \v or \p) while editing.

192780133-a0383484-9091-4695-b6c2-234495ffbc9a.mp4

Load usfm files dynamically

Add and remove usfm file dynamically using proskomma-react-hooks

Add onInput event

For some editing functions it is necessary to subscribe to any change in the content.
An onInput event needs to be added to all the editing components

Experiment with triggering action from a hotkey or just `/`

Add menu with actions

We would like to add some features to actual edit USFM tags in addition to the text. I have explored several options and have come up with a plan. Rather than implementing a context menu in xelah I believe it would be best to let the menu's style and placement be controlled on the application level. The code for the actions of each menu item can live in xelah with some basic menu to serve as an example. This is very similar to how the buttons for Sectionable Blockable Editable and Preview are done now.

I have identified 3 basic types of action or buttons.

• Those that change the type of paragraph currently selected to a block quote or something else. USFM tags would be \p \m \q \qr \qc etc.
• Those that wrap a tag around a word or selection USFM tags would be \qs \nd etc.
• Those that insert a graft. USFM Tags would be \f \x etc.

A PoC for the first type is at https://github.com/xelahjs/xelah/compare/feature-menu with place holders for the other types.

The tasks left to be done are:

• Identify which USFM tags we would like to support in the first phase- Birch @superdav42
• Implement the graft inserting - @larsgson JoelC/Jincy/ Abel
• Implement the wrapping selection with a tag - @larsgson @abelpz
• Add actions for adding verse and chapter markings - @larsgson @Joel-C-Johnson @abelpz
• Add a menu item for each tag we wish to support - @Joel-C-Johnson
• Experiment with triggering action from a hotkey or just \- @richmahn
• Improve graft edition experience for section headings and titles. - @abelpz

Helpful article for how Selection API and Range works. Useful for manipulating HTML around selection.

Save to File

Convert htmlperf to usfm and save back to file.