Merge pull request #2508 from iced-rs/feature/rich-text

`rich_text` and `markdown` widgets

22 files changed, 1284 insertions, 208 deletions

diff --git a/Cargo.toml b/Cargo.toml
index bc566bf6..d301b36d 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -34,6 +34,8 @@ svg = ["iced_widget/svg"]
 canvas = ["iced_widget/canvas"]
 # Enables the `QRCode` widget
 qr_code = ["iced_widget/qr_code"]
+# Enables the `markdown` widget
+markdown = ["iced_widget/markdown"]
 # Enables lazy widgets
 lazy = ["iced_widget/lazy"]
 # Enables a debug view in native platforms (press F12)
@@ -51,7 +53,7 @@ web-colors = ["iced_renderer/web-colors"]
 # Enables the WebGL backend, replacing WebGPU
 webgl = ["iced_renderer/webgl"]
 # Enables the syntax `highlighter` module
-highlighter = ["iced_highlighter"]
+highlighter = ["iced_highlighter", "iced_widget/highlighter"]
 # Enables experimental multi-window support.
 multi-window = ["iced_winit/multi-window"]
 # Enables the advanced module
@@ -155,6 +157,7 @@ num-traits = "0.2"
 once_cell = "1.0"
 ouroboros = "0.18"
 palette = "0.7"
+pulldown-cmark = "0.11"
 qrcode = { version = "0.13", default-features = false }
 raw-window-handle = "0.6"
 resvg = "0.42"
diff --git a/core/src/renderer/null.rs b/core/src/renderer/null.rs
index e8709dbc..f9d1a5b0 100644
--- a/core/src/renderer/null.rs
+++ b/core/src/renderer/null.rs
@@ -77,9 +77,14 @@ impl text::Paragraph for () {
 
     fn with_text(_text: Text<&str>) -> Self {}
 
+    fn with_spans(
+        _text: Text<&[text::Span<'_, Self::Font>], Self::Font>,
+    ) -> Self {
+    }
+
     fn resize(&mut self, _new_bounds: Size) {}
 
-    fn compare(&self, _text: Text<&str>) -> text::Difference {
+    fn compare(&self, _text: Text<()>) -> text::Difference {
         text::Difference::None
     }
 
diff --git a/core/src/text.rs b/core/src/text.rs
index b30feae0..22cfce13 100644
--- a/core/src/text.rs
+++ b/core/src/text.rs
@@ -1,8 +1,7 @@
 //! Draw and interact with text.
-mod paragraph;
-
 pub mod editor;
 pub mod highlighter;
+pub mod paragraph;
 
 pub use editor::Editor;
 pub use highlighter::Highlighter;
@@ -11,6 +10,7 @@ pub use paragraph::Paragraph;
 use crate::alignment;
 use crate::{Color, Pixels, Point, Rectangle, Size};
 
+use std::borrow::Cow;
 use std::hash::{Hash, Hasher};
 
 /// A paragraph.
@@ -221,3 +221,162 @@ pub trait Renderer: crate::Renderer {
         clip_bounds: Rectangle,
     );
 }
+
+/// A span of text.
+#[derive(Debug, Clone, PartialEq)]
+pub struct Span<'a, Font = crate::Font> {
+    /// The [`Fragment`] of text.
+    pub text: Fragment<'a>,
+    /// The size of the [`Span`] in [`Pixels`].
+    pub size: Option<Pixels>,
+    /// The [`LineHeight`] of the [`Span`].
+    pub line_height: Option<LineHeight>,
+    /// The font of the [`Span`].
+    pub font: Option<Font>,
+    /// The [`Color`] of the [`Span`].
+    pub color: Option<Color>,
+}
+
+impl<'a, Font> Span<'a, Font> {
+    /// Creates a new [`Span`] of text with the given text fragment.
+    pub fn new(fragment: impl IntoFragment<'a>) -> Self {
+        Self {
+            text: fragment.into_fragment(),
+            size: None,
+            line_height: None,
+            font: None,
+            color: None,
+        }
+    }
+
+    /// Sets the size of the [`Span`].
+    pub fn size(mut self, size: impl Into<Pixels>) -> Self {
+        self.size = Some(size.into());
+        self
+    }
+
+    /// Sets the [`LineHeight`] of the [`Span`].
+    pub fn line_height(mut self, line_height: impl Into<LineHeight>) -> Self {
+        self.line_height = Some(line_height.into());
+        self
+    }
+
+    /// Sets the font of the [`Span`].
+    pub fn font(mut self, font: impl Into<Font>) -> Self {
+        self.font = Some(font.into());
+        self
+    }
+
+    /// Sets the font of the [`Span`], if any.
+    pub fn font_maybe(mut self, font: Option<impl Into<Font>>) -> Self {
+        self.font = font.map(Into::into);
+        self
+    }
+
+    /// Sets the [`Color`] of the [`Span`].
+    pub fn color(mut self, color: impl Into<Color>) -> Self {
+        self.color = Some(color.into());
+        self
+    }
+
+    /// Sets the [`Color`] of the [`Span`], if any.
+    pub fn color_maybe(mut self, color: Option<impl Into<Color>>) -> Self {
+        self.color = color.map(Into::into);
+        self
+    }
+
+    /// Turns the [`Span`] into a static one.
+    pub fn to_static(self) -> Span<'static, Font> {
+        Span {
+            text: Cow::Owned(self.text.into_owned()),
+            size: self.size,
+            line_height: self.line_height,
+            font: self.font,
+            color: self.color,
+        }
+    }
+}
+
+impl<'a, Font> From<&'a str> for Span<'a, Font> {
+    fn from(value: &'a str) -> Self {
+        Span::new(value)
+    }
+}
+
+/// A fragment of [`Text`].
+///
+/// This is just an alias to a string that may be either
+/// borrowed or owned.
+pub type Fragment<'a> = Cow<'a, str>;
+
+/// A trait for converting a value to some text [`Fragment`].
+pub trait IntoFragment<'a> {
+    /// Converts the value to some text [`Fragment`].
+    fn into_fragment(self) -> Fragment<'a>;
+}
+
+impl<'a> IntoFragment<'a> for Fragment<'a> {
+    fn into_fragment(self) -> Fragment<'a> {
+        self
+    }
+}
+
+impl<'a, 'b> IntoFragment<'a> for &'a Fragment<'b> {
+    fn into_fragment(self) -> Fragment<'a> {
+        Fragment::Borrowed(self)
+    }
+}
+
+impl<'a> IntoFragment<'a> for &'a str {
+    fn into_fragment(self) -> Fragment<'a> {
+        Fragment::Borrowed(self)
+    }
+}
+
+impl<'a> IntoFragment<'a> for &'a String {
+    fn into_fragment(self) -> Fragment<'a> {
+        Fragment::Borrowed(self.as_str())
+    }
+}
+
+impl<'a> IntoFragment<'a> for String {
+    fn into_fragment(self) -> Fragment<'a> {
+        Fragment::Owned(self)
+    }
+}
+
+macro_rules! into_fragment {
+    ($type:ty) => {
+        impl<'a> IntoFragment<'a> for $type {
+            fn into_fragment(self) -> Fragment<'a> {
+                Fragment::Owned(self.to_string())
+            }
+        }
+
+        impl<'a> IntoFragment<'a> for &$type {
+            fn into_fragment(self) -> Fragment<'a> {
+                Fragment::Owned(self.to_string())
+            }
+        }
+    };
+}
+
+into_fragment!(char);
+into_fragment!(bool);
+
+into_fragment!(u8);
+into_fragment!(u16);
+into_fragment!(u32);
+into_fragment!(u64);
+into_fragment!(u128);
+into_fragment!(usize);
+
+into_fragment!(i8);
+into_fragment!(i16);
+into_fragment!(i32);
+into_fragment!(i64);
+into_fragment!(i128);
+into_fragment!(isize);
+
+into_fragment!(f32);
+into_fragment!(f64);
diff --git a/core/src/text/paragraph.rs b/core/src/text/paragraph.rs
index 8ff04015..4ee83798 100644
--- a/core/src/text/paragraph.rs
+++ b/core/src/text/paragraph.rs
@@ -1,5 +1,6 @@
+//! Draw paragraphs.
 use crate::alignment;
-use crate::text::{Difference, Hit, Text};
+use crate::text::{Difference, Hit, Span, Text};
 use crate::{Point, Size};
 
 /// A text paragraph.
@@ -10,12 +11,15 @@ pub trait Paragraph: Sized + Default {
     /// Creates a new [`Paragraph`] laid out with the given [`Text`].
     fn with_text(text: Text<&str, Self::Font>) -> Self;
 
+    /// Creates a new [`Paragraph`] laid out with the given [`Text`].
+    fn with_spans(text: Text<&[Span<'_, Self::Font>], Self::Font>) -> Self;
+
     /// Lays out the [`Paragraph`] with some new boundaries.
     fn resize(&mut self, new_bounds: Size);
 
     /// Compares the [`Paragraph`] with some desired [`Text`] and returns the
     /// [`Difference`].
-    fn compare(&self, text: Text<&str, Self::Font>) -> Difference;
+    fn compare(&self, text: Text<(), Self::Font>) -> Difference;
 
     /// Returns the horizontal alignment of the [`Paragraph`].
     fn horizontal_alignment(&self) -> alignment::Horizontal;
@@ -34,26 +38,87 @@ pub trait Paragraph: Sized + Default {
     /// Returns the distance to the given grapheme index in the [`Paragraph`].
     fn grapheme_position(&self, line: usize, index: usize) -> Option<Point>;
 
-    /// Updates the [`Paragraph`] to match the given [`Text`], if needed.
-    fn update(&mut self, text: Text<&str, Self::Font>) {
-        match self.compare(text) {
+    /// Returns the minimum width that can fit the contents of the [`Paragraph`].
+    fn min_width(&self) -> f32 {
+        self.min_bounds().width
+    }
+
+    /// Returns the minimum height that can fit the contents of the [`Paragraph`].
+    fn min_height(&self) -> f32 {
+        self.min_bounds().height
+    }
+}
+
+/// A [`Paragraph`] of plain text.
+#[derive(Debug, Clone, Default)]
+pub struct Plain<P: Paragraph> {
+    raw: P,
+    content: String,
+}
+
+impl<P: Paragraph> Plain<P> {
+    /// Creates a new [`Plain`] paragraph.
+    pub fn new(text: Text<&str, P::Font>) -> Self {
+        let content = text.content.to_owned();
+
+        Self {
+            raw: P::with_text(text),
+            content,
+        }
+    }
+
+    /// Updates the plain [`Paragraph`] to match the given [`Text`], if needed.
+    pub fn update(&mut self, text: Text<&str, P::Font>) {
+        if self.content != text.content {
+            text.content.clone_into(&mut self.content);
+            self.raw = P::with_text(text);
+            return;
+        }
+
+        match self.raw.compare(Text {
+            content: (),
+            bounds: text.bounds,
+            size: text.size,
+            line_height: text.line_height,
+            font: text.font,
+            horizontal_alignment: text.horizontal_alignment,
+            vertical_alignment: text.vertical_alignment,
+            shaping: text.shaping,
+        }) {
             Difference::None => {}
             Difference::Bounds => {
-                self.resize(text.bounds);
+                self.raw.resize(text.bounds);
             }
             Difference::Shape => {
-                *self = Self::with_text(text);
+                self.raw = P::with_text(text);
             }
         }
     }
 
-    /// Returns the minimum width that can fit the contents of the [`Paragraph`].
-    fn min_width(&self) -> f32 {
-        self.min_bounds().width
+    /// Returns the horizontal alignment of the [`Paragraph`].
+    pub fn horizontal_alignment(&self) -> alignment::Horizontal {
+        self.raw.horizontal_alignment()
     }
 
-    /// Returns the minimum height that can fit the contents of the [`Paragraph`].
-    fn min_height(&self) -> f32 {
-        self.min_bounds().height
+    /// Returns the vertical alignment of the [`Paragraph`].
+    pub fn vertical_alignment(&self) -> alignment::Vertical {
+        self.raw.vertical_alignment()
+    }
+
+    /// Returns the minimum boundaries that can fit the contents of the
+    /// [`Paragraph`].
+    pub fn min_bounds(&self) -> Size {
+        self.raw.min_bounds()
+    }
+
+    /// Returns the minimum width that can fit the contents of the
+    /// [`Paragraph`].
+    pub fn min_width(&self) -> f32 {
+        self.raw.min_width()
+    }
+
+    /// Returns the cached [`Paragraph`].
+    pub fn raw(&self) -> &P {
+        &self.raw
     }
 }
diff --git a/core/src/widget/text.rs b/core/src/widget/text.rs
index 91c9893d..d0ecd27b 100644
--- a/core/src/widget/text.rs
+++ b/core/src/widget/text.rs
@@ -3,15 +3,14 @@ use crate::alignment;
 use crate::layout;
 use crate::mouse;
 use crate::renderer;
-use crate::text::{self, Paragraph};
+use crate::text;
+use crate::text::paragraph::{self, Paragraph};
 use crate::widget::tree::{self, Tree};
 use crate::{
     Color, Element, Layout, Length, Pixels, Point, Rectangle, Size, Theme,
     Widget,
 };
 
-use std::borrow::Cow;
-
 pub use text::{LineHeight, Shaping};
 
 /// A paragraph of text.
@@ -21,7 +20,7 @@ where
     Theme: Catalog,
     Renderer: text::Renderer,
 {
-    fragment: Fragment<'a>,
+    fragment: text::Fragment<'a>,
     size: Option<Pixels>,
     line_height: LineHeight,
     width: Length,
@@ -39,7 +38,7 @@ where
     Renderer: text::Renderer,
 {
     /// Create a new fragment of [`Text`] with the given contents.
-    pub fn new(fragment: impl IntoFragment<'a>) -> Self {
+    pub fn new(fragment: impl text::IntoFragment<'a>) -> Self {
         Text {
             fragment: fragment.into_fragment(),
             size: None,
@@ -155,7 +154,7 @@ where
 
 /// The internal state of a [`Text`] widget.
 #[derive(Debug, Default)]
-pub struct State<P: Paragraph>(P);
+pub struct State<P: Paragraph>(paragraph::Plain<P>);
 
 impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
     for Text<'a, Theme, Renderer>
@@ -168,7 +167,9 @@ where
     }
 
     fn state(&self) -> tree::State {
-        tree::State::new(State(Renderer::Paragraph::default()))
+        tree::State::new(State::<Renderer::Paragraph>(
+            paragraph::Plain::default(),
+        ))
     }
 
     fn size(&self) -> Size<Length> {
@@ -213,7 +214,7 @@ where
         let state = tree.state.downcast_ref::<State<Renderer::Paragraph>>();
         let style = theme.style(&self.class);
 
-        draw(renderer, defaults, layout, state, style, viewport);
+        draw(renderer, defaults, layout, state.0.raw(), style, viewport);
     }
 }
 
@@ -272,13 +273,12 @@ pub fn draw<Renderer>(
     renderer: &mut Renderer,
     style: &renderer::Style,
     layout: Layout<'_>,
-    state: &State<Renderer::Paragraph>,
+    paragraph: &Renderer::Paragraph,
     appearance: Style,
     viewport: &Rectangle,
 ) where
     Renderer: text::Renderer,
 {
-    let State(ref paragraph) = state;
     let bounds = layout.bounds();
 
     let x = match paragraph.horizontal_alignment() {
@@ -412,81 +412,3 @@ pub fn danger(theme: &Theme) -> Style {
         color: Some(theme.palette().danger),
     }
 }
-
-/// A fragment of [`Text`].
-///
-/// This is just an alias to a string that may be either
-/// borrowed or owned.
-pub type Fragment<'a> = Cow<'a, str>;
-
-/// A trait for converting a value to some text [`Fragment`].
-pub trait IntoFragment<'a> {
-    /// Converts the value to some text [`Fragment`].
-    fn into_fragment(self) -> Fragment<'a>;
-}
-
-impl<'a> IntoFragment<'a> for Fragment<'a> {
-    fn into_fragment(self) -> Fragment<'a> {
-        self
-    }
-}
-
-impl<'a, 'b> IntoFragment<'a> for &'a Fragment<'b> {
-    fn into_fragment(self) -> Fragment<'a> {
-        Fragment::Borrowed(self)
-    }
-}
-
-impl<'a> IntoFragment<'a> for &'a str {
-    fn into_fragment(self) -> Fragment<'a> {
-        Fragment::Borrowed(self)
-    }
-}
-
-impl<'a> IntoFragment<'a> for &'a String {
-    fn into_fragment(self) -> Fragment<'a> {
-        Fragment::Borrowed(self.as_str())
-    }
-}
-
-impl<'a> IntoFragment<'a> for String {
-    fn into_fragment(self) -> Fragment<'a> {
-        Fragment::Owned(self)
-    }
-}
-
-macro_rules! into_fragment {
-    ($type:ty) => {
-        impl<'a> IntoFragment<'a> for $type {
-            fn into_fragment(self) -> Fragment<'a> {
-                Fragment::Owned(self.to_string())
-            }
-        }
-
-        impl<'a> IntoFragment<'a> for &$type {
-            fn into_fragment(self) -> Fragment<'a> {
-                Fragment::Owned(self.to_string())
-            }
-        }
-    };
-}
-
-into_fragment!(char);
-into_fragment!(bool);
-
-into_fragment!(u8);
-into_fragment!(u16);
-into_fragment!(u32);
-into_fragment!(u64);
-into_fragment!(u128);
-into_fragment!(usize);
-
-into_fragment!(i8);
-into_fragment!(i16);
-into_fragment!(i32);
-into_fragment!(i64);
-into_fragment!(i128);
-into_fragment!(isize);
-
-into_fragment!(f32);
-into_fragment!(f64);
diff --git a/examples/editor/src/main.rs b/examples/editor/src/main.rs
index 71b1a719..9ffb4d1a 100644
--- a/examples/editor/src/main.rs
+++ b/examples/editor/src/main.rs
@@ -189,7 +189,7 @@ impl Editor {
                 .highlight::<Highlighter>(
                     highlighter::Settings {
                         theme: self.theme,
-                        extension: self
+                        token: self
                             .file
                             .as_deref()
                             .and_then(Path::extension)
diff --git a/examples/markdown/Cargo.toml b/examples/markdown/Cargo.toml
new file mode 100644
index 00000000..9404d5d2
--- /dev/null
+++ b/examples/markdown/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "markdown"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced.workspace = true
+iced.features = ["markdown", "highlighter", "debug"]
diff --git a/examples/markdown/overview.md b/examples/markdown/overview.md
new file mode 100644
index 00000000..ca3250f1
--- /dev/null
+++ b/examples/markdown/overview.md
@@ -0,0 +1,102 @@
+# Overview
+
+Inspired by [The Elm Architecture], Iced expects you to split user interfaces
+into four different concepts:
+
+* __State__ — the state of your application
+* __Messages__ — user interactions or meaningful events that you care
+  about
+* __View logic__ — a way to display your __state__ as widgets that
+  may produce __messages__ on user interaction
+* __Update logic__ — a way to react to __messages__ and update your
+  __state__
+
+We can build something to see how this works! Let's say we want a simple counter
+that can be incremented and decremented using two buttons.
+
+We start by modelling the __state__ of our application:
+
+```rust
+#[derive(Default)]
+struct Counter {
+    value: i32,
+}
+```
+
+Next, we need to define the possible user interactions of our counter:
+the button presses. These interactions are our __messages__:
+
+```rust
+#[derive(Debug, Clone, Copy)]
+pub enum Message {
+    Increment,
+    Decrement,
+}
+```
+
+Now, let's show the actual counter by putting it all together in our
+__view logic__:
+
+```rust
+use iced::widget::{button, column, text, Column};
+
+impl Counter {
+    pub fn view(&self) -> Column<Message> {
+        // We use a column: a simple vertical layout
+        column![
+            // The increment button. We tell it to produce an
+            // `Increment` message when pressed
+            button("+").on_press(Message::Increment),
+
+            // We show the value of the counter here
+            text(self.value).size(50),
+
+            // The decrement button. We tell it to produce a
+            // `Decrement` message when pressed
+            button("-").on_press(Message::Decrement),
+        ]
+    }
+}
+```
+
+Finally, we need to be able to react to any produced __messages__ and change our
+__state__ accordingly in our __update logic__:
+
+```rust
+impl Counter {
+    // ...
+
+    pub fn update(&mut self, message: Message) {
+        match message {
+            Message::Increment => {
+                self.value += 1;
+            }
+            Message::Decrement => {
+                self.value -= 1;
+            }
+        }
+    }
+}
+```
+
+And that's everything! We just wrote a whole user interface. Let's run it:
+
+```rust
+fn main() -> iced::Result {
+    iced::run("A cool counter", Counter::update, Counter::view)
+}
+```
+
+Iced will automatically:
+
+  1. Take the result of our __view logic__ and layout its widgets.
+  1. Process events from our system and produce __messages__ for our
+     __update logic__.
+  1. Draw the resulting user interface.
+
+Read the [book], the [documentation], and the [examples] to learn more!
+
+[book]: https://book.iced.rs/
+[documentation]: https://docs.rs/iced/
+[examples]: https://github.com/iced-rs/iced/tree/master/examples#examples
+[The Elm Architecture]: https://guide.elm-lang.org/architecture/
diff --git a/examples/markdown/src/main.rs b/examples/markdown/src/main.rs
new file mode 100644
index 00000000..d902a4f7
--- /dev/null
+++ b/examples/markdown/src/main.rs
@@ -0,0 +1,73 @@
+use iced::widget::{self, markdown, row, scrollable, text_editor};
+use iced::{Element, Fill, Font, Task, Theme};
+
+pub fn main() -> iced::Result {
+    iced::application("Markdown - Iced", Markdown::update, Markdown::view)
+        .theme(Markdown::theme)
+        .run_with(Markdown::new)
+}
+
+struct Markdown {
+    content: text_editor::Content,
+    items: Vec<markdown::Item>,
+    theme: Theme,
+}
+
+#[derive(Debug, Clone)]
+enum Message {
+    Edit(text_editor::Action),
+}
+
+impl Markdown {
+    fn new() -> (Self, Task<Message>) {
+        const INITIAL_CONTENT: &str = include_str!("../overview.md");
+
+        let theme = Theme::TokyoNight;
+
+        (
+            Self {
+                content: text_editor::Content::with_text(INITIAL_CONTENT),
+                items: markdown::parse(INITIAL_CONTENT, theme.palette())
+                    .collect(),
+                theme,
+            },
+            widget::focus_next(),
+        )
+    }
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::Edit(action) => {
+                let is_edit = action.is_edit();
+
+                self.content.perform(action);
+
+                if is_edit {
+                    self.items = markdown::parse(
+                        &self.content.text(),
+                        self.theme.palette(),
+                    )
+                    .collect();
+                }
+            }
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let editor = text_editor(&self.content)
+            .on_action(Message::Edit)
+            .height(Fill)
+            .padding(10)
+            .font(Font::MONOSPACE);
+
+        let preview = markdown(&self.items);
+
+        row![editor, scrollable(preview).spacing(10).height(Fill)]
+            .spacing(10)
+            .padding(10)
+            .into()
+    }
+
+    fn theme(&self) -> Theme {
+        self.theme.clone()
+    }
+}
diff --git a/graphics/src/text.rs b/graphics/src/text.rs
index 30269e69..23ec14d4 100644
--- a/graphics/src/text.rs
+++ b/graphics/src/text.rs
@@ -232,13 +232,14 @@ impl PartialEq for Raw {
 
 /// Measures the dimensions of the given [`cosmic_text::Buffer`].
 pub fn measure(buffer: &cosmic_text::Buffer) -> Size {
-    let (width, total_lines) = buffer
-        .layout_runs()
-        .fold((0.0, 0usize), |(width, total_lines), run| {
-            (run.line_w.max(width), total_lines + 1)
-        });
+    let (width, height) =
+        buffer
+            .layout_runs()
+            .fold((0.0, 0.0), |(width, height), run| {
+                (run.line_w.max(width), height + run.line_height)
+            });
 
-    Size::new(width, total_lines as f32 * buffer.metrics().line_height)
+    Size::new(width, height)
 }
 
 /// Returns the attributes of the given [`Font`].
diff --git a/graphics/src/text/paragraph.rs b/graphics/src/text/paragraph.rs
index a5fefe8f..37fa97f2 100644
--- a/graphics/src/text/paragraph.rs
+++ b/graphics/src/text/paragraph.rs
@@ -1,8 +1,8 @@
 //! Draw paragraphs.
 use crate::core;
 use crate::core::alignment;
-use crate::core::text::{Hit, LineHeight, Shaping, Text};
-use crate::core::{Font, Pixels, Point, Size};
+use crate::core::text::{Hit, Shaping, Span, Text};
+use crate::core::{Font, Point, Size};
 use crate::text;
 
 use std::fmt;
@@ -10,11 +10,11 @@ use std::sync::{self, Arc};
 
 /// A bunch of text.
 #[derive(Clone, PartialEq)]
-pub struct Paragraph(Option<Arc<Internal>>);
+pub struct Paragraph(Arc<Internal>);
 
+#[derive(Clone)]
 struct Internal {
     buffer: cosmic_text::Buffer,
-    content: String, // TODO: Reuse from `buffer` (?)
     font: Font,
     shaping: Shaping,
     horizontal_alignment: alignment::Horizontal,
@@ -52,9 +52,7 @@ impl Paragraph {
     }
 
     fn internal(&self) -> &Arc<Internal> {
-        self.0
-            .as_ref()
-            .expect("paragraph should always be initialized")
+        &self.0
     }
 }
 
@@ -62,7 +60,7 @@ impl core::text::Paragraph for Paragraph {
     type Font = Font;
 
     fn with_text(text: Text<&str>) -> Self {
-        log::trace!("Allocating paragraph: {}", text.content);
+        log::trace!("Allocating plain paragraph: {}", text.content);
 
         let mut font_system =
             text::font_system().write().expect("Write font system");
@@ -90,9 +88,8 @@ impl core::text::Paragraph for Paragraph {
 
         let min_bounds = text::measure(&buffer);
 
-        Self(Some(Arc::new(Internal {
+        Self(Arc::new(Internal {
             buffer,
-            content: text.content.to_owned(),
             font: text.font,
             horizontal_alignment: text.horizontal_alignment,
             vertical_alignment: text.vertical_alignment,
@@ -100,59 +97,107 @@ impl core::text::Paragraph for Paragraph {
             bounds: text.bounds,
             min_bounds,
             version: font_system.version(),
-        })))
+        }))
+    }
+
+    fn with_spans(text: Text<&[Span<'_>]>) -> Self {
+        log::trace!("Allocating rich paragraph: {:?}", text.content);
+
+        let mut font_system =
+            text::font_system().write().expect("Write font system");
+
+        let mut buffer = cosmic_text::Buffer::new(
+            font_system.raw(),
+            cosmic_text::Metrics::new(
+                text.size.into(),
+                text.line_height.to_absolute(text.size).into(),
+            ),
+        );
+
+        buffer.set_size(
+            font_system.raw(),
+            Some(text.bounds.width),
+            Some(text.bounds.height),
+        );
+
+        buffer.set_rich_text(
+            font_system.raw(),
+            text.content.iter().map(|span| {
+                let attrs = cosmic_text::Attrs::new();
+
+                let attrs = if let Some(font) = span.font {
+                    attrs
+                        .family(text::to_family(font.family))
+                        .weight(text::to_weight(font.weight))
+                        .stretch(text::to_stretch(font.stretch))
+                        .style(text::to_style(font.style))
+                } else {
+                    text::to_attributes(text.font)
+                };
+
+                let attrs = match (span.size, span.line_height) {
+                    (None, None) => attrs,
+                    _ => {
+                        let size = span.size.unwrap_or(text.size);
+
+                        attrs.metrics(cosmic_text::Metrics::new(
+                            size.into(),
+                            span.line_height
+                                .unwrap_or(text.line_height)
+                                .to_absolute(size)
+                                .into(),
+                        ))
+                    }
+                };
+
+                let attrs = if let Some(color) = span.color {
+                    attrs.color(text::to_color(color))
+                } else {
+                    attrs
+                };
+
+                (span.text.as_ref(), attrs)
+            }),
+            text::to_attributes(text.font),
+            text::to_shaping(text.shaping),
+        );
+
+        let min_bounds = text::measure(&buffer);
+
+        Self(Arc::new(Internal {
+            buffer,
+            font: text.font,
+            horizontal_alignment: text.horizontal_alignment,
+            vertical_alignment: text.vertical_alignment,
+            shaping: text.shaping,
+            bounds: text.bounds,
+            min_bounds,
+            version: font_system.version(),
+        }))
     }
 
     fn resize(&mut self, new_bounds: Size) {
-        let paragraph = self
-            .0
-            .take()
-            .expect("paragraph should always be initialized");
-
-        match Arc::try_unwrap(paragraph) {
-            Ok(mut internal) => {
-                let mut font_system =
-                    text::font_system().write().expect("Write font system");
-
-                internal.buffer.set_size(
-                    font_system.raw(),
-                    Some(new_bounds.width),
-                    Some(new_bounds.height),
-                );
-
-                internal.bounds = new_bounds;
-                internal.min_bounds = text::measure(&internal.buffer);
-
-                self.0 = Some(Arc::new(internal));
-            }
-            Err(internal) => {
-                let metrics = internal.buffer.metrics();
-
-                // If there is a strong reference somewhere, we recompute the
-                // buffer from scratch
-                *self = Self::with_text(Text {
-                    content: &internal.content,
-                    bounds: internal.bounds,
-                    size: Pixels(metrics.font_size),
-                    line_height: LineHeight::Absolute(Pixels(
-                        metrics.line_height,
-                    )),
-                    font: internal.font,
-                    horizontal_alignment: internal.horizontal_alignment,
-                    vertical_alignment: internal.vertical_alignment,
-                    shaping: internal.shaping,
-                });
-            }
-        }
+        let paragraph = Arc::make_mut(&mut self.0);
+
+        let mut font_system =
+            text::font_system().write().expect("Write font system");
+
+        paragraph.buffer.set_size(
+            font_system.raw(),
+            Some(new_bounds.width),
+            Some(new_bounds.height),
+        );
+
+        paragraph.bounds = new_bounds;
+        paragraph.min_bounds = text::measure(&paragraph.buffer);
     }
 
-    fn compare(&self, text: Text<&str>) -> core::text::Difference {
+    fn compare(&self, text: Text<()>) -> core::text::Difference {
         let font_system = text::font_system().read().expect("Read font system");
         let paragraph = self.internal();
         let metrics = paragraph.buffer.metrics();
 
         if paragraph.version != font_system.version
-            || paragraph.content != text.content
             || metrics.font_size != text.size.0
             || metrics.line_height != text.line_height.to_absolute(text.size).0
             || paragraph.font != text.font
@@ -231,7 +276,7 @@ impl core::text::Paragraph for Paragraph {
 
 impl Default for Paragraph {
     fn default() -> Self {
-        Self(Some(Arc::new(Internal::default())))
+        Self(Arc::new(Internal::default()))
     }
 }
 
@@ -240,7 +285,6 @@ impl fmt::Debug for Paragraph {
         let paragraph = self.internal();
 
         f.debug_struct("Paragraph")
-            .field("content", &paragraph.content)
             .field("font", &paragraph.font)
             .field("shaping", &paragraph.shaping)
             .field("horizontal_alignment", &paragraph.horizontal_alignment)
@@ -253,8 +297,7 @@ impl fmt::Debug for Paragraph {
 
 impl PartialEq for Internal {
     fn eq(&self, other: &Self) -> bool {
-        self.content == other.content
-            && self.font == other.font
+        self.font == other.font
             && self.shaping == other.shaping
             && self.horizontal_alignment == other.horizontal_alignment
             && self.vertical_alignment == other.vertical_alignment
@@ -271,7 +314,6 @@ impl Default for Internal {
                 font_size: 1.0,
                 line_height: 1.0,
             }),
-            content: String::new(),
             font: Font::default(),
             shaping: Shaping::default(),
             horizontal_alignment: alignment::Horizontal::Left,
@@ -298,7 +340,7 @@ pub struct Weak {
 impl Weak {
     /// Tries to update the reference into a [`Paragraph`].
     pub fn upgrade(&self) -> Option<Paragraph> {
-        self.raw.upgrade().map(Some).map(Paragraph)
+        self.raw.upgrade().map(Paragraph)
     }
 }
 
diff --git a/highlighter/src/lib.rs b/highlighter/src/lib.rs
index 7636a712..deee199f 100644
--- a/highlighter/src/lib.rs
+++ b/highlighter/src/lib.rs
@@ -1,8 +1,9 @@
 //! A syntax highlighter for iced.
 use iced_core as core;
 
+use crate::core::font::{self, Font};
 use crate::core::text::highlighter::{self, Format};
-use crate::core::{Color, Font};
+use crate::core::Color;
 
 use once_cell::sync::Lazy;
 use std::ops::Range;
@@ -35,7 +36,7 @@ impl highlighter::Highlighter for Highlighter {
 
     fn new(settings: &Self::Settings) -> Self {
         let syntax = SYNTAXES
-            .find_syntax_by_token(&settings.extension)
+            .find_syntax_by_token(&settings.token)
             .unwrap_or_else(|| SYNTAXES.find_syntax_plain_text());
 
         let highlighter = highlighting::Highlighter::new(
@@ -55,7 +56,7 @@ impl highlighter::Highlighter for Highlighter {
 
     fn update(&mut self, new_settings: &Self::Settings) {
         self.syntax = SYNTAXES
-            .find_syntax_by_token(&new_settings.extension)
+            .find_syntax_by_token(&new_settings.token)
             .unwrap_or_else(|| SYNTAXES.find_syntax_plain_text());
 
         self.highlighter = highlighting::Highlighter::new(
@@ -141,11 +142,11 @@ pub struct Settings {
     ///
     /// It dictates the color scheme that will be used for highlighting.
     pub theme: Theme,
-    /// The extension of the file to highlight.
+    /// The extension of the file or the name of the language to highlight.
     ///
-    /// The [`Highlighter`] will use the extension to automatically determine
+    /// The [`Highlighter`] will use the token to automatically determine
     /// the grammar to use for highlighting.
-    pub extension: String,
+    pub token: String,
 }
 
 /// A highlight produced by a [`Highlighter`].
@@ -166,7 +167,29 @@ impl Highlight {
     ///
     /// If `None`, the original font should be unchanged.
     pub fn font(&self) -> Option<Font> {
-        None
+        self.0.font_style.and_then(|style| {
+            let bold = style.contains(highlighting::FontStyle::BOLD);
+
+            let italic = style.contains(highlighting::FontStyle::ITALIC);
+
+            if bold || italic {
+                Some(Font {
+                    weight: if bold {
+                        font::Weight::Bold
+                    } else {
+                        font::Weight::Normal
+                    },
+                    style: if italic {
+                        font::Style::Italic
+                    } else {
+                        font::Style::Normal
+                    },
+                    ..Font::MONOSPACE
+                })
+            } else {
+                None
+            }
+        })
     }
 
     /// Returns the [`Format`] of the [`Highlight`].
diff --git a/widget/Cargo.toml b/widget/Cargo.toml
index 498a768b..2f483b79 100644
--- a/widget/Cargo.toml
+++ b/widget/Cargo.toml
@@ -22,8 +22,10 @@ lazy = ["ouroboros"]
 image = ["iced_renderer/image"]
 svg = ["iced_renderer/svg"]
 canvas = ["iced_renderer/geometry"]
-qr_code = ["canvas", "qrcode"]
+qr_code = ["canvas", "dep:qrcode"]
 wgpu = ["iced_renderer/wgpu"]
+markdown = ["dep:pulldown-cmark"]
+highlighter = ["dep:iced_highlighter"]
 advanced = []
 
 [dependencies]
@@ -41,3 +43,9 @@ ouroboros.optional = true
 
 qrcode.workspace = true
 qrcode.optional = true
+
+pulldown-cmark.workspace = true
+pulldown-cmark.optional = true
+
+iced_highlighter.workspace = true
+iced_highlighter.optional = true
diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs
index 1f282f54..aa9394cb 100644
--- a/widget/src/helpers.rs
+++ b/widget/src/helpers.rs
@@ -24,7 +24,7 @@ use crate::tooltip::{self, Tooltip};
 use crate::vertical_slider::{self, VerticalSlider};
 use crate::{Column, MouseArea, Row, Space, Stack, Themer};
 
-use std::borrow::Borrow;
+use std::borrow::{Borrow, Cow};
 use std::ops::RangeInclusive;
 
 /// Creates a [`Column`] with the given children.
@@ -112,6 +112,19 @@ macro_rules! text {
     };
 }
 
+/// Creates some [`Rich`] text with the given spans.
+///
+/// [`Rich`]: text::Rich
+#[macro_export]
+macro_rules! rich_text {
+    () => (
+        $crate::Column::new()
+    );
+    ($($x:expr),+ $(,)?) => (
+        $crate::text::Rich::with_spans([$($crate::text::Span::from($x)),+])
+    );
+}
+
 /// Creates a new [`Container`] with the provided content.
 ///
 /// [`Container`]: crate::Container
@@ -646,8 +659,6 @@ where
 }
 
 /// Creates a new [`Text`] widget with the provided content.
-///
-/// [`Text`]: core::widget::Text
 pub fn text<'a, Theme, Renderer>(
     text: impl text::IntoFragment<'a>,
 ) -> Text<'a, Theme, Renderer>
@@ -659,8 +670,6 @@ where
 }
 
 /// Creates a new [`Text`] widget that displays the provided value.
-///
-/// [`Text`]: core::widget::Text
 pub fn value<'a, Theme, Renderer>(
     value: impl ToString,
 ) -> Text<'a, Theme, Renderer>
@@ -671,6 +680,32 @@ where
     Text::new(value.to_string())
 }
 
+/// Creates a new [`Rich`] text widget with the provided spans.
+///
+/// [`Rich`]: text::Rich
+pub fn rich_text<'a, Theme, Renderer>(
+    spans: impl Into<Cow<'a, [text::Span<'a, Renderer::Font>]>>,
+) -> text::Rich<'a, Theme, Renderer>
+where
+    Theme: text::Catalog + 'a,
+    Renderer: core::text::Renderer,
+{
+    text::Rich::with_spans(spans)
+}
+
+/// Creates a new [`Span`] of text with the provided content.
+///
+/// [`Span`]: text::Span
+pub fn span<'a, Font>(
+    text: impl text::IntoFragment<'a>,
+) -> text::Span<'a, Font> {
+    text::Span::new(text)
+}
+
+#[cfg(feature = "markdown")]
+#[doc(inline)]
+pub use crate::markdown::view as markdown;
+
 /// Creates a new [`Checkbox`].
 ///
 /// [`Checkbox`]: crate::Checkbox
diff --git a/widget/src/lib.rs b/widget/src/lib.rs
index 00e9aaa4..115a29e5 100644
--- a/widget/src/lib.rs
+++ b/widget/src/lib.rs
@@ -130,5 +130,8 @@ pub mod qr_code;
 #[doc(no_inline)]
 pub use qr_code::QRCode;
 
+#[cfg(feature = "markdown")]
+pub mod markdown;
+
 pub use crate::core::theme::{self, Theme};
 pub use renderer::Renderer;
diff --git a/widget/src/markdown.rs b/widget/src/markdown.rs
new file mode 100644
index 00000000..bbb5b463
--- /dev/null
+++ b/widget/src/markdown.rs
@@ -0,0 +1,246 @@
+//! Parse and display Markdown.
+//!
+//! You can enable the `highlighter` feature for syntax highligting
+//! in code blocks.
+//!
+//! Only the variants of [`Item`] are currently supported.
+use crate::core::font::{self, Font};
+use crate::core::padding;
+use crate::core::theme::{self, Theme};
+use crate::core::{self, Element, Length};
+use crate::{column, container, rich_text, row, span, text};
+
+/// A Markdown item.
+#[derive(Debug, Clone)]
+pub enum Item {
+    /// A heading.
+    Heading(Vec<text::Span<'static>>),
+    /// A paragraph.
+    Paragraph(Vec<text::Span<'static>>),
+    /// A code block.
+    ///
+    /// You can enable the `highlighter` feature for syntax highligting.
+    CodeBlock(Vec<text::Span<'static>>),
+    /// A list.
+    List {
+        /// The first number of the list, if it is ordered.
+        start: Option<u64>,
+        /// The items of the list.
+        items: Vec<Vec<text::Span<'static>>>,
+    },
+}
+
+/// Parse the given Markdown content.
+pub fn parse(
+    markdown: &str,
+    palette: theme::Palette,
+) -> impl Iterator<Item = Item> + '_ {
+    let mut spans = Vec::new();
+    let mut heading = None;
+    let mut strong = false;
+    let mut emphasis = false;
+    let mut link = false;
+    let mut list = Vec::new();
+    let mut list_start = None;
+
+    #[cfg(feature = "highlighter")]
+    let mut highlighter = None;
+
+    let parser = pulldown_cmark::Parser::new(markdown);
+
+    // We want to keep the `spans` capacity
+    #[allow(clippy::drain_collect)]
+    parser.filter_map(move |event| match event {
+        pulldown_cmark::Event::Start(tag) => match tag {
+            pulldown_cmark::Tag::Heading { level, .. } => {
+                heading = Some(level);
+                None
+            }
+            pulldown_cmark::Tag::Strong => {
+                strong = true;
+                None
+            }
+            pulldown_cmark::Tag::Emphasis => {
+                emphasis = true;
+                None
+            }
+            pulldown_cmark::Tag::Link { .. } => {
+                link = true;
+                None
+            }
+            pulldown_cmark::Tag::List(first_item) => {
+                list_start = first_item;
+                None
+            }
+            pulldown_cmark::Tag::CodeBlock(
+                pulldown_cmark::CodeBlockKind::Fenced(_language),
+            ) => {
+                #[cfg(feature = "highlighter")]
+                {
+                    use iced_highlighter::{self, Highlighter};
+                    use text::Highlighter as _;
+
+                    highlighter =
+                        Some(Highlighter::new(&iced_highlighter::Settings {
+                            theme: iced_highlighter::Theme::Base16Ocean,
+                            token: _language.to_string(),
+                        }));
+                }
+
+                None
+            }
+            _ => None,
+        },
+        pulldown_cmark::Event::End(tag) => match tag {
+            pulldown_cmark::TagEnd::Heading(_) => {
+                heading = None;
+                Some(Item::Heading(spans.drain(..).collect()))
+            }
+            pulldown_cmark::TagEnd::Emphasis => {
+                emphasis = false;
+                None
+            }
+            pulldown_cmark::TagEnd::Strong => {
+                strong = false;
+                None
+            }
+            pulldown_cmark::TagEnd::Link => {
+                link = false;
+                None
+            }
+            pulldown_cmark::TagEnd::Paragraph => {
+                Some(Item::Paragraph(spans.drain(..).collect()))
+            }
+            pulldown_cmark::TagEnd::List(_) => Some(Item::List {
+                start: list_start,
+                items: list.drain(..).collect(),
+            }),
+            pulldown_cmark::TagEnd::Item => {
+                list.push(spans.drain(..).collect());
+                None
+            }
+            pulldown_cmark::TagEnd::CodeBlock => {
+                #[cfg(feature = "highlighter")]
+                {
+                    highlighter = None;
+                }
+
+                Some(Item::CodeBlock(spans.drain(..).collect()))
+            }
+            _ => None,
+        },
+        pulldown_cmark::Event::Text(text) => {
+            #[cfg(feature = "highlighter")]
+            if let Some(highlighter) = &mut highlighter {
+                use text::Highlighter as _;
+
+                for (range, highlight) in
+                    highlighter.highlight_line(text.as_ref())
+                {
+                    let span = span(text[range].to_owned())
+                        .color_maybe(highlight.color())
+                        .font_maybe(highlight.font());
+
+                    spans.push(span);
+                }
+
+                return None;
+            }
+
+            let span = span(text.into_string());
+
+            let span = match heading {
+                None => span,
+                Some(heading) => span.size(match heading {
+                    pulldown_cmark::HeadingLevel::H1 => 32,
+                    pulldown_cmark::HeadingLevel::H2 => 28,
+                    pulldown_cmark::HeadingLevel::H3 => 24,
+                    pulldown_cmark::HeadingLevel::H4 => 20,
+                    pulldown_cmark::HeadingLevel::H5 => 16,
+                    pulldown_cmark::HeadingLevel::H6 => 16,
+                }),
+            };
+
+            let span = if strong || emphasis {
+                span.font(Font {
+                    weight: if strong {
+                        font::Weight::Bold
+                    } else {
+                        font::Weight::Normal
+                    },
+                    style: if emphasis {
+                        font::Style::Italic
+                    } else {
+                        font::Style::Normal
+                    },
+                    ..Font::default()
+                })
+            } else {
+                span
+            };
+
+            let span = span.color_maybe(link.then_some(palette.primary));
+
+            spans.push(span);
+
+            None
+        }
+        pulldown_cmark::Event::Code(code) => {
+            spans.push(span(code.into_string()).font(Font::MONOSPACE));
+            None
+        }
+        pulldown_cmark::Event::SoftBreak => {
+            spans.push(span(" "));
+            None
+        }
+        pulldown_cmark::Event::HardBreak => {
+            spans.push(span("\n"));
+            None
+        }
+        _ => None,
+    })
+}
+
+/// Display a bunch of Markdown items.
+///
+/// You can obtain the items with [`parse`].
+pub fn view<'a, Message, Renderer>(
+    items: impl IntoIterator<Item = &'a Item>,
+) -> Element<'a, Message, Theme, Renderer>
+where
+    Message: 'a,
+    Renderer: core::text::Renderer<Font = Font> + 'a,
+{
+    let blocks = items.into_iter().enumerate().map(|(i, item)| match item {
+        Item::Heading(heading) => container(rich_text(heading))
+            .padding(padding::top(if i > 0 { 8 } else { 0 }))
+            .into(),
+        Item::Paragraph(paragraph) => rich_text(paragraph).into(),
+        Item::List { start: None, items } => column(
+            items
+                .iter()
+                .map(|item| row!["•", rich_text(item)].spacing(10).into()),
+        )
+        .spacing(10)
+        .into(),
+        Item::List {
+            start: Some(start),
+            items,
+        } => column(items.iter().enumerate().map(|(i, item)| {
+            row![text!("{}.", i as u64 + *start), rich_text(item)]
+                .spacing(10)
+                .into()
+        }))
+        .spacing(10)
+        .into(),
+        Item::CodeBlock(code) => {
+            container(rich_text(code).font(Font::MONOSPACE).size(12))
+                .width(Length::Fill)
+                .padding(10)
+                .style(container::rounded_box)
+                .into()
+        }
+    });
+
+    Element::new(column(blocks).width(Length::Fill).spacing(16))
+}
diff --git a/widget/src/pick_list.rs b/widget/src/pick_list.rs
index 97de5b48..f7f7b65b 100644
--- a/widget/src/pick_list.rs
+++ b/widget/src/pick_list.rs
@@ -6,7 +6,8 @@ use crate::core::layout;
 use crate::core::mouse;
 use crate::core::overlay;
 use crate::core::renderer;
-use crate::core::text::{self, Paragraph as _, Text};
+use crate::core::text::paragraph;
+use crate::core::text::{self, Text};
 use crate::core::touch;
 use crate::core::widget::tree::{self, Tree};
 use crate::core::{
@@ -622,8 +623,8 @@ struct State<P: text::Paragraph> {
     keyboard_modifiers: keyboard::Modifiers,
     is_open: bool,
     hovered_option: Option<usize>,
-    options: Vec<P>,
-    placeholder: P,
+    options: Vec<paragraph::Plain<P>>,
+    placeholder: paragraph::Plain<P>,
 }
 
 impl<P: text::Paragraph> State<P> {
@@ -635,7 +636,7 @@ impl<P: text::Paragraph> State<P> {
             is_open: bool::default(),
             hovered_option: Option::default(),
             options: Vec::new(),
-            placeholder: P::default(),
+            placeholder: paragraph::Plain::default(),
         }
     }
 }
diff --git a/widget/src/scrollable.rs b/widget/src/scrollable.rs
index b1082203..6dd593cb 100644
--- a/widget/src/scrollable.rs
+++ b/widget/src/scrollable.rs
@@ -62,19 +62,27 @@ where
         .validate()
     }
 
-    fn validate(self) -> Self {
+    fn validate(mut self) -> Self {
+        let size_hint = self.content.as_widget().size_hint();
+
         debug_assert!(
-            self.direction.vertical().is_none()
-                || !self.content.as_widget().size_hint().height.is_fill(),
+            self.direction.vertical().is_none() || !size_hint.height.is_fill(),
             "scrollable content must not fill its vertical scrolling axis"
         );
 
         debug_assert!(
-            self.direction.horizontal().is_none()
-                || !self.content.as_widget().size_hint().width.is_fill(),
+            self.direction.horizontal().is_none() || !size_hint.width.is_fill(),
             "scrollable content must not fill its horizontal scrolling axis"
         );
 
+        if self.direction.horizontal().is_none() {
+            self.width = self.width.enclose(size_hint.width);
+        }
+
+        if self.direction.vertical().is_none() {
+            self.height = self.height.enclose(size_hint.height);
+        }
+
         self
     }
 
diff --git a/widget/src/text.rs b/widget/src/text.rs
index 0d689295..9bf7fce4 100644
--- a/widget/src/text.rs
+++ b/widget/src/text.rs
@@ -1,5 +1,9 @@
 //! Draw and interact with text.
+mod rich;
+
+pub use crate::core::text::{Fragment, Highlighter, IntoFragment, Span};
 pub use crate::core::widget::text::*;
+pub use rich::Rich;
 
 /// A paragraph.
 pub type Text<'a, Theme = crate::Theme, Renderer = crate::Renderer> =
diff --git a/widget/src/text/rich.rs b/widget/src/text/rich.rs
new file mode 100644
index 00000000..5c44ed9e
--- /dev/null
+++ b/widget/src/text/rich.rs
@@ -0,0 +1,335 @@
+use crate::core::alignment;
+use crate::core::layout::{self, Layout};
+use crate::core::mouse;
+use crate::core::renderer;
+use crate::core::text::{Paragraph, Span};
+use crate::core::widget::text::{
+    self, Catalog, LineHeight, Shaping, Style, StyleFn,
+};
+use crate::core::widget::tree::{self, Tree};
+use crate::core::{
+    self, Color, Element, Length, Pixels, Rectangle, Size, Widget,
+};
+
+use std::borrow::Cow;
+
+/// A bunch of [`Rich`] text.
+#[derive(Debug)]
+pub struct Rich<'a, Theme = crate::Theme, Renderer = crate::Renderer>
+where
+    Theme: Catalog,
+    Renderer: core::text::Renderer,
+{
+    spans: Cow<'a, [Span<'a, Renderer::Font>]>,
+    size: Option<Pixels>,
+    line_height: LineHeight,
+    width: Length,
+    height: Length,
+    font: Option<Renderer::Font>,
+    align_x: alignment::Horizontal,
+    align_y: alignment::Vertical,
+    class: Theme::Class<'a>,
+}
+
+impl<'a, Theme, Renderer> Rich<'a, Theme, Renderer>
+where
+    Theme: Catalog,
+    Renderer: core::text::Renderer,
+{
+    /// Creates a new empty [`Rich`] text.
+    pub fn new() -> Self {
+        Self {
+            spans: Cow::default(),
+            size: None,
+            line_height: LineHeight::default(),
+            width: Length::Shrink,
+            height: Length::Shrink,
+            font: None,
+            align_x: alignment::Horizontal::Left,
+            align_y: alignment::Vertical::Top,
+            class: Theme::default(),
+        }
+    }
+
+    /// Creates a new [`Rich`] text with the given text spans.
+    pub fn with_spans(
+        spans: impl Into<Cow<'a, [Span<'a, Renderer::Font>]>>,
+    ) -> Self {
+        Self {
+            spans: spans.into(),
+            ..Self::new()
+        }
+    }
+
+    /// Sets the default size of the [`Rich`] text.
+    pub fn size(mut self, size: impl Into<Pixels>) -> Self {
+        self.size = Some(size.into());
+        self
+    }
+
+    /// Sets the defualt [`LineHeight`] of the [`Rich`] text.
+    pub fn line_height(mut self, line_height: impl Into<LineHeight>) -> Self {
+        self.line_height = line_height.into();
+        self
+    }
+
+    /// Sets the default font of the [`Rich`] text.
+    pub fn font(mut self, font: impl Into<Renderer::Font>) -> Self {
+        self.font = Some(font.into());
+        self
+    }
+
+    /// Sets the width of the [`Rich`] text boundaries.
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
+        self
+    }
+
+    /// Sets the height of the [`Rich`] text boundaries.
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
+        self
+    }
+
+    /// Centers the [`Rich`] text, both horizontally and vertically.
+    pub fn center(self) -> Self {
+        self.align_x(alignment::Horizontal::Center)
+            .align_y(alignment::Vertical::Center)
+    }
+
+    /// Sets the [`alignment::Horizontal`] of the [`Rich`] text.
+    pub fn align_x(
+        mut self,
+        alignment: impl Into<alignment::Horizontal>,
+    ) -> Self {
+        self.align_x = alignment.into();
+        self
+    }
+
+    /// Sets the [`alignment::Vertical`] of the [`Rich`] text.
+    pub fn align_y(
+        mut self,
+        alignment: impl Into<alignment::Vertical>,
+    ) -> Self {
+        self.align_y = alignment.into();
+        self
+    }
+
+    /// Sets the default style of the [`Rich`] text.
+    #[must_use]
+    pub fn style(mut self, style: impl Fn(&Theme) -> Style + 'a) -> Self
+    where
+        Theme::Class<'a>: From<StyleFn<'a, Theme>>,
+    {
+        self.class = (Box::new(style) as StyleFn<'a, Theme>).into();
+        self
+    }
+
+    /// Sets the default [`Color`] of the [`Rich`] text.
+    pub fn color(self, color: impl Into<Color>) -> Self
+    where
+        Theme::Class<'a>: From<StyleFn<'a, Theme>>,
+    {
+        self.color_maybe(Some(color))
+    }
+
+    /// Sets the default [`Color`] of the [`Rich`] text, if `Some`.
+    pub fn color_maybe(self, color: Option<impl Into<Color>>) -> Self
+    where
+        Theme::Class<'a>: From<StyleFn<'a, Theme>>,
+    {
+        let color = color.map(Into::into);
+
+        self.style(move |_theme| Style { color })
+    }
+
+    /// Sets the default style class of the [`Rich`] text.
+    #[cfg(feature = "advanced")]
+    #[must_use]
+    pub fn class(mut self, class: impl Into<Theme::Class<'a>>) -> Self {
+        self.class = class.into();
+        self
+    }
+
+    /// Adds a new text [`Span`] to the [`Rich`] text.
+    pub fn push(mut self, span: impl Into<Span<'a, Renderer::Font>>) -> Self {
+        self.spans.to_mut().push(span.into());
+        self
+    }
+}
+
+impl<'a, Theme, Renderer> Default for Rich<'a, Theme, Renderer>
+where
+    Theme: Catalog,
+    Renderer: core::text::Renderer,
+{
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+struct State<P: Paragraph> {
+    spans: Vec<Span<'static, P::Font>>,
+    paragraph: P,
+}
+
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Rich<'a, Theme, Renderer>
+where
+    Theme: Catalog,
+    Renderer: core::text::Renderer,
+{
+    fn tag(&self) -> tree::Tag {
+        tree::Tag::of::<State<Renderer::Paragraph>>()
+    }
+
+    fn state(&self) -> tree::State {
+        tree::State::new(State {
+            spans: Vec::new(),
+            paragraph: Renderer::Paragraph::default(),
+        })
+    }
+
+    fn size(&self) -> Size<Length> {
+        Size {
+            width: self.width,
+            height: self.height,
+        }
+    }
+
+    fn layout(
+        &self,
+        tree: &mut Tree,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        layout(
+            tree.state.downcast_mut::<State<Renderer::Paragraph>>(),
+            renderer,
+            limits,
+            self.width,
+            self.height,
+            self.spans.as_ref(),
+            self.line_height,
+            self.size,
+            self.font,
+            self.align_x,
+            self.align_y,
+        )
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Theme,
+        defaults: &renderer::Style,
+        layout: Layout<'_>,
+        _cursor_position: mouse::Cursor,
+        viewport: &Rectangle,
+    ) {
+        let state = tree.state.downcast_ref::<State<Renderer::Paragraph>>();
+        let style = theme.style(&self.class);
+
+        text::draw(
+            renderer,
+            defaults,
+            layout,
+            &state.paragraph,
+            style,
+            viewport,
+        );
+    }
+}
+
+fn layout<Renderer>(
+    state: &mut State<Renderer::Paragraph>,
+    renderer: &Renderer,
+    limits: &layout::Limits,
+    width: Length,
+    height: Length,
+    spans: &[Span<'_, Renderer::Font>],
+    line_height: LineHeight,
+    size: Option<Pixels>,
+    font: Option<Renderer::Font>,
+    horizontal_alignment: alignment::Horizontal,
+    vertical_alignment: alignment::Vertical,
+) -> layout::Node
+where
+    Renderer: core::text::Renderer,
+{
+    layout::sized(limits, width, height, |limits| {
+        let bounds = limits.max();
+
+        let size = size.unwrap_or_else(|| renderer.default_size());
+        let font = font.unwrap_or_else(|| renderer.default_font());
+
+        let text_with_spans = || core::Text {
+            content: spans,
+            bounds,
+            size,
+            line_height,
+            font,
+            horizontal_alignment,
+            vertical_alignment,
+            shaping: Shaping::Advanced,
+        };
+
+        if state.spans != spans {
+            state.paragraph =
+                Renderer::Paragraph::with_spans(text_with_spans());
+            state.spans = spans.iter().cloned().map(Span::to_static).collect();
+        } else {
+            match state.paragraph.compare(core::Text {
+                content: (),
+                bounds,
+                size,
+                line_height,
+                font,
+                horizontal_alignment,
+                vertical_alignment,
+                shaping: Shaping::Advanced,
+            }) {
+                core::text::Difference::None => {}
+                core::text::Difference::Bounds => {
+                    state.paragraph.resize(bounds);
+                }
+                core::text::Difference::Shape => {
+                    state.paragraph =
+                        Renderer::Paragraph::with_spans(text_with_spans());
+                }
+            }
+        }
+
+        state.paragraph.min_bounds()
+    })
+}
+
+impl<'a, Theme, Renderer> FromIterator<Span<'a, Renderer::Font>>
+    for Rich<'a, Theme, Renderer>
+where
+    Theme: Catalog,
+    Renderer: core::text::Renderer,
+{
+    fn from_iter<T: IntoIterator<Item = Span<'a, Renderer::Font>>>(
+        spans: T,
+    ) -> Self {
+        Self {
+            spans: spans.into_iter().collect(),
+            ..Self::new()
+        }
+    }
+}
+
+impl<'a, Message, Theme, Renderer> From<Rich<'a, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
+where
+    Theme: Catalog + 'a,
+    Renderer: core::text::Renderer + 'a,
+{
+    fn from(
+        text: Rich<'a, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
+        Element::new(text)
+    }
+}
diff --git a/widget/src/text_editor.rs b/widget/src/text_editor.rs
index 0156b960..e494a3b0 100644
--- a/widget/src/text_editor.rs
+++ b/widget/src/text_editor.rs
@@ -9,6 +9,7 @@ use crate::core::renderer;
 use crate::core::text::editor::{Cursor, Editor as _};
 use crate::core::text::highlighter::{self, Highlighter};
 use crate::core::text::{self, LineHeight};
+use crate::core::widget::operation;
 use crate::core::widget::{self, Widget};
 use crate::core::{
     Background, Border, Color, Element, Length, Padding, Pixels, Rectangle,
@@ -338,6 +339,22 @@ impl<Highlighter: text::Highlighter> State<Highlighter> {
     }
 }
 
+impl<Highlighter: text::Highlighter> operation::Focusable
+    for State<Highlighter>
+{
+    fn is_focused(&self) -> bool {
+        self.is_focused
+    }
+
+    fn focus(&mut self) {
+        self.is_focused = true;
+    }
+
+    fn unfocus(&mut self) {
+        self.is_focused = false;
+    }
+}
+
 impl<'a, Highlighter, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
     for TextEditor<'a, Highlighter, Message, Theme, Renderer>
 where
@@ -640,6 +657,18 @@ where
             mouse::Interaction::default()
         }
     }
+
+    fn operate(
+        &self,
+        tree: &mut widget::Tree,
+        _layout: Layout<'_>,
+        _renderer: &Renderer,
+        operation: &mut dyn widget::Operation<()>,
+    ) {
+        let state = tree.state.downcast_mut::<State<Highlighter>>();
+
+        operation.focusable(state, None);
+    }
 }
 
 impl<'a, Highlighter, Message, Theme, Renderer>
diff --git a/widget/src/text_input.rs b/widget/src/text_input.rs
index ba2fbc13..a0fe14a0 100644
--- a/widget/src/text_input.rs
+++ b/widget/src/text_input.rs
@@ -19,7 +19,8 @@ use crate::core::keyboard::key;
 use crate::core::layout;
 use crate::core::mouse::{self, click};
 use crate::core::renderer;
-use crate::core::text::{self, Paragraph as _, Text};
+use crate::core::text::paragraph;
+use crate::core::text::{self, Text};
 use crate::core::time::{Duration, Instant};
 use crate::core::touch;
 use crate::core::widget;
@@ -360,7 +361,7 @@ where
             let icon_layout = children_layout.next().unwrap();
 
             renderer.fill_paragraph(
-                &state.icon,
+                state.icon.raw(),
                 icon_layout.bounds().center(),
                 style.icon,
                 *viewport,
@@ -378,7 +379,7 @@ where
                 cursor::State::Index(position) => {
                     let (text_value_width, offset) =
                         measure_cursor_and_scroll_offset(
-                            &state.value,
+                            state.value.raw(),
                             text_bounds,
                             position,
                         );
@@ -415,14 +416,14 @@ where
 
                     let (left_position, left_offset) =
                         measure_cursor_and_scroll_offset(
-                            &state.value,
+                            state.value.raw(),
                             text_bounds,
                             left,
                         );
 
                     let (right_position, right_offset) =
                         measure_cursor_and_scroll_offset(
-                            &state.value,
+                            state.value.raw(),
                             text_bounds,
                             right,
                         );
@@ -469,9 +470,9 @@ where
 
             renderer.fill_paragraph(
                 if text.is_empty() {
-                    &state.placeholder
+                    state.placeholder.raw()
                 } else {
-                    &state.value
+                    state.value.raw()
                 },
                 Point::new(text_bounds.x, text_bounds.center_y())
                     - Vector::new(offset, 0.0),
@@ -1178,9 +1179,9 @@ pub fn select_all<T>(id: Id) -> Task<T> {
 /// The state of a [`TextInput`].
 #[derive(Debug, Default, Clone)]
 pub struct State<P: text::Paragraph> {
-    value: P,
-    placeholder: P,
-    icon: P,
+    value: paragraph::Plain<P>,
+    placeholder: paragraph::Plain<P>,
+    icon: paragraph::Plain<P>,
     is_focused: Option<Focus>,
     is_dragging: bool,
     is_pasting: Option<Value>,
@@ -1212,9 +1213,9 @@ impl<P: text::Paragraph> State<P> {
     /// Creates a new [`State`], representing a focused [`TextInput`].
     pub fn focused() -> Self {
         Self {
-            value: P::default(),
-            placeholder: P::default(),
-            icon: P::default(),
+            value: paragraph::Plain::default(),
+            placeholder: paragraph::Plain::default(),
+            icon: paragraph::Plain::default(),
             is_focused: None,
             is_dragging: false,
             is_pasting: None,
@@ -1319,7 +1320,7 @@ fn offset<P: text::Paragraph>(
         };
 
         let (_, offset) = measure_cursor_and_scroll_offset(
-            &state.value,
+            state.value.raw(),
             text_bounds,
             focus_position,
         );
@@ -1357,6 +1358,7 @@ fn find_cursor_position<P: text::Paragraph>(
 
     let char_offset = state
         .value
+        .raw()
         .hit_test(Point::new(x + offset, text_bounds.height / 2.0))
         .map(text::Hit::cursor)?;
 
@@ -1386,7 +1388,7 @@ fn replace_paragraph<Renderer>(
     let mut children_layout = layout.children();
     let text_bounds = children_layout.next().unwrap().bounds();
 
-    state.value = Renderer::Paragraph::with_text(Text {
+    state.value = paragraph::Plain::new(Text {
         font,
         line_height,
         content: &value.to_string(),