1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-11-22 08:21:09 +00:00

Proper resizing of editor (ref #51)

This commit is contained in:
Felix Ableitner 2024-10-28 11:25:33 +01:00
parent f8948c2e20
commit ef7d29d2ee
4 changed files with 125 additions and 14 deletions

95
Cargo.lock generated
View file

@ -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"

View file

@ -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"

View file

@ -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| {
let val = event_target_value(&ev);
set_text.update(|p| *p = val);
}
on:input=move |evt| set_content.set(event_target_value(&evt))
node_ref=textarea
></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

View file

@ -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:keyup=move |ev| {
let val = event_target_value(&ev);
on:input=move |evt| {
let val = event_target_value(&evt);
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(),