Skip to main content

registerEditorItem

registerEditorItem(key: string, control: EditorControlInterface)

this helper registers external controls as editor items. The control must have a value property and an onchange callback.

Usage​

Render Rich Select control in an editor​

<script>
    import { RichSelect } from "wx-svelte-core";
    import { Editor, registerEditorItem } from "wx-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 "wx-svelte-editor";
    import { Comments } from "wx-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} />