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

`rich_text` and `markdown` widgets

4 files changed, 186 insertions, 1 deletions

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()
+    }
+}