Установка и инициализация

Установка

Для установки библиотеки React Editor выполните следующую команду:

//npm
npm install @svar-ui/react-editor

//yarn
yarn add @svar-ui/react-editor

Инициализация

Виджет Editor предоставляет гибкие варианты инициализации, позволяя разработчикам задавать поля ввода, предзаполнять значения и переключать виджет между редактируемым и режимом только для чтения. Поддерживается широкий набор конфигураций для различных сценариев использования.

Инициализация виджета Editor

Editor включает встроенные элементы управления: "text", "textarea", "checkbox", "section" и "readonly".

Чтобы использовать другие элементы управления, необходимо импортировать их из библиотеки @svar-ui/react-core и зарегистрировать их как элементы Editor с помощью соответствующего хелпера registerEditorItem:

import { Editor } from "@svar-ui/react-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"
};

export default function Example() {
  return <Editor items={items} values={values} />;
}

Этот пример демонстрирует инициализацию виджета Editor со списком полей ввода и соответствующими значениями. Массив items определяет структуру формы, где каждый объект задаёт тип поля (comp), уникальный ключ (key) и понятную пользователю метку (label). Объект values предоставляет начальные значения для этих полей, сопоставляемые по ключам. Такая конфигурация удобна для создания базовой формы с предзагруженными данными — например, при редактировании существующей записи.

Инициализация виджета Editor в режиме только для чтения

import { Editor } from "@svar-ui/react-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"
};

export default function ReadOnlyExample() {
  return <Editor items={items} values={values} readonly={true} />;
}

Этот пример показывает инициализацию виджета Editor в режиме только для чтения. Свойство readonly установлено в true, что запрещает пользователям изменять поля ввода. Массив items и объект values определяются так же, как и в режиме редактирования. Такая конфигурация подходит для сценариев, где данные формы нужно отобразить без возможности редактирования — например, в интерфейсе просмотра или аудита.

Полный код инициализации

Чтобы увидеть виджет в действии, добавьте несколько элементов.

import { Editor } from "@svar-ui/react-editor";
import { Willow } from "@svar-ui/react-core";

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"
};

export default function App() {
  return (
    <Willow>
      <Editor items={items} values={values} />
    </Willow>
  );
}

примечание

Для корректной инициализации рекомендуется применять тему на верхнем уровне приложения. Если вы используете компонент Editor отдельно, не забудьте обернуть его в тему (в примере выше применяется Willow).

Визуальные темы

Виджет поставляется в двух визуальных стилях — светлом и тёмном, управляемых тегом темы.

import { Willow, WillowDark } from "@svar-ui/react-core";

export function LightThemeExample() {
  return (
    <Willow>
      <Editor />
    </Willow>
  );
}

export function DarkThemeExample() {
  return (
    <WillowDark>
      <Editor />
    </WillowDark>
  );
}