registerEditorItem

Registers a React component under a comp string, making it available to editor items as comp: "<type>". Use it to add controls the editor does not register by default, such as Combo, DatePicker, CodeMirror, TinyMCE, or a fully custom component.

Usage

registerEditorItem(
  type: string,
  handler: ComponentType,
  config?: { readonly?: boolean }
): void;

Parameter	Type	Description
type	string	Name referenced by comp in an item config.
handler	ComponentType	React component that renders the control.
config.readonly	boolean	When true, registers handler as the read-only variant of type.

Registration is global and keyed by string. Call it once at module load, not per render. The built-in text, textarea, checkbox, readonly, and section types are registered by the package.

Example

Register a custom control:

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import PriorityCombo from "./PriorityCombo.jsx";

registerEditorItem("priority", PriorityCombo);

const items = [
  { comp: "priority", key: "priority", label: "Priority", options: priorityOptions }
];

function MyEditor({ values }) {
  return <Editor items={items} values={values} />;
}

Register a read-only variant alongside the editable one:

import { registerEditorItem, CodeMirror } from "@svar-ui/react-editor";

registerEditorItem("code-mirror", CodeMirror);
registerEditorItem("code-mirror", CodeMirror, { readonly: true });

Related articles

• Input controls