Add tiptap editor for description ❤️

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

js/src/views/Event/Create.vue

@@ -4,14 +4,19 @@
       <translate>Create a new event</translate>
     </h1>
     <div v-if="$apollo.loading">Loading...</div>
-    <div class="columns" v-else>
-      <form class="column" @submit="createEvent">
+    <div class="columns is-centered" v-else>
+      <form class="column is-half" @submit="createEvent">
         <b-field :label="$gettext('Title')">
           <b-input aria-required="true" required v-model="event.title"/>
         </b-field>
 
         <b-datepicker v-model="event.beginsOn" inline></b-datepicker>
 
+        <div class="field">
+          <label class="label">{{ $gettext('Description') }}</label>
+          <editor v-model="event.description" />
+        </div>
+
         <b-field :label="$gettext('Category')">
           <b-select placeholder="Select a category" v-model="event.category">
             <option
@@ -45,9 +50,10 @@ import { LOGGED_PERSON } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
 import { IPictureUpload } from '@/types/picture.model';
+import Editor from '@/components/Editor.vue';
 
 @Component({
-  components: { PictureUpload },
+  components: { PictureUpload, Editor },
   apollo: {
     loggedPerson: {
       query: LOGGED_PERSON,

js/src/views/Event/Event.vue

@@ -137,9 +137,8 @@
             <p v-if="!event.description">
               <translate>The event organizer didn't add any description.</translate>
             </p>
-            <div class="columns" v-else="event.description">
+            <div class="columns" v-else>
               <div class="column is-half">
-<!--                <vue-simple-markdown :source="event.description" />-->
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                   Suspendisse vehicula ex dapibus augue volutpat, ultrices cursus mi rutrum.
@@ -238,7 +237,6 @@ import { LOGGED_PERSON } from '@/graphql/actor';
 import { EventVisibility, IEvent, IParticipant } from '@/types/event.model';
 import { IPerson } from '@/types/actor';
 import { RouteName } from '@/router';
-import 'vue-simple-markdown/dist/vue-simple-markdown.css';
 import { GRAPHQL_API_ENDPOINT } from '@/api/_entrypoint';
 import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
 import BIcon from 'buefy/src/components/icon/Icon.vue';