Deryks _dev

Take over the layout

The text changes colour — proving the hook works before any cleverness.

A galley is egui's word for laid-out text: every glyph, positioned, coloured, wrapped. Normally TextEdit builds one for you. It also lets you supply your own builder, called a layouter, which it will call every time it needs the text laid out. Three edits.

editor/src/main.rstop of the file

use eframe::egui;
use egui::text::LayoutJob;
use std::env;
use std::fs;
use std::io;
use std::sync::Arc;
use std::time::Instant;

Second — a free function, above struct Editor. Not a method: it needs nothing from the editor, and keeping it out of impl Editor avoids borrowingself while TextEdit already holds&mut self.text.

editor/src/main.rsabove struct Editor

const PLAIN: egui::Color32 = egui::Color32::from_rgb(0xe8, 0xe5, 0xde);

/// Split `text` into coloured runs and hand egui a ready-made layout.
fn highlight(ui: &egui::Ui, text: &str, wrap_width: f32) -> Arc<egui::Galley> {
    let font = egui::TextStyle::Monospace.resolve(ui.style());
    let mut job = LayoutJob::default();
    job.wrap.max_width = wrap_width;

    job.append(
        text,
        0.0,
        egui::TextFormat {
            font_id: font,
            color: PLAIN,
            ..Default::default()
        },
    );

    ui.ctx().fonts_mut(|f| f.layout_job(job))
}

A LayoutJob is a list of text runs, each with aTextFormat. Right now there's one run in one colour — deliberately boring.job.wrap.max_width is the width egui asks you to wrap at; pass it through or your long lines run off the edge.

Third — tell TextEdit to use it:

editor/src/main.rsin fn ui, inside the scroll area

            egui::ScrollArea::vertical().show(ui, |ui| {
                let mut layouter =
                    |ui: &egui::Ui, buffer: &dyn egui::TextBuffer, wrap_width: f32| {
                        highlight(ui, buffer.as_str(), wrap_width)
                    };

                let output = egui::TextEdit::multiline(&mut self.text)
                    .font(egui::TextStyle::Monospace)
                    .desired_width(f32::INFINITY)
                    .layouter(&mut layouter)
                    .show(ui);

cargo run
→ same text, now in the off-white you chose. The hook works.

Find the keywords

fn, let, struct turn purple.

Now the scanner. It walks the text once, chopping off one run at a time and deciding its colour. Two edits.

editor/src/main.rsabove fn highlight

/// Words the highlighter treats as keywords.
const KEYWORDS: &[&str] = &[
    "as", "const", "else", "enum", "fn", "for", "if", "impl", "in", "let", "match", "mod", "move",
    "mut", "pub", "return", "self", "struct", "trait", "use", "while",
];

const PLAIN: egui::Color32 = egui::Color32::from_rgb(0xe8, 0xe5, 0xde);
const KEYWORD: egui::Color32 = egui::Color32::from_rgb(0xcf, 0x9b, 0xe0);

Second — replace the single job.append(…) with the loop:

editor/src/main.rsin fn highlight, replacing the single append

    let mut rest = text;
    while !rest.is_empty() {
        let (chunk, colour) = if rest.starts_with(|c: char| c.is_alphanumeric() || c == '_') {
            let end = rest
                .find(|c: char| !(c.is_alphanumeric() || c == '_'))
                .unwrap_or(rest.len());
            let word = &rest[..end];
            let colour = if KEYWORDS.contains(&word) {
                KEYWORD
            } else {
                PLAIN
            };
            (word, colour)
        } else {
            let end = rest.char_indices().nth(1).map_or(rest.len(), |(i, _)| i);
            (&rest[..end], PLAIN)
        };

        job.append(
            chunk,
            0.0,
            egui::TextFormat {
                font_id: font.clone(),
                color: colour,
                ..Default::default()
            },
        );
        rest = &rest[chunk.len()..];
    }

The whole scanner is that shape: look at what rest starts with, take the longest run that belongs together, colour it, and advance. Two cases so far — a word, or a single character of anything else.

rest.find(predicate) returns the byte offset of the first character that isn't part of the word, and &rest[..end] slices there. That's safe because find only ever returns real character boundaries — the thing lesson 4 warned you about is only a danger when you invent an index yourself.

The else branch takes one character, not one byte —char_indices().nth(1) gives the byte offset where the secondcharacter starts. Slicing at a fixed 1 would panic the first time someone typed an accented letter outside a word.

printf 'fn main() {\n let x = 1;\n}\n' > editor/scratch.md
cargo run
→ fn, let in purple; the rest off-white

Comments and strings

Two more colours, and the scanner starts to earn its name.

Keywords alone look wrong, because the two things your eye most wants separated from code are comments and string literals. Two edits.

editor/src/main.rswith the other colours

const KEYWORD: egui::Color32 = egui::Color32::from_rgb(0xcf, 0x9b, 0xe0);
const STRING: egui::Color32 = egui::Color32::from_rgb(0xa3, 0xcf, 0x8c);
const COMMENT: egui::Color32 = egui::Color32::from_rgb(0x8b, 0x92, 0x9c);

Second — two new arms, before the word arm. The line you already have gets pushed down to third place, so it's the same condition with } else in front of it instead of let (chunk, colour) =:

editor/src/main.rsin fn highlight, the top of the if-chain

        let (chunk, colour) = if rest.starts_with(|c: char| c.is_alphanumeric() || c == '_') {
        let (chunk, colour) = if rest.starts_with("//") {
            let end = rest.find('\n').unwrap_or(rest.len());
            (&rest[..end], COMMENT)
        } else if let Some(after_quote) = rest.strip_prefix('"') {
            let end = after_quote.find('"').map_or(rest.len(), |i| i + 2);
            (&rest[..end], STRING)
        } else if rest.starts_with(|c: char| c.is_alphanumeric() || c == '_') {

strip_prefix('"') returns Option<&str> — the rest of the string with the quote removed, or None. Using it in anif let both tests for the quote and gives you what follows, so you search for the closing quote in the right place. The + 2 puts both quotes back into the chunk.

map_or(rest.len(), …) handles the unterminated string — you're editing code, so half-typed literals are the normal state of the world. It colours to end of text rather than panicking or giving up.

printf 'fn main() {\n // greet\n let s = "hello";\n}\n' > editor/scratch.md
cargo run
→ purple keywords, grey comment, green string

cargo fmt && cargo clippy
Both silent. Clippy will suggest strip_prefix if you wrote the quote test by hand — it's right.