Load a component after the mount of DOM

[CedricGARVENES]

Hi,
I'm trying the add a rich text editor to my project.
I use this crate leptos-tiptap but a have some issues.
When I try to create an instance of tiptap that is located in a Transition component, I get this error :
"Can not create Tiptap instance on element with id "6963e7..." as element could not be found. You may have executed this function when the element was not yet mounted to the DOM."
This error is likely due to the fact that the Tiptap Js function is called before the Tiptap div component is created because of the Transition component's delay.
How can I ensure that my tiptap instance is created after the Transition component's delay has passed ?

[gbj]

Can you provide some example code? What have you tried so far? I probably have some suggestions but it's almost never possible to help without seeing an example of what you tried that didn't work.

[CedricGARVENES]

Here my component with the Transition component

#[component]
pub fn CourseNodePage() -> impl IntoView {
    let course_data_ctx = expect_context::<CourseDataCtx>();

    let current_node = LocalResource::new(move || {
        let _ = course_data_ctx.refresh.get();
        let id = course_data_ctx.current_node_id.get();
        async move {
            match id {
                Some(id) => get_course_node_by_id(id).await,
                None => Err("ID du noeud du cours invalide".to_string()),
            }
        }
    });

    view! {
        <div class="course-node">
            <Transition fallback=move || view! { <p class="loading">"Chargement du noeud..."</p> }>
                {move || {
                    match current_node.get() {
                        None => view! { <p class="loading">"Chargement du noeud..."</p> }.into_any(),
                        Some(Err(e)) => view! {
                            <div class="error-container">
                                <h1>"❌ Erreur"</h1>
                                <p>{format!("Impossible de charger le noeud: {e}")}</p>
                            </div>
                        }.into_any(),
                        Some(Ok(course_node)) => {
                            match course_node.node_type {
                                CourseNodeType::Chapter => view! {
                                    <ChapterContent chapter=course_node/>
                                }.into_any(),
                                _ => view! {}.into_any(),
                            }
                        },
                    }
                }}
            </Transition>
        </div>
    }
}

And here the component with TiptapInstance

const EMPTY_HTML: &str = "<p>Contenu...</p>";

#[component]
pub fn ChapterContent(chapter: CourseNodeModel) -> impl IntoView {
    let course_data_ctx = expect_context::<CourseDataCtx>();
    let course_editor_ctx = expect_context::<CourseEditorCtx>();

    let editor_version = RwSignal::new(0u64);
    let tiptap_mounted = RwSignal::new(false);

    let tiptap_id = Signal::derive(move || format!("{}-{}", chapter.id, editor_version.get()));
    // let tiptap_id = chapter.id.to_string();

    let initial_content = chapter
        .content
        .clone()
        .unwrap_or_else(|| EMPTY_HTML.to_string());

    let draft_title = RwSignal::new(chapter.title.clone());
    let draft_content = RwSignal::new(initial_content.clone());

    let msg = RwSignal::new(TiptapInstanceMsg::Noop);
    let selection = RwSignal::new(TiptapSelectionState::default());
    let disabled = Signal::derive(move || !course_editor_ctx.edit_mode.get());

    let on_set_value = Callback::new(move |(content,): (TiptapContent,)| match content {
        TiptapContent::Html(html) => {
            leptos::logging::log!("TipTap HTML update: {}", html);
            draft_content.set(html);
            course_editor_ctx.has_unsaved_changes.set(true);
        }
        TiptapContent::Json(json) => {
            // TODO: Switch to json when implemented in tiptap-leptos
            leptos::logging::warn!("Json returned (unexpected in current crate): {}", json);
        }
    });

    let reinit_tiptap = Callback::new(move |_| {
        tiptap_mounted.set(false);
        editor_version.update(|v| *v += 1);
        let timeout = gloo_timers::callback::Timeout::new(10, move || {
            tiptap_mounted.set(true);
        });
        timeout.forget();
    });

    Effect::new(move |_| {
        let timeout = gloo_timers::callback::Timeout::new(10, move || {
            tiptap_mounted.set(true);
        });
        timeout.forget();
    });

    Effect::new(move |_| {
        let on_save_cb = Callback::new({
            let chapter_id = chapter.id;
            move |_| {
                let title = draft_title.get_untracked();
                let content = draft_content.get_untracked();
                spawn_local(async move {
                    let payload = UpdateCourseNodeModel {
                        title: Some(title.clone()),
                        slug: None,
                        order: None,
                        parent_id: None,
                        content: Some(content.clone()),
                    };

                    match update_course_node(chapter_id, payload).await {
                        Ok(_) => {
                            course_data_ctx.refresh.update(|v| *v = !*v);
                            course_editor_ctx.has_unsaved_changes.set(false);
                            course_editor_ctx.edit_mode.set(false);
                        }
                        Err(e) => leptos::logging::error!("Save chapter failed: {e}"),
                    }
                });
            }
        });

        let on_cancel_cb = Callback::new({
            let chapter_title = chapter.title.clone();
            let chapter_content = chapter
                .content
                .clone()
                .unwrap_or_else(|| EMPTY_HTML.to_string());
            let reinit_tiptap = reinit_tiptap;
            move |_| {
                draft_title.set(chapter_title.clone());
                draft_content.set(chapter_content.clone());
                course_editor_ctx.has_unsaved_changes.set(false);
                editor_version.update(|v| *v += 1);
                reinit_tiptap.run(());
            }
        });

        let on_exit_cb = Callback::new({
            let chapter_title = chapter.title.clone();
            let chapter_content = chapter
                .content
                .clone()
                .unwrap_or_else(|| EMPTY_HTML.to_string());
            let reinit_tiptap = reinit_tiptap;
            move |_| {
                draft_title.set(chapter_title.clone());
                draft_content.set(chapter_content.clone());
                course_editor_ctx.has_unsaved_changes.set(false);
                course_editor_ctx.edit_mode.set(false);
                editor_version.update(|v| *v += 1);
                reinit_tiptap.run(());
            }
        });

        course_editor_ctx.on_save.set(Some(on_save_cb));
        course_editor_ctx.on_cancel.set(Some(on_cancel_cb));
        course_editor_ctx.on_exit.set(Some(on_exit_cb));
    });

    let toolbar = move || {
        view! {
            <div class="tiptap-toolbar">
                <button on:click=move |_| msg.set(TiptapInstanceMsg::H1)>"H1"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::H2)>"H2"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::H3)>"H3"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::H4)>"H4"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::H5)>"H5"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::H6)>"H6"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::Paragraph)>"P"</button>

                <button on:click=move |_| msg.set(TiptapInstanceMsg::Bold)>"B"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::Italic)>"I"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::Strike)>"S"</button>

                <button on:click=move |_| msg.set(TiptapInstanceMsg::BulletList)>"• List"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::OrderedList)>"1. List"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::Blockquote)>"❝"</button>

                <button on:click=move |_| msg.set(TiptapInstanceMsg::AlignLeft)>"⟸"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::AlignCenter)>"⇔"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::AlignRight)>"⟹"</button>
                <button on:click=move |_| msg.set(TiptapInstanceMsg::AlignJustify)>"Justify"</button>

                <button on:click=move |_| msg.set(TiptapInstanceMsg::SetLink(TiptapLinkResource {
                    href: "https://www.google.com/".to_string(),
                    target: "_blank".to_string(),
                    rel: "alternate".to_string(),
                }))>
                    "Link"
                </button>

                <button on:click=move |_| msg.set(TiptapInstanceMsg::UnsetLink())>"Unlink"</button>

                <button on:click=move |_| msg.set(TiptapInstanceMsg::SetYoutubeVideo(TiptapYoutubeVideoResource {
                    src: "https://www.youtube.com/embed/dQw4w9WgXcQ?si=6LwJzVo1t8hpLywC".to_string(),
                    start: "0".to_string(),
                    width: "640".to_string(),
                    height: "480".to_string(),
                }))>
                    "YouTube"
                </button>
            </div>
        }.into_any()
    };

    view! {
        <article class="chapter-content">
            <header class="chapter-header">
                <Show
                    when=move || course_editor_ctx.edit_mode.get()
                    fallback=move || view! { <h1 class="chapter-title">{draft_title.get()}</h1> }
                >
                    <input
                        class="chapter-title-input"
                        prop:value=move || draft_title.get()
                        on:input=move |ev| {
                            draft_title.set(event_target_value(&ev));
                            course_editor_ctx.has_unsaved_changes.set(true);
                        }
                    />
                </Show>
                <Show when=move || course_editor_ctx.edit_mode.get() && course_editor_ctx.has_unsaved_changes.get()>
                    <span class="unsaved-changes-indicator">"● Modifications non sauvegardées"</span>
                </Show>
            </header>
            <div class="chapter-body">
                <Show when=move || course_editor_ctx.edit_mode.get()>
                    {toolbar}
                </Show>
                <div class="tiptap-surface">
                    {leptos::logging::warn!("Draft content: {}", draft_content.get_untracked())}
                    <Show
                        when=move || tiptap_mounted.get()
                        fallback=move || view! {<div class="tiptap-loading">"Initialisation de l'éditeur..."</div>}
                    >
                        <TiptapInstance
                            id=tiptap_id
                            value=draft_content.get_untracked()
                            set_value=on_set_value
                            msg=msg
                            disabled=disabled
                            on_selection_change=move |state| selection.set(state)
                        />
                    </Show>
                </div>
            </div>
        </article>
    }
}

I added a timer to solve my problem, but I don't think this solution is very clean.

[gbj]

From my perspective, a straightforward way to do this would be to mount the TiptapInstance directly as a child of the Transition, and to pass the resource down to its value: i.e., to give it a fine-grained value rather than your current approach, which rerenders and remounts the whole thing whenever course_data_ctx.refresh changes. Of course I don't know the full context here.

If the setup you have here is what you really do want, there are probably some ways of doing it that feel less bad than an arbitrary 10ms timeout:

1. using request_animation_frame or similar instead (still just a timeout, but not an arbitrary one)
2. using a MutationObserver to watch for when the TiptapInstance is actually mounted to the DOM (which is what Tiptap sounds like it wants)

[CedricGARVENES]

I don't understand. I'm new to web development and don't have much experience with Rust yet. If I put my TiptapInstance as a direct child of Transition, it's no longer in my ChapterContent (and therefore changes location in my content's HTML). Also, the leptos-tiptap crate doesn't include all of tiptap's features, and I don't see anything about MutationObserver. And how does request_animation_frame work?
Finally, I agree that using course_data_ctx.refresh is really cumbersome.

To perhaps better explain my project, I want to implement a course update feature. I was looking for a rich content editor and came across leptos-tiptap. I want to be able to enter the edit mode of my course when I click on my edit button. This mode allows me to modify my chapters and their content via leptos-tiptap. But also to modify other elements of the course.

I added course_data_ctx.refresh because when I changed the chapter title, for example, the change was not reflected in the table of contents unless I reloaded the page.
I also added editor_version for tiptap_id because, according to the documentation, TiptapInstance only loads the value once. So, if I want the displayed content to remain consistent with my draft, I have to recreate an instance by modifying the version (even though I don't like doing that). To illustrate, I have a cancel button that reloads the initial content of my chapter. But when I clicked on it, the draft was modified, but not the content of the TiptapInstance. That's why I change the tiptap_id.

I haven't pushed these changes yet, but if you want, I can push them and give you the link to my repo because it's public.

[gbj]

MutationObserver is a browser API, not a leptos_tiptap feature.

how does request_animation_frame work?

requestAnimationFrame is also a function that's native to the browser; request_animation_frame is just the Rust-style name by which it's exported in leptos.

All I was suggesting about moving the TiptapInstance was the following:

Rather than

<Transition>
  {move || match some_resource.get() {
     None => "some message that will never be shown, because of the Transition fallback",
     Some(value) => {
       // this will rerun and create the TiptapInstance entirely from scratch every time the resource changes
     }
  }}
</Transition>

you consider

<Transition>
  // this will render the TiptapInstance once
  // you can have the whole component like this, it does not need to change the overall structure
  <TiptapInstance value=Signal::derive(move || some_resource.get().unwrap_or_default()/>
</Transition>

I have never used tiptap in general, or leptos_tiptap in particular, and it sounds like you know much more about them than I do. If this suggestion does not make sense, then no worries. You say "according to the documentation, TiptapInstance only loads the value once". In that case I don't understand why their API would take a Signal<String> but like I said -- I have not used the library.

[CedricGARVENES]

Okay, that's much clearer, thank you.
I did this:

Effect::new(move |_| {
        if tiptap_mounted.get() {
            return;
        }

        request_animation_frame(move || {
            tiptap_mounted.set(true);
        });
    });

And it works, I no longer have my error and TiptapInstance loads fine.

However, as you said, I don't know why TiptapInstance takes a value: Signal<String> because inside it does value.get_untracked(). And if I'm not mistaken, that's why when I modify my value, I don't see any change in my TiptapInstance. This forces me to use editor_version. After that, I think it's a different topic.

In the case of Transition and course_data_ctx.refresh, I only refresh when I reload my page or click on the save button. I need this to reload my information after an update in my database to ensure that I have the same version on the front and back ends. Let me know if I'm doing something wrong here. I would like to avoid using course_data_ctx.refresh, but that may be another topic for discussion. Should I open another Q&A for this topic and close this one?

[gbj]

LocalResource has a refetch method that you can call it fetch it again; using either that or a refresh signal is perfectly reasonable.