Code, Diff & Markdown Editors
Three Monaco-backed controls cover editing and reviewing text content. They complement the form-generating Editor (which handles structured records): these handle source text — code, markdown, and diffs.
| Control | Purpose |
|---|---|
CodeEditorControl |
Syntax-highlighted code editing/viewing |
DiffEditorControl |
Side-by-side original-vs-modified comparison |
MarkdownEditorControl |
Markdown editing with preview, track changes, and auto-save |
Code Editor
CodeEditorControl embeds Monaco with full syntax highlighting. Set Readonly for display-only
snippets; leave it editable for authoring surfaces (the mesh's Code nodes use exactly this control).
new CodeEditorControl()
.WithValue(
"public record Position(string Name, double Amount);\n" +
"\n" +
"var totalAssets = positions\n" +
" .Where(p => p.Amount > 0)\n" +
" .Sum(p => p.Amount);")
.WithLanguage("csharp")
.WithReadonly(true)
.WithHeight("160px")
.WithLineNumbers(true)
.WithMinimap(false)
Other options: WithTheme(string), WithWordWrap(bool), WithPlaceholder(string).
Diff Editor
DiffEditorControl renders the classic two-pane diff — the same view the mesh uses for node
version comparisons and tracked-change review.
new DiffEditorControl
{
OriginalLabel = "2024 disclosure",
ModifiedLabel = "2025 disclosure",
Language = "markdown",
Height = "180px",
OriginalContent =
"# Funding\n" +
"The funding ratio stands at 109.8%.\n" +
"Asset allocation is unchanged.",
ModifiedContent =
"# Funding\n" +
"The funding ratio stands at 112.4%.\n" +
"Equity allocation increased by 3 percentage points."
}
Markdown Editor
MarkdownEditorControl is the markdown authoring surface: live preview, comments, and track
changes. Standalone it edits in memory; bound to a node via WithAutoSave(hubAddress, nodePath) it
persists every change through the node stream — the standard way to make markdown editing stick.
new MarkdownEditorControl()
.WithValue(
"# Meeting Notes\n\n" +
"- Reviewed **Q2 results**\n" +
"- Agreed to increase the *equity* allocation\n" +
"- Next review: October")
.WithHeight("260px")
Persisting edits. For content that lives on a mesh node, always use
WithAutoSave(hubAddress, nodePath)— the editor then writes through the node stream and every other view of the node updates live. Never copy node content into a layout-area data item and save it back with a subscription.
See Also
- Editor — auto-generated forms for structured records
- Data Binding — how node-bound values flow into these controls