From 1093cbf67e1a56b476ce88fe880617e103b18e79 Mon Sep 17 00:00:00 2001
From: Felix Ableitner <me@nutomic.com>
Date: Wed, 6 Nov 2024 11:01:00 +0100
Subject: [PATCH] Reactive editor with side by side preview (fixes #69)

---
 src/frontend/components/editor.rs    | 66 ++++++++++++++++------------
 src/frontend/pages/article/create.rs |  2 +-
 src/frontend/pages/article/edit.rs   |  4 +-
 3 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/frontend/components/editor.rs b/src/frontend/components/editor.rs
index ff55cdf..210d378 100644
--- a/src/frontend/components/editor.rs
+++ b/src/frontend/components/editor.rs
@@ -13,36 +13,44 @@ pub fn EditorView(
     let (show_preview, set_show_preview) = create_signal(false);
 
     view! {
-        <div class="my-4">
-            <textarea
-                prop:value=content
-                placeholder="Article text..."
-                class="textarea textarea-primary min-w-full min-h-80 resize-none text-base"
-                on:input=move |evt| {
-                    let val = event_target_value(&evt);
-                    set_preview.set(render_markdown(&val));
-                    set_content.set(val);
-                }
-                node_ref=textarea_ref
-            ></textarea>
-            <button
-                class="btn btn-secondary my-4"
-                on:click=move |_| { set_show_preview.update(|s| *s = !*s) }
-            >
-                Preview
-            </button>
-            <Show when=move || { show_preview.get() }>
-                <div class="prose prose-slate" inner_html=move || preview.get()></div>
-            </Show>
-            <div>
-                <a
-                    class="link link-secondary"
-                    href="https://ibis.wiki/article/Markdown_Guide"
-                    target="blank_"
+        <div>
+            <div class="my-4 w-full flex max-sm:flex-col">
+                <textarea
+                    prop:value=content
+                    placeholder="Article text..."
+                    class="grow textarea textarea-primary min-h-80 resize-none text-base text-base"
+                    on:input=move |evt| {
+                        let val = event_target_value(&evt);
+                        set_preview.set(render_markdown(&val));
+                        set_content.set(val);
+                    }
+                    node_ref=textarea_ref
+                ></textarea>
+                <Show when=move || { show_preview.get() }>
+                    <div class="divider md:hidden"></div>
+                    <div
+                        class="prose prose-slate basis-6/12 md:ms-4 text-base py-2 max-sm:px-2"
+                        inner_html=move || preview.get()
+                    ></div>
+                </Show>
+            </div>
+            <div class="flex h-min items-center mb-4">
+                <button
+                    class="btn btn-secondary"
+                    on:click=move |_| { set_show_preview.update(|s| *s = !*s) }
                 >
-                    Markdown
-                </a>
-                " formatting is supported"
+                    Preview
+                </button>
+                <p class="mx-4">
+                    <a
+                        class="link link-secondary"
+                        href="https://ibis.wiki/article/Markdown_Guide"
+                        target="blank_"
+                    >
+                        Markdown
+                    </a>
+                    " formatting is supported"
+                </p>
             </div>
         </div>
     }
diff --git a/src/frontend/pages/article/create.rs b/src/frontend/pages/article/create.rs
index d0a650c..1e66ebe 100644
--- a/src/frontend/pages/article/create.rs
+++ b/src/frontend/pages/article/create.rs
@@ -80,7 +80,7 @@ pub fn CreateArticle() -> impl IntoView {
 
                         <div class="flex flex-row">
                             <input
-                                class="input input-primary grow mr-2"
+                                class="input input-primary grow mr-4"
                                 type="text"
                                 placeholder="Edit summary"
                                 on:keyup=move |ev| {
diff --git a/src/frontend/pages/article/edit.rs b/src/frontend/pages/article/edit.rs
index 2e62872..aeb1847 100644
--- a/src/frontend/pages/article/edit.rs
+++ b/src/frontend/pages/article/edit.rs
@@ -140,7 +140,7 @@ pub fn EditArticle() -> impl IntoView {
                                             <div class="flex flex-row mr-2">
                                                 <input
                                                     type="text"
-                                                    class="input input-secondary grow"
+                                                    class="input input-primary grow me-4"
                                                     placeholder="Edit summary"
                                                     value=summary.get_untracked()
                                                     on:keyup=move |ev| {
@@ -150,7 +150,7 @@ pub fn EditArticle() -> impl IntoView {
                                                 />
 
                                                 <button
-                                                    class="btn btn-secondary"
+                                                    class="btn btn-primary"
                                                     prop:disabled=move || button_is_disabled.get()
                                                     on:click=move |_| {
                                                         submit_action