Merge branch 'description-editor' into 'master'

Add tiptap editor for description ❤️

See merge request framasoft/mobilizon!143

js/package.json

@@ -27,6 +27,9 @@
     "lodash": "^4.17.11",
     "ngeohash": "^0.6.3",
     "register-service-worker": "^1.6.2",
+    "tippy.js": "^4.3.1",
+    "tiptap": "^1.20.1",
+    "tiptap-extensions": "^1.20.1",
     "typeface-signika": "0.0.72",
     "vue": "^2.6.10",
     "vue-apollo": "^3.0.0-beta.28",
@@ -34,7 +37,6 @@
     "vue-gettext": "^2.1.3",
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.6",
-    "vue-simple-markdown": "^1.0.9",
     "vue2-leaflet": "^2.0.3",
     "vuex": "^3.1.0"
   },

js/src/components/Editor.vue

@@ -0,0 +1,680 @@
+<template>
+    <div>
+    <div class="editor">
+        <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
+            <div class="menubar bar-is-hidden" :class="{ 'is-focused': focused }">
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.bold() }"
+                        @click="commands.bold"
+                >
+                    <b-icon icon="format-bold" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.italic() }"
+                        @click="commands.italic"
+                >
+                    <b-icon icon="format-italic" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.underline() }"
+                        @click="commands.underline"
+                >
+                    <b-icon icon="format-underline" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.heading({ level: 1 }) }"
+                        @click="commands.heading({ level: 1 })"
+                >
+                    <b-icon icon="format-header-1" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.heading({ level: 2 }) }"
+                        @click="commands.heading({ level: 2 })"
+                >
+                    <b-icon icon="format-header-2" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.heading({ level: 3 }) }"
+                        @click="commands.heading({ level: 3 })"
+                >
+                    <b-icon icon="format-header-3" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        @click="showImagePrompt(commands.image)"
+                >
+                    <b-icon icon="image" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.bullet_list() }"
+                        @click="commands.bullet_list"
+                >
+                    <b-icon icon="format-list-bulleted" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.ordered_list() }"
+                        @click="commands.ordered_list"
+                >
+                    <b-icon icon="format-list-numbered" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        :class="{ 'is-active': isActive.blockquote() }"
+                        @click="commands.blockquote"
+                >
+                    <b-icon icon="format-quote-close" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        @click="commands.undo"
+                >
+                    <b-icon icon="undo" />
+                </button>
+
+                <button
+                        class="menubar__button"
+                        @click="commands.redo"
+                >
+                    <b-icon icon="redo" />
+                </button>
+
+            </div>
+        </editor-menu-bar>
+
+        <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
+            <div
+                    class="menububble"
+                    :class="{ 'is-active': menu.isActive }"
+                    :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
+            >
+
+                <form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
+                    <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
+                    <button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button">
+                        <b-icon icon="delete" />
+                    </button>
+                </form>
+
+                <template v-else>
+                    <button
+                            class="menububble__button"
+                            @click="showLinkMenu(getMarkAttrs('link'))"
+                            :class="{ 'is-active': isActive.link() }"
+                    >
+                        <span>{{ isActive.link() ? 'Update Link' : 'Add Link'}}</span>
+                        <b-icon icon="link" />
+                    </button>
+                </template>
+
+            </div>
+        </editor-menu-bubble>
+
+        <editor-content class="editor__content" :editor="editor" />
+    </div>
+        <div class="suggestion-list" v-show="showSuggestions" ref="suggestions">
+            <template v-if="hasResults">
+                <div
+                        v-for="(actor, index) in filteredActors"
+                        :key="actor.id"
+                        class="suggestion-list__item"
+                        :class="{ 'is-selected': navigatedUserIndex === index }"
+                        @click="selectActor(actor)"
+                >
+                    {{ actor.name }}
+                </div>
+            </template>
+            <div v-else class="suggestion-list__item is-empty">
+                No actors found
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap';
+import {
+    Blockquote,
+    HardBreak,
+    Heading,
+    OrderedList,
+    BulletList,
+    ListItem,
+    TodoItem,
+    TodoList,
+    Bold,
+    Code,
+    Italic,
+    Link,
+    Underline,
+    History,
+    Placeholder,
+    Mention,
+} from 'tiptap-extensions';
+import tippy, { Instance } from 'tippy.js';
+import { SEARCH_PERSONS } from '@/graphql/search';
+import { IActor } from '@/types/actor';
+import Image from '@/components/Editor/Image';
+import { UPLOAD_PICTURE } from '@/graphql/upload';
+import { listenFileUpload } from '@/utils/upload';
+
+@Component({
+  components: { EditorContent, EditorMenuBar, EditorMenuBubble },
+})
+export default class CreateEvent extends Vue {
+  @Prop({ required: true }) value!: String;
+  editor: Editor = null;
+
+    /**
+     * Editor Link
+     */
+  linkUrl!: string|null;
+  linkMenuIsActive: boolean = false;
+
+    /**
+     * Editor Suggestions
+     */
+  query!: string|null;
+  filteredActors: IActor[] = [];
+  suggestionRange!: object|null;
+  navigatedUserIndex: number = 0;
+  popup!: Instance|null;
+
+  get hasResults() {
+    return this.filteredActors.length;
+  }
+  get showSuggestions() {
+    return this.query || this.hasResults;
+  }
+
+  insertMention: Function = () => {};
+  observer!: MutationObserver|null;
+
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        new Blockquote(),
+        new BulletList(),
+        new HardBreak(),
+        new Heading({ levels: [1, 2, 3] }),
+        new Mention({
+          items: () => [],
+          onEnter: ({ items, query, range, command, virtualNode }) => {
+            this.query = query;
+            this.filteredActors = items;
+            this.suggestionRange = range;
+            this.renderPopup(virtualNode);
+            // we save the command for inserting a selected mention
+            // this allows us to call it inside of our custom popup
+            // via keyboard navigation and on click
+            this.insertMention = command;
+          },
+          /**
+           * is called when a suggestion has changed
+           */
+          onChange: ({ items, query, range, virtualNode }) => {
+            this.query = query;
+            this.filteredActors = items;
+            this.suggestionRange = range;
+            this.navigatedUserIndex = 0;
+            this.renderPopup(virtualNode);
+          },
+
+          /**
+           * is called when a suggestion is cancelled
+           */
+          onExit: () => {
+            // reset all saved values
+            this.query = null;
+            this.filteredActors = [];
+            this.suggestionRange = null;
+            this.navigatedUserIndex = 0;
+            this.destroyPopup();
+          },
+
+          /**
+           * is called on every keyDown event while a suggestion is active
+           */
+          onKeyDown: ({ event }) => {
+            // pressing up arrow
+            if (event.keyCode === 38) {
+              this.upHandler();
+              return true;
+            }
+            // pressing down arrow
+            if (event.keyCode === 40) {
+              this.downHandler();
+              return true;
+            }
+            // pressing enter
+            if (event.keyCode === 13) {
+              this.enterHandler();
+              return true;
+            }
+            return false;
+          },
+          onFilter: async (items, query) => {
+            if (!query) {
+              return items;
+            }
+            const result = await this.$apollo.query({
+              query: SEARCH_PERSONS,
+              variables: {
+                searchText: query,
+              },
+            });
+            // TODO: TipTap doesn't handle async for onFilter, hence the following line.
+            this.filteredActors = result.data.searchPersons.elements;
+            return this.filteredActors;
+          },
+        }),
+        new ListItem(),
+        new OrderedList(),
+        new TodoItem(),
+        new TodoList(),
+        new Link(),
+        new Bold(),
+        new Code(),
+        new Italic(),
+        new Underline(),
+        new History(),
+        new Placeholder({
+          emptyClass: 'is-empty',
+          emptyNodeText: 'Write something …',
+          showOnlyWhenEditable: false,
+        }),
+        new Image(),
+      ],
+      onUpdate: ({ getHTML }) => {
+        this.$emit('input', getHTML());
+      },
+    });
+    this.editor.setContent(this.value);
+  }
+
+  @Watch('value')
+  onValueChanged(val: string) {
+    if (val !== this.editor.getHTML()) {
+      this.editor.setContent(val);
+    }
+  }
+
+  showLinkMenu(attrs: any) {
+    this.linkUrl = attrs.href;
+    this.linkMenuIsActive = true;
+    this.$nextTick(() => {
+      const linkInput = this.$refs.linkInput as HTMLElement;
+      linkInput.focus();
+    });
+  }
+  hideLinkMenu() {
+    this.linkUrl = '';
+    this.linkMenuIsActive = false;
+  }
+  setLinkUrl(command, url: string) {
+    command({ href: url });
+    this.hideLinkMenu();
+    this.editor.focus();
+  }
+
+  upHandler() {
+    this.navigatedUserIndex = ((this.navigatedUserIndex + this.filteredActors.length) - 1) % this.filteredActors.length;
+  }
+
+  /**
+   * navigate to the next item
+   * if it's the last item, navigate to the first one
+   */
+  downHandler() {
+    this.navigatedUserIndex = (this.navigatedUserIndex + 1) % this.filteredActors.length;
+  }
+
+  enterHandler() {
+    const actor = this.filteredActors[this.navigatedUserIndex];
+    if (actor) {
+      this.selectActor(actor);
+    }
+  }
+
+  /**
+   * we have to replace our suggestion text with a mention
+   * so it's important to pass also the position of your suggestion text
+   * @param actor IActor
+   */
+  selectActor(actor: IActor) {
+    this.insertMention({
+      range: this.suggestionRange,
+      attrs: {
+        id: actor.id,
+        label: actor.name,
+      },
+    });
+    this.editor.focus();
+  }
+
+  /**
+   * renders a popup with suggestions
+   * tiptap provides a virtualNode object for using popper.js (or tippy.js) for popups
+   * @param node
+   */
+  renderPopup(node) {
+    if (this.popup) {
+      return;
+    }
+    this.popup = tippy(node, {
+      content: this.$refs.suggestions as HTMLElement,
+      trigger: 'mouseenter',
+      interactive: true,
+      theme: 'dark',
+      placement: 'top-start',
+      inertia: true,
+      duration: [400, 200],
+      showOnInit: true,
+      arrow: true,
+      arrowType: 'round',
+    }) as Instance;
+    // we have to update tippy whenever the DOM is updated
+    if (MutationObserver) {
+      this.observer = new MutationObserver(() => {
+        if (this.popup != null && this.popup.popperInstance) {
+          this.popup.popperInstance.scheduleUpdate();
+        }
+      });
+      this.observer.observe(this.$refs.suggestions as HTMLElement, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+    }
+  }
+
+  destroyPopup() {
+    if (this.popup) {
+      this.popup.destroy();
+      this.popup = null;
+    }
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
+  /**
+   * Show a file prompt, upload picture and insert it into editor
+   * @param command
+   */
+  async showImagePrompt(command) {
+    const image = await listenFileUpload();
+    const { data } = await this.$apollo.mutate({
+      mutation: UPLOAD_PICTURE,
+      variables: {
+        file: image,
+        name: image.name,
+      },
+    });
+    if (data.uploadPicture && data.uploadPicture.url) {
+      command({ src: data.uploadPicture.url });
+    }
+  }
+
+  beforeDestroy() {
+    this.editor.destroy();
+  }
+}
+</script>
+<style lang="scss">
+    $color-black: #000;
+    $color-white: #eee;
+
+    .menubar {
+
+        margin-bottom: 1rem;
+        transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
+
+        &.bar-is-hidden {
+            visibility: hidden;
+            opacity: 0;
+        }
+
+        &.is-focused {
+            visibility: visible;
+            opacity: 1;
+            height: auto;
+            transition: visibility 0.2s, opacity 0.2s;
+        }
+
+        &__button {
+            font-weight: bold;
+            display: inline-flex;
+            background: transparent;
+            border: 0;
+            color: $color-black;
+            padding: 0.2rem 0.5rem;
+            margin-right: 0.2rem;
+            border-radius: 3px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: rgba($color-black, 0.05);
+            }
+
+            &.is-active {
+                background-color: rgba($color-black, 0.1);
+            }
+        }
+    }
+
+    .editor {
+        position: relative;
+        max-width: 30rem;
+        margin: 0 0 1rem;
+
+        p.is-empty:first-child::before {
+            content: attr(data-empty-text);
+            float: left;
+            color: #aaa;
+            pointer-events: none;
+            height: 0;
+            font-style: italic;
+        }
+
+        &__content {
+            div.ProseMirror {
+                min-height: 10rem;
+
+                &:focus {
+                    border-color: #3273dc;
+                    background: #fff;
+                    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+                }
+            }
+
+            word-wrap: break-word;
+
+            h1 {
+                font-size: 2em;
+            }
+
+            h2 {
+                font-size: 1.5em;
+            }
+
+            h3 {
+                font-size: 1.25em;
+            }
+
+            * {
+                caret-color: currentColor;
+            }
+
+            ul,
+            ol {
+                padding-left: 1rem;
+                list-style-type: disc;
+            }
+
+            li > p,
+            li > ol,
+            li > ul {
+                margin: 0;
+            }
+
+            a {
+                color: inherit;
+            }
+
+            blockquote {
+                border-left: 3px solid rgba($color-black, 0.1);
+                color: rgba($color-black, 0.8);
+                padding-left: 0.8rem;
+                font-style: italic;
+
+                p {
+                    margin: 0;
+                }
+            }
+
+            img {
+                max-width: 100%;
+                border-radius: 3px;
+            }
+        }
+    }
+
+    .menububble {
+        position: absolute;
+        display: flex;
+        z-index: 20;
+        background: $color-black;
+        border-radius: 5px;
+        padding: 0.3rem;
+        margin-bottom: 0.5rem;
+        transform: translateX(-50%);
+        visibility: hidden;
+        opacity: 0;
+        transition: opacity 0.2s, visibility 0.2s;
+
+        &.is-active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        &__button {
+            display: inline-flex;
+            background: transparent;
+            border: 0;
+            color: $color-white;
+            padding: 0.2rem 0.5rem;
+            margin-right: 0.2rem;
+            border-radius: 3px;
+            cursor: pointer;
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            &:hover {
+                background-color: rgba($color-white, 0.1);
+            }
+
+            &.is-active {
+                background-color: rgba($color-white, 0.2);
+            }
+        }
+
+        &__form {
+            display: flex;
+            align-items: center;
+        }
+
+        &__input {
+            font: inherit;
+            border: none;
+            background: transparent;
+            color: $color-white;
+        }
+    }
+    .mention {
+        background: rgba($color-black, 0.1);
+        color: rgba($color-black, 0.6);
+        font-size: 0.8rem;
+        font-weight: bold;
+        border-radius: 5px;
+        padding: 0.2rem 0.5rem;
+        white-space: nowrap;
+    }
+    .mention-suggestion {
+        color: rgba($color-black, 0.6);
+    }
+    .suggestion-list {
+        padding: 0.2rem;
+        border: 2px solid rgba($color-black, 0.1);
+        font-size: 0.8rem;
+        font-weight: bold;
+        &__no-results {
+            padding: 0.2rem 0.5rem;
+        }
+        &__item {
+            border-radius: 5px;
+            padding: 0.2rem 0.5rem;
+            margin-bottom: 0.2rem;
+            cursor: pointer;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &.is-selected,
+            &:hover {
+                background-color: rgba($color-white, 0.2);
+            }
+            &.is-empty {
+                opacity: 0.5;
+            }
+        }
+    }
+    .tippy-tooltip.dark-theme {
+        background-color: $color-black;
+        padding: 0;
+        font-size: 1rem;
+        text-align: inherit;
+        color: $color-white;
+        border-radius: 5px;
+        .tippy-backdrop {
+            display: none;
+        }
+        .tippy-roundarrow {
+            fill: $color-black;
+        }
+        .tippy-popper[x-placement^=top] & .tippy-arrow {
+            border-top-color: $color-black;
+        }
+        .tippy-popper[x-placement^=bottom] & .tippy-arrow {
+            border-bottom-color: $color-black;
+        }
+        .tippy-popper[x-placement^=left] & .tippy-arrow {
+            border-left-color: $color-black;
+        }
+        .tippy-popper[x-placement^=right] & .tippy-arrow {
+            border-right-color: $color-black;
+        }
+    }
+
+</style>

js/src/components/Editor/Image.ts

@@ -0,0 +1,94 @@
+import { Node, Plugin } from 'tiptap';
+import { UPLOAD_PICTURE } from '@/graphql/upload';
+import { apolloProvider } from '@/vue-apollo';
+import ApolloClient from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+
+export default class Image extends Node {
+
+  get name() {
+    return 'image';
+  }
+
+  get schema() {
+    return {
+      inline: true,
+      attrs: {
+        src: {},
+        alt: {
+          default: null,
+        },
+        title: {
+          default: null,
+        },
+      },
+      group: 'inline',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs: dom => ({
+            src: dom.getAttribute('src'),
+            title: dom.getAttribute('title'),
+            alt: dom.getAttribute('alt'),
+          }),
+        },
+      ],
+      toDOM: node => ['img', node.attrs],
+    };
+  }
+
+  commands({ type }) {
+    return attrs => (state, dispatch) => {
+      const { selection } = state;
+      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos;
+      const node = type.create(attrs);
+      const transaction = state.tr.insert(position, node);
+      dispatch(transaction);
+    };
+  }
+
+  get plugins() {
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            async drop(view, event: DragEvent) {
+              if (!(event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length)) {
+                return;
+              }
+
+              const images = Array
+                                .from(event.dataTransfer.files)
+                                .filter((file: any) => (/image/i).test(file.type));
+
+              if (images.length === 0) {
+                return;
+              }
+
+              event.preventDefault();
+
+              const { schema } = view.state;
+              const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
+              const client = apolloProvider.defaultClient as ApolloClient<InMemoryCache>;
+
+              for (const image of images) {
+                const { data } = await client.mutate({
+                  mutation: UPLOAD_PICTURE,
+                  variables: {
+                    file: image,
+                    name: image.name,
+                  },
+                });
+                const node = schema.nodes.image.create({ src: data.uploadPicture.url });
+                const transaction = view.state.tr.insert(coordinates.pos, node);
+                view.dispatch(transaction);
+              }
+            },
+          },
+        },
+      }),
+    ];
+  }
+
+}

js/src/graphql/search.ts

@@ -34,3 +34,21 @@ query SearchGroups($searchText: String!) {
   }
 }
 `;
+
+export const SEARCH_PERSONS = gql`
+  query SearchPersons($searchText: String!) {
+    searchPersons(search: $searchText) {
+      total,
+      elements {
+        id,
+        avatar {
+          url
+        },
+        domain,
+        preferredUsername,
+        name,
+        __typename
+      }
+    }
+  }
+`;

js/src/graphql/upload.ts

@@ -1,10 +1,10 @@
 import gql from 'graphql-tag';
 
 export const UPLOAD_PICTURE = gql`
-    mutation {
+    mutation UploadPicture($file: Upload!, $alt: String, $name: String!){
-        uploadPicture(file: "file") {
+        uploadPicture(file: $file, alt: $alt, name: $name) {
             url,
-            url_thumbnail
+            id
         }
     }
 `;

js/src/main.ts

@@ -1,7 +1,6 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
-import VueSimpleMarkdown from 'vue-simple-markdown';
 import Buefy from 'buefy';
 import GetTextPlugin from 'vue-gettext';
 import App from '@/App.vue';
@@ -12,7 +11,6 @@ const translations = require('@/i18n/translations.json');
 
 Vue.config.productionTip = false;
 
-Vue.use(VueSimpleMarkdown);
 Vue.use(Buefy, {
   defaultContainerElement: '#mobilizon',
 });

js/src/types/search.model.ts

@@ -1,4 +1,4 @@
-import { IGroup } from '@/types/actor';
+import { IGroup, IPerson } from '@/types/actor';
 import { IEvent } from '@/types/event.model';
 
 export interface SearchEvent {
@@ -10,3 +10,8 @@ export interface SearchGroup {
   total: number;
   elements: IGroup[];
 }
+
+export interface SearchPerson {
+  total: number;
+  elements: IPerson[];
+}

js/src/utils/upload.ts

@@ -0,0 +1,36 @@
+/**
+ * Async function to upload a file
+ */
+export function listenFileUpload(): Promise<File> {
+  return new Promise((resolve, reject) => {
+    const inputElement = document.createElement('input');
+    inputElement.type = 'file';
+    inputElement.onchange = () => {
+      if (inputElement.files && inputElement.files.length > 0) {
+        resolve(inputElement.files[0]);
+      }
+    };
+
+    inputElement.onerror = reject;
+    inputElement.click();
+  });
+}
+
+/**
+ * Async function to upload a file
+ */
+export function listenFileUploads(): Promise<FileList> {
+  return new Promise((resolve, reject) => {
+    const inputElement = document.createElement('input');
+    inputElement.type = 'file';
+    inputElement.multiple = true;
+    inputElement.onchange = () => {
+      if (inputElement.files && inputElement.files.length > 0) {
+        resolve(inputElement.files);
+      }
+    };
+
+    inputElement.onerror = reject;
+    inputElement.click();
+  });
+}

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>
+    <div class="columns is-centered" v-else>
-      <form class="column" @submit="createEvent">
+      <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,
@@ -136,9 +142,3 @@ export default class CreateEvent extends Vue {
   // }
 }
 </script>
-
-<style>
-.markdown-render h1 {
-  font-size: 2em;
-}
-</style>

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';

js/yarn.lock

@@ -694,6 +694,32 @@
     reflect-metadata "^0.1.12"
     tslib "^1.8.1"
 
+"@hapi/address@2.x.x":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
+  integrity sha512-mV6T0IYqb0xL1UALPFplXYQmR0twnXG0M6jUswpquqT2sD12BOiCiLy3EvMp/Fy7s3DZElC4/aPjEjo2jeZpvw==
+
+"@hapi/hoek@6.x.x":
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-6.2.4.tgz#4b95fbaccbfba90185690890bdf1a2fbbda10595"
+  integrity sha512-HOJ20Kc93DkDVvjwHyHawPwPkX44sIrbXazAUDiUXaY2R9JwQGo2PhFfnQtdrsIe4igjG2fPgMra7NYw7qhy0A==
+
+"@hapi/joi@^15.0.1":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.0.3.tgz#e94568fd859e5e945126d5675e7dd218484638a7"
+  integrity sha512-z6CesJ2YBwgVCi+ci8SI8zixoj8bGFn/vZb9MBPbSyoxsS2PnWYjHcyTM17VLK6tx64YVK38SDIh10hJypB+ig==
+  dependencies:
+    "@hapi/address" "2.x.x"
+    "@hapi/hoek" "6.x.x"
+    "@hapi/topo" "3.x.x"
+
+"@hapi/topo@3.x.x":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.0.tgz#5c47cd9637c2953db185aa957a27bcb2a8b7a6f8"
+  integrity sha512-gZDI/eXOIk8kP2PkUKjWu9RW8GGVd2Hkgjxyr/S7Z+JF+0mr7bAlbw+DkTRxnD580o8Kqxlnba9wvqp5aOHBww==
+  dependencies:
+    "@hapi/hoek" "6.x.x"
+
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz#be7c7846128b88f6a9b1d1261a0ad06eb5c0fdf8"
@@ -934,10 +960,10 @@
     "@vue/babel-plugin-transform-vue-jsx" "^1.0.0"
     camelcase "^5.0.0"
 
-"@vue/cli-overlay@^3.7.0":
+"@vue/cli-overlay@^3.8.0":
-  version "3.7.0"
+  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-3.7.0.tgz#0f520c98e1be7618b7a68b768666fffa1f589f94"
+  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-3.8.0.tgz#e4e8e2fa92b06fc282916df9c924f1dba50eeabb"
-  integrity sha512-QO1rsBVKPZrt+5rHSZXc5UEPVwVgiayOk/cDl+GwSJoR36gnWs1wy1oUX1Awd7QpGiMBK/1+A7aAGhfzKR23Cg==
+  integrity sha512-4hY/+r9OwpMb7BPFnQGKftMC8CrfbV00REEFOij52+L4swQw+m879+5zX3Z0xHfPftw6JyaqJB0rmQ0ILI6Ovw==
 
 "@vue/cli-plugin-babel@^3.6.0":
   version "3.7.0"
@@ -996,14 +1022,14 @@
     mocha-webpack "^2.0.0-beta.0"
 
 "@vue/cli-service@^3.6.0":
-  version "3.7.0"
+  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-3.7.0.tgz#af56526cea64042b48c50a15a9d33c84a71abd31"
+  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-3.8.0.tgz#47eaa169a7bd96522c1a0df89214f1afee843cd6"
-  integrity sha512-RMVwpCE3EB9cL9VAgu1Dy/tGxz5zrVG4UMPk5t4KDu8jJhHxvcAzgIEIfS6KRp0AKfA6iDW4J0NU0fopnpyL+g==
+  integrity sha512-ipJF4RHjyLyLC4oLx+JM1Jk6tiIG0KjCFAqfOscQ44K4CdyS03oFMAUR+SZYy/UXKccMnoeY6Ld4YrGXSytQsg==
   dependencies:
     "@intervolga/optimize-cssnano-plugin" "^1.0.5"
     "@soda/friendly-errors-webpack-plugin" "^1.7.1"
-    "@vue/cli-overlay" "^3.7.0"
+    "@vue/cli-overlay" "^3.8.0"
-    "@vue/cli-shared-utils" "^3.7.0"
+    "@vue/cli-shared-utils" "^3.8.0"
     "@vue/component-compiler-utils" "^2.6.0"
     "@vue/preload-webpack-plugin" "^1.1.0"
     "@vue/web-component-wrapper" "^1.2.0"
@@ -1053,22 +1079,22 @@
     webpack ">=4 < 4.29"
     webpack-bundle-analyzer "^3.3.0"
     webpack-chain "^4.11.0"
-    webpack-dev-server "^3.3.1"
+    webpack-dev-server "^3.4.1"
     webpack-merge "^4.2.1"
     yorkie "^2.0.0"
 
-"@vue/cli-shared-utils@^3.7.0":
+"@vue/cli-shared-utils@^3.7.0", "@vue/cli-shared-utils@^3.8.0":
-  version "3.7.0"
+  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-3.7.0.tgz#957dd3c31a31208caf9f119cac6008fd4960d46e"
+  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-3.8.0.tgz#e7e728164eb92bd9e205fcd08dae896ee79cba5a"
-  integrity sha512-+LPDAQ1CE3ci1ADOvNqJMPdqyxgJxOq5HUgGDSKCHwviXF6GtynfljZXiSzgWh5ueMFxJphCfeMsTZqFWwsHVg==
+  integrity sha512-wn1L8pmQnotfftHOYm0VeXs2+cQTySd73uhWXwyO6pT0ehjqlY5c2RTipClmFF3Q+YCYjwlNpsV650F3l1tV8w==
   dependencies:
+    "@hapi/joi" "^15.0.1"
     chalk "^2.4.1"
     execa "^1.0.0"
-    joi "^14.3.0"
     launch-editor "^2.2.1"
     lru-cache "^5.1.1"
     node-ipc "^9.1.1"
-    opn "^5.3.0"
+    open "^6.3.0"
     ora "^3.4.0"
     request "^2.87.0"
     request-promise-native "^1.0.7"
@@ -2182,9 +2208,9 @@ block-stream@*:
     inherits "~2.0.0"
 
 bluebird@^3.1.1, bluebird@^3.5.1, bluebird@^3.5.3:
-  version "3.5.4"
+  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.4.tgz#d6cc661595de30d5b3af5fcedd3c0b3ef6ec5714"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
-  integrity sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw==
+  integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
@@ -2677,9 +2703,9 @@ chownr@^1.0.1, chownr@^1.1.1:
   integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
 
 chrome-trace-event@^1.0.0:
-  version "1.0.0"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
-  integrity sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==
+  integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
   dependencies:
     tslib "^1.9.0"
 
@@ -4182,9 +4208,9 @@ expand-brackets@^2.1.4:
     to-regex "^3.0.1"
 
 express@^4.16.3, express@^4.17.0:
-  version "4.17.0"
+  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.0.tgz#288af62228a73f4c8ea2990ba3b791bb87cd4438"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-1Z7/t3Z5ZnBG252gKUPyItc4xdeaA0X934ca2ewckAsVsw9EG71i++ZHZPYnus8g/s5Bty8IMpSVEuRkmwwPRQ==
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
   dependencies:
     accepts "~1.3.7"
     array-flatten "1.1.1"
@@ -4312,6 +4338,13 @@ fastparse@^1.1.1:
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
   integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
+fault@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.3.tgz#4da88cf979b6b792b4e13c7ec836767725170b7e"
+  integrity sha512-sfFuP4X0hzrbGKjAUNXYvNqsZ5F6ohx/dZ9I0KQud/aiZNwg263r5L9yGB0clvXHCkzXh5W3t7RSHchggYIFmA==
+  dependencies:
+    format "^0.2.2"
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -4521,6 +4554,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+format@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -4704,11 +4742,6 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-github-markdown-css@^2.8.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-2.10.0.tgz#0612fed22816b33b282f37ef8def7a4ecabfe993"
-  integrity sha512-RX5VUC54uX6Lvrm226M9kMzsNeOa81MnKyxb3J0G5KLjyoOySOZgwyKFkUpv6iUhooiUZdogk+OTwQPJ4WttYg==
-
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -5008,16 +5041,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^9.6.0:
+highlight.js@^9.6.0, highlight.js@~9.15.0:
   version "9.15.6"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.6.tgz#72d4d8d779ec066af9a17cb14360c3def0aa57c4"
   integrity sha512-zozTAWM1D6sozHo8kqhfYgsac+B+q0PmsjXeyDrYIHHcBN0zTVT66+s2GW1GZv7DbyaROdLXKdabwS/WqPyIdQ==
 
-highlightjs@^9.10.0:
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.12.0.tgz#9b84eb42a7aa8488eb69ac79fec44cf495bf72a1"
-  integrity sha512-eAhWMtDZaOZIQdxIP4UEB1vNp/CVXQPdMSihTSuaExhFIRC0BVpXbtP3mTP1hDoGOyh7nbB3cuC3sOPhG5wGDA==
-
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5032,11 +5060,6 @@ hoek@4.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
   integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
 
-hoek@6.x.x:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c"
-  integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ==
-
 hoopy@^0.1.2:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -5812,15 +5835,6 @@ joi@^11.1.1:
     isemail "3.x.x"
     topo "2.x.x"
 
-joi@^14.3.0:
-  version "14.3.1"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-14.3.1.tgz#164a262ec0b855466e0c35eea2a885ae8b6c703c"
-  integrity sha512-LQDdM+pkOrpAn4Lp+neNIFV3axv1Vna3j38bisbQhETPMANYRbFJFUyOZcOClYvM/hppMhGWuKSFEK9vjrB+bQ==
-  dependencies:
-    hoek "6.x.x"
-    isemail "3.x.x"
-    topo "3.x.x"
-
 js-base64@^2.1.8:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
@@ -5950,11 +5964,16 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json3@3.3.2, json3@^3.3.2:
+json3@3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
   integrity sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=
 
+json3@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
+  integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
+
 json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
@@ -6339,11 +6358,6 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
-lodash.toarray@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
-  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
-
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -6406,6 +6420,14 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
   integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
+lowlight@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.12.1.tgz#014acf8dd73a370e02ff1cc61debcde3bb1681eb"
+  integrity sha512-OqaVxMGIESnawn+TU/QMV5BJLbUghUfjDWPAtFqDYDmDtr4FnB+op8xM+pR7nKlauHNUHXGt0VgWatFB8voS5w==
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.15.0"
+
 lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@^4.1.2:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -6929,13 +6951,6 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
-node-emoji@^1.8.1:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
-  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
-  dependencies:
-    lodash.toarray "^4.4.0"
-
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -7258,12 +7273,19 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+open@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-6.3.0.tgz#60d0b845ee38fae0631f5d739a21bd40e3d2a527"
+  integrity sha512-6AHdrJxPvAXIowO/aIaeHZ8CeMdDf7qCyRNq8NwJpinmCdXhz+NZR7ie1Too94lpciCDsG+qHGO9Mt0svA4OqA==
+  dependencies:
+    is-wsl "^1.1.0"
+
 opener@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
   integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
 
-opn@^5.3.0, opn@^5.5.0:
+opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
   integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
@@ -7309,6 +7331,11 @@ ora@^3.4.0:
     strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
+orderedmap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.0.0.tgz#d90fc2ba1ed085190907d601dec6e6a53f8d41ba"
+  integrity sha1-2Q/Cuh7QhRkJB9YB3sbmpT+NQbo=
+
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -7711,6 +7738,11 @@ pofile@^1.0.10:
   resolved "https://registry.yarnpkg.com/pofile/-/pofile-1.0.11.tgz#35aff58c17491d127a07336d5522ebc9df57c954"
   integrity sha512-Vy9eH1dRD9wHjYt/QqXcTz+RnX/zg53xK+KljFSX30PvdDMb2z+c6uDUeblUGqqJgz3QFsdlA0IJvHziPmWtQg==
 
+popper.js@^1.14.7:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
+  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
+
 portfinder@^1.0.20:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
@@ -8133,6 +8165,121 @@ promise@^7.0.1:
   dependencies:
     asap "~2.0.3"
 
+prosemirror-collab@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.1.1.tgz#c8f5d951abaeac8a80818b6bd960f5a392b35b3f"
+  integrity sha512-BpXIB3WBD7UvgxuiasKOxlAZ78TTOdW+SQN4bbJan995tVx/wM/OZXtRJebS+tSWWAbRisHaO3ciFo732vuvdA==
+  dependencies:
+    prosemirror-state "^1.0.0"
+
+prosemirror-commands@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.0.8.tgz#3b21e8b2f2e1c04ddb831b2d4055084b6d627bcc"
+  integrity sha512-P9QdkYYBHWsrJ1JztQuHgeZS7DPCcijQduOj9oxFiqK8Fm6eTsVHzU1IwiRBe+FlK7tyQaerhu/F5K8sqnZ1Cw==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-dropcursor@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.1.1.tgz#c60ed1ed6c58804a06a75db06a0d993b087b7622"
+  integrity sha512-GeUyMO/tOEf8MXrP7Xb7UIMrfK86OGh0fnyBrHfhav4VjY9cw65mNoqHy87CklE5711AhCP5Qzfp8RL/hVKusg==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+    prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.0.3.tgz#acc6537fc5a35e9b38966f91a199a382dfc715c4"
+  integrity sha512-X+hJhr42PcHWiSWL+lI5f/UeOhXCxlBFb8M6O8aG1hssmaRrW7sS2/Fjg5jFV+pTdS1REFkmm1occh01FMdDIQ==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-history@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.0.4.tgz#313a15489a78795321f3a37d53d8c68610c5adb6"
+  integrity sha512-Kk2UisC9EzYcsNv+ILiQJWpsu0rbT6+oAAkvseFUHnudtfkmYAJu1+Xp3F0xTTCVmQdSqSLVk8qydllXUUOU4Q==
+  dependencies:
+    prosemirror-state "^1.2.2"
+    prosemirror-transform "^1.0.0"
+    rope-sequence "^1.2.0"
+
+prosemirror-inputrules@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.0.4.tgz#8ae84d9c147abb448b86063ff422e801c4b1658d"
+  integrity sha512-RhuBghqUgYWm8ai/P+k1lMl1ZGvt6Cs3Xeur8oN0L1Yy+Z5GmsTp3fT8RVl+vJeGkItEAxAit9Qh7yZxixX7rA==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.0.1.tgz#03ef32b828e3a859dfb570eb84928bf2e5330bc2"
+  integrity sha512-e79ApE7PXXZMFtPz7WbjycjAFd1NPjgY1MkecVz98tqwlBSggXWXYQnWFk6x7UkmnBYRHHbXHkR/RXmu2wyBJg==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^1.1.8"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.7.0.tgz#1fde0fd7cb2f9ead0be1581ad9f04593002a65aa"
+  integrity sha512-/6ul6guiqyAl5I+0qbnL7SlmuX0DEfYqjvzeLUVEnb7nwF/vmKZuWqbjEG2tqi/9SSudvd3UxQTBDHvxy9hQwA==
+  dependencies:
+    orderedmap "^1.0.0"
+
+prosemirror-schema-list@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.0.3.tgz#539caafa4f9314000943bd783be4017165ec0bd6"
+  integrity sha512-+zzSawVds8LsZpl/bLTCYk2lYactF93W219Czh81zBILikCRDOHjp1CQ1os4ZXBp6LlD+JnBqF1h59Q+hilOoQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.2.3.tgz#b61e88e55336a4e5be088c0d21ac05f18cdd3dcd"
+  integrity sha512-TNFw98jHLcU7JXViozcDHxzIWQj7WfGqTAB05RCrkkUuIleKekW9PbhQGXRZdlSPFkViPlLy/emh+5HtjH1Yzg==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-tables@^0.8.0:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-0.8.1.tgz#ea99ad4effec99dd4e2fdb0b33cce4d2547eed83"
+  integrity sha512-6eY8I+NkyrXAQ1gmYkKo7XDLZaj0iGutdc/zT0+VMY15IzgBINwcRP62+miaCTuneLTKufMYzfUB37NjGJaetw==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.1.3.tgz#28cfdf1f9ee514edc40466be7b7db39eed545fdf"
+  integrity sha512-1O6Di5lOL1mp4nuCnQNkHY7l2roIW5y8RH4ZG3hMYmkmDEWzTaFFnxxAAHsE5ipGLBSRcTlP7SsDhYBIdSuLpQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-utils@^0.8.2:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.8.3.tgz#ef8a9a7d2ed854200d13ff551da860ea0efdfcc5"
+  integrity sha512-8wGiEqSW3fykceo7r2SOAiCUtyRySZrdxbnh6JI6sk02ntR43xRlxh2qKFFL/vlwyoMV5iSQ0fgUvMhul+qfEw==
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.9.6:
+  version "1.9.7"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.9.7.tgz#25464f86a4de85ffb8e57bfa724499403938690b"
+  integrity sha512-vs/sbG9HbQFhm3auPy45XYx9pMNiMsJXMshtUHrOVvTbRgF/BtS1HSAdom2/jGUp33QQibiFfc8RIJHVN3kiug==
+  dependencies:
+    prosemirror-model "^1.1.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
 proxy-addr@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -8166,9 +8313,9 @@ pseudomap@^1.0.2:
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
 psl@^1.1.24, psl@^1.1.28:
-  version "1.1.31"
+  version "1.1.32"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.32.tgz#3f132717cf2f9c169724b2b6caf373cf694198db"
-  integrity sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==
+  integrity sha512-MHACAkHpihU/REGGPLj4sEfc/XKW2bheigvHO1dUqjaKigMp1C8+WLQYRGgeKFMsw5PMfegZcaN8IDXK/cD0+g==
 
 public-encrypt@^4.0.0:
   version "4.0.3"
@@ -8461,7 +8608,7 @@ readable-stream@1.1.x:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@3, readable-stream@^3.0.6, readable-stream@^3.1.1:
+readable-stream@3:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.3.0.tgz#cb8011aad002eb717bf040291feba8569c986fb9"
   integrity sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==
@@ -8470,6 +8617,15 @@ readable-stream@3, readable-stream@^3.0.6, readable-stream@^3.1.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@^3.0.6, readable-stream@^3.1.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
+  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -8793,6 +8949,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rope-sequence@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.2.2.tgz#49c4e5c2f54a48e990b050926771e2871bcb31ce"
+  integrity sha1-ScTlwvVKSOmQsFCSZ3HihxvLMc4=
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -9747,6 +9908,70 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tippy.js@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.1.tgz#ea38fa7e1a2e3448ac35faa5115ccbb8414f50aa"
+  integrity sha512-H09joePakSu6eDSL1wj5LjEWwvpEELyJQlgsts4wVH7223t4DlyzGCaZNDO8/MQAnSuic4JhKpXtgzSYGlobvg==
+  dependencies:
+    popper.js "^1.14.7"
+
+tiptap-commands@^1.10.5:
+  version "1.10.5"
+  resolved "https://registry.yarnpkg.com/tiptap-commands/-/tiptap-commands-1.10.5.tgz#e897b59debdddcbc20f8289c92f9e39c5d22e19a"
+  integrity sha512-4OTdcf8IIDyd/CrRvJLfQpYaw+SGIuUJmwDDpxNCbcqnpHFsO1IkWdmV3loRab6Adg1UBNxeUKA8//nzpdJcUQ==
+  dependencies:
+    prosemirror-commands "^1.0.8"
+    prosemirror-inputrules "^1.0.4"
+    prosemirror-model "^1.7.0"
+    prosemirror-schema-list "^1.0.3"
+    prosemirror-state "^1.2.3"
+    prosemirror-tables "^0.8.0"
+    prosemirror-utils "^0.8.2"
+    tiptap-utils "^1.5.3"
+
+tiptap-extensions@^1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/tiptap-extensions/-/tiptap-extensions-1.20.1.tgz#fee879f27d2016176dda57d7d0ecef0e457ad3bf"
+  integrity sha512-YyWKvZe6AMU6PeyKWqHg545/8OYbNWYOWmnDm3DWhQICBOnx0Oj7rYnuXyfDFLPeqD38KtSlDXGOvcpzENygXg==
+  dependencies:
+    lowlight "^1.12.1"
+    prosemirror-collab "^1.1.1"
+    prosemirror-history "^1.0.4"
+    prosemirror-model "^1.7.0"
+    prosemirror-state "^1.2.3"
+    prosemirror-tables "^0.8.0"
+    prosemirror-transform "^1.1.3"
+    prosemirror-utils "^0.8.2"
+    prosemirror-view "^1.9.6"
+    tiptap "^1.20.1"
+    tiptap-commands "^1.10.5"
+
+tiptap-utils@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/tiptap-utils/-/tiptap-utils-1.5.3.tgz#7d4518a84eb6bfb10c98b19c901ca59123865f61"
+  integrity sha512-025uF1acJ7jLuA9dnKIxp8TQelyQ0uJqtT1jlziT8UslwZT5pKzwDsNkadFbnEBp6O9wfLZH0TuUtAUDmuq0VA==
+  dependencies:
+    prosemirror-model "^1.7.0"
+    prosemirror-state "^1.2.3"
+    prosemirror-tables "^0.8.0"
+    prosemirror-utils "^0.8.2"
+
+tiptap@^1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/tiptap/-/tiptap-1.20.1.tgz#d10fd0cd73a96bbb1f2d581da02ceda38fa8695b"
+  integrity sha512-uVGxPknq+cQH0G8yyCHvo8p3jPMLZMnkLeFjcrTyiY9PXl6XsSJwOjtIg4GXnIyCcfz2jWI5mhJGzCD26cdJGA==
+  dependencies:
+    prosemirror-commands "^1.0.8"
+    prosemirror-dropcursor "^1.1.1"
+    prosemirror-gapcursor "^1.0.3"
+    prosemirror-inputrules "^1.0.4"
+    prosemirror-keymap "^1.0.1"
+    prosemirror-model "^1.7.0"
+    prosemirror-state "^1.2.3"
+    prosemirror-view "^1.9.6"
+    tiptap-commands "^1.10.5"
+    tiptap-utils "^1.5.3"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -9811,13 +10036,6 @@ topo@2.x.x:
   dependencies:
     hoek "4.x.x"
 
-topo@3.x.x:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/topo/-/topo-3.0.3.tgz#d5a67fb2e69307ebeeb08402ec2a2a6f5f7ad95c"
-  integrity sha512-IgpPtvD4kjrJ7CRA3ov2FhWQADwv+Tdqbsf1ZnPUSAtCJ9e1Z44MmoSGDXGk4IppoZA7jd/QRkNddlLJWlUZsQ==
-  dependencies:
-    hoek "6.x.x"
-
 toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
@@ -10363,15 +10581,6 @@ vue-router@^3.0.6:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
   integrity sha512-Ox0ciFLswtSGRTHYhGvx2L44sVbTPNS+uD2kRISuo8B39Y79rOo0Kw0hzupTmiVtftQYCZl87mwldhh2L9Aquw==
 
-vue-simple-markdown@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/vue-simple-markdown/-/vue-simple-markdown-1.0.9.tgz#a2a50a77f52e0b6762e40a23fd5020d09cc909d3"
-  integrity sha512-QLx44sg7DFaXLVY/dFnaAD12BmGfQ+3IehbxXM/BhiHzHQ5lCPGCn1fUQ6l/JuFReFDCp0hm1ebxclGFEZpDdA==
-  dependencies:
-    github-markdown-css "^2.8.0"
-    highlightjs "^9.10.0"
-    node-emoji "^1.8.1"
-
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -10426,6 +10635,11 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+w3c-keyname@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-1.1.8.tgz#4e2219663760fd6535b7a1550f1552d71fc9372c"
+  integrity sha512-2HAdug8GTiu3b4NYhssdtY8PXRue3ICnh1IlxvZYl+hiINRq0GfNWei3XOPDg8L0PsxbmYjWVLuLj6BMRR/9vA==
+
 w3c-xmlserializer@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
@@ -10500,7 +10714,7 @@ webpack-dev-middleware@^3.7.0:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@^3.3.1:
+webpack-dev-server@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.4.1.tgz#a5fd8dec95dec410098e7d9a037ff9405395d51a"
   integrity sha512-CRqZQX2ryMtrg0r3TXQPpNh76eM1HD3Wmu6zDBxIKi/d2y+4aa28Ia8weNT0bfgWpY6Vs3Oq/K8+DjfbR+tWYw==