kerebron

The @esheet/field-kerebron package adds a richtext field type backed by the Kerebron ProseMirror-based editor. It is an optional package and belongs under custom field types because it is not part of the base built-in field set.

---

Installation

npm install @esheet/field-kerebron

This package must be used alongside @esheet/builder or @esheet/renderer.

---

Setup

1. Configure the asset loader

The Kerebron editor requires WASM binaries. Call configureRichTextField once at application startup, before mounting any component that renders a richtext field:

import { configureRichTextField } from '@esheet/field-kerebron';
import { createAssetLoad } from '@kerebron/wasm/web';

configureRichTextField({
  assetLoad: createAssetLoad('/kerebron-wasm'),
});

The path ('/kerebron-wasm') must point to the directory where the @kerebron/wasm assets are served. Copy the assets from node_modules/@kerebron/wasm/dist/web/ to your public directory as part of your build pipeline.

2. Register the field component

After configuring the asset loader, register the component so eSheet knows how to render richtext fields:

import { registerFieldComponents } from '@esheet/fields';
import { RichTextEditorField } from '@esheet/field-kerebron';

registerFieldComponents({ richtext: RichTextEditorField });

Call this once before your app mounts EsheetBuilder or EsheetRenderer.

---

Schema

Use fieldType: 'richtext' in your FormDefinition. The optional defaultContent property pre-populates the editor with initial rich text:

{
  "id": "notes",
  "fieldType": "richtext",
  "question": "Clinical Notes",
  "required": false,
  "defaultContent": "<p>Enter your notes here.</p>"
}

Field definition properties

Property	Type	Description
fieldType	string	Must be 'richtext'
id	string	Unique field identifier
question	string	Label shown above the editor
required	boolean	Whether the field must have content before submitting
defaultContent	string	Optional HTML string used to pre-fill the editor before a response exists

---

Response format

Rich text answers are stored as a raw HTML string in response.answer:

{
  "notes": {
    "answer": "<p>Patient reports mild discomfort.</p>"
  }
}

---

Builder behavior

When @esheet/field-kerebron is installed and registered:

• The builder ToolPanel shows a Rich Text Editor entry in the Rich category.
• Selecting a richtext field in the canvas opens its edit panel where you can set the question, required flag, and default content.
• Preview mode renders a live Kerebron editor.

---

Complete example

import { configureRichTextField } from '@esheet/field-kerebron';
import { createAssetLoad } from '@kerebron/wasm/web';
import { registerFieldComponents } from '@esheet/fields';
import { RichTextEditorField } from '@esheet/field-kerebron';
import { EsheetRenderer } from '@esheet/renderer';
import type { FormDefinition } from '@esheet/core';

configureRichTextField({
  assetLoad: createAssetLoad('/kerebron-wasm'),
});

registerFieldComponents({ richtext: RichTextEditorField });

const form: FormDefinition = {
  id: 'intake-form',
  title: 'Patient Intake',
  fields: [
    {
      id: 'name',
      fieldType: 'text',
      question: 'Full Name',
      required: true,
    },
    {
      id: 'notes',
      fieldType: 'richtext',
      question: 'Additional Notes',
    },
  ],
};

export function IntakePage() {
  return <EsheetRenderer formDataInput={form} />;
}

---

Notes

• configureRichTextField must be called before any component renders a richtext field.
• If configureRichTextField is not called, richtext fields render without editor content and log a warning.
• richtext is not part of the base 19 built-in field types. It is registered dynamically by importing @esheet/field-kerebron.