registerEditorItem

Registers a Svelte 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: Component,
  config?: { readonly?: boolean }
): void;

Parameter	Type	Description
type	string	Name referenced by comp in an item config.
handler	Component	Svelte 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:

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
  import PriorityCombo from "./PriorityCombo.svelte";

  registerEditorItem("priority", PriorityCombo);

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

<Editor {items} {values} />

Register a read-only variant alongside the editable one:

<script>
  import { registerEditorItem, CodeMirror } from "@svar-ui/svelte-editor";

  registerEditorItem("code-mirror", CodeMirror);
  registerEditorItem("code-mirror", CodeMirror, { readonly: true });
</script>

Related articles

• Input controls