handling new emojis shortcodes

resources/css/editor-content/gutenberg.css

@@ -52,6 +52,7 @@ article > *:not(.entry-content, .chapter-header-block),
   .table-cell-icon--checked {
     @apply bg-green-600;
   }
+  .table-cell-icon--dashed,
   .table-cell-icon--crossed {
     @apply bg-white border-2 border-neutral-800;
   }

resources/img/graphic-assets/table-cell--dash.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.05" height="14.05" viewBox="0 0 14.05 14.05">
+  <path id="Tracé_3612" data-name="Tracé 3612" d="M-3933.656,6205.491l-7.117-7.1" transform="translate(-1594.38 -7162.442) rotate(-45)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
+</svg>

resources/js/editor.js

@@ -1,25 +1,72 @@
-export default function editorInit() {
+/**
-  const tablesCells = document.querySelectorAll('.wp-block-table td');
+ * Gestion des shortcodes dans l'éditeur
-  function filterCells(element, stringToParse) {
+ * Les shortcodes pris en charge et leurs remplacements sont les suivants :
-    return element.textContent.trim() === stringToParse;
+ * - `((v))` : Remplacé par une image avec une icône de vérification.
+ * - `((x))` : Remplacé par une image avec une icône de croix.
+ * - `((-))` : Remplacé par une image avec une icône tiret.
+ * - `(:-))` : Remplacé par une image avec une icône de croix.
+ * - `(:-|)` : Remplacé par une image avec une icône de croix.
+ * - `(:-()` : Remplacé par une image avec une icône de croix.
+ *
+ * @function
+ * @returns {void}
+ */
+
+function handleEditorShortCodes() {
+  // Sélectionnez tous les éléments avec la classe 'entry-content'
+  const editorContent = document.querySelector('.entry-content');
+  if (!editorContent) return;
+
+  const replacements = {
+    // ((v))
+    '\\(\\(v\\)\\)': `
+        <div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
+     alt="${mainAppJsDynamicDatas.yes}"/></div>
+    `,
+    // ((x))
+    '\\(\\(x\\)\\)': `
+        <img class="table-cell-icon table-cell-icon--crossed" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg" 
+             alt="Alternative"/>
+    `,
+    // ((-))
+    '\\(\\(-\\)\\)': `
+        <img class="table-cell-icon table-cell-icon--dashed" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--dash.svg" 
+             alt="Alternative"/>
+    `,
+    // (:-))
+    '\\(:-\\)\\)': `
+        <img class="table-cell-icon table-cell-icon--crossed" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg" 
+             alt="Possible"/>
+    `,
+    // (:-|)
+    '\\(:-\\|\\)': `
+        <img class="table-cell-icon table-cell-icon--crossed" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg" 
+             alt="Alternative"/>
+    `,
+    // (:-()
+    '\\(:-\\(\\)': `
+        <img class="table-cell-icon table-cell-icon--crossed" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg" 
+             alt="Alternative"/>
+    `,
+  };
+
+  // Fonction pour remplacer les shortcodes dans le contenu
+  function replaceShortcodes(content) {
+    for (const [shortcodePattern, replacementHTML] of Object.entries(replacements)) {
+      const regex = new RegExp(shortcodePattern, 'g');
+      content = content.replace(regex, replacementHTML);
+    }
+    return content;
   }
-  const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((v))'));
-  const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((x))'));
 
-  checkedCells.forEach((cell) => {
+  editorContent.innerHTML = replaceShortcodes(editorContent.innerHTML);
-    cell.innerHTML = `<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
+}
-      alt="${mainAppJsDynamicDatas.yes}"/></div>`;
+
-  });
+export default function editorInit() {
-  crossedCells.forEach((cell) => {
+  handleEditorShortCodes();
-    cell.innerHTML = `<img class="table-cell-icon table-cell-icon--crossed" src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
-      alt="${mainAppJsDynamicDatas.no}"/>`;
-  });
-
-  // tables.forEach((table) => {
-  //   const tableCells = contains('td', '((v))');
-  //   console.log(tableRows);
-  //   tableRows.forEach((row) => {
-  //     console.log(row);
-  //   });
-  // });
 }