mirror of
https://github.com/Nutomic/ibis.git
synced 2024-11-22 08:31:09 +00:00
Proper resizing of editor (ref #51)
This commit is contained in:
parent
f8948c2e20
commit
ef7d29d2ee
4 changed files with 125 additions and 14 deletions
95
Cargo.lock
generated
95
Cargo.lock
generated
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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(),
|
||||
|
|
Loading…
Reference in a new issue