Scripture Editors

This monorepo contains packages for various Scripture editors.

Each Scripture application's editor will have many behaviors in common with other Scripture applications. Each will need some features that are unique. We are developing all of these parts in a compatible way and in one place in order to maximize collaboration and sharing.

In this monorepo:

• Each application produces their own editor package - the application uses the package produced from this repo because the source is there.
• Common nodes, plugins, and formatters for the toolbar plugin.
• Specific sets of nodes, plugins, and formatters for each data type extending from the common items where applicable.

Sharing in this monorepo is a commitment to maintain and organize it. Each application package is free to move in its own direction but keeping in mind items that can be pushed up outside the specific editor package to be used in common.

Developer Quick Start

1. Install Volta.
2. Clone the monorepo:

   git clone https://github.com/eten-tech-foundation/scripture-editors.git
   cd scripture-editors
   pnpm install

3. Install Nx globally (note we intentionally use npm rather than pnpm for global installs, see JavaScript Tool Manager):

   npm i -g nx

4. Run one of the top level developer environments (see the Nx Graph below), e.g.:

   nx dev perf-react

JavaScript Tool Manager

You can use Volta with this repo to use the right version of tools such as Node.js and PNPM.

If you don't use Volta just look at the volta property in package.json to see the right tool versions to install in your preferred way.

NOTE: there is a known limitation using PNPM with Volta. So set your environment variable VOLTA_FEATURE_PNPM to 1. Also to install packages globally, use NPM instead of PNPM (only for global installs). For an example, see step 2 of Developer Quick Start.

Nx Monorepo Build System

Source	Demo App
perf-vanilla	nx dev perf-vanilla
perf-react	nx dev perf-react
platform	nx dev platform
scribe-editor*	nx dev scribe-editor

* This item appears in 2 lists as it has both the Demo App and Package in the same source folder.

Source	Package
platform-editor
scribe-editor	*
utilities

* This package has not yet been published to the new NPM organization. The previous version of scribe-editor is here .

Source	Library
shared-react	internal non-published
shared	internal non-published
test-data	internal non-published

---
title: Nx Graph
---
graph TB
  V(perf-vanilla) --> T(test-data)
  V --> S(shared)
  S --> T
  S --> U(utilities)
  R(perf-react) --> T
  R --> S
  R --> SR(shared-react)
  SR --> S
  SR --> U
  SB(scribe-editor) --> SR
  SB --> S
  SB --> U
  P(platform) --> PE(platform-editor)
  P --> T
  P --> U
  PE --> SR
  PE --> S
  PE --> U

Loading

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

Nx Installed Globally?

If you haven't installed Nx globally (as recommended in step 2 of Developer Quick Start), then just prefix each call to nx with pnpm, e.g. pnpm nx build perf-react.

Running tasks

To execute tasks with Nx use the following syntax:

nx <target> <project> <...options>
# e.g.
nx build perf-react

You can also run multiple targets:

nx run-many -t <target1> <target2>

..or add -p to filter specific projects

nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Generate code

If you happen to use Nx plugins, you can leverage code generators that might come with it.

Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.

Learn more about Nx generators on the docs.

Want better Editor Integration?

Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Ready to deploy?

Just run nx build perf-react to build that application. The build artifacts will be stored in the dist/ directory, ready to be deployed.

Set up CI!

Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.

• Set up remote caching
• Set up task distribution across multiple machines
• Learn more how to setup CI

Connect with us!

• Join the community
• Subscribe to the Nx Youtube Channel
• Follow us on Twitter

Testing

The unit tests run automatically on each GitHub PR (see test.yml).

To run all TS unit tests:

nx run-many -t test

To run all TS unit tests for a single package (in this example the shared package):

nx test shared

To run all TS unit tests watching for file changes:

• On Windows:

  nx watch --all -- nx test %NX_PROJECT_NAME%

• On Linux or macOS:

  nx watch --all -- nx test \$NX_PROJECT_NAME

You can also use the recommended VS Code extensions to run tests there. This is particularly useful for running individual tests and debugging.

API Extraction

If you change the public API of a package, run nx extract-api to update its API report:

nx extract-api <package-name>  # e.g., nx extract-api platform-editor

Or update all packages at once:

nx run-many -t extract-api

The generated API report files should be committed alongside your changes.

Formatting, Linting and Typechecking

Formatting happens automatically when you commit — the pre-commit hook runs Prettier over your staged files, and that is the gate. If you use VS Code with this repo's recommended extensions, files will also be formatted when you save. You shouldn't normally need to format anything by hand.

To check TypeScript for readability, maintainability, and functionality errors, run the following from the repo root (or just use VS Code with this repo's recommended extensions).

nx run-many -t lint # to check linting
nx run-many -t typecheck # to check types
npx prettier --write <files> # only if you need to format something by hand

Use Prettier directly rather than nx format:write. CI runs nx format:check purely as a backstop for commits that bypassed the hook; it exists because nx format once resolved a Prettier configuration that didn't quite match invoking Prettier directly. Several Nx majors have passed and that may well be fixed, but it has never been reconfirmed — so prefer the tool the hook uses.

Note .prettierignore excludes some files that still get staged, notably pnpm-lock.yaml and **/tsconfig*.json. Prettier leaves those alone by design; that isn't the hook failing.

Dependency Updates

Dependabot is configured to open security PRs only, so any dependabot PR on this repo is an advisory rather than a routine bump. We supersede those PRs with a single hand-made batch commit, because dependabot resolves pnpm monorepo trees poorly and because a version bump often fails to clear the advisory on its own.

See docs/dependency-updates.md for the procedure, how to write the pnpm-workspace.yaml overrides, and why a green CI run is not evidence that a vulnerability is fixed. Claude Code users can invoke the update-dependencies skill, which follows that doc.

TypeScript Code Intelligence

This repo gives Claude Code a TypeScript language server (jump-to-definition, find-references, and type-error diagnostics across the monorepo). It works on Windows, macOS, and Linux with no manual setup beyond pnpm install.

typescript-language-server is a repo devDependency, so pnpm install provides it (and the typescript it needs is already in the workspace). A committed Claude Code plugin (.claude/skills/typescript-lsp-volta) launches it and loads automatically when you start Claude Code from the repo root — no global install, no /plugin install step.

It uses a custom plugin rather than the official typescript-lsp, which fails under Volta on Windows; see the plugin README for why and how.

Linux / WSL override

The custom plugin works on Windows and macOS but currently has a loading issue on Linux / WSL where Claude Code recognises the plugin yet fails to start its LSP server. On Linux the official plugin works fine (Volta shims are real executables, not .cmd files), so add this override to .claude/settings.local.json (gitignored):

{
  // ... keep any existing keys ...
  "enabledPlugins": {
    "typescript-lsp@claude-plugins-official": true,
    "typescript-lsp-volta@skills-dir": false,
  },
}

Then run /reload-plugins inside Claude Code.

Notes:

• Start Claude Code from the repo root; project-scope plugins don't load from a subdirectory. After changing directories, run /reload-plugins.
• The typescript-language-server dev dependency is installed for everyone via pnpm install but is only used by Claude Code. If you don't use Claude Code, you can ignore this feature.

Collaborative Web Development Environment

Thanks to CodeSandbox for the instant dev environment: https://codesandbox.io/p/github/eten-tech-foundation/scripture-editors/main

Plain Vanilla JS and React

Lexical works with plain-vanilla JS/TS as well as with React. To that end, the editor packages in this repo perf-react and perf-vanilla are 2 editor components that behave the same to edit the PERF data format.

If you are using a framework other than React and need to wrap a plain-vanilla JS editor for your framework, you could add your own vanilla TS editor package to this repo. By comparing perf-vanilla and perf-react you can see how to take any existing React plugins you might want and convert them to vanilla TS.

License

MIT © ETEN Tech Foundation