Create EditorView for common article edit/create code

src/frontend/components/editor.rs

@@ -0,0 +1,38 @@
+use crate::frontend::markdown::render_markdown;
+use html::Textarea;
+use leptos::*;
+
+#[component]
+pub fn EditorView(
+    // this param gives a false warning about being unused, ignore that
+    #[allow(unused)]
+    textarea_ref: NodeRef<Textarea>,
+    content: Signal<String>,
+    set_content: WriteSignal<String>,
+) -> impl IntoView {
+    let (preview, set_preview) = create_signal(render_markdown(&content.get()));
+    let (show_preview, set_show_preview) = create_signal(false);
+
+    view! {
+        <textarea
+            value=content
+            placeholder="Article text..."
+            on:input=move |evt| {
+                let val = event_target_value(&evt);
+                set_preview.set(render_markdown(&val));
+                set_content.set(val);
+            }
+            node_ref=textarea_ref
+        >{content.get()}</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
+            </a>
+            " formatting is supported"
+        </div>
+    }
+}

src/frontend/components/mod.rs

@@ -1,4 +1,5 @@
 pub mod article_nav;
 pub mod credentials;
+pub mod editor;
 pub mod instance_follow_button;
 pub mod nav;

src/frontend/pages/article/create.rs

@@ -1,6 +1,6 @@
 use crate::{
     common::CreateArticleForm,
-    frontend::{app::GlobalState, markdown::render_markdown},
+    frontend::{app::GlobalState, components::editor::EditorView},
 };
 use html::Textarea;
 use leptos::*;
@@ -10,15 +10,13 @@ use leptos_use::{use_textarea_autosize, UseTextareaAutosizeReturn};
 #[component]
 pub fn CreateArticle() -> impl IntoView {
     let (title, set_title) = create_signal(String::new());
-    let textarea = create_node_ref::<Textarea>();
+    let textarea_ref = create_node_ref::<Textarea>();
     let UseTextareaAutosizeReturn {
         content,
         set_content,
         trigger_resize: _,
-    } = use_textarea_autosize(textarea);
+    } = use_textarea_autosize(textarea_ref);
     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);
@@ -69,28 +67,8 @@ pub fn CreateArticle() -> impl IntoView {
                             }
                         />
 
-                        <textarea
+                        <EditorView textarea_ref content set_content />
-                            value=content
+                        
-                            placeholder="Article text..."
-                            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
-                            </a>
-                            " formatting is supported"
-                        </div>
                         {move || {
                             create_error
                                 .get()

src/frontend/pages/article/edit.rs

@@ -3,8 +3,7 @@ use crate::{
     frontend::{
         app::GlobalState,
         article_title,
-        components::article_nav::ArticleNav,
+        components::{article_nav::ArticleNav, editor::EditorView},
-        markdown::render_markdown,
         pages::article_resource,
     },
 };
@@ -28,7 +27,7 @@ pub fn EditArticle() -> impl IntoView {
     let (edit_response, set_edit_response) = create_signal(EditResponse::None);
     let (edit_error, set_edit_error) = create_signal(None::<String>);
 
-    let conflict_id = move || use_params_map().get().get("conflict_id").cloned();
+    let conflict_id = move || use_params_map().get_untracked().get("conflict_id").cloned();
     if let Some(conflict_id) = conflict_id() {
         create_action(move |conflict_id: &String| {
             let conflict_id: i32 = conflict_id.parse().unwrap();
@@ -47,15 +46,13 @@ pub fn EditArticle() -> impl IntoView {
         .dispatch(conflict_id);
     }
 
-    let textarea = create_node_ref::<Textarea>();
+    let textarea_ref = create_node_ref::<Textarea>();
     let UseTextareaAutosizeReturn {
         content,
         set_content,
         trigger_resize: _,
-    } = use_textarea_autosize(textarea);
+    } = use_textarea_autosize(textarea_ref);
     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());
@@ -127,7 +124,6 @@ pub fn EditArticle() -> impl IntoView {
                                         set_summary.set(conflict.summary);
                                     }
                                     set_content.set(article.article.text.clone());
-                                    set_preview.set(render_markdown(&article.article.text));
                                     let article_ = article.clone();
                                     view! {
                                         // set initial text, otherwise submit with no changes results in empty text
@@ -141,30 +137,8 @@ pub fn EditArticle() -> impl IntoView {
                                                     })
                                             }}
 
-                                            <textarea
+                                            <EditorView textarea_ref content set_content />
-                                                value=content
+
-                                                id="edit-article-textarea"
-                                                on:input=move |evt| {
-                                                    let val = event_target_value(&evt);
-                                                    set_preview.set(render_markdown(&val));
-                                                    set_content.set(val);
-                                                }
-                                                node_ref=textarea
-                                            >
-                                                {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
-                                                </a>
-                                                " formatting is supported"
-                                            </div>
                                             <div class="inputs">
                                                 <input
                                                     type="text"