Struct EditorProps 

pub struct EditorProps {

    pub value: Signal<String>,
    pub on_change: Option<Callback<String>>,
    pub placeholder: Option<String>,
    pub language: Option<String>,
    pub read_only: bool,
    pub show_line_numbers: bool,
    pub word_wrap: bool,
    pub tab_size: usize,
    pub font_size: f32,
    pub class: Option<String>,
    pub min_height: Option<String>,
    pub max_height: Option<String>,
    pub id: Option<String>,
    pub on_focus: Option<Callback<()>>,
    pub on_blur: Option<Callback<()>>,
    pub on_cursor_change: Option<Callback<(usize, usize)>>,
    pub on_selection_change: Option<Callback<Option<String>>>,
    pub autofocus: bool,
    pub match_brackets: bool,
    pub highlight_current_line: bool,
}

Available on crate feature editor only.

Props for the Editor component.

A production-ready text editor component.

The Editor provides a full-featured text editing experience with:

• Syntax highlighting (with syntax-highlighting feature)
• Line numbers
• Find and replace (with find-replace feature)
• Undo/redo
• Multiple cursors (planned)
• Code folding (with folding feature)

Example

use leptos::prelude::*;
use longcipher_leptos_components::editor::Editor;

#[component]
fn MyEditor() -> impl IntoView {
    let (content, set_content) = signal(String::new());

    view! {
        <Editor
            value=content
            on_change=move |v| set_content.set(v)
            language="rust"
            show_line_numbers=true
        />
    }
}

Styling

The editor uses CSS custom properties for theming. Override these in your CSS:

.leptos-editor {
    --editor-bg: #1e1e1e;
    --editor-fg: #d4d4d4;
    --editor-line-number-fg: #858585;
    --editor-selection-bg: #264f78;
    --editor-cursor: #aeafad;
}

Required Props

• value: impl Into<Signal<String>>
  • The current value of the editor (controlled)

Optional Props

• on_change: impl Into<Callback<String>>
  • Callback when the value changes
• placeholder: impl Into<String>
  • Placeholder text shown when editor is empty
• language: impl Into<String>
  • Programming language for syntax highlighting (e.g., “rust”, “javascript”)
• read_only: bool
  • Whether the editor is read-only
• show_line_numbers: bool
  • Whether to show line numbers
• word_wrap: bool
  • Whether word wrap is enabled
• tab_size: usize
  • Tab size in spaces
• font_size: f32
  • Font size in pixels
• class: impl Into<String>
  • Additional CSS classes to apply
• min_height: impl Into<String>
  • Minimum height (CSS value like “200px” or “10rem”)
• max_height: impl Into<String>
  • Maximum height (CSS value like “500px” or “80vh”)
• id: impl Into<String>
  • ID attribute for the editor element
• on_focus: impl Into<Callback<()>>
  • Callback when the editor receives focus
• on_blur: impl Into<Callback<()>>
  • Callback when the editor loses focus
• on_cursor_change: [impl Into<Callback<(usize, usize)>>](Callback<(usize, usize)>)
  • Callback when cursor position changes (line, column)
• on_selection_change: impl Into<Callback<Option<String>>>
  • Callback when selection changes (selected text or None)
• autofocus: bool
  • Whether to auto-focus on mount
• match_brackets: bool
  • Whether bracket matching is enabled
• highlight_current_line: bool
  • Whether to highlight the current line

Fields

value: Signal<String>

The current value of the editor (controlled)

on_change: Option<Callback<String>>

Callback when the value changes

placeholder: Option<String>

Placeholder text shown when editor is empty

language: Option<String>

Programming language for syntax highlighting (e.g., “rust”, “javascript”)

read_only: bool

Whether the editor is read-only

show_line_numbers: bool

Whether to show line numbers

word_wrap: bool

Whether word wrap is enabled

tab_size: usize

Tab size in spaces

font_size: f32

Font size in pixels

class: Option<String>

Additional CSS classes to apply

min_height: Option<String>

Minimum height (CSS value like “200px” or “10rem”)

max_height: Option<String>

Maximum height (CSS value like “500px” or “80vh”)

id: Option<String>

ID attribute for the editor element

on_focus: Option<Callback<()>>

Callback when the editor receives focus

on_blur: Option<Callback<()>>

Callback when the editor loses focus

on_cursor_change: Option<Callback<(usize, usize)>>

Callback when cursor position changes (line, column)

on_selection_change: Option<Callback<Option<String>>>

Callback when selection changes (selected text or None)

autofocus: bool

Whether to auto-focus on mount

match_brackets: bool

Whether bracket matching is enabled

highlight_current_line: bool

Whether to highlight the current line

Implementations

impl EditorProps

pub fn builder() -> EditorPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

Create a builder for building EditorProps. On the builder, call .value(...), .on_change(...)(optional), .placeholder(...)(optional), .language(...)(optional), .read_only(...)(optional), .show_line_numbers(...)(optional), .word_wrap(...)(optional), .tab_size(...)(optional), .font_size(...)(optional), .class(...)(optional), .min_height(...)(optional), .max_height(...)(optional), .id(...)(optional), .on_focus(...)(optional), .on_blur(...)(optional), .on_cursor_change(...)(optional), .on_selection_change(...)(optional), .autofocus(...)(optional), .match_brackets(...)(optional), .highlight_current_line(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of EditorProps.

Trait Implementations

impl Props for EditorProps

type Builder = EditorPropsBuilder

fn builder() -> Self::Builder