Various UI fixes, add placeholder to the text editor

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Comment/CommentTree.vue

@@ -26,6 +26,7 @@
                 v-model="newComment.text"
                 :aria-label="t('Comment body')"
                 @submit="createCommentForEvent(newComment)"
+                :placeholder="t('Write a new comment')"
               />
               <p class="" v-if="emptyCommentError">
                 {{ t("Comment text can't be empty") }}

js/src/components/Comment/EventComment.vue

@@ -155,6 +155,7 @@
               :aria-label="t('Comment body')"
               class="flex-1"
               @submit="replyToComment"
+              :placeholder="t('Write a new reply')"
             />
             <o-button
               :disabled="newComment.text.trim().length === 0"
@@ -201,7 +202,7 @@
   </li>
 </template>
 <script lang="ts" setup>
-import EditorComponent from "@/components/TextEditor.vue";
+import type EditorComponent from "@/components/TextEditor.vue";
 import { formatDistanceToNow } from "date-fns";
 import { CommentModeration } from "@/types/enums";
 import { CommentModel, IComment } from "../../types/comment.model";

js/src/components/Discussion/DiscussionComment.vue

@@ -22,7 +22,7 @@
           <small>@{{ usernameWithDomain(comment.actor) }}</small>
         </div>
         <span v-else class="name comment-link has-text-grey">
-          {{ $t("[deleted]") }}
+          {{ t("[deleted]") }}
         </span>
         <span
           class="icons"
@@ -43,7 +43,7 @@
               aria-role="menuitem"
             >
               <o-icon icon="pencil"></o-icon>
-              {{ $t("Edit") }}
+              {{ t("Edit") }}
             </o-dropdown-item>
             <o-dropdown-item
               v-if="comment.actor?.id === currentActor?.id"
@@ -51,11 +51,11 @@
               aria-role="menuitem"
             >
               <o-icon icon="delete"></o-icon>
-              {{ $t("Delete") }}
+              {{ t("Delete") }}
             </o-dropdown-item>
             <!-- <o-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
               <o-icon icon="flag" />
-              {{ $t("Report") }}
+              {{ t("Report") }}
             </o-dropdown-item> -->
           </o-dropdown>
         </span>
@@ -67,7 +67,7 @@
             {{
               formatDistanceToNow(new Date(comment.updatedAt?.toString()), {
                 locale: dateFnsLocale,
-              }) || $t("Right now")
+              }) || t("Right now")
             }}</span
           >
         </div>
@@ -92,7 +92,7 @@
           :title="formatDateTimeString(comment.updatedAt.toString())"
         >
           {{
-            $t("Edited {ago}", {
+            t("Edited {ago}", {
               ago: formatDistanceToNow(new Date(comment.updatedAt), {
                 locale: dateFnsLocale,
               }),
@@ -101,23 +101,24 @@
         </p>
       </div>
       <div class="comment-deleted" v-else-if="!editMode">
-        {{ $t("[This comment has been deleted by it's author]") }}
+        {{ t("[This comment has been deleted by it's author]") }}
       </div>
       <form v-else class="edition" @submit.prevent="updateComment">
         <Editor
           v-model="updatedComment"
-          :aria-label="$t('Comment body')"
+          :aria-label="t('Comment body')"
           :current-actor="currentActor"
+          :placeholder="t('Write a new message')"
         />
         <div class="flex gap-2 mt-2">
           <o-button
             native-type="submit"
             :disabled="['<p></p>', '', comment.text].includes(updatedComment)"
             variant="primary"
-            >{{ $t("Update") }}</o-button
+            >{{ t("Update") }}</o-button
           >
           <o-button native-type="button" @click="toggleEditMode">{{
-            $t("Cancel")
+            t("Cancel")
           }}</o-button>
         </div>
       </form>
@@ -132,6 +133,7 @@ import { computed, defineAsyncComponent, inject, ref } from "vue";
 import { formatDateTimeString } from "@/filters/datetime";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import type { Locale } from "date-fns";
+import { useI18n } from "vue-i18n";
 
 const Editor = defineAsyncComponent(
   () => import("@/components/TextEditor.vue")
@@ -144,6 +146,8 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:modelValue", "deleteComment"]);
 
+const { t } = useI18n({useScope: 'global'});
+
 const comment = computed(() => props.modelValue);
 
 const editMode = ref(false);

js/src/components/Event/OrganizerPicker.vue

@@ -31,7 +31,7 @@
           :id="`availableActor-${availableActor?.id}`"
         />
         <label
-          class="flex flex-wrap p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
+          class="flex flex-wrap gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
           :for="`availableActor-${availableActor?.id}`"
         >
           <figure class="h-12 w-12" v-if="availableActor?.avatar">

js/src/components/TextEditor.vue

@@ -238,6 +238,7 @@ import FormatListNumbered from "vue-material-design-icons/FormatListNumbered.vue
 import FormatQuoteClose from "vue-material-design-icons/FormatQuoteClose.vue";
 import Undo from "vue-material-design-icons/Undo.vue";
 import Redo from "vue-material-design-icons/Redo.vue";
+import Placeholder from '@tiptap/extension-placeholder'
 
 const props = withDefaults(
   defineProps<{
@@ -246,6 +247,7 @@ const props = withDefaults(
     maxSize?: number;
     ariaLabel?: string;
     currentActor: IPerson;
+    placeholder?: string;
   }>(),
   {
     mode: "description",
@@ -291,6 +293,8 @@ const transformPastedHTML = (html: string): string => {
   return html;
 };
 
+const { t } = useI18n({ useScope: "global" });
+
 const editor = useEditor({
   editorProps: {
     attributes: {
@@ -327,6 +331,9 @@ const editor = useEditor({
     RichEditorKeyboardSubmit.configure({
       submit: () => emit("submit"),
     }),
+    Placeholder.configure({
+      placeholder: props.placeholder ?? t('Write something')
+    })
   ],
   injectCSS: false,
   content: props.modelValue,
@@ -345,7 +352,6 @@ watch(value, (val: string) => {
 });
 
 const dialog = inject<Dialog>("dialog");
-const { t } = useI18n({ useScope: "global" });
 
 /**
  * Show a popup to get the link from the URL
@@ -594,4 +600,12 @@ onBeforeUnmount(() => {
 .visually-hidden {
   display: none;
 }
+
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #adb5bd;
+  pointer-events: none;
+  height: 0;
+}
 </style>