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

Reconnecting…
The connection to the server was interrupted. Trying to restore it…
Trying again…
The connection could not be restored. Reloading the page…
The server was updated. Reloading the page to pick up the latest version.