From 6aacf5334ab52971f0c6506292652f9a19c7e912 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Mon, 19 Aug 2024 16:49:49 +0200
Subject: [PATCH] handling new smileys shortcodes

---
 resources/css/editor-content/gutenberg.css    | 11 +++++---
 .../homegrade_smiley-pratique-bonne.svg       | 24 +++++++++++++++++
 ...omegrade_smiley-pratique-intermediaire.svg | 26 +++++++++++++++++++
 .../homegrade_smiley-pratique-mauvaise.svg    | 24 +++++++++++++++++
 resources/js/editor.js                        | 18 ++++++-------
 5 files changed, 90 insertions(+), 13 deletions(-)
 create mode 100644 resources/img/graphic-assets/homegrade_smiley-pratique-bonne.svg
 create mode 100644 resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.svg
 create mode 100644 resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg

diff --git a/resources/css/editor-content/gutenberg.css b/resources/css/editor-content/gutenberg.css
index 768bda0..2da4d60 100644
--- a/resources/css/editor-content/gutenberg.css
+++ b/resources/css/editor-content/gutenberg.css
@@ -42,20 +42,23 @@ article > *:not(.entry-content, .chapter-header-block),
     }
   }
 
-  .table-cell-icon {
+  .homegrade-shortcode-icon {
     @apply mx-auto p-2 w-fit h-auto  rounded-full flex items-center justify-center relative grow-0;
     aspect-ratio: 1;
     img {
       @apply w-4 h-4;
     }
   }
-  .table-cell-icon--checked {
+  .homegrade-shortcode-icon--checked {
     @apply bg-green-600;
   }
-  .table-cell-icon--dashed,
-  .table-cell-icon--crossed {
+  .homegrade-shortcode-icon--dashed,
+  .homegrade-shortcode-icon--crossed {
     @apply bg-white border-2 border-neutral-800;
   }
+  .homegrade-shortcode-icon--smiley {
+    @apply p-0 !w-8 !h-8 object-contain object-center;
+  }
 }
 
 .wp-block-columns {
diff --git a/resources/img/graphic-assets/homegrade_smiley-pratique-bonne.svg b/resources/img/graphic-assets/homegrade_smiley-pratique-bonne.svg
new file mode 100644
index 0000000..0537d7a
--- /dev/null
+++ b/resources/img/graphic-assets/homegrade_smiley-pratique-bonne.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="smiley-pratique-bonne" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #00a165;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: #00a165;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
+  <g>
+    <path id="oeil-gauche" class="cls-2" d="M15.46,11.7h0c1.22,0,2.2.99,2.2,2.2v5.94h-4.4v-5.94c0-1.22.99-2.2,2.2-2.2Z"/>
+    <path id="oeil-droit" class="cls-2" d="M24.38,11.7h0c1.22,0,2.2.99,2.2,2.2v5.94h-4.4v-5.94c0-1.22.99-2.2,2.2-2.2Z"/>
+  </g>
+  <path id="bouche" class="cls-1" d="M27.9,24.75c-1.49,2.98-4.53,4.9-7.85,4.95-3.41.05-6.57-1.88-8.11-4.95"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.svg b/resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.svg
new file mode 100644
index 0000000..3ad689d
--- /dev/null
+++ b/resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="smiley-pratique-intermediaire" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #c24503;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: #c24503;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
+  <g>
+    <g>
+      <rect id="oeil-gauche" class="cls-2" x="13.26" y="11.7" width="4.4" height="8.15"/>
+      <rect id="oeil-droit" class="cls-2" x="22.18" y="11.7" width="4.4" height="8.15"/>
+    </g>
+    <line id="bouche" class="cls-1" x1="11.02" y1="28.26" x2="28.82" y2="28.26"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg b/resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg
new file mode 100644
index 0000000..7d640c9
--- /dev/null
+++ b/resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="smiley-pratique-mauvaise" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #df1e1e;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: #df1e1e;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
+  <g>
+    <rect id="oeil-gauche" class="cls-2" x="13.28" y="13.36" width="4.4" height="4.9"/>
+    <rect id="oeil-droit" class="cls-2" x="22.2" y="13.36" width="4.4" height="4.9"/>
+    <path id="bouche" class="cls-1" d="M12.27,29.13c3.36,1.13,5.03.86,5.93.4,1.61-.82,1.12-2.38,3.03-3.29,1.24-.59,3.05-.7,4.48-.1.83.35,1.47.92,1.86,1.6"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/resources/js/editor.js b/resources/js/editor.js
index 4df4ecb..dc07535 100644
--- a/resources/js/editor.js
+++ b/resources/js/editor.js
@@ -20,37 +20,37 @@ function handleEditorShortCodes() {
   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"
+        <div class="homegrade-shortcode-icon homegrade-shortcode-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" 
+        <img class="homegrade-shortcode-icon homegrade-shortcode-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" 
+        <img class="homegrade-shortcode-icon homegrade-shortcode-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" 
+        <img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-good" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-bonne.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" 
+        <img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-neutral" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.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" 
+        <img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-bad" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg" 
              alt="Alternative"/>
     `,
   };