nutomic/ibis
1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-11-25 10:31:09 +00:00
Code Projects Releases Packages Activity

Reactive editor with side by side preview (fixes #69)

Browse source
This commit is contained in:
Felix Ableitner 2024-11-06 11:01:00 +01:00
parent b0f12a6908
commit 1093cbf67e
3 changed files with 40 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/frontend/components/editor.rs
View file

@ -13,11 +13,12 @@ pub fn EditorView(
let (show_preview, set_show_preview) = create_signal(false); let (show_preview, set_show_preview) = create_signal(false);
view! { view! {
<div class="my-4"> <div>
<div class="my-4 w-full flex max-sm:flex-col">
<textarea <textarea
prop:value=content prop:value=content
placeholder="Article text..." placeholder="Article text..."
class="textarea textarea-primary min-w-full min-h-80 resize-none text-base" class="grow textarea textarea-primary min-h-80 resize-none text-base text-base"
on:input=move |evt| { on:input=move |evt| {
let val = event_target_value(&evt); let val = event_target_value(&evt);
set_preview.set(render_markdown(&val)); set_preview.set(render_markdown(&val));
@ -25,16 +26,22 @@ pub fn EditorView(
} }
node_ref=textarea_ref node_ref=textarea_ref
></textarea> ></textarea>
<Show when=move || { show_preview.get() }>
<div class="divider md:hidden"></div>
<div
class="prose prose-slate basis-6/12 md:ms-4 text-base py-2 max-sm:px-2"
inner_html=move || preview.get()
></div>
</Show>
</div>
<div class="flex h-min items-center mb-4">
<button <button
class="btn btn-secondary my-4" class="btn btn-secondary"
on:click=move |_| { set_show_preview.update(|s| *s = !*s) } on:click=move |_| { set_show_preview.update(|s| *s = !*s) }
> >
Preview Preview
</button> </button>
<Show when=move || { show_preview.get() }> <p class="mx-4">
<div class="prose prose-slate" inner_html=move || preview.get()></div>
</Show>
<div>
<a <a
class="link link-secondary" class="link link-secondary"
href="https://ibis.wiki/article/Markdown_Guide" href="https://ibis.wiki/article/Markdown_Guide"
@ -43,6 +50,7 @@ pub fn EditorView(
Markdown Markdown
</a> </a>
" formatting is supported" " formatting is supported"
</p>
</div> </div>
</div> </div>
} }

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

@ -80,7 +80,7 @@ pub fn CreateArticle() -> impl IntoView {
<div class="flex flex-row"> <div class="flex flex-row">
<input <input
class="input input-primary grow mr-2" class="input input-primary grow mr-4"
type="text" type="text"
placeholder="Edit summary" placeholder="Edit summary"
on:keyup=move |ev| { on:keyup=move |ev| {

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

@ -140,7 +140,7 @@ pub fn EditArticle() -> impl IntoView {
<div class="flex flex-row mr-2"> <div class="flex flex-row mr-2">
<input <input
type="text" type="text"
class="input input-secondary grow" class="input input-primary grow me-4"
placeholder="Edit summary" placeholder="Edit summary"
value=summary.get_untracked() value=summary.get_untracked()
on:keyup=move |ev| { on:keyup=move |ev| {
@ -150,7 +150,7 @@ pub fn EditArticle() -> impl IntoView {
/> />
<button <button
class="btn btn-secondary" class="btn btn-primary"
prop:disabled=move || button_is_disabled.get() prop:disabled=move || button_is_disabled.get()
on:click=move |_| { on:click=move |_| {
submit_action submit_action