Code block

A block of code, nol-code-block: a header with the code's language and a toolbar named Code block actions, then the code in the code text role. The code stays plain unless the app adds provideCodeHighlighting() from @noldova/ui.components.angular/code-highlighting to its providers. With it, code in a language the kit knows, by its name or an alias, such as TypeScript, ts or bash, is colored by the kind of each token in the theme's code token colors once its grammar has loaded; other code stays plain. Once the grammar has loaded, code up to 1,000 characters is colored in its first render and longer code a task later, and code shown again in the same language is colored at once from the tokens kept for it.

Long lines scroll sideways inside the block and never widen its container, until the toolbar's Word wrap button, a toggle that starts off, wraps them or the owner binds CodeBlockComponent.wrapped. Copy writes the code, exactly as bound, through the ClipboardWriter the window provides. For 1.5 seconds it then shows a check glyph and is named Copied, or, when the clipboard refused the text, is named Couldn't copy; either is announced politely. The block is as tall as its code, or its code scrolls inside a CodeBlockComponent.maxHeight. A block the app makes CodeBlockComponent.runnable, tagged as a shell, also offers Run, just before Copy, which goes to CodeBlockComponent.run.

Examples

Loading…

States

Loading…

API

Selector nol-code-block

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`code`	`string`	Required	The code the block shows and copies, with its own line breaks.
`language`	`string \| null`	`null`	The language named at the start of the header, such as `TypeScript`, or null for none, which is the default.
`wrapped`	`boolean`	`false`	Whether long lines wrap, which the Word wrap button toggles; false, so code keeps its own shape, until it is pressed or bound. Two-way: bind it as `[(wrapped)]`.
`maxHeight`	`number \| null`	`null`	The height in rem past which the code scrolls inside the block, below its header, or null, the default, for a block as tall as its code.
`streaming`	`boolean`	`false`	Whether the code is still arriving, as a reply streams in; false when not bound. While true, a block that scrolls inside itself keeps its newest line in view, until the reader scrolls up inside it, by any amount, and again once they scroll down to within 16px of its end. When it turns false the block stays where it is, and its colored tokens settle into spans, so a finished block adds nothing to the cost of later changes to the page; bind it to every block that streams, since one never marked streaming builds its last line's spans again at each change.
`runnable`	`boolean`	`false`	Whether the block offers Run when its language is a shell: bash, sh, shell, zsh, powershell, pwsh or cmd, in any case; false when not bound, and then the block has no Run. Run is an icon button like Copy, just before it, named Run and the language, as Run bash command. The kit shows no feedback and announces nothing when it is chosen.
`runState`	`ShellRunState`	`ShellRunState.Idle`	What became of the block's latest Run, which Run shows as `ShellRunState` says, for a block on its own; a block inside a `MessageComponent` or a `MarkdownViewComponent` from `@noldova/ui.components.angular/markdown` shows the state they give for its index instead. Idle when not bound.

Outputs

Name	Type	Description
`run`	`ShellRun`	Emits the block's code, language and index when a person chooses Run, by click or by keyboard, whatever its state; the kit never runs it.

Accessibility

Key	Action
`Tab`	Moves the focus into the block's actions, onto the one focused last, and then past them: the actions are one Tab stop.
`Arrow Right`	Moves to the next action.
`Arrow Left`	Moves to the previous action.
`Home`	Moves to the first action, Word wrap.
`End`	Moves to the last action, Copy.
`Enter`	Presses the focused action.
`Space`	Presses the focused action.

Its actions are a toolbar named Code block actions: Word wrap, a toggle that exposes whether long lines wrap, and Copy, with Run between them when its owner makes a block in a shell language runnable.

Each action is an icon button named by its label, which its tooltip shows; for a moment after it is pressed, Copy is named Copied, or Couldn't copy.

Run is named Run, the language and command, such as Run bash command, with (running) after it while its owner shows the run going, and again once it has ended; the block sends the run to its owner and shows only the state its owner gives.

The code is a pre element holding a code element, so it is read as written; its coloring never changes its text, so Copy copies the code as bound.

Specification

Loading…