Upg: improve builder UX when using a template for instructions

[Fraggle]

Description

Animate as a typewriter the instructions for an assistant when using a template, then focus on it and put cursor at the end.

In respect to this comment we investigated a bit more and found a couple things:

• editor from useEditor will mutate (eg: as part of hook dependencies) on content change (doc)
• even when using an extension with a lower access to the input component, it still mutate.
• hence, useMemo() (such as for xxxEditorService) will probably not do what we expect.
• other solutions to achieve the typewriter effect will not work for multi-lines content (we cannot access individual letters)

We decided to keep the implementation like that for now and revisit later.

Enregistrement.de.l.ecran.2024-08-09.a.09.21.16.mov

Risk

A bug could led the input box to be uneditable.

Deploy Plan

Deploy front

[fontanierh]

LGTM

[flvndvd]

The gif is 🔥, left a global comment as it might create too many re-renderings.

[flvndvd]

Looking more at this, it's pretty heavy re-rendering. For each letter we will re-render this component. Either you move this outside of this component so the useEffect is not part of a rendered component but only uses the TipTap API to play the animation. This use case is also often achieve using requestanimationframe. Also I'm wondering if we could not leverage CSS styles here, with something like this:

    editor.chain()
      .setContent(`<span class="typewriter-effect">${textContent}</span>`)
      .focus("end")
      .run();

    // Set editable to false while typewriter effect is running
    editor.setEditable(false);

    // Once the animation is complete, set editable to true
    const animationDuration = 4000; // Duration should match the CSS animation duration
    const timeoutId = setTimeout(() => {
      editor.setEditable(true);
      setDoTypewriterEffect(false);
    }, animationDuration);

[Fraggle]

Added some comments and we transcript our findings in PR description.