paint selections on top

crates/gpui/src/text_system/line.rs

@@ -172,6 +172,8 @@ fn paint_line(
                 let mut finished_background: Option<(Point<Pixels>, Hsla)> = None;
                 let mut finished_underline: Option<(Point<Pixels>, UnderlineStyle)> = None;
                 let mut finished_strikethrough: Option<(Point<Pixels>, StrikethroughStyle)> = None;
+                print!("{} ", glyph.index);
+
                 if glyph.index >= run_end {
                     if let Some(style_run) = decoration_runs.next() {
                         if let Some((_, background_color)) = &mut current_background {
@@ -179,7 +181,9 @@ fn paint_line(
                                 finished_background = current_background.take();
                             }
                         }
+
                         if let Some(run_background) = style_run.background_color {
+                            // println!("{} {}", glyph_origin.x, glyph_origin.y);
                             current_background.get_or_insert((
                                 point(glyph_origin.x, glyph_origin.y),
                                 run_background,

crates/markdown/examples/markdown.rs

@@ -8,78 +8,78 @@ use std::sync::Arc;
 use theme::LoadThemes;
 use ui::prelude::*;
 use ui::{div, WindowContext};
+const MARKDOWN_EXAMPLE: &'static str = r#"Headings are created by adding one or more `#` symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading.symbols before your heading text. The number of you use will determine the size of the heading."#;
+// const MARKDOWN_EXAMPLE: &'static str = r#"
+// # Markdown Example Document2
 
-const MARKDOWN_EXAMPLE: &'static str = r#"
-# Markdown Example Document
+// ## Headings
+// Headings are created by adding one or more `#` symbols before your heading text. The number of `#` you use will determine the size of the heading.
 
-## Headings
-Headings are created by adding one or more `#` symbols before your heading text. The number of `#` you use will determine the size of the heading.
+// ## Emphasis
+// Emphasis can be added with italics or bold. *This text will be italic*. _This will also be italic_
 
-## Emphasis
-Emphasis can be added with italics or bold. *This text will be italic*. _This will also be italic_
+// ## Lists
 
-## Lists
+// ### Unordered Lists
+// Unordered lists use asterisks `*`, plus `+`, or minus `-` as list markers.
 
-### Unordered Lists
-Unordered lists use asterisks `*`, plus `+`, or minus `-` as list markers.
+// * Item 1
+// * Item 2
+//   * Item 2a
+//   * Item 2b
 
-* Item 1
-* Item 2
-  * Item 2a
-  * Item 2b
+// ### Ordered Lists
+// Ordered lists use numbers followed by a period.
 
-### Ordered Lists
-Ordered lists use numbers followed by a period.
+// 1. Item 1
+// 2. Item 2
+// 3. Item 3
+//    1. Item 3a
+//    2. Item 3b
 
-1. Item 1
-2. Item 2
-3. Item 3
-   1. Item 3a
-   2. Item 3b
+// ## Links
+// Links are created using the format [http://zed.dev](https://zed.dev).
+// They can also be detected automatically, for example https://zed.dev/blog.
 
-## Links
-Links are created using the format [http://zed.dev](https://zed.dev).
-They can also be detected automatically, for example https://zed.dev/blog.
+// ## Images
+// Images are like links, but with an exclamation mark `!` in front.
 
-## Images
-Images are like links, but with an exclamation mark `!` in front.
+// ```todo!
+// ![This is an image](/images/logo.png)
+// ```
 
-```todo!
-![This is an image](/images/logo.png)
-```
+// ## Code
+// Inline `code` can be wrapped with backticks `` ` ``.
 
-## Code
-Inline `code` can be wrapped with backticks `` ` ``.
+// ```markdown
+// Inline `code` has `back-ticks around` it.
+// ```
 
-```markdown
-Inline `code` has `back-ticks around` it.
-```
+// Code blocks can be created by indenting lines by four spaces or with triple backticks ```.
 
-Code blocks can be created by indenting lines by four spaces or with triple backticks ```.
+// ```javascript
+// function test() {
+//   console.log("notice the blank line before this function?");
+// }
+// ```
 
-```javascript
-function test() {
-  console.log("notice the blank line before this function?");
-}
-```
+// ## Blockquotes
+// Blockquotes are created with `>`.
 
-## Blockquotes
-Blockquotes are created with `>`.
+// > This is a blockquote.
 
-> This is a blockquote.
+// ## Horizontal Rules
+// Horizontal rules are created using three or more asterisks `***`, dashes `---`, or underscores `___`.
 
-## Horizontal Rules
-Horizontal rules are created using three or more asterisks `***`, dashes `---`, or underscores `___`.
+// ## Line breaks
+// This is a
+// \
+// line break!
 
-## Line breaks
-This is a
-\
-line break!
+// ---
 
----
-
-Remember, markdown processors may have slight differences and extensions, so always refer to the specific documentation or guides relevant to your platform or editor for the best practices and additional features.
-"#;
+// Remember, markdown processors may have slight differences and extensions, so always refer to the specific documentation or guides relevant to your platform or editor for the best practices and additional features.
+// "#;
 
 pub fn main() {
     env_logger::init();

crates/markdown/src/markdown.rs

@@ -734,8 +734,8 @@ impl Element for MarkdownElement {
         });
 
         self.paint_mouse_listeners(hitbox, &rendered_markdown.text, cx);
-        rendered_markdown.element.paint(cx);
         self.paint_selection(bounds, &rendered_markdown.text, cx);
+        rendered_markdown.element.paint(cx);
     }
 }
 
@@ -917,11 +917,26 @@ impl MarkdownElementBuilder {
     }
 
     fn flush_text(&mut self) {
-        let line = mem::take(&mut self.pending_line);
+        let mut line = mem::take(&mut self.pending_line);
         if line.text.is_empty() {
             return;
         }
 
+        for r in line.runs.iter_mut() {
+            r.color.a = 1.;
+            r.color.h = 1.;
+            r.color.s = 0.5;
+            r.color.l = 0.5;
+            r.background_color = Some(Hsla {
+                h: (0.5),
+                s: (0.5),
+                l: (0.5),
+                a: (0.8),
+            })
+        }
+
+        // println!("{}\n{:?}\n\n", line.text, line.runs);
+
         let text = StyledText::new(line.text).with_runs(line.runs);
         self.rendered_lines.push(RenderedLine {
             layout: text.layout().clone(),