From 0b5b60fc9c426637570c988ae6c3502beaad16b3 Mon Sep 17 00:00:00 2001
From: Felix Ableitner <me@nutomic.com>
Date: Tue, 15 Oct 2024 12:43:31 +0200
Subject: [PATCH] Add live preview for edits (fixes #54)

---
 src/frontend/markdown.rs           |  8 +++++++-
 src/frontend/pages/article/edit.rs | 13 ++++++++++++-
 src/frontend/pages/article/read.rs | 31 +++++++++++++-----------------
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/frontend/markdown.rs b/src/frontend/markdown.rs
index 6e62e25..a350682 100644
--- a/src/frontend/markdown.rs
+++ b/src/frontend/markdown.rs
@@ -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);
diff --git a/src/frontend/pages/article/edit.rs b/src/frontend/pages/article/edit.rs
index f75d7c4..bada188 100644
--- a/src/frontend/pages/article/edit.rs
+++ b/src/frontend/pages/article/edit.rs
@@ -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
diff --git a/src/frontend/pages/article/read.rs b/src/frontend/pages/article/read.rs
index fc65eff..4a86d78 100644
--- a/src/frontend/pages/article/read.rs
+++ b/src/frontend/pages/article/read.rs
@@ -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>
     }