View-рендерер: показ документов без редактора

Показывайте сохранённые документы, не платя за редактор. Подпуть @bloklabs/core/view синхронно и без DOM превращает OutputData в семантический HTML или простой текст — он работает в Node, воркерах и React Server Components, — поэтому страницам «только для чтения» (публикации, превью, поисковая индексация, письма) больше не нужны экземпляр редактора, его бандл и асинхронное ожидание готовности. Каждое строчное поле санитизируется по составленному allowlist до подстановки, а политика URL-схем идентична редакторской; используйте функции вместе с defineBlokSchema — и документы отображаются под тем же составом санитизации, который их создал (если набор строчных инструментов меняется на лету через tools.setInlineToolbar, пересоберите схему, чтобы отображение не отстало). Для React пакет @bloklabs/react даёт <BlokView> и useBlokView, заменяющие <BlokEditor readOnly> в местах, где документ только показывается.

import { blocksToHtml } from '@bloklabs/core/view';

const html = blocksToHtml(savedData, {
  schema: schema.viewSchema,
  onUnknownBlock: 'comment',
  renderers: {
    // Wins over the built-in paragraph emitter
    paragraph: (data, ctx) =>
      `<p class="lead">${ctx.sanitizeInline(String(data.text ?? ''))}</p>`,
  },
});

Показывайте сохранённые документы, не платя за редактор. Подпуть @bloklabs/core/view синхронно и без DOM превращает OutputData в семантический HTML или простой текст — он работает в Node, воркерах и React Server Components, — поэтому страницам «только для чтения» (публикации, превью, поисковая индексация, письма) больше не нужны экземпляр редактора, его бандл и асинхронное ожидание готовности. Каждое строчное поле санитизируется по составленному allowlist до подстановки, а политика URL-схем идентична редакторской; используйте функции вместе с defineBlokSchema — и документы отображаются под тем же составом санитизации, который их создал (если набор строчных инструментов меняется на лету через tools.setInlineToolbar, пересоберите схему, чтобы отображение не отстало). Для React пакет @bloklabs/react даёт <BlokView> и useBlokView, заменяющие <BlokEditor readOnly> в местах, где документ только показывается.

import { blocksToPlainText } from '@bloklabs/core/view';

// A 160-character preview for a card or meta description
const preview = blocksToPlainText(savedData).slice(0, 160);

// Content length (characters the user typed) vs transport size (bytes on the wire)
const contentLength = blocksToPlainText(savedData).length;
const transportBytes = new TextEncoder().encode(JSON.stringify(savedData)).length;
if (transportBytes > 500 * 1024) {
  throw new Error('Document exceeds the 500KB save limit');
}

Показывайте сохранённые документы, не платя за редактор. Подпуть @bloklabs/core/view синхронно и без DOM превращает OutputData в семантический HTML или простой текст — он работает в Node, воркерах и React Server Components, — поэтому страницам «только для чтения» (публикации, превью, поисковая индексация, письма) больше не нужны экземпляр редактора, его бандл и асинхронное ожидание готовности. Каждое строчное поле санитизируется по составленному allowlist до подстановки, а политика URL-схем идентична редакторской; используйте функции вместе с defineBlokSchema — и документы отображаются под тем же составом санитизации, который их создал (если набор строчных инструментов меняется на лету через tools.setInlineToolbar, пересоберите схему, чтобы отображение не отстало). Для React пакет @bloklabs/react даёт <BlokView> и useBlokView, заменяющие <BlokEditor readOnly> в местах, где документ только показывается.

import { htmlTextContent } from '@bloklabs/core/view';

htmlTextContent('<b>Intro</b> &amp; more'); // → 'Intro & more'

Показывайте сохранённые документы, не платя за редактор. Подпуть @bloklabs/core/view синхронно и без DOM превращает OutputData в семантический HTML или простой текст — он работает в Node, воркерах и React Server Components, — поэтому страницам «только для чтения» (публикации, превью, поисковая индексация, письма) больше не нужны экземпляр редактора, его бандл и асинхронное ожидание готовности. Каждое строчное поле санитизируется по составленному allowlist до подстановки, а политика URL-схем идентична редакторской; используйте функции вместе с defineBlokSchema — и документы отображаются под тем же составом санитизации, который их создал (если набор строчных инструментов меняется на лету через tools.setInlineToolbar, пересоберите схему, чтобы отображение не отстало). Для React пакет @bloklabs/react даёт <BlokView> и useBlokView, заменяющие <BlokEditor readOnly> в местах, где документ только показывается.

import { outlineFromOutputData } from '@bloklabs/core/view';

const toc = outlineFromOutputData(savedData);
// → [{ id: 'h1', level: 1, text: 'Getting Started' }, ...]

Показывайте сохранённые документы, не платя за редактор. Подпуть @bloklabs/core/view синхронно и без DOM превращает OutputData в семантический HTML или простой текст — он работает в Node, воркерах и React Server Components, — поэтому страницам «только для чтения» (публикации, превью, поисковая индексация, письма) больше не нужны экземпляр редактора, его бандл и асинхронное ожидание готовности. Каждое строчное поле санитизируется по составленному allowlist до подстановки, а политика URL-схем идентична редакторской; используйте функции вместе с defineBlokSchema — и документы отображаются под тем же составом санитизации, который их создал (если набор строчных инструментов меняется на лету через tools.setInlineToolbar, пересоберите схему, чтобы отображение не отстало). Для React пакет @bloklabs/react даёт <BlokView> и useBlokView, заменяющие <BlokEditor readOnly> в местах, где документ только показывается.

import { defineBlokSchema, blocksToHtml } from '@bloklabs/core/view';
import { Header, Paragraph } from '@bloklabs/core/tools';

const schema = defineBlokSchema({
  tools: { paragraph: Paragraph, header: Header },
});

const editor = new Blok({ holder: 'editor', ...schema.editorConfig });
const html = blocksToHtml(savedData, { schema: schema.viewSchema });

Показывайте сохранённые документы, не платя за редактор. Подпуть @bloklabs/core/view синхронно и без DOM превращает OutputData в семантический HTML или простой текст — он работает в Node, воркерах и React Server Components, — поэтому страницам «только для чтения» (публикации, превью, поисковая индексация, письма) больше не нужны экземпляр редактора, его бандл и асинхронное ожидание готовности. Каждое строчное поле санитизируется по составленному allowlist до подстановки, а политика URL-схем идентична редакторской; используйте функции вместе с defineBlokSchema — и документы отображаются под тем же составом санитизации, который их создал (если набор строчных инструментов меняется на лету через tools.setInlineToolbar, пересоберите схему, чтобы отображение не отстало). Для React пакет @bloklabs/react даёт <BlokView> и useBlokView, заменяющие <BlokEditor readOnly> в местах, где документ только показывается.

import { blocksToViewNodes } from '@bloklabs/core/view';

const nodes = blocksToViewNodes(savedData);
// → [{ tag: 'p', attrs: {}, children: [{ text: 'Hello' }] }]

Показывайте сохранённые документы, не платя за редактор. Подпуть @bloklabs/core/view синхронно и без DOM превращает OutputData в семантический HTML или простой текст — он работает в Node, воркерах и React Server Components, — поэтому страницам «только для чтения» (публикации, превью, поисковая индексация, письма) больше не нужны экземпляр редактора, его бандл и асинхронное ожидание готовности. Каждое строчное поле санитизируется по составленному allowlist до подстановки, а политика URL-схем идентична редакторской; используйте функции вместе с defineBlokSchema — и документы отображаются под тем же составом санитизации, который их создал (если набор строчных инструментов меняется на лету через tools.setInlineToolbar, пересоберите схему, чтобы отображение не отстало). Для React пакет @bloklabs/react даёт <BlokView> и useBlokView, заменяющие <BlokEditor readOnly> в местах, где документ только показывается.

import { BlokView } from '@bloklabs/react';
import { schema } from './schema';
import '@bloklabs/core/view.css'; // opt-in block-spacing baseline

export function Article({ saved }: { saved: OutputData }) {
  return (
    <BlokView
      data={saved}
      schema={schema.viewSchema}
      toolAttributes
      blockIds
      id="article-body"
      className="prose"
    />
  );
}

Показывайте сохранённые документы, не платя за редактор. Подпуть @bloklabs/core/view синхронно и без DOM превращает OutputData в семантический HTML или простой текст — он работает в Node, воркерах и React Server Components, — поэтому страницам «только для чтения» (публикации, превью, поисковая индексация, письма) больше не нужны экземпляр редактора, его бандл и асинхронное ожидание готовности. Каждое строчное поле санитизируется по составленному allowlist до подстановки, а политика URL-схем идентична редакторской; используйте функции вместе с defineBlokSchema — и документы отображаются под тем же составом санитизации, который их создал (если набор строчных инструментов меняется на лету через tools.setInlineToolbar, пересоберите схему, чтобы отображение не отстало). Для React пакет @bloklabs/react даёт <BlokView> и useBlokView, заменяющие <BlokEditor readOnly> в местах, где документ только показывается.

import { useBlokView } from '@bloklabs/react';

function RowLabel({ saved }: { saved: OutputData }) {
  const content = useBlokView(saved, { schema: schema.viewSchema });
  return <label>{content}</label>;
}