@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/RichText/engine/renderDoc.tsx

@@ -0,0 +1,395 @@
+// renderDoc.tsx — pure model → React. Read-only; used by <RichText>. The model
+// is flat; this reconstructs list nesting from `depth` at render time.
+import { Fragment, type ReactElement, type ReactNode } from 'react';
+import type { RichDoc, Block, Inline, Mark, MarkType } from './model';
+import { runsText, runsLength } from './inlines';
+import { safeHref } from './safeHref';
+import { textColorVar, bgColorVar } from './colorMarks';
+import { isListItem, effectiveDepths } from './listDepths';
+import { MARK_ORDER, marksSignature } from './marks';
+import type { RenderLink } from './renderLink';
+import type { RenderMention } from './renderMention';
+import { RichTextAttachment } from '../RichTextAttachment';
+
+export interface RenderDocOptions {
+  /** Editable surface: add `data-block-id` anchors + render empty blocks with a `<br>`. */
+  editable?: boolean;
+  /**
+   * Replace how a link renders (e.g. a task/member chip). In the read-only viewer
+   * the returned node substitutes the `<a>` directly; on an editable surface a
+   * substituted node is wrapped in an atomic, non-editable `[data-rich-link]`
+   * widget so the caret steps over it as a single unit. Return the supplied
+   * default node to keep the standard `<a>`.
+   */
+  renderLink?: RenderLink;
+  /**
+   * Replace how a `mention` mark renders (e.g. an interactive member chip /
+   * popover trigger). In the read-only viewer the returned node substitutes the
+   * default mention span directly; on an editable surface a substituted node is
+   * wrapped in an atomic, non-editable `[data-rich-mention]` widget so the caret
+   * steps over it as a single unit. Return the supplied default node to keep the
+   * standard non-interactive mention span. Composes with `renderLink`.
+   */
+  renderMention?: RenderMention;
+}
+
+// Resolved options threaded through the render call chain (never module state).
+interface ResolvedOptions {
+  editable: boolean;
+  renderLink?: RenderLink;
+  renderMention?: RenderMention;
+}
+
+// Per-block element cache for CONTEXT-INDEPENDENT blocks only (paragraph, heading,
+// blockquote, code_block, attachment). The model is immutable: a block keeps its
+// reference across edits unless it changed, so an element built purely from
+// (block + options) can be cached by block reference — reusing the same element
+// lets React bail out of reconciling unchanged blocks (referential equality).
+//
+// Keyed in a WeakMap on the immutable Block object, so entries are GC'd with their
+// block — no leak, no manual invalidation. The render options are part of the
+// stored entry: a change to `editable`/`renderLink`/`renderMention` correctly
+// misses the cache and rebuilds.
+//
+// LIST items (bullet_item/ordered_item) are NEVER cached here: their nested
+// <ul>/<ol>/<li> shape depends on NEIGHBORS (grouping + relative depth), so a
+// sibling change can alter a list item's output while its own reference is
+// unchanged. They render fresh every time via collectList/renderListTree.
+type BlockCacheEntry = {
+  editable: boolean;
+  renderLink?: RenderLink;
+  renderMention?: RenderMention;
+  el: ReactElement;
+};
+const blockCache = new WeakMap<Block, BlockCacheEntry>();
+
+function cachedBlockEl(
+  block: Block,
+  editable: boolean,
+  renderLink: RenderLink | undefined,
+  renderMention: RenderMention | undefined,
+  build: () => ReactElement,
+): ReactElement {
+  const hit = blockCache.get(block);
+  if (
+    hit &&
+    hit.editable === editable &&
+    hit.renderLink === renderLink &&
+    hit.renderMention === renderMention
+  ) {
+    return hit.el;
+  }
+  const el = build();
+  blockCache.set(block, { editable, renderLink, renderMention, el });
+  return el;
+}
+
+function wrapMark(type: MarkType, mark: Mark, child: ReactNode): ReactNode {
+  switch (type) {
+    case 'bold':
+      return <strong>{child}</strong>;
+    case 'italic':
+      return <em>{child}</em>;
+    case 'underline':
+      return <u>{child}</u>;
+    case 'strike':
+      return <s>{child}</s>;
+    case 'code':
+      return <code>{child}</code>;
+    case 'textColor': {
+      // Resolve the palette key to a token-backed var. An unknown key yields no
+      // wrapper (never emit an empty `style`).
+      const value = mark.type === 'textColor' ? textColorVar(mark.color) : undefined;
+      return value ? <span style={{ color: value }}>{child}</span> : child;
+    }
+    case 'bgColor': {
+      const value = mark.type === 'bgColor' ? bgColorVar(mark.color) : undefined;
+      return value ? <span style={{ backgroundColor: value }}>{child}</span> : child;
+    }
+    case 'link': {
+      // The `renderLink` substitution is handled in `renderInlines` (which coalesces
+      // contiguous same-href runs into one logical link); here we only emit the
+      // default <a> for the unsubstituted path.
+      const href = mark.type === 'link' ? safeHref(mark.href) : undefined;
+      return (
+        <a href={href} rel="noopener noreferrer">
+          {child}
+        </a>
+      );
+    }
+    case 'mention':
+      return (
+        <span
+          data-mention
+          data-mention-id={mark.type === 'mention' ? mark.id : undefined}
+          data-mention-label={mark.type === 'mention' ? mark.label : undefined}
+        >
+          {child}
+        </span>
+      );
+    default:
+      return child;
+  }
+}
+
+function renderRun(run: Inline, key: string): ReactNode {
+  const present = MARK_ORDER.filter((t) => run.marks.some((m) => m.type === t));
+  let node: ReactNode = run.text;
+  // Wrap innermost-first so present[0] (link) ends up outermost.
+  for (let i = present.length - 1; i >= 0; i -= 1) {
+    const type = present[i];
+    const mark = run.marks.find((m) => m.type === type)!;
+    node = wrapMark(type, mark, node);
+  }
+  return <Fragment key={key}>{node}</Fragment>;
+}
+
+function renderInlines(inlines: Inline[], opts: ResolvedOptions): ReactNode {
+  const out: ReactNode[] = [];
+  let i = 0;
+  while (i < inlines.length) {
+    const run = inlines[i];
+    const mm = run.marks.find((m) => m.type === 'mention');
+    const mention = mm && mm.type === 'mention' ? { id: mm.id, label: mm.label } : null;
+    if (opts.renderMention && mention) {
+      // Coalesce contiguous runs that share this exact mention (same id AND label)
+      // into ONE logical mention, so a mention split across runs (e.g. internal
+      // formatting, HTML import) resolves to a single chip — not one per run.
+      let j = i;
+      let text = '';
+      while (j < inlines.length) {
+        const m = inlines[j].marks.find((mk) => mk.type === 'mention');
+        if (!m || m.type !== 'mention' || m.id !== mention.id || m.label !== mention.label) break;
+        text += inlines[j].text;
+        j += 1;
+      }
+      const fallback = (
+        <span data-mention data-mention-id={mention.id} data-mention-label={mention.label}>
+          {text}
+        </span>
+      );
+      const custom = opts.renderMention(mention, fallback);
+      if (custom !== fallback) {
+        // Substituted: one node for the whole span. In the editor it's an atomic,
+        // non-editable widget tagged with the span's MODEL length (`data-len`).
+        const mkey = `m${i}:${mention.id}:${mention.label}`;
+        out.push(
+          opts.editable ? (
+            <span key={mkey} data-rich-mention data-len={text.length} contentEditable={false}>
+              {custom}
+            </span>
+          ) : (
+            <Fragment key={mkey}>{custom}</Fragment>
+          ),
+        );
+        i = j;
+        continue;
+      }
+      // Consumer declined → fall through to the link/default handling below.
+    }
+    const lm = run.marks.find((m) => m.type === 'link');
+    const linkHref = lm && lm.type === 'link' ? lm.href : null;
+    const safe = opts.renderLink && linkHref != null ? safeHref(linkHref) : undefined;
+    if (safe) {
+      // Coalesce contiguous runs that share this exact link href into ONE logical
+      // link, so a link split across runs (e.g. internal formatting, HTML import)
+      // resolves to a single chip — not one chip per run.
+      let j = i;
+      let text = '';
+      while (j < inlines.length) {
+        const m = inlines[j].marks.find((mm) => mm.type === 'link');
+        if (!m || m.type !== 'link' || m.href !== linkHref) break;
+        text += inlines[j].text;
+        j += 1;
+      }
+      const fallback = (
+        <a href={safe} rel="noopener noreferrer">
+          {text}
+        </a>
+      );
+      const custom = opts.renderLink!({ href: safe, text }, fallback);
+      if (custom !== fallback) {
+        // Substituted: one node for the whole span. In the editor it's an atomic,
+        // non-editable widget tagged with the span's MODEL length (`data-len`).
+        const lkey = `l${i}:${linkHref}`;
+        out.push(
+          opts.editable ? (
+            <span key={lkey} data-rich-link data-len={text.length} contentEditable={false}>
+              {custom}
+            </span>
+          ) : (
+            <Fragment key={lkey}>{custom}</Fragment>
+          ),
+        );
+        i = j;
+        continue;
+      }
+      // Consumer declined → fall through to normal per-run rendering (default <a>).
+    }
+    // Key folds in the run's mark signature (not just its index): when a run's
+    // formatting changes, React replaces its subtree cleanly instead of re-wrapping
+    // a live contentEditable text node in place (which orphaned text / reset colors).
+    out.push(renderRun(run, `${i}:${marksSignature(run.marks)}`));
+    i += 1;
+  }
+  return out;
+}
+
+function blockContent(block: Block, opts: ResolvedOptions): ReactNode {
+  if (opts.editable && runsLength(block.inlines) === 0) return <br />;
+  return renderInlines(block.inlines, opts);
+}
+
+// Build the element for a single NON-LIST block. Pure in (block, opts): no
+// position/index/depth/neighbor input (the effective depths computed in renderDoc
+// are consumed only by the list path). Every branch returns a single top-level
+// element carrying `key={block.id}` — so caching + reusing the reference preserves
+// the key and lets React skip reconciling the block.
+function buildBlock(block: Block, opts: ResolvedOptions): ReactElement {
+  const anchor = opts.editable ? { 'data-block-id': block.id } : undefined;
+  switch (block.type) {
+    case 'heading': {
+      const Tag = `h${block.level ?? 1}` as 'h1' | 'h2' | 'h3';
+      return (
+        <Tag key={block.id} {...anchor}>
+          {blockContent(block, opts)}
+        </Tag>
+      );
+    }
+    case 'blockquote':
+      return (
+        <blockquote key={block.id} {...anchor}>
+          {blockContent(block, opts)}
+        </blockquote>
+      );
+    case 'code_block':
+      return (
+        <pre key={block.id} {...anchor}>
+          <code>
+            {opts.editable && runsLength(block.inlines) === 0 ? <br /> : runsText(block.inlines)}
+          </code>
+        </pre>
+      );
+    case 'attachment':
+      return (
+        <figure
+          key={block.id}
+          {...anchor}
+          contentEditable={false}
+          data-attachment=""
+          data-align={block.align || undefined}
+        >
+          <RichTextAttachment block={block} editable={opts.editable} />
+        </figure>
+      );
+    case 'paragraph':
+    default:
+      return (
+        <p key={block.id} {...anchor}>
+          {blockContent(block, opts)}
+        </p>
+      );
+  }
+}
+
+// Cache wrapper for a non-list block: returns the cached element when the block
+// reference AND the relevant options are unchanged, otherwise builds + stores it.
+function renderBlock(block: Block, opts: ResolvedOptions): ReactElement {
+  return cachedBlockEl(block, opts.editable, opts.renderLink, opts.renderMention, () =>
+    buildBlock(block, opts),
+  );
+}
+
+interface ListItemNode {
+  key: string;
+  blockId: string;
+  content: ReactNode;
+  child: ReactNode | null;
+}
+
+// Collect a list starting at `start`, at its base (effective) depth; items one
+// level deeper recurse into a child list attached to the preceding item. Because
+// `eff` is gap-free, a deeper run is always exactly base+1, so every item lands
+// in exactly one list — no item is overwritten. Returns the items + next index.
+function collectList(
+  blocks: Block[],
+  start: number,
+  eff: number[],
+  opts: ResolvedOptions,
+): { tag: 'ul' | 'ol'; items: ListItemNode[]; next: number } {
+  const baseDepth = eff[start];
+  const tag = blocks[start].type === 'ordered_item' ? 'ol' : 'ul';
+  const items: ListItemNode[] = [];
+  let i = start;
+  while (i < blocks.length && isListItem(blocks[i])) {
+    const d = eff[i];
+    if (d < baseDepth) break;
+    if (d > baseDepth) {
+      const sub = collectList(blocks, i, eff, opts);
+      if (items.length > 0)
+        items[items.length - 1].child = renderListTree(sub.tag, sub.items, opts);
+      i = sub.next;
+      continue;
+    }
+    items.push({
+      key: blocks[i].id,
+      blockId: blocks[i].id,
+      content: blockContent(blocks[i], opts),
+      child: null,
+    });
+    i += 1;
+  }
+  return { tag, items, next: i };
+}
+
+function renderListTree(tag: 'ul' | 'ol', items: ListItemNode[], opts: ResolvedOptions): ReactNode {
+  const ListTag = tag;
+  return (
+    <ListTag>
+      {items.map((it) => (
+        <li key={it.key} {...(opts.editable ? { 'data-block-id': it.blockId } : {})}>
+          {it.content}
+          {it.child}
+        </li>
+      ))}
+    </ListTag>
+  );
+}
+
+/**
+ * Render a `RichDoc` to React nodes.
+ *
+ * Blocks map to semantic elements (`<p>`, `<h1|h2|h3>`, `<blockquote>`,
+ * `<pre><code>`). Consecutive list-item blocks are grouped back into `<ul>`/`<ol>`
+ * trees, with nesting reconstructed from each item's `depth` (the flat model is
+ * lossy-free: depths are normalized gap-free first, so malformed depth jumps
+ * never drop items). Inline runs render as nested mark tags in a deterministic
+ * order (`link` outermost … `code` innermost). Block `id` is the React key. An
+ * empty document renders nothing. `code_block` content is treated as plain text.
+ *
+ * Pass `{ editable: true }` to add `data-block-id` anchors on every block element
+ * and render empty blocks with a `<br>` (required for contentEditable caret placement).
+ * Read-only output (default) is byte-identical to the pre-options behaviour.
+ */
+export function renderDoc(doc: RichDoc, options: RenderDocOptions = {}): ReactNode {
+  const opts: ResolvedOptions = {
+    editable: options.editable ?? false,
+    renderLink: options.renderLink,
+    renderMention: options.renderMention,
+  };
+  const eff = effectiveDepths(doc.blocks);
+  const out: ReactNode[] = [];
+  let i = 0;
+  while (i < doc.blocks.length) {
+    if (isListItem(doc.blocks[i])) {
+      const startId = doc.blocks[i].id;
+      const { tag, items, next } = collectList(doc.blocks, i, eff, opts);
+      out.push(<Fragment key={`list-${startId}`}>{renderListTree(tag, items, opts)}</Fragment>);
+      i = next;
+    } else {
+      out.push(renderBlock(doc.blocks[i], opts));
+      i += 1;
+    }
+  }
+  return out;
+}

package/src/components/RichText/engine/renderLink.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+/** A link encountered while rendering, passed to `renderLink`. */
+export interface RichTextLink {
+  /** The sanitized URL. */
+  href: string;
+  /** The link's visible text in the document. */
+  text: string;
+}
+
+/**
+ * Replace how a link renders. Return your own node (e.g. a task/member chip) to
+ * substitute the link, or `defaultNode` for the standard `<a>`.
+ */
+export type RenderLink = (link: RichTextLink, defaultNode: ReactNode) => ReactNode;

package/src/components/RichText/engine/renderMention.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+/** A mention encountered while rendering, passed to `renderMention`. */
+export interface RichTextMention {
+  /** The mention's stable id (from the `mention` mark). */
+  id: string;
+  /** The mention's display label (without the trigger). */
+  label: string;
+}
+
+/**
+ * Replace how a `mention` mark renders. Return your own node (e.g. an interactive
+ * member chip / popover trigger) to substitute the mention, or `defaultNode` for
+ * the standard non-interactive mention span. Mirrors {@link RenderLink}.
+ */
+export type RenderMention = (mention: RichTextMention, defaultNode: ReactNode) => ReactNode;

package/src/components/RichText/engine/safeHref.ts

@@ -0,0 +1,22 @@
+// safeHref.ts — the canonical, render-independent URL allowlist shared by the
+// renderer (renderDoc) and the HTML importer (fromHtml). It is the SOLE scheme
+// gate for hrefs that enter the model from untrusted input, so it must normalize
+// URLs the way browsers do before resolving a scheme. Allows relative URLs + a
+// small scheme allowlist; blocks javascript:/data:/protocol-relative.
+export function safeHref(href: string): string | undefined {
+  // Browsers strip ASCII tab/LF/CR from anywhere in a URL, and drop leading C0
+  // controls + spaces, before resolving the scheme — so `java\tscript:` and
+  // `\x01javascript:` would both navigate as javascript:. Normalize the same way
+  // so the scheme allowlist below can't be smuggled past with embedded or leading
+  // control characters.
+  const trimmed = href.replace(/[\t\n\r]/g, '').replace(/^[\x00-\x20]+|[\x00-\x20]+$/g, '');
+  if (trimmed === '') return undefined;
+  // Block protocol-relative URLs (`//host`) — they navigate cross-origin and
+  // would otherwise slip through the "relative" branch below.
+  if (trimmed.startsWith('//')) return undefined;
+  // Has an explicit scheme? Only http(s)/mailto/tel are allowed.
+  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed)) {
+    return /^(https?:|mailto:|tel:)/i.test(trimmed) ? trimmed : undefined;
+  }
+  return trimmed; // relative (/, ./, #, ?, plain path) — safe
+}

package/src/components/RichText/engine/toHtml.ts

@@ -0,0 +1,154 @@
+// toHtml.ts — serialize a RichDoc to a compact HTML string. The inverse of
+// fromHtml; mirrors renderDoc's structure (block elements, mark nesting order,
+// list-depth grouping) but emits a string. Text/attributes are escaped and hrefs
+// run through safeHref, so output is injection-safe. Lossless for the model
+// (underline → <u>), so fromHtml(toHtml(doc)) reproduces the document.
+import type { RichDoc, Block, Inline, Mark, MarkType } from './model';
+import { runsText } from './inlines';
+import { escapeHtml, escapeAttr } from './escape';
+import { safeHref } from './safeHref';
+import { textColorVar, bgColorVar } from './colorMarks';
+import { isListItem, effectiveDepths } from './listDepths';
+import { attachmentIsImage } from './attachment';
+import { MARK_ORDER } from './marks';
+
+/** Wrap an already-escaped HTML string in one mark's tag. */
+function wrapMark(type: MarkType, mark: Mark, inner: string): string {
+  switch (type) {
+    case 'bold':
+      return `<strong>${inner}</strong>`;
+    case 'italic':
+      return `<em>${inner}</em>`;
+    case 'underline':
+      return `<u>${inner}</u>`;
+    case 'strike':
+      return `<s>${inner}</s>`;
+    case 'code':
+      return `<code>${inner}</code>`;
+    case 'textColor': {
+      // Resolve the palette key to a token-backed var; an unknown key drops the
+      // wrapper (never emit an empty/bogus style). The value is from a fixed
+      // allowlist, so it needs no attribute escaping.
+      const value = mark.type === 'textColor' ? textColorVar(mark.color) : undefined;
+      return value ? `<span style="color:${value}">${inner}</span>` : inner;
+    }
+    case 'bgColor': {
+      const value = mark.type === 'bgColor' ? bgColorVar(mark.color) : undefined;
+      return value ? `<span style="background-color:${value}">${inner}</span>` : inner;
+    }
+    case 'link': {
+      const safe = mark.type === 'link' ? safeHref(mark.href) : undefined;
+      if (safe === undefined) return inner; // unsafe href → drop the anchor, keep text
+      return `<a href="${escapeAttr(safe)}" rel="noopener noreferrer">${inner}</a>`;
+    }
+    case 'mention': {
+      if (mark.type !== 'mention') return inner;
+      return `<span data-mention-id="${escapeAttr(mark.id)}" data-mention-label="${escapeAttr(mark.label)}">${inner}</span>`;
+    }
+    default:
+      return inner;
+  }
+}
+
+/** Serialize one inline run: escaped text wrapped innermost-first. */
+function inlineRun(run: Inline): string {
+  const present = MARK_ORDER.filter((t) => run.marks.some((m) => m.type === t));
+  let html = escapeHtml(run.text);
+  for (let i = present.length - 1; i >= 0; i -= 1) {
+    const type = present[i];
+    const mark = run.marks.find((m) => m.type === type)!;
+    html = wrapMark(type, mark, html);
+  }
+  return html;
+}
+
+const inlines = (block: Block): string => block.inlines.map(inlineRun).join('');
+
+/** Serialize a contiguous run of list items starting at `start` (its base depth). */
+function listHtml(blocks: Block[], start: number, eff: number[]): [string, number] {
+  const base = eff[start];
+  const tag = blocks[start].type === 'ordered_item' ? 'ol' : 'ul';
+  const items: string[] = [];
+  let i = start;
+  while (i < blocks.length && isListItem(blocks[i])) {
+    const d = eff[i];
+    if (d < base) break;
+    if (d > base) {
+      const [child, next] = listHtml(blocks, i, eff);
+      if (items.length > 0) {
+        items[items.length - 1] = items[items.length - 1].replace(/<\/li>$/, `${child}</li>`);
+      }
+      i = next;
+      continue;
+    }
+    items.push(`<li>${inlines(blocks[i])}</li>`);
+    i += 1;
+  }
+  return [`<${tag}>${items.join('')}</${tag}>`, i];
+}
+
+function blockHtml(block: Block): string {
+  switch (block.type) {
+    case 'heading': {
+      // Clamp to the model's h1–h3 range so a hand-built doc with an out-of-range
+      // level never emits a malformed <undefined>/<h0> tag.
+      const tag = `h${Math.min(3, Math.max(1, block.level ?? 1))}`;
+      return `<${tag}>${inlines(block)}</${tag}>`;
+    }
+    case 'blockquote':
+      return `<blockquote>${inlines(block)}</blockquote>`;
+    case 'code_block':
+      return `<pre><code>${escapeHtml(runsText(block.inlines))}</code></pre>`;
+    case 'attachment': {
+      // Only finalized (ready/absent-status) attachments serialize; in-flight or
+      // failed uploads emit nothing.
+      if (block.status && block.status !== 'ready') return '';
+      const safe = safeHref(block.src ?? '');
+      if (safe === undefined) return '';
+      if (attachmentIsImage(block)) {
+        const alt = escapeAttr(block.alt ?? block.name ?? '');
+        const widthAttr = typeof block.width === 'number' ? ` width="${block.width}"` : '';
+        const heightAttr = typeof block.height === 'number' ? ` height="${block.height}"` : '';
+        const figStyle =
+          block.align === 'center' || block.align === 'right'
+            ? ` style="text-align:${block.align}"`
+            : '';
+        return `<figure${figStyle}><img src="${escapeAttr(safe)}" alt="${alt}"${widthAttr}${heightAttr}></figure>`;
+      }
+      return `<a href="${escapeAttr(safe)}" download>${escapeHtml(block.name ?? safe)}</a>`;
+    }
+    case 'paragraph':
+    default:
+      return `<p>${inlines(block)}</p>`;
+  }
+}
+
+/**
+ * Serialize a `RichDoc` to a compact HTML string (the inverse of `fromHtml`).
+ * Text and attributes are escaped and hrefs run through `safeHref`, so the output
+ * is injection-safe. Lossless for the model — `fromHtml(toHtml(doc))` reproduces
+ * the document structurally.
+ *
+ * @remarks An unsafe href (rejected by `safeHref`) drops the `<a>` wrapper and
+ * emits the bare text — unlike `renderDoc`, which keeps a hrefless `<a>`. Both are
+ * safe and `fromHtml(toHtml(doc))` stays consistent (neither yields a link mark).
+ *
+ * @example
+ * const html = toHtml(doc); // '<h2>Title</h2><p>Hello <strong>world</strong></p>'
+ */
+export function toHtml(doc: RichDoc): string {
+  const eff = effectiveDepths(doc.blocks);
+  let out = '';
+  let i = 0;
+  while (i < doc.blocks.length) {
+    if (isListItem(doc.blocks[i])) {
+      const [html, next] = listHtml(doc.blocks, i, eff);
+      out += html;
+      i = next;
+    } else {
+      out += blockHtml(doc.blocks[i]);
+      i += 1;
+    }
+  }
+  return out;
+}