Мобильная версияЯ работаю над редактором кода, в котором накладывается друг на друга. поверх элемента для отображения форматированного кода. Проблема, с которой я столкнулся, заключается в том, что когда я вставляю пробелы или табуляции в , выравнивание по элементу становится несогласованным.
Поскольку я использую Tauri для своего приложения, есть ли какие-то конкретные соображения, которые мне следует иметь в виду? Что я могу сделать, чтобы оба элемента были выровнены, особенно при работе с пробелами или вкладками? Мы будем очень признательны за любые предложения или рекомендации по достижению этой цели!
pub fn gen_span_class(&mut self) -> String {
let mut formatted_code = String::new();
while let Some(token) = self.next_token() {
let token_str = match token {
Token::Keyword(keyword) => format!("{}", keyword),
Token::Identifier(identifier) => {
format!("{}", identifier)
}
Token::Number(number) => format!("{}", number),
Token::Operator(op) => format!("{}", op),
Token::Symbol(symbol) => format!("{}", symbol),
Token::Macro(mac) => format!("{}", mac),
Token::Function(func) => format!("{}", func),
Token::String(s) => format!("{}", s),
Token::Result(r) => format!("{}", r),
Token::Bool(b) => format!("{}", b),
Token::Option(o) => format!("{}", o),
Token::Unknown(ch) => ch.to_string(),
Token::Whitespace => " ".to_string(),
Token::Breakline => "
".to_string(),
Token::Borrow => "&".to_string()
};
formatted_code.push_str(&token_str);
}
formatted_code
}
use ev::{Event, KeyboardEvent};
use leptos::*;
use wasm_bindgen::prelude::*;
use web_sys::{HtmlElement, HtmlTextAreaElement};
use crate::components::lexer::Lexer;
#[component]
pub fn Code() -> impl IntoView {
let (code, write_code) = create_signal(String::new());
let tab = move |ev: KeyboardEvent| {
if ev.key() == "Tab" {
ev.prevent_default();
if let Some(target) = ev.target().and_then(|t| t.dyn_into::().ok()) {
let selection_start = target.selection_start().unwrap();
let selection_end = target.selection_end().unwrap();
let value = target.value();
let new_value = format!("{} {}", &value[..selection_start.unwrap() as usize], &value[selection_end.unwrap() as usize..]);
target.set_value(&new_value);
target.set_selection_start(Some(selection_start.unwrap() + 3)).unwrap();
target.set_selection_end(Some(selection_start.unwrap() + 3)).unwrap();
}
}
};
let on_input = move |ev: Event| {
if let Some(target) = ev.target().and_then(|t| t.dyn_into::().ok()) {
let code_value = target.value();
write_code.set(code_value);
}
};
let highlighted_code = move || {
let mut lexer = Lexer::new(&code.get());
lexer.gen_span_class()
};
let sync_scroll = move |ev: Event| {
if let Some(target) = ev.target().and_then(|t| t.dyn_into::().ok()) {
if let Some(display) = document().get_element_by_id("code-display") {
let display = display.unchecked_into::();
display.set_scroll_top(target.scroll_top());
display.set_scroll_left(target.scroll_left())
}
}
};
view! {
}
}
.keyword, .operator, .symbol, .borrow, .macro, .function, .string {
font-weight: bold;
}
.keyword, .operator, .symbol, .borrow {
color: #f4f025;
font-style: italic;
}
.macro, .function {
color: #66ff00;
}
.string {
color: orange;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: rgba(15, 23, 42, 0.6);
font-family: 'Fira Code', monospace;
font-size: 16px;
color: white;
margin: 0;
padding: 0;
}
.editor-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.editor-textarea,
.code-display {
font-family: 'Fira Code', monospace;
font-size: 16px;
line-height: 24px;
padding: 10px;
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
}
.editor-textarea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: red;
background-color: transparent;
border: none;
outline: none;
caret-color: white;
z-index: 2;
resize: none;
overflow: hidden;
}
.code-display {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
z-index: 1;
pointer-events: none;
}
Подробнее здесь: https://stackoverflow.com/questions/791 ... -a-pre-for
