Affiche les zones de saisie même lorsque les CSS sont désactivées (#1120)

* add fake border and label when css is disabled

* add tiptap placeholder extension

* visually show editor when css is disabled

* rename classes

* only show placeholde when editor is editable

* remove tiptap placeholder

* fix wrong import

* fix yarn lock

* add end line to yarn lock

* update changelog

Author: bellangerq

CHANGELOG.md

@@ -4,6 +4,16 @@
 
 <h2 class="fr-sr-only" id="2025">2025</h2>
 
+### 28/05/2025
+
+#### <span aria-hidden="true">⚙️</span> Autres changements
+
+- Modifie le thème visuel des blocs de code de l’éditeur pour assurer un bon contraste des couleurs ([#1124](https://github.com/DISIC/Ara/pull/1124))
+
+#### <span aria-hidden="true">🐛</span> Corrections
+
+- Corrige l’affichage de l’éditeur lorsque les CSS sont désactivées ([#1120](https://github.com/DISIC/Ara/pull/1120))
+
 ### 22/05/2025
 
 #### <span aria-hidden="true">🐛</span> Corrections

confiture-web-app/src/components/tiptap/TiptapEditor.vue

@@ -270,14 +270,40 @@ defineExpose({
         </ul>
       </li>
     </ul>
-    <editor-content :editor="editor" />
+
+    <!-- Visually show the editor with a border and a label when CSS is disabled -->
+    <p class="tiptap__fake-label" aria-hidden="true">
+      Erreur et recommandation
+    </p>
+    <table
+      role="presentation"
+      border="1"
+      width="100%"
+      class="tiptap__fake-table"
+    >
+      <tr>
+        <td>
+          <editor-content :editor="editor" />
+        </td>
+      </tr>
+    </table>
   </div>
 </template>
 
 <style>
 @import url("./tiptap.css");
 @import url("./tiptap-hljs.css");
 
+/* Handle case when CSS is disabled */
+.tiptap__fake-label {
+  display: none;
+}
+
+.tiptap__fake-table,
+.tiptap__fake-table td {
+  border: none;
+}
+
 /* Container */
 .tiptap-container {
   position: relative;