Selection and layout globals

Syntax

sel                            // [[sl, sc, el, ec, dir], …]
sel = [[3], [5, 1, 5, -1, 1]]  // line 3, and line 5 selected from right to left
title = 'My page'              // the title of the playground
s.layout = 'o/i'               // output on top, input below
s.Position = 40                // the split, from 0 to 100
o.getDimensions()              // the size and aspect ratio of the output frame

Selections

sel

The selections of the editor, as an array with one [sl, sc, el, ec, dir] per cursor or selection. sl and el are the start and end lines, sc and ec the start and end columns. Lines and columns are 1-based, the start is always before the end, and the end column is exclusive. dir is 0 for a selection made from left to right, with the cursor at its end, and 1 for one made from right to left, with the cursor at its start. Before the editor exists it is [].

Assigning takes effect asynchronously, once the editor is ready. null, undefined and [] select [[1, 1, 1, 1, 0]]: the editor always keeps one selection. null and undefined items are ignored. An error, for example a value that is not an array, is logged as sel.set and leaves the selection unchanged. Short forms:

[sl]

The whole line: [sl, 1, sl, -1, 0].

[sl, sc]

A cursor: [sl, sc, sl, sc, 0].

[sl, sc, el]

ec defaults to sc.

Four numbers

dir is 0.

Negative numbers count from the end. A line of -1 is the last line and -2 the one before. A column of -1 is after the last character of the line, and -2 is before the last character. Lines are clamped to the range from 1 to the last line, and columns from 1 to the line length plus 1, so a 0 becomes 1.

When it is applied during Agent Folder Share, the editor reveals the selection, with every cursor of a multiple selection, and takes focus, and 📄.sel is rewritten. An embedded playground posts 'selection-change' to its parent. The selections are stored in the URL as | (JSON) the next time the URL state is written, for example when the editor loses focus, when a title or setting changes, on a deploy or on a reload, and not on every change. o.input.sel() returns tuples that you can assign directly.

selX Experimental

The selected texts, one string per selection, in the order of sel. Assigning a string replaces every selection with it, and assigning an array replaces selection i with array[i], in one undoable edit.

selXI Experimental

Like selX, but it returns [whole source] when every selection is empty. Assigning, when every selection is empty, replaces the whole input with the value, or with value[0] for an array, as one undoable edit. Otherwise it behaves like selX.

folds Experimental

The folded regions of the editor: [[startLine, endLine, source, collapsed], …]. collapsed is 1 or 0. source is 0 for folds that the language provides and another number for manual folds. It is [] while the editor has no folding model.

Assigning [[a, z, s, x], …] takes effect asynchronously. It is ignored if an entry has fewer than 4 items. It removes the current manual folds and applies the given ranges, collapsed when x is not 0. Stored in the URL as [.

The input editor

The input editor is the global i. These members are experimental.

i.source Experimental

The full source text. Assigning replaces the whole document as one undoable edit.

i.value Experimental

The source text. Assigning sets the text through the editor's setValue, which is not a normal undoable edit. Prefer i.source or i.valueUndoable.

i.valueUndoable Experimental

Assign only. Replaces everything as one undoable step and restores the scroll position and cursor.

i.valueSingleUndoable Experimental

Assign only. The same, but the step merges into the previous undo stop, so one Undo reverts both.

i.redacted Experimental

The text of the selection, with all selections joined without a separator, or the whole input when nothing is selected. When it contains copy:redact elements, they are redacted and the fragment is returned re-serialized, not as authored text. As a side effect it shows a clipboard statistics toast, and a redact toast.

i.find Experimental

Scripts the find widget of the editor:

i.find.open

A boolean. Assigning is asynchronous: it opens or closes the widget and resolves once the state has changed, after at most 1 second.

i.find.text

The text of the Find input. Read only.

i.find.caseSensitive, i.find.wholeWorld, i.find.regex, i.find.inSelection

Booleans that you can read and assign. Note the spelling: the whole-word toggle is wholeWorld, not wholeWord. Setting inSelection to true limits the search to the current non-empty selections.

i.find.replace.open, i.find.replace.text, i.find.replace.preserveCase

The replace field: open is a boolean with an asynchronous setter, text is read only, and preserveCase is a boolean.

Toggling them updates the URL. The state is stored as the key f, a set of letters: o open, c match case, w whole word, r regex, s in selection, x replace open, p preserve case.

ww Experimental

A boolean that you can read and assign: word wrap. Stored in the URL as ww, with the values 1 and 0.

dcb Experimental

A boolean that you can read and assign: whether a double click selects a block. Stored in the URL as dcb.

fcr Experimental

A boolean that you can read and assign: whether the find widget closes when it has found a result. Stored in the URL as fcr.

Title

title

The title of the playground: the explicit title, or the first route of Code.D when no title is set, or ''. Assigning stores the explicit title. null, undefined, the default text Instant Web Playground – Edit, View, Live! and a value equal to the first route clear it. It updates every [title-suffix] element, the title of the browser tab and the URL key title. A deployed page uses the title as its default description; see Social previews.

codeTitle Experimental

Only the explicit title, '' when there is none, without the fallback to the first route. Assigning goes through the title setter. The URL key title reads and writes it. title and codeTitle are not aliases.

outputTitle Experimental

The title that the output provides: a trimmed string, and '' for a value that is not a string. You can read and assign it.

setOutputTitle() Experimental

setOutputTitle({ text = '', exact = false }) sets the output title and returns it. With exact: true the prefix is dropped, but only while the text is not empty. The playground calls both after each in-place sync, so a value you set by hand is overwritten by the next sync.

renderPlaygroundTitle() Experimental

Computes the title of the browser tab again and returns the value without the 𝗥𝗧𝗖𝗼𝗱𝗲 • prefix.

The title of the browser tab is the first non-empty of these, with the prefix 𝗥𝗧𝗖𝗼𝗱𝗲 • :

1. the text of the <title> of the output document;
2. the explicit title;
3. the first route;
4. Instant Web Playground – Edit, View, Live!

If the output's <title> carries io:-, its text is used as it is, without the prefix.

Layout and split

s

The split panel, <wa-split-panel id=s>, that holds the input editor i and the output.

s.layout

The arrangement of the panes, as a string:

'io'

Input left, output right. The default.

'oi'

Output left, input right.

'i/o'

Input on top, output below.

'o/i'

Output on top, input below.

Assigning trims and lowercases the value. A value with a / selects the stacked orientation, and the rest must then be io or oi. Any other value, and null and undefined, is ignored without a message. s.layout is an alias of syncLayout. It is stored in the URL as se (io or oi) and h (1 for stacked).

Changing the orientation restores the split position that was last used for that orientation, 50 by default. Set s.layout before s.Position.

s.Position

The position of the split, as a percentage of the first pane: 0 to 100, 50 by default. Assign a number. It is clamped to that range, a non-finite value is ignored, and the value is applied again after 20 milliseconds. The capital P matters: s.position is the raw property of the component.

The position is not stored in the URL; only the layout is. A window resize applies the last position again. The keys that change it, Alt+1 to Alt+9 for 10 to 90 percent, Alt+0, Alt+[ and Alt+], are listed in Keyboard shortcuts.

s.se, s.oi, s.h, s.PositionLast, s.al(), s.ap(), s.disabled Experimental

s.se is the panel order, 'io' or 'oi'. s.oi is true when the output comes first, and s.h when the panes are stacked. s.PositionLast is the last position, 50 by default. s.al() toggles the orientation (Alt+/), and s.ap() swaps the panels and mirrors the position (Alt+P). s.disabled locks the divider and is stored in the URL as sd.

Measuring

getDimensions()

Every element of the playground window has this method. It returns { aspectRatio: [w, h], x, y, width, height, top, right, bottom, left }: the values of getBoundingClientRect(), plus the aspect ratio of the rounded width and height, reduced by their greatest common divisor. It is [0, 0] when either of them rounds to 0.

o.getDimensions() measures the output frame as it is displayed in the playground, in the playground's CSS pixels and including the zoom oz. It is not the viewport of the output: with ovp set, the output's CSS viewport is ovp, and the displayed size is ovp × oz.

Usage notes

• Wait before you measure. The split component applies layout changes asynchronously, so measuring in the same statement as s.layout or s.Position can return the previous geometry. setOAR() waits two animation frames after every position change. Browsers pause animation frames in background tabs, so such a wait only completes while the playground tab is visible.
• Order matters. A change of orientation restores a remembered position. Set s.layout first.
• The URL follows later. Selections and folds are written to the URL with the next URL write, not when they change. The split position is never written.

Examples

Selecting lines, then changing the selected text

Write each command to io.eval.js and read io.eval.json before the next. The first selects the whole of line 3, and line 5 from right to left with the cursor at its start. The second upper-cases every selection.

sel = [[3], [5, 1, 5, -1, 1]]

selX = selX.map(t => t.toUpperCase())

Selecting the whole input, or the end of it

sel = [[1, 1, -1, -1, 1]]    // the whole input, with the cursor at 1:1
sel = [[-1, -1, -1, -1, 0]]  // the cursor at the end of the last line

Stacking the panes and measuring after two frames

s.layout = 'o/i'; s.Position = 40; await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))); o.getDimensions()

Setting the title

title = 'Launch week'; title   // 'Launch week'

Specifications

Not part of any specification. These globals are RTCode.io playground features. getDimensions() builds on getBoundingClientRect().

Availability

See also

• Playground API
• Output settings globals
• o
• Code
• The playground interface
• Editing superpowers
• Locating source
• Agent files
• Keyboard shortcuts