Code-Editor

📘 Developer Guide

With the Code-Editor Brick, you can add an IDE with Intellisense and several other features, depending on the chosen language.

---

🔁 Example

Designer

Runtime

---

⚙️ Configuration Properties

config

Key	Label	Description	Default Value
editorOptions *	An object containing editor options	See config.editorOptions for more information CodeEditorOptions	{ language: 'json', height: '100%', width: '100%', automaticLayout: true }
formatOnStart *	Formats code on startup	Accepts true or false boolean	true
required	Specifies if editor input is required	Accepts true or false boolean	false
disabled	Specifies if the editor is disabled	Accepts true or false boolean	false
changeMode	Specifies the Saving behavior	always: saves on every change debounced saves on delay onBlur saves when editor loses focus always | debounced | onBlur	debounced
debounceTime	Debounce time in ms	Accepts a number in milliseconds (ms) number	300
languageDiagnosticOptions	Language-specific diagnostics	See config.languageDiagnosticOptions for more information fyzMonacoLanguageDiagnosticOptions	-

editorOptions (config.editorOptions)

Key	Label	Description	Default Value
theme	Editor Theme	Accepts vs | vs-dark | hc-black | hc-light. hc stands for High Contrast	Either vs-dark or vs (depends on browser color schema)
language	Editor Language	Accepts: json | javascript | typescript | html | css | scss | xml | yaml | markdown | plaintext	json
height	Height of the Editor	Accepts a string, e.g. 100% or 500px string	100%
width	Width of the Editor	Accepts a string, e.g. 100% or 500px string	100%
automaticLayout	Auto Layout	Editor grows or shrinks based on space. Accepts true or false	boolean
lineNumbers	Row numbering	Accepts on | off | relative | interval	-
lineNumbersMinChars	Minimum width for line nums	Width reserved, e.g. 5 equals at least 5 numbers number	-
minimap	Minimap options	See config.editorOptions.minimap for more info CodeEditorMinimapOptions	-

minimapOptions (config.editorOptions.minimapOptions)

Key	Label	Description	Default Value
autohide	Autohide minimap	Hides minimap while scrolling or hovering. boolean	-
enabled	Enable minimap	Accepts true or false	-
maxColumn	Max rendered columns	Won't render code longer than X chars per line. number	-
renderCharacters	Show chars (not just colors)	Accepts true or false boolean	-
scale	Character scale in minimap	Value over 1 = bigger chars, under 1 = smaller number	-
sectionHeaderFontSize	Font size of section headlines	Custom font size number	-
showMarkSectionHeaders	Show // MARK in minimap	Display locations of // MARK comments. boolean	-
showMarkSectionHeaders	Show #region in minimap	Display locations of region markers. boolean	-
showSlider	Scrollbar behavior	always | mouseover	-
side	Side of minimap	right | left	-
size	Minimap size	propotional (scales with editor) | fill (fills space) | fit (everything visible)	-

languageDiagnosticOptions (config.languageDiagnosticOptions)

(Currently only supports JSON and Typescript)

JSON (config.languageDiagnosticOptions.json)

Key	Label	Description	Default Value
validate	Enable Validation	Enables validator for syntax and schema validation. boolean	-
allowComments	Allow Comments	If true, comments are allowed. boolean	-
schemas	JSON Schemas	List of known schemas with URI, file match patterns, and schema. { uri, fileMatch, schema }	-
enableSchemaRequest	Enable Schema Requests	Loads schema on-demand via fetch. boolean	-
schemaValidation	Schema Validation Severity	Severity of schema validation problems: error | warning | ignore	warning
schemaRequest	Schema Request Severity	Severity on schema loading: error | warning | ignore	warning
trailingCommas	Trailing Commas Severity	Severity of reported trailing commas. error | warning | ignore	error
comments	Comments Severity	Severity of reported comments, else as per allowComments. error | warning | ignore	-

Typescript (config.languageDiagnosticOptions.typescript)

Key	Label	Description	Default Value
noSemanticValidation	Disable Semantic Validation	Disables validation for type checking and symbol resolution. boolean	-
noSyntaxValidation	Disable Syntax Validation	Disables validation for syntax errors (structure, brackets, tokens). boolean	-
noSuggestionDiagnostics	Disable Suggestion Diagnostics	Disables suggestions on code style and unused vars. boolean	-
onlyVisible	Limit diagnostics to visible files	Runs diagnostics only for visible files. boolean	false
diagnosticCodesToIgnore	Ignored Diagnostic Codes	Diagnostic codes ignored during validation. number[]	-

---

🛠️ Usage

Designer

(Use the built-in configuration inputs in the right side navigation)

Config

(Edit the whole configuration to your liking)