me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Flesh out the markdown example a bit more

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2024-07-18 13:14:56 +02:00
parent 910eb72a06
commit 904704d7c1
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
10 changed files with 435 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

2
examples/editor/src/main.rs
View file

@ -189,7 +189,7 @@ impl Editor {
.highlight::<Highlighter>(
highlighter::Settings {
theme: self.theme,
extension: self
token: self
.file
.as_deref()
.and_then(Path::extension)

2
examples/markdown/Cargo.toml
View file

@ -7,6 +7,6 @@ publish = false
[dependencies]
iced.workspace = true
iced.features = ["debug"]
iced.features = ["highlighter", "debug"]
pulldown-cmark = "0.11"

102
examples/markdown/overview.md Normal file
View file

@ -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/

356
examples/markdown/src/main.rs
View file

@ -1,7 +1,6 @@
use iced::font;
use iced::padding;
use iced::widget::{
self, column, container, rich_text, row, span, text_editor,
self, column, container, rich_text, row, scrollable, span, text,
text_editor,
};
use iced::{Element, Fill, Font, Task, Theme};
@ -13,6 +12,8 @@ pub fn main() -> iced::Result {
struct Markdown {
content: text_editor::Content,
items: Vec<Item>,
theme: Theme,
}
#[derive(Debug, Clone)]
@ -22,11 +23,15 @@ enum Message {
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(
"# Markdown Editor\nType your Markdown here...",
),
content: text_editor::Content::with_text(INITIAL_CONTENT),
items: parse(INITIAL_CONTENT, &theme).collect(),
theme,
},
widget::focus_next(),
)
@ -34,7 +39,14 @@ impl Markdown {
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 =
parse(&self.content.text(), &self.theme).collect();
}
}
}
}
@ -46,127 +58,225 @@ impl Markdown {
.padding(10)
.font(Font::MONOSPACE);
let preview = {
let markdown = self.content.text();
let parser = pulldown_cmark::Parser::new(&markdown);
let preview = markdown(&self.items);
let mut strong = false;
let mut emphasis = false;
let mut heading = None;
let mut spans = Vec::new();
let items = parser.filter_map(|event| match event {
pulldown_cmark::Event::Start(tag) => match tag {
pulldown_cmark::Tag::Strong => {
strong = true;
None
}
pulldown_cmark::Tag::Emphasis => {
emphasis = true;
None
}
pulldown_cmark::Tag::Heading { level, .. } => {
heading = Some(level);
None
}
_ => None,
},
pulldown_cmark::Event::End(tag) => match tag {
pulldown_cmark::TagEnd::Emphasis => {
emphasis = false;
None
}
pulldown_cmark::TagEnd::Strong => {
strong = false;
None
}
pulldown_cmark::TagEnd::Heading(_) => {
heading = None;
Some(
container(rich_text(spans.drain(..)))
.padding(padding::bottom(5))
.into(),
)
}
pulldown_cmark::TagEnd::Paragraph => Some(
container(rich_text(spans.drain(..)))
.padding(padding::bottom(15))
.into(),
),
pulldown_cmark::TagEnd::CodeBlock => Some(
container(
container(
rich_text(spans.drain(..))
.font(Font::MONOSPACE),
)
.width(Fill)
.padding(10)
.style(container::rounded_box),
)
.padding(padding::bottom(15))
.into(),
),
_ => None,
},
pulldown_cmark::Event::Text(text) => {
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
};
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,
});
column(items).width(Fill)
};
row![editor, preview].spacing(10).padding(10).into()
row![
editor,
scrollable(preview).spacing(10).width(Fill).height(Fill)
]
.spacing(10)
.padding(10)
.into()
}
fn theme(&self) -> Theme {
Theme::TokyoNight
}
}
fn markdown<'a>(
items: impl IntoIterator<Item = &'a Item>,
) -> Element<'a, Message> {
use iced::padding;
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(Fill)
.padding(10)
.style(container::rounded_box)
.into()
}
});
column(blocks).width(Fill).spacing(16).into()
}
#[derive(Debug, Clone)]
enum Item {
Heading(Vec<text::Span<'static>>),
Paragraph(Vec<text::Span<'static>>),
CodeBlock(Vec<text::Span<'static>>),
List {
start: Option<u64>,
items: Vec<Vec<text::Span<'static>>>,
},
}
fn parse<'a>(
markdown: &'a str,
theme: &'a Theme,
) -> impl Iterator<Item = Item> + 'a {
use iced::font;
use iced::highlighter::{self, Highlighter};
use text::Highlighter as _;
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;
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),
) => {
highlighter = Some(Highlighter::new(&highlighter::Settings {
theme: 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 => {
highlighter = None;
Some(Item::CodeBlock(spans.drain(..).collect()))
}
_ => None,
},
pulldown_cmark::Event::Text(text) => {
if let Some(highlighter) = &mut highlighter {
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);
}
} else {
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(|| theme.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,
})
}