ФреймворкJavaScript

useBlokReady(): готовность редакторов в области

Живая готовность редакторов Blok внутри поддерева DOM — булево значение, от которого можно рендерить: хук useBlokReady(options) в @bloklabs/react, composable useBlokReady(options) в @bloklabs/vue (возвращает ref) и injectBlokReady(options) в @bloklabs/angular (возвращает signal). Все три обёртки используют один и тот же реестр ядра за Blok.readyState() и Blok.subscribeReady(), поэтому разойтись не могут. Они отвечают на вопрос, который на самом деле есть у списка комментариев или формы: готовы ли МОИ редакторы? Ограничьте область тем ref, который у вас уже есть на контейнере, — тогда посторонний редактор на странице не сможет держать проверку закрытой. Это живой сигнал, а не одноразовая защёлка: редактор, смонтированный позже, снова закрывает проверку, а с settleOn: 'rendered' — и каждый повторный рендер при смене data. Область без редакторов считается готовой, поэтому пустой список не требует отдельной ветки. Значение начинается с false и впервые читается по-настоящему, когда элемент области примонтирован (React — эффект после монтирования, Vue — onMounted, Angular — afterNextRender); запрошенная, но ещё не разрешённая область даёт false, а не молчаливый откат ко всей странице: лишнее ожидание безопасно, недостаточное является ошибкой.

Обновлено 22 июл. 2026 г.Редактировать на GitHub

Как получить экземпляр редактора

Методы ниже вызываются на редакторе, созданном через new Blok(). Они доступны после того, как разрешится editor.isReady.

TypeScript

// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');

Методы

useBlokReady(options?)

boolean

True, когда каждый редактор Blok в заданной области достиг готовности. Пересчитывается при каждом изменении готовности (создание, загрузка, смена состояния рендера, уничтожение) и отписывается при размонтировании.

Параметры

Параметр	Тип	Обязательный	По умолчанию	Описание
`options.within`	`RefObject<Element \| null> \| Element \| null`	—	—	Ограничить ожидание редакторами, смонтированными внутри этого элемента. Ref перечитывается при каждом изменении готовности, поэтому тот, что подключается после первого рендера, будет учтён. Опустите его, чтобы наблюдать за всеми редакторами на странице.
`options.settleOn`	`'ready' \| 'rendered'`	—	`'ready'`	'ready' достигается, когда каждый редактор завершил загрузку. 'rendered' дополнительно ждёт, пока его содержимое окажется в DOM, — это ожидание взводится заново при каждом повторном рендере после загрузки.

TypeScript

const ready = useBlokReady({ within: listRef, settleOn: 'rendered' });

TypeScript

import { useRef } from 'react';
import { BlokEditor, useBlokReady } from '@bloklabs/react';

export function Comments({ comments }) {
  const listRef = useRef<HTMLDivElement>(null);

  // True once every editor inside listRef has its content in the DOM.
  // Re-arms whenever a comment's data changes and it re-renders.
  const ready = useBlokReady({ within: listRef, settleOn: 'rendered' });

  return (
    <>
      <div ref={listRef}>
        {comments.map((c) => (
          <BlokEditor key={c.id} data={c.body} readOnly />
        ))}
      </div>
      {!ready && <Skeleton />}
      <Composer autoFocus={ready} />
    </>
  );
}

// Vue — a ref:
// const list = ref<HTMLElement | null>(null);
// const ready = useBlokReady({ within: list, settleOn: 'rendered' });

// Angular — a signal, from an injection context:
// @ViewChild('list', { static: true }) listRef!: ElementRef<HTMLElement>;
// readonly ready = injectBlokReady({
//   within: () => this.listRef?.nativeElement ?? null,
//   settleOn: 'rendered',
// });