@biblionexus-foundation/scribe-editor NPM

Scripture Editor for Scribe using USJ.

A Scripture editor React component that works on USJ Scripture data.

Install

npm install @biblionexus-foundation/scribe-editor

Usage

Note: this is an uncontrolled React component.

import { useState, useMemo, SyntheticEvent, useRef, useEffect } from "react";
import { Editor, EditorRef } from "@biblionexus-foundation/scribe-editor";
import { getViewOptions } from "@biblionexus-foundation/scribe-editor";
import { DEFAULT_VIEW_MODE } from "@biblionexus-foundation/scribe-editor";
import { UsjNodeOptions } from "@biblionexus-foundation/scribe-editor";
import { immutableNoteCallerNodeName } from "@biblionexus-foundation/scribe-editor";
import { BookCode, Usj } from "@biblionexus-foundation/scripture-utilities";

const defaultUsj: Usj = {
  type: "USJ",
  version: "0.2.1",
  content: [],
};
export interface ScriptureReference {
  bookCode: BookCode;
  chapterNum: number;
  verseNum: number;
}
const defaultScrRef: ScriptureReference = {
  /* PSA */ bookCode: "PSA",
  chapterNum: 1,
  verseNum: 1,
};
function App() {
  const [usj, setUsj] = useState<Usj | undefined>();
  const [initialRender, setInitialRender] = useState(true);
  const [scrRef, setScrRef] = useState(defaultScrRef);
  const [viewMode] = useState(DEFAULT_VIEW_MODE);

  const editorRef = useRef<EditorRef>(null!);
  const previousUsjRef = useRef<Usj | null>(null);

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      usj && editorRef.current?.setUsj(usj);
    }, 0);
    return () => clearTimeout(timeoutId);
  }, [usj]);

  const nodeOptions: UsjNodeOptions = {
    [immutableNoteCallerNodeName]: {
      onClick: (e: SyntheticEvent) => {
        console.log({ e });
      },
    },
  };
  const viewOptions = useMemo(() => getViewOptions(viewMode), [viewMode]);
  const onChange = async (usj: Usj) => {
    if (initialRender) {
      setInitialRender(false);
      return;
    }
  };

  useEffect(() => {
    if (scrRef) {
      console.log("scrRef", scrRef);
    }
  }, [scrRef]);

  return (
    <div>
      <Editor
        usjInput={defaultUsj}
        ref={editorRef}
        onChange={handleInputChange}
        viewOptions={viewOptions}
        nodeOptions={nodeOptions}
        scrRef={scrRef}
        setScrRef={setScrRef}
      />
    </div>
  );
}

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 scribe
```

In the target application repo, link from yalc:

yalc link @biblionexus-foundation/scribe-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/scribe-editor && npm i
```