Skip to main content

Editor Widget

SVAR Svelte Editor component allows the implementation of an editor form as a standalone widget or as part of a sidebar panel. It supports the inclusion of core widgets such as comments and task lists as editors. The editor can have toolbars positioned either at the top or bottom. The sidebar panel can accommodate one or two columns of input fields.

The widget is licensed under the MIT license.

Quick start​

First steps​

To start with the widget, add the necessary packages to the project.

npm install wx-svelte-core
npm install wx-svelte-editor

or

yarn add wx-svelte-core
yarn add wx-svelte-editor

Import the widget into the project.

<script>
  import { Willow } from 'wx-svelte-core';
  import { Editor } from 'wx-svelte-editor';
</script>

<Willow>
  <Editor />
</Willow>

The Willow component acts as a default theme wrapper that adds necessary styles for all SVAR widgets. The Editor component can function without it, but it will lack styles, requiring manual style addition. It is recommended to include the Willow tag at the top level of the application.

Full init code​

To see the widget in action, add some items to the widget.

<script>
  import { Editor } from "wx-svelte-editor";

  const items = [
    { comp: "text", key: "name", label: "Name" },
    { comp: "text", key: "descr", label: "Description" },
    { comp: "text", key: "role", label: "Role" }
  ];

  const values = {
    name: "John Doe",
    descr: "Lorem ipsum dolor sit amet",
    role: "admin"
  };
</script>

<Editor {items} {values} />

Visual Themes​

The widget is provided in two visual styles - Light and Dark, controlled by the theme tag.

<script>
import { Willow, WillowDark } from "wx-svelte-core";
</script>

<!-- Light -->
<Willow>
  <Editor />
</Willow>

<!-- Dark -->
<WillowDark>
  <Editor />
</WillowDark>

Initialization​

The editor widget provides flexible options for initialization, allowing developers to define input fields, prefill values, and set the widget in editable or read-only modes. It supports a wide variety of configurations to suit diverse use cases.

Initializing the Editor Widget​

Editor has built-in controls which are "text", "textarea, "checkbox", "section" and "readonly".

To use other controls, you need to import them from wx-svelte-core library and register them as Editor items with the corresponding registerEditorItem helper:

<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name" },
        {
            comp: "textarea",
            key: "descr",
            label: "Description"
        },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];

    const values = {
        name: "John Doe",
        descr: "Lorem ipsum dolor sit amet",
        admin: true,
        role: "admin"
    };
</script>

<Editor {items} {values} />

This example demonstrates how to initialize the editor widget with a list of input fields and their corresponding values. The items array defines the structure of the form, where each object specifies the input type (comp), a unique key (key), and a user-friendly label (label). The values object provides initial values for these inputs, matched by their keys. This setup is useful for creating a basic form with preloaded data, such as when editing an existing record.

Initializing the Editor Widget in Read-Only Mode​

<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name" },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
        },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];
    const values = {
        name: "John Doe",
        descr: "Lorem ipsum dolor sit amet",
        admin: true,
        role: "admin"
    };
</script>

<Editor {items} {values} readonly={true} />

This example illustrates how to initialize the editor widget in read-only mode. The readonly property is set to true, which prevents users from modifying the input fields. The items array and values object are defined in the same way as in the editable mode. This configuration is ideal for scenarios where the form data needs to be displayed without allowing edits, such as in a review or audit interface.

Display Options​

The Editor widget can be displayed in various ways to suit different interface designs and user interaction needs. It can appear as an inline form, a modal dialog, or a sidebar panel. The sidebar panel layout further supports a single-column or two-column arrangement for organizing inputs.

Displaying the Editor as an Inline Form​

<script>
    import { Editor } from "wx-svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="inline" />

The inline form placement integrates the editor directly into the page content. This option is suitable for scenarios where the editor needs to be part of a continuous workflow without interrupting the user's navigation. It is often used in dashboard or management views where the editor is seamlessly embedded.

Displaying the Editor as a Modal Dialog​

<script>
    import { Editor } from "wx-svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="modal" />

The modal dialog placement opens the editor as a centered overlay. This approach is ideal when the editing process requires the user's full attention and should not be mixed with other page elements. It is commonly used for creating or editing important records where focus and isolation are necessary.

Displaying the Editor as a Sidebar Panel​

<script>
    import { Editor } from "wx-svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="sidebar" />

The sidebar panel placement attaches the editor to the side of the screen. This layout is effective for workflows where the editor is secondary to the main content but still needs to be accessible. It works well in applications where users perform tasks like reviewing details or making quick edits while keeping the main context visible.

Displaying the Editor in Two Columns​

column?: "left" | "right"
<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name", column: "left" },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
            column: "left", // move to left column
        },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];
</script>

<Editor {items} values={data} layout="columns" />

The two-column layout organizes inputs into distinct left and right sections within the sidebar. This configuration is useful when there are multiple inputs, and grouping them visually helps users understand and navigate the form more efficiently. For example, key details can be placed in the left column while supplementary options appear in the right column.

Toolbar Configuration​

The Editor widget allows for the addition and customization of toolbars. Toolbars can be positioned at the top or bottom of the editor and can include interactive elements such as buttons, labels, and menus. These toolbars enhance user interaction and provide quick access to specific actions or information.

Adding a Top Toolbar to the Editor​

<script>
    import { Editor } from "wx-svelte-editor";

    const topBar = {
        items: [
            { comp: "spacer" },
            { comp: "button", label: "Click me", onclick: () => alert("clicked") },
        ],
    };
</script>

<Editor {topBar} />

This configuration adds a top toolbar to the editor. The toolbar includes a spacer for layout adjustment and a button labeled "Click me." When the button is clicked, it triggers an alert message. This setup is useful for placing critical actions or controls at the top of the editor for easy access.

Adding a Bottom Toolbar to the Editor​

<script>
    import { Editor } from "wx-svelte-editor";

    const bottomBar = {
        items: [
            { comp: "spacer" },
            { comp: "button", label: "Click me", onclick: () => alert("clicked") },
        ],
    };
</script>

<Editor {bottomBar} />

This configuration creates a bottom toolbar in the editor. Similar to the top toolbar, it contains a spacer and a button labeled "Click me" that triggers an alert when clicked. This layout is commonly used for actions or settings that are less critical but still need to be readily available.

Adding a Top Toolbar with Form Values​

<script>
    import { Editor } from "wx-svelte-editor";
    import { Switch } from "@wx/svelte-core";

    const topBar = {
        items: [
            { comp: "label", spacer: true, key: "label" },
            { comp: Switch, key: "state" },
        ],
    };

    const values = {
        label: "Product N1",
        state: false
    };
</script>

<Editor {topBar} {values} />

This setup adds a top toolbar that dynamically uses form values to populate its elements. A label displays the value of the "label" key, and a switch toggles the "state" key's value. This configuration is ideal for displaying and adjusting settings or metadata directly within the toolbar.

Creating an Action Menu in the Toolbar​

<script>
    import { Editor } from "wx-svelte-editor";

    const topBar={
        items: [
            {
                comp: "label",
                spacer: true,
                text: "Item X12-A",
            },
            { comp: "separator" },
            {
                icon: "wxi-dots-v",
                collapsed: true,
                layout: "column",
                menu: true,
                items: [
                    {
                        id: "done",
                        comp: "item",
                        text: "Mark as done",
                        handler: buttonClick,
                    },
                    {
                        id: "delete",
                        comp: "button",
                        type: "danger",
                        text: "Delete the item",
                        handler: buttonClick,
                    },
                ],
            },
        ]
    };
</script>

<Editor {topBar} />

This configuration introduces an action menu within the top toolbar. The menu consists of a labeled item, a separator, and a dropdown menu activated by an icon. The dropdown contains options like "Mark as done" and "Delete the item," each with a specific handler function. This is particularly useful for providing contextual actions related to the editor's content or state without cluttering the toolbar.

Form Structure​

The editor widget provides multiple ways to structure and organize the form layout. It supports dividing the form into logical groups, such as batches, sections, or collapsible/accordion-like sections. This flexibility allows developers to create user-friendly interfaces where fields can be grouped and navigated efficiently. Below are the supported configurations:

Dividing Form into Batches with a Single Batch Visible​

The editor allows splitting form fields into separate batches, where only one batch is visible at a time. This is useful for creating step-by-step forms or simplifying complex forms.

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Combo } from "wx-svelte-core";

    registerEditorItem("combo", Combo);

    const batchItems = [
        {
            comp: "text",
            key: "name",
            batch: "main",
            label: "Name",
        },
        {
            key: "theme",
            batch: "cfg",
            comp: "combo",
            label: "Theme",
            options: [
                { id: "light", label: "Light" },
                { id: "dark", label: "Dark" },
            ],
        },
    ];
    
</script>

<Editor {items} activeBatch="cfg" />

In this example, the activeBatch property is set to "cfg", so only the fields assigned to the "cfg" batch will be displayed. This approach is ideal for forms with multiple logical sections that need to be displayed one at a time.

Using Tab Bar to Switch Between Batches​

The editor supports tab-based navigation for switching between batches. This method is suitable for forms with multiple sections where users need to navigate between tabs.

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Tabs, Combo } from "wx-svelte-core";

    registerEditorItem("combo", Combo);

    const options = [
        {
            id: "main",
            label: "Personal",
        },
        {
            id: "cfg",
            label: "Settings",
        },
    ];

    const items = [
        {
            comp: "text",
            key: "name",
            batch: "main",
            label: "Name",
        },
        {
            key: "theme",
            batch: "cfg",
            comp: "combo",
            label: "Theme",
            options: [
                { id: "light", label: "Light" },
                { id: "dark", label: "Dark" },
            ],
        },
    ];

    const activeBatch = $state("cfg");
</script>

<Editor {items} {activeBatch}>
    <Tabs {options} bind:value={activeBatch}></Tabs>
</Editor>

Here, the Tabs component is used to allow users to select which batch to view. The activeBatch binding ensures the editor displays the appropriate fields based on the selected tab.

Grouping Form Fields into Collapsible Sections​

The editor supports organizing fields into collapsible sections, making it easier to manage long forms. Each section can be toggled open or closed.

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Comments } from "wx-svelte-comments";
    
    registerEditorItem("coments", Comments);

    const items = [
        {
            comp: "section",
            key: "common-section",
            label: "Common settings",
        },
        {
            comp: "text",
            key: "name",
            label: "Name",
        },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
        },
        {
            comp: "section",
            key: "comments-section",
            label: "Comments",
        },
        {
            comp: "comments",
            key: "comments",
            section: "comments-section",
        }
    ];
</script>

<Editor {items} />

All fields are rendered within collapsible sections.

Sections like "Common settings" and "Comments" can be collapsed or expanded, allowing users to focus on specific parts of the form.

Displaying Accordion-Like Sections​

Accordion-style sections allow only one section to be open at a time. When a new section is opened, the previously opened section is automatically collapsed.

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Comments } from "wx-svelte-comments";
    
    registerEditorItem("coments", Comments);

    const items = [
        {
            comp: "section",
            key: "common-section",
            label: "Common settings",
            sectionMode: "accordion",
        },
        {
            comp: "text",
            key: "name",
            label: "Name",
        },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
        },
        {
            comp: "section",
            key: "comments-section",
            label: "Comments",
            sectionMode: "accordion",
        },
        {
            comp: "comments",
            key: "comments",
            section: "comments-section",
        }
    ];
</script>

<Editor {items} />

All fields are rendered inside collapsible sections, but only one section can be open at a time.

This configuration is useful for forms where only one section's information needs to be displayed at a time.

Using Modal-Style Sections in the Editor​

Modal sections hide other fields when opened, replacing the top-level fields with the content of the selected section. This is useful for focusing on a specific set of inputs.

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Comments } from "wx-svelte-comments";
    
    registerEditorItem("coments", Comments);

    const items = [
        {
            comp: "text",
            key: "name",
            label: "Name",
        },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
        },
        {
            comp: "section",
            key: "comments-section",
            label: "Comments",
            sectionMode: "exclusive",
        },
        {
            comp: "comments",
            key: "comments",
            section: "comments-section",
        }
    ];
</script>

Fields in sections are hidden by default. Clicking on a section replaces the top-level fields with the section's content.

<Editor {items} />

This approach is ideal for forms where sections need to take full focus, reducing distractions from other fields.

Mixing Fields and Sections in the Editor​

The editor allows combining always-visible fields with collapsible sections. This is useful when some fields need to remain accessible at all times.

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Comments } from "wx-svelte-comments";
    
    registerEditorItem("coments", Comments);

    const items = [
        {
            comp: "text",
            key: "name",
            label: "Name",
        },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
        },
        {
            comp: "section",
            key: "comments-section",
            label: "Comments",
        },
        {
            comp: "comments",
            key: "comments",
            section: "comments-section",
        }
    ];
</script>

While `name` and `descr` fields are always visible, fields below are rendered inside a collapsible section.

<Editor {items} />

This configuration is appropriate for forms where certain critical fields must remain accessible, while others can be grouped into collapsible sections.

Field Rendering​

The editor widget provides functionality for rendering various input controls. These controls include basic input types, advanced components, and specialized widgets like comments and task lists. Each control can be customized with labels, keys, and additional properties to suit specific use cases.

Rendering a Color Select Control in the Editor​

Import ColorSelect control from wx-svelte-core and register it as Editor item:

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { ColorSelect } from "wx-svelte-core";
    
    registerEditorItem("colorselect", ColorSelect);

    const items = [
        {
            comp: "colorselect",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

The color picker control allows users to select a color through a graphical interface. This is ideal for use cases where users need to define a color, such as customizing themes or assigning colors to categories.

Rendering a Date Picker Control in the Editor​

Import DatePicker control from wx-svelte-core and register it as Editor item:

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { DatePicker } from "wx-svelte-core";
    
    registerEditorItem("datepicker", DatePicker);

    const items = [
        {
            comp: "datepicker",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

The date picker control enables users to select a date from a calendar interface. It is useful for scenarios like scheduling, deadline setting, or any date-related input.

Rendering Radio Buttons in the Editor​

Import RadioButtonGroup control from wx-svelte-core and register it as Editor item:

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { RadioButtonGroup } from "wx-svelte-core";
    
    registerEditorItem("radio-group", RadioButtonGroup);

    const items = [
        {
            comp: "radio-group",
            key: "name",
            label: "Name",
            options: [
                {
                    value: "s",
                    label: "Scorpions",
                },
                {
                    value: "m",
                    label: "Muse",
                },
            ]
        }
    ];
</script>

<Editor {items} />

Radio buttons are used to present multiple options to users where only one can be selected. This is suitable for scenarios like selecting preferences or categories.

Rendering a Read-Only Block in the Editor​

This is a built-in control that does not require additional registering.

<script>
    import { Editor } from "wx-svelte-editor";
    
    const items = [
        {
            comp: "readonly",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

The read-only block is designed for displaying static information that cannot be edited. It is useful for showing pre-defined or system-generated data.

Rendering a Rich Select Control in the Editor​

Import RichSelect control from wx-svelte-core and register it as Editor item:

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

The rich select control allows users to choose from a list of options, with additional properties like colors or icons for better visualization. It is ideal for priority selection or categorization.

Rendering a Slider Control in the Editor​

Import Slider control from wx-svelte-core and register it as Editor item:

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Slider } from "wx-svelte-core";
    
    registerEditorItem("slider", Slider);

    const items = [
        {
            comp: "slider",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

The slider control is used for selecting a value within a predefined range. It is commonly used for settings like volume, brightness, or rating systems.

Rendering Editable Text Control in the Editor​

This is a built-in control that does not require additional registering.

<script>
    import { Editor } from "wx-svelte-editor";
    
    const items = [
        {
            comp: "text",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

Editable text control is a basic input field for entering single-line text. It is suitable for simple data entry like names, titles, or short descriptions.

Rendering a Textarea Control in the Editor​

This is a built-in control that does not require additional registering.

<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        {
            comp: "textarea",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

The textarea control provides a multi-line input field for entering longer text. It is ideal for comments, descriptions, or notes.

Adding Comments to the Editor​

Import Comments widget from wx-svelte-comments and register it as Editor item:

<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} />

The comments widget allows users to add, view, and manage comments within the editor. It is useful for collaborative workflows or feedback systems, with user identification and timestamps.

Adding a Task List to the Editor​

Import TasList widget from wx-svelte-tasklist and register it as Editor item:

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { TaskList } from "wx-svelte-tasklist";

    registerEditorItem("tasks", Tasklist);
    const items = [
        {
            comp: "tasks",
            key: "task",
            label: "Task",
        },
    ];

    const data = {
        task: [
            {
                id: 1,
                title: "Task 1",
                status: 1,
            },
        ],
    }
</script>

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

The task list widget integrates task management functionality into the editor. It is suitable for creating and tracking tasks, with fields for task titles and status updates.

Data Handling​

The Editor widget supports dynamic data handling, including real-time updates, validation, and user-driven save actions. Developers can customize the behavior of the Editor widget to match their application's requirements for data consistency and user interaction.

Updating the Data Object Immediately After Changes​

The Editor widget can automatically apply changes to the data object as soon as they occur. This feature is useful when immediate data synchronization is required, such as in collaborative environments or real-time systems.

<script>
    import { Editor } from "wx-svelte-editor";
</script>

<Editor {items} autoApply={true} />

Setting autoApply to true ensures that any changes made within the editor are immediately reflected in the underlying data object without requiring additional user actions.

Saving Data Automatically on Changes​

The Editor widget can trigger automatic data saving whenever changes occur. This is helpful in scenarios where periodic user interaction is not guaranteed, or when minimizing manual save actions is a priority.

<script>
    import { Editor } from "wx-svelte-editor";
</script>

<Editor {items} autoSave={true} />

The autoSave property set to true ensures that all changes are automatically saved, reducing the need for explicit save actions by the user.

Disabling Auto-Save and Requiring Manual User Action​

The Editor widget supports disabling automatic saving, requiring users to explicitly save their changes. This is ideal for workflows where user confirmation or review before saving is necessary.

<script>
    import { Editor } from "wx-svelte-editor";
</script>

<Editor {items} autoSave={false} />

Setting autoSave to false prevents automatic saving, giving users control over when data is saved.

Detecting Changes in Editor Data​

The Editor widget provides detailed information about changes made to the data. This is useful for tracking modifications, implementing custom logic, or highlighting unsaved changes.

interface OnChangeResult {
    key: string;
    value: any;
    update: Record<string, any>;
}
<script>
    <script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name" },
        { comp: "textarea", key: "descr", label: "Description" },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];

    function onchange(ev: OnChangeResult) {
        console.log(`field ${ev.key} was changed to ${ev.value}`);
        console.log("all not saved changes", ev.update);
    }
</script>

<Editor {items} {onchange} />

The onchange event handler provides the field key, its updated value, and a map of all unsaved changes. This allows fine-grained tracking of modifications.

Detecting User-Initiated Save Actions​

The Editor widget can detect when users explicitly request to save data. This is useful for implementing workflows that depend on user actions, such as submitting forms or confirming changes.

interface OnSaveResult {
    changes: string[];
    values: Record<string, any>;
    errors: Record<string, string>;
}
<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name" },
        { comp: "textarea", key: "descr", label: "Description" },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];

    function onsave(ev: OnSaveResult) {
        console.log("modified fields", ev.changes.join());
        if (Object.keys(ev.errors).length > 0)
            console.log("there are not resolved validation errors");
        console.log("latest data snapshot", ev.values);
    }
</script>

<Editor {items} {onsave} />

The onsave event handler provides information about changed fields, the current data state, and any unresolved validation errors. If validation fails, the onsave event will not trigger.

Detecting Validation Status of Data​

The Editor widget allows monitoring of validation results, providing feedback on whether the data is valid or contains errors. This is useful for ensuring data integrity before saving.

interface OnValidationResult {
    values: Record<string, any>;
    errors: Record<string, string>;
}
<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name", validation: v => (v && v.length > 5) },
        { comp: "textarea", key: "descr", label: "Description" },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];

    function onvalidation(ev: OnValidationResult) {
        if (Object.keys(ev.errors).length > 0)
            console.log("validation failed");
        else
            console.log("validation is ok");
        console.log("latest data snapshot", ev.values);
    }
</script>

<Editor {items} {onvalidation} />

The onvalidation event handler provides the current data state and validation errors. It helps identify fields that fail validation and ensures the data meets predefined requirements.

Marking a Field as Required​

The Editor widget allows marking specific fields as required. This ensures that users cannot leave these fields empty, enforcing mandatory data input.

<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        {
            comp: "text",
            key: "name",
            required: true,
        },
    ];
</script>

<Editor {items} />

Setting the required property to true makes the field mandatory. Users must provide a value before proceeding.

Defining Validation Rules for Fields​

The Editor widget supports defining custom validation rules for fields. This ensures that user input adheres to specific criteria, such as format or value range.

<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name",
            validation: val => {
              const regEx = /^[a-zA-Z]+$/;
                return val && regEx.test(val);
            },
            validationMessage: "wrong name format"
        },
    ];
</script>

<Editor {items} />

The validation property defines a function to check the field's value, and validationMessage specifies the error message to display when validation fails. This enables precise control over input requirements.

Localization​

The Editor widget provides support for localization, enabling developers to display labels, messages, and tooltips in different languages. This feature is essential in applications that target users speaking various languages. Localization can be achieved by configuring the widget with a custom set of translations.

Configuring Localization for a Different Language​

<script>
    import { Locale } from "wx-svelte-core";
    import { Editor } from "wx-svelte-editor";
    
  const myLang = {
    "This field is required": "Dieses Feld ist erforderlich",
    "Invalid value": "Ungültiger Wert",
    Yes: "Ja",
    No: "Nein",
    Save: "Speichern",
    Cancel: "Abbrechen",
};
</script>

<Locale words={{ editor:myLang }}>
  <Editor />
</Locale>

This configuration allows the Editor widget to display text in German. The myLang object contains key-value pairs where the keys are the default English strings used by the Editor, and the values are their German translations. The Locale component wraps the Editor and applies the specified translations.

This setup is useful for applications that need to adapt to users in different regions. For instance, in a multilingual interface, the developer can define multiple language objects and dynamically switch between them based on the user's preferences or browser settings. It is important to ensure all required phrases in the Editor are translated to maintain a consistent user experience.

Styling​

Customizing the appearance of the editor components by applying specific styles.

Defining a CSS Class for the Editor's Box​

<script>
    import { Editor } from "wx-svelte-editor";
</script>

<Editor css="myBox" />

This feature allows assigning a CSS class to the editor's main container element. The css attribute can be used to apply custom styles to the editor box, enabling developers to modify its visual design to align with the application's theme or layout.

In this example, the myBox CSS class should be predefined in the stylesheet. This is helpful when the editor needs to match the surrounding UI elements or have distinct visual characteristics, such as specific padding, borders, or background colors.