ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Fix detection

This commit is contained in:
Lorenz Padberg 2024-05-16 00:19:53 +02:00
parent 8049428fb1
commit e23549c677
1 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/components/content-blocks/assignment/SubmissionInput.vue
View File

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