add info message for space between emoji and text

snippets/shx-3d-render-input.liquid

@@ -552,6 +552,22 @@
     // Regular expression to match emoji characters
     const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F700}-\u{1F77F}]|[\u{1F780}-\u{1F7FF}]|[\u{1F800}-\u{1F8FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1FA00}-\u{1FA6F}]|[\u{1FA70}-\u{1FAFF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{2B50}-\u{2B55}]|[\u{1F1E6}-\u{1F1FF}]/u;
         
+    // this function is to show the user a help message if there could be spacing added between emojis and text
+    function isEmojiSpacingOk(text) {
+        // regex to find emojis followed by a letter or another emoji without a space in between
+        let regex = /([\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}])([^\s]|$)/gu;
+    
+        // check if the regex finds a matching pattern
+        let match;
+        while ((match = regex.exec(text)) !== null) {
+            if (match[2] !== ' ' && match[2] !== '') {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
     function SHX_IFC_genTextInput(inputID, labelText, inputName, inputVal, section_id, maxLength = 24, emojisSupported = false) {
         function handleInputLabel(value) {
             let inputLabel = document.querySelector(`label[for="${inputID}-label"] span`)
@@ -585,6 +601,15 @@
                 } else if (!emojisSupported && value.indexOf(" ") !== -1) {
                     inputLabel.textContent = 'Leerzeichen werden bei diesem Typ nicht unterstützt. Bitte wechsle zu "Mit Hintergrund"';
                     inputLabel.style.color = 'red';
+                } else if (emojisSupported && !isEmojiSpacingOk(value)) {
+                    document.querySelector('#shx-info-text').style.innerHTML = 'red';
+                    document.querySelector('#shx-info-text').style.color = 'red';
+                    document.querySelector('#shx-info-text').style.display = 'block';
+
+                    // hide the text after 8 seconds
+                    setTimeout(() => {
+                        document.querySelector('#shx-info-text').style.display = 'none';
+                    }, 8000);
                 }
             }
         }
@@ -1023,6 +1048,8 @@
                 document.querySelector('#shx-fontSize').dispatchEvent(new Event('change'));
 
                 // show info text that the text is too long and we set the font size to small
+                this.infoText.style.color = 'red';
+                this.infoText.innerHTML = 'Text ist zu lang. Wir haben die <span style="font-weight: 600">Schriftgröße</span> auf <span style="font-weight: 600">klein</span> gesetzt. Bitte überprüfe deinen Text.';
                 document.querySelector('#shx-info-text').style.display = 'block';
 
                 // hide the text after 8 seconds
@@ -1154,8 +1181,6 @@
                 this.infoText = document.createElement('span');
                 this.infoText.id = 'shx-info-text';
                 this.infoText.style.display = 'none';
-                this.infoText.style.color = 'red';
-                this.infoText.innerHTML = 'Text ist zu lang. Wir haben die <span style="font-weight: 600">Schriftgröße</span> auf <span style="font-weight: 600">klein</span> gesetzt. Bitte überprüfe deinen Text.';
                 this.container.appendChild(this.infoText);
             }