Merge pull request #2516 from tarkah/feat/span-background

Add background styling to span / rich text

2 files changed, 37 insertions, 4 deletions

diff --git a/widget/src/markdown.rs b/widget/src/markdown.rs
index 9cfd3c33..9cd4a62f 100644
--- a/widget/src/markdown.rs
+++ b/widget/src/markdown.rs
@@ -4,10 +4,11 @@
 //! in code blocks.
 //!
 //! Only the variants of [`Item`] are currently supported.
+use crate::core::border;
 use crate::core::font::{self, Font};
 use crate::core::padding;
 use crate::core::theme::{self, Theme};
-use crate::core::{self, Element, Length, Pixels};
+use crate::core::{self, color, Color, Element, Length, Pixels};
 use crate::{column, container, rich_text, row, scrollable, span, text};
 
 pub use pulldown_cmark::HeadingLevel;
@@ -257,7 +258,12 @@ pub fn parse(
             None
         }
         pulldown_cmark::Event::Code(code) if !metadata && !table => {
-            let span = span(code.into_string()).font(Font::MONOSPACE);
+            let span = span(code.into_string())
+                .font(Font::MONOSPACE)
+                .color(Color::WHITE)
+                .background(color!(0x111111))
+                .border(border::rounded(2))
+                .padding(padding::left(2).right(2));
 
             let span = if let Some(link) = link.as_ref() {
                 span.color(palette.primary).link(link.clone())
diff --git a/widget/src/text/rich.rs b/widget/src/text/rich.rs
index 9c0e2fac..9935e6c5 100644
--- a/widget/src/text/rich.rs
+++ b/widget/src/text/rich.rs
@@ -9,8 +9,8 @@ use crate::core::widget::text::{
 };
 use crate::core::widget::tree::{self, Tree};
 use crate::core::{
-    self, Clipboard, Color, Element, Event, Layout, Length, Pixels, Rectangle,
-    Shell, Size, Widget,
+    self, Clipboard, Color, Element, Event, Layout, Length, Pixels, Point,
+    Rectangle, Shell, Size, Vector, Widget,
 };
 
 use std::borrow::Cow;
@@ -246,6 +246,33 @@ where
 
         let style = theme.style(&self.class);
 
+        for (index, span) in self.spans.iter().enumerate() {
+            if let Some(highlight) = span.highlight {
+                let translation = layout.position() - Point::ORIGIN;
+
+                for bounds in state.paragraph.span_bounds(index) {
+                    let bounds = Rectangle::new(
+                        bounds.position()
+                            - Vector::new(span.padding.left, span.padding.top),
+                        bounds.size()
+                            + Size::new(
+                                span.padding.horizontal(),
+                                span.padding.vertical(),
+                            ),
+                    );
+
+                    renderer.fill_quad(
+                        renderer::Quad {
+                            bounds: bounds + translation,
+                            border: highlight.border,
+                            ..Default::default()
+                        },
+                        highlight.background,
+                    );
+                }
+            }
+        }
+
         text::draw(
             renderer,
             defaults,