Add a tutorial on newly introduce Spell Checker

[lebaudantoine]

To-do:

• [ ] Fix vertical overflow
• [ ] Style the pop-in, edit: won't lose time on a tutorial seen once, 2min.
• [x] Disable interactivity of high-lighted elements

Brainsto:

• Add more steps?
• Specify a unique cookie name to prevent potential collisions when more tutorials are added in the future
• Improve the UX by making the Grist form more visible (currently, it's quite hidden).
• Have a way to trigger the tutorial manually?
• How to avoid increase in support if user are unhappy?

[lebaudantoine]

As of tonight, the current styling of the tutorial:

https://github.com/user-attachments/assets/2b2728a1-85fc-43b1-b5d8-fcd5266b5aac

[manuhabitela]

On my firefox it renders like this on the staging platform: :grimacing:

edit: fixed that with an example implementation below

[manuhabitela]

Dont know if I understand correctly but when testing locally as a user, I had to explicitly enable the feature by clicking the check icon in the bottom so that the tutorial shows up. Is it what we really want?

I guess we could just check for the presence of the spellcheck feature flag enabled, and add a "fake" status icon just for the tutorial if the spellcheck icon is not checked by default?

[manuhabitela]

Here is my take on it:

// javascript
-  introJs().setOptions({
+  const intro = introJs().setOptions({
    dontShowAgain: true, // Override styles to hide the checkbox
    nextLabel: 'Suivant',
    prevLabel: 'Précédent',
    doneLabel: 'Terminé',
    highlightClass: 'custom-introjs-helperLayer',
    showBullets: false,
+   disableInteraction: true,
+   exitOnOverlayClick: false,
    steps: [
      {
        title: 'Nouveauté',
       intro: "La correction orthographique est disponible en version bêta. Vous pouvez l'activer ou la  désactiver en cochant cette case.",
        element: spellCheckToggle
      },
      {
        title: 'Feedbacks',
       intro: "Ce statut vous informera de l'état de votre document. Une fois le tutoriel terminé, cliquez  dessus à tout moment pour partager vos feedbacks.",
        element: spellCheckStatus
      }
    ]
-  }).start()
+  })
+  intro.onexit(() => {
+    document.querySelector('body').classList.remove('introjs-tour')
+    intro.setDontShowAgain(true)
+  })
+  intro.start()

// css
+ body.introjs-tour {
+     overflow: hidden;
+ }

• this makes the tutorial more user-error proof without the overlay click
• we set to not show it again after we exited (on esc key, on close icon, on tutorial steps ended), making sure just a page reload doesn't hide it
• we disable interaction on items
• the overflow hidden tricks resolves your vertical overflow bullet point that created the positioning issue of my screenshot

This doesn't solve my previous comment though and I also didn't include my wording suggestions, I'll let you do what you wish.