From b4e54c914d173f700ff2ebdc27f76711d7a56fa8 Mon Sep 17 00:00:00 2001
From: Felix Ableitner <me@nutomic.com>
Date: Mon, 28 Oct 2024 11:28:16 +0100
Subject: [PATCH] Also add preview for creating article

---
 src/frontend/pages/article/create.rs | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/frontend/pages/article/create.rs b/src/frontend/pages/article/create.rs
index 7f6c351..213bfda 100644
--- a/src/frontend/pages/article/create.rs
+++ b/src/frontend/pages/article/create.rs
@@ -1,4 +1,7 @@
-use crate::{common::CreateArticleForm, frontend::app::GlobalState};
+use crate::{
+    common::CreateArticleForm,
+    frontend::{app::GlobalState, markdown::render_markdown},
+};
 use html::Textarea;
 use leptos::*;
 use leptos_router::Redirect;
@@ -14,6 +17,8 @@ pub fn CreateArticle() -> impl IntoView {
         trigger_resize: _,
     } = use_textarea_autosize(textarea);
     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 (create_response, set_create_response) = create_signal(None::<()>);
     let (create_error, set_create_error) = create_signal(None::<String>);
     let (wait_for_response, set_wait_for_response) = create_signal(false);
@@ -67,9 +72,19 @@ pub fn CreateArticle() -> impl IntoView {
                         <textarea
                             value=content
                             placeholder="Article text..."
-                            on:input=move |evt| set_content.set(event_target_value(&evt))
+                            on:input=move |evt| {
+                                let val = event_target_value(&evt);
+                                set_preview.set(render_markdown(&val));
+                                set_content.set(val);
+                            }
                             node_ref=textarea
                         ></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