diff --git a/src/components/Participation/NewPrivateMessage.vue b/src/components/Participation/NewPrivateMessage.vue index 914133d8e..f6f2d595a 100644 --- a/src/components/Participation/NewPrivateMessage.vue +++ b/src/components/Participation/NewPrivateMessage.vue @@ -32,6 +32,7 @@ v-if="currentActor" :currentActor="currentActor" :placeholder="t('Write a new message')" + :required="true" /> - + +

+ {{ editorErrorMessage }} +

@@ -249,7 +257,7 @@ import Underline from "@tiptap/extension-underline"; import Link from "@tiptap/extension-link"; import { AutoDir } from "./Editor/Autodir"; // import sanitizeHtml from "sanitize-html"; -import { computed, inject, onBeforeUnmount, watch } from "vue"; +import { computed, inject, onBeforeUnmount, ref, watch } from "vue"; import { Dialog } from "@/plugins/dialog"; import { useI18n } from "vue-i18n"; import { useMutation } from "@vue/apollo-composable"; @@ -279,11 +287,13 @@ const props = withDefaults( currentActor: IPerson; placeholder?: string; headingLevel?: Level[]; + required?: boolean; }>(), { mode: "description", maxSize: 100_000_000, headingLevel: () => [3, 4, 5], + required: false, } ); @@ -333,7 +343,7 @@ const editor = useEditor({ "aria-label": ariaLabel.value ?? "", role: "textbox", class: - "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-zinc-50 dark:bg-zinc-700 focus:outline-none !max-w-full", + "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-white dark:bg-zinc-700 focus:outline-none !max-w-full", }, transformPastedHTML: transformPastedHTML, }, @@ -373,6 +383,13 @@ const editor = useEditor({ onUpdate: () => { emit("update:modelValue", editor.value?.getHTML()); }, + onBlur: () => { + checkEditorEmpty(); + }, + onFocus: () => { + editorErrorStatus.value = false; + editorErrorMessage.value = ""; + }, }); watch(value, (val: string) => { @@ -470,6 +487,18 @@ defineExpose({ replyToComment, focus }); onBeforeUnmount(() => { editor.value?.destroy(); }); + +const editorErrorStatus = ref(false); +const editorErrorMessage = ref(""); + +const isEmpty = computed( + () => props.required === true && editor.value?.isEmpty === true +); + +const checkEditorEmpty = () => { + editorErrorStatus.value = isEmpty.value; + editorErrorMessage.value = isEmpty.value ? t("You need to enter a text") : ""; +}; diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json index f0dc97d7a..7d8b1ec49 100644 --- a/src/i18n/en_US.json +++ b/src/i18n/en_US.json @@ -1642,5 +1642,6 @@ "Visit {instance_domain}": "Visit {instance_domain}", "Software details: {software_details}": "Software details: {software_details}", "Only instances with an application actor can be followed": "Only instances with an application actor can be followed", - "Domain or instance name": "Domain or instance name" + "Domain or instance name": "Domain or instance name", + "You need to enter a text": "You need to enter a text" } \ No newline at end of file diff --git a/src/i18n/fr_FR.json b/src/i18n/fr_FR.json index b3babdb35..ced69a4b1 100644 --- a/src/i18n/fr_FR.json +++ b/src/i18n/fr_FR.json @@ -1636,5 +1636,6 @@ "Visit {instance_domain}": "Visiter {instance_domain}", "Software details: {software_details}": "Détails du logiciel : {software_details}", "Only instances with an application actor can be followed": "Seules les instances avec un acteur application peuvent être suivies", - "Domain or instance name": "Domaine ou nom de l'instance" + "Domain or instance name": "Domaine ou nom de l'instance", + "You need to enter a text": "Vous devez entrer un texte" }