EditorGutter

EditorGutter

The Editor Gutter: the presentation-only margin strip drawn to the left of the MarkdownRichEditor. It shows a Line Number for each visible content line of the Visual Document and a Fold Toggle (a chevron) beside each Section Heading that Folds or Unfolds that Section on click.

• Class: UI.Controls.EditorGutter (derives from System.Windows.Controls.Canvas)
• Default style: src/UI/Controls/EditorGutter.xaml (merged in App.xaml)

Authored as a custom Control (class plus a ResourceDictionary for its look), per the project's Control exception to the zero-code-behind rule. The gutter is view-only: it reads the editor's blocks, fold state, and line layout and mirrors them, and never mutates the document — so it cannot change the Markdown source (INV-011).

How it works

The gutter positions its glyphs from TextPointer.GetCharacterRect, which reports each line's position relative to the editor's viewport. It re-lays out whenever the editor's text, size, or scroll offset changes (via TextChanged, SizeChanged, and the bubbled ScrollViewer.ScrollChangedEvent), so numbers and chevrons stay aligned as the user types and scrolls.

• Line Numbers — one per visible rendered line, counting each soft-wrapped continuation as its own line (as a code editor does), numbered in document order. The walk follows the editor's rendered lines via TextPointer.GetLineStartPosition. The lines of a Folded Section Body are hidden and therefore not numbered, so the numbering reflects what is currently visible.
• Fold Toggles — a chevron beside each Section Heading: ▾ (down) when the Section is Unfolded, ▸ (right) when it is Folded. Clicking it calls MarkdownRichEditor.ToggleFold for that heading. Document-wide folding is on the command bar as Collapse all / Expand all.

Properties

Property	Type	Description
Editor	MarkdownRichEditor?	The editor whose lines and Sections this gutter mirrors. Setting it wires the refresh subscriptions.
LineNumberBrush	Brush	Brush for Line Numbers. Themed to MutedTextBrush.
ChevronBrush	Brush	Brush for a Fold Toggle chevron. Themed to MutedTextBrush.
ChevronHoverBrush	Brush	Brush for a Fold Toggle chevron while hovered. Themed to AccentBrush.

Usage

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <controls:EditorGutter Grid.Column="0" Editor="{Binding ElementName=Editor}" />
    <controls:MarkdownRichEditor x:Name="Editor" Grid.Column="1"
                                 Markdown="{Binding ActiveSession.Markdown, UpdateSourceTrigger=PropertyChanged}" />
</Grid>