dioxus-code-editor 0.0.1

Syntax-highlighted code editor component for Dioxus.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

use dioxus::prelude::*;
use dioxus_code::Theme;
use dioxus_code_editor::CodeEditor;

const DEMO_CSS: Asset = asset!("/assets/demo.css");

const STARTER: &str = r#"pub fn luminance(rgb: (u8, u8, u8)) -> f32 {
    let (r, g, b) = rgb;
    0.2126 * r as f32 + 0.7152 * g as f32 + 0.0722 * b as f32
}
"#;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let mut source = use_signal(|| STARTER.to_string());

    rsx! {
        document::Stylesheet { href: DEMO_CSS }
        main { class: "shell",
            section { class: "toolbar",
                h1 { "Code editor component" }
                span { "rust" }
            }
            CodeEditor {
                value: source(),
                language: "rust",
                theme: Theme::TOKYO_NIGHT,
                oninput: move |value| source.set(value),
            }
        }
    }
}