Markdown editor

use hydroxy_leptos::markdown_editor::MarkdownEditor;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (notes, set_notes) = signal(String::from(
        "## Standup\n\nShipped the **export** fix. Next: _pricing_ page.\n\n- [x] Review PR\n- [ ] Write release notes",
    ));

    view! {
        <div style="display: grid; gap: var(--space-4); max-width: 560px;">
            <MarkdownEditor
                label="Notes"
                value=notes
                on_input=move |v| set_notes.set(v)
                placeholder="Write in markdown"
            />
            <p style="margin: 0; font: var(--text-xs); color: var(--text-3);">
                {move || format!("{} characters", notes.get().chars().count())}
            </p>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::markdown_editor::MarkdownEditor;

#[component]
pub fn MarkdownEditorDemo() -> Element {
    let mut notes = use_signal(|| {
        String::from(
            "## Standup\n\nShipped the **export** fix. Next: _pricing_ page.\n\n- [x] Review PR\n- [ ] Write release notes",
        )
    });

    rsx! {
        div { style: "display: grid; gap: var(--space-4); max-width: 560px;",
            MarkdownEditor {
                label: "Notes",
                value: notes(),
                on_input: move |v| notes.set(v),
                placeholder: "Write in markdown",
            }
            p { style: "margin: 0; font: var(--text-xs); color: var(--text-3);",
                "{notes().chars().count()} characters"
            }
        }
    }
}