@perspective-dev/viewer 4.0.0 → 4.1.0

package/src/rust/components/font_loader.rs

@@ -17,21 +17,23 @@ use std::rc::Rc;
 
 use futures::future::{join_all, select_all};
 use perspective_js::utils::{global, *};
-use wasm_bindgen::JsCast;
 use wasm_bindgen::prelude::*;
+use wasm_bindgen::{JsCast, intern};
 use wasm_bindgen_futures::JsFuture;
 use yew::prelude::*;
 
 use crate::utils::*;
 
-const FONT_DOWNLOAD_TIMEOUT_MS: i32 = 1000;
-
 /// This test string is injected into the DOM with the target `font-family`
 /// applied. It is important for this string to contain the correct unicode
 /// range, as otherwise the browser may download the latin-only variant of the
 /// font which will later be invalidated.
 const FONT_TEST_SAMPLE: &str = "ABCDΔ";
 
+/// How long to wait for the test string to receive the font before proceeding
+/// anyway (with a consoel warning).
+const FONT_DOWNLOAD_TIMEOUT_MS: i32 = 1000;
+
 /// `state` is private to force construction of props with the `::new()` static
 /// method, which initializes the async `load_fonts_task()` method.
 #[derive(Clone, Properties)]
@@ -86,15 +88,15 @@ pub enum FontLoaderStatus {
     Finished,
 }
 
-type PromiseSet = Vec<ApiFuture<JsValue>>;
-
-pub struct FontLoaderState {
+struct FontLoaderState {
     status: Cell<FontLoaderStatus>,
     elem: web_sys::HtmlElement,
     on_update: Callback<()>,
     fonts: RefCell<Vec<(String, String)>>,
 }
 
+type PromiseSet = Vec<ApiFuture<JsValue>>;
+
 impl FontLoaderProps {
     pub fn new(elem: &web_sys::HtmlElement, on_update: Callback<()>) -> Self {
         let inner = FontLoaderState {
@@ -116,7 +118,7 @@ impl FontLoaderProps {
         self.state.status.get()
     }
 
-    fn get_fonts(&self) -> Ref<Vec<(String, String)>> {
+    fn get_fonts(&'_ self) -> Ref<'_, Vec<(String, String)>> {
         self.state.fonts.borrow()
     }
 
@@ -155,7 +157,7 @@ impl FontLoaderProps {
             let mut block_fonts: PromiseSet = vec![ApiFuture::new(task)];
 
             for entry in font_iter(global::document().fonts().values()) {
-                let font_face = js_sys::Reflect::get(&entry, js_intern::js_intern!("value"))?
+                let font_face = js_sys::Reflect::get(&entry, &intern("value").into())?
                     .dyn_into::<web_sys::FontFace>()?;
 
                 // Safari always has to be "different".
@@ -246,7 +248,7 @@ fn font_iter(
     repeat_with(move || iter.next())
         .filter_map(|x| x.ok())
         .take_while(|entry| {
-            !js_sys::Reflect::get(entry, js_intern::js_intern!("done"))
+            !js_sys::Reflect::get(entry, &intern("done").into())
                 .unwrap()
                 .as_bool()
                 .unwrap()

package/src/rust/components/form/code_editor.rs

@@ -19,10 +19,10 @@ use yew::prelude::*;
 
 use crate::components::form::highlight::highlight;
 use crate::components::style::LocalStyle;
+use crate::css;
 use crate::custom_elements::FunctionDropDownElement;
 use crate::exprtk::{Cursor, tokenize};
 use crate::utils::*;
-use crate::*;
 
 #[derive(Properties, PartialEq)]
 pub struct CodeEditorProps {
@@ -47,106 +47,15 @@ pub struct CodeEditorProps {
     pub error: Option<ExprValidationError>,
 }
 
-/// Capture the input (for re-parse) and caret position whenever the input
-/// text changes.
-fn on_input_callback(
-    event: InputEvent,
-    // position: &UseStateSetter<u32>,
-    oninput: &Callback<Rc<String>>,
-) {
-    let elem = event
-        .target()
-        .unwrap()
-        .unchecked_into::<web_sys::HtmlTextAreaElement>();
-
-    oninput.emit(elem.value().into());
-    // position.set(elem.get_caret_position().unwrap_or_default());
-}
-
-/// Overide for special non-character commands e.g. shift+enter
-fn on_keydown(event: KeyboardEvent, deps: &(UseStateSetter<u32>, Callback<()>)) {
-    let elem = event
-        .target()
-        .unwrap()
-        .unchecked_into::<web_sys::HtmlTextAreaElement>();
-
-    deps.0.set(elem.get_caret_position().unwrap_or_default());
-    if event.shift_key() && event.key_code() == 13 {
-        event.prevent_default();
-        deps.1.emit(())
-    }
-
-    // handle the tab key press
-    if event.key() == "Tab" {
-        event.prevent_default();
-
-        let caret_pos = elem.selection_start().unwrap().unwrap_or_default() as usize;
-
-        let mut initial_text = elem.value();
-
-        initial_text.insert(caret_pos, '\t');
-
-        elem.set_value(&initial_text);
-
-        let input_event = web_sys::InputEvent::new("input").unwrap();
-        let _ = elem.dispatch_event(&input_event).unwrap();
-
-        // place caret after inserted tab
-        let new_caret_pos = (caret_pos + 1) as u32;
-        let _ = elem.set_selection_range(new_caret_pos, new_caret_pos);
-
-        elem.focus().unwrap();
-    }
-}
-
-/// Scrolling callback
-fn on_scroll(scroll: &UseStateSetter<(i32, i32)>, editable: &NodeRef) {
-    let div = editable.cast::<HtmlElement>().unwrap();
-    scroll.set((div.scroll_top(), div.scroll_left()));
-}
-
-/// Scrolling sync
-fn scroll_sync(scroll: &UseStateHandle<(i32, i32)>, div: &NodeRef, lineno: &NodeRef) {
-    if let Some(div) = div.cast::<HtmlElement>() {
-        div.set_scroll_top(scroll.0);
-        div.set_scroll_left(scroll.1);
-    }
-
-    if let Some(div) = lineno.cast::<HtmlElement>() {
-        div.set_scroll_top(scroll.0);
-    }
-}
-
-/// Autocomplete
-/// TODO this should use a portal
-fn autocomplete(
-    filter_dropdown: &Rc<FunctionDropDownElement>,
-    token: &Option<String>,
-    target: &NodeRef,
-) {
-    if let Some(x) = token {
-        let elem = target.cast::<HtmlElement>().unwrap();
-        if elem.is_connected() {
-            filter_dropdown
-                .autocomplete(x.clone(), elem, Callback::from(|_| ()))
-                .unwrap();
-        } else {
-            filter_dropdown.hide().unwrap();
-        }
-    } else {
-        filter_dropdown.hide().unwrap();
-    }
-}
-
 /// A syntax-highlighted text editor component.
 #[function_component(CodeEditor)]
 pub fn code_editor(props: &CodeEditorProps) -> Html {
     let select_all = use_state_eq(|| false);
     let caret_position = use_state_eq(|| 0_u32);
     let scroll_offset = use_state_eq(|| (0, 0));
-    let textarea_ref = use_node_ref().tee::<5>();
-    let content_ref = use_node_ref().tee::<3>();
-    let lineno_ref = use_node_ref().tee::<2>();
+    let textarea_ref = use_node_ref();
+    let content_ref = use_node_ref();
+    let lineno_ref = use_node_ref();
     let filter_dropdown = use_memo((), |_| FunctionDropDownElement::default());
     let mut cursor = Cursor::new(&props.error);
     let terms = tokenize(&props.expr)
@@ -159,12 +68,12 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
         on_input_callback(event, deps)
     });
 
-    let onscroll = use_callback((scroll_offset.setter(), textarea_ref.0), |_, deps| {
+    let onscroll = use_callback((scroll_offset.setter(), textarea_ref.clone()), |_, deps| {
         on_scroll(&deps.0, &deps.1)
     });
 
     let autofocus = props.autofocus;
-    use_effect_with((props.expr.clone(), textarea_ref.1), {
+    use_effect_with((props.expr.clone(), textarea_ref.clone()), {
         move |(expr, textarea_ref)| {
             let elem = textarea_ref.cast::<web_sys::HtmlTextAreaElement>().unwrap();
             if autofocus {
@@ -190,7 +99,7 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
     });
 
     // select_all.set(props.select_all);
-    use_effect_with((select_all, textarea_ref.2), {
+    use_effect_with((select_all, textarea_ref.clone()), {
         move |(select_all, textarea_ref)| {
             let elem = textarea_ref.cast::<web_sys::HtmlTextAreaElement>().unwrap();
             if **select_all {
@@ -204,7 +113,7 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
 
     // ????
     let autofocus = props.autofocus;
-    use_effect_with((props.error.clone(), textarea_ref.3), {
+    use_effect_with((props.error.clone(), textarea_ref.clone()), {
         move |(_, textarea_ref)| {
             if autofocus {
                 let elem = textarea_ref.cast::<web_sys::HtmlTextAreaElement>().unwrap();
@@ -214,9 +123,10 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
     });
 
     // Sync scrolling between textarea and formatted HTML
-    use_effect_with((scroll_offset, content_ref.0, lineno_ref.0), |deps| {
-        scroll_sync(&deps.0, &deps.1, &deps.2)
-    });
+    use_effect_with(
+        (scroll_offset, content_ref.clone(), lineno_ref.clone()),
+        |deps| scroll_sync(&deps.0, &deps.1, &deps.2),
+    );
 
     // Blur if this element is not in the tree
     use_effect_with(filter_dropdown.clone(), |filter_dropdown| {
@@ -256,19 +166,19 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
         <>
             <LocalStyle href={css!("form/code-editor")} />
             <div id="editor" {class}>
-                <div id="line_numbers" ref={lineno_ref.1}>{ line_numbers }</div>
+                <div id="line_numbers" ref={lineno_ref}>{ line_numbers }</div>
                 <div id="editor-inner" {class}>
                     <textarea
                         {disabled}
                         id="textarea_editable"
-                        ref={textarea_ref.4}
+                        ref={textarea_ref}
                         spellcheck="false"
                         {oninput}
                         {onscroll}
                         {onkeydown}
                     />
                     <div id="editor-height-sizer" />
-                    <pre id="content" ref={content_ref.1}>
+                    <pre id="content" ref={content_ref}>
                         { terms }
                         { {
                         // A linebreak which pushs a textarea into scroll overflow
@@ -284,3 +194,94 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
         </>
     }
 }
+
+/// Capture the input (for re-parse) and caret position whenever the input
+/// text changes.
+fn on_input_callback(
+    event: InputEvent,
+    // position: &UseStateSetter<u32>,
+    oninput: &Callback<Rc<String>>,
+) {
+    let elem = event
+        .target()
+        .unwrap()
+        .unchecked_into::<web_sys::HtmlTextAreaElement>();
+
+    oninput.emit(elem.value().into());
+    // position.set(elem.get_caret_position().unwrap_or_default());
+}
+
+/// Overide for special non-character commands e.g. shift+enter
+fn on_keydown(event: KeyboardEvent, deps: &(UseStateSetter<u32>, Callback<()>)) {
+    let elem = event
+        .target()
+        .unwrap()
+        .unchecked_into::<web_sys::HtmlTextAreaElement>();
+
+    deps.0.set(elem.get_caret_position().unwrap_or_default());
+    if event.shift_key() && event.key_code() == 13 {
+        event.prevent_default();
+        deps.1.emit(())
+    }
+
+    // handle the tab key press
+    if event.key() == "Tab" {
+        event.prevent_default();
+
+        let caret_pos = elem.selection_start().unwrap().unwrap_or_default() as usize;
+
+        let mut initial_text = elem.value();
+
+        initial_text.insert(caret_pos, '\t');
+
+        elem.set_value(&initial_text);
+
+        let input_event = web_sys::InputEvent::new("input").unwrap();
+        let _ = elem.dispatch_event(&input_event).unwrap();
+
+        // place caret after inserted tab
+        let new_caret_pos = (caret_pos + 1) as u32;
+        let _ = elem.set_selection_range(new_caret_pos, new_caret_pos);
+
+        elem.focus().unwrap();
+    }
+}
+
+/// Scrolling callback
+fn on_scroll(scroll: &UseStateSetter<(i32, i32)>, editable: &NodeRef) {
+    let div = editable.cast::<HtmlElement>().unwrap();
+    scroll.set((div.scroll_top(), div.scroll_left()));
+}
+
+/// Scrolling sync
+fn scroll_sync(scroll: &UseStateHandle<(i32, i32)>, div: &NodeRef, lineno: &NodeRef) {
+    if let Some(div) = div.cast::<HtmlElement>() {
+        div.set_scroll_top(scroll.0);
+        div.set_scroll_left(scroll.1);
+    }
+
+    if let Some(div) = lineno.cast::<HtmlElement>() {
+        div.set_scroll_top(scroll.0);
+    }
+}
+
+/// Autocomplete
+/// TODO this should use a portal
+fn autocomplete(
+    filter_dropdown: &Rc<FunctionDropDownElement>,
+    token: &Option<String>,
+    target: &NodeRef,
+) {
+    if let Some(x) = token {
+        let elem = target.cast::<HtmlElement>().unwrap();
+        if elem.is_connected() {
+            filter_dropdown
+                .autocomplete(x.clone(), elem, Callback::from(|_| ()))
+                .unwrap();
+        } else {
+            filter_dropdown.hide().unwrap();
+        }
+    } else {
+        filter_dropdown.hide().unwrap();
+    }
+}

package/src/rust/components/form/color_range_selector.rs

@@ -26,17 +26,6 @@ pub struct ColorRangeProps {
     pub is_modified: bool,
 }
 
-fn infer_fg(color: &str) -> &'static str {
-    let r = i32::from_str_radix(&color[1..3], 16).unwrap_or(255) as f64;
-    let g = i32::from_str_radix(&color[3..5], 16).unwrap_or(0) as f64;
-    let b = i32::from_str_radix(&color[5..7], 16).unwrap_or(0) as f64;
-    if (r * r * 0.299 + g * g * 0.587 + b * b * 0.114).sqrt() > 130.0 {
-        "--sign--color:#161616"
-    } else {
-        "--sign--color:#FFFFFF"
-    }
-}
-
 #[function_component(ColorRangeSelector)]
 pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
     let on_pos_color = use_callback(
@@ -106,10 +95,23 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
                     />
                     <label for={format!("{}-neg", props.id)} class="color-label">{ "-" }</label>
                 </div>
-                if props.is_modified { <span class="reset-default-style" onclick={on_reset} /> } else {
+                if props.is_modified {
+                    <span class="reset-default-style" onclick={on_reset} />
+                } else {
                     <span class="reset-default-style-disabled" />
                 }
             </div>
         </>
     }
 }
+
+fn infer_fg(color: &str) -> &'static str {
+    let r = i32::from_str_radix(&color[1..3], 16).unwrap_or(255) as f64;
+    let g = i32::from_str_radix(&color[3..5], 16).unwrap_or(0) as f64;
+    let b = i32::from_str_radix(&color[5..7], 16).unwrap_or(0) as f64;
+    if (r * r * 0.299 + g * g * 0.587 + b * b * 0.114).sqrt() > 130.0 {
+        "--sign--color:#161616"
+    } else {
+        "--sign--color:#FFFFFF"
+    }
+}

package/src/rust/components/form/color_selector.rs

@@ -45,7 +45,9 @@ pub fn color_component(props: &ColorProps) -> Html {
             <label id={props.title.as_deref().unwrap_or("color-label").to_owned()} />
             <div class="color-gradient-container">
                 <input class="parameter" type="color" value={props.color.to_owned()} {oninput} />
-                if props.is_modified { <span class="reset-default-style" onclick={on_reset} /> } else {
+                if props.is_modified {
+                    <span class="reset-default-style" onclick={on_reset} />
+                } else {
                     <span class="reset-default-style-disabled" />
                 }
             </div>

package/src/rust/components/form/debug.rs

@@ -13,6 +13,7 @@
 use std::rc::Rc;
 
 use perspective_client::ExprValidationError;
+use perspective_js::utils::{ApiFuture, JsValueSerdeExt};
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
@@ -25,86 +26,13 @@ use crate::presentation::*;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
-use crate::*;
+use crate::{PerspectiveProperties, css};
 
-#[derive(Properties, Clone, PartialEq)]
+#[derive(PartialEq, Properties, PerspectiveProperties!)]
 pub struct DebugPanelProps {
-    pub session: Session,
-    pub renderer: Renderer,
     pub presentation: Presentation,
-}
-
-derive_model!(Presentation, Renderer, Session for DebugPanelProps);
-
-impl DebugPanelProps {
-    fn set_text(&self, setter: UseStateSetter<Rc<String>>) {
-        let props = self.clone();
-        ApiFuture::spawn(async move {
-            let task = props.get_viewer_config();
-            let config = task.await?;
-            let json = JsValue::from_serde_ext(&config)?;
-            let js_string =
-                js_sys::JSON::stringify_with_replacer_and_space(&json, &JsValue::NULL, &2.into())?;
-
-            setter.set(Rc::new(js_string.as_string().unwrap()));
-            Ok(())
-        });
-    }
-
-    fn reset_callback(
-        &self,
-        text: UseStateSetter<Rc<String>>,
-        error: UseStateSetter<Option<ExprValidationError>>,
-        modified: UseStateSetter<bool>,
-    ) -> impl Fn(()) + use<> {
-        let props = self.clone();
-        move |_| {
-            error.set(None);
-            props.set_text(text.clone());
-            modified.set(false);
-        }
-    }
-}
-
-fn on_save(
-    props: &DebugPanelProps,
-    text: &Rc<String>,
-    error: &UseStateHandle<Option<ExprValidationError>>,
-    modified: &UseStateHandle<bool>,
-) {
-    clone!(props, text, error, modified);
-    ApiFuture::spawn(async move {
-        match serde_json::from_str(&text) {
-            Ok(config) => {
-                match props.restore_and_render(config, async { Ok(()) }).await {
-                    Ok(_) => {
-                        modified.set(false);
-                    },
-                    Err(e) => {
-                        modified.set(true);
-                        error.set(Some(ExprValidationError {
-                            error_message: JsValue::from(e)
-                                .as_string()
-                                .unwrap_or_else(|| "Failed to validate viewer config".to_owned()),
-                            line: 0_u32,
-                            column: 0,
-                        }));
-                    },
-                }
-                Ok(())
-            },
-            Err(err) => {
-                modified.set(true);
-                error.set(Some(ExprValidationError {
-                    error_message: err.to_string(),
-                    line: err.line() as u32 - 1,
-                    column: err.column() as u32 - 1,
-                }));
-
-                Ok(())
-            },
-        }
-    });
+    pub renderer: Renderer,
+    pub session: Session,
 }
 
 #[function_component(DebugPanel)]
@@ -113,33 +41,34 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
     let error = use_state_eq(|| Option::<ExprValidationError>::None);
     let select_all = use_memo((), |()| PubSub::default());
     let modified = use_state_eq(|| false);
-    use_effect_with((expr.setter(), props.clone()), {
+
+    use_effect_with((expr.setter(), props.clone_state()), {
         clone!(error, modified);
-        move |(text, props)| {
-            props.set_text(text.clone());
+        move |(text, state)| {
+            state.set_text(text.clone());
             error.set(None);
-            let sub1 = props
-                .renderer()
+            let sub1 = state
+                .renderer
                 .style_changed
-                .add_listener(props.reset_callback(
+                .add_listener(state.reset_callback(
                     text.clone(),
                     error.setter(),
                     modified.setter(),
                 ));
 
-            let sub2 = props
+            let sub2 = state
                 .renderer()
                 .reset_changed
-                .add_listener(props.reset_callback(
+                .add_listener(state.reset_callback(
                     text.clone(),
                     error.setter(),
                     modified.setter(),
                 ));
 
-            let sub3 = props
+            let sub3 = state
                 .session()
                 .view_config_changed
-                .add_listener(props.reset_callback(
+                .add_listener(state.reset_callback(
                     text.clone(),
                     error.setter(),
                     modified.setter(),
@@ -161,9 +90,9 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
         }
     });
 
-    let onsave = use_callback((expr.clone(), error.clone(), props.clone()), {
+    let onsave = use_callback((expr.clone(), error.clone(), props.clone_state()), {
         clone!(modified);
-        move |_, (text, error, props)| on_save(props, text, error, &modified)
+        move |_, (text, error, props)| props.on_save(text, error, &modified)
     });
 
     let oncopy = use_callback(
@@ -182,12 +111,12 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
         },
     );
 
-    let onapply = use_callback((expr.clone(), error.clone(), props.clone()), {
+    let onapply = use_callback((expr.clone(), error.clone(), props.clone_state()), {
         clone!(modified);
-        move |_, (text, error, props)| on_save(props, text, error, &modified)
+        move |_, (text, error, props)| props.on_save(text, error, &modified)
     });
 
-    let onreset = use_callback((expr.setter(), error.clone(), props.clone()), {
+    let onreset = use_callback((expr.setter(), error.clone(), props.clone_state()), {
         clone!(modified);
         move |_, (text, error, props)| {
             props.set_text(text.clone());
@@ -196,7 +125,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
         }
     });
 
-    let onpaste = use_callback((expr.clone(), error.clone(), props.clone()), {
+    let onpaste = use_callback((expr.clone(), error.clone(), props.clone_state()), {
         clone!(modified);
         move |_, (text, error, props)| {
             clone!(text, error, props, modified);
@@ -206,7 +135,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                     modified.set(true);
                     error.set(None);
                     text.set(x.clone());
-                    on_save(&props, &x, &error, &modified);
+                    props.on_save(&x, &error, &modified);
                 }
 
                 Ok(())
@@ -251,3 +180,75 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
         </>
     }
 }
+
+impl DebugPanelPropsState {
+    fn set_text(&self, setter: UseStateSetter<Rc<String>>) {
+        let props = self.clone();
+        ApiFuture::spawn(async move {
+            let task = props.get_viewer_config();
+            let config = task.await?;
+            let json = JsValue::from_serde_ext(&config)?;
+            let js_string =
+                js_sys::JSON::stringify_with_replacer_and_space(&json, &JsValue::NULL, &2.into())?;
+
+            setter.set(Rc::new(js_string.as_string().unwrap()));
+            Ok(())
+        });
+    }
+
+    fn reset_callback(
+        &self,
+        text: UseStateSetter<Rc<String>>,
+        error: UseStateSetter<Option<ExprValidationError>>,
+        modified: UseStateSetter<bool>,
+    ) -> impl Fn(()) + use<> {
+        let props = self.clone();
+        move |_| {
+            error.set(None);
+            props.set_text(text.clone());
+            modified.set(false);
+        }
+    }
+
+    fn on_save(
+        &self,
+        text: &Rc<String>,
+        error: &UseStateHandle<Option<ExprValidationError>>,
+        modified: &UseStateHandle<bool>,
+    ) {
+        let props = self.clone();
+        clone!(text, error, modified);
+        ApiFuture::spawn(async move {
+            match serde_json::from_str(&text) {
+                Ok(config) => {
+                    match props.restore_and_render(config, async { Ok(()) }).await {
+                        Ok(_) => {
+                            modified.set(false);
+                        },
+                        Err(e) => {
+                            modified.set(true);
+                            error.set(Some(ExprValidationError {
+                                error_message: JsValue::from(e).as_string().unwrap_or_else(|| {
+                                    "Failed to validate viewer config".to_owned()
+                                }),
+                                line: 0_u32,
+                                column: 0,
+                            }));
+                        },
+                    }
+                    Ok(())
+                },
+                Err(err) => {
+                    modified.set(true);
+                    error.set(Some(ExprValidationError {
+                        error_message: err.to_string(),
+                        line: err.line() as u32 - 1,
+                        column: err.column() as u32 - 1,
+                    }));
+
+                    Ok(())
+                },
+            }
+        });
+    }
+}

package/src/rust/components/form/highlight.rs

@@ -29,10 +29,12 @@ pub fn highlight<'a>(cursor: &mut Cursor<'a>, token: Token<'a>, position: u32) -
     let is_overlap = cursor.is_error();
     let result = match (is_auto, is_overlap, is_break) {
         (true, true, false) => html! {
-            <span ref={cursor.noderef.clone()} class="error_highlight">{ token }</span>
+            <span ref={cursor.noderef.clone()} class="error_highlight">{ token.to_html() }</span>
+        },
+        (false, true, false) => html! { <span class="error_highlight">{ token.to_html() }</span> },
+        (true, false, false) => {
+            html! { <span ref={cursor.noderef.clone()}>{ token.to_html() }</span> }
         },
-        (false, true, false) => html! { <span class="error_highlight">{ token }</span> },
-        (true, false, false) => html! { <span ref={cursor.noderef.clone()}>{ token }</span> },
         _ => token.to_html(),
     };