registerEditorItem

Description

Registers external controls as editor items

Usage

registerEditorItem?: (
  type: string,
  handler: Component<any>
) => void;

Parameters

• type - (required) string that defines the unique type name of the editor item
• handler - (required) Svelte component that implements the custom editor control The component must support:
  • a value property – the current value of the field,
  • an onchange callback – triggered when the value changes.

Examples

Render Rich Select control in an editor

<script>
    import { RichSelect } from "@svar-ui/svelte-core";
    import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
    
    registerEditorItem("select", RichSelect);

    const items = [
        {
            comp: "select",
            key: "name",
            label: "Name",
            options: [
                { id: 1, label: "High", color: "#DF282F" },
                { id: 2, label: "Medium", color: "#FFC975" },
                { id: 3, label: "Low", color: "#65D3B3" },
            ]
        }
    ];
</script>

<Editor {items} />

Add comments to editor

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

    registerEditorItem("comments", Comments);

    const users = [
        {
            id: 1,
            name: "John Doe",
            avatar: "https://via.placeholder.com/150",
        },
    ];

    const items = [
        {
            comp: "comments",
            key: "comments",
            label: "Comments",
            users,
            activeUser: 1,
        },
    ];

    const data = {
        comments: [
            {
                id: 1,
                user: 1,
                content: "Greetings, fellow colleagues.",
                date: new Date(),
            },
        ],
    }
</script>

<Editor {items} values={data} />