Extend UI Svelte
GitHub

Docs / Data and layout / Layout Blocks

Layout Blocks

Document layout blocks (headings, paragraphs, tables, figures) with virtualized scrolling and markdown rendering. Rows size to their content. Dark mode is controlled by the parent through isDark; the toggle below lives outside the component.

Sample document

Focused block: none

Controlled, parent keeps its block

activeBlockId stays on the heading; the panel still reports each new block once, like upstream.

Reports: 0

Long document (200 blocks, virtualized)

Differences from upstream

  • Exported as LayoutBlocks and the upstream name OcrBlocksPanel. className and class are both accepted. Also exported, like upstream: getOcrBlocks, blockToHighlightArea, blockToArea, and the block types.
  • Port-only exports (upstream keeps these internal or has no equivalent): DEFAULT_LAYOUT_BLOCKS_HEIGHT and DEFAULT_LAYOUT_BLOCKS_OVERSCAN (defaults for the added height and overscan props), estimateOcrBlockRowHeight (upstream's internal row size estimate), OCR_BLOCK_TYPE_LABELS (badge text per block type), renderBlockMarkdown (sanitized markdown to HTML), and a default export of the panel.
  • Not ported: upstream's sample data and demo, ATTENTION_OCR_OUTPUT (the bundled Attention paper OCR result), PDF_URL (its sample PDF path), and the OcrBlocks demo that renders the panel from them.
  • Upstream's OcrBlockOverlay (the colored block outline drawn on the rendered PDF page) is not ported, so blocks cannot be highlighted on the page yet. blockToArea and blockToHighlightArea are exported from extend-ui-svelte/components/layout-blocks for building overlays.
  • blockToArea returns a CSS declaration string (for a Svelte style attribute) instead of upstream's React style object.
  • Adds height (viewport height, default 420 like upstream) and overscan (default 6 like upstream) props.
  • Virtualized with the shared virtual list in measured mode instead of @tanstack/react-virtual; rows start from upstream's size estimate and then size to their content.
  • Markdown renders with marked instead of react-markdown, and type badges are text pills without Hugeicons glyphs.
  • Click also focuses a block (upstream uses hover and focus only).
  • Accepts isDark and onIsDarkChange; it reflects isDark and never calls onIsDarkChange because it renders no theme control.

Back to all components