0.2.0 • Published 14 days ago
@biblionexus-foundation/platform-editor v0.2.0
Scripture Editor for Platform.Bible using USX3.0 <-> USJ
A Scripture editor React component that works on USJ Scripture data. A utility that converts USX to USJ is also included. It is expected that data conforms to USX v3.0.
---
title: ScriptureData—Editor flow
---
graph TB
DB[(DB)] <-- USX --> C
C[USX-USJ converter] <-- USJ --> A
A[USJ-Editor adapter] <-- Editor State --> Editor
Install
npm install @biblionexus-foundation/platform-editor
Usage
Note: this is an uncontrolled React component.
import { Editor, EditorOptions, EditorRef, immutableNoteCallerNodeName, usxStringToUsj, UsjNodeOptions } from '@biblionexus-foundation/platform-editor';
import { RefSelector } from 'platform-bible-react';
const emptyUsx = '<usx version="3.0" />';
const usx = `
<?xml version="1.0" encoding="utf-8"?>
<usx version="3.0">
<book code="PSA" style="id">World English Bible (WEB)</book>
<para style="h">Psalms</para>
<chapter number="1" style="c" sid="PSA 1" />
<para style="ms1">BOOK 1</para>
<para style="q1">
<verse number="1" style="v" sid="PSA 1:1" />Blessed is the man who doesn’t walk in the counsel of the wicked,</para>
<para style="q2" vid="PSA 1:1">nor stand on the path of sinners,</para>
<para style="q2" vid="PSA 1:1">nor sit in the seat of scoffers;<verse eid="PSA 1:1" /></para>
</usx>
`;
const defaultUsj = usxStringToUsj(emptyUsx);
const defaultScrRef = { /* PSA */ bookNum: 19, chapterNum: 1, verseNum: 1 };
const nodeOptions: UsjNodeOptions = { [immutableNoteCallerNodeName]: { onClick: () => console.log('Note was clicked!') } };
const options: EditorOptions = { nodes: nodeOptions };
export default function App() {
const editorRef = useRef<EditorRef>(null!);
const [scrRef, setScrRef] = useState(defaultScrRef);
// Simulate USJ updating after the editor is loaded.
setTimeout(() => {
editorRef.current?.setUsj(usxStringToUsj(usx));
}, 1000);
const handleChange = useCallback((usj: Usj) => console.log({ usj }), []);
return (
<>
<div className="ref-selector">
<RefSelector handleSubmit={setScrRef} scrRef={scrRef} />
</div>
<Editor
defaultUsj={defaultUsj}
ref={editorRef}
scrRef={scrRef}
setScrRef={setScrRef}
options={options}
onChange={handleChange}
logger={console}
/>
</>
);
}
Features
- USJ editor with USX support
- Read-only and edit mode
- History - undo & redo
- Format block type - change
<para>
markers. The current implementation is a proof-of-concept and doesn't have all the markers available yet. - BCV linkage - change the book/chapter/verse externally and the cursor moves; move the cursor and it updates the external book/chapter/verse
- Nodes supported
<book>
,<chapter>
,<verse>
,<para>
,<char>
,<note>
,<ms>
- Nodes not yet supported
<table>
,<row>
,<cell>
,<sidebar>
,<periph>
,<figure>
,<optbreak>
,<ref>
- Node options - callback for
<note>
link
Demo and Collaborative Web Development Environment
Thanks to CodeSandbox for the instant dev environment: https://codesandbox.io/p/github/BiblioNexus-Foundation/scripture-editors/main
This package is the third tab (dev:platform:5175
).
Develop in App
To develop an editor in a target application you can use yalc to link the editor in without having to publish to NPM every time something changes.
- In this monorepo, publish the editor to
yalc
, e.g.:nx devpub platform
- In the target application repo, link from
yalc
:yalc link @biblionexus-foundation/platform-editor
- In this monorepo, make changes and re-publish the editor (see step 2).
- When you have finished developing in the target application repo, unlink from
yalc
:yalc remove @biblionexus-foundation/platform-editor && npm i