Shrink handwriting when not focused [wip]

src/app.rs

@@ -11,11 +11,12 @@ use crate::{
     file_editor::{FileEditor, SaveStatus},
     folder::Folder,
     preferences::Preferences,
+    text_styles::{H1, H1_MONO, H2, H2_MONO, H3, H3_MONO, H4, H4_MONO, H5, H5_MONO, H6, H6_MONO},
     util::{GuiSender, file_mtime, log_error},
 };
 use egui::{
-    Align, Button, Context, FontData, FontDefinitions, FontId, Image, Key, Modifiers,
-    PointerButton, RichText, ScrollArea, Theme, Widget, include_image,
+    Align, Button, Context, FontData, FontDefinitions, FontFamily, FontId, Frame, Image, Key,
+    Modifiers, PointerButton, RichText, ScrollArea, Theme, Widget, include_image,
 };
 use eyre::eyre;
 
@@ -190,35 +191,35 @@ impl App {
         .map(|(name, data)| (name.to_string(), Arc::new(FontData::from_static(data))))
         .collect();
 
-        fonts.families.insert(
-            egui::FontFamily::Proportional,
-            vec!["IosevkaAile-Regular".into()],
-        );
+        fonts
+            .families
+            .insert(FontFamily::Proportional, vec!["IosevkaAile-Regular".into()]);
 
         fonts
             .families
-            .insert(egui::FontFamily::Monospace, vec!["Iosevka-Thin".into()]);
+            .insert(FontFamily::Monospace, vec!["Iosevka-Thin".into()]);
 
         cc.egui_ctx.set_fonts(fonts);
 
         // markdown font styles
         for theme in [Theme::Dark, Theme::Light] {
             cc.egui_ctx.style_mut_of(theme, |style| {
-                for (name, size) in [
-                    ("H1", 28.0),
-                    ("H2", 26.0),
-                    ("H3", 24.0),
-                    ("H4", 22.0),
-                    ("H5", 20.0),
-                    ("H6", 18.0),
+                for (name, size, family) in [
+                    (H1, 28.0, FontFamily::Proportional),
+                    (H2, 26.0, FontFamily::Proportional),
+                    (H3, 24.0, FontFamily::Proportional),
+                    (H4, 22.0, FontFamily::Proportional),
+                    (H5, 20.0, FontFamily::Proportional),
+                    (H6, 18.0, FontFamily::Proportional),
+                    (H1_MONO, 28.0, FontFamily::Monospace),
+                    (H2_MONO, 26.0, FontFamily::Monospace),
+                    (H3_MONO, 24.0, FontFamily::Monospace),
+                    (H4_MONO, 22.0, FontFamily::Monospace),
+                    (H5_MONO, 20.0, FontFamily::Monospace),
+                    (H6_MONO, 18.0, FontFamily::Monospace),
                 ] {
-                    style.text_styles.insert(
-                        egui::TextStyle::Name(name.into()),
-                        FontId {
-                            size,
-                            family: egui::FontFamily::Proportional,
-                        },
-                    );
+                    let name = egui::TextStyle::Name(name.into());
+                    style.text_styles.insert(name, FontId { size, family });
                 }
             });
         }
@@ -470,7 +471,12 @@ impl eframe::App for App {
                 });
             });
 
-        egui::CentralPanel::default().show(ctx, |ui| {
+        egui::CentralPanel::default()
+            .frame(Frame {
+                fill: ctx.style().visuals.window_fill(),
+                ..Frame::central_panel(&ctx.style())
+            })
+            .show(ctx, |ui| {
                 if let Some(Tab::File(file_editor)) = self
                     .open_tab_index
                     .and_then(|i| self.tabs.get_mut(i))

src/file_editor.rs

@@ -11,8 +11,7 @@ use std::{
 
 use chrono::{DateTime, Local};
 use egui::{
-    Align, Button, Context, DragAndDrop, Frame, Layout, ScrollArea, Ui, UiBuilder, Vec2,
-    Widget as _, vec2,
+    Align, Button, Context, DragAndDrop, Frame, Layout, ScrollArea, Ui, UiBuilder, Vec2, vec2,
 };
 use eyre::eyre;
 use notify::{EventKind, Watcher};
@@ -220,7 +219,7 @@ impl FileEditor {
                 });
             });
 
-            self.scroll_delta = scroll_area.inner_rect.height() * 0.9;
+            self.scroll_delta = scroll_area.inner_rect.height() * 0.5;
         });
     }
 
@@ -247,25 +246,16 @@ impl FileEditor {
 
             let mut retain = true;
 
-            if is_dragging {
-                let (_, drop) = ui.dnd_drop_zone::<DraggingItem, _>(Frame::NONE, |ui| {
-                    ui.set_min_size(vec2(ui.available_width(), drag_zone_height));
-                });
-                if let Some(drop) = drop {
-                    drop_from_to = Some((drop.index, i));
-                }
-            } else {
-                // the dnd_drop_zone adds 3pts work of extra space
-                ui.add_space(drag_zone_height + 3.0);
-            }
-
+            // Createa horizontal area to draw the buffer item. The three things drawn here are:
+            // - The controls that exist at the left-size of the buffer item, i.e. "up"/"down".
+            // - The buffer item.
+            // - The controls that exist at the right-size of the buffer item, i.e. "delete".
             ui.horizontal(|ui| {
-                // We don't know how tall the buffer item will be, so we'll reserve
-                // some horizontal space here and come back to drawing the dragger
-                // later.
-                let (dragger_id, mut dragger_rect) = ui.allocate_space(Vec2::new(20.0, 1.0));
+                // At this point, we don't know how tall the buffer item will be, so we'll reserve
+                // some horizontal space here and come back to drawing the controls later.
+                let (_id, mut left_controls_rect) = ui.allocate_space(Vec2::new(20.0, 1.0));
 
-                // Leave some space at the end for the delete button..
+                // Leave some space at the end for the delete button.
                 let w = ui.available_width();
                 let item_size = Vec2::new(w - 20.0, 0.0);
 
@@ -288,18 +278,17 @@ impl FileEditor {
                 });
 
                 // Delete-button
-                if ui.button("x").clicked() {
+                if ui.button("⌫").clicked() {
                     retain = false;
                     ui.ctx().request_repaint();
                 }
 
-                // Draw the dragger using the height from the buffer item
-                dragger_rect.set_height(item_response.response.rect.height());
+                left_controls_rect.set_height(item_response.response.rect.height());
 
                 // Controls for moving the buffer item
                 ui.scope_builder(
                     UiBuilder::new()
-                        .max_rect(dragger_rect)
+                        .max_rect(left_controls_rect)
                         .layout(Layout::top_down(Align::Center)),
                     |ui| {
                         let up_button_response = ui.add_enabled(!is_first, Button::new("⇡"));
@@ -307,17 +296,12 @@ impl FileEditor {
                             drop_from_to = Some((i, i - 1));
                         }
 
-                        ui.dnd_drag_source(dragger_id, DraggingItem { index: i }, |ui| {
-                            Button::new("≡")
-                                .min_size(
-                                    // Use all available height, save for the height taken up by
-                                    // the up/down buttons + padding. Assume down-button is the
-                                    // equally tall as the up-button.
-                                    dragger_rect.size()
-                                        - Vec2::Y * (up_button_response.rect.height() * 2.0 + 4.0),
-                                )
-                                .ui(ui);
-                        });
+                        // Add some space so that the next button is drawn
+                        // at the bottom of the buffer item.
+                        ui.add_space(
+                            left_controls_rect.height()
+                                - (up_button_response.rect.height() * 2.0 + 4.0),
+                        );
 
                         if ui.add_enabled(!is_last, Button::new("⇣")).clicked() {
                             drop_from_to = Some((i, i + 2));

src/folder.rs

@@ -7,7 +7,7 @@ use std::{
     thread,
 };
 
-use egui::{Response, Ui};
+use egui::{Button, Color32, Response, Stroke, TextWrapMode, Ui, Vec2, Widget};
 use eyre::{Context, OptionExt, eyre};
 use serde::{Deserialize, Serialize};
 
@@ -52,20 +52,59 @@ impl Deref for FolderResponse<'_> {
 impl LoadedFolder {
     pub fn show<'a>(&'a mut self, ui: &mut Ui) -> FolderResponse<'a> {
         let mut open_file = None;
+
+        let draw_highlight = |ui: &mut Ui, rect| {
+            ui.painter().rect(
+                rect,
+                2.0,
+                if ui.visuals().dark_mode {
+                    Color32::from_white_alpha(16)
+                } else {
+                    Color32::from_black_alpha(16)
+                },
+                Stroke::NONE,
+                egui::StrokeKind::Outside,
+            );
+        };
+
         let inner = ui
             .collapsing(&self.name, |ui| {
                 for folder in &mut self.child_folders {
                     open_file = open_file.or(folder.show(ui).open_file);
                 }
 
+                let w = ui.available_width();
+
+                let mut first = true;
+
                 for file in &mut self.child_files {
-                    if ui.button(&file.name).clicked() {
+                    if !first {
+                        ui.add_space(2.0);
+                    }
+                    first = false;
+
+                    let button = Button::new(&file.name)
+                        .min_size(Vec2::new(w, 0.0))
+                        .wrap_mode(TextWrapMode::Truncate)
+                        .frame(false)
+                        .corner_radius(0.0)
+                        .ui(ui);
+
+                    if button.hovered() {
+                        draw_highlight(ui, button.rect);
+                    }
+
+                    if button.clicked() {
                         open_file = Some(file.path.as_path())
                     };
                 }
             })
             .header_response;
 
+        if inner.hovered() {
+            draw_highlight(ui, inner.rect);
+        }
+
         FolderResponse { inner, open_file }
     }
 
@@ -94,11 +133,18 @@ impl LoadedFolder {
                 log::error!("Symlinks not yet supported, skipping {path:?}");
                 continue;
             } else if file_type.is_file() {
+                if filter_file(&name) {
                     child_files.push(File { name, path });
+                }
             } else if file_type.is_dir() {
+                if filter_folder(&name) {
                     child_folders.push(Folder::NotLoaded { name, path });
                 }
             }
+        }
+
+        child_folders.sort_by_key(|folder| folder.name().to_owned());
+        child_files.sort_by_key(|file| (!file.name.ends_with(".md"), file.name.clone()));
 
         let folder = LoadedFolder {
             name,
@@ -216,3 +262,11 @@ impl<'de> Deserialize<'de> for Folder {
         Ok(Folder::NotLoaded { name, path })
     }
 }
+
+fn filter_folder(_folder_name: &str) -> bool {
+    true
+}
+
+fn filter_file(file_name: &str) -> bool {
+    file_name != ".DS_Store"
+}

src/handwriting/mod.rs

@@ -1,5 +1,6 @@
 mod canvas_rasterizer;
 mod disk_format;
+mod tool;
 
 use std::{
     fmt::{self, Display},
@@ -15,7 +16,7 @@ use disk_format::{DiskFormat, RawStroke, RawStrokeHeader, f16_le};
 use egui::{
     Color32, Event, Frame, Id, Mesh, PointerButton, Pos2, Rect, Sense, Shape, Stroke, Theme, Ui,
     Vec2,
-    emath::{self, TSTransform},
+    emath::{self, RectTransform, TSTransform},
     epaint::{TessellationOptions, Tessellator, Vertex},
 };
 use eyre::{Context, bail};
@@ -26,6 +27,8 @@ use zerocopy::{FromBytes, IntoBytes};
 use crate::{custom_code_block::try_from_custom_code_block, rasterizer};
 use crate::{custom_code_block::write_custom_code_block, util::random_id};
 
+use self::tool::{ToolEvent, Tool};
+
 const HANDWRITING_MIN_HEIGHT: f32 = 100.0;
 const HANDWRITING_BOTTOM_PADDING: f32 = 80.0;
 const HANDWRITING_MARGIN: f32 = 0.05;
@@ -78,10 +81,23 @@ struct Ephemeral {
 
     canvas_rasterizer: CanvasRasterizer,
 
+    tool: Tool,
+
+    /// Tool position in canvas space.
+    tool_position: Option<Pos2>,
+
+    /// Tool position last frame, in canvas space.
+    last_tool_position: Option<Pos2>,
+
+    /// Whether the handwriting element is being interacted with.
+    is_focused: bool,
+
     /// The stroke that is currently being drawed.
     current_stroke: Vec<Pos2>,
 
     /// The lines that have not been blitted to `texture` yet.
+    ///
+    /// Each pair of [Pos2]s is the start and end of one line.
     unblitted_lines: Vec<[Pos2; 2]>,
 
     tessellator: Option<Tessellator>,
@@ -126,6 +142,10 @@ impl Default for Ephemeral {
         Self {
             id: random_id(),
             canvas_rasterizer: Default::default(),
+            tool: Tool::Eraser,
+            tool_position: None,
+            last_tool_position: None,
+            is_focused: false,
             current_stroke: Default::default(),
             tessellator: None,
             mesh: Default::default(),
@@ -170,6 +190,14 @@ impl Handwriting {
                 let _ = Clipboard::new().unwrap().set_text(text);
             }
 
+            let (label, switch_to_tool) = match self.e.tool {
+                Tool::Pencil => ("eraser", Tool::Eraser),
+                Tool::Eraser => ("pencil", Tool::Pencil),
+            };
+            if ui.button(label).clicked() {
+                self.e.tool = switch_to_tool;
+            }
+
             let vertex_count: usize = self.e.mesh.indices.len() / 3;
             ui.label(format!("vertices: {vertex_count}"));
         })
@@ -209,12 +237,21 @@ impl Handwriting {
             emath::RectTransform::from_to(Rect::from_min_size(Pos2::ZERO, size), response.rect);
         let from_screen = to_screen.inverse();
 
+        self.e.last_tool_position = self.e.tool_position;
+
         // Was the user in the process of drawing a stroke last frame?
         let was_drawing = !self.e.current_stroke.is_empty();
 
-        // Is the user in the process of drawing a stroke now?
+        // Is the user in the process of drawing a stroke now?;
         let is_drawing = response.interact_pointer_pos().is_some();
 
+        if is_drawing {
+            self.e.is_focused = true;
+        } else if ui.ctx().input(|i| i.pointer.any_down()) {
+            // if the user starts interactive with something else, unfocus the handwriting area.
+            self.e.is_focused = false;
+        }
+
         if !is_drawing {
             if was_drawing {
                 // commit current line
@@ -222,12 +259,18 @@ impl Handwriting {
                 response.mark_changed();
             }
 
+            let padding = if self.e.is_focused {
+                HANDWRITING_BOTTOM_PADDING
+            } else {
+                0.0
+            };
+
             // recalculate how tall the widget should be
             let lines_max_y = self
                 .strokes
                 .iter()
                 .flatten()
-                .map(|p| p.y + HANDWRITING_BOTTOM_PADDING)
+                .map(|p| p.y + padding)
                 .fold(HANDWRITING_MIN_HEIGHT, |max, y| max.max(y));
 
             // Change the height of the handwriting item.
@@ -268,88 +311,23 @@ impl Handwriting {
 
             // Process input events and turn them into strokes
             for event in events {
-                let last_canvas_pos = self.e.current_stroke.last();
+                let mut last_tool_position = self.e.last_tool_position;
+                process_event(&mut last_tool_position, from_screen, &event, |tool_event| {
+                    self.e.tool_position = tool_event.position();
+                    match self.e.tool {
+                        Tool::Pencil => {
+                            hw_response.changed |=
+                            tool::pencil::on_tool_event(self, tool_event);
                             
-                match event {
-                    Event::PointerMoved(new_position) => {
-                        let new_canvas_pos = from_screen * new_position;
-                        if let Some(&last_canvas_pos) = last_canvas_pos {
-                            if last_canvas_pos != new_canvas_pos {
-                                self.push_to_stroke(new_canvas_pos);
-                                response.mark_changed();
+                        }
+                        Tool::Eraser => {
+                            if tool::eraser::on_tool_event(self, tool_event) {
+                                self.e.refresh_texture = true;
+                                hw_response.changed = true;
                             }
                         }
                     }
-
-                    Event::MouseMoved(mut delta) => {
-                        if delta.length() == 0.0 {
-                            continue;
-                        }
-
-                        // FIXME: pinenote: MouseMovement delta does *not* take into account screen
-                        // scaling and rotation, so unless you've scaling=1 and no rotation, the
-                        // MouseMoved values will be all wrong.
-                        if cfg!(feature = "pinenote") {
-                            delta /= 1.8;
-                            delta = -delta.rot90();
-                        }
-
-                        if let Some(&last_canvas_pos) = last_canvas_pos {
-                            self.push_to_stroke(last_canvas_pos + delta);
-                            response.mark_changed();
-                        } else {
-                            println!("Got `MouseMoved`, but have no previous pos");
-                        }
-                    }
-
-                    Event::PointerButton {
-                        pos,
-                        button,
-                        pressed,
-                        modifiers: _,
-                    } => match (button, pressed) {
-                        (PointerButton::Primary, true) => {
-                            if last_canvas_pos.is_none() {
-                                self.e.current_stroke.push(from_screen * pos);
-                            }
-                        }
-                        (PointerButton::Primary, false) => {
-                            if last_canvas_pos.is_some() {
-                                self.push_to_stroke(from_screen * pos);
-                                self.commit_current_line(hw_response);
-                                response.mark_changed();
-                            }
-
-                            // Stop reading events.
-                            // TODO: In theory, we can get multiple press->draw->release series
-                            // in the same frame. Should handle this.
-                            break;
-                        }
-                        (_, _) => continue,
-                    },
-
-                    // Stop drawing after pointer disappears or the window is unfocused
-                    // TODO: In theory, we can get multiple press->draw->release series
-                    // in the same frame. Should handle this.
-                    Event::PointerGone | Event::WindowFocused(false) => {
-                        if !self.e.current_stroke.is_empty() {
-                            self.commit_current_line(hw_response);
-                            break;
-                        }
-                    }
-
-                    Event::WindowFocused(true)
-                    | Event::Copy
-                    | Event::Cut
-                    | Event::Paste(..)
-                    | Event::Text(..)
-                    | Event::Key { .. }
-                    | Event::Zoom(..)
-                    | Event::Ime(..)
-                    | Event::Touch { .. }
-                    | Event::MouseWheel { .. }
-                    | Event::Screenshot { .. } => continue,
-                }
+                });
             }
         }
 
@@ -406,6 +384,12 @@ impl Handwriting {
         // Draw the texture
         self.e.canvas_rasterizer.show(ui.ctx(), &painter, mesh_rect);
 
+        if let Some(tool_position) = self.e.tool_position && let Tool::Eraser = self.e.tool {
+            let pos = to_screen * tool_position;
+            let shape = Shape::circle_stroke(pos, tool::eraser::RADIUS, style.stroke);
+            painter.add(shape);
+        }
+
         response
     }
 
@@ -425,7 +409,7 @@ impl Handwriting {
             last_mesh_ctx,
             ..
         } = &mut self.e;
-        // TODO: don't tessellate and rasterize on the GUI thread
+        // TODO: avoid tessellating and rasterizing on the GUI thread
 
         *last_mesh_ctx = Some(mesh_context);
 
@@ -444,10 +428,7 @@ impl Handwriting {
             .iter()
             .chain([&*current_stroke])
             .filter(|stroke| stroke.len() >= 2)
-            .map(|stroke| {
-                //let points: Vec<Pos2> = stroke.iter().map(|&p| to_screen * p).collect();
-                egui::Shape::line(stroke.clone(), style.stroke)
-            })
+            .map(|stroke| egui::Shape::line(stroke.clone(), style.stroke))
             .for_each(|shape| {
                 tessellator.tessellate_shape(shape, mesh);
             });
@@ -480,7 +461,6 @@ impl Handwriting {
         ui.vertical_centered_justified(|ui| {
             self.ui_control(None, ui, &mut response);
 
-            //ui.label("Paint with your mouse/touch!");
             Frame::canvas(ui.style())
                 .corner_radius(20.0)
                 .stroke(Stroke::new(5.0, Color32::from_black_alpha(40)))
@@ -591,6 +571,87 @@ impl Handwriting {
     }
 }
 
+/// Convert [egui::Event]s to [ToolEvent]s.
+fn process_event(
+    last_canvas_pos: &mut Option<Pos2>,
+    from_screen: RectTransform,
+    event: &Event,
+    mut on_tool_event: impl FnMut(ToolEvent),
+) {
+    match event {
+        &Event::PointerMoved(new_position) => {
+            let new_canvas_pos = from_screen * new_position;
+            if last_canvas_pos.is_some() && *last_canvas_pos != Some(new_canvas_pos) {
+                *last_canvas_pos = Some(new_canvas_pos);
+                on_tool_event(ToolEvent::Move { to: new_canvas_pos });
+            }
+        }
+
+        &Event::MouseMoved(mut delta) => {
+            if delta.length() == 0.0 {
+                return;
+            }
+
+            // FIXME: pinenote: MouseMovement delta does *not* take into account screen
+            // scaling and rotation, so unless you've scaling=1 and no rotation, the
+            // MouseMoved values will be all wrong.
+            if cfg!(feature = "pinenote") {
+                delta /= 1.8;
+                delta = -delta.rot90();
+            }
+
+            if let Some(pos) = last_canvas_pos {
+                *pos += delta;
+                on_tool_event(ToolEvent::Move { to: *pos });
+            } else {
+                println!("Got `MouseMoved`, but have no previous pos");
+            }
+        }
+
+        &Event::PointerButton {
+            pos,
+            button,
+            pressed,
+            modifiers: _,
+        } => match (button, pressed) {
+            (PointerButton::Primary, true) => {
+                if last_canvas_pos.is_none() {
+                    let pos = from_screen * pos;
+                    *last_canvas_pos = Some(pos);
+                    on_tool_event(ToolEvent::Press { at: pos });
+                }
+            }
+            (PointerButton::Primary, false) => {
+                if last_canvas_pos.take().is_some() {
+                    let pos = from_screen * pos;
+                    on_tool_event(ToolEvent::Move { to: pos });
+                    on_tool_event(ToolEvent::Release {});
+                }
+            }
+            (_, _) => {}
+        },
+
+        // Stop drawing after pointer disappears or the window is unfocused
+        Event::PointerGone | Event::WindowFocused(false) => {
+            if last_canvas_pos.take().is_some() {
+                on_tool_event(ToolEvent::Release {});
+            }
+        }
+
+        Event::WindowFocused(true)
+        | Event::Copy
+        | Event::Cut
+        | Event::Paste(..)
+        | Event::Text(..)
+        | Event::Key { .. }
+        | Event::Zoom(..)
+        | Event::Ime(..)
+        | Event::Touch { .. }
+        | Event::MouseWheel { .. }
+        | Event::Screenshot { .. } => {}
+    }
+}
+
 fn new_tessellator(pixels_per_point: f32) -> Tessellator {
     Tessellator::new(
         pixels_per_point,
@@ -734,7 +795,9 @@ fn mesh_triangles(mesh: &Mesh) -> impl Iterator<Item = [&Vertex; 3]> + Clone {
 mod test {
     use std::str::FromStr;
 
-    use super::Handwriting;
+    use egui::{Event, Modifiers, PointerButton, Pos2, Rect, emath::RectTransform};
+
+    use super::{Handwriting, process_event};
 
     #[test]
     fn serialize_handwriting() {
@@ -748,4 +811,194 @@ mod test {
             Handwriting::from_str(&serialized).expect("Handwriting must de/serialize correctly");
         insta::assert_debug_snapshot!("deserialized handwriting", deserialized.strokes);
     }
+
+    const TEST_EVENTS: &[Event] = &[
+        Event::PointerMoved(Pos2::new(749.9, 225.6)),
+        Event::PointerButton {
+            pos: Pos2::new(749.9, 225.6),
+            button: PointerButton::Primary,
+            pressed: true,
+            modifiers: Modifiers::NONE,
+        },
+        Event::PointerMoved(Pos2::new(749.9, 225.7)),
+        Event::PointerMoved(Pos2::new(749.9, 226.4)),
+        Event::PointerMoved(Pos2::new(750.2, 228.4)),
+        Event::PointerMoved(Pos2::new(751.0, 231.3)),
+        Event::PointerMoved(Pos2::new(752.6, 234.4)),
+        Event::PointerMoved(Pos2::new(754.1, 237.7)),
+        Event::PointerMoved(Pos2::new(755.8, 241.1)),
+        Event::PointerMoved(Pos2::new(757.7, 244.4)),
+        Event::PointerMoved(Pos2::new(759.3, 247.4)),
+        Event::PointerMoved(Pos2::new(760.8, 250.2)),
+        Event::PointerMoved(Pos2::new(762.8, 253.4)),
+        Event::PointerMoved(Pos2::new(765.1, 256.8)),
+        Event::PointerMoved(Pos2::new(767.7, 260.2)),
+        Event::PointerMoved(Pos2::new(771.2, 264.3)),
+        Event::PointerMoved(Pos2::new(774.6, 267.9)),
+        Event::PointerMoved(Pos2::new(778.2, 271.2)),
+        Event::PointerMoved(Pos2::new(782.7, 275.2)),
+        Event::PointerMoved(Pos2::new(786.7, 278.5)),
+        Event::PointerMoved(Pos2::new(790.4, 280.8)),
+        Event::PointerMoved(Pos2::new(794.1, 282.6)),
+        Event::PointerMoved(Pos2::new(797.9, 283.9)),
+        Event::PointerMoved(Pos2::new(801.9, 284.8)),
+        Event::PointerMoved(Pos2::new(805.9, 285.5)),
+        Event::PointerMoved(Pos2::new(810.2, 285.8)),
+        Event::PointerMoved(Pos2::new(814.5, 285.8)),
+        Event::PointerMoved(Pos2::new(818.2, 285.6)),
+        Event::PointerMoved(Pos2::new(821.6, 284.5)),
+        Event::PointerMoved(Pos2::new(824.7, 283.0)),
+        Event::PointerMoved(Pos2::new(827.5, 281.4)),
+        Event::PointerMoved(Pos2::new(830.4, 279.6)),
+        Event::PointerMoved(Pos2::new(833.4, 277.7)),
+        Event::PointerMoved(Pos2::new(836.1, 275.7)),
+        Event::PointerMoved(Pos2::new(838.6, 273.6)),
+        Event::PointerMoved(Pos2::new(840.9, 271.7)),
+        Event::PointerMoved(Pos2::new(843.0, 269.6)),
+        Event::PointerMoved(Pos2::new(845.4, 267.2)),
+        Event::PointerMoved(Pos2::new(847.7, 265.1)),
+        Event::PointerMoved(Pos2::new(849.8, 262.7)),
+        Event::PointerMoved(Pos2::new(852.0, 260.0)),
+        Event::PointerMoved(Pos2::new(854.3, 256.8)),
+        Event::PointerMoved(Pos2::new(856.3, 253.4)),
+        Event::PointerMoved(Pos2::new(858.2, 250.1)),
+        Event::PointerMoved(Pos2::new(860.0, 247.1)),
+        Event::PointerMoved(Pos2::new(861.5, 244.3)),
+        Event::PointerMoved(Pos2::new(862.8, 242.0)),
+        Event::PointerMoved(Pos2::new(864.1, 240.1)),
+        Event::PointerMoved(Pos2::new(865.0, 238.2)),
+        Event::PointerMoved(Pos2::new(865.8, 236.6)),
+        Event::PointerMoved(Pos2::new(866.5, 234.9)),
+        Event::PointerMoved(Pos2::new(867.1, 233.1)),
+        Event::PointerMoved(Pos2::new(867.8, 231.4)),
+        Event::PointerMoved(Pos2::new(868.4, 229.8)),
+        Event::PointerMoved(Pos2::new(868.7, 228.4)),
+        Event::PointerMoved(Pos2::new(868.9, 227.2)),
+        Event::PointerMoved(Pos2::new(869.1, 226.2)),
+        Event::PointerMoved(Pos2::new(869.1, 225.1)),
+        Event::PointerMoved(Pos2::new(869.1, 224.1)),
+        Event::PointerMoved(Pos2::new(869.1, 223.4)),
+        Event::PointerMoved(Pos2::new(869.1, 222.8)),
+        Event::PointerMoved(Pos2::new(869.1, 222.4)),
+        Event::PointerMoved(Pos2::new(869.1, 222.4)),
+        // Event::PointerButton {
+        //     pos: Pos2::new(869.1, 222.4),
+        //     button: PointerButton::Primary,
+        //     pressed: false,
+        //     modifiers: Modifiers::NONE,
+        // },
+        Event::PointerGone,
+        Event::PointerMoved(Pos2::new(779.3, 158.6)),
+        // --
+        // FIXME: This line looks weird. Probably because of a bug in the rasterizer when the X-coord is all the same.
+        Event::PointerButton {
+            pos: Pos2::new(779.3, 158.6),
+            button: PointerButton::Primary,
+            pressed: true,
+            modifiers: Modifiers::NONE,
+        },
+        Event::PointerMoved(Pos2::new(779.3, 159.0)),
+        Event::PointerMoved(Pos2::new(779.3, 160.9)),
+        Event::PointerMoved(Pos2::new(779.3, 164.6)),
+        Event::PointerMoved(Pos2::new(779.3, 169.6)),
+        Event::PointerMoved(Pos2::new(779.3, 175.2)),
+        Event::PointerMoved(Pos2::new(779.3, 180.3)),
+        Event::PointerMoved(Pos2::new(779.3, 185.0)),
+        Event::PointerMoved(Pos2::new(779.3, 189.4)),
+        Event::PointerMoved(Pos2::new(779.3, 192.8)),
+        Event::PointerMoved(Pos2::new(779.3, 194.9)),
+        Event::PointerMoved(Pos2::new(779.3, 196.1)),
+        Event::PointerMoved(Pos2::new(779.3, 197.0)),
+        Event::PointerMoved(Pos2::new(779.3, 197.6)),
+        Event::PointerMoved(Pos2::new(779.3, 198.1)),
+        Event::PointerMoved(Pos2::new(779.3, 198.5)),
+        Event::PointerMoved(Pos2::new(779.3, 198.8)),
+        Event::PointerMoved(Pos2::new(779.3, 199.0)),
+        Event::PointerMoved(Pos2::new(779.3, 199.2)),
+        Event::PointerMoved(Pos2::new(779.3, 199.2)),
+        Event::PointerButton {
+            pos: Pos2::new(779.3, 199.2),
+            button: PointerButton::Primary,
+            pressed: false,
+            modifiers: Modifiers::NONE,
+        },
+        // --
+        Event::PointerMoved(Pos2::new(841.5, 159.2)),
+        Event::PointerButton {
+            pos: Pos2::new(841.5, 159.2),
+            button: PointerButton::Primary,
+            pressed: true,
+            modifiers: Modifiers::NONE,
+        },
+        Event::PointerMoved(Pos2::new(841.5, 159.3)),
+        Event::PointerMoved(Pos2::new(841.5, 159.7)),
+        Event::PointerMoved(Pos2::new(841.5, 160.5)),
+        Event::PointerMoved(Pos2::new(841.5, 162.4)),
+        Event::PointerMoved(Pos2::new(841.5, 165.1)),
+        Event::PointerMoved(Pos2::new(841.5, 168.4)),
+        Event::PointerMoved(Pos2::new(841.5, 171.6)),
+        Event::PointerMoved(Pos2::new(841.5, 174.4)),
+        Event::PointerMoved(Pos2::new(841.5, 177.1)),
+        Event::PointerMoved(Pos2::new(841.5, 179.3)),
+        Event::PointerMoved(Pos2::new(841.5, 180.9)),
+        Event::PointerMoved(Pos2::new(841.5, 182.4)),
+        Event::PointerMoved(Pos2::new(841.5, 183.5)),
+        Event::PointerMoved(Pos2::new(841.5, 184.5)),
+        Event::PointerMoved(Pos2::new(841.5, 185.6)),
+        Event::PointerMoved(Pos2::new(841.5, 187.0)),
+        Event::PointerMoved(Pos2::new(841.5, 188.6)),
+        Event::PointerMoved(Pos2::new(841.5, 190.3)),
+        Event::PointerMoved(Pos2::new(841.5, 191.8)),
+        Event::PointerMoved(Pos2::new(841.3, 192.7)),
+        Event::PointerMoved(Pos2::new(841.0, 193.3)),
+        Event::PointerMoved(Pos2::new(841.0, 193.7)),
+        Event::PointerMoved(Pos2::new(841.1, 193.9)),
+        Event::PointerMoved(Pos2::new(841.3, 193.9)),
+        Event::PointerMoved(Pos2::new(841.4, 194.0)),
+        Event::PointerMoved(Pos2::new(841.4, 194.2)),
+        Event::PointerMoved(Pos2::new(841.4, 194.6)),
+        Event::PointerMoved(Pos2::new(841.4, 194.9)),
+        Event::PointerMoved(Pos2::new(841.4, 195.1)),
+        Event::PointerMoved(Pos2::new(841.4, 195.1)),
+        Event::PointerButton {
+            pos: Pos2::new(841.4, 195.1),
+            button: PointerButton::Primary,
+            pressed: false,
+            modifiers: Modifiers::NONE,
+        },
+    ];
+
+    fn from_screen() -> RectTransform {
+        RectTransform::from_to(
+            Rect::from_two_pos(Pos2::new(570.0, 145.1), Pos2::new(1116.4, 245.1)),
+            Rect::from_two_pos(Pos2::new(0.0, 0.0), Pos2::new(546.4, 100.0)),
+        )
+    }
+
+    #[test]
+    fn handle_input() {
+        let mut tool_events = vec![];
+        let mut last_pos = None;
+        let from_screen = from_screen();
+        for event in TEST_EVENTS {
+            process_event(&mut last_pos, from_screen, event, |tool_event| {
+                tool_events.push(tool_event)
+            });
+        }
+        insta::assert_yaml_snapshot!(tool_events);
+    }
+
+    #[test]
+    fn input_to_handwriting() {
+        let mut handwriting = Handwriting::default();
+        let mut last_pos = None;
+        let from_screen = from_screen();
+        for event in TEST_EVENTS {
+            process_event(&mut last_pos, from_screen, event, |tool_event| {
+                handwriting.on_tool_event(tool_event);
+            });
+        }
+        let serialized = handwriting.to_string();
+        insta::assert_snapshot!("input events to handwriting", serialized);
+    }
 }

src/handwriting/snapshots/inkr__handwriting__test__handle_input.snap

@@ -0,0 +1,455 @@
+---
+source: src/handwriting/mod.rs
+expression: tool_events
+---
+- Press:
+    at:
+      x: 179.90002
+      y: 80.5
+- Move:
+    to:
+      x: 179.90002
+      y: 80.59999
+- Move:
+    to:
+      x: 179.90002
+      y: 81.29999
+- Move:
+    to:
+      x: 180.20001
+      y: 83.29999
+- Move:
+    to:
+      x: 181
+      y: 86.2
+- Move:
+    to:
+      x: 182.59998
+      y: 89.29999
+- Move:
+    to:
+      x: 184.09998
+      y: 92.59999
+- Move:
+    to:
+      x: 185.79999
+      y: 96
+- Move:
+    to:
+      x: 187.70001
+      y: 99.29999
+- Move:
+    to:
+      x: 189.3
+      y: 102.29999
+- Move:
+    to:
+      x: 190.8
+      y: 105.09999
+- Move:
+    to:
+      x: 192.79999
+      y: 108.29998
+- Move:
+    to:
+      x: 195.09998
+      y: 111.69999
+- Move:
+    to:
+      x: 197.70001
+      y: 115.100006
+- Move:
+    to:
+      x: 201.20001
+      y: 119.19998
+- Move:
+    to:
+      x: 204.59998
+      y: 122.799995
+- Move:
+    to:
+      x: 208.20001
+      y: 126.100006
+- Move:
+    to:
+      x: 212.70001
+      y: 130.1
+- Move:
+    to:
+      x: 216.70001
+      y: 133.4
+- Move:
+    to:
+      x: 220.40002
+      y: 135.69998
+- Move:
+    to:
+      x: 224.09998
+      y: 137.5
+- Move:
+    to:
+      x: 227.90002
+      y: 138.79999
+- Move:
+    to:
+      x: 231.90002
+      y: 139.69998
+- Move:
+    to:
+      x: 235.90002
+      y: 140.4
+- Move:
+    to:
+      x: 240.20001
+      y: 140.69998
+- Move:
+    to:
+      x: 244.5
+      y: 140.69998
+- Move:
+    to:
+      x: 248.20001
+      y: 140.5
+- Move:
+    to:
+      x: 251.59996
+      y: 139.4
+- Move:
+    to:
+      x: 254.70001
+      y: 137.9
+- Move:
+    to:
+      x: 257.5
+      y: 136.29999
+- Move:
+    to:
+      x: 260.40002
+      y: 134.5
+- Move:
+    to:
+      x: 263.40002
+      y: 132.6
+- Move:
+    to:
+      x: 266.09998
+      y: 130.6
+- Move:
+    to:
+      x: 268.59998
+      y: 128.5
+- Move:
+    to:
+      x: 270.90002
+      y: 126.600006
+- Move:
+    to:
+      x: 273
+      y: 124.5
+- Move:
+    to:
+      x: 275.40002
+      y: 122.100006
+- Move:
+    to:
+      x: 277.70004
+      y: 120.00001
+- Move:
+    to:
+      x: 279.8
+      y: 117.60001
+- Move:
+    to:
+      x: 282
+      y: 114.899994
+- Move:
+    to:
+      x: 284.3
+      y: 111.69999
+- Move:
+    to:
+      x: 286.3
+      y: 108.29998
+- Move:
+    to:
+      x: 288.2
+      y: 104.99999
+- Move:
+    to:
+      x: 290
+      y: 102
+- Move:
+    to:
+      x: 291.5
+      y: 99.2
+- Move:
+    to:
+      x: 292.8
+      y: 96.899994
+- Move:
+    to:
+      x: 294.09995
+      y: 95
+- Move:
+    to:
+      x: 295
+      y: 93.09999
+- Move:
+    to:
+      x: 295.8
+      y: 91.5
+- Move:
+    to:
+      x: 296.5
+      y: 89.79999
+- Move:
+    to:
+      x: 297.1
+      y: 88
+- Move:
+    to:
+      x: 297.8
+      y: 86.29999
+- Move:
+    to:
+      x: 298.40005
+      y: 84.7
+- Move:
+    to:
+      x: 298.7
+      y: 83.29999
+- Move:
+    to:
+      x: 298.90002
+      y: 82.09999
+- Move:
+    to:
+      x: 299.1
+      y: 81.09999
+- Move:
+    to:
+      x: 299.1
+      y: 80
+- Move:
+    to:
+      x: 299.1
+      y: 79
+- Move:
+    to:
+      x: 299.1
+      y: 78.29999
+- Move:
+    to:
+      x: 299.1
+      y: 77.7
+- Move:
+    to:
+      x: 299.1
+      y: 77.29999
+- Release
+- Press:
+    at:
+      x: 209.29999
+      y: 13.500001
+- Move:
+    to:
+      x: 209.29999
+      y: 13.899994
+- Move:
+    to:
+      x: 209.29999
+      y: 15.799988
+- Move:
+    to:
+      x: 209.29999
+      y: 19.5
+- Move:
+    to:
+      x: 209.29999
+      y: 24.5
+- Move:
+    to:
+      x: 209.29999
+      y: 30.09999
+- Move:
+    to:
+      x: 209.29999
+      y: 35.199997
+- Move:
+    to:
+      x: 209.29999
+      y: 39.899994
+- Move:
+    to:
+      x: 209.29999
+      y: 44.299988
+- Move:
+    to:
+      x: 209.29999
+      y: 47.699997
+- Move:
+    to:
+      x: 209.29999
+      y: 49.799988
+- Move:
+    to:
+      x: 209.29999
+      y: 51
+- Move:
+    to:
+      x: 209.29999
+      y: 51.899994
+- Move:
+    to:
+      x: 209.29999
+      y: 52.499996
+- Move:
+    to:
+      x: 209.29999
+      y: 52.999996
+- Move:
+    to:
+      x: 209.29999
+      y: 53.399994
+- Move:
+    to:
+      x: 209.29999
+      y: 53.699993
+- Move:
+    to:
+      x: 209.29999
+      y: 53.89999
+- Move:
+    to:
+      x: 209.29999
+      y: 54.09999
+- Move:
+    to:
+      x: 209.29999
+      y: 54.09999
+- Release
+- Press:
+    at:
+      x: 271.5
+      y: 14.099991
+- Move:
+    to:
+      x: 271.5
+      y: 14.199998
+- Move:
+    to:
+      x: 271.5
+      y: 14.599991
+- Move:
+    to:
+      x: 271.5
+      y: 15.399994
+- Move:
+    to:
+      x: 271.5
+      y: 17.299988
+- Move:
+    to:
+      x: 271.5
+      y: 20
+- Move:
+    to:
+      x: 271.5
+      y: 23.299988
+- Move:
+    to:
+      x: 271.5
+      y: 26.499998
+- Move:
+    to:
+      x: 271.5
+      y: 29.299986
+- Move:
+    to:
+      x: 271.5
+      y: 32
+- Move:
+    to:
+      x: 271.5
+      y: 34.199997
+- Move:
+    to:
+      x: 271.5
+      y: 35.799988
+- Move:
+    to:
+      x: 271.5
+      y: 37.299988
+- Move:
+    to:
+      x: 271.5
+      y: 38.399994
+- Move:
+    to:
+      x: 271.5
+      y: 39.399994
+- Move:
+    to:
+      x: 271.5
+      y: 40.5
+- Move:
+    to:
+      x: 271.5
+      y: 41.899994
+- Move:
+    to:
+      x: 271.5
+      y: 43.5
+- Move:
+    to:
+      x: 271.5
+      y: 45.199997
+- Move:
+    to:
+      x: 271.5
+      y: 46.699997
+- Move:
+    to:
+      x: 271.3
+      y: 47.59999
+- Move:
+    to:
+      x: 271
+      y: 48.199997
+- Move:
+    to:
+      x: 271
+      y: 48.59999
+- Move:
+    to:
+      x: 271.09998
+      y: 48.799988
+- Move:
+    to:
+      x: 271.3
+      y: 48.799988
+- Move:
+    to:
+      x: 271.40002
+      y: 48.899994
+- Move:
+    to:
+      x: 271.40002
+      y: 49.09999
+- Move:
+    to:
+      x: 271.40002
+      y: 49.5
+- Move:
+    to:
+      x: 271.40002
+      y: 49.799988
+- Move:
+    to:
+      x: 271.40002
+      y: 50
+- Move:
+    to:
+      x: 271.40002
+      y: 50
+- Release

src/handwriting/snapshots/inkr__handwriting__test__input events to handwriting.snap

@@ -0,0 +1,7 @@
+---
+source: src/handwriting/mod.rs
+expression: serialized
+---
+```handwriting
+AQA9AJ9ZCFWfWQpVn1kVVaJZNVWoWWNVtVmVVcFZylXOWQBW3lk1VupZZVb2WZJWBlrFVhla+1YuWjJXSlpzV2VarVeCWuJXploRWMZaK1jjWj5YAVtMWB9bVlg/W15YX1tjWIJbZlikW2ZYwltkWN1bW1j2W09YBlxCWBJcNFgeXCVYKFwVWDJcBFg8XOpXRFzIV05coldXXIBXX1xaV2hcLldxXPtWeVzFVoFckFaIXGBWjlwzVpNcDlaYXPBVnFzSVZ9cuFWiXJ1VpFyAVadcZVWqXEtVq1w1VaxcIlWsXBJVrFwAVaxc8FSsXOVUrFzbVKxc1VQTAIpawEqKWvNKilrmS4pa4EyKWiBOilqGT4paZlCKWv1QilqKUYpa9lGKWjpSilpgUopafVKKWpBSilqgUoparVKKWrZSilq9Uopaw1IeAD5cDUs+XBpLPlxNSz5cs0s+XFNMPlwATT5c000+XKBOPlxTTz5cAFA+XEZQPlx6UD5cqlA+XM1QPlztUD5cEFE+XD1RPlxwUT5cplE+XNZRPVzzUTxcBlI8XBNSPFwaUj1cGlI+XB1SPlwjUj5cMFI+XDpSPlxAUg==
+```

src/handwriting/tool/eraser.rs

@@ -0,0 +1,32 @@
+use crate::handwriting::{Handwriting, ToolEvent};
+use egui::Pos2;
+
+pub const RADIUS: f32 = 12.0;
+
+/// Handle a [ToolEvent]. Returns true if a stroke was completed.
+pub fn on_tool_event(handwriting: &mut Handwriting, tool_event: ToolEvent) -> bool {
+    match tool_event {
+        ToolEvent::Press { at } => {
+            erase(handwriting, at, RADIUS)
+        }
+        ToolEvent::Move { to } => {
+            erase(handwriting, to, RADIUS)
+        }
+        ToolEvent::Release => {
+            false            
+        }
+    }
+
+}
+
+fn erase(handwriting: &mut Handwriting, at: Pos2, radius: f32) -> bool {
+    let strokes = handwriting.strokes.len();
+
+    handwriting.strokes.retain(|stroke| {
+        stroke.iter().all(|&point| {
+            (point - at).length() > radius
+        })
+    });
+
+    handwriting.strokes.len() < strokes
+}

src/handwriting/tool/mod.rs

@@ -0,0 +1,28 @@
+pub mod pencil;
+pub mod eraser;
+
+use egui::Pos2;
+use serde::Serialize;
+
+pub enum Tool {
+    Pencil,
+    Eraser,
+}
+
+/// A simple event that can defines how a tool (e.g. the pen) is used on a [Handwriting].
+#[derive(Debug, Serialize, Copy, Clone)]
+pub enum ToolEvent {
+    Press { at: Pos2 },
+    Move { to: Pos2 },
+    Release,
+}
+
+impl ToolEvent {
+    pub const fn position(&self) -> Option<Pos2> {
+        match self {
+            &ToolEvent::Press { at } => Some(at),
+            &ToolEvent::Move { to } => Some(to),
+            ToolEvent::Release => None,
+        }
+    }
+}

src/handwriting/tool/pencil.rs

@@ -0,0 +1,22 @@
+use crate::handwriting::{Handwriting, ToolEvent};
+use std::mem;
+
+/// Handle a [ToolEvent]. Returns true if a stroke was completed.
+pub fn on_tool_event(handwriting: &mut Handwriting, tool_event: ToolEvent) -> bool {
+    match tool_event {
+        ToolEvent::Press { at } => {
+            debug_assert!(handwriting.e.current_stroke.is_empty());
+            handwriting.push_to_stroke(at);
+            false
+        }
+        ToolEvent::Move { to } => {
+            handwriting.push_to_stroke(to);
+            false
+        }
+        ToolEvent::Release => {
+            debug_assert!(!handwriting.e.current_stroke.is_empty());
+            handwriting.strokes.push(mem::take(&mut handwriting.e.current_stroke));
+            true
+        }
+    }
+}

src/lib.rs

@@ -8,6 +8,7 @@ pub mod markdown;
 pub mod preferences;
 pub mod rasterizer;
 pub mod text_editor;
+pub mod text_styles;
 pub mod util;
 
 pub use app::App;

src/markdown/highlighter.rs

@@ -1,6 +1,9 @@
 use egui::text::{CCursorRange, LayoutJob};
 
-use crate::markdown::Heading;
+use crate::{
+    markdown::Heading,
+    text_styles::{H1, H1_MONO, H2, H2_MONO, H3, H3_MONO, H4, H4_MONO, H5, H5_MONO, H6, H6_MONO},
+};
 
 use super::{Item, Style, parse};
 
@@ -36,7 +39,6 @@ pub fn highlight_markdown(
     _cursor: Option<CCursorRange>,
 ) -> LayoutJob {
     let mut job = LayoutJob::default();
-
     let code_style = Style {
         code: true,
         ..Default::default()
@@ -74,14 +76,23 @@ fn format_from_style(egui_style: &egui::Style, style: &Style) -> egui::text::Tex
     };
 
     let text_style = if let Some(heading) = style.heading {
-        match heading {
-            Heading::H1 => TextStyle::Name("H1".into()),
-            Heading::H2 => TextStyle::Name("H2".into()),
-            Heading::H3 => TextStyle::Name("H3".into()),
-            Heading::H4 => TextStyle::Name("H4".into()),
-            Heading::H5 => TextStyle::Name("H5".into()),
-            Heading::H6 => TextStyle::Name("H6".into()),
-        }
+        let text_style = match (heading, style.code) {
+            (Heading::H1, false) => H1,
+            (Heading::H2, false) => H2,
+            (Heading::H3, false) => H3,
+            (Heading::H4, false) => H4,
+            (Heading::H5, false) => H5,
+            (Heading::H6, false) => H6,
+
+            (Heading::H1, true) => H1_MONO,
+            (Heading::H2, true) => H2_MONO,
+            (Heading::H3, true) => H3_MONO,
+            (Heading::H4, true) => H4_MONO,
+            (Heading::H5, true) => H5_MONO,
+            (Heading::H6, true) => H6_MONO,
+        };
+
+        TextStyle::Name(text_style.into())
     } else if style.code {
         TextStyle::Monospace
     } else if style.small | style.raised {

src/markdown/parser.rs

@@ -16,11 +16,6 @@ pub fn parse_tokens<'a>(mut tokens: &[Token<'a>]) -> Vec<Item<'a>> {
 
     let mut style = Style::default();
 
-    let mono_style = Style {
-        code: true,
-        ..Default::default()
-    };
-
     iter::from_fn(move || {
         if tokens.is_empty() {
             return None;
@@ -73,7 +68,10 @@ pub fn parse_tokens<'a>(mut tokens: &[Token<'a>]) -> Vec<Item<'a>> {
                     any_of([TokenKind::Mono, TokenKind::CodeBlock, TokenKind::Newline]),
                 );
 
-                return Some(Item::Text { span, style: mono_style});
+                let mut style = style;
+                style.code = true;
+
+                return Some(Item::Text { span, style });
             }
 
             // TODO: different heading strengths

src/preferences.rs

@@ -49,7 +49,12 @@ impl Preferences {
             let mut dark_visuals = Visuals::dark();
             let mut light_visuals = Visuals::light();
 
-            dark_visuals.code_bg_color = Color32::BLACK;
+            dark_visuals.window_fill = Color32::from_rgb(0x1e, 0x1e, 0x1e);
+            dark_visuals.panel_fill = Color32::from_rgb(0x26, 0x26, 0x26);
+
+            light_visuals.window_fill = Color32::WHITE;
+            light_visuals.panel_fill = Color32::from_rgb(0xf6, 0xf6, 0xf6);
+
             dark_visuals.code_bg_color = Color32::BLACK;
             light_visuals.code_bg_color = Color32::WHITE;
 

src/text_styles.rs

@@ -0,0 +1,14 @@
+//! Name of custom [egui::TextStyle]s
+
+pub const H1: &str = "H1";
+pub const H2: &str = "H2";
+pub const H3: &str = "H3";
+pub const H4: &str = "H4";
+pub const H5: &str = "H5";
+pub const H6: &str = "H6";
+pub const H1_MONO: &str = "H1-mono";
+pub const H2_MONO: &str = "H2-mono";
+pub const H3_MONO: &str = "H3-mono";
+pub const H4_MONO: &str = "H4-mono";
+pub const H5_MONO: &str = "H5-mono";
+pub const H6_MONO: &str = "H6-mono";