From e23549c677dd347ef87808b6ec8e9e20f7ecec4a Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 16 May 2024 00:19:53 +0200
Subject: [PATCH] Fix detection

---
 .../assignment/SubmissionInput.vue            | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/client/src/components/content-blocks/assignment/SubmissionInput.vue b/client/src/components/content-blocks/assignment/SubmissionInput.vue
index 954978e5..489b151e 100644
--- a/client/src/components/content-blocks/assignment/SubmissionInput.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionInput.vue
@@ -3,11 +3,11 @@
     <textarea
       :placeholder="placeholder"
       :readonly="readonly"
-      v-model="editText"
       :class="{ 'submission-form__textarea--readonly': readonly }"
       data-cy="submission-textarea"
       rows="1"
       class="borderless-textarea"
+      v-model="editText"
       v-auto-grow
       @input="input"
     />
@@ -23,14 +23,12 @@
     >
       <loading-icon class="submission-form__save-status-icon submission-form__saving-icon" />
     </div>
-
-
   </div>
 </template>
 
 <script setup lang="ts">
-  import {defineAsyncComponent, ref, watch} from 'vue';
-  import EmojiBar from "@/components/ui/EmojiBar.vue";
+import { defineAsyncComponent, ref, watch } from 'vue';
+
 const TickCircleIcon = defineAsyncComponent(() => import('@/components/icons/TickCircleIcon.vue'));
 const LoadingIcon = defineAsyncComponent(() => import('@/components/icons/LoadingIcon.vue'));
 
@@ -45,24 +43,30 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Ergebnis erfassen',
 });
 
-const editText = ref(props.inputText)
+const editText = ref(props.inputText);
 
 const emit = defineEmits(['input']);
 
-const  containsEmoji = (text: String) =>{
-  const emojis= ['🖐️', '👍', '👎', '👏', '👋', '🎉', '😍', '😮', '🤔']
-  const graphemes = Array.from(text);
-  const lastGrapheme = graphemes[graphemes.length - 1];
-  return emojis.includes(lastGrapheme);
-}
+const containsEmoji = (text: string) => {
+  const lastCharacter = Array.from(text)[Array.from(text).length - 1];
+  if (lastCharacter.charCodeAt(0)> 55000) //fix for the hand symbol 🖐️
+    return true
+  const emojiRegex = /\p{Emoji}/u;
+  return emojiRegex.test(lastCharacter);
+};
 
-watch(() => props.inputText, (newValue) => {
-  // TODO: Lorenz this is an ugly fix!
-  if (containsEmoji(newValue)){
+watch(
+  () => props.inputText,
+  (newValue) => {
+    // TODO: Lorenz this is an ugly fix!
+    console.log(newValue)
+
+    if (containsEmoji(newValue)) {
+      console.log("emoji found", newValue)
       editText.value = newValue;
+    }
   }
-});
-
+);
 
 const input = (e: Event) => {
   const value = (e.target as HTMLInputElement).value;