From 695d773d509484c7c5ef598852134b93877fc154 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 31 Oct 2022 11:43:18 +0100
Subject: [PATCH] Various UI fixes, add placeholder to the text editor

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/package.json                               |   1 +
 js/src/components/Comment/CommentTree.vue     |   1 +
 js/src/components/Comment/EventComment.vue    |   3 +-
 .../Discussion/DiscussionComment.vue          |  24 +-
 js/src/components/Event/OrganizerPicker.vue   |   2 +-
 js/src/components/TextEditor.vue              |  16 +-
 js/src/i18n/en_US.json                        |  10 +-
 js/src/i18n/fr_FR.json                        |  10 +-
 js/src/views/Account/IdentityPicker.vue       |   2 +-
 .../views/Account/IdentityPickerWrapper.vue   |   4 +-
 js/src/views/Discussions/CreateView.vue       |   3 +-
 js/src/views/Discussions/DiscussionView.vue   |  23 +-
 js/src/views/Event/EditView.vue               |   1 +
 js/src/views/Event/EventView.vue              | 209 ++----------------
 js/src/views/Group/GroupSettings.vue          |   1 +
 js/src/views/Posts/EditView.vue               |  35 +--
 js/yarn.lock                                  |   9 +
 17 files changed, 111 insertions(+), 243 deletions(-)

diff --git a/js/package.json b/js/package.json
index a15e4d4a..7b105068 100644
--- a/js/package.json
+++ b/js/package.json
@@ -41,6 +41,7 @@
     "@tiptap/extension-mention": "^2.0.0-beta.42",
     "@tiptap/extension-ordered-list": "^2.0.0-beta.24",
     "@tiptap/extension-paragraph": "^2.0.0-beta.22",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.199",
     "@tiptap/extension-strike": "^2.0.0-beta.26",
     "@tiptap/extension-text": "^2.0.0-beta.15",
     "@tiptap/extension-underline": "^2.0.0-beta.7",
diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index 320c00b3..5492f48b 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/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") }}
diff --git a/js/src/components/Comment/EventComment.vue b/js/src/components/Comment/EventComment.vue
index d23de515..48e7fcf3 100644
--- a/js/src/components/Comment/EventComment.vue
+++ b/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";
diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index d53a754a..82f08084 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/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);
diff --git a/js/src/components/Event/OrganizerPicker.vue b/js/src/components/Event/OrganizerPicker.vue
index ac0d3f86..869ce1ea 100644
--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/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">
diff --git a/js/src/components/TextEditor.vue b/js/src/components/TextEditor.vue
index 365a779c..f3e015ba 100644
--- a/js/src/components/TextEditor.vue
+++ b/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>
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 841dc4cc..5bdd4c5b 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -1417,5 +1417,13 @@
   "Theme": "Theme",
   "Adapt to system theme": "Adapt to system theme",
   "Light": "Light",
-  "Dark": "Dark"
+  "Dark": "Dark",
+  "Write a new comment": "Write a new comment",
+  "Write a new reply": "Write a new reply",
+  "Write a new message": "Write a new message",
+  "Write something": "Write something",
+  "Message body": "Message body",
+  "Describe your event": "Describe your event",
+  "A few lines about your group": "A few lines about your group",
+  "Write your post": "Write your post"
 }
\ No newline at end of file
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index edb119c9..e0baf2e3 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -1415,5 +1415,13 @@
   "Theme": "Thème",
   "Adapt to system theme": "S’adapter au thème du système",
   "Light": "Clair",
-  "Dark": "Sombre"
+  "Dark": "Sombre",
+  "Write a new comment": "Écrivez un nouveau commentaire",
+  "Write a new reply": "Écrivez une nouvelle réponse",
+  "Write a new message": "Écrivez un nouveau message",
+  "Write something": "Écrivez quelque chose",
+  "Message body": "Corps du message",
+  "Describe your event": "Décrivez votre événement",
+  "A few lines about your group": "Quelques lignes à propos de votre groupe",
+  "Write your post": "Écrivez votre billet"
 }
diff --git a/js/src/views/Account/IdentityPicker.vue b/js/src/views/Account/IdentityPicker.vue
index 254e51f3..456a561e 100644
--- a/js/src/views/Account/IdentityPicker.vue
+++ b/js/src/views/Account/IdentityPicker.vue
@@ -28,7 +28,7 @@
             :id="`availableActor-${identity?.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-${identity?.id}`"
           >
             <figure class="h-12 w-12" v-if="identity?.avatar">
diff --git a/js/src/views/Account/IdentityPickerWrapper.vue b/js/src/views/Account/IdentityPickerWrapper.vue
index 80bdba64..5beb7b8e 100644
--- a/js/src/views/Account/IdentityPickerWrapper.vue
+++ b/js/src/views/Account/IdentityPickerWrapper.vue
@@ -42,9 +42,9 @@
       class="cursor-pointer"
       @click="activateModal"
     >
-      <figure class="" v-if="currentIdentity.avatar">
+      <figure class="h-12 w-12" v-if="currentIdentity.avatar">
         <img
-          class="rounded"
+          class="rounded-full object-cover h-full"
           :src="currentIdentity.avatar.url"
           alt=""
           width="48"
diff --git a/js/src/views/Discussions/CreateView.vue b/js/src/views/Discussions/CreateView.vue
index 48ac1a70..61c243be 100644
--- a/js/src/views/Discussions/CreateView.vue
+++ b/js/src/views/Discussions/CreateView.vue
@@ -44,9 +44,10 @@
       <o-field :label="t('Text')">
         <Editor
           v-model="discussion.text"
-          :aria-label="t('Comment body')"
+          :aria-label="t('Message body')"
           v-if="currentActor"
           :current-actor="currentActor"
+          :placeholder="t('Write a new message')"
         />
       </o-field>
 
diff --git a/js/src/views/Discussions/DiscussionView.vue b/js/src/views/Discussions/DiscussionView.vue
index df866d18..445d985f 100644
--- a/js/src/views/Discussions/DiscussionView.vue
+++ b/js/src/views/Discussions/DiscussionView.vue
@@ -5,7 +5,7 @@
       :links="[
         {
           name: RouteName.MY_GROUPS,
-          text: $t('My groups'),
+          text: t('My groups'),
         },
         {
           name: RouteName.GROUP,
@@ -15,7 +15,7 @@
         {
           name: RouteName.DISCUSSION_LIST,
           params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Discussions'),
+          text: t('Discussions'),
         },
         {
           name: RouteName.DISCUSSION,
@@ -35,7 +35,7 @@
         <o-button
           icon-right="pencil"
           size="small"
-          :title="$t('Update discussion title')"
+          :title="t('Update discussion title')"
           v-if="
             discussion.creator &&
             !editTitleMode &&
@@ -60,7 +60,7 @@
           @submit.prevent="updateDiscussion"
           class="w-full"
         >
-          <o-field :label="$t('Title')" label-for="discussion-title">
+          <o-field :label="t('Title')" label-for="discussion-title">
             <o-input
               :value="discussion.title"
               v-model="newTitle"
@@ -72,7 +72,7 @@
               variant="primary"
               native-type="submit"
               icon-right="check"
-              :title="$t('Update discussion title')"
+              :title="t('Update discussion title')"
             />
             <o-button
               @click="
@@ -82,14 +82,14 @@
                 }
               "
               icon-right="close"
-              :title="$t('Cancel discussion title edition')"
+              :title="t('Cancel discussion title edition')"
             />
             <o-button
               @click="openDeleteDiscussionConfirmation"
               variant="danger"
               native-type="button"
               icon-left="delete"
-              >{{ $t("Delete conversation") }}</o-button
+              >{{ t("Delete conversation") }}</o-button
             >
           </div>
         </form>
@@ -114,15 +114,16 @@
       <o-button
         v-if="discussion.comments.elements.length < discussion.comments.total"
         @click="loadMoreComments"
-        >{{ $t("Fetch more") }}</o-button
+        >{{ t("Fetch more") }}</o-button
       >
       <form @submit.prevent="reply" v-if="!error">
-        <o-field :label="$t('Text')">
+        <o-field :label="t('Text')">
           <Editor
             v-model="newComment"
-            :aria-label="$t('Comment body')"
+            :aria-label="t('Message body')"
             v-if="currentActor"
             :currentActor="currentActor"
+            :placeholder="t('Write a new message')"
           />
         </o-field>
         <o-button
@@ -130,7 +131,7 @@
           native-type="submit"
           :disabled="['<p></p>', ''].includes(newComment)"
           variant="primary"
-          >{{ $t("Reply") }}</o-button
+          >{{ t("Reply") }}</o-button
         >
       </form>
     </section>
diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
index 2917e953..ad22e701 100644
--- a/js/src/views/Event/EditView.vue
+++ b/js/src/views/Event/EditView.vue
@@ -129,6 +129,7 @@
           :current-actor="(currentActor as IPerson)"
           v-model="event.description"
           :aria-label="t('Event description body')"
+          :placeholder="t('Describe your event')"
         />
       </div>
 
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index dbeb0990..a755232b 100755
--- a/js/src/views/Event/EventView.vue
+++ b/js/src/views/Event/EventView.vue
@@ -10,7 +10,7 @@
 
         <section class="intro" dir="auto">
           <div class="flex flex-wrap gap-2">
-            <div class="flex-1 min-w-fit">
+            <div class="flex-1">
               <h1
                 class="text-4xl font-bold m-0"
                 dir="auto"
@@ -108,10 +108,10 @@
       </div>
 
       <div
-        class="event-description-wrapper rounded-lg dark:border-violet-title flex flex-wrap flex-col md:flex-row-reverse"
+        class="rounded-lg dark:border-violet-title flex flex-wrap flex-col md:flex-row-reverse gap-4"
       >
         <aside
-          class="event-metadata rounded bg-white dark:bg-gray-600 shadow-md h-min"
+          class="rounded bg-white dark:bg-gray-600 shadow-md h-min"
         >
           <div class="sticky p-4">
             <event-metadata-sidebar
@@ -122,9 +122,9 @@
             />
           </div>
         </aside>
-        <div class="event-description-comments">
-          <section class="event-description">
-            <h2 class="text-xl">{{ t("About this event") }}</h2>
+        <div class="flex-1">
+          <section class="event-description bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded mb-4">
+            <h2 class="text-2xl">{{ t("About this event") }}</h2>
             <p v-if="!event?.description">
               {{ t("The event organizer didn't add any description.") }}
             </p>
@@ -138,7 +138,7 @@
               />
             </div>
           </section>
-          <section class="integration-wrappers">
+          <section class="my-4">
             <component
               v-for="(metadata, integration) in integrations"
               :is="integration"
@@ -146,7 +146,7 @@
               :metadata="metadata"
             />
           </section>
-          <section class="comments" ref="commentsObserver">
+          <section class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4" ref="commentsObserver">
             <a href="#comments">
               <h2 class="text-xl" id="comments">{{ t("Comments") }}</h2>
             </a>
@@ -155,8 +155,8 @@
         </div>
       </div>
 
-      <section class="" v-if="(event?.relatedEvents ?? []).length > 0">
-        <h2 class="">
+      <section class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4" v-if="(event?.relatedEvents ?? []).length > 0">
+        <h2 class="text-2xl mb-2">
           {{ t("These events may interest you") }}
         </h2>
         <multi-card :events="event?.relatedEvents ?? []" />
@@ -492,192 +492,9 @@ useHead({
   meta: [{ name: "description", content: eventDescription.value }],
 });
 </script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.section {
-  padding: 1rem 2rem 4rem;
-}
+<style>
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-div.sidebar {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-
-  position: relative;
-
-  &::before {
-    content: "";
-    background: #b3b3b2;
-    position: absolute;
-    bottom: 30px;
-    top: 30px;
-    left: 0;
-    height: calc(100% - 60px);
-    width: 1px;
-  }
-
-  div.organizer {
-    display: inline-flex;
-    padding-top: 10px;
-
-    a {
-      color: #4a4a4a;
-
-      span {
-        line-height: 2.7rem;
-        @include padding-right(6px);
-      }
-    }
-  }
-}
-
-.intro {
-  // background: white;
-
-  .is-3-tablet {
-    width: initial;
-  }
-
-  p.tags {
-    a {
-      text-decoration: none;
-    }
-
-    span {
-      &.tag {
-        margin: 0 2px;
-      }
-    }
-  }
-}
-
-.event-description-wrapper {
-  padding: 0;
-
-  aside.event-metadata {
-    min-width: 20rem;
-    flex: 1;
-
-    .sticky {
-      // position: sticky;
-      // background: white;
-      top: 50px;
-      padding: 1rem;
-    }
-  }
-
-  div.event-description-comments {
-    min-width: 20rem;
-    padding: 1rem;
-    flex: 2;
-    // background: white;
-  }
-
-  .description-content {
-    :deep(h1) {
-      font-size: 2rem;
-    }
-
-    :deep(h2) {
-      font-size: 1.5rem;
-    }
-
-    :deep(h3) {
-      font-size: 1.25rem;
-    }
-
-    :deep(ul) {
-      list-style-type: disc;
-    }
-
-    :deep(li) {
-      margin: 10px auto 10px 2rem;
-    }
-
-    :deep(blockquote) {
-      border-left: 0.2em solid #333;
-      display: block;
-      @include padding-left(1rem);
-    }
-
-    :deep(p) {
-      margin: 10px auto;
-
-      a {
-        display: inline-block;
-        padding: 0.3rem;
-        color: #111;
-
-        &:empty {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.comments {
-  padding-top: 3rem;
-
-  a h3#comments {
-    margin-bottom: 10px;
-  }
-}
-
-.more-events {
-  // background: white;
-  padding: 1rem 1rem 4rem;
-
-  & > .title {
-    font-size: 1.5rem;
-  }
-}
-
-// .dropdown .dropdown-trigger span {
-//   cursor: pointer;
-// }
-
-// a.dropdown-item,
-// .dropdown .dropdown-menu .has-link a,
-// button.dropdown-item {
-//   white-space: nowrap;
-//   width: 100%;
-//   @include padding-right(1rem);
-//   text-align: right;
-// }
-
-a.participations-link {
-  text-decoration: none;
-}
-
-.no-border {
-  border: 0;
-  cursor: auto;
-}
-
-.intro-wrapper {
-  .date-calendar-icon-wrapper {
-    margin-top: 16px;
-    height: 0;
-    display: flex;
-    align-items: flex-end;
-    align-self: flex-start;
-    margin-bottom: 7px;
-    @include margin-left(0);
-  }
-}
-.title {
-  margin: 0;
-  font-size: 2rem;
+.event-description a {
+  @apply inline-block p-1 bg-mbz-yellow-alt-200 text-black;
 }
 </style>
diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue
index 4d03f630..20fd776e 100644
--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -37,6 +37,7 @@
             :aria-label="t('Group description body')"
             v-if="currentActor"
             :currentActor="currentActor"
+            :placeholder="t('A few lines about your group')"
         /></o-field>
         <o-field :label="t('Avatar')">
           <picture-upload
diff --git a/js/src/views/Posts/EditView.vue b/js/src/views/Posts/EditView.vue
index 14b40201..51877895 100644
--- a/js/src/views/Posts/EditView.vue
+++ b/js/src/views/Posts/EditView.vue
@@ -4,20 +4,20 @@
       <div class="container mx-auto">
         <breadcrumbs-nav v-if="actualGroup" :links="breadcrumbLinks" />
         <h1 v-if="isUpdate === true">
-          {{ $t("Edit post") }}
+          {{ t("Edit post") }}
         </h1>
         <h1 v-else>
-          {{ $t("Add a new post") }}
+          {{ t("Add a new post") }}
         </h1>
-        <h2>{{ $t("General information") }}</h2>
+        <h2>{{ t("General information") }}</h2>
         <picture-upload
           v-model="pictureFile"
-          :textFallback="$t('Headline picture')"
+          :textFallback="t('Headline picture')"
           :defaultImage="editablePost.picture"
         />
 
         <o-field
-          :label="$t('Title')"
+          :label="t('Title')"
           label-for="post-title"
           :type="errors.title ? 'is-danger' : null"
           :message="errors.title"
@@ -40,15 +40,16 @@
             class="w-full"
             v-if="currentActor"
             v-model="editablePost.body"
-            :aria-label="$t('Post body')"
+            :aria-label="t('Post body')"
             :current-actor="currentActor"
+            :placeholder="t('Write your post')"
           />
         </o-field>
-        <h2 class="mt-2">{{ $t("Who can view this post") }}</h2>
+        <h2 class="mt-2">{{ t("Who can view this post") }}</h2>
         <fieldset>
           <legend>
             {{
-              $t(
+              t(
                 "When the post is private, you'll need to share the link around."
               )
             }}
@@ -58,7 +59,7 @@
               v-model="editablePost.visibility"
               name="postVisibility"
               :native-value="PostVisibility.PUBLIC"
-              >{{ $t("Visible everywhere on the web") }}</o-radio
+              >{{ t("Visible everywhere on the web") }}</o-radio
             >
           </div>
           <div class="field">
@@ -66,7 +67,7 @@
               v-model="editablePost.visibility"
               name="postVisibility"
               :native-value="PostVisibility.UNLISTED"
-              >{{ $t("Only accessible through link") }}</o-radio
+              >{{ t("Only accessible through link") }}</o-radio
             >
           </div>
           <div class="field">
@@ -74,7 +75,7 @@
               v-model="editablePost.visibility"
               name="postVisibility"
               :native-value="PostVisibility.PRIVATE"
-              >{{ $t("Only accessible to members of the group") }}</o-radio
+              >{{ t("Only accessible to members of the group") }}</o-radio
             >
           </div>
         </fieldset>
@@ -84,14 +85,14 @@
           <div class="navbar-menu flex flex-wrap py-2">
             <div class="flex flex-wrap justify-end ml-auto gap-1">
               <o-button variant="text" @click="$router.go(-1)">{{
-                $t("Cancel")
+                t("Cancel")
               }}</o-button>
               <o-button
                 v-if="isUpdate"
                 variant="danger"
                 outlined
                 @click="openDeletePostModal"
-                >{{ $t("Delete post") }}</o-button
+                >{{ t("Delete post") }}</o-button
               >
               <!-- If an post has been published we can't make it draft anymore -->
               <o-button
@@ -99,14 +100,14 @@
                 v-if="post?.draft === true"
                 outlined
                 @click="publish(true)"
-                >{{ $t("Save draft") }}</o-button
+                >{{ t("Save draft") }}</o-button
               >
               <o-button variant="primary" native-type="submit">
                 <span v-if="isUpdate === false || post?.draft === true">{{
-                  $t("Publish")
+                  t("Publish")
                 }}</span>
 
-                <span v-else>{{ $t("Update post") }}</span>
+                <span v-else>{{ t("Update post") }}</span>
               </o-button>
             </div>
           </div>
@@ -121,7 +122,7 @@
     ></o-loading>
     <div class="container mx-auto" v-else>
       <o-notification variant="danger">
-        {{ $t("Only group moderators can create, edit and delete posts.") }}
+        {{ t("Only group moderators can create, edit and delete posts.") }}
       </o-notification>
     </div>
   </div>
diff --git a/js/yarn.lock b/js/yarn.lock
index ea0d8bb9..756b1807 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -1585,6 +1585,15 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.199.tgz#34213e6594a1183a77bb33ced49502bafb0a3d1c"
   integrity sha512-+BoMCaxlsHqw065zTUNd+ywkvFJzNKbTY461/AlKX2dgHeaO8doXHDQK+9icOpibQvrKaMhOJmuBTgGlJlUUgw==
 
+"@tiptap/extension-placeholder@^2.0.0-beta.199":
+  version "2.0.0-beta.199"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.0.0-beta.199.tgz#0208c42f8b92a88e66b726353d07b652f09fd823"
+  integrity sha512-Tdq0r9XQ6hcu4ASvw2Xko6h8uS/xONmMmOFiTkK/54REB3RRQpkdCtXrhFn/T4DunJVBf6FUOLTjYN3SONhuew==
+  dependencies:
+    prosemirror-model "^1.18.1"
+    prosemirror-state "^1.4.1"
+    prosemirror-view "^1.28.2"
+
 "@tiptap/extension-strike@^2.0.0-beta.26":
   version "2.0.0-beta.199"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.199.tgz#5fc6e067728009d92027e58a042f18449f2fa264"