Фреймворк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

Параметры

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

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',
// });