atproto blogging
nonbinary.computer
1//! Editor toolbar component with formatting buttons.
2
3use weaver_editor_core::FormatAction;
4use super::image_upload::{ImageUploadButton, UploadedImage};
5use dioxus::prelude::*;
6
7/// Editor toolbar with formatting buttons.
8///
9/// Provides buttons for common markdown formatting operations.
10#[component]
11pub fn EditorToolbar(
12 on_format: EventHandler<FormatAction>,
13 on_image: EventHandler<UploadedImage>,
14) -> Element {
15 rsx! {
16 div {
17 class: "editor-toolbar",
18 role: "toolbar",
19 aria_label: "Text formatting",
20 aria_orientation: "vertical",
21 button {
22 class: "toolbar-button",
23 title: "Bold (Ctrl+B)",
24 aria_label: "Bold (Ctrl+B)",
25 onclick: move |_| on_format.call(FormatAction::Bold),
26 "B"
27 }
28 button {
29 class: "toolbar-button",
30 title: "Italic (Ctrl+I)",
31 aria_label: "Italic (Ctrl+I)",
32 onclick: move |_| on_format.call(FormatAction::Italic),
33 "I"
34 }
35 button {
36 class: "toolbar-button",
37 title: "Strikethrough",
38 aria_label: "Strikethrough",
39 onclick: move |_| on_format.call(FormatAction::Strikethrough),
40 "S"
41 }
42 button {
43 class: "toolbar-button",
44 title: "Code",
45 aria_label: "Code",
46 onclick: move |_| on_format.call(FormatAction::Code),
47 "<>"
48 }
49
50 span { class: "toolbar-separator" }
51
52 button {
53 class: "toolbar-button",
54 title: "Heading 1",
55 aria_label: "Heading 1",
56 onclick: move |_| on_format.call(FormatAction::Heading(1)),
57 "H1"
58 }
59 button {
60 class: "toolbar-button",
61 title: "Heading 2",
62 aria_label: "Heading 2",
63 onclick: move |_| on_format.call(FormatAction::Heading(2)),
64 "H2"
65 }
66 button {
67 class: "toolbar-button",
68 title: "Heading 3",
69 aria_label: "Heading 3",
70 onclick: move |_| on_format.call(FormatAction::Heading(3)),
71 "H3"
72 }
73
74 span { class: "toolbar-separator" }
75
76 button {
77 class: "toolbar-button",
78 title: "Bullet List",
79 aria_label: "Bullet List",
80 onclick: move |_| on_format.call(FormatAction::BulletList),
81 "•"
82 }
83 button {
84 class: "toolbar-button",
85 title: "Numbered List",
86 aria_label: "Numbered List",
87 onclick: move |_| on_format.call(FormatAction::NumberedList),
88 "1."
89 }
90 button {
91 class: "toolbar-button",
92 title: "Quote",
93 aria_label: "Quote",
94 onclick: move |_| on_format.call(FormatAction::Quote),
95 "❝"
96 }
97
98 span { class: "toolbar-separator" }
99
100 button {
101 class: "toolbar-button",
102 title: "Link",
103 aria_label: "Link",
104 onclick: move |_| on_format.call(FormatAction::Link),
105 "🔗"
106 }
107 ImageUploadButton {
108 on_image_selected: move |img| on_image.call(img),
109 }
110 }
111 }
112}