nutomic/ibis
1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-12-23 18:21:24 +00:00
Code Projects Releases Packages Activity

Add live preview for edits (fixes #54)

Browse source
This commit is contained in:
Felix Ableitner 2024-10-15 12:43:31 +02:00
parent d352a33c7a
commit 0b5b60fc9c
3 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/markdown.rs
View file

@ -6,8 +6,14 @@ use markdown_it::{
NodeValue,
Renderer,
};
use once_cell::sync::OnceCell;
pub fn markdown_parser() -> MarkdownIt {
pub fn render_markdown(text: &str) -> String {
static INSTANCE: OnceCell<MarkdownIt> = OnceCell::new();
INSTANCE.get_or_init(markdown_parser).parse(text).render()
}
fn markdown_parser() -> MarkdownIt {
let mut parser = MarkdownIt::new();
markdown_it::plugins::cmark::add(&mut parser);
markdown_it::plugins::extra::linkify::add(&mut parser);

13
src/frontend/pages/article/edit.rs
View file

@ -4,6 +4,7 @@ use crate::{
app::GlobalState,
article_title,
components::article_nav::ArticleNav,
markdown::render_markdown,
pages::article_resource,
},
};
@ -46,6 +47,8 @@ pub fn EditArticle() -> impl IntoView {
let (text, set_text) = create_signal(String::new());
let (summary, set_summary) = create_signal(String::new());
let (show_preview, set_show_preview) = create_signal(false);
let (preview, set_preview) = create_signal(String::new());
let (wait_for_response, set_wait_for_response) = create_signal(false);
let button_is_disabled =
Signal::derive(move || wait_for_response.get() || summary.get().is_empty());
@ -117,6 +120,7 @@ pub fn EditArticle() -> impl IntoView {
set_summary.set(conflict.summary);
}
set_text.set(article.article.text.clone());
set_preview.set(render_markdown(&article.article.text));
let article_ = article.clone();
let rows = article.article.text.lines().count() + 1;
view! {
@ -136,11 +140,18 @@ pub fn EditArticle() -> impl IntoView {
rows=rows
on:keyup=move |ev| {
let val = event_target_value(&ev);
set_text.update(|p| *p = val);
set_preview.set(render_markdown(&val));
set_text.set(val);
}
>
{article.article.text.clone()}
</textarea>
<button on:click=move |_| {
set_show_preview.update(|s| *s = !*s)
}>Preview</button>
<Show when=move || { show_preview.get() }>
<div id="preview" inner_html=move || preview.get()></div>
</Show>
<div>
<a href="https://commonmark.org/help/" target="blank_">
Markdown

31
src/frontend/pages/article/read.rs
View file

@ -1,7 +1,7 @@
use crate::frontend::{
article_title,
components::article_nav::ArticleNav,
markdown::markdown_parser,
markdown::render_markdown,
pages::article_resource,
};
use leptos::*;
@ -16,23 +16,18 @@ pub fn ReadArticle() -> impl IntoView {
view! { "Loading..." }
}>
{
let parser = markdown_parser();
move || {
article
.get()
.map(|article| {
view! {
<div class="item-view">
<h1>{article_title(&article.article)}</h1>
<div inner_html=parser
.parse(&article.article.text)
.render()></div>
</div>
}
})
}
}
{move || {
article
.get()
.map(|article| {
view! {
<div class="item-view">
<h1>{article_title(&article.article)}</h1>
<div inner_html=render_markdown(&article.article.text)></div>
</div>
}
})
}}
</Suspense>
}