@bloklabs/react 1.16.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloklabs/react",
-  "version": "1.16.1",
+  "version": "2.1.0",
   "description": "React block editor — official React bindings for Blok, the headless Notion-like rich text editor. Hooks and components that render blocks and save to JSON.",
   "license": "Apache-2.0",
   "author": "JackUait",
@@ -43,8 +43,7 @@
   },
   "files": [
     "dist",
-    "types",
-    "src"
+    "types"
   ],
   "publishConfig": {
     "access": "public"
@@ -54,7 +53,7 @@
     "test": "yarn run -T vitest run"
   },
   "peerDependencies": {
-    "@bloklabs/core": "^1.16.1",
+    "@bloklabs/core": "^2.1.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }

package/types/index.d.ts

@@ -107,6 +107,29 @@ export function useBlok(
  */
 export declare const BlokContent: React.ForwardRefExoticComponent<BlokContentProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Props for the BlokTitle component.
+ * Div attributes pass through. Children are not rendered: the div belongs to Blok.
+ */
+export type BlokTitleProps = {
+  /** The Blok editor instance, or null while it is not ready. */
+  editor: Blok | null;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+
+/**
+ * Places the editor's page title in a div of your own, through `editor.title.mount`.
+ * The editor needs `pageTitle` set: this component only moves the title.
+ * On unmount the title goes back above the first block.
+ *
+ * @example
+ * ```tsx
+ * const [editor, setEditor] = useState<Blok | null>(null);
+ * <BlokTitle editor={editor} />
+ * <BlokEditor ref={setEditor} pageTitle />
+ * ```
+ */
+export declare const BlokTitle: React.ForwardRefExoticComponent<BlokTitleProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Props for the BlokEditor component — all useBlok config (except `onReady`,
  * re-typed to receive the ready instance) plus every standard HTML div attribute
@@ -311,6 +334,19 @@ export interface InsertSpec {
   caret?: CaretTarget;
 }
 
+/** Spec for {@link UseBlocksApi.create}. */
+export interface CreateSpec {
+  type?: string;
+  data?: BlockToolData;
+  /** `null` is the root. Omitted: the `before`/`after` sibling's parent, or the root. */
+  parentId?: string | null;
+  /** Defaults to `'end'`. */
+  position?: InsertPosition;
+  id?: string;
+  tunes?: { [name: string]: BlockTuneData };
+  focus?: boolean;
+}
+
 /**
  * One node of a pre-built nested subtree for {@link UseBlocksApi.insertTree}.
  *
@@ -421,7 +457,7 @@ export interface UseBlocksApi {
    *
    * `config` (optional {@link MarkdownImportConfig}) is forwarded to the
    * converter so custom-tool consumers can map markdown nodes into their tools
-   * (`toolMap`/`onUnknownNode`), toggle GFM, or add micromark/mdast extensions.
+   * (`toolMap`/`onUnknownNode`) or toggle GFM.
    *
    * Returns ALL created {@link BlockNode}s in document order — including any the
    * markdown nested internally (e.g. a table's cell children), not just the
@@ -441,9 +477,10 @@ export interface UseBlocksApi {
    * additive {@link insertMarkdown}). Async: the serializer is lazy-loaded, like
    * the importer. Markdown cannot express every block, so some structure is
    * dropped (table `colspan`/`rowspan`, heading columns). Returns `''` for an
-   * empty document. Pre-ready: resolves to `''`.
+   * empty document. Pre-ready: resolves to `''`. `title: true` writes the
+   * page title first, as core's does.
    */
-  exportMarkdown(): Promise<string>;
+  exportMarkdown(options?: { title?: boolean }): Promise<string>;
   /**
    * Move `id` to a flat slot, as a single operation. No-op when `id` is unknown.
    * For a relative `{ before|after }` target it is also a no-op when the ref is
@@ -598,6 +635,14 @@ export interface UseBlocksApi {
    * dep array. Pre-ready: `null`.
    */
   insertInsideParent(parentId: string, insertIndex: number, childData?: BlockToolData): BlockNode | null;
+  /**
+   * Add a block the way a toolbox pick does, for a host button such as "New
+   * page" — delegates to core's `blocks.create`. Goes to the end of the root
+   * unless `parentId`/`position` say otherwise. Resolves `null` for an unknown
+   * tool or a place that does not exist; rejects with the tool's
+   * `prepareInsert` error, inserting nothing. Pre-ready: `null`.
+   */
+  create(spec?: CreateSpec): Promise<BlockNode | null>;
   /**
    * Replace the WHOLE document with blocks parsed from saved {@link OutputData}
    * (the `save()` shape) — delegates to core's `blocks.render`. Unlike
@@ -923,6 +968,19 @@ export interface CreateReactBlockSpec<
    * @param block - this block's per-block API
    */
   onNavigationEnter?: (event: KeyboardEvent, block: BlockAPI) => boolean;
+  /**
+   * Core's `isReadOnly` hook: true when this block takes no edits from the
+   * user or an agent while the editor stays editable (no delete, move, merge,
+   * nesting or undo into it). Asked on each gesture; a throw counts as true.
+   * @param block - this block's per-block API
+   */
+  isReadOnly?: (block: BlockAPI) => boolean;
+  /**
+   * Core's `isDataReadOnly` hook: true when only this block's own data is
+   * frozen and its children stay open. A throw counts as true.
+   * @param block - this block's per-block API
+   */
+  isDataReadOnly?: (block: BlockAPI) => boolean;
   onRendered?: (block: BlockAPI) => void;
   /**
    * Fired ONCE per block instance, after the portal's FIRST commit — the first
@@ -963,7 +1021,8 @@ export interface CreateReactBlockSpec<
    */
   onCreated?: (block: BlockAPI, context: ReactBlockMountedContext) => void;
   onMoved?: (block: BlockAPI) => void;
-  onRemoved?: (block: BlockAPI) => void;
+  /** `removal.deleted` is true when a local edit deleted the block (see BlockTool.removed). */
+  onRemoved?: (block: BlockAPI, removal?: { deleted: boolean }) => void;
 }
 
 /**

package/src/BlockPortalHost.tsx

@@ -1,58 +0,0 @@
-import { Component, useSyncExternalStore, type ReactElement, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-import type { BlockPortalRegistry } from './block-portal-registry';
-
-interface BoundaryState {
-  failed: boolean;
-}
-
-/**
- * Wraps a single block's render so a throw inside it can't tear down the whole
- * editor's render tree (only the broken block goes blank).
- */
-class BlockErrorBoundary extends Component<{ children: ReactNode }, BoundaryState> {
-  public state: BoundaryState = { failed: false };
-
-  public static getDerivedStateFromError(): BoundaryState {
-    return { failed: true };
-  }
-
-  public componentDidCatch(): void {
-    // Swallowed: one broken block must not unmount its siblings.
-  }
-
-  public render(): ReactNode {
-    return this.state.failed ? null : this.props.children;
-  }
-}
-
-export interface BlockPortalHostProps {
-  registry: BlockPortalRegistry;
-}
-
-/**
- * The single shared render tree that portals each registered React block into
- * its Blok-owned host element. Mounted once per editor (by `BlokContent`), it
- * subscribes to the registry and emits one `createPortal` per entry — so all
- * blocks share one reconciler and the surrounding app's React context
- * (`createPortal` preserves the component tree's context, not the DOM target's).
- */
-export function BlockPortalHost({ registry }: BlockPortalHostProps): ReactElement {
-  const entries = useSyncExternalStore(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
-
-  return (
-    <>
-      {Array.from(entries.entries()).map(([id, entry]) => {
-        const BlockComponent = entry.component;
-
-        return createPortal(
-          <BlockErrorBoundary>
-            <BlockComponent {...entry.props} />
-          </BlockErrorBoundary>,
-          entry.hostEl,
-          id
-        );
-      })}
-    </>
-  );
-}

package/src/BlokContent.tsx

@@ -1,112 +0,0 @@
-import { useEffect, useRef, forwardRef } from 'react';
-import { getHolder } from './holder-map';
-import { getRegistry } from './registry-map';
-import { BlockPortalHost } from './BlockPortalHost';
-import { BlokInstanceContext } from './blok-instance-context';
-import type { Blok } from '@/types';
-import type { BlokContentProps } from './types';
-
-/**
- * Re-drive the boot-time URL-hash scroll now that the editor's holder is in the
- * document. Reads the current hash, decodes it (falling back to the raw value on
- * a malformed percent-sequence, which simply matches no block), and asks the
- * editor to scroll — a one-shot drain of the navigation the constructor deferred
- * because the holder was detached. No-op when the URL carries no hash.
- * @param editor - the ready Blok instance whose holder just connected
- */
-function drainDeferredHashScroll(editor: Blok): void {
-  if (typeof window === 'undefined') {
-    return;
-  }
-
-  const raw = window.location.hash.slice(1);
-
-  if (raw === '') {
-    return;
-  }
-
-  editor.blocks.scrollToBlock?.(safeDecodeHashFragment(raw));
-}
-
-/**
- * Decodes a URL hash fragment, falling back to the raw value on a malformed
- * percent-sequence (e.g. `%ZZ`) — which simply matches no block downstream.
- * @param raw - hash fragment without the leading `#`
- */
-function safeDecodeHashFragment(raw: string): string {
-  try {
-    return decodeURIComponent(raw);
-  } catch {
-    return raw;
-  }
-}
-
-/**
- * Component that provides the DOM mount point for a Blok editor.
- * Renders a <div> and adopts the editor's detached holder DOM into it.
- * When editor is null, renders an empty div (for layout stability).
- * Passes through all standard HTML div attributes (className, style, etc.).
- */
-export const BlokContent = forwardRef<HTMLDivElement, BlokContentProps>(
-  function BlokContent({ editor, ...divProps }, ref) {
-    const containerRef = useRef<HTMLDivElement | null>(null);
-
-    const setRefs = (node: HTMLDivElement | null): void => {
-      containerRef.current = node;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref !== null && ref !== undefined) {
-        const mutableRef = ref;
-
-        mutableRef.current = node;
-      }
-    };
-
-    useEffect(() => {
-      if (editor === null || containerRef.current === null) {
-        return;
-      }
-
-      const holder = getHolder(editor);
-
-      if (holder === undefined) {
-        return;
-      }
-
-      containerRef.current.appendChild(holder);
-
-      // The editor rendered its seeded content into this holder while it was
-      // still detached from the document, so the boot-time URL-hash scroll —
-      // which queries the LIVE document — found nothing and deferred. Now that
-      // the holder is connected, drain that deferred navigation once via the
-      // public scroll API (a no-op when there's no matching hash/block), so
-      // consumers don't have to hand-roll a DOM-polling hook.
-      drainDeferredHashScroll(editor);
-
-      return (): void => {
-        holder.remove();
-      };
-    }, [editor]);
-
-    // The portal host renders the editor's `createReactBlock` tools INSIDE this
-    // component tree (via createPortal into each Blok-owned host element), so
-    // app-level React context flows into block tools with no bridge. It emits
-    // no DOM at this position, leaving the imperatively-adopted holder alone.
-    //
-    // The instance provider rides along for the same reason: this is the one
-    // place that holds BOTH the live editor and the portal host, so publishing
-    // it here is what lets a block component call `useBlocks(useBlokInstance())`
-    // without the host prop-drilling the instance into every block.
-    const registry = editor === null ? undefined : getRegistry(editor);
-
-    return (
-      <div ref={setRefs} {...divProps}>
-        {registry === undefined ? null : (
-          <BlokInstanceContext.Provider value={editor}>
-            <BlockPortalHost registry={registry} />
-          </BlokInstanceContext.Provider>
-        )}
-      </div>
-    );
-  }
-);

package/src/BlokEditor.tsx

@@ -1,201 +0,0 @@
-import {
-  forwardRef,
-  useImperativeHandle,
-  useEffect,
-  useRef,
-  type DependencyList,
-  type HTMLAttributes,
-} from 'react';
-import { useBlok } from './useBlok';
-import { BlokContent } from './BlokContent';
-import { USE_BLOK_CONFIG_KEYS } from './config-keys';
-import type { Blok, BlockRenderedPayload, BlocksRenderedPayload } from '@/types';
-import type { UseBlokConfig } from './types';
-
-/**
- * Props for the all-in-one BlokEditor component.
- * Accepts every useBlok config prop (except `onReady`, re-typed below to receive
- * the ready instance) AND every standard HTML div attribute, which is forwarded
- * to the editor container element (mirrors `BlokContent`). `style` and `onChange`
- * keep their editor-config meaning (they collide with div attributes of the same
- * name), so the container is styled via `className` rather than an inline `style`.
- *
- * `data` is reactive (controlled-ish): it seeds the INITIAL content and, after
- * mount, changing it to new *content* re-renders the editor via `render()` — no
- * recreation. Updates are deep-equal–deduped (a new reference with identical
- * content is a no-op, so it won't clobber the caret) and serialized (rapid
- * changes can't overlap). For ad-hoc reloads you can still call
- * `ref.current.render(newData)`.
- *
- * Pair `data` with `onSave` for a true controlled component: `onSave` is the
- * output half, firing (debounced) with the full serialized `OutputData` on every
- * content change — no manual `ref.current.save()` polling. Echoing that payload
- * straight back via `onSave={setData}` is safe and caret-stable: the adapter
- * records the editor's own emitted output as the content baseline, so the
- * `onSave → setState → data` round-trip deep-equals that baseline and is deduped
- * to a no-op (no re-render, no caret reset, no recursion). Genuine external `data`
- * changes still re-render in place.
- */
-export interface BlokEditorProps
-  extends Omit<UseBlokConfig, 'onReady'>,
-    // `onChange`/`onError`/`onSubmit` are Blok config callbacks here — drop the
-    // DOM element's same-named event handlers so the config signatures win.
-    Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'onChange' | 'onError' | 'onSubmit'> {
-  /**
-   * When any value changes, the editor is destroyed and recreated. Keep each
-   * value referentially stable (primitives or useMemo-stable objects) — a dep
-   * whose identity changes every render recreates the editor each time.
-   *
-   * Tool configs do NOT belong here — reserve deps for true identity changes
-   * (e.g. the document id). FUNCTIONS inside tool configs are re-bound to the
-   * latest render's closure automatically (an inline `uploadByFile` with a
-   * fresh identity each render reaches the editor live), and non-function
-   * config VALUES of `createReactBlock` tools (permissions, URLs, locale…) are
-   * pushed to mounted blocks in place when they change. Neither requires
-   * recreation or `useState` identity-freezing.
-   */
-  deps?: DependencyList;
-  /** Test id forwarded to the editor container element (via data-testid). */
-  'data-testid'?: string;
-  /**
-   * Called with the live Blok instance once it is ready. Fires after the
-   * forwarded ref is committed, so `ref.current` is also populated at this point.
-   *
-   * Contract: fires exactly once per editor instance. The editor is recreated
-   * only when `deps` change or the component remounts; `data` changes —
-   * including transitions to and from empty content — re-render in place and
-   * never recreate the editor or re-fire `onReady`.
-   */
-  onReady?: (editor: Blok) => void;
-  /**
-   * Library-neutral shorthand for the active locale — a plain BCP-47 string
-   * (`'en'`, `'ru-RU'`, `'nb'`) the host owns and updates. It is normalized and
-   * routed to `editor.i18n.update({ locale })` in place (caret/undo survive),
-   * so a host with its own language switcher never has to build an `i18n`
-   * config object or destroy the editor. Pair it with the re-exported
-   * `getDirection`/`normalizeLocale` to compute `dir` yourself.
-   *
-   * Shorthand for `i18n={{ locale }}`: if both are given, this wins. For
-   * message overrides or an explicit direction, use the full `i18n` prop.
-   */
-  locale?: string;
-  /**
-   * Called after a batch render completes (core `blocks:rendered` event). The
-   * declarative analog of `ref.current.on('blocks:rendered', …)` — mirrors the
-   * Vue/Angular adapters' rendered-lifecycle outputs.
-   */
-  onBlocksRendered?: (payload: BlocksRenderedPayload) => void;
-  /** Called for each block rendered into the DOM (core `block:rendered` event). */
-  onBlockRendered?: (payload: BlockRenderedPayload) => void;
-}
-
-/** Fast membership test for partitioning props into editor config vs. div attributes. */
-const CONFIG_KEY_SET = new Set<string>(USE_BLOK_CONFIG_KEYS);
-
-/**
- * The recommended way to embed Blok in React. Internally wires `useBlok` and
- * `BlokContent`, and forwards a ref to the live `Blok` instance.
- *
- * Don't wrap this component in `styled()` or any HOC that reserves the `theme`
- * prop — styled-components claims `theme` for its own `ThemeProvider`, so it
- * never reaches the editor and theme sync silently breaks. Render it directly
- * and style the container via `className`.
- *
- * @example
- * ```tsx
- * const ref = useRef<Blok | null>(null);
- * <BlokEditor ref={ref} id="editor" tools={tools} data={data} theme={theme} onReady={(e) => e.focus()} />;
- * ```
- */
-export const BlokEditor = forwardRef<Blok | null, BlokEditorProps>(
-  function BlokEditor({ deps, onReady, locale, onBlocksRendered, onBlockRendered, ...rest }, ref) {
-    const config: Record<string, unknown> = {};
-    const divProps: Record<string, unknown> = {};
-
-    for (const key of Object.keys(rest)) {
-      const value = (rest as Record<string, unknown>)[key];
-
-      if (CONFIG_KEY_SET.has(key)) {
-        config[key] = value;
-      } else {
-        divProps[key] = value;
-      }
-    }
-
-    // `locale` is a neutral shorthand for `i18n.locale`. Fold it into the i18n
-    // config (winning over any locale already there) so the single reactive
-    // `i18n.update` path in `useBlok` carries it — no separate resolver. A fresh
-    // object each render is fine: that path is deep-equal–deduped.
-    if (locale !== undefined) {
-      const existingI18n = config.i18n as Record<string, unknown> | undefined;
-
-      config.i18n = { ...existingI18n, locale };
-    }
-
-    const editor = useBlok(config, deps);
-
-    useImperativeHandle<Blok | null, Blok | null>(ref, () => editor, [editor]);
-
-    // Own onReady here instead of forwarding it to the core config: the core
-    // onReady fires before useImperativeHandle commits the ref. This passive
-    // effect runs AFTER the commit, so both the instance argument and ref.current
-    // are reliably populated.
-    const onReadyRef = useRef(onReady);
-    onReadyRef.current = onReady;
-    // Hardening, not a bug fix: today this effect only re-runs when `editor`
-    // changes, but future React semantics (Fast Refresh, <Activity>) may re-run
-    // an effect with an unchanged value. Tracking the last-notified instance
-    // guarantees at-most-once per instance while keeping the per-instance
-    // re-fire on recreation (deps change / remount) intact.
-    const notifiedEditorRef = useRef<Blok | null>(null);
-    useEffect(() => {
-      if (editor !== null && notifiedEditorRef.current !== editor) {
-        notifiedEditorRef.current = editor;
-        onReadyRef.current?.(editor);
-      }
-    }, [editor]);
-
-    // Subscribe to the rendered-lifecycle events (the declarative analog of the
-    // Vue/Angular outputs). Latest handlers are read through refs so a new
-    // callback identity never resubscribes; presence booleans in the deps add or
-    // drop subscriptions when a handler appears/disappears.
-    const onBlocksRenderedRef = useRef(onBlocksRendered);
-    onBlocksRenderedRef.current = onBlocksRendered;
-    const onBlockRenderedRef = useRef(onBlockRendered);
-    onBlockRenderedRef.current = onBlockRendered;
-
-    const hasBlocksRendered = Boolean(onBlocksRendered);
-    const hasBlockRendered = Boolean(onBlockRendered);
-    useEffect(() => {
-      if (editor === null) {
-        return;
-      }
-
-      const subscriptions: Array<[string, (payload?: unknown) => void]> = [];
-
-      if (hasBlocksRendered) {
-        const handler = (payload?: unknown): void =>
-          onBlocksRenderedRef.current?.(payload as BlocksRenderedPayload);
-
-        editor.on('blocks:rendered', handler);
-        subscriptions.push(['blocks:rendered', handler]);
-      }
-
-      if (hasBlockRendered) {
-        const handler = (payload?: unknown): void =>
-          onBlockRenderedRef.current?.(payload as BlockRenderedPayload);
-
-        editor.on('block:rendered', handler);
-        subscriptions.push(['block:rendered', handler]);
-      }
-
-      return (): void => {
-        for (const [name, handler] of subscriptions) {
-          editor.off(name, handler);
-        }
-      };
-    }, [editor, hasBlocksRendered, hasBlockRendered]);
-
-    return <BlokContent editor={editor} {...(divProps as HTMLAttributes<HTMLDivElement>)} />;
-  }
-);

package/src/BlokView.tsx

@@ -1,106 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import type { BlocksToHtmlOptions } from '@bloklabs/core/view';
-import type { LooseOutputData, OutputData } from '@bloklabs/core';
-
-import { useBlokView } from './useBlokView';
-
-/**
- * Props for {@link BlokView}. Beyond the render options below, any standard
- * `<div>` attribute (`id`, `style`, `data-*`, `aria-*`, event handlers, …) is
- * forwarded onto the single wrapper element.
- */
-export interface BlokViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  /** Saved document to display (strict or loose wire shape; nullish tolerated). */
-  data: OutputData | LooseOutputData | null | undefined;
-  /** View schema from `defineBlokSchema` — display under the composition that produced the document. */
-  schema?: BlocksToHtmlOptions['schema'];
-  /** Custom per-tool renderers; win over built-ins. */
-  renderers?: BlocksToHtmlOptions['renderers'];
-  /** Unknown-tool policy (default 'skip'). */
-  onUnknownBlock?: BlocksToHtmlOptions['onUnknownBlock'];
-  /** Stamp `data-blok-tool="<type>"` on each block root as a styling hook (pairs with the opt-in view stylesheet). */
-  toolAttributes?: BlocksToHtmlOptions['toolAttributes'];
-  /** Stamp `data-blok-id="<id>"` on each block root (list items on their `<li>`) for "copy link to block" deep links. */
-  blockIds?: BlocksToHtmlOptions['blockIds'];
-  /** Pure URL rewrite hook for block URLs + inline anchors, run before the unsafe-scheme strip. */
-  transformUrl?: BlocksToHtmlOptions['transformUrl'];
-  /** Custom renderers for inline elements, keyed by lowercase tag name (equations, mentions). */
-  inlineRenderers?: BlocksToHtmlOptions['inlineRenderers'];
-  /** Build the link for a `page` block from its `pageId`. A page card is a link only with this and an allowing {@link pageInfo}. */
-  pageHref?: BlocksToHtmlOptions['pageHref'];
-  /** Host metadata (title, icon, access) for a `page` block. Without it a page card shows a neutral "Page" label and no link. */
-  pageInfo?: BlocksToHtmlOptions['pageInfo'];
-  /**
-   * Render with the editor's presentational classes and per-block scaffolding
-   * so the output matches a read-only editor render (default `true`). Needs
-   * `@bloklabs/core/view.css` imported to paint. Set `false` for unstyled
-   * semantic markup.
-   */
-  classes?: BlocksToHtmlOptions['classes'];
-  /** Document direction: set as `dir` on the wrapper, and each block follows its own text. */
-  direction?: BlocksToHtmlOptions['direction'];
-}
-
-/**
- * Display a saved Blok document synchronously — one `<div>` wrapper, no
- * editor chrome, no async, no effects. Content is mapped from the sanitized
- * view tree to real React elements (never `dangerouslySetInnerHTML`), so it
- * renders identically under SSR.
- *
- * This is the intended read-only path — reach for it instead of mounting the
- * full editing runtime (`BlokEditor readOnly`), which ships toolbar, history,
- * and mutation machinery to every viewer. Pair with `defineBlokSchema` to
- * display custom-tool content under the exact sanitization that produced it.
- *
- * The props API is semver-stable. Only the raw `ViewNode` tree that the
- * bindings map from (via `blocksToViewNodes`) remains `@experimental` — using
- * `BlokView`/`useBlokView` never exposes you to it.
- */
-export const BlokView = ({
-  data,
-  schema,
-  renderers,
-  onUnknownBlock,
-  toolAttributes,
-  blockIds,
-  transformUrl,
-  inlineRenderers,
-  pageHref,
-  pageInfo,
-  classes,
-  direction,
-  ...divProps
-}: BlokViewProps): ReactNode => {
-  /**
-   * `classes: true` by default — this component's job is to look like a
-   * read-only editor render, and it already owns a wrapper element, so the
-   * per-block scaffolding parity needs is not a surprise here. (The bare
-   * `useBlokView` hook defaults it OFF, because its contract is to emit no
-   * wrapper at all.) Pass `classes={false}` for unstyled semantic markup.
-   */
-  const content = useBlokView(data, {
-    schema,
-    renderers,
-    onUnknownBlock,
-    toolAttributes,
-    blockIds,
-    transformUrl,
-    inlineRenderers,
-    pageHref,
-    pageInfo,
-    classes: classes ?? true,
-    direction,
-  });
-
-  /**
-   * `data-blok-interface="view"` makes the wrapper a soft isolation root, which
-   * is what gives the rendered blocks the same appearance as a read-only
-   * editor: the scoped preflight and the token/colour layers key on the bare
-   * `[data-blok-interface]` attribute, so classes emitted outside it compute
-   * differently. The value is `view`, never `blok` — the latter carries
-   * `all: initial !important`, which would block host typography entirely.
-   *
-   * Written BEFORE the `divProps` spread so a caller can still override it.
-   */
-  return <div data-blok-interface="view" dir={direction} {...divProps}>{content}</div>;
-};