Component composition

UsfmEditor component composition

Each of the below components are class components that implement the UsfmEditor interface. All but the BasicUsfmEditor class are higher-order components -- that is, they wrap a lower level component such as the BasicUsfmEditor, and build more UI features on top of it. We originally talked about the Decorator Pattern, and that’s maybe a useful abstraction, but we don’t currently need the HOCs to add anything to the API -- all the props and methods are the same, no matter which editor class.

UsfmEditor interface

export interface UsfmEditor {
    getMarksAtCursor: () => string[]
    addMarkAtCursor: (mark: string) => void
    removeMarkAtCursor: (mark: string) => void
    getParagraphTypesAtCursor: () => string[]
    setParagraphTypeAtCursor: (marker: string) => void

    addVerseToEnd: (chapter: bigint) => void
    removeLastVerse: (chapter: bigint) => void
    joinVerseWithPrevious: (chapter: bigint, verse: bigint) => void
    unjoinVerseRange: (chapter: bigint, verse: bigint) => void
    addChapterToEnd(): () => void
    removeLastChapter(): () => void
}

export interface UsfmEditorProps {
    usfmString: string,
    onChange?: (usfm: string) => void,
    readOnly?: boolean,
    identification?: Object,
    onIdentificationChange?: (identification: Object) => void

    goToReference?: ChapterVerse
    onReferenceChange?: (r: ChapterVerse) => void
}

BasicUsfmEditor

Provides base implementation of UsfmEditor. UI is barebones; actions are performed via API. USFM editing is implemented here.

Toolbar Editor

Responsibilities

• Dynamically build a toolbar component from the Paragraph and Mark types exposed
• Compose toolbar with lower-level editor, plumbing button and status callbacks together

This need not be very customizable. If the integrator wants something different, they can just implement their own replacement component.

Chapter Editor (with pagination)

Wrapper around Basic Editor. The interface is exactly the same as that of the Basic Editor. It accepts a full book as its UsfmString, but slices it up and only loads one chapter at a time into the lower-level editor.

Responsibilities

• Accept USFM string as a prop, just as Basic Editor
• Split the USFM into chapters, and load them one-at-a-time into lower level editor as requested
• Build a chapter selector UI component and when a chapter is selected, load that selection into the lower-level editor. (Optionally do not show this, in case the application wishes to build their own. Maybe this is an option on the component, or maybe the non-UI version is a separate component.)
• Passes onReferenceChange events from LLE up to application
• When application requests a change in current reference (chapter/verse), and the chapter is different than the previous location, the lower-level editor should be given a new usfmString with that requested chapter. Also, the chapter/verse cursor location prop should be passed unchanged to the LLE.

Structure (Verse Menu) Editor (deferred)

UI for add/remove/join verses and add/remove chapters. This will not be implemented as a HOC for the MVP, because it requires a lot of internal data. (Instead this will be a feature of the BasicUsfmEditor.) However, it’s conceivable that this could be architected as a HOC.