ReferencecodeEditor

<codeEditor>

An interactive DoenetML code editor

<codeEditor> renders an embedded text editor pre-populated with DoenetML source. The viewer can edit the source and, when showResults is set, see the live preview rendered alongside.

Use <codeEditor> for tutorials and demos where the learner is expected to modify DoenetML, not just read it. For documentation-style read-only displays of source text, use <displayDoenetML> inside a <pre> instead.

The implicit value of a <codeEditor> is its current source text. The bindValueTo attribute creates a two-way binding to a referenced text-valued component.

Attributes and Properties

Attributes for <codeEditor>

Other (11)

text. Two-way binding target for the input's value.

componentSize. Default value: {"size":400,"isAbsolute":true}. Editor height (e.g. "500px").

text. Initial code shown in the editor before the user types.

boolean. Default value: false. Whether the editor is read-only.

renderedName

text. Name to assign to the dynamically-rendered DoenetML output.

keyword. Position of the results panel relative to the editor.

ValueDescription
bottom (default)Place the results panel below the editor.
leftPlace the results panel to the left of the editor.
rightPlace the results panel to the right of the editor.
showFormatter

boolean. Default value: false. Whether to show a code formatter button.

boolean. Default value: false. Whether to render the results panel alongside the editor.

staticName

text. Name to assign to the static DoenetML source.

viewerRatio

number. Fraction of the editor area allotted to the live viewer.

componentSize. Default value: {"size":"100","isAbsolute":false}. Editor width (e.g. "100%" or "600px").

Common to all components (9)
copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for <codeEditor name="c">

Other (16)
$c.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$c.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$c.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$c.height

componentSize. Editor height (e.g. "500px").

$c.hidden

boolean. Whether this component is hidden from the rendered output.

$c.immediateValue

text. The current code in the editor (live, before saving).

$c.immediateValueChanged

boolean. Whether the live (immediate) value has been changed from its initial state.

$c.prefill

text. Initial code shown in the editor before the user types.

$c.readOnly

boolean. Whether the editor is read-only.

$c.resultsLocation

text. Position of the results panel relative to the editor.

$c.showFormatter

boolean. Whether to show a code formatter button.

$c.showResults

boolean. Whether to render the results panel alongside the editor.

$c.text

text. The current code as a plain text string.

$c.value

text. The most recently saved code value.

$c.valueChanged

boolean. Whether the saved value has been changed from its initial state.

$c.width

componentSize. Editor width (e.g. "100%" or "600px").

Common to all components (4)
$c.doenetML

text. The DoenetML source code that produced this component.

$c.hide

boolean. Whether to hide this component from the rendered output.

$c.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$c.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Editor with live preview

The children of <codeEditor> provide the initial source. With showResults set, the viewer renders that source live in a results panel attached to the editor. Click the Source tab above to see the DoenetML that produced this example.

Attribute Examples

Attribute Example: prefill

The prefill attribute supplies the editor’s initial text as a string. Use this when the starting source is short enough to live inline; for longer starting documents, use children instead.

Attribute Example: showResults, resultsLocation

showResults toggles the live preview panel; resultsLocation places it relative to the editor (bottom, right, or left). The default is bottom.

Attribute Example: readOnly

When readOnly is set, the viewer can see the source and run the preview but cannot modify the source text.

Attribute Example: width, height

width and height accept CSS-style sizes. The defaults are full available width and a moderate fixed height.

Attribute Example: bindValueTo

bindValueTo two-way binds the editor’s text to a referenced text-valued component. Edits made in either input update the other. The label on the <textInput> makes the field accessible — its peer <codeEditor> reflects whatever is typed there.

cobwebPolylinecollect