diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index 993b60b..a04714a 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/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 Schriftgröße auf klein 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 Schriftgröße auf klein gesetzt. Bitte überprüfe deinen Text.';
this.container.appendChild(this.infoText);
}