React-компонент BlokEditor

Раздельный путь монтирования, стоящий за `<BlokEditor>`: экземпляр вы создаёте сами и передаёте ему точку монтирования. `useBlok` принимает ТЕ ЖЕ опции, что и компонент, — его тип конфигурации `UseBlokConfig`, то есть `BlokConfig` без `holder` (элементом монтирования владеет адаптер) плюс `width` уровня адаптера. Подмножество, реактивное после монтирования, описано на самом `UseBlokConfig`: `readOnly`, `hideToolbar`, `toolbarPosition`, `inlineToolbar`, `autofocus`, `theme`, `width`, `placeholder`, `style.tokens`, `i18n` и `data` синхронизируются на месте на том же экземпляре; любая другая опция считывается один раз при создании редактора. Он возвращает null, пока редактора не существует (SSR, первый рендер). React принимает вторым аргументом СПИСОК зависимостей `deps`; Vue принимает реактивный источник конфигурации (ref или геттер) и ОДИН `recreateKey` вторым аргументом. Эквивалент в Angular — директива `[blokContent]` (`BlokContentDirective`), которая строит экземпляр в своём собственном хост-элементе и отдаёт его через сигнал `instance` / output `(ready)`.

import { useBlok, BlokContent } from '@bloklabs/react';
import { Header, Paragraph } from '@bloklabs/core/tools';

export function Editor() {
  const editor = useBlok({
    tools: { paragraph: Paragraph, header: Header },
    readOnly: false,
  });

  return <BlokContent editor={editor} className="my-editor" />;
}

Точка монтирования для экземпляра, созданного через `useBlok`. Рендерит `<div>` и переносит в него откреплённый holder редактора. Единственный собственный проп: `editor: Blok | null` (`BlokContentProps`) — передайте null до появления экземпляра, и компонент просто отрисует пустой контейнер. В React он к тому же расширяет `React.HTMLAttributes<HTMLDivElement>`, поэтому `className`, `id` и остальное пробрасываются на этот div, а ref пробрасывается на него же. Аналог в Angular — директива `[blokContent]`, которая создаёт экземпляр сама, а не получает его.

import { useBlok, BlokContent } from '@bloklabs/react';

const editor = useBlok({ tools });

// `editor` is null until the instance exists — BlokContent handles that
<BlokContent editor={editor} className="prose" />

Регистрирует значения по умолчанию для Blok на уровне всего приложения, чтобы каждый редактор внутри наследовал общий реестр инструментов, тему или конфигурацию i18n, а не повторял их для каждого экземпляра. В React это `<BlokProvider defaults={…}>` (плюс `useBlokDefaults()`, чтобы прочитать их обратно), во Vue — `provideBlok(defaults)`, вызванный в `setup` родителя (за ним стоит ключ внедрения `BLOK_DEFAULT_CONFIG`, а для чтения есть `useBlokDefaults()`), в Angular — `provideBlok(defaults)`, возвращающий `EnvironmentProviders` для массива `providers` (за ним стоит токен внедрения `BLOK_DEFAULT_CONFIG`). Правило слияния, одинаковое во всех трёх: заданное значение конфигурации отдельного экземпляра перекрывает значение по умолчанию, КРОМЕ `tools`, где два реестра сливаются — общий реестр складывается с добавлениями конкретного экземпляра, а не заменяется ими.

// React
import { BlokProvider } from '@bloklabs/react';

<BlokProvider defaults={{ theme: 'dark', tools: sharedTools }}>
  <App />
</BlokProvider>

// Vue — inside a parent component's setup()
import { provideBlok } from '@bloklabs/vue';
provideBlok({ theme: 'dark', tools: sharedTools });

// Angular
import { provideBlok } from '@bloklabs/angular';
bootstrapApplication(AppComponent, {
  providers: [provideBlok({ theme: 'dark', tools: sharedTools })],
});