dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

text: Add TextView with Markdown and Simple HTML support. (#639)

Browse source
This commit is contained in:
Jason Lee 2025-02-20 20:08:59 +08:00 committed by GitHub
parent 6c39078e8a
commit 06f9178ec4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 3343 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.github/workflows/ci.yml vendored
View file

@ -19,7 +19,7 @@ jobs:
- name: Machete
uses: bnjbvr/cargo-machete@main
- name: Setup | Cache Cargo
uses: actions/cache@v3.0.11
uses: actions/cache@v4
with:
path: |
~/.cargo/bin/
@ -35,4 +35,5 @@ jobs:
cargo clippy -- --deny warnings
typos
- name: Build test
run: cargo build
run: |
cargo test --all

1146
Cargo.lock generated
View file

File diff suppressed because it is too large Load diff

1
README.md
View file

@ -36,6 +36,7 @@ UI components for building fantastic desktop application by using [GPUI](https:/
- Sidebar
- Breadcrumb
- Badge
- TextView (Markdown, Simple HTML) to native rendering.
## Showcase

1
crates/story/Cargo.toml
View file

@ -11,6 +11,7 @@ chrono = "0.4"
fake = { version = "2.10.0", features = ["dummy"] }
gpui.workspace = true
gpui-component.workspace = true
reqwest_client = { git = "https://github.com/huacnlee/zed.git", branch = "webview" }
rand = "0.8"
regex = "1"
rust-embed.workspace = true

102
crates/story/examples/html.html Normal file
View file

@ -0,0 +1,102 @@
<article>
<h1>A simple HTML document</h1>
<div>
Here is a test in div.
<p>
This is a paragraph inside a div element, have
<mention>@Mention Tag</mention>
<a href="https://google.com"
>Link with: <b>Bold <i>italic</i></b></a
>, <strong>bold</strong>, <em>italic</em>, and
<code>code</code> text.
</p>
<div>
<p>This is second paragraph.</p>
</div>
A text after div.
<p>
这是一个中文演示段落，用于展示更多的
<a href="https://github.github.com/gfm/">Markdown GFM</a>
内容。これは日本語のデモ段落です。の多言語サポートを示すためのテキストが含まれています。
</p>
</div>
<div>
<h2>List</h2>
Example for Bulleted and Numbered List:
<h3>Numbered List</h3>
Text before the Numbered List.
<ol>
<li>
Numbered item 1
<ol>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ol>
</li>
<li>Numbered item 2</li>
<li>Numbered item 3</li>
</ol>
Text after the Numbered List.
<h3>Bulleted List</h3>
Text before the Bulleted List.
<ul>
<li>
Bullet 1
<ol>
<li>Sub Numbered 1</li>
<li>Sub Numbered 2</li>
</ol>
</li>
<li>Bullet 2</li>
</ul>
Text after the Bulleted List.
</div>
Text before the section.
<section>
<h2>Table</h2>
Text before the table.
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Cell</strong> 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
Text after the table.
</section>
Text after the section.
<section>
<h2>Images</h2>
<img
src="https://www.rust-lang.org/logos/rust-logo-blk.svg"
alt="Rust"
width="100"
height="100"
/>
Text before the image.
<img
src="https://www.rust-lang.org/logos/rust-logo-blk.svg"
alt="Rust"
width="100%"
/>
Text after the image.
<img
src="https://www.rust-lang.org/logos/rust-logo-blk.svg"
alt="Rust"
style="width: 100%"
/>
</section>
</article>

87
crates/story/examples/html.rs Normal file
View file

@ -0,0 +1,87 @@
use gpui::*;
use gpui_component::{input::TextInput, text::TextView, ActiveTheme as _};
use story::Assets;
pub struct Example {
text_input: Entity<TextInput>,
text_view: Entity<TextView>,
_subscribe: Subscription,
}
const EXAMPLE: &str = include_str!("./html.html");
impl Example {
pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
let text_input = cx.new(|cx| {
TextInput::new(window, cx)
.multi_line()
.rows(50)
.placeholder("Input your HTML here...")
});
let text_view = cx.new(|cx| TextView::html(EXAMPLE, cx));
let _subscribe = cx.subscribe(
&text_input,
|this, _, _: &gpui_component::input::InputEvent, cx| {
let new_text = this.text_input.read(cx).text();
this.text_view.update(cx, |view, cx| {
view.set_text(new_text, cx);
});
},
);
_ = text_input.update(cx, |input, cx| {
input.set_text(EXAMPLE, window, cx);
});
Self {
text_input,
text_view,
_subscribe,
}
}
fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
cx.new(|cx| Self::new(window, cx))
}
}
impl Render for Example {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
div()
.flex()
.flex_row()
.h_full()
.child(
div()
.id("source")
.h_full()
.w_1_2()
.border_r_1()
.border_color(cx.theme().border)
.flex_1()
.child(self.text_input.clone()),
)
.child(
div()
.id("preview")
.h_full()
.w_1_2()
.p_5()
.flex_1()
.overflow_y_scroll()
.child(self.text_view.clone()),
)
}
}
fn main() {
let app = Application::new().with_assets(Assets);
app.run(move |cx| {
story::init(cx);
cx.activate(true);
story::create_new_window("HTML Example", Example::view, cx);
});
}

143
crates/story/examples/markdown.md Normal file
View file

@ -0,0 +1,143 @@
# Hello, **World**!
This is first paragraph, there have **BOLD**, _italic_, and ~strikethrough~, `code` text.
> Blockquote: More complex nested inline style like **bold: _italic_**.
> This is second paragraph, it includes a block quote.
This is an additional demonstration paragraph in English demonstrating more content for [Markdown GFM](https://github.github.com/gfm/). It includes various stylistic elements and plain text.
---
这是一个中文演示段落，用于展示更多的 [Markdown GFM](https://github.github.com/gfm/) 内容。您可以在此尝试使用使用**粗体**、*斜体*和`代码`等样式。これは日本語のデモ段落です。Markdown の多言語サポートを示すためのテキストが含まれています。例えば、、**ボールド**、_イタリック_、および`コード`のスタイルなどを試すことができます。
## Heading for [Links](https://www.google.com)
Here is a link to [Google](https://www.google.com), and another to [Rust](https://www.rust-lang.org).
### Images
![Rust](https://www.rust-lang.org/logos/rust-logo-blk.svg)
### HTML
#### Paragraph and Text
<div>
Here is a test in div.
<p>This is a paragraph inside a div element, have <a href="https://google.com">link</a>, <strong>bold</strong>, <em>italic</em>, and <code>code</code> text.</p>
<div>
<p>This is second paragraph.</p>
</div>
A text after div.
</div>
#### List
<ol>
<li>Numbered item 1</li>
<li>Numbered item 2</li>
</ol>
<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
</ul>
#### Table
<table>
<thead>
<tr>
<td>Head 1</td>
<td>Head 2</td>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Cell</strong> 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
#### Image
<img src="https://www.rust-lang.org/logos/rust-logo-blk.svg" alt="Rust" width="100" height="100" />
<img src="https://www.rust-lang.org/logos/rust-logo-blk.svg" alt="Rust" width="100%" />
<img src="https://www.rust-lang.org/logos/rust-logo-blk.svg" alt="Rust" style="width:100%" />
### Table
| Header 1 | Header 2 | Header 3 | Header 4 |
| -------- | -------- | ------------------------------------ | -------- |
| Cell 0 | Cell 1 | This is a long cell with line break. | Cell 3 |
| Row 2 | Row 2 | Row 2<br>[Link](https://github.com) | Row 2 |
| Row 3 | **Bold** | Row 3 | Row 3 |
#### Lists
##### Bulleted List
- Bullet 1
- Bullet 2
- Bullet 2.1
- Bullet 2.1.1
- Bullet 2.1.1.1
- Bullet 2.1.2
- Bullet 2.2
- Bullet 3
##### Numbered List
1. Numbered item 1
1. Numbered item 1.1
1. Numbered item 1.1.1
1. Numbered item 1.2
2. Numbered item 2
3. Numbered item 3
##### To-Do List
- [x] Task 1
- [ ] Task 2
- [ ] Task 3
#### Heading for Code
```rust
fn main() {
println!("Hello, World!");
}
```
## Unsupported
### HTML
<details>
<summary>Click to expand</summary>
<div>
<p>This is a paragraph <a href="https://google.com">inside</a> a details element.</p>
<p>This is second paragraph.</p>
</div>
</details>
### Math
This is an inline math $x^2 + y^2 = z^2$.
This is a block math:
$$
\begin{aligned}
x^2 + y^2 &= z^2 \\
x^3 + y^3 &= z^3
\end{aligned}
$$
This is final paragraph, it includes a code block and a list of items.

63
crates/story/examples/markdown.rs Normal file
View file

@ -0,0 +1,63 @@
use gpui::*;
use gpui_component::{text::TextView, ActiveTheme as _};
use story::Assets;
pub struct Example {
text_view: Entity<TextView>,
}
const EXAMPLE: &str = include_str!("./markdown.md");
impl Example {
pub fn new(_: &mut Window, cx: &mut Context<Self>) -> Self {
let text_view = cx.new(|cx| TextView::markdown(EXAMPLE, cx));
Self { text_view }
}
fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
cx.new(|cx| Self::new(window, cx))
}
}
impl Render for Example {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
div()
.flex()
.flex_row()
.h_full()
.child(
div()
.id("source")
.h_full()
.w_1_2()
.border_r_1()
.border_color(cx.theme().border)
.flex_1()
.p_5()
.overflow_y_scroll()
.child(EXAMPLE),
)
.child(
div()
.id("preview")
.h_full()
.w_1_2()
.p_5()
.flex_1()
.overflow_y_scroll()
.child(self.text_view.clone()),
)
}
}
fn main() {
let app = Application::new().with_assets(Assets);
app.run(move |cx| {
story::init(cx);
cx.activate(true);
story::create_new_window("Markdown Example", Example::view, cx);
});
}

5
crates/story/src/lib.rs
View file

@ -201,6 +201,11 @@ pub fn init(cx: &mut App) {
dropdown_story::init(cx);
popup_story::init(cx);
let http_client = std::sync::Arc::new(
reqwest_client::ReqwestClient::user_agent("gpui-component/story").unwrap(),
);
cx.set_http_client(http_client);
register_panel(cx, PANEL_NAME, |_, _, info, window, cx| {
let story_state = match info {
PanelInfo::Panel(value) => StoryState::from_value(value.clone()),

6
crates/ui/Cargo.toml
View file

@ -36,6 +36,12 @@ usvg = { version = "0.44.0", default-features = false, features = [
] }
uuid = "1.10"
wry = "0.48.0"
# Markdown Parser
markdown = "1.0.0-alpha.22"
# HTML Parser
html5ever = "0.27"
markup5ever_rcdom = "0.3.0"
minify-html = "0.15.0"
# Calendar
chrono = "0.4.38"

1
crates/ui/src/lib.rs
View file

@ -45,6 +45,7 @@ pub mod switch;
pub mod tab;
pub mod table;
pub mod tag;
pub mod text;
pub mod theme;
pub mod tooltip;
pub mod webview;

583
crates/ui/src/text/element.rs Normal file
View file

@ -0,0 +1,583 @@
use std::ops::Range;
use gpui::{
div, img, prelude::FluentBuilder as _, px, relative, rems, App, DefiniteLength, ElementId,
FontStyle, FontWeight, Half, HighlightStyle, InteractiveElement as _, InteractiveText,
IntoElement, Length, ObjectFit, ParentElement, RenderOnce, SharedString, SharedUri, Styled,
StyledImage as _, StyledText, Window,
};
use crate::{h_flex, v_flex, ActiveTheme as _, Icon, IconName};
use super::utils::list_item_prefix;
#[allow(unused)]
#[derive(Debug, Default, Clone, PartialEq)]
pub struct LinkMark {
pub url: SharedString,
pub title: Option<SharedString>,
}
#[derive(Debug, Default, Clone, PartialEq)]
pub struct InlineTextStyle {
pub bold: bool,
pub italic: bool,
pub strikethrough: bool,
pub code: bool,
pub link: Option<LinkMark>,
}
#[derive(Debug, Default, Copy, Clone, PartialEq)]
pub struct Span {
pub start: usize,
pub end: usize,
}
impl From<Span> for ElementId {
fn from(value: Span) -> Self {
ElementId::Name(format!("md-{}:{}", value.start, value.end).into())
}
}
#[allow(unused)]
#[derive(Debug, Default, Clone)]
pub struct ImageNode {
pub url: SharedUri,
pub title: Option<SharedString>,
pub alt: Option<SharedString>,
pub width: Option<DefiniteLength>,
pub height: Option<DefiniteLength>,
}
impl PartialEq for ImageNode {
fn eq(&self, other: &Self) -> bool {
self.url == other.url && self.title == other.title && self.alt == other.alt
}
}
#[derive(Debug, Default, Clone, PartialEq)]
pub struct TextNode {
/// The text content.
pub text: String,
/// The text styles, each tuple contains the range of the text and the style.
pub marks: Vec<(Range<usize>, InlineTextStyle)>,
}
#[derive(Debug, Clone, PartialEq, IntoElement)]
pub enum Paragraph {
Texts {
span: Option<Span>,
children: Vec<TextNode>,
},
Image {
span: Option<Span>,
image: ImageNode,
},
}
impl Default for Paragraph {
fn default() -> Self {
Self::Texts {
span: None,
children: vec![],
}
}
}
impl From<String> for Paragraph {
fn from(value: String) -> Self {
Self::Texts {
span: None,
children: vec![TextNode {
text: value.clone(),
marks: vec![],
}],
}
}
}
#[derive(Debug, Default, Clone, PartialEq)]
pub struct Table {
pub children: Vec<TableRow>,
}
#[derive(Debug, Default, Clone, PartialEq)]
pub struct TableRow {
pub children: Vec<TableCell>,
}
#[derive(Debug, Default, Clone, PartialEq)]
pub struct TableCell {
pub children: Paragraph,
pub width: Option<DefiniteLength>,
}
impl Paragraph {
pub fn clear(&mut self) {
match self {
Self::Texts { children, .. } => children.clear(),
Self::Image { .. } => *self = Self::default(),
}
}
pub fn is_image(&self) -> bool {
matches!(self, Self::Image { .. })
}
pub fn set_span(&mut self, span: Span) {
match self {
Self::Texts { span: s, .. } => *s = Some(span),
Self::Image { span: s, .. } => *s = Some(span),
}
}
pub fn push_str(&mut self, text: &str) {
if let Self::Texts { children, .. } = self {
children.push(TextNode {
text: text.to_string(),
marks: vec![(0..text.len(), InlineTextStyle::default())],
});
}
}
pub fn push(&mut self, text: TextNode) {
if let Self::Texts { children, .. } = self {
children.push(text);
}
}
pub fn set_image(&mut self, image: ImageNode) {
*self = Self::Image { span: None, image };
}
pub fn is_empty(&self) -> bool {
match self {
Self::Texts { .. } => self.text_len() == 0,
Self::Image { .. } => false,
}
}
/// Return length of children text.
pub fn text_len(&self) -> usize {
match self {
Self::Texts { children, .. } => {
let mut len = 0;
for text_node in children.iter() {
len = text_node.text.len().max(len);
}
len
}
Self::Image { .. } => 1,
}
}
}
#[allow(unused)]
#[derive(Debug, Clone, IntoElement, PartialEq)]
pub enum Node {
Root {
children: Vec<Node>,
},
Paragraph(Paragraph),
Heading {
level: u8,
children: Paragraph,
},
Blockquote(Paragraph),
List {
/// Only contains ListItem, others will be ignored
children: Vec<Node>,
ordered: bool,
},
ListItem {
children: Vec<Node>,
spread: bool,
/// Whether the list item is checked, if None, it's not a checkbox
checked: Option<bool>,
},
CodeBlock {
code: SharedString,
lang: Option<SharedString>,
},
Table(Table),
// <br>
Break,
Divider,
Ignore,
Unknown,
}
impl Node {
fn is_ignore(&self) -> bool {
matches!(self, Self::Ignore)
}
fn is_list_item(&self) -> bool {
matches!(self, Self::ListItem { .. })
}
/// Combine all children, omitting the empt parent nodes.
pub(super) fn compact(&self) -> Node {
match self {
Self::Root { children } => {
let children = children
.iter()
.map(|c| c.compact())
.filter(|c| !c.is_ignore())
.collect::<Vec<_>>();
if children.len() == 1 {
children.first().unwrap().compact()
} else {
self.clone()
}
}
_ => self.clone(),
}
}
}
impl RenderOnce for Paragraph {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
match self {
Self::Texts { span, children } => {
let mut text = String::new();
let mut highlights: Vec<(Range<usize>, HighlightStyle)> = vec![];
let mut links: Vec<(Range<usize>, LinkMark)> = vec![];
let mut offset = 0;
for text_node in children.into_iter() {
let text_len = text_node.text.len();
text.push_str(&text_node.text);
let mut node_highlights = vec![];
for (range, style) in text_node.marks {
let inner_range = (offset + range.start)..(offset + range.end);
let mut highlight = HighlightStyle::default();
if style.bold {
highlight.font_weight = Some(FontWeight::BOLD);
}
if style.italic {
highlight.font_style = Some(FontStyle::Italic);
}
if style.strikethrough {
highlight.strikethrough = Some(gpui::StrikethroughStyle {
thickness: gpui::px(1.),
..Default::default()
});
}
if style.code {
highlight.background_color = Some(cx.theme().accent);
}
if let Some(link_mark) = style.link {
highlight.color = Some(cx.theme().link);
highlight.underline = Some(gpui::UnderlineStyle {
thickness: gpui::px(1.),
..Default::default()
});
links.push((inner_range.clone(), link_mark));
}
node_highlights.push((inner_range, highlight));
}
highlights = gpui::combine_highlights(highlights, node_highlights).collect();
offset += text_len;
}
let text_style = window.text_style();
let element_id: ElementId = span.unwrap_or_default().into();
let styled_text = StyledText::new(text).with_highlights(&text_style, highlights);
let link_ranges = links
.iter()
.map(|(range, _)| range.clone())
.collect::<Vec<_>>();
InteractiveText::new(element_id, styled_text)
.on_click(link_ranges, {
let links = links.clone();
move |ix, _, cx| {
if let Some((_, link)) = &links.get(ix) {
cx.open_url(&link.url);
}
}
})
.into_any_element()
}
Self::Image { image, .. } => img(image.url)
.object_fit(ObjectFit::Contain)
.max_w(relative(1.))
.when_some(image.width, |this, width| this.w(width))
.into_any_element(),
}
}
}
#[derive(Default)]
struct ListState {
todo: bool,
ordered: bool,
depth: usize,
}
impl Node {
fn render_list_item(
item: Node,
ix: usize,
state: ListState,
window: &mut Window,
cx: &mut App,
) -> impl IntoElement {
match item {
Node::ListItem {
children,
spread,
checked,
} => v_flex()
.when(spread, |this| this.child(div()))
.children({
let mut items = Vec::with_capacity(children.len());
for child in children.into_iter() {
match &child {
Node::Paragraph(_) => {
items.push(
h_flex()
.items_center()
.when(!state.todo && checked.is_none(), |this| {
this.child(list_item_prefix(
ix,
state.ordered,
state.depth,
))
})
.when_some(checked, |this, checked| {
this.child(
div()
.flex()
.mr_1p5()
.size(rems(0.875))
.items_center()
.justify_center()
.rounded(cx.theme().radius.half())
.bg(cx.theme().primary)
.text_color(cx.theme().primary_foreground)
.when(checked, |this| {
this.child(
Icon::new(IconName::Check)
.size_2()
.text_xs(),
)
}),
)
})
.child(child.render_node(
Some(ListState {
depth: state.depth + 1,
ordered: state.ordered,
todo: checked.is_some(),
}),
window,
cx,
)),
);
}
Node::List { .. } => {
items.push(div().ml(rems(1.)).child(child.render_node(
Some(ListState {
depth: state.depth + 1,
ordered: state.ordered,
todo: checked.is_some(),
}),
window,
cx,
)))
}
_ => {}
}
}
items
})
.into_any_element(),
_ => div().into_any_element(),
}
}
fn render_table(item: &Node, _: &mut Window, cx: &mut App) -> impl IntoElement {
const DEFAULT_LENGTH: usize = 5;
const MAX_LENGTH: usize = 150;
let col_lens = match item {
Node::Table(table) => {
let mut col_lens = vec![];
for row in table.children.iter() {
for (ix, cell) in row.children.iter().enumerate() {
if col_lens.len() <= ix {
col_lens.push(DEFAULT_LENGTH);
}
let len = cell.children.text_len();
if len > col_lens[ix] {
col_lens[ix] = len;
}
}
}
col_lens
}
_ => vec![],
};
match item {
Node::Table(table) => div()
.id("table")
.mb(rems(1.))
.w_full()
.border_1()
.border_color(cx.theme().border)
.rounded(cx.theme().radius)
.children({
let mut rows = Vec::with_capacity(table.children.len());
for (row_ix, row) in table.children.iter().enumerate() {
rows.push(
div()
.id("row")
.w_full()
.when(row_ix < table.children.len() - 1, |this| this.border_b_1())
.border_color(cx.theme().border)
.flex()
.flex_row()
.children({
let mut cells = Vec::with_capacity(row.children.len());
for (ix, cell) in row.children.iter().enumerate() {
let len = col_lens
.get(ix)
.copied()
.unwrap_or(MAX_LENGTH)
.min(MAX_LENGTH);
cells.push(
div()
.id("cell")
.w(Length::Definite(relative(len as f32)))
.px_2()
.py_1()
.truncate()
.child(cell.children.clone()),
)
}
cells
}),
)
}
rows
})
.into_any_element(),
_ => div().into_any_element(),
}
}
fn render_node(
self,
list_state: Option<ListState>,
window: &mut Window,
cx: &mut App,
) -> impl IntoElement {
let in_list = list_state.is_some();
let mb = if in_list { rems(0.0) } else { rems(1.) };
match self {
Node::Root { children } => div().children(children).into_any_element(),
Node::Paragraph(paragraph) => div().mb(mb).child(paragraph).into_any_element(),
Node::Heading { level, children } => {
let (text_size, font_weight) = match level {
1 => (rems(2.), FontWeight::BOLD),
2 => (rems(1.5), FontWeight::SEMIBOLD),
3 => (rems(1.25), FontWeight::SEMIBOLD),
4 => (rems(1.125), FontWeight::SEMIBOLD),
5 => (rems(1.), FontWeight::SEMIBOLD),
6 => (rems(1.), FontWeight::MEDIUM),
_ => (rems(1.), FontWeight::NORMAL),
};
h_flex()
.mb(rems(0.5))
.whitespace_normal()
.text_size(text_size)
.font_weight(font_weight)
.child(children)
.into_any_element()
}
Node::Blockquote(children) => div()
.w_full()
.mb(mb)
.text_color(cx.theme().muted_foreground)
.border_l_3()
.border_color(cx.theme().secondary_active)
.px_4()
.py_1()
.child(children)
.into_any_element(),
Node::List { children, ordered } => v_flex()
.mb(mb)
.children({
let mut items = Vec::with_capacity(children.len());
let list_state = list_state.unwrap_or_default();
let mut ix = 0;
for item in children.into_iter() {
let is_item = item.is_list_item();
items.push(Self::render_list_item(
item,
ix,
ListState {
ordered,
todo: list_state.todo,
depth: list_state.depth,
},
window,
cx,
));
if is_item {
ix += 1;
}
}
items
})
.into_any_element(),
Node::CodeBlock { code, .. } => div()
.mb(mb)
.rounded(cx.theme().radius)
.bg(cx.theme().secondary)
.p_3()
.text_size(rems(0.875))
.relative()
.child(code)
.into_any_element(),
Node::Table { .. } => Self::render_table(&self, window, cx).into_any_element(),
Node::Divider => div()
.bg(cx.theme().border)
.h(px(2.))
.mb(mb)
.into_any_element(),
Node::Break => div().into_any_element(),
Node::Ignore => div().into_any_element(),
_ => {
if cfg!(debug_assertions) {
eprintln!("Unknown implementation: {:?}", self);
}
div().into_any_element()
}
}
}
}
/// Ref:
/// https://ui.shadcn.com/docs/components/typography
impl RenderOnce for Node {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
self.render_node(None, window, cx)
}
}

726
crates/ui/src/text/html.rs Normal file
View file

@ -0,0 +1,726 @@
extern crate markup5ever_rcdom as rcdom;
use std::cell::RefCell;
use std::collections::HashMap;
use std::ops::Range;
use std::rc::Rc;
use gpui::{
div, px, relative, Context, DefiniteLength, IntoElement, ParentElement as _, Render,
SharedString,
};
use html5ever::tendril::TendrilSink;
use html5ever::{local_name, parse_document, LocalName, ParseOpts};
use markup5ever_rcdom::{Node, NodeData, RcDom};
use super::element::{
self, ImageNode, InlineTextStyle, LinkMark, Paragraph, Table, TableRow, TextNode,
};
const BLOCK_ELEMENTS: [&str; 33] = [
"html",
"body",
"head",
"address",
"article",
"aside",
"blockquote",
"details",
"summary",
"dialog",
"div",
"dl",
"fieldset",
"figcaption",
"figure",
"footer",
"form",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"header",
"hr",
"main",
"nav",
"ol",
"p",
"pre",
"section",
"table",
"ul",
];
pub(super) fn parse_html(source: &str) -> Result<element::Node, std::io::Error> {
let opts = ParseOpts {
..Default::default()
};
let bytes = minify_html::minify(source.as_bytes(), &minify_html::Cfg::default());
let mut cursor = std::io::Cursor::new(bytes);
// Ref
// https://github.com/servo/html5ever/blob/main/rcdom/examples/print-rcdom.rs
let dom = parse_document(RcDom::default(), opts)
.from_utf8()
.read_from(&mut cursor)?;
let mut paragraph = Paragraph::default();
// NOTE: The outer paragraph is not used.
let node: element::Node = parse_node(&dom.document, &mut paragraph);
let node = node.compact();
Ok(node)
}
pub struct HtmlView {
text: SharedString,
parsed: bool,
node: Option<element::Node>,
}
impl HtmlView {
pub fn new(raw: impl Into<SharedString>) -> Self {
Self {
text: raw.into(),
parsed: false,
node: None,
}
}
pub fn set_text(&mut self, raw: impl Into<SharedString>, cx: &mut Context<Self>) {
self.text = raw.into();
self.parsed = false;
self.node = None;
cx.notify();
}
fn parse_if_needed(&mut self) {
if !self.parsed {
self.node = parse_html(&self.text).ok();
self.parsed = true;
}
}
}
impl Render for HtmlView {
fn render(&mut self, _: &mut gpui::Window, _: &mut Context<'_, Self>) -> impl IntoElement {
self.parse_if_needed();
if let Some(node) = &self.node {
div().child(node.clone())
} else {
div()
}
}
}
fn attr_value(attrs: &RefCell<Vec<html5ever::Attribute>>, name: LocalName) -> Option<String> {
attrs.borrow().iter().find_map(|attr| {
if attr.name.local == name {
Some(attr.value.to_string())
} else {
None
}
})
}
/// Get style properties to HashMap
/// TODO: Use cssparser to parse style attribute.
fn style_attrs(attrs: &RefCell<Vec<html5ever::Attribute>>) -> HashMap<String, String> {
let mut styles = HashMap::new();
let Some(css_text) = attr_value(attrs, local_name!("style")) else {
return styles;
};
for decl in css_text.split(';') {
for rule in decl.split(':') {
let mut parts = rule.splitn(2, ':');
if let (Some(key), Some(value)) = (parts.next(), parts.next()) {
styles.insert(
key.trim().to_lowercase().to_string(),
value.trim().to_string(),
);
}
}
}
styles
}
/// Parse length value from style attribute.
///
/// When is percentage, it will be converted to relative length.
/// Else, it will be converted to pixels.
fn value_to_length(value: &str) -> Option<DefiniteLength> {
if value.ends_with("px") {
value
.trim_end_matches("px")
.parse()
.ok()
.map(|v| px(v).into())
} else if value.ends_with("%") {
value
.trim_end_matches("%")
.parse::<f32>()
.ok()
.map(|v| relative(v / 100.))
} else {
value
.trim_end_matches("px")
.parse()
.ok()
.map(|v| px(v).into())
}
}
/// Get width, height from attributes or parse them from style attribute.
fn attr_width_height(
attrs: &RefCell<Vec<html5ever::Attribute>>,
) -> (Option<DefiniteLength>, Option<DefiniteLength>) {
let mut width = None;
let mut height = None;
if let Some(value) = attr_value(attrs, local_name!("width")) {
width = value_to_length(&value);
}
if let Some(value) = attr_value(attrs, local_name!("height")) {
height = value_to_length(&value);
}
if width.is_none() || height.is_none() {
let styles = style_attrs(attrs);
if width.is_none() {
width = styles.get("width").and_then(|v| value_to_length(&v));
}
if height.is_none() {
height = styles.get("height").and_then(|v| value_to_length(&v));
}
}
(width, height)
}
fn parse_table_row(table: &mut Table, node: &Rc<Node>) {
let mut row = TableRow::default();
let mut count = 0;
for child in node.children.borrow().iter() {
match child.data {
NodeData::Element {
ref name,
ref attrs,
..
} if name.local == local_name!("td") || name.local == local_name!("th") => {
if child.children.borrow().is_empty() {
continue;
}
count += 1;
parse_table_cell(&mut row, child, attrs);
}
_ => {}
}
}
if count > 0 {
table.children.push(row);
}
}
fn parse_table_cell(
row: &mut element::TableRow,
node: &Rc<Node>,
attrs: &RefCell<Vec<html5ever::Attribute>>,
) {
let mut paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
parse_paragraph(&mut paragraph, child);
}
let width = attr_width_height(attrs).0;
let table_cell = element::TableCell {
children: paragraph,
width,
};
row.children.push(table_cell);
}
/// Trim text but leave at least one space.
///
/// - Before: " \r\n Hello world \t "
/// - After: " Hello world "
fn trim_text(text: &str) -> String {
let mut out = String::with_capacity(text.len());
for (i, c) in text.chars().enumerate() {
if c.is_whitespace() {
if i > 0 && out.ends_with(' ') {
continue;
}
}
out.push(c);
}
out
}
fn parse_paragraph(
paragraph: &mut Paragraph,
node: &Rc<Node>,
) -> (String, Vec<(Range<usize>, InlineTextStyle)>) {
let mut text = String::new();
let mut marks = vec![];
/// Append new_text and new_marks to text and marks.
fn merge_child_text(
text: &mut String,
marks: &mut Vec<(Range<usize>, InlineTextStyle)>,
new_text: &str,
new_marks: &[(Range<usize>, InlineTextStyle)],
) {
let offset = text.len();
text.push_str(new_text);
for (range, style) in new_marks {
marks.push((range.start + offset..new_text.len() + offset, style.clone()));
}
}
match &node.data {
NodeData::Text { ref contents } => {
let part = trim_text(&contents.borrow());
text.push_str(&part);
paragraph.push_str(&text);
}
NodeData::Element { name, attrs, .. } => match name.local {
local_name!("em") | local_name!("i") => {
let mut child_paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
let (child_text, child_marks) = parse_paragraph(&mut child_paragraph, &child);
merge_child_text(&mut text, &mut marks, &child_text, &child_marks);
}
marks.push((
0..text.len(),
InlineTextStyle {
italic: true,
..Default::default()
},
));
paragraph.push(element::TextNode {
text: text.clone(),
marks: marks.clone(),
});
}
local_name!("strong") | local_name!("b") => {
let mut child_paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
let (child_text, child_marks) = parse_paragraph(&mut child_paragraph, &child);
merge_child_text(&mut text, &mut marks, &child_text, &child_marks);
}
marks.push((
0..text.len(),
InlineTextStyle {
bold: true,
..Default::default()
},
));
paragraph.push(TextNode {
text: text.clone(),
marks: marks.clone(),
});
}
local_name!("del") | local_name!("s") => {
let mut child_paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
let (child_text, child_marks) = parse_paragraph(&mut child_paragraph, &child);
merge_child_text(&mut text, &mut marks, &child_text, &child_marks);
}
marks.push((
0..text.len(),
InlineTextStyle {
strikethrough: true,
..Default::default()
},
));
paragraph.push(TextNode {
text: text.clone(),
marks: marks.clone(),
});
}
local_name!("code") => {
let mut child_paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
let (child_text, child_marks) = parse_paragraph(&mut child_paragraph, &child);
merge_child_text(&mut text, &mut marks, &child_text, &child_marks);
}
marks.push((
0..text.len(),
InlineTextStyle {
code: true,
..Default::default()
},
));
paragraph.push(TextNode {
text: text.clone(),
marks: marks.clone(),
});
}
local_name!("a") => {
let mut child_paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
let (child_text, child_marks) = parse_paragraph(&mut child_paragraph, &child);
merge_child_text(&mut text, &mut marks, &child_text, &child_marks);
}
marks.push((
0..text.len(),
InlineTextStyle {
link: Some(LinkMark {
url: attr_value(&attrs, local_name!("href")).unwrap().into(),
title: attr_value(&attrs, local_name!("title")).map(Into::into),
}),
..Default::default()
},
));
paragraph.push(TextNode {
text: text.clone(),
marks: marks.clone(),
});
}
local_name!("img") => {
let Some(src) = attr_value(attrs, local_name!("src")) else {
if cfg!(debug_assertions) {
eprintln!("[html] Image node missing src attribute");
}
return (text, marks);
};
let alt = attr_value(attrs, local_name!("alt"));
let title = attr_value(attrs, local_name!("title"));
let (width, height) = attr_width_height(attrs);
paragraph.set_image(ImageNode {
url: src.into(),
alt: alt.map(Into::into),
width,
height,
title: title.map(Into::into),
});
}
_ => {
// All unknown tags to as text
let mut child_paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
let (child_text, child_marks) = parse_paragraph(&mut child_paragraph, &child);
merge_child_text(&mut text, &mut marks, &child_text, &child_marks);
}
paragraph.push(element::TextNode {
text: text.clone(),
marks: marks.clone(),
});
}
},
_ => {
let mut child_paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
let (child_text, child_marks) = parse_paragraph(&mut child_paragraph, &child);
merge_child_text(&mut text, &mut marks, &child_text, &child_marks);
}
paragraph.push(element::TextNode {
text: text.clone(),
marks: marks.clone(),
});
}
}
(text, marks)
}
fn parse_node(node: &Rc<Node>, paragraph: &mut Paragraph) -> element::Node {
match node.data {
NodeData::Text { ref contents } => {
let text = contents.borrow().trim_start().to_string();
if text.len() > 0 {
paragraph.push_str(&text);
}
element::Node::Ignore
}
NodeData::Element {
ref name,
ref attrs,
..
} => match name.local {
local_name!("br") => element::Node::Break,
local_name!("h1")
| local_name!("h2")
| local_name!("h3")
| local_name!("h4")
| local_name!("h5")
| local_name!("h6") => {
let mut children = vec![];
if !paragraph.is_empty() {
children.push(element::Node::Paragraph(paragraph.clone()));
paragraph.clear();
}
let level = name
.local
.chars()
.last()
.unwrap_or('6')
.to_digit(10)
.unwrap_or(6) as u8;
let mut paragraph = Paragraph::default();
for child in node.children.borrow().iter() {
parse_paragraph(&mut paragraph, child);
}
let heading = element::Node::Heading {
level,
children: paragraph,
};
if children.len() > 0 {
children.push(heading);
element::Node::Root { children }
} else {
heading
}
}
local_name!("img") => {
let mut children = vec![];
if !paragraph.is_empty() {
children.push(element::Node::Paragraph(paragraph.clone()));
paragraph.clear();
}
let Some(src) = attr_value(attrs, local_name!("src")) else {
if cfg!(debug_assertions) {
eprintln!("[html] Image node missing src attribute");
}
return element::Node::Ignore;
};
let alt = attr_value(&attrs, local_name!("alt"));
let title = attr_value(&attrs, local_name!("title"));
let (width, height) = attr_width_height(&attrs);
let image = Paragraph::Image {
span: None,
image: ImageNode {
url: src.into(),
title: title.map(Into::into),
alt: alt.map(Into::into),
width,
height,
},
};
if children.len() > 0 {
children.push(element::Node::Paragraph(image));
element::Node::Root { children }
} else {
element::Node::Paragraph(image)
}
}
local_name!("ul") | local_name!("ol") => {
let mut children = vec![];
if !paragraph.is_empty() {
children.push(element::Node::Paragraph(paragraph.clone()));
paragraph.clear();
}
let ordered = name.local == local_name!("ol");
let mut list_children = vec![];
for child in node.children.borrow().iter() {
let mut child_paragraph = Paragraph::default();
list_children.push(parse_node(child, &mut child_paragraph));
}
let list = element::Node::List {
children: list_children,
ordered,
};
if children.len() > 0 {
children.push(list);
element::Node::Root { children }
} else {
list
}
}
local_name!("li") => {
let mut children = vec![];
for child in node.children.borrow().iter() {
let mut child_paragraph = Paragraph::default();
children.push(parse_node(child, &mut child_paragraph));
if child_paragraph.text_len() > 0 {
children.push(element::Node::Paragraph(child_paragraph.clone()));
child_paragraph.clear();
}
}
if !paragraph.is_empty() {
children.push(element::Node::Paragraph(paragraph.clone()));
paragraph.clear();
}
element::Node::ListItem {
children,
spread: false,
checked: None,
}
}
local_name!("table") => {
let mut children = vec![];
if !paragraph.is_empty() {
children.push(element::Node::Paragraph(paragraph.clone()));
paragraph.clear();
}
let mut table = Table::default();
for child in node.children.borrow().iter() {
match child.data {
NodeData::Element { ref name, .. }
if name.local == local_name!("tbody")
|| name.local == local_name!("thead") =>
{
for sub_child in child.children.borrow().iter() {
parse_table_row(&mut table, &sub_child);
}
}
_ => {
parse_table_row(&mut table, &child);
}
}
}
let table = element::Node::Table(table);
if children.len() > 0 {
children.push(table);
element::Node::Root { children }
} else {
table
}
}
_ => {
if BLOCK_ELEMENTS.contains(&name.local.trim()) {
let mut children: Vec<element::Node> = vec![];
// Case:
//
// Hello <p>Inner text of block element</p> World
// Insert before text as a node -- The "Hello"
if !paragraph.is_empty() {
children.push(element::Node::Paragraph(paragraph.clone()));
paragraph.clear();
}
// Inner of the block element -- The "Inner text of block element"
for child in node.children.borrow().iter() {
children.push(parse_node(child, paragraph));
}
// if !paragraph.is_empty() {
// children.push(element::Node::Paragraph(paragraph.clone()));
// paragraph.clear();
// }
if children.is_empty() {
element::Node::Ignore
} else {
element::Node::Root { children }
}
} else {
// Others to as Inline
parse_paragraph(paragraph, node);
if paragraph.is_image() {
let image = paragraph.clone();
paragraph.clear();
element::Node::Paragraph(image)
} else {
element::Node::Ignore
}
}
}
},
NodeData::Document => {
let mut children = vec![];
for child in node.children.borrow().iter() {
children.push(parse_node(child, paragraph));
}
if !paragraph.is_empty() {
children.push(element::Node::Paragraph(paragraph.clone()));
paragraph.clear();
}
element::Node::Root { children }
}
NodeData::Doctype { .. } => element::Node::Ignore,
NodeData::Comment { .. } => element::Node::Ignore,
NodeData::ProcessingInstruction { .. } => element::Node::Ignore,
}
}
#[cfg(test)]
mod tests {
use gpui::{px, relative};
use crate::text::element::{Node, Paragraph};
use super::trim_text;
#[test]
fn test_trim_text() {
assert_eq!(trim_text(" \n\tHello world \t\r "), " Hello world ",);
}
#[test]
fn test_value_to_length() {
assert_eq!(super::value_to_length("100px"), Some(px(100.).into()));
assert_eq!(super::value_to_length("100%"), Some(relative(1.)));
assert_eq!(super::value_to_length("56%"), Some(relative(0.56)));
assert_eq!(super::value_to_length("240"), Some(px(240.).into()));
}
#[test]
fn test_image() {
let html = r#"<img src="https://example.com/image.png" alt="Example" width="100" height="200" title="Example Image" />"#;
let node = super::parse_html(html).unwrap();
assert_eq!(
node,
Node::Paragraph(Paragraph::Image {
span: None,
image: super::ImageNode {
url: "https://example.com/image.png".to_string().into(),
alt: Some("Example".to_string().into()),
width: Some(px(100.).into()),
height: Some(px(200.).into()),
title: Some("Example Image".to_string().into())
}
})
);
let html = r#"<img src="https://example.com/image.png" alt="Example" style="width: 80%" title="Example Image" />"#;
let node = super::parse_html(html).unwrap();
assert_eq!(
node,
Node::Paragraph(Paragraph::Image {
span: None,
image: super::ImageNode {
url: "https://example.com/image.png".to_string().into(),
alt: Some("Example".to_string().into()),
width: Some(relative(0.8)),
height: None,
title: Some("Example Image".to_string().into())
}
})
);
}
}

395
crates/ui/src/text/markdown.rs Normal file
View file

@ -0,0 +1,395 @@
use gpui::{
div, prelude::FluentBuilder as _, Context, IntoElement, ParentElement, Render, SharedString,
Styled, Window,
};
use markdown::{
mdast::{self, Node},
ParseOptions,
};
use crate::v_flex;
use super::{
element::{self, ImageNode, InlineTextStyle, LinkMark, Paragraph, Span, Table, TableRow},
html::parse_html,
};
/// Markdown GFM renderer
///
/// This is design goal is to be able to most common Markdown (GFM) features
/// to let us to display rich text in our application.
///
/// The goal:
///
/// - For used to help message.
/// - For used to display like about page.
/// - Some general style customization (Like base text size, line-height...).
///
/// Not in goal:
///
/// - As a markdown editor.
/// - Add custom markdown syntax.
/// - Complex styles cumstomization.
pub(super) struct MarkdownView {
text: SharedString,
parsed: bool,
root: Option<Result<element::Node, markdown::message::Message>>,
}
impl MarkdownView {
pub(super) fn new(raw: impl Into<SharedString>) -> Self {
Self {
text: raw.into(),
parsed: false,
root: None,
}
}
/// Set the source of the markdown view.
pub(crate) fn set_text(&mut self, raw: impl Into<SharedString>, cx: &mut Context<Self>) {
self.text = raw.into();
self.parsed = false;
cx.notify();
}
fn parse_if_needed(&mut self) {
if self.parsed {
return;
}
self.root = Some(markdown::to_mdast(&self.text, &ParseOptions::gfm()).map(|n| n.into()));
self.parsed = true;
}
}
impl Render for MarkdownView {
fn render(&mut self, _: &mut Window, _: &mut gpui::Context<'_, Self>) -> impl IntoElement {
self.parse_if_needed();
let Some(root) = self.root.clone() else {
return div();
};
div().map(|this| match root {
Ok(node) => this.child(node),
Err(err) => this.child(
v_flex()
.gap_1()
.child("Error parsing markdown")
.child(err.to_string()),
),
})
}
}
fn parse_table_row(table: &mut Table, node: &mdast::TableRow) {
let mut row = TableRow::default();
node.children.iter().for_each(|c| {
match c {
Node::TableCell(cell) => {
parse_table_cell(&mut row, cell);
}
_ => {}
};
});
table.children.push(row);
}
fn parse_table_cell(row: &mut element::TableRow, node: &mdast::TableCell) {
let mut paragraph = Paragraph::default();
node.children.iter().for_each(|c| {
parse_paragraph(&mut paragraph, c);
});
let table_cell = element::TableCell {
children: paragraph,
..Default::default()
};
row.children.push(table_cell);
}
fn parse_paragraph(paragraph: &mut Paragraph, node: &mdast::Node) -> String {
let span = node.position().map(|pos| Span {
start: pos.start.offset,
end: pos.end.offset,
});
if let Some(span) = span {
paragraph.set_span(span);
}
let mut text = String::new();
match node {
Node::Paragraph(val) => {
val.children.iter().for_each(|c| {
text.push_str(&parse_paragraph(paragraph, c));
});
}
Node::Text(val) => {
text = val.value.clone();
paragraph.push_str(&val.value)
}
Node::Emphasis(val) => {
let mut child_paragraph = Paragraph::default();
for child in val.children.iter() {
text.push_str(&parse_paragraph(&mut child_paragraph, &child));
}
paragraph.push(element::TextNode {
text: text.clone(),
marks: vec![(
0..text.len(),
InlineTextStyle {
italic: true,
..Default::default()
},
)],
});
}
Node::Strong(val) => {
let mut child_paragraph = Paragraph::default();
for child in val.children.iter() {
text.push_str(&parse_paragraph(&mut child_paragraph, &child));
}
paragraph.push(element::TextNode {
text: text.clone(),
marks: vec![(
0..text.len(),
InlineTextStyle {
bold: true,
..Default::default()
},
)],
});
}
Node::Delete(val) => {
let mut child_paragraph = Paragraph::default();
for child in val.children.iter() {
text.push_str(&parse_paragraph(&mut child_paragraph, &child));
}
paragraph.push(element::TextNode {
text: text.clone(),
marks: vec![(
0..text.len(),
InlineTextStyle {
strikethrough: true,
..Default::default()
},
)],
});
}
Node::InlineCode(val) => {
text = val.value.clone();
paragraph.push(element::TextNode {
text: text.clone(),
marks: vec![(
0..text.len(),
InlineTextStyle {
code: true,
..Default::default()
},
)],
});
}
Node::Link(val) => {
let mut child_paragraph = Paragraph::default();
for child in val.children.iter() {
text.push_str(&parse_paragraph(&mut child_paragraph, &child));
}
paragraph.push(element::TextNode {
text: text.clone(),
marks: vec![(
0..text.len(),
InlineTextStyle {
link: Some(LinkMark {
url: val.url.clone().into(),
title: val.title.clone().map(|s| s.into()),
}),
..Default::default()
},
)],
});
}
Node::Image(raw) => {
paragraph.set_image(ImageNode {
url: raw.url.clone().into(),
title: raw.title.clone().map(|t| t.into()),
alt: Some(raw.alt.clone().into()),
..Default::default()
});
}
Node::InlineMath(raw) => {
text = raw.value.clone();
paragraph.push(element::TextNode {
text: text.clone(),
marks: vec![(
0..text.len(),
InlineTextStyle {
code: true,
..Default::default()
},
)],
});
}
Node::MdxTextExpression(raw) => {
text = raw.value.clone();
paragraph.push(element::TextNode {
text: text.clone(),
marks: vec![(0..text.len(), InlineTextStyle::default())],
});
}
Node::Html(val) => match parse_html(&val.value) {
Ok(el) => {
if el == element::Node::Break {
text.push_str("\n");
} else {
if cfg!(debug_assertions) {
eprintln!("[markdown] unsupported inline html tag: {:#?}", el);
}
}
}
Err(err) => {
if cfg!(debug_assertions) {
eprintln!("[markdown] error parsing html: {:#?}", err);
}
text.push_str(&val.value);
}
},
_ => {
if cfg!(debug_assertions) {
eprintln!("[markdown] unsupported inline node: {:#?}", node);
}
}
}
text
}
impl From<mdast::Node> for element::Node {
fn from(value: Node) -> Self {
match value {
Node::Root(val) => {
let children = val.children.into_iter().map(|c| c.into()).collect();
element::Node::Root { children }
}
Node::Paragraph(val) => {
let mut paragraph = Paragraph::default();
val.children.iter().for_each(|c| {
parse_paragraph(&mut paragraph, c);
});
element::Node::Paragraph(paragraph)
}
Node::Blockquote(val) => {
let mut paragraph = Paragraph::default();
val.children.iter().for_each(|c| {
parse_paragraph(&mut paragraph, c);
});
element::Node::Blockquote(paragraph)
}
Node::List(list) => {
let children = list.children.into_iter().map(|c| c.into()).collect();
element::Node::List {
ordered: list.ordered,
children,
}
}
Node::ListItem(val) => {
let children = val.children.into_iter().map(|c| c.into()).collect();
element::Node::ListItem {
children,
spread: val.spread,
checked: val.checked,
}
}
Node::Break(_) => element::Node::Break,
Node::Code(raw) => element::Node::CodeBlock {
code: raw.value.into(),
lang: raw.lang.map(|s| s.into()),
},
Node::Heading(val) => {
let mut paragraph = Paragraph::default();
val.children.iter().for_each(|c| {
parse_paragraph(&mut paragraph, c);
});
element::Node::Heading {
level: val.depth,
children: paragraph,
}
}
Node::Math(val) => element::Node::CodeBlock {
code: val.value.into(),
lang: Some("math".into()),
},
Node::Html(val) => match parse_html(&val.value) {
Ok(el) => el,
Err(err) => {
if cfg!(debug_assertions) {
eprintln!("[markdown] error parsing html: {:#?}", err);
}
element::Node::Paragraph(val.value.into())
}
},
Node::MdxFlowExpression(val) => element::Node::CodeBlock {
code: val.value.into(),
lang: Some("mdx".into()),
},
Node::Yaml(val) => element::Node::CodeBlock {
code: val.value.into(),
lang: Some("yaml".into()),
},
Node::Toml(val) => element::Node::CodeBlock {
code: val.value.into(),
lang: Some("toml".into()),
},
Node::MdxJsxTextElement(val) => {
println!("MdxJsxTextElement: {:#?}", val);
let mut paragraph = Paragraph::default();
val.children.iter().for_each(|c| {
parse_paragraph(&mut paragraph, c);
});
element::Node::Paragraph(paragraph)
}
Node::MdxJsxFlowElement(val) => {
println!("MdxJsxFlowElement: {:#?}", val);
let mut paragraph = Paragraph::default();
val.children.iter().for_each(|c| {
parse_paragraph(&mut paragraph, c);
});
element::Node::Paragraph(paragraph)
}
Node::ThematicBreak(_) => element::Node::Divider,
Node::Table(val) => {
let mut table = Table::default();
val.children.iter().for_each(|c| {
if let Node::TableRow(row) = c {
parse_table_row(&mut table, row);
}
});
element::Node::Table(table)
}
_ => {
if cfg!(debug_assertions) {
eprintln!("[markdown] unsupported node: {:#?}", value);
}
element::Node::Unknown
}
}
}
}
#[cfg(test)]
mod tests {
use super::MarkdownView;
#[test]
fn test_parse() {
let source = include_str!("../../../story/examples/markdown.md");
let mut renderer = MarkdownView::new(source);
renderer.parse_if_needed();
// println!("{:#?}", renderer.root);
}
}

47
crates/ui/src/text/mod.rs Normal file
View file

@ -0,0 +1,47 @@
use gpui::{App, AppContext, Entity, IntoElement, Render, SharedString};
use html::HtmlView;
use markdown::MarkdownView;
mod element;
mod html;
mod markdown;
mod utils;
#[allow(private_interfaces)]
pub enum TextView {
Markdown(Entity<MarkdownView>),
Html(Entity<HtmlView>),
}
impl TextView {
/// Create a new markdown text view.
pub fn markdown(raw: impl Into<SharedString>, cx: &mut App) -> Self {
Self::Markdown(cx.new(|_| MarkdownView::new(raw)))
}
/// Create a new html text view.
pub fn html(raw: impl Into<SharedString>, cx: &mut App) -> Self {
Self::Html(cx.new(|_| HtmlView::new(raw)))
}
/// Set the source text of the text view.
pub fn set_text(&mut self, raw: impl Into<SharedString>, cx: &mut App) {
match self {
Self::Markdown(view) => view.update(cx, |this, cx| this.set_text(raw, cx)),
Self::Html(view) => view.update(cx, |this, cx| this.set_text(raw, cx)),
}
}
}
impl Render for TextView {
fn render(
&mut self,
_: &mut gpui::Window,
_: &mut gpui::Context<'_, Self>,
) -> impl IntoElement {
match self {
Self::Markdown(view) => view.clone().into_any_element(),
Self::Html(view) => view.clone().into_any_element(),
}
}
}

61
crates/ui/src/text/utils.rs Normal file
View file

@ -0,0 +1,61 @@
const NUMBERED_PREFIXES_1: &str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const NUMBERED_PREFIXES_2: &str = "abcdefghijklmnopqrstuvwxyz";
const BULLETS: [&str; 5] = ["▪", "•", "◦", "‣", "⁃"];
/// Returns the prefix for a list item.
pub fn list_item_prefix(ix: usize, ordered: bool, depth: usize) -> String {
if ordered {
if depth == 0 {
return format!("{}. ", ix + 1);
}
if depth == 1 {
return format!(
"{}. ",
NUMBERED_PREFIXES_1
.chars()
.nth(ix % NUMBERED_PREFIXES_1.len())
.unwrap()
);
} else {
return format!(
"{}. ",
NUMBERED_PREFIXES_2
.chars()
.nth(ix % NUMBERED_PREFIXES_2.len())
.unwrap()
);
}
} else {
let depth = depth.min(BULLETS.len() - 1);
let bullet = BULLETS[depth];
return format!("{} ", bullet);
}
}
#[cfg(test)]
mod tests {
use crate::text::utils::list_item_prefix;
#[test]
fn test_list_item_prefix() {
assert_eq!(list_item_prefix(0, true, 0), "1. ");
assert_eq!(list_item_prefix(1, true, 0), "2. ");
assert_eq!(list_item_prefix(2, true, 0), "3. ");
assert_eq!(list_item_prefix(10, true, 0), "11. ");
assert_eq!(list_item_prefix(0, true, 1), "A. ");
assert_eq!(list_item_prefix(1, true, 1), "B. ");
assert_eq!(list_item_prefix(2, true, 1), "C. ");
assert_eq!(list_item_prefix(0, true, 2), "a. ");
assert_eq!(list_item_prefix(1, true, 2), "b. ");
assert_eq!(list_item_prefix(6, true, 2), "g. ");
assert_eq!(list_item_prefix(0, true, 1), "A. ");
assert_eq!(list_item_prefix(0, true, 2), "a. ");
assert_eq!(list_item_prefix(0, false, 0), "▪ ");
assert_eq!(list_item_prefix(0, false, 1), "• ");
assert_eq!(list_item_prefix(0, false, 2), "◦ ");
assert_eq!(list_item_prefix(0, false, 3), "‣ ");
assert_eq!(list_item_prefix(0, false, 4), "⁃ ");
}
}