nutomic/ibis
1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-12-23 23:21:23 +00:00
Code Projects Releases Packages Activity

Create EditorView for common article edit/create code

Browse source
This commit is contained in:
Felix Ableitner 2024-10-30 11:23:08 +01:00
parent 71e9db9935
commit d33749aa15
4 changed files with 50 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/frontend/components/editor.rs Normal file
View file

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

1
src/frontend/components/mod.rs
View file

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

32
src/frontend/pages/article/create.rs
View file

@ -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
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>
<EditorView textarea_ref content set_content />
{move || {
create_error
.get()

38
src/frontend/pages/article/edit.rs
View file

@ -3,8 +3,7 @@ use crate::{
frontend::{
app::GlobalState,
article_title,
components::article_nav::ArticleNav,
markdown::render_markdown,
components::{article_nav::ArticleNav, editor::EditorView},
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
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>
<EditorView textarea_ref content set_content />
<div class="inputs">
<input
type="text"