Mixins / foldkit-mixins-ui

CodeBlock

namespace · packages/mixins-ui/src/codeBlock.ts:1

export * as CodeBlock from './codeBlock.js'

In the guides

Members

CodeBlock.CodeBlockCopy

interface · packages/mixins-ui/src/codeBlock.ts:34

interface CodeBlockCopy<Message> {
  readonly onCopy?: ((code: string) => Message) | undefined
  readonly copied?: boolean | undefined
  readonly label?: string | undefined
  readonly copiedLabel?: string | undefined
}

The copy button: what pressing it causes, and whether that has happened.

CodeBlock.CodeBlockSlots

const · packages/mixins-ui/src/codeBlock.ts:12

const CodeBlockSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly header: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly title: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly copy: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly body: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly code: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base …;

A code block publishes its regions as slots, down to each line and each highlighted token; it owns no state. Highlighting is the caller's: pass the tokens a tokenizer found (foldkit-richtext-code, foldkit-richtext-code-shiki) and each is drawn with its kind as data-kind, which the recipe colors from the theme's syntax group.

CodeBlock.CodeBlockView

interface · packages/mixins-ui/src/codeBlock.ts:54

interface CodeBlockView<Message> {
  readonly code: string
  readonly tokens?: ReadonlyArray<CodeToken> | undefined
  readonly language?: string | undefined
  readonly title?: string | undefined
  readonly lineNumbers?: boolean | undefined
  readonly copy?: CodeBlockCopy<Message> | undefined
  readonly style?: NamedStyle<typeof CodeBlockSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Code in one call: the text, the tokens that color it, a title (a file name) or a language over it, line numbers, and a copy button. No upstream component stands behind it.

CodeBlock.CodeToken

interface · packages/mixins-ui/src/codeBlock.ts:27

interface CodeToken {
  readonly from: number
  readonly to: number
  readonly kind: string
}

A highlighted run of the code, as offsets into it: the shape foldkit-richtext's CodeToken has, so a tokenizer's output passes as it is.

CodeBlock.linesOf

function · packages/mixins-ui/src/codeBlock.ts:82

function linesOf(
  code: string,
  tokens: ReadonlyArray<CodeToken>,
): ReadonlyArray<ReadonlyArray<Run>>

The code cut into lines of runs. A token out of order, overlapping the one before it, outside the code or covering nothing throws: it is the tokenizer's bug, and drawing it would color the wrong text.

CodeBlock.view

function · packages/mixins-ui/src/codeBlock.ts:112

function view<Message>(
  options: CodeBlockView<Message>,
  h: HtmlBuilder<Message>,
): Html