From 45d3e1c9480b93acf429ce35d00a519d149d542c Mon Sep 17 00:00:00 2001
From: anulax1225 <anulax1225@icloud.com>
Date: Sun, 27 Apr 2025 22:20:26 +0200
Subject: [PATCH] Made a basique tuto when starting the editor

---
 resources/css/tiptap.css                  |  12 +++
 resources/js/Components/Editor/Editor.vue | 113 +++++++++++++++++-----
 2 files changed, 101 insertions(+), 24 deletions(-)

diff --git a/resources/css/tiptap.css b/resources/css/tiptap.css
index 39ef179..86567a8 100644
--- a/resources/css/tiptap.css
+++ b/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;
   }
diff --git a/resources/js/Components/Editor/Editor.vue b/resources/js/Components/Editor/Editor.vue
index 0d862e5..e9403ef 100644
--- a/resources/js/Components/Editor/Editor.vue
+++ b/resources/js/Components/Editor/Editor.vue
@@ -34,32 +34,97 @@ const props = defineProps({
   content: {
     type: Object || String,
     default: `
-    <h2>
-        Présentation du groupe
-        </h2>
-        <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 :
-        </p>
-        <ul>
+      <h2 style="text-align: left">Bienvenue dans l'éditeur de page ✨</h2>
+      <p style="text-align: left">Voici les fonctionnalités disponibles :</p>
+      <h3 style="text-align: left">1. Mise en forme de texte</h3>
+      <p style="text-align: left">Essayez les boutons de la barre d'outils pour :</p>
+      <ul>
+        <li><p style="text-align: left"><strong>Gras</strong> (Ctrl+B)</p></li>
+        <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>
-              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.  
-            </p>
+          <p style="text-align: left">Structurez votre contenu</p>
+          <ul>
+            <li><p style="text-align: left">Liste dans une liste </p></li>
+          </ul>
         </li>
-        <li>
-           <b>Branche Eclais (11 – 15 ans) :</b>
-            <p>
-              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.
-              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.
-            </p>
-        </li>
-        </ul>
-        <p>
-          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.
-          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.
-          N’hésitez pas à nous contacter si vous souhaitez avoir plus d’informations concernant notre groupe ou nos séances.
-        </p>
+      </ul>
+      <ol>
+        <li><p style="text-align: left">Liste numérotée</p></li>
+        <li><p style="text-align: left">Étapes séquentielles</p></li>
+      </ol>
+      <h3 style="text-align: left">4. Element (Conteneur)</h3>
+      <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>
+      <p style="text-align: left">Quelques examples :</p>
+      <blockquote>
+        <p style="text-align: left">Voici une citation</p>
+        <p style="text-align: left">- Vinayak Ambigapathy 2025</p>
+      </blockquote>
+      <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: {