⚛️⚡ Keystone React Editor

Brief Background

👋 I recently embarked on a journey to integrate the document editor from Keystone into a client-only project. However, I hit a roadblock as the editor was tightly coupled with the Keystone context and carried significant server-side dependencies.

After a thorough investigation into the source code, I identified that the culprit was the relationship feature (tags and mentions), which heavily relied on server-side functionality. Determined to make the document editor more versatile, I decided to take matters into my own hands.

To make the document editor more adaptable to client-only projects, I meticulously extracted its source code from the Keystone repository. I stripped off every trace and dependencies of the relationship feature (with hope to add a client compactible alternative implementation later).

GETTING STARTED

You can view a live storybook demo here

Installation

yarn

yarn add keystone-react-editor

npm

npm install keystone-react-editor

import { useRef } from "react";
import {
  DocumentEditor,
  defaultDocumentFeatures,
  initialEditorValue,
} from "keystone-react-editor";

function App() {
 const value = useRef(initialEditorValue)
  return (
    <DocumentEditor
      initialValue={value.current}
      componentBlocks={{}}
      documentFeatures={defaultDocumentFeatures}
      onChange={(value) => {
        value.current = value;
        console.log(value);
      }}
    />
  );
}

documentFeatures is basically the layout specification, should match what was specified in the cms document field config.

The Document Editor uses slate under the hood, which is an uncontrolled component, we are using ref so as to maintain the initialValue across rerenders, as the document editor tends to remount for every rerender (using a state, leads to some weird behaviour, editor always remounting while being typed on).

Contribution

1. Clone your repo
2. Install dependencies with pnpm i (first run corepack enable to enable pnpm)
3. Run pnpm prepare command to setup Husky pre-commit hooks.

Main Scripts

Always prepending pnpm:

• dev: Bootstrap the Storybook preview with Hot Reload.
• build: Builds the static storybook project.
• build:lib: Builds the component library into the dist folder.
• lint:fix: Applies linting based on the rules defined in .eslintrc.js.
• format:prettier: Formats files using the prettier rules defined in .prettierrc.
• test: Runs testing using watch mode.
• test:cov: Runs testing displaying a coverage report.

NOTE

ALL TEST ARE CURRENTLY EXCLUDED FROM TYPESCRIPT, STILL TRYING TO GET THEM WORKING

License

MIT