Proper resizing of editor (ref #51)

Cargo.lock

@@ -520,6 +520,15 @@ dependencies = [
  "inout",
 ]
 
+[[package]]
+name = "codee"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d3ad3122b0001c7f140cf4d605ef9a9e2c24d96ab0b4fb4347b76de2425f445"
+dependencies = [
+ "thiserror",
+]
+
 [[package]]
 name = "collection_literals"
 version = "1.0.1"
@@ -864,6 +873,18 @@ dependencies = [
  "parking_lot_core",
 ]
 
+[[package]]
+name = "default-struct-builder"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e0df63c21a4383f94bd5388564829423f35c316aed85dc4f8427aded372c7c0d"
+dependencies = [
+ "darling 0.20.10",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.51",
+]
+
 [[package]]
 name = "der"
 version = "0.7.9"
@@ -1067,6 +1088,17 @@ dependencies = [
  "crypto-common",
 ]
 
+[[package]]
+name = "displaydoc"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.51",
+]
+
 [[package]]
 name = "dlv-list"
 version = "0.5.2"
@@ -1456,6 +1488,18 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-timers"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "gloo-utils"
 version = "0.2.0"
@@ -1740,6 +1784,7 @@ dependencies = [
  "jsonwebtoken",
  "katex",
  "leptos",
+ "leptos-use",
  "leptos_axum",
  "leptos_meta",
  "leptos_router",
@@ -1973,6 +2018,29 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "leptos-use"
+version = "0.13.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f918fb333772f6401d671f996689e7258e3bee31e4108d5e142566897c678a50"
+dependencies = [
+ "cfg-if",
+ "codee",
+ "cookie",
+ "default-struct-builder",
+ "futures-util",
+ "gloo-timers",
+ "js-sys",
+ "lazy_static",
+ "leptos",
+ "paste",
+ "thiserror",
+ "unic-langid",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "leptos_axum"
 version = "0.6.15"
@@ -4022,6 +4090,15 @@ dependencies = [
  "crunchy",
 ]
 
+[[package]]
+name = "tinystr"
+version = "0.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9117f5d4db391c1cf6927e7bea3db74b9a1c1add8f7eda9ffd5364f40f57b82f"
+dependencies = [
+ "displaydoc",
+]
+
 [[package]]
 name = "tinyvec"
 version = "1.6.0"
@@ -4277,6 +4354,24 @@ version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ed646292ffc8188ef8ea4d1e0e0150fb15a5c2e12ad9b8fc191ae7a8a7f3c4b9"
 
+[[package]]
+name = "unic-langid"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "23dd9d1e72a73b25e07123a80776aae3e7b0ec461ef94f9151eed6ec88005a44"
+dependencies = [
+ "unic-langid-impl",
+]
+
+[[package]]
+name = "unic-langid-impl"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0a5422c1f65949306c99240b81de9f3f15929f5a8bfe05bb44b034cc8bf593e5"
+dependencies = [
+ "tinystr",
+]
+
 [[package]]
 name = "unicase"
 version = "2.7.0"

Cargo.toml

@@ -18,6 +18,8 @@ ssr = [
   "activitypub_federation",
   "jsonwebtoken",
   "katex/duktape",
+  "leptos/ssr",
+  "leptos-use/ssr"
 ]
 csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr", "katex/wasm-js"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
@@ -86,6 +88,7 @@ markdown-it-heading-anchors = "0.3.0"
 markdown-it-footnote = "0.2.0"
 markdown-it-sub = "1.0.0"
 markdown-it-sup = "1.0.0"
+leptos-use = "0.13.6"
 
 [dev-dependencies]
 pretty_assertions = "1.4.1"

src/frontend/pages/article/create.rs

@@ -1,11 +1,18 @@
 use crate::{common::CreateArticleForm, frontend::app::GlobalState};
+use html::Textarea;
 use leptos::*;
 use leptos_router::Redirect;
+use leptos_use::{use_textarea_autosize, UseTextareaAutosizeReturn};
 
 #[component]
 pub fn CreateArticle() -> impl IntoView {
     let (title, set_title) = create_signal(String::new());
-    let (text, set_text) = create_signal(String::new());
+    let textarea = create_node_ref::<Textarea>();
+    let UseTextareaAutosizeReturn {
+        content,
+        set_content,
+        trigger_resize: _,
+    } = use_textarea_autosize(textarea);
     let (summary, set_summary) = create_signal(String::new());
     let (create_response, set_create_response) = create_signal(None::<()>);
     let (create_error, set_create_error) = create_signal(None::<String>);
@@ -58,11 +65,10 @@ pub fn CreateArticle() -> impl IntoView {
                         />
 
                         <textarea
+                            value=content
                             placeholder="Article text..."
-                            on:keyup=move |ev| {
+                            on:input=move |evt| set_content.set(event_target_value(&evt))
-                                let val = event_target_value(&ev);
+                            node_ref=textarea
-                                set_text.update(|p| *p = val);
-                            }
                         ></textarea>
                         <div>
                             <a href="https://commonmark.org/help/" target="blank_">
@@ -90,7 +96,7 @@ pub fn CreateArticle() -> impl IntoView {
                         <button
                             prop:disabled=move || button_is_disabled.get()
                             on:click=move |_| {
-                                submit_action.dispatch((title.get(), text.get(), summary.get()))
+                                submit_action.dispatch((title.get(), content.get(), summary.get()))
                             }
                         >
                             Submit

src/frontend/pages/article/edit.rs

@@ -8,8 +8,10 @@ use crate::{
         pages::article_resource,
     },
 };
+use html::Textarea;
 use leptos::*;
 use leptos_router::use_params_map;
+use leptos_use::{use_textarea_autosize, UseTextareaAutosizeReturn};
 
 #[derive(Clone, PartialEq)]
 enum EditResponse {
@@ -45,7 +47,12 @@ pub fn EditArticle() -> impl IntoView {
         .dispatch(conflict_id);
     }
 
-    let (text, set_text) = create_signal(String::new());
+    let textarea = create_node_ref::<Textarea>();
+    let UseTextareaAutosizeReturn {
+        content,
+        set_content,
+        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());
@@ -119,10 +126,9 @@ pub fn EditArticle() -> impl IntoView {
                                         article.article.text = conflict.three_way_merge;
                                         set_summary.set(conflict.summary);
                                     }
-                                    set_text.set(article.article.text.clone());
+                                    set_content.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! {
                                         // set initial text, otherwise submit with no changes results in empty text
                                         <div id="edit-article" class="item-view">
@@ -136,13 +142,14 @@ pub fn EditArticle() -> impl IntoView {
                                             }}
 
                                             <textarea
+                                                value=content
                                                 id="edit-article-textarea"
-                                                rows=rows
+                                                on:input=move |evt| {
-                                                on:keyup=move |ev| {
+                                                    let val = event_target_value(&evt);
-                                                    let val = event_target_value(&ev);
                                                     set_preview.set(render_markdown(&val));
-                                                    set_text.set(val);
+                                                    set_content.set(val);
                                                 }
+                                                node_ref=textarea
                                             >
                                                 {article.article.text.clone()}
                                             </textarea>
@@ -174,7 +181,7 @@ pub fn EditArticle() -> impl IntoView {
                                                     on:click=move |_| {
                                                         submit_action
                                                             .dispatch((
-                                                                text.get(),
+                                                                content.get(),
                                                                 summary.get(),
                                                                 article_.clone(),
                                                                 edit_response.get(),