kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
Explore all Text Editor open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Text Editor

United Entry

v2.5.0

Kakoune v2021.08.28

Smooth Scrolling Beta

vnote

United Entry

qutebrowser

v2.5.0

kakoune

Kakoune v2021.08.28

ninja

neovide

Smooth Scrolling Beta

Popular Libraries in Text Editor

Trending New libraries in Text Editor

Top Authors in Text Editor

1

38 Libraries

628

2

10 Libraries

103

3

7 Libraries

485

4

6 Libraries

171

5

5 Libraries

498

6

5 Libraries

117

7

4 Libraries

440

8

4 Libraries

1129

9

4 Libraries

873

10

4 Libraries

127

1

38 Libraries

628

2

10 Libraries

103

3

7 Libraries

485

4

6 Libraries

171

5

5 Libraries

498

6

5 Libraries

117

7

4 Libraries

440

8

4 Libraries

1129

9

4 Libraries

873

10

4 Libraries

127

Trending Kits in Text Editor

No Trending Kits are available at this moment for Text Editor

Trending Discussions on Text Editor

    How to query and update the DOM with yew?
    Convert multiple lines to single line using RStudio text editor
    I trying to json-server by npm install -g json-server, but everytime I get an error
    Api data null whe nthe pages load even i use initState
    Neutralino - Obfuscate resources file?
    What is a BLAT file (.blat extension)?
    Parsing CSV Data from one column with Pandas
    Autostyle input text in contenteditable div while typing
    Making a text bold using DOM Events
    How to take an XHTML string and render it on a webpage using javascript

QUESTION

How to query and update the DOM with yew?

Asked 2022-Mar-31 at 13:45

Is there any way to make DOM action via use_node_ref? or alternatively, how to do document.query_selector() in Rust using yew?

1use web_sys::HtmlInputElement;
2use yew::{
3    function_component, functional::*, html,
4    NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9    let input_ref = use_node_ref();
10    let all_editables =  input_ref.query_selector("[contenteditable]")
11    web_sys::console::(all_editables)
12
13    html! {
14        <div>
15            <input ref={input_ref} type="number" />
16        </div>
17    }
18}
19
20

Goal: I have a rich text editor app. And I have a minified html in form of string like this <h1> this is title</h1><p>hello world</> and I need to get the DOM and change the innerHTML to set it to this value.

Goal2: I will also need to update the innerHtml as the user write things in the contenteditable elements. Fore example when the user type @john smith I will make a create an <a> element with href the have the link to John smith's profile.

ANSWER

Answered 2022-Mar-31 at 13:45

Many things to tackle with your question.

#1 Do not set inner html

More to read about this in Alternative for innerHTML?

But instead create text nodes. So using web-sys you would do something like:

copy icondownload icon

1use web_sys::HtmlInputElement;
2use yew::{
3    function_component, functional::*, html,
4    NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -&gt; Html {
9    let input_ref = use_node_ref();
10    let all_editables =  input_ref.query_selector(&quot;[contenteditable]&quot;)
11    web_sys::console::(all_editables)
12
13    html! {
14        &lt;div&gt;
15            &lt;input ref={input_ref} type=&quot;number&quot; /&gt;
16        &lt;/div&gt;
17    }
18}
19
20let txtNode: Node = window()
21    .unwrap_throw()
22    .document()
23    .unwrap_throw()
24    .create_text_node(&quot;Hello&quot;)
25    .dyn_into()
26    .unwrap_throw();
27
28myDomElement.append_hild(&amp;txtNode).unwrap_throw();
29

#2 How to query data from an input

There are many ways to do this so ill just show you one of them - controlled input

core idea is keep your input value in use_state and sync it with the input element using value and oninput attributes.

copy icondownload icon

1use web_sys::HtmlInputElement;
2use yew::{
3    function_component, functional::*, html,
4    NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -&gt; Html {
9    let input_ref = use_node_ref();
10    let all_editables =  input_ref.query_selector(&quot;[contenteditable]&quot;)
11    web_sys::console::(all_editables)
12
13    html! {
14        &lt;div&gt;
15            &lt;input ref={input_ref} type=&quot;number&quot; /&gt;
16        &lt;/div&gt;
17    }
18}
19
20let txtNode: Node = window()
21    .unwrap_throw()
22    .document()
23    .unwrap_throw()
24    .create_text_node(&quot;Hello&quot;)
25    .dyn_into()
26    .unwrap_throw();
27
28myDomElement.append_hild(&amp;txtNode).unwrap_throw();
29#[function_component(ControlledInputComponent)]
30pub fn controlled_input_component() -&gt; Html {
31    let my_text_handle = use_state(|| &quot;&quot;.to_string());
32    let my_text = (*my_text_handle).clone();
33    
34    let handle_input = Callback::from(move |input_event: InputEvent| {
35        let event: Event = input_event.dyn_into().unwrap_throw();
36        let input_elem: HTMLInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
37        let value = input_elem.value();
38        my_text_handle.set(value); // update as user types
39        
40    });
41
42    html! {
43        &lt;div&gt;
44            &lt;input type=&quot;text&quot; value={my_text} oninput={handle_input} /&gt;
45        &lt;/div&gt;
46    }
47}
48

#3 Update DOM

**External to yew as you should generally avoid updating DOM that is controlled by yew

You can then use use_effec_with_deps to react to your input changing and update your external preview there

copy icondownload icon

1use web_sys::HtmlInputElement;
2use yew::{
3    function_component, functional::*, html,
4    NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -&gt; Html {
9    let input_ref = use_node_ref();
10    let all_editables =  input_ref.query_selector(&quot;[contenteditable]&quot;)
11    web_sys::console::(all_editables)
12
13    html! {
14        &lt;div&gt;
15            &lt;input ref={input_ref} type=&quot;number&quot; /&gt;
16        &lt;/div&gt;
17    }
18}
19
20let txtNode: Node = window()
21    .unwrap_throw()
22    .document()
23    .unwrap_throw()
24    .create_text_node(&quot;Hello&quot;)
25    .dyn_into()
26    .unwrap_throw();
27
28myDomElement.append_hild(&amp;txtNode).unwrap_throw();
29#[function_component(ControlledInputComponent)]
30pub fn controlled_input_component() -&gt; Html {
31    let my_text_handle = use_state(|| &quot;&quot;.to_string());
32    let my_text = (*my_text_handle).clone();
33    
34    let handle_input = Callback::from(move |input_event: InputEvent| {
35        let event: Event = input_event.dyn_into().unwrap_throw();
36        let input_elem: HTMLInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
37        let value = input_elem.value();
38        my_text_handle.set(value); // update as user types
39        
40    });
41
42    html! {
43        &lt;div&gt;
44            &lt;input type=&quot;text&quot; value={my_text} oninput={handle_input} /&gt;
45        &lt;/div&gt;
46    }
47}
48let my_text_handle = use_state(|| &quot;&quot;.to_string());
49let my_text = (*my_text_handle).clone();
50
51use_effect_with_deps(move |my_text| {
52    // run all the code from my tip #1 like:
53    // myDomElement.append_hild(&amp;txtNode).unwrap_throw();
54    ||{}
55}, my_text);
56

Source https://stackoverflow.com/questions/71690906

Community Discussions contain sources that include Stack Exchange Network

    How to query and update the DOM with yew?
    Convert multiple lines to single line using RStudio text editor
    I trying to json-server by npm install -g json-server, but everytime I get an error
    Api data null whe nthe pages load even i use initState
    Neutralino - Obfuscate resources file?
    What is a BLAT file (.blat extension)?
    Parsing CSV Data from one column with Pandas
    Autostyle input text in contenteditable div while typing
    Making a text bold using DOM Events
    How to take an XHTML string and render it on a webpage using javascript

QUESTION

How to query and update the DOM with yew?

Asked 2022-Mar-31 at 13:45

Is there any way to make DOM action via use_node_ref? or alternatively, how to do document.query_selector() in Rust using yew?

1use web_sys::HtmlInputElement;
2use yew::{
3    function_component, functional::*, html,
4    NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -&gt; Html {
9    let input_ref = use_node_ref();
10    let all_editables =  input_ref.query_selector(&quot;[contenteditable]&quot;)
11    web_sys::console::(all_editables)
12
13    html! {
14        &lt;div&gt;
15            &lt;input ref={input_ref} type=&quot;number&quot; /&gt;
16        &lt;/div&gt;
17    }
18}
19
20

Goal: I have a rich text editor app. And I have a minified html in form of string like this <h1> this is title</h1><p>hello world</> and I need to get the DOM and change the innerHTML to set it to this value.

Goal2: I will also need to update the innerHtml as the user write things in the contenteditable elements. Fore example when the user type @john smith I will make a create an <a> element with href the have the link to John smith's profile.

ANSWER

Answered 2022-Mar-31 at 13:45

Many things to tackle with your question.

#1 Do not set inner html

More to read about this in Alternative for innerHTML?

But instead create text nodes. So using web-sys you would do something like:

copy icondownload icon

1use web_sys::HtmlInputElement;
2use yew::{
3    function_component, functional::*, html,
4    NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -&gt; Html {
9    let input_ref = use_node_ref();
10    let all_editables =  input_ref.query_selector(&quot;[contenteditable]&quot;)
11    web_sys::console::(all_editables)
12
13    html! {
14        &lt;div&gt;
15            &lt;input ref={input_ref} type=&quot;number&quot; /&gt;
16        &lt;/div&gt;
17    }
18}
19
20let txtNode: Node = window()
21    .unwrap_throw()
22    .document()
23    .unwrap_throw()
24    .create_text_node(&quot;Hello&quot;)
25    .dyn_into()
26    .unwrap_throw();
27
28myDomElement.append_hild(&amp;txtNode).unwrap_throw();
29

#2 How to query data from an input

There are many ways to do this so ill just show you one of them - controlled input

core idea is keep your input value in use_state and sync it with the input element using value and oninput attributes.

copy icondownload icon

1use web_sys::HtmlInputElement;
2use yew::{
3    function_component, functional::*, html,
4    NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -&gt; Html {
9    let input_ref = use_node_ref();
10    let all_editables =  input_ref.query_selector(&quot;[contenteditable]&quot;)
11    web_sys::console::(all_editables)
12
13    html! {
14        &lt;div&gt;
15            &lt;input ref={input_ref} type=&quot;number&quot; /&gt;
16        &lt;/div&gt;
17    }
18}
19
20let txtNode: Node = window()
21    .unwrap_throw()
22    .document()
23    .unwrap_throw()
24    .create_text_node(&quot;Hello&quot;)
25    .dyn_into()
26    .unwrap_throw();
27
28myDomElement.append_hild(&amp;txtNode).unwrap_throw();
29#[function_component(ControlledInputComponent)]
30pub fn controlled_input_component() -&gt; Html {
31    let my_text_handle = use_state(|| &quot;&quot;.to_string());
32    let my_text = (*my_text_handle).clone();
33    
34    let handle_input = Callback::from(move |input_event: InputEvent| {
35        let event: Event = input_event.dyn_into().unwrap_throw();
36        let input_elem: HTMLInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
37        let value = input_elem.value();
38        my_text_handle.set(value); // update as user types
39        
40    });
41
42    html! {
43        &lt;div&gt;
44            &lt;input type=&quot;text&quot; value={my_text} oninput={handle_input} /&gt;
45        &lt;/div&gt;
46    }
47}
48

#3 Update DOM

**External to yew as you should generally avoid updating DOM that is controlled by yew

You can then use use_effec_with_deps to react to your input changing and update your external preview there

copy icondownload icon

1use web_sys::HtmlInputElement;
2use yew::{
3    function_component, functional::*, html,
4    NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -&gt; Html {
9    let input_ref = use_node_ref();
10    let all_editables =  input_ref.query_selector(&quot;[contenteditable]&quot;)
11    web_sys::console::(all_editables)
12
13    html! {
14        &lt;div&gt;
15            &lt;input ref={input_ref} type=&quot;number&quot; /&gt;
16        &lt;/div&gt;
17    }
18}
19
20let txtNode: Node = window()
21    .unwrap_throw()
22    .document()
23    .unwrap_throw()
24    .create_text_node(&quot;Hello&quot;)
25    .dyn_into()
26    .unwrap_throw();
27
28myDomElement.append_hild(&amp;txtNode).unwrap_throw();
29#[function_component(ControlledInputComponent)]
30pub fn controlled_input_component() -&gt; Html {
31    let my_text_handle = use_state(|| &quot;&quot;.to_string());
32    let my_text = (*my_text_handle).clone();
33    
34    let handle_input = Callback::from(move |input_event: InputEvent| {
35        let event: Event = input_event.dyn_into().unwrap_throw();
36        let input_elem: HTMLInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
37        let value = input_elem.value();
38        my_text_handle.set(value); // update as user types
39        
40    });
41
42    html! {
43        &lt;div&gt;
44            &lt;input type=&quot;text&quot; value={my_text} oninput={handle_input} /&gt;
45        &lt;/div&gt;
46    }
47}
48let my_text_handle = use_state(|| &quot;&quot;.to_string());
49let my_text = (*my_text_handle).clone();
50
51use_effect_with_deps(move |my_text| {
52    // run all the code from my tip #1 like:
53    // myDomElement.append_hild(&amp;txtNode).unwrap_throw();
54    ||{}
55}, my_text);
56

Source https://stackoverflow.com/questions/71690906