Skip to content
zidane
UI kit reference

code/editor/reveal

import { … } from 'zidane-ui/code/editor'ui/src/code/editor/reveal.ts

Functions#

revealOnHighlightFunction#

pierre's onPostRender, with whether the current render carries tokens.

TypeScript
function revealOnHighlight(
  host: HTMLElement,
  highlighted: boolean,
  phase: 'mount' | 'update' | 'unmount',
  colors?: boolean,
): void

Parameters

Parameters
NameTypeDefaultDescription
hostHTMLElement

The <diffs-container> element; it carries the pending and held attributes.

highlightedboolean

Whether this render already has its syntax tokens.

phase'mount' | 'update' | 'unmount'

pierre's render phase: a mount without tokens holds the body back, an update with tokens reveals it, an unmount clears the host for the next mount.

colors?booleantrue

Whether pierre colors this body at all (it leaves empty, plain-text and massive ones plain): only then are tokens pending.

ui/src/code/editor/reveal.ts:30

Constants#

REVEAL_FALLBACK_MSConstant#

When a code body (a file, a diff) shows. pierre paints a body as plain text first and recolors it once the highlight workers answer; shown at once, that reads as a flash of uncolored code. A body that mounts without its tokens is held back (data-zg-pending on the host) and eases in once they land, or after REVEAL_FALLBACK_MS for text no grammar colors. One that mounts highlighted (cached, a tab coming back) shows at once: nothing fades twice. The styles are in DIFFS_UNSAFE_CSS. Apart from the hold, a host whose tokens are coming carries data-zg-highlight="pending" until they land (past the fallback too): tests and screenshots wait on it.

TypeScript
const REVEAL_FALLBACK_MS = 250

ui/src/code/editor/reveal.ts:12