> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CodeEditor

> Редактируйте и отображайте код в редакторе Monaco, оформленном в стиле темы Twenty.

## Обзор

`CodeEditor` отображает редактор [Monaco](https://microsoft.github.io/monaco-editor/), соответствующий теме Twenty в светлом и тёмном режимах. `CodeEditorHeader` добавляет над ним панель для заголовка, вкладок или действий. Оба компонента доступны из `twenty-ui/components/code-editor`, отдельной точки входа, поэтому остальная часть Twenty UI работает без Monaco.

**Light**

[Пример редактора кода (light)](https://storybook.twenty.com/iframe.html?id=ui-components-codeeditor--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример редактора кода (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-codeeditor--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-codeeditor--display)

## Использование

```tsx theme={null}
import { CodeEditor, CodeEditorHeader } from 'twenty-ui/components/code-editor';

export const WorkspaceEditor = () => (
  <>
    <CodeEditorHeader title="workspace.json" />
    <CodeEditor
      variant="with-header"
      language="json"
      defaultValue={JSON.stringify(
        { name: 'Acme', plan: 'Pro', seats: 12 },
        null,
        2,
      )}
      height={160}
    />
  </>
);
```

## Настройка

Установите необязательные peer-зависимости редактора:

```bash theme={null}
yarn add @monaco-editor/react monaco-editor
```

Редактор загружает установленный пакет `monaco-editor`, а не копию из CDN. Monaco запускает языковые функции, такие как проверка и автодополнение, в веб-воркерах, а создание этих воркеров зависит от вашего сборщика. Перед монтированием редактора определите `MonacoEnvironment.getWorker`, как описано в [руководстве по интеграции ESM для Monaco](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md). Без этого редактор всё равно отображается, но языковые функции недоступны.

Редактор кода пока не работает внутри [фронтенд-компонентов](https://docs.twenty.com/ru/developers/extend/apps/layout/front-components.md).

## Управляемое содержимое

```tsx theme={null}
import { useState } from 'react';
import { isDefined } from 'twenty-ui/utilities';
import { CodeEditor } from 'twenty-ui/components/code-editor';

export const PayloadEditor = () => {
  const [payload, setPayload] = useState('{\n  "name": "Acme"\n}');

  return (
    <CodeEditor
      language="json"
      value={payload}
      onChange={(value) => {
        if (isDefined(value)) {
          setPayload(value);
        }
      }}
      height={200}
    />
  );
};
```

`CodeEditorProps` включает контракт установленного редактора Monaco React. `onChange(value, event)` получает содержимое (`string | undefined`) и исходный `IModelContentChangedEvent`, включая изменённые диапазоны, версию и сведения об отмене/повторе. Обработайте значение undefined на границе, где вашему приложению требуется строка.

`beforeMount(monaco)` выполняется после определения темы Twenty и до создания редактора. `onMount(editor, monaco)` получает экземпляр редактора после применения выбранной темы. `onValidate(markers)` получает диагностику Monaco без изменений. `overrideServices` передаётся при создании редактора.

Загрузчик Twenty отображается до загрузки Monaco. Передайте `loading`, чтобы настроить это содержимое, или установите `isLoading`, чтобы оно оставалось видимым, пока загружаются ваши данные. `isLoading` размонтирует существующий редактор и следует правилам Monaco React по удалению модели.

## Модели и значения

Используйте `defaultValue`, `defaultLanguage` и `defaultPath` для инициализации неконтролируемой модели либо `value`, `language` и `path` для обновлений. Эти свойства сохраняют поведение Monaco React, включая правила выбора начальных значений и повторного использования URI существующей модели. Изменение `defaultValue` не перезаписывает уже существующую модель.

Изменение `path` выбирает или создаёт модель. `saveViewState` по умолчанию имеет значение true и восстанавливает состояние курсора и прокрутки модели при возврате. `line` показывает строку при монтировании редактора или изменении свойства. `keepCurrentModel` по умолчанию имеет значение false; при true вызывающая сторона отвечает за удаление сохранённой модели.

```tsx theme={null}
import { CodeEditor } from 'twenty-ui/components/code-editor';

export const FileEditor = () => (
  <CodeEditor
    defaultPath="file:///workspace/settings.json"
    defaultLanguage="json"
    defaultValue={'{\n  "name": "Acme"\n}'}
    saveViewState
  />
);
```

## Нативная интеграция

`ref` указывает на внешний div группы Twenty, который по умолчанию использует `display: contents`. Это сохраняет секцию Monaco в разметке родительского элемента с размерами и flex. Внешний div не имеет измеримого блока разметки.

Используйте `containerProps` для нативных атрибутов, обработчиков событий, класса и стиля внешнего div. Для фона, границы, внутренних отступов и размеров требуется переопределить его `display`. Для стилей разметки и измеримого нативного ref предпочтительнее использовать секцию `wrapperProps` Monaco React. `className` нацелен на div контейнера редактора внутри этой секции; используйте `onMount` для экземпляра редактора Monaco.

Секция Monaco React содержит собственное содержимое загрузки до готовности редактора. Во время начальной настройки включённого Monaco или при `isLoading` Twenty отображает отдельный загрузчик без `wrapperProps` или `className`. Внешние `containerProps` и `ref` остаются доступными в этих состояниях.

```tsx theme={null}
import { useRef } from 'react';
import { CodeEditor } from 'twenty-ui/components/code-editor';

export const NamedEditor = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <CodeEditor
      ref={containerRef}
      containerProps={{ id: 'payload-editor' }}
      wrapperProps={{ 'data-editor-surface': 'payload' }}
      options={{ ariaLabel: 'Payload code' }}
    />
  );
};
```

## Добавить заголовок

```tsx theme={null}
import { CodeEditor, CodeEditorHeader } from 'twenty-ui/components/code-editor';
import { Button } from 'twenty-ui/primitives/input';

type ScriptEditorProps = {
  script: string;
  onRun: () => void;
};

export const ScriptEditor = ({ script, onRun }: ScriptEditorProps) => (
  <div>
    <CodeEditorHeader
      title="index.ts"
      endElement={
        <Button size="sm" onClick={onRun}>
          Run
        </Button>
      }
    />
    <CodeEditor language="typescript" value={script} variant="with-header" />
  </div>
);
```

`variant="with-header"` убирает верхнюю границу редактора, чтобы он соединялся с заголовком. Используйте `borderless`, если редактор находится внутри поверхности, у которой уже есть граница.

Заголовок принимает содержимое узла в `title`, `startElement` и `endElement`. Используйте фрагменты для нескольких вкладок или действий. Нативные props, `className`, `style` и `ref` применяются к его корневому div. Используйте `render`, чтобы заменить этот корневой элемент, например `render={<header />}`. Prop `title` задаёт видимое содержимое; чтобы установить нативный атрибут title, передайте его элементу, указанному в `render`.

## Размер и внешний вид

По умолчанию редактор имеет высоту 450px и ширину 100%. `width` и `height` принимают пиксели или значение длины CSS.

Размеры применяются в следующем порядке:

1. `resizable` начинает с отображаемой высоты, включая значения длины CSS, в пределах от 50px до 500px для маркера изменения размера. После монтирования Monaco он добавляет маркер. Перетаскивание или ввод с клавиатуры затем устанавливает высоту в пикселях. Изменение `height` сбрасывает её в тех же пределах.
2. В противном случае `autoHeight` использует высоту содержимого Monaco. Явная или используемая по умолчанию высота применяется до измерения содержимого.
3. В противном случае применяется явное или используемое по умолчанию значение `height`.

Monaco React по умолчанию включает `automaticLayout`. Если вы отключите его в `options`, ваше приложение должно вызывать `editor.layout()` при изменении размера контейнера. Нативный `wrapperProps.style` передаётся без изменений и может переопределить ширину или высоту секции.

Передайте локализованный `resizeLabel`, чтобы задать название маркера изменения размера для программ чтения с экрана.

Twenty задаёт значения по умолчанию для шрифта, форматирования, полосы прокрутки, мини-карты и внутренних отступов. `contentPadding="comfortable"` также увеличивает расстояние между номерами строк и кодом. `options` вызывающей стороны заменяют соответствующие значения по умолчанию, включая весь объект `padding` и `lineDecorationsWidth`.

Явно заданный `theme` имеет приоритет над `options.theme`; в противном случае редактор следует светлой или тёмной теме Twenty. Определяйте пользовательские темы Monaco в `beforeMount`. Темы Monaco являются глобальными, поэтому изменение одной из них влияет на другие редакторы Monaco на той же странице. `transparentBackground` независимо управляет внешним видом обёртки Twenty.

## Проверка

Monaco сообщает о собственной диагностике, например об ошибках синтаксиса JSON, через `onValidate`. Чтобы добавить собственную диагностику, верните данные маркеров из `setMarkers`. Он выполняется при монтировании, выборе модели и каждом изменении содержимого модели, включая обновления контролируемого значения, и заменяет пользовательские маркеры для текущей модели.

## Клавиатура

Когда редактор находится в фокусе, он предотвращает распространение событий клавиатуры. Обработчики клавиш React в родительских компонентах и сочетания клавиш на уровне документа не получают нажатия клавиш, вводимые в редакторе.

## Свойства

### CodeEditor

**autoHeight** `boolean` (default: false)

Grows the editor to fit its content instead of using `height`. Ignored when `resizable` is set.

**beforeMount** `BeforeMount`

Called with Monaco before editor creation, after the Twenty theme has been defined. Use it to register custom themes or languages.

**className** `string`

Class applied to the Monaco editor-container div.

**containerProps** `Omit\<Omit\<DetailedHTMLProps\<HTMLAttributes\<HTMLDivElement\>, HTMLDivElement\>, "ref"\>, "children"\>`

Native props, className and style for the outer Twenty group div. Its default `display: contents` preserves the Monaco section's parent sizing and flex layout without creating a layout box. Background, border, padding and dimensions require overriding `display`. Prefer `wrapperProps` for section layout styles. Its keyboard handler runs before focused editor keystrokes stop propagating.

**contentPadding** `"comfortable" | "default"` (default: default)

`default` supplies top and bottom padding. `comfortable` also widens the gap between line numbers and code. Explicit Monaco options override these defaults.

**defaultLanguage** `string`

Initial Monaco language for a newly created model.

**defaultPath** `string`

Initial model URI, used when `path` is omitted.

**defaultValue** `string`

Initial content for a model created by Monaco React.

**height** `string | number` (default: 450)

Editor height in pixels or as a CSS length, defaulting to 450px. Resizing starts from this rendered height and resets when this prop changes. Auto-height uses it until content is measured.

**isLoading** `boolean` (default: false)

Shows a loader at the editor height instead of the editor. A loader also shows while Monaco loads.

**keepCurrentModel** `boolean` (default: false)

Keeps the current model when the editor unmounts. Defaults to false. The caller owns disposal of retained models.

**language** `string`

Monaco language identifier for highlighting and language services, such as `json` or `typescript`.

**line** `number`

Line revealed when the editor mounts or this prop changes.

**loading** `ReactNode` (default: \<Loader />)

Content shown while Monaco loads or `isLoading` is true. Defaults to the Twenty Loader.

**onChange** `OnChange`

Monaco React callback with the full content (string or undefined) and the original IModelContentChangedEvent.

**onMount** `OnMount`

Called when the editor is ready, with the editor instance and the Monaco namespace. The selected theme is already applied.

**onValidate** `OnValidate`

Called with the markers Monaco reports after validating the content, such as JSON syntax errors.

**options** `IStandaloneEditorConstructionOptions`

Monaco editor options merged over Twenty defaults. Explicit values, including padding, replace the corresponding defaults. The `theme` prop takes precedence over `options.theme`.

**overrideServices** `IEditorOverrideServices`

Monaco services passed through when the editor is created.

**path** `string`

URI of the current model. Changing it selects or creates a model using Monaco React behavior.

**ref** `Ref\<HTMLDivElement\>`

Ref to the outer Twenty group div, which has no measurable layout box with its default `display: contents`. Use `wrapperProps` for a measurable section ref or `onMount` for the Monaco editor instance.

**resizable** `boolean` (default: false)

Adds a height resize handle after Monaco mounts, bounded from 50px to 500px. Takes precedence over autoHeight. A changed height prop resets the resized height within these bounds.

**resizeLabel** `string` (default: Resize editor)

Accessible name of the resize handle. Pass a localized label when `resizable` is enabled.

**saveViewState** `boolean` (default: true)

Preserves Monaco React view state between model changes. Defaults to true.

**setMarkers** `((value: string) =\> IMarkerData[])`

Returns custom validation markers for the current model content. Runs on mount, model selection and content changes, including controlled updates.

**theme** `string` (default: Twenty theme)

Monaco theme name. Takes precedence over `options.theme`, which takes precedence over the Twenty theme. Define custom themes in `beforeMount`.

**transparentBackground** `boolean`

Removes the editor background so the surrounding surface shows through.

**value** `string`

Content of the editor. Pair it with `onChange` to control the editor.

**variant** `"borderless" | "default" | "with-header"` (default: default)

Border treatment: `default` draws a rounded border, `with-header` attaches the editor below a `CodeEditorHeader`, and `borderless` removes the border.

**width** `string | number` (default: 100%)

Width of the Monaco React section, in pixels or as a CSS length.

**wrapperProps** `object`

Native props passed unchanged to the Monaco React section around the editor and Monaco React loading content. Use this section for layout styles and a measurable native ref. Not applied to the separate Twenty loader during initial Monaco configuration or `isLoading`. Native styles can override the section sizing.

### CodeEditorHeader

**className** `string`

Additional CSS class applied to the root element.

**endElement** `ReactNode`

Content shown at the end of the header, such as actions. Use a fragment for multiple elements.

**ref** `Ref\<HTMLDivElement\>`

Ref forwarded to the rendered root element, a div by default.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replace the root div or compose it with another component. Native props and refs target the rendered root.

**startElement** `ReactNode`

Content shown at the start of the header, before the title, such as tabs. Use a fragment for multiple elements.

**style** `CSSProperties`

Inline styles applied to the root element.

**title** `ReactNode`

Content shown after `startElement`. This is visible header content, not the native HTML title attribute.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.