Made a basique tuto when starting the editor

resources/css/tiptap.css

@@ -53,6 +53,14 @@ .tiptap-editor {
     margin-bottom: 0.5rem;
     line-height: 1.4;
   }
+
+  .tiptap-editor h4 {
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-top: 0.7rem;
+    margin-bottom: 0.3rem;
+    line-height: 0.6;
+  }
   
   .tiptap-editor > p {
     margin-top: 0.75rem;
@@ -67,6 +75,10 @@ .tiptap-editor {
     margin-bottom: 0.75rem;
   }
 
+  .tiptap-editor ol {
+    list-style: decimal;
+  }
+
   .tiptap-editor ul {
     list-style: disc;
   }

resources/js/Components/Editor/Editor.vue

@@ -34,32 +34,97 @@ const props = defineProps({
   content: {
     type: Object || String,
     default: `
-    <h2>
+      <h2 style="text-align: left">Bienvenue dans l'éditeur de page ✨</h2>
-        Présentation du groupe
+      <p style="text-align: left">Voici les fonctionnalités disponibles :</p>
-        </h2>
+      <h3 style="text-align: left">1. Mise en forme de texte</h3>
-        <p>
+      <p style="text-align: left">Essayez les boutons de la barre d'outils pour :</p>
-        Notre groupe compte aujourd’hui près de 40 membres. Ils et elles sont réparti·es répartis dans quatre différentes branches :
+      <ul>
-        </p>
+        <li><p style="text-align: left"><strong>Gras</strong> (Ctrl+B)</p></li>
-        <ul>
+        <li><p style="text-align: left"><em>Italique</em> (Ctrl+I)</p></li>
+        <li><p style="text-align: left"><s>Barré</s></p></li>
+        <li><p style="text-align: left">et plein d'autre</p></li>
+      </ul>
+      <h3 style="text-align: left">2. Titres et hiérarchie</h3>
+      <p style="text-align: left">Utilisez le menu déroulant pour choisir parmi 4 niveaux de titres</p>
+      <h1 style="text-align: left">Titre 1</h1>
+      <h2 style="text-align: left">Titre 2</h2>
+      <h3 style="text-align: left">Titre 3</h3>
+      <h4 style="text-align: left">Titre 4</h4>
+      <h3 style="text-align: left">3. Listes</h3>
+      <ul>
+        <li><p style="text-align: left">Liste à puces</p></li>
         <li>
-            <b>Branche Louveteaux (7 – 11 ans) :</b>
+          <p style="text-align: left">Structurez votre contenu</p>
-            <p>
+          <ul>
-              Dès 7 ans, un enfant peut participer à nos activités en tant que louveteaux ou louvette. Réparti·es en sizaines formant ainsi une meute, les louveteaux et les louvettes découvrent le scoutisme à travers l’histoire du livre de la jungle et réalisent des jeux, bricolages ou autres activités adaptées à leur âge.  
+            <li><p style="text-align: left">Liste dans une liste </p></li>
-            </p>
+          </ul>
         </li>
-        <li>
+      </ul>
-           <b>Branche Eclais (11 – 15 ans) :</b>
+      <ol>
-            <p>
+        <li><p style="text-align: left">Liste numérotée</p></li>
-              A partir de 11 ans, les jeunes de notre groupe font partie de la branche éclais. Ils et elles sont séparé·es en patrouilles qui forment une troupe. Durant les activités préparées et encadrées par les responsables, ils et elles apprennent à devenir autonome en approfondissant certains domaines comme les techniques de corde, topographie, cuisine, etc.
+        <li><p style="text-align: left">Étapes séquentielles</p></li>
-              Les plus grand·es éclais ont également la possibilité d’organiser eux·elles-mêmes des activités ou même des petits camps pour leurs patrouilles. Les responsables sont là pour leur expliquer comment planifier ces activités et encadrer des enfants plus jeunes.
+      </ol>
-            </p>
+      <h3 style="text-align: left">4. Element (Conteneur)</h3>
-        </li>
+      <p style="text-align: left">Les <em>conteneurs </em>structurent les éléments visuels de manière <strong>isolée</strong> et <strong>cohérente</strong>.</p>
-        </ul>
+      <p style="text-align: left">Quelques examples :</p>
-        <p>
+      <blockquote>
-          Envie de faire découvrir le scoutisme à votre enfant ? Pas de problème! Il est possible de rejoindre notre groupe à n’importe quel moment de l’année.
+        <p style="text-align: left">Voici une citation</p>
-          Il suffit de venir à nos locaux durant l’une de nos activités. Nous recommandons aux enfants de venir essayer nos activités pendant plusieurs séances avant de décider s’il souhaite s’inscrire au groupe ou non.
+        <p style="text-align: left">- Vinayak Ambigapathy 2025</p>
-          N’hésitez pas à nous contacter si vous souhaitez avoir plus d’informations concernant notre groupe ou nos séances.
+      </blockquote>
-        </p>
+      <p style="text-align: left"><br class="ProseMirror-trailingBreak"></p>
+      <pre>
+        <code>Voici une note </code>
+      </pre>
+      <p style="text-align: left">D’autre element arriverons bientot pour vous permettre de faire des page manifique.</p>
+      <h3>5. Tableaux structurés</h3>
+      <p>Créez des tableaux :</p>
+      <table class="demo-table">
+        <thead>
+          <tr>
+            <th>Fonctionnalité</th>
+            <th>Raccourci</th>
+            <th>Exemple</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Ligne horizontale</td>
+            <td>Ctrl+Shift+H</td>
+            <td><hr></td>
+          </tr>
+          <tr>
+            <td>Cellule de titre</td>
+            <td>Toujour en gras et au bord du tableau avec la cellule grisé</td>
+            <th>Titre</th>
+          </tr>
+          <tr>
+            <td>Cellule standard</td>
+            <td>La classique</td>
+            <td>Contenu</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="3">Astuce : Utilisez Tab pour naviguer entre les cellules</td>
+          </tr>
+        </tfoot>
+      </table>
+
+      <p>Fonctionnalités disponibles :</p>
+      <ul>
+        <li>Insertion/suppression de lignes/colonnes</li>
+        <li>Fusion/séparation de cellules</li>
+        <li>Alignement du contenu</li>
+      </ul>
+      <p>Certaines de ces fonctionnalité ne fonctionne pas encore au mieux mais cela devrait changer bientot.</p>
+      <h3 style="text-align: left">6. Raccourcis clavier</h3>
+      <p style="text-align: left">Voici quelque racourci clavier. Essayez ces combinaisons :</p>
+      <ul>
+        <li><p style="text-align: left">Ctrl+Z → Annuler</p></li>
+        <li><p style="text-align: left">Ctrl+Shift+Z → Rétablir</p></li>
+        <li><p style="text-align: left">Ctrl+Shift+8 → Liste à puces</p></li>
+        <li><p style="text-align: left">Ctrl+Shift+7 → Liste numérotée</p></li>
+      </ul>
     `
   },
   editable: {