From 1d910927fe1ce75ab6ace54135deaec9e6d70238 Mon Sep 17 00:00:00 2001
From: Troplo <troplo@flowinity.com>
Date: Tue, 2 Feb 2021 23:44:45 +1100
Subject: [PATCH] Conversations and other stuff

---
 .env.development                         |   2 +-
 assets/css/kaverti.css                   |   8 +
 package.json                             |   3 +
 src/App.vue                              |   1 +
 src/assets/scss/editor.scss              | 222 +++++++
 src/assets/scss/elementStyles.scss       | 315 +++++++++
 src/assets/scss/elements.scss            |  84 +++
 src/components/ChatConversationInput.vue | 282 ++++++++
 src/components/ChatMenu.vue              | 115 ++++
 src/components/ChatPagination.vue        |  28 +
 src/components/ChatUserTyping.vue        |  41 ++
 src/components/ConversationMessage.vue   | 113 ++++
 src/components/ConversationTimeBreak.vue |  53 ++
 src/components/Editor.vue                |  13 +
 src/components/EditorIcons.vue           |  67 ++
 src/components/Navbar.vue                |   2 +-
 src/components/SidebarChat.vue           | 236 +++++++
 src/components/SidebarChatComp.vue       | 212 ++++++
 src/locales/en.json                      |   3 +-
 src/main.js                              |  40 ++
 src/router/index.js                      |  11 +
 src/store/index.js                       |  40 +-
 src/views/Chat.vue                       |  29 +
 src/views/ChatHome.vue                   |  27 +
 src/views/ChatMessage.vue                | 434 ++++++++++++
 src/views/ForumThread.vue                | 210 +++++-
 src/views/Forums.vue                     |   2 +-
 src/views/Home.vue                       | 109 +++-
 src/views/Stats.vue                      |   2 +-
 yarn.lock                                | 799 ++++++++++++++++++++++-
 30 files changed, 3468 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/scss/editor.scss
 create mode 100644 src/assets/scss/elementStyles.scss
 create mode 100644 src/assets/scss/elements.scss
 create mode 100644 src/components/ChatConversationInput.vue
 create mode 100644 src/components/ChatMenu.vue
 create mode 100644 src/components/ChatPagination.vue
 create mode 100644 src/components/ChatUserTyping.vue
 create mode 100644 src/components/ConversationMessage.vue
 create mode 100644 src/components/ConversationTimeBreak.vue
 create mode 100644 src/components/Editor.vue
 create mode 100644 src/components/EditorIcons.vue
 create mode 100644 src/components/SidebarChat.vue
 create mode 100644 src/components/SidebarChatComp.vue
 create mode 100644 src/views/Chat.vue
 create mode 100644 src/views/ChatHome.vue
 create mode 100644 src/views/ChatMessage.vue

diff --git a/.env.development b/.env.development
index f5b345c..641216d 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 VUE_APP_APIENDPOINT="/api/"
 VUE_APP_APIVERSION="v1"
-VUE_APP_GATEWAYENDPOINT="http://localhost:23981"
+VUE_APP_GATEWAYENDPOINT="/socket.io/"
 VUE_APP_STAGING=true
 VUE_APP_RELEASE="Canary"
\ No newline at end of file
diff --git a/assets/css/kaverti.css b/assets/css/kaverti.css
index 71e8b88..5bdda17 100644
--- a/assets/css/kaverti.css
+++ b/assets/css/kaverti.css
@@ -1,3 +1,11 @@
 .large-icon {
     font-size: 60px;
+}
+.vertical {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index fcb794a..b86c6c5 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales 'src/locales/**/*.json'"
   },
   "dependencies": {
+    "@kangc/v-md-editor": "^1.6.0",
     "@vue/cli": "^4.5.10",
     "axios": "^0.21.1",
     "buefy": "^0.9.4",
@@ -17,6 +18,8 @@
     "dotenv-webpack": "^6.0.0",
     "lodash.throttle": "^4.1.1",
     "socket.io": "^3.1.0",
+    "tiptap": "^1.32.0",
+    "tiptap-extensions": "^1.35.0",
     "to-boolean": "^1.0.0",
     "v-offline": "^1.3.0",
     "vue": "^2.6.11",
diff --git a/src/App.vue b/src/App.vue
index a5ef97e..271e935 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <style lang="scss">
 @import './assets/scss/buefy';
+@import './assets/scss/editor';
 </style>
 <style>
 @import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css';
diff --git a/src/assets/scss/editor.scss b/src/assets/scss/editor.scss
new file mode 100644
index 0000000..90f75e0
--- /dev/null
+++ b/src/assets/scss/editor.scss
@@ -0,0 +1,222 @@
+$color-black: #000000;
+$color-white: #ffffff;
+$color-grey: #dddddd;
+
+.editor {
+  position: relative;
+  max-width: 30rem;
+  margin: 0 auto 5rem auto;
+
+  &__content {
+
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+
+    * {
+      caret-color: currentColor;
+    }
+
+    pre {
+      padding: 0.7rem 1rem;
+      border-radius: 5px;
+      background: $color-black;
+      color: $color-white;
+      font-size: 0.8rem;
+      overflow-x: auto;
+
+      code {
+        display: block;
+      }
+    }
+
+    p code {
+      padding: 0.2rem 0.4rem;
+      border-radius: 5px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      background: rgba($color-black, 0.1);
+      color: rgba($color-black, 0.8);
+    }
+
+    ul,
+    ol {
+      padding-left: 1rem;
+    }
+
+    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;
+    }
+
+    table {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: 100%;
+      margin: 0;
+      overflow: hidden;
+
+      td, th {
+        min-width: 1em;
+        border: 2px solid $color-grey;
+        padding: 3px 5px;
+        vertical-align: top;
+        box-sizing: border-box;
+        position: relative;
+        > * {
+          margin-bottom: 0;
+        }
+      }
+
+      th {
+        font-weight: bold;
+        text-align: left;
+      }
+
+      .selectedCell:after {
+        z-index: 2;
+        position: absolute;
+        content: "";
+        left: 0; right: 0; top: 0; bottom: 0;
+        background: rgba(200, 200, 255, 0.4);
+        pointer-events: none;
+      }
+
+      .column-resize-handle {
+        position: absolute;
+        right: -2px; top: 0; bottom: 0;
+        width: 4px;
+        z-index: 20;
+        background-color: #adf;
+        pointer-events: none;
+      }
+    }
+
+    .tableWrapper {
+      margin: 1em 0;
+      overflow-x: auto;
+    }
+
+    .resize-cursor {
+      cursor: ew-resize;
+      cursor: col-resize;
+    }
+
+  }
+}
+
+.menubar {
+
+  margin-bottom: 1rem;
+  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
+
+  &.is-hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &.is-focused {
+    visibility: visible;
+    opacity: 1;
+    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);
+    }
+  }
+
+  span#{&}__button {
+    font-size: 13.3333px;
+  }
+}
+
+.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;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/scss/elementStyles.scss b/src/assets/scss/elementStyles.scss
new file mode 100644
index 0000000..6b79e8f
--- /dev/null
+++ b/src/assets/scss/elementStyles.scss
@@ -0,0 +1,315 @@
+@import './variables.scss';
+
+body {
+	background-color: rgba(245, 245, 245, 0.5);
+}
+
+pre {
+	background-color: $color__gray--primary;
+	padding: 0.5rem;
+}
+
+a {
+	font-weight: 700;
+	color: $color__darkgray--darker;
+	position: relative;
+	    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=) repeat-x 100% 100%;
+	    text-decoration: none;
+
+
+ 	&:hover, &:visited {
+ 		color: $color__darkgray--primary;
+ 	}
+ 	&:active {
+ 		color: $color__darkgray--darker;
+ 	}
+}
+
+blockquote {
+	background-color: $color__gray--primary;
+	border-left: thick solid $color__gray--darkest;
+
+	& * {
+		padding: 0.5rem;
+	}
+}
+
+b, strong {
+	font-weight: 700;
+}
+
+.picture_circle {
+	border-radius: 100%;
+	background-position: center center;
+	background-size: cover;
+	background-repeat: no-repeat;
+	position: relative;
+
+	&:after {
+		content: '';
+		position: absolute;
+		width: calc(100% - 4px);
+		height: calc(100% - 4px);
+		left: 0;
+		top: 0;
+		border: 2px solid rgba(150, 150, 150, 0.25);
+		border-radius: 100%;
+	}
+}
+
+.button {
+	border: 1.5px solid $color__gray--darkest;
+	display: inline-block;
+	border-radius: 0.25rem;
+	text-align: center;
+	@include text($font--role-default, 1rem, bold);
+	padding: 0.5rem;
+	cursor: pointer;
+	letter-spacing: 0.25px;
+	background: none;
+	background-color: #fff;
+	color: lighten($color__text--primary, 30%) ;
+	transition: background-color 0.2s, border-color 0.2s, filter 0.2s;
+	outline: none;
+
+	&:hover {
+		background-color: $color__lightgray--primary;
+		border-color: $color__gray--darkest;
+	}
+	&:active {
+		background-color: $color__lightgray--darker;
+		border-color: $color__gray--darkest;
+	}
+
+	&::-moz-focus-inner { border: 0; }
+
+	@at-root #{&}--borderless {
+		color: $color__text--secondary;
+		border-color: transparent;
+	}
+
+	@at-root #{&}--thin_text {
+		font-weight: 400;
+	}
+
+	@at-root #{&}--margin {
+		margin-right: 0.5rem;
+	}
+
+	@at-root #{&}--modal {
+		font-size: 1rem;
+		font-weight: 600;
+		padding: 0.25rem 0.5rem;
+		margin-left: 0.25rem;
+	}
+
+	@at-root #{&}--color_input {
+		width: 10rem;
+		margin-bottom: 1rem;
+		height: 31px;
+		padding: 0.25rem;
+	}
+
+	@at-root #{&}--disabled {
+		position: relative;
+		pointer-events: none;
+
+		@include user-select(none);
+
+		filter: saturate(80%) grayscale(40%) brightness(110%);
+	}
+
+	@at-root #{&}--lightblue {
+		border-color: $color__blue--primary;
+
+		&:hover, &:active {
+			border-color: $color__blue--darker;
+		}
+	}
+
+	@mixin filled_button($background, $border, $text: #fff) {
+		background-color: $background;
+		border-color: $border;
+		color: $text ;
+
+		&:hover {
+			background-color: darken($background, 5%);
+			border-color: rgba($border, 0.6);
+			color: darken(#fff, 5%) ;
+		}
+		&:active {
+			background-color: darken($background, 10%);
+			border-color: rgba($border, 0.6);
+			color: darken(#fff, 10%) ;
+		}
+	}
+	@at-root #{&}--blue {
+		@include filled_button(
+			$color__blue--primary,
+			$color__blue--darker
+		);
+	}
+	@at-root #{&}--green {
+		@include filled_button($color__green--primary, $color__green--darker);
+	}
+	@at-root #{&}--red {
+		@include filled_button($color__red--primary, $color__red--darker);
+	}
+}
+@media (max-width: 420px) {
+	.button {
+		user-select: none;
+	}
+}
+
+.input {
+	border: 1.5px solid $color__gray--darkest;
+	border-radius: 0.25rem;
+	@include text;
+	padding: 0.25rem;
+	outline: none;
+}
+
+.h1 {
+	@include text($font--role-default, 3rem);
+}
+.h3 {
+	@include text($font--role-default, 1.5rem);
+	font-weight: 500;
+
+	@at-root #{&}--margin_top {
+		margin-top: 1.5rem;
+	}
+}
+
+.p--condensed {
+	margin-top: 0.25rem;
+}
+
+.category_widget {
+	@at-root #{&}__box {
+		background-color: #fff;
+		padding: 1.5rem;
+		border-radius: 0.25rem;
+		margin-bottom: 1rem;
+		border: thin solid $color__gray--darker;
+	}
+
+	@at-root #{&}__text {
+		margin-bottom: 1rem;
+
+		@at-root #{&}__title {
+			margin-bottom: 0.5rem;
+			font-weight: bold;
+			font-size: 1.25rem;
+		}
+	}
+}
+
+.overlay_message {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding-right: 5rem;
+	font-size: 2rem;
+	user-select: none;
+	cursor: default;
+	transition: none;
+	color: $color__gray--darkest;
+
+	span {
+		font-size: 4rem;
+		color: $color__gray--darker;
+	}
+
+	@at-root #{&}__loading {
+		margin-top: 2rem;
+		margin-bottom: 0.5rem;
+	}
+}
+@media (max-width: 420px) {
+	div.overlay_message {
+		width: 100%;
+		text-align: center;
+		padding: 0;
+		margin-top: 5rem;
+	}
+}
+
+.admin_badge {
+	background: $color__darkgray--primary;
+	border-radius: 0.25rem;
+	color: #fff;
+	cursor: default;
+	font-size: 0.7rem;
+	font-weight: 400;
+	padding: 0.1rem 0.3rem;
+
+	@at-root #{&}--large {
+		font-size: 1.5rem;
+	}
+}
+
+.link_preview {
+	border: thick solid $color__gray--primary;
+	padding: 1rem;
+
+	h1, h2, p {
+		margin: 0;
+	}
+
+	h1 {
+		font-size: 1.25rem;
+	}
+	h2 {
+		font-size: 1rem;
+		font-weight: normal;
+		color: $color__darkgray--primary;
+	}
+	p {
+		font-weight: 300;
+		display: flex;
+		margin-top: 0.5rem;
+	}
+	img {
+		max-width: 100px;
+		max-height: 100px;
+		margin-right: 0.5rem;
+	}
+
+	#{&}__partial {
+		margin-top: 0.5rem;
+	}
+}
+
+blockquote.twitter-tweet {
+	padding: 1rem;
+	padding-top: 0;
+	background-color: unset;
+	margin: 0;
+	border: thick solid $color__gray--primary;
+
+	* {
+		padding: 0;
+	}
+}
+
+//Vue transition class
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.2s;
+}
+.fade-enter, .fade-leave-to {
+	opacity: 0;
+}
+
+.slide-enter-active, .slide-leave-active {
+	transition: opacity 0.2s, max-height 0.2s;
+	overflow: hidden;
+}
+.slide-enter, .slide-leave-to {
+	max-height: 0;
+}
+.slide-enter-to, .slide-leave {
+	max-height: 20rem;
+}
diff --git a/src/assets/scss/elements.scss b/src/assets/scss/elements.scss
new file mode 100644
index 0000000..db92d27
--- /dev/null
+++ b/src/assets/scss/elements.scss
@@ -0,0 +1,84 @@
+@import './variables.scss';
+
+.input {
+	border: thin solid $gray-2;
+	border-radius: 0.25rem;
+	font-family: $font-family;
+	font-weight: 300;
+	height: 1.5rem;
+	outline: none;
+	padding: 0.25rem 0.5rem;
+	transition: box-shadow 0.2s, border-color 0.2s;
+	width: 100%;
+
+	&:hover, &:active {
+		border-color: $gray-3;
+	}
+	&:focus {
+		border-color: $gray-2;
+		box-shadow: 0 0 0 2px $gray-2;
+	}
+}
+.input--textarea {
+	border-radius: 0.25rem;
+	font-size: 0.85rem;
+	height: unset;
+	width: unset;
+	resize: none;
+}
+
+.label .input {
+	margin-top: 0.125rem;
+}
+
+
+.button {
+	background-color: #fff;
+	border: thin solid $gray-2;
+	border-radius: 0.25rem;
+	font-family: $font-family;
+	padding: 0.5rem 1rem;
+	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+
+	&:hover {
+		background-color: $gray-hover;
+	}
+	&:active {
+		background-color: $gray-0;
+		padding: 0.5rem 1rem;
+	}
+	&:focus {
+		box-shadow: 0 0 0 2px $gray-2;
+		outline: none;
+	}
+
+	&::-moz-focus-inner {
+		border: 0;
+	}
+}
+.button--blue {
+	background-color: $blue-2;
+	border-color: $blue-5;
+	color: #fff;
+
+	&:hover { background-color: darken($blue-2, 5%) }
+	&:active { background-color: darken($blue-2, 7.5%) }
+	&:focus { box-shadow: 0 0 0 2px $blue-5; }
+}
+.button--blue_border {
+	border-color: $blue-5;
+	color: $blue-5;
+	&:focus {
+		border-color: $blue-4;
+		box-shadow: 0 0 0 2px $blue-4;
+	}
+}
+.button--red {
+	background-color: $red-1;
+	border-color: $red-5;
+	color: #fff;
+
+	&:hover { background-color: darken($red-1, 5%) }
+	&:active { background-color: darken($red-1, 7.5%) }
+	&:focus { box-shadow: 0 0 0 2px $red-5; }
+}
\ No newline at end of file
diff --git a/src/components/ChatConversationInput.vue b/src/components/ChatConversationInput.vue
new file mode 100644
index 0000000..037161a
--- /dev/null
+++ b/src/components/ChatConversationInput.vue
@@ -0,0 +1,282 @@
+<template>
+	<div class='new_conversation_input'>
+		<div
+			class='new_conversation_input__input_bar'
+			:class='{ "new_conversation_input__input_bar--focus": inputFocused }'
+		>
+      <div class='new_conversation_input__selected_user' v-for='(user) in selected' :key='"conversation-selected-" + user.id'>
+        {{user.username}}
+      </div>
+      <div class='new_conversation_input__selected_users' v-if="selected.user">
+      </div>
+        <div class='new_conversation_input__placeholders_input'>
+          <input
+					ref='input'
+					v-model='input'
+					placeholder="Enter a username"
+					class='new_conversation_input__input'
+					@keydown='inputHandler'
+					@focus='inputFocused = true;'
+					@blur='inputFocused = false;'
+          />
+				<div class='new_conversation_input__placeholders'>
+					<span
+						class='new_conversation_input__placeholder--hidden'
+					>
+						{{placeholders[0]}}
+					</span>
+					<span
+						class='new_conversation_input__placeholder'
+						v-if='placeholders[1]'
+					>
+						{{placeholders[1]}}
+					</span>
+				</div>
+			</div>
+		</div>
+		<transition name='transition-slide-fade'>
+			<div class='new_conversation_input__suggestions' v-if='suggestions.length'>
+				<div
+					class='new_conversation_input__suggestion_item'
+					:class='{ "new_conversation_input__suggestion_item--focus": focusedSuggestionIndex === $index }'
+					tabindex='0'
+					v-for='(suggestion, $index) in suggestions'
+          :key='"conversation-suggestion-" + suggestion.id'
+          @click='addUser(suggestion)'
+				>
+					<div>
+						<div class='new_conversation_input__profile_picture'></div>
+					</div>
+					<div class='new_conversation_input__name'>{{suggestion.username}}</div>
+				</div>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'new-conversation-input',
+		props: ['value'],
+		data () {
+			return {
+				input: '',
+				inputFocused: false,
+				suggestionsData: [],
+				selected: [],
+				focusedSuggestionIndex: null
+			};
+		},
+		computed: {
+			suggestions () {
+				return this.suggestionsData.filter(user => {
+					return (
+						!this.selected.filter(u => u.id === user.id).length &&
+						user.username !== this.$store.state.username
+					);
+				});
+			},
+			selectedSuggestionIndex () {
+				if(this.focusedSuggestionIndex !== null) {
+					return this.focusedSuggestionIndex;
+				} else {
+					return 0;
+				}
+			},
+			placeholders () {
+				if(!this.suggestions.length) {
+					return ['', ''];
+				}
+				let firstSuggestion = this.suggestions[this.selectedSuggestionIndex].username;
+
+				return [
+					firstSuggestion.slice(0, this.input.length),
+					firstSuggestion.slice(this.input.length, firstSuggestion.length)
+				];
+			},
+		},
+		methods: {
+			inputHandler (e) {
+				//tab, space or enter
+				if([9, 32, 13].indexOf(e.keyCode) > -1) {
+					e.preventDefault();
+					this.addUser();
+				//backspace
+				} else if (
+					e.keyCode === 8 &&
+					!this.input.length &&
+					this.selected.length
+				) {
+					this.input = this.selected.pop().username;
+				//Down
+				} else if(e.keyCode === 40) {
+					this.setSelectionFocus(1);
+				//Up
+				} else if(e.keyCode === 38) {
+					this.setSelectionFocus(-1);
+				}
+			},
+			setSelectionFocus (direction) {
+				let index = this.focusedSuggestionIndex;
+				let length = this.suggestions.length;
+
+				if(!length) return;
+
+				if(index !== null) {
+					let newIndex = (index + 1*direction) % length;
+					this.focusedSuggestionIndex = (newIndex > 0) ? newIndex : null;
+				} else if (direction === 1 && index === null) {
+					this.focusedSuggestionIndex = 0;
+				}
+			},
+			addUser (user) {
+				if(user) {
+					this.selected.push(user);
+				} else if(this.suggestions.length) {
+					this.selected.push(
+						this.suggestions[this.selectedSuggestionIndex]
+					);
+				} else {
+					return;
+				}
+
+				this.input = '';
+				this.focusedSuggestionIndex = null;
+				this.$refs.input.focus();
+			}
+		},
+		watch: {
+			input () {
+				let input = this.input.trim();
+
+				if(input) {
+					this.axios
+						.get('/api/v1/kaverti/search/user/?q=' + input)
+						.then(res => {
+							this.suggestionsData = res.data.users;
+						})
+						.catch(e => {
+							this.$store.commit('setErrors', e.response.data.errors);
+						})
+				} else {
+					this.suggestionsData = [];
+				}
+			},
+			selected () {
+				this.$emit('input', this.selected);
+			}
+		}
+	};
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+	@import '../assets/scss/elements.scss';
+
+	.new_conversation_input {
+		position: relative;
+
+		@at-root #{&}__input_bar {
+			@extend .input;
+
+			display: flex;
+			height: 2rem;
+			padding: 0 0.25rem;
+			padding-left: 0.125rem;
+			width: 30rem;
+			overflow-x: hidden;
+
+			@at-root #{&}--focus {
+				border-color: $gray-2;
+				box-shadow: 0 0 0 2px $gray-2;
+			}
+		}
+			@at-root #{&}__selected_users {
+				align-items: center;
+				display: flex;
+				font-weight: 300;
+				font-size: 0.85rem;
+				margin-right: 0.125rem;
+			}
+				@at-root #{&}__selected_user {
+					background-color: $gray-1;
+					border-radius: 0.25rem;
+					cursor: default;
+					font-size: 0.8rem;
+					height: 1.5rem;
+					line-height: 1.5rem;
+					margin: 0.125rem;
+					padding: 0 0.25rem;
+				}
+			@at-root #{&}__placeholders_input {
+				position: relative;
+				width: 100%;
+			}
+				@at-root #{&}__input {
+					border: 0;
+					font-family: $font-family;
+					font-weight: 300;
+					font-size: 0.85rem;
+					height: 100%;
+					outline: none;
+					width: 100%;
+				}
+				@at-root #{&}__placeholders {
+					align-items: center;
+					color: $gray-2;
+					display: flex;
+					font-size: 0.85rem;
+					height: 100%;
+					left: 1px;
+					pointer-events: none;
+					position: absolute;
+					top: 0;
+				}
+					@at-root #{&}__placeholder {
+						margin-left: -0.5px;
+
+						@at-root #{&}--hidden {
+							visibility: hidden;
+						}
+					}
+		@at-root #{&}__suggestions {
+			background-color: #fff;
+			border: thin solid $gray-2;
+			border-radius: 0.25rem;
+			box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
+			left: calc(50% - 15rem);
+			max-height: 25rem;
+			overflow-y: auto;
+			padding: 0.25rem 0;
+			position: absolute;
+			top: calc(100% + 0.25rem);
+			width: 30rem;
+		}
+		@at-root #{&}__suggestion_item {
+			align-items: center;
+			cursor: default;
+			display: flex;
+			font-weight: 300;
+			padding: 0.5rem 1rem;
+			transition: background-color 0.2s;
+
+			&:hover {
+				background-color: $gray-hover;
+			}
+			@at-root #{&}--focus {
+				background-color: $gray-0;
+			}
+			&:active, &:focus {
+				background-color: $gray-0;
+				outline: none;
+			}
+		}
+		@at-root #{&}__profile_picture {
+			border-radius: 100%;
+			background-color: $gray-1;
+			height: 1.5rem;
+			margin-right: 0.5rem;
+			width: 1.5em;
+		}
+	}
+</style>
diff --git a/src/components/ChatMenu.vue b/src/components/ChatMenu.vue
new file mode 100644
index 0000000..8abd684
--- /dev/null
+++ b/src/components/ChatMenu.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class='c_menu'>
+    <div
+        class='c_menu__slot'
+        :class='{ "c_menu__slot--show": showMenu }'
+        @click='showMenu = true'
+        ref='slot'
+    >
+      <slot></slot>
+    </div>
+    <div
+        class='c_menu__menu'
+        :style='{ "left": left, "right": right }'
+        :class='{ "c_menu__menu--show": showMenu }'
+    >
+      <div
+          class='c_menu__item'
+          :v-for='item in items'
+          @click='showMenu = false; $emit(item.event)'
+      >
+        {{item.text}}
+      </div>
+    </div>
+    <div
+        class='c_menu__overlay'
+        :class='{ "c_menu__overlay--show": showMenu }'
+        @click='showMenu = false'
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'c-menu',
+  props: ['items'],
+  data () {
+    return {
+      showMenu: false,
+      left: '0',
+      right: null
+    }
+  },
+  mounted () {
+    let rect = this.$refs.slot.getBoundingClientRect();
+    let rem = 16;
+
+    if(rect.right + 10*rem + 0.5*rem > window.innerWidth) {
+      this.left = null;
+      this.right = '0';
+    }
+  }
+};
+</script>
+
+<style lang='scss' scoped>
+@import '../assets/scss/variables.scss';
+
+.c_menu {
+  position: relative;
+
+  @at-root #{&}__slot {
+    cursor: pointer;
+  }
+
+  @at-root #{&}__overlay {
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+
+    @at-root #{&}--show {
+      pointer-events: all;
+    }
+  }
+  @at-root #{&}__menu {
+    background-color: #fff;
+    border: 1px solid $gray-2;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
+    margin-top: -0.5rem;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0.25rem 0;
+    pointer-events: none;
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    transition: margin-top 0.2s, opacity 0.2s;
+    width: 10rem;
+    z-index: 3;
+
+    @at-root #{&}--show {
+      margin-top: 0;
+      pointer-events: all;
+      opacity: 1;
+    }
+  }
+  @at-root #{&}__item {
+    cursor: default;
+    font-size: 0.9rem;
+    padding: 0.5rem 1rem;
+    text-align: left;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: $gray-hover;
+    }
+    &:active {
+      background-color: $gray-0;
+    }
+  }
+}
+</style>
diff --git a/src/components/ChatPagination.vue b/src/components/ChatPagination.vue
new file mode 100644
index 0000000..a3f7552
--- /dev/null
+++ b/src/components/ChatPagination.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class='scroll_load' @scroll='handler'>
+    <c-loading-icon v-if='position === "top" && loading'>LOAD TOP</c-loading-icon>
+    <slot></slot>
+    <c-loading-icon v-if='position === "bottom" && loading'>LOAD BOTTOM</c-loading-icon>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'c-scroll-load',
+  props: ['position', 'loading'],
+  methods: {
+    handler (e) {
+      let $el = e.target;
+      let height = $el.scrollHeight - $el.scrollTop - 16 <= $el.clientHeight;
+
+      if(
+          (this.position === 'top' && $el.scrollTop < 16) ||
+          (this.position === 'bottom' && height)
+      ) {
+        this.$emit('load');
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/ChatUserTyping.vue b/src/components/ChatUserTyping.vue
new file mode 100644
index 0000000..1af1751
--- /dev/null
+++ b/src/components/ChatUserTyping.vue
@@ -0,0 +1,41 @@
+<template>
+	<transition name='transition-fade'>
+		<div class='user_typing' v-if='typingUsers.length'>
+			<div class='user_typing__users' v-if='users.length > 2'>{{userList}} {{typingUsers.length > 2 ? "are" : "is"}} typing</div>
+			<c-loading-dots>Loading</c-loading-dots>
+		</div>
+	</transition>
+</template>
+
+<script>
+
+	export default {
+		name: 'user-typing',
+		props: ['users', 'typing-users'],
+		computed: {
+			userList () {
+				this.typingUsers
+				return this.typingUsers
+					.map(u => u.username)
+					.join(', ')
+					.replace(/, ([^,]*)$/, ' and $1');
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
+	.user_typing {
+		display: flex;
+		flex-direction: column;
+		padding: 0.5rem 0;
+
+		@at-root #{&}__users {
+			color: $text-secondary;
+			font-size: 0.85rem;
+			font-weight: 300;
+		}
+	}
+</style>
diff --git a/src/components/ConversationMessage.vue b/src/components/ConversationMessage.vue
new file mode 100644
index 0000000..b0c9cd8
--- /dev/null
+++ b/src/components/ConversationMessage.vue
@@ -0,0 +1,113 @@
+<template>
+	<div
+		class='conversation_message'
+		:class='{
+			"conversation_message--self": self,
+			"conversation_message--margin": useMargin
+		}'
+	>
+		<conversation-time-break :message='message' :previous='adjacentMessages.previous'></conversation-time-break>
+		<div
+			class='conversation_message__username'
+			v-if='showUsername'
+		>
+			{{message.User.username}}
+		</div>
+		<pre
+			class='conversation_message__message'
+			:class='{
+				"conversation_message__message--self": self
+			}'
+		>{{message.content}}</pre>
+	</div>
+</template>
+
+<script>
+	import ConversationTimeBreak from './ConversationTimeBreak';
+
+	export default {
+		name: 'conversation-message',
+		props: ['message', 'users', 'context'],
+		components: {
+			ConversationTimeBreak
+		},
+		computed: {
+			self () {
+				return this.message.User.username === this.$store.state.username;
+			},
+			showUsername () {
+				let prev = this.adjacentMessages.previous;
+				let selfUsername = this.message.User.username;
+
+				//If first message or not from the same user
+				//and there are more than two users in the conversation
+				return (
+					(!prev || prev.User.username !== selfUsername) &&
+					(this.users.length > 2 && !this.self)
+				);
+			},
+			useMargin () {
+				let next = this.context[1];
+
+				//If next message exists and is not from the same user
+				return (
+					next &&
+					next.User.username !== this.message.User.username
+				);
+			},
+			adjacentMessages () {
+				let currentIndex = this.context.findIndex(m => m.id === this.message.id);
+
+				return {
+					previous: this.context[currentIndex-1],
+					next: this.context[currentIndex+1]
+				};
+			}
+		}
+	};
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
+	.conversation_message {
+		align-items: flex-start;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 0.125rem;
+
+		@at-root #{&}--self {
+			align-items: flex-end;
+		}
+
+		@at-root #{&}--margin {
+			margin-bottom: 0.5rem;
+		}
+
+		@at-root #{&}__username {
+			color: $text-secondary;
+			font-size: 0.85rem;
+			font-weight: 300;
+			margin-left: 0.5rem;
+		}
+
+		@at-root #{&}__message {
+			background-color: $gray-0;
+			border-radius: 1rem;
+			font-family: $font-family;
+			font-size: 0.85rem;
+			font-weight: 300;
+			margin: 0;
+			max-width: 75%;
+			padding: 0.5rem 0.75rem;
+			white-space: pre-line;
+			word-break: break-all;
+
+			@at-root #{&}--self {
+				background-color: $blue-2;
+				border-radius: 1rem;
+				color: #fff;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/components/ConversationTimeBreak.vue b/src/components/ConversationTimeBreak.vue
new file mode 100644
index 0000000..61a197a
--- /dev/null
+++ b/src/components/ConversationTimeBreak.vue
@@ -0,0 +1,53 @@
+<template>
+	<div class='conversation_time_break' v-if='showDate'>
+		{{formattedDate}}
+	</div>
+</template>
+
+<script>
+	export default  {
+		name: 'conversation-time-break',
+		props: ['message', 'previous'],
+		computed: {
+			formattedDate () {
+				let date = new Date(this.message.createdAt);
+
+				let beginningOfToday = new Date();beginningOfToday.setMilliseconds(0);beginningOfToday.setSeconds(0);beginningOfToday.setMinutes(0);beginningOfToday.setHours(0);
+				let beginningOfYesterday = new Date(beginningOfToday - 24*60*60*1000);
+				let timeString = date.toTimeString().slice(0, 5);
+
+				if(date - beginningOfToday >= 0) {
+					return timeString;
+				} else if(date - beginningOfYesterday >= 0) {
+					return 'Yesterday at ' + timeString;
+				} else {
+					return date.toLocaleDateString() + ' at ' + timeString;
+				}
+			},
+			showDate () {
+				if(!this.previous) {
+					return true;
+				} else {
+					let date = new Date(this.message.createdAt);
+					let prev = new Date(this.previous.createdAt);
+
+					//Greater than 30 minutes difference
+					return !prev || (date - prev) > 1000*60*30;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
+	.conversation_time_break {
+		color: $text-secondary;
+		cursor: default;
+		font-size: 0.85rem;
+		text-align: center;
+		user-select: none;
+		width: 100%;
+	}
+</style>
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
new file mode 100644
index 0000000..b737f5f
--- /dev/null
+++ b/src/components/Editor.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+name: "Editor"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/EditorIcons.vue b/src/components/EditorIcons.vue
new file mode 100644
index 0000000..e4964f9
--- /dev/null
+++ b/src/components/EditorIcons.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="icon" :class="[`icon--${name}`, `icon--${size}`, { 'has-align-fix': fixAlign }]">
+    <svg class="icon__svg">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="'#icon--' + name"></use>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {},
+    size: {
+      default: 'normal',
+    },
+    modifier: {
+      default: null,
+    },
+    fixAlign: {
+      default: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 0.8rem;
+  height: 0.8rem;
+  margin: 0 .3rem;
+  top: -.05rem;
+  fill: currentColor;
+  // &.has-align-fix {
+  // 	top: -.1rem;
+  // }
+  &__svg {
+    display: inline-block;
+    vertical-align: top;
+    width: 100%;
+    height: 100%;
+  }
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+}
+// svg sprite
+body > svg,
+.icon use > svg,
+symbol {
+  path,
+  rect,
+  circle,
+  g {
+    fill: currentColor;
+    stroke: none;
+  }
+  *[d="M0 0h24v24H0z"] {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index e935454..3857ef2 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -224,7 +224,7 @@
                   required>
               </b-input>
             </b-field>
-            <b-checkbox v-model="register.agree">{{$t('register.agree')}} <router-link to="/legal/tos">{{$t('tos')}}</router-link></b-checkbox>
+            <b-checkbox v-model="register.agree">{{$t('register.agree')}} <router-link @click="registerModal = false  " to="/legal/tos">{{$t('tos')}}</router-link></b-checkbox>
           </section>
           <footer class="modal-card-foot">
             <b-button
diff --git a/src/components/SidebarChat.vue b/src/components/SidebarChat.vue
new file mode 100644
index 0000000..b14f5a3
--- /dev/null
+++ b/src/components/SidebarChat.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class=''>
+    <div class='side_panel__header'>
+      <c-menu
+          class='side_panel__username'
+          :items='userMenu'
+          @logout='logout'
+      >
+        {{$store.state.username}} <font-awesome-icon icon='angle-down'></font-awesome-icon>
+      </c-menu>
+      <b-button
+          class='side_panel__add button button--blue_border'
+          @click='$router.push("/chat/conversation")'
+      >
+        New conversation
+      </b-button>
+    </div>
+    <br>
+    <div class='side_panel__search'>
+      <input
+          type='text'
+          placeholder='Search conversations and people'
+          class='input side_panel__search__input'
+          :class='{
+					"side_panel__search__input--small": showCloseButton
+				}'
+          @focus='setShowCloseButton(true)'
+          @keyup='getConversations'
+          v-model='searchQuery'
+      >
+      <transition name='transition-grow'>
+        <button
+            class='button side_panel__search__close'
+            v-if='showCloseButton'
+            @click='setShowCloseButton(false)'
+        >
+          Close
+        </button>
+      </transition>
+    </div>
+    <c-scroll-load
+        class='side_panel__conversations'
+        :class='{ "side_panel__conversations--empty": !$store.state.user.conversations.length }'
+
+        :loading='loading'
+        position='bottom'
+        @load='getConversations'
+    >
+      <side-panel-conversation
+          :v-for='conversation in $store.state.user.conversations'
+          :conversation='conversation'
+          tabindex='0'
+      ></side-panel-conversation>
+
+      <div v-if='!$store.state.user.conversations.length && !loading'>
+        No conversations
+      </div>
+    </c-scroll-load>
+  </div>
+</template>
+
+<script>
+import CMenu from './ChatMenu';
+import CScrollLoad from './ChatPagination';
+import SidePanelConversation from './SidebarChatComp';
+
+export default {
+  name: 'side-panel',
+  components: {
+    CMenu,
+    CScrollLoad,
+    SidePanelConversation
+  },
+  data () {
+    return {
+      page: 0,
+
+      loading: false,
+      userMenu: [
+        { text: 'Settings', event: 'settings' },
+        { text: 'Log out', event: 'logout' }
+      ],
+
+      showCloseButton: false,
+      searchQuery: ''
+    };
+  },
+  watch: {
+    //When typing for each letter clear the data
+    searchQuery () {
+      this.page = 0;
+      this.$store.commit('clearConversations');
+    }
+  },
+  methods: {
+    logout () {
+      this.axios
+          .post('/api/user/logout')
+          .then(() => {
+            this.$store.commit('setUser', { id: null, username: null });
+            this.$router.push('/');
+          })
+          .catch(e => {
+            this.$store.commit('setErrors', e.response.data.errors);
+          });
+    },
+    setShowCloseButton (val) {
+      if(this.showCloseButton !== val) {
+        this.showCloseButton = val;
+        this.$store.commit('clearConversations');
+        this.page = 0;
+
+        if(!val) {
+          this.searchQuery = '';
+          this.getConversations();
+        }
+      }
+    },
+    getConversations () {
+      if(!this.loading && this.page !== null) {
+        let params = { page: this.page };
+        let searchQuery = this.searchQuery.trim();
+        if(searchQuery) params.search = searchQuery;
+
+        this.loading = true;
+
+        this.axios
+            .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `users/conversations`, { params })
+            .then(res => {
+              this.loading = false;
+              this.$store.commit('addConversations', res.data.Conversations);
+              this.page = res.data.continuePagination ? this.page+1 : null;
+            })
+            .catch(e => {
+              this.loading = false;
+              this.$store.commit('setErrors', e.response.data.errors);
+            });
+      }
+    },
+    updateConversations (updatedConversation) {
+      //If conversation is already open, assume message has been read
+      if(
+          this.$route.name === 'conversation' &&
+          this.$route.params.id &&
+          +this.$route.params.id === updatedConversation.id
+      ) {
+        updatedConversation.lastRead = new Date() + '';
+      }
+      this.$store.commit('updateUnshiftConversation', updatedConversation);
+    }
+  },
+  mounted () {
+    this.getConversations();
+    this.$io.on('conversation', this.updateConversations);
+  }
+};
+</script>
+
+<style lang='scss' scoped>
+@import '../assets/scss/variables.scss';
+
+.side_panel {
+  border-right: thin solid $gray-1;
+  display: grid;
+  grid-template-rows: 4rem 2.75rem auto;
+  height: 100%;
+  width: 17rem;
+
+  @at-root #{&}__username {
+    svg {
+      color: $gray-5;
+      position: relative;
+      top: 0.1rem;
+    }
+  }
+
+  @at-root #{&}__header {
+    align-items: center;
+    align-self: center;
+    display: flex;
+    font-weight: 300;
+    justify-content: space-between;
+    padding: 0 0.5rem;
+    text-align: center;
+  }
+  @at-root #{&}__username {
+    cursor: pointer;
+
+    span {
+      color: $gray-4;
+      font-size: 0.85rem;
+      margin-left: -0.25rem;
+    }
+  }
+  @at-root #{&}__add {
+    cursor: pointer;
+    height: 2rem;
+  }
+  @at-root #{&}__search {
+    align-self: start;
+    display: grid;
+    grid-template-columns: auto min-content;
+    padding: 0 0.5rem;
+
+    @at-root #{&}__input {
+      padding: 1rem 0.75rem;
+      transition: padding 0.2s;
+
+      @at-root #{&}--small {
+        padding: 1rem 0.25rem;
+      }
+    }
+
+    @at-root #{&}__close {
+      margin-left: 0.25rem;
+      padding: 0 0.25rem;
+    }
+  }
+  @at-root #{&}__conversations {
+    align-self: start;
+    //border-top: thin solid $gray-1;
+    max-height: 100%;
+    padding: 0.25rem;
+    overflow-y: auto;
+
+    @at-root #{&}--empty {
+      align-items: center;
+      cursor: default;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      user-select: none;
+    }
+  }
+}
+</style>
diff --git a/src/components/SidebarChatComp.vue b/src/components/SidebarChatComp.vue
new file mode 100644
index 0000000..aa5a3ef
--- /dev/null
+++ b/src/components/SidebarChatComp.vue
@@ -0,0 +1,212 @@
+<template>
+  <div
+      class='side_panel_conversation'
+      :class='{
+			"side_panel_conversation--selected": selected,
+			"side_panel_conversation--unread": unread
+		}'
+      @click='goToConversation'
+      @keydown.enter='goToConversation'
+  >
+    <div>
+      <div class='side_panel_conversation__profile_picture'>
+        <div
+            class='side_panel_conversation__profile_picture__letter'
+            :v-for='userLetter in userLetters'
+            :class='[
+						"side_panel_conversation__profile_picture__letter--" + userLetters.length
+					]'
+            :style='{
+						"background-color": userLetter.color
+					}'
+        >
+          {{userLetter.letter}}
+        </div>
+      </div>
+    </div>
+    <div class='side_panel_conversation__conversation_content'>
+      <div class='side_panel_conversation__name'>{{conversation.name}}</div>
+      <div class='side_panel_conversation__snippet'>
+        {{username}}:
+        {{conversation.Messages[0].content}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'side-panel-conversation',
+  props: ['conversation'],
+  computed: {
+    selected () {
+      return (
+          this.$route.name === 'conversation' &&
+          +this.$route.params.id === this.conversation.id
+      );
+    },
+    unread () {
+      return (
+          new Date(this.conversation.lastRead) - new Date(this.conversation.Messages[0].createdAt) < 0
+      );
+    },
+    username () {
+      let username = this.conversation.Messages[0].User.username;
+
+      if(username === this.$store.state.username) {
+        return 'You';
+      } else {
+        return username;
+      }
+    },
+    userLetters () {
+      return this.conversation.Users
+          .filter(u => u.username !== this.$store.state.username)
+          .map(u => {
+            return {
+              letter: u.username[0].toUpperCase(),
+              color: u.color
+            };
+          })
+          .slice(0, 4);
+    }
+  },
+  methods: {
+    goToConversation () {
+      this.$router.push("/chat/" + this.conversation.id);
+    }
+  }
+};
+</script>
+
+<style lang='scss' scoped>
+@import '../assets/scss/variables.scss';
+
+.side_panel_conversation {
+  background-color: #fff;
+  //border-bottom: thin solid $gray-1;
+  border-radius: 0.25rem;
+  cursor: default;
+  display: flex;
+  height: 5rem;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  position: relative;
+  transition: background-color 0.2s;
+
+  &:hover, &:focus {
+    background-color: $gray-hover;
+    outline: none;
+  }
+
+  &::after {
+    background-color: $gray-3;
+    border-radius: 0.25rem 0 0 0.25rem;
+    content: '';
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    transition: opacity 0.2s;
+    width: 0.25rem;
+  }
+
+  @at-root #{&}--selected {
+    background-color: $gray-0;
+
+    &::after {
+      opacity: 1;
+    }
+
+    &:hover, &:focus {
+      background-color: $gray-0;
+      outline: none;
+    }
+  }
+
+  @at-root #{&}--unread {
+    background-color: transparentize($blue-1, 0.7);
+    font-weight: bold;
+
+    &:hover { background-color: transparentize($blue-1, 0.7); }
+  }
+
+  @at-root #{&}__profile_picture {
+    background-color: $gray-1;
+    border-radius: 100%;
+    height: 3rem;
+    overflow: hidden;
+    width: 3rem;
+
+    @at-root #{&}__letter {
+      font-weight: 300;
+      padding: 0.25rem;
+      text-align: center;
+
+      @at-root #{&}--1, #{&}--2 {
+        font-size: 1.5rem;
+        height: 3rem;
+        line-height: 2.5rem;
+        width: 3rem;
+      }
+      @at-root #{&}--2 {
+        display: inline-block;
+        font-size: 1rem;
+        width: 1.5rem;
+      }
+      @at-root #{&}--3 {
+        height: 1.5rem;
+
+        &:nth-child(1), &:nth-child(2) {
+          display: inline-block;
+          padding-bottom: 0;
+          width: 1.5rem;
+        }
+        &:nth-child(3) {
+          padding-bottom: 0.5rem;
+          padding-top: 0;
+          width: 3rem;
+        }
+      }
+      @at-root #{&}--4 {
+        display: inline-block;
+        height: 1.5rem;
+        width: 1.5rem;
+
+        &:nth-child(1), &:nth-child(2) {
+          padding-bottom: 0;
+        }
+        &:nth-child(3), &:nth-child(4) {
+          padding-top: 0;
+        }
+        &:nth-child(1), &:nth-child(3) {
+          padding-right: 0;
+        }
+        &:nth-child(2), &:nth-child(4) {
+          padding-left: 0;
+        }
+      }
+    }
+  }
+  @at-root #{&}__name {
+    display: block;
+    max-height: 1.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 10.25rem;
+  }
+  @at-root #{&}__conversation_content {
+    font-size: 0.9rem;
+    margin-left: 0.5rem;
+  }
+  @at-root #{&}__snippet {
+    color: $text-secondary;
+    font-weight: 300;
+    height: 2.5rem;
+    overflow-y: hidden;
+    word-break: break-all;
+  }
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index fb7a4ed..ebeb0c4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -186,7 +186,8 @@
     "text": "Modify user badges"
   },
   "home": {
-    "globalWall": "Global Wall"
+    "globalWall": "Global Wall",
+    "news": "Kaverti News"
   },
   "badges": {
     "admin": "Admin",
diff --git a/src/main.js b/src/main.js
index b6bf52b..019f8c2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,46 @@ import axios from 'axios'
 import VueAxios from 'vue-axios'
 import i18n from './i18n'
 import moment from 'moment'
+import VMdEditor from '@kangc/v-md-editor';
+import '@kangc/v-md-editor/lib/style/base-editor.css';
+import enUS from '@kangc/v-md-editor/lib/lang/en-US';
+import createHljsTheme from '@kangc/v-md-editor/lib/theme/hljs';
+import json from 'highlight.js/lib/languages/json';
+const hljsTheme = createHljsTheme();
+import io from 'socket.io-client'
+import VueSocketIO from "vue-socket.io";
+Vue.use(
+    new VueSocketIO({
+      debug: true,
+      connection: io(process.env.VUE_APP_GATEWAYENDPOINT), // options object is Optional
+    })
+);
+Vue.use(VMdEditor)
+VMdEditor.lang.use('en-US', enUS);
+hljsTheme.extend((md, hljs) => {
+  md.set({
+    html:         false,        // Enable HTML tags in source
+    xhtmlOut:     false,        // Use '/' to close single tags (<br />).
+                                // This is only for full CommonMark compatibility.
+    breaks:       true,        // Convert '\n' in paragraphs into <br>
+    langPrefix:   'language-',  // CSS language prefix for fenced blocks. Can be
+                                // useful for external highlighters.
+    linkify:      true,        // Autoconvert URL-like text to links
+    image: false,
+
+    // Enable some language-neutral replacement + quotes beautification
+    typographer:  true,
+
+    // Double + single quotes replacement pairs, when typographer enabled,
+    // and smartquotes on. Could be either a String or an Array.
+    //
+    // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
+    // and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
+    quotes: '“”‘’'
+  })
+  md.disable('image')
+  hljs.registerLanguage('json', json);
+});
 Vue.use(VueAxios, axios)
 Vue.use(Buefy)
 Vue.config.productionTip = false
diff --git a/src/router/index.js b/src/router/index.js
index 3acafe9..11d3717 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -51,6 +51,17 @@ const routes = [
       { path: 'friends', component: route('UserFriends') },
       { path: 'awards', component: route('UserAwards') }
     ] },
+  {
+    path: '/chat',
+    component: route('Chat'),
+    redirect: ('/chat/home'),
+    children: [
+      { path: '/', component: route('ChatHome') },
+      { path: '/home', component: route('ChatHome') },
+      { path: 'conversation', component: route('ChatMessage') },
+      { path: 'conversation/:id', component: route('ChatMessage'), name: 'conversation' }
+    ]
+  },
   {
     path: '/awards',
     name: 'Awards',
diff --git a/src/store/index.js b/src/store/index.js
index 8aa261d..2eb0e09 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -46,7 +46,8 @@ export default new Vuex.Store({
       modeler: false,
       developerMode: false,
       executive: false,
-      description: ''
+      description: '',
+      conversations: []
     }
   },
   mutations: {
@@ -131,6 +132,43 @@ export default new Vuex.Store({
     },
     brokenRoute(state, value) {
       state.enableBrokenRoutes = value
+    },
+    clearConversations (state) {
+      state.user.conversations = [];
+    },
+    addConversations (state, conversations) {
+      state.user.conversations.push(...conversations);
+    },
+    updateConversationLastRead (state, id) {
+      let index = state.user.conversations.findIndex(conversation => {
+        return conversation.id === id;
+      });
+
+      let conversation = state.user.conversations[index];
+      conversation.lastRead = new Date() + '';
+
+      state.user.conversations.splice(index, 1, conversation);
+    },
+    updateUnshiftConversation (state, updatedConversation) {
+      let index = state.user.conversations.findIndex(conversation => {
+        return conversation.id === updatedConversation.id;
+      });
+
+      if(index > -1) {
+        state.user.conversations.splice(index, 1);
+      }
+
+      state.user.conversations.unshift(updatedConversation);
+    },
+    updateConversationName (state, { id, name }) {
+      let index = state.user.conversations.findIndex(conversation => {
+        return conversation.id === id;
+      });
+
+      let conversation = state.user.conversations[index];
+      conversation.name = name;
+
+      state.user.conversations.splice(index, 1, conversation);
     }
   },
   actions: {
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
new file mode 100644
index 0000000..d75612e
--- /dev/null
+++ b/src/views/Chat.vue
@@ -0,0 +1,29 @@
+<template>
+  <main class="section">
+    <div class="columns">
+      <div class="column">
+        <div class="box">
+        <SidebarChat></SidebarChat>
+          </div>
+      </div>
+      <div class="column is-10">
+        <div class="box">
+          <router-view></router-view>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+<script>
+import SidebarChat from "@/components/SidebarChat";
+export default {
+  components: {
+    SidebarChat
+  },
+  name: "Chat"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/ChatHome.vue b/src/views/ChatHome.vue
new file mode 100644
index 0000000..ccc3008
--- /dev/null
+++ b/src/views/ChatHome.vue
@@ -0,0 +1,27 @@
+<template>
+  <main>
+    <div class="hero is-large is-large">
+      <div class="hero-body">
+        <div class="container has-text-centered">
+          <i class="fas fa-comment-lines large-icon"></i>
+          <h1 class="title">
+            Kaverti Messaging
+          </h1>
+          <h2 class="subtitle">
+            Chat with anyone on the Kaverti platform, all you need is their username!
+          </h2>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+name: "ChatHome"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/ChatMessage.vue b/src/views/ChatMessage.vue
new file mode 100644
index 0000000..c5bbe84
--- /dev/null
+++ b/src/views/ChatMessage.vue
@@ -0,0 +1,434 @@
+<template>
+  <div class='conversation'>
+    <b-modal
+        v-model='showDeleteModal'
+        button-text='OK, delete'
+        color='red'
+        @confirm='alert'
+    >
+      Are you sure you want to delete this conversation?
+    </b-modal>
+
+    <b-modal
+        v-model='showEditModal'
+        button-text='Change name'
+        color='blue'
+        @confirm='saveEditModalModelName'
+    >
+      Enter the new name for your chat below
+      <input
+          type='text'
+          placeholder='Chat name'
+          class='input'
+          style='margin-top: 0.5rem;'
+          v-model='editModalModel'
+      />
+    </b-modal>
+
+    <transition name='transition-fade' mode='out-in'>
+      <div
+          class='conversation__header'
+          key='new-conversation'
+          v-if='showNewConversationBar'
+      >
+        <new-conversation-input
+            class='conversation__new_conversation_input'
+            @input='selected => { newConversationUsers = selected }'
+        ></new-conversation-input>
+      </div>
+      <div class='conversation__header' key='header' v-else>
+        <div class='conversation__title'>{{name}}</div>
+        <div class='conversation__actions'>
+          <c-menu
+              :items='settingsItems'
+              @delete='showDeleteModal = true'
+              @edit='showEditModal = true'
+          >Settings</c-menu>
+        </div>
+      </div>
+    </transition>
+
+    <c-scroll-load
+        class='conversation__main'
+        position='top'
+        :loading='loading'
+        @load='getConversation'
+
+        ref='conversation'
+    >
+      <div class='conversation__main__conversations'>
+        <conversation-message
+            :v-for='message in messages'
+            :context='messages'
+            :message='message'
+            :users='users'
+        ></conversation-message>
+      </div>
+
+      <user-typing :users='users' :typing-users='typingUsers'></user-typing>
+
+      <div style='padding: 2.5rem'></div>
+    </c-scroll-load>
+
+
+    <div class='conversation__input_bar input'>
+			<textarea
+          class='input--textarea conversation__input'
+          placeholder='Type your message here'
+          @keydown.enter.prevent='() => $route.params.id ? sendMessage() : createConversation()'
+          @keydown='sendTyping'
+          v-model='input'
+      ></textarea>
+      <button
+          class='conversation__submit button button--blue'
+          @click='() => $route.params.id ? sendMessage() : createConversation()'
+      >
+        <font-awesome-icon icon='paper-plane'></font-awesome-icon>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import CMenu from '../components/ChatMenu';
+import ConversationMessage from '../components/ConversationMessage';
+import ConversationTimeBreak from '../components/ConversationTimeBreak';
+import CScrollLoad from '../components/ChatPagination';
+import NewConversationInput from '../components/ChatConversationInput';
+import UserTyping from '../components/ChatUserTyping';
+
+export default {
+  name: 'conversation',
+  components: {
+    CMenu,
+    ConversationMessage,
+    // eslint-disable-next-line vue/no-unused-components
+    ConversationTimeBreak,
+    CScrollLoad,
+    NewConversationInput,
+    UserTyping
+  },
+  data () {
+    return {
+      name: '',
+      messages: [],
+      users: [],
+      input: '',
+      page: 1,
+
+      typingUsers: [],
+      typingInterval: null,
+      typingTimer: null,
+
+      newConversationUsers: [],
+
+      settingsItems: [
+        { text: 'Delete', event: 'delete' },
+        { text: 'Edit chat name', event: 'edit' }
+      ],
+
+      showDeleteModal: false,
+
+      showEditModal: false,
+      editModalModel: '',
+
+      showNewConversationBar: !this.$route.params.id,
+
+      loading: false
+    }
+  },
+  methods: {
+    alert () {
+      console.log('Confirm')
+    },
+    saveEditModalModelName () {
+      let name = this.editModalModel.trim();
+
+      if(name.length) {
+        this.axios
+            .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `chat/conversation/${this.$route.params.id}/name`, { name })
+            .then(res => {
+              this.name = name;
+              res
+              this.$store.commit(
+                  'updateConversationName',
+                  { id: +this.$route.params.id, name }
+              );
+            })
+            .catch(e => {
+              this.$store.commit('setErrors', e.response.data.errors);
+            });
+      }
+
+      this.editModalModel = '';
+    },
+    clearData () {
+      this.name = '';
+      this.messages = [];
+      this.page = 1;
+      this.newConversationUsers = [];
+
+      this.$socket.emit('leaveConversation', {
+        conversationId: +this.$route.params.id || 0
+      });
+    },
+    hasConversationGotScrollbar () {
+      let $el = this.$refs.conversation.$el;
+
+      return $el.scrollHeight > $el.clientHeight;
+    },
+    getConversation () {
+      //If there all pages have been loaded or
+      //a new page is currently loading
+      //then do not send off another request
+      if(!this.$route.params.id || this.page === null || this.loading) return;
+
+
+      this.showNewConversationBar = false;
+      this.loading = true;
+
+      this.axios
+          .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `chat/conversation/${this.$route.params.id}?page=${this.page}`)
+          .then(res => {
+            this.loading = false;
+            this.showModal = false;
+
+            this.users = res.data.Users;
+            this.name = res.data.name;
+            this.page= res.data.continuePagination ? this.page + 1 : null;
+
+            let $conversation = this.$refs.conversation.$el;
+            let scrollBottom = $conversation.scrollHeight - $conversation.scrollTop;
+
+            let ids = this.messages.map(m => m.id);
+            let uniqueMessages = res.data.Messages.filter(message => {
+              return !ids.includes(message.id);
+            });
+            this.messages.unshift(...uniqueMessages);
+
+            //Scroll back to original position before new messages were added
+            this.$nextTick(() => {
+              $conversation.scrollTop = $conversation.scrollHeight - scrollBottom;
+            });
+
+            //Keep loading conversations until there is a scroll bar
+            //To enable the scroll load mechanism
+            if(!this.hasConversationGotScrollbar()) {
+              this.getConversation();
+            }
+          })
+          .catch(e => {
+            this.loading = false;
+            this.$store.commit('setErrors', e.response.data.errors);
+          });
+    },
+    createConversation () {
+      let userIds = this.newConversationUsers.map(user => user.id);
+      userIds.push(+this.$store.state.user.id);
+
+      //If there is no message or only one user (themselves)
+      //then do not create new conversation
+      if(!this.input.trim().length || userIds.length < 2) return;
+
+      this.axios
+          .post('/api/v1/chat/conversation', { userIds })
+          .then(res => {
+            this.name = res.data.name;
+            this.$router.push({
+              name: 'conversation',
+              params: { id: res.data.id }
+            });
+            this.sendMessage();
+          })
+          .catch(e => {
+            this.$store.commit('setErrors', e.response.data.errors);
+          });
+    },
+    updateLastRead () {
+      //this.axios.put('/api/v1/chat/conversation/' + this.$route.params.id);
+
+      //Conversation panel might not have loaded request, so try again in 200 msec
+      if(!this.$store.state.user.conversations.length) {
+        setTimeout(this.updateLastRead, 200);
+      } else {
+        this.$store.commit('updateConversationLastRead', +this.$route.params.id);
+      }
+    },
+    sendMessage () {
+      if(!this.input.trim().length) return;
+
+      this.$socket.emit('stopTyping', {
+        conversationId: +this.$route.params.id
+      });
+
+      this.axios
+          .post('/api/v1/chat/message', {
+            content: this.input.trim(),
+            conversationId: +this.$route.params.id
+          })
+          .then(res => {
+            res
+            this.input = '';
+          })
+          .catch(e => {
+            this.$store.commit('setErrors', e.response.data.errors);
+          });
+    },
+    setTypingTimer () {
+      this.typingTimer = setTimeout(() => {
+        this.typingInterval = null;
+
+        this.$socket.emit('stopTyping', {
+          conversationId: +this.$route.params.id
+        });
+      }, 2000);
+    },
+    sendTyping (e) {
+      //Ignore enter keypress or if no conversation created yet
+      if(e.keyCode === 13 || !this.$route.params.id) return;
+
+      //if interval does not exist --> send startTyping, start timer
+      if(this.typingInterval === null) {
+        this.$socket.emit('startTyping', {
+          conversationId: +this.$route.params.id
+        });
+
+        this.typingInterval = new Date();
+        this.setTypingTimer();
+        //if interval is less than 2 seconds --> clear timer
+      } else if (new Date() - this.typingInterval < 2000) {
+        clearTimeout(this.typingTimer);
+        this.setTypingTimer();
+      }
+    },
+    scrollToBottom (scrollIfNotAtBottom) {
+      let $conversation = this.$refs.conversation.$el;
+
+      //If currently scorlled to bottom or parameter set to true
+      if(
+          scrollIfNotAtBottom ||
+          $conversation.scrollHeight - $conversation.scrollTop === $conversation.clientHeight
+      ) {
+        this.$nextTick(() => {
+          $conversation.scrollTop = $conversation.scrollHeight;
+        });
+      }
+    },
+    pageLoad () {
+      this.clearData();
+
+      if(this.$route.params.id) {
+        this.$socket.emit('joinConversation', {
+          conversationId: +this.$route.params.id
+        });
+        this.getConversation();
+        this.updateLastRead();
+      } else {
+        this.showNewConversationBar = true;
+      }
+    }
+  },
+  watch: {
+    '$route.params': 'pageLoad'
+  },
+  mounted () {
+    this.pageLoad();
+
+    this.$io.on('message', message => {
+      if(message.ConversationId !== +this.$route.params.id) return;
+
+      this.messages.push(message);
+      this.scrollToBottom();
+      this.updateLastRead();
+    });
+    this.$io.on('startTyping', ({ userId }) => {
+      let user = this.users.find(u => u.id === userId);
+      this.typingUsers.push(user);
+      this.scrollToBottom();
+    });
+    this.$io.on('stopTyping', ({ userId }) => {
+      let index = this.typingUsers.findIndex(u => u.id === userId);
+      this.typingUsers.splice(index, 1);
+    });
+  }
+};
+</script>
+
+<style lang='scss' scoped>
+@import '../assets/scss/variables';
+
+.conversation {
+  display: grid;
+  grid-template-rows: 3rem auto;
+  position: relative;
+
+  @at-root #{&}__header {
+    border-bottom: thin solid $gray-1;
+    display: grid;
+    grid-column-gap: 0.5rem;
+    grid-template-columns: 1fr auto 1fr;
+    padding: 0rem 2rem;
+  }
+  @at-root #{&}__title, #{&}__new_conversation_input {
+    align-self: center;
+    font-weight: bold;
+    grid-column: 2;
+    justify-self: center;
+  }
+  @at-root #{&}__actions {
+    align-self: center;
+    font-weight: 300;
+    grid-column: 3;
+    justify-self: end;
+  }
+  @at-root #{&}__main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-between;
+    overflow-y: auto;
+    padding: 0 1rem;
+    padding-top: 1rem;
+
+    @at-root #{&}__conversations {
+      align-content: flex-end;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  @at-root #{&}__input_bar {
+    align-items: center;
+    background-color: #fff;
+    box-shadow: 0 5px 6px 0px $gray-1;
+    bottom: 0.5rem;
+    display: flex;
+    height: unset;
+    margin: 0 2rem;
+    padding: 0rem;
+    position: absolute;
+    width: calc(100% - 4rem);
+  }
+  @at-root #{&}__input {
+    border: 0;
+    font-family: $font-family;
+    height: 3.25rem;
+    padding: 0.75rem;
+    width: 100%;
+  }
+  @at-root #{&}__submit {
+    border-radius: 100%;
+    box-shadow: 0 4px 6px rgba($blue-5, 0.25);
+    font-size: 1rem;
+    height: 2rem;
+    margin: 0.5rem;
+    padding: 0.5rem;
+    width: 2rem;
+
+    svg {
+      left: -0.1rem;
+      position: relative;
+      top: -0.15rem;
+    }
+  }
+}
+</style>
diff --git a/src/views/ForumThread.vue b/src/views/ForumThread.vue
index 9bd7794..66ed4fe 100644
--- a/src/views/ForumThread.vue
+++ b/src/views/ForumThread.vue
@@ -1,8 +1,144 @@
 <template>
-  <main>
-    <div class="section">
-      <h1 class="title">{{thread.name}}</h1>
-      <div class="column is-9" v-for='(post) in thread.Posts' :key='"threadPost-" + post.id'>
+  <main class="section">
+    <b-modal v-model="postModal">
+      <div class="editor">
+        <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+          <div class="menubar">
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.bold() }"
+                @click="commands.bold"
+            >
+              <icon name="bold" />
+            </button>
+
+            <button
+            class="menubar__button"
+            :class="{ 'is-active': isActive.italic() }"
+            @click="commands.italic"
+            >
+            <icon name="italic" />
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.strike() }"
+                @click="commands.strike"
+            >
+              <icon name="strike" />
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.underline() }"
+                @click="commands.underline"
+            >
+              <icon name="underline" />
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.code() }"
+                @click="commands.code"
+            >
+              <icon name="code" />
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.paragraph() }"
+                @click="commands.paragraph"
+            >
+              <icon name="paragraph" />
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.heading({ level: 1 }) }"
+                @click="commands.heading({ level: 1 })"
+            >
+              H1
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.heading({ level: 2 }) }"
+                @click="commands.heading({ level: 2 })"
+            >
+              H2
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.heading({ level: 3 }) }"
+                @click="commands.heading({ level: 3 })"
+            >
+              H3
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.bullet_list() }"
+                @click="commands.bullet_list"
+            >
+              <icon name="ul" />
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.ordered_list() }"
+                @click="commands.ordered_list"
+            >
+              <icon name="ol" />
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.blockquote() }"
+                @click="commands.blockquote"
+            >
+              <icon name="quote" />
+            </button>
+
+            <button
+                class="menubar__button"
+                :class="{ 'is-active': isActive.code_block() }"
+                @click="commands.code_block"
+            >
+              <icon name="code" />
+            </button>
+
+            <button
+                class="menubar__button"
+                @click="commands.horizontal_rule"
+            >
+              <icon name="hr" />
+            </button>
+
+            <button
+                class="menubar__button"
+                @click="commands.undo"
+            >
+              <icon name="undo" />
+            </button>
+
+            <button
+                class="menubar__button"
+                @click="commands.redo"
+            >
+              <icon name="redo" />
+            </button>
+
+          </div>
+        </editor-menu-bar>
+
+        <editor-content class="editor__content" :editor="editor" />
+      </div>
+    </b-modal>
+    <h1 class="title">{{thread.name}}&nbsp;<b-tag v-if="thread.locked">Locked</b-tag><b-button @click="replyToThread()"><i class="fas fa-reply-all"></i></b-button></h1>
+    <div class="">
+      <div class="column" v-for='(post) in thread.Posts' :key='"threadPost-" + post.id'>
         <article class="media box">
           <figure class="media-left">
             <p class="image is-64x64">
@@ -18,6 +154,9 @@
               <div v-html="post.content"></div>
             </div>
           </div>
+          <div class="media-right">
+            <b-button @click="replyToPost(post)"><i class="fas fa-reply"></i></b-button>
+          </div>
         </article>
       </div>
     </div>
@@ -26,16 +165,72 @@
 
 <script>
 import AjaxErrorHandler from "../../assets/js/errorHandler";
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import {
+  Blockquote,
+  CodeBlock,
+  HardBreak,
+  Heading,
+  HorizontalRule,
+  OrderedList,
+  BulletList,
+  ListItem,
+  TodoItem,
+  TodoList,
+  Bold,
+  Code,
+  Italic,
+  Link,
+  Strike,
+  Underline,
+  History,
+} from 'tiptap-extensions'
+import Icon from '../components/EditorIcons'
 export default {
   name: "ForumThread",
+  components: {
+    EditorContent,
+    EditorMenuBar,
+    Icon
+  },
   data() {
     return {
       thread: [],
+      responseContent: '',
       offset: 0,
-      loading: true
+      loading: true,
+      editor: new Editor({
+        extensions: [
+          new Blockquote(),
+          new BulletList(),
+          new CodeBlock(),
+          new HardBreak(),
+          new Heading({ levels: [1, 2, 3] }),
+          new HorizontalRule(),
+          new ListItem(),
+          new OrderedList(),
+          new TodoItem(),
+          new TodoList(),
+          new Link(),
+          new Bold(),
+          new Code(),
+          new Italic(),
+          new Strike(),
+          new Underline(),
+          new History(),
+        ],
+        content: '<p>What do you have to say</p>'
+      }),
+      postModal: true
     }
   },
   methods: {
+    replyToThread() {
+
+    },
+    replyToPost(post) {
+      post
+    },
     getThread(initial) {
       this.loading = true
       if(initial) {
@@ -58,6 +253,9 @@ export default {
   },
   mounted () {
     this.getThread(true)
-  }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  },
 }
 </script>
\ No newline at end of file
diff --git a/src/views/Forums.vue b/src/views/Forums.vue
index 1344947..8df4c37 100644
--- a/src/views/Forums.vue
+++ b/src/views/Forums.vue
@@ -73,7 +73,7 @@
         </span>
               </div>
               <div class='thread_display__content'>
-                {{thread.Posts[0].content}}
+                {{thread.Posts[0].plainText}}
               </div>
             </div>
           </article>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d7bc3a2..a7931ad 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
-  <main class="section">
-    <div class="columns is-centered" v-if="$store.state.user.username">
+  <main>
+    <div class="columns is-centered section" v-if="$store.state.user.username">
       <div class="column is-4 has-text-centered">
         <h1 class="title has-text-centered">{{$store.state.user.username}}</h1>
         <div class="box">
@@ -53,7 +53,89 @@
       </div>
     </div>
     <div v-if="!$store.state.user.username">
-      This route requires authentication
+      <section class="hero is-info is-large is-fullheight-with-navbar" style="overflow: auto">
+        <div class="hero-body">
+          <div class="container has-text-centered">
+            <h1 class="title">
+              Kaverti
+            </h1>
+            <h2 class="subtitle">
+              Kaverti is a new 3D sandbox gaming platform, and avatar social website.
+              <br />
+              Kaverti is home to hundreds of users who enjoy using it
+              <br />
+              So why not sign up today!
+            </h2>
+          </div>
+        </div>
+      </section>
+      <section class="hero is-medium" style="overflow: auto">
+        <div class="hero-body">
+          <div class="container has-text-centered">
+            <h1 class="title">
+              The stats:
+            </h1>
+            <h2 class="subtitle">
+              <div class="columns is-centered">
+                <div class="column is-vcentered has-text-centered">
+                  <h1 class="title">{{$t('stats.users')}}</h1>
+                  <div class="box">
+                    <h1 class="title" v-if="!loading">
+                      {{users}}
+                    </h1>
+                    <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
+                  </div>
+                </div>
+                <div class="column is-vcentered has-text-centered">
+                  <h1 class="title">{{$t('stats.posts')}}</h1>
+                  <div class="box">
+                    <h1 class="title" v-if="!loading">
+                      {{posts}}
+                    </h1>
+                    <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
+                  </div>
+                </div>
+                <div class="column is-vcentered has-text-centered">
+                  <h1 class="title">{{$t('stats.purchased')}}</h1>
+                  <div class="box">
+                    <h1 class="title" v-if="!loading">
+                      {{inventory}}
+                    </h1>
+                    <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
+                  </div>
+                </div>
+                <div class="column is-vcentered has-text-centered">
+                  <h1 class="title">{{$t('stats.teams')}}</h1>
+                  <div class="box">
+                    <h1 class="title" v-if="!loading">
+                      {{teams}}
+                    </h1>
+                    <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
+                  </div>
+                </div>
+                <div class="column is-vcentered has-text-centered">
+                  <h1 class="title">{{$t('stats.items')}}</h1>
+                  <div class="box">
+                    <h1 class="title" v-if="!loading">
+                      {{items}}
+                    </h1>
+                    <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
+                  </div>
+                </div>
+                <div class="column is-vcentered has-text-centered">
+                  <h1 class="title">{{$t('stats.threads')}}</h1>
+                  <div class="box">
+                    <h1 class="title" v-if="!loading">
+                      {{threads}}
+                    </h1>
+                    <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
+                  </div>
+                </div>
+              </div>
+            </h2>
+          </div>
+        </div>
+      </section>
     </div>
   </main>
 </template>
@@ -75,7 +157,14 @@ export default {
       wallText: '',
       mentions: '',
       loadingWallButton: false,
-      loadingWall: true
+      loadingWall: true,
+      users: 0,
+      posts: 0,
+      inventory: 0,
+      teams: 0,
+      threads: 0,
+      items: 0,
+      loading: false
     }
   },
   methods: {
@@ -112,6 +201,18 @@ export default {
     }
   },
   mounted() {
+    this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/stats')
+        .then(res => {
+          this.users = res.data.users
+          this.posts = res.data.posts
+          this.inventory = res.data.inventory
+          this.items = res.data.items
+          this.teams = res.data.teams
+          this.threads = res.data.threads
+          this.loading = false
+        }).catch(() => {
+      this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
+    })
     this.axios
         .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `blog/posts`)
         .then(res => {
diff --git a/src/views/Stats.vue b/src/views/Stats.vue
index 3a17896..94c99ad 100644
--- a/src/views/Stats.vue
+++ b/src/views/Stats.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="section">
     <div class="column is-vcentered">
       <h1 class="title">{{$t('stats.title')}}</h1>
     </div>
diff --git a/yarn.lock b/yarn.lock
index 1e1e72a..b16b4e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -992,6 +992,11 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@braintree/sanitize-url@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz#8ff71d51053cd5ee4981e5a501d80a536244f7fd"
+  integrity sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==
+
 "@endemolshinegroup/cosmiconfig-typescript-loader@^1.0.0":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-1.0.2.tgz#c1eadbb4c269f7898195ca8f7428bf5f5d1c449a"
@@ -1051,6 +1056,25 @@
     js-yaml "^3.13.1"
     json5 "^2.1.1"
 
+"@kangc/v-md-editor@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@kangc/v-md-editor/-/v-md-editor-1.6.0.tgz#de5013695846792b0bdd4ac506144391ac4e72d9"
+  integrity sha512-o93mXZWmCfA9FXJmjxuK4Q5zcALyyXDjCYkZ/3LmZFUSMwaNlKjRvs34N17oGiR00FszePbAnW7OHKm2YgIpnQ==
+  dependencies:
+    "@vuepress/markdown" "^1.4.1"
+    codemirror "^5.52.2"
+    copy-to-clipboard "^3.3.1"
+    highlight.js "^10.5.0"
+    insert-text-at-cursor "^0.3.0"
+    katex "^0.11.1"
+    markdown-it "^10.0.0"
+    markdown-it-attrs "^3.0.2"
+    markdown-it-container "^2.0.0"
+    mermaid "^8.8.4"
+    prismjs "^1.20.0"
+    resize-observer-polyfill "^1.5.1"
+    xss "^1.0.6"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2101,6 +2125,34 @@
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1"
   integrity sha512-Xn/+vdm9CjuC9p3Ae+lTClNutrVhsXpzxvoTXXtoys6kVRX9FkueSUAqSWAyZntmVLlR4DosBV4pH8y5Z/HbUw==
 
+"@vuepress/markdown@^1.4.1":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@vuepress/markdown/-/markdown-1.8.0.tgz#2fb0a9f6011d2543a4dc7d6a2ae976b9f49873ef"
+  integrity sha512-f2yhoIHTD6gaPeLLidkxuytKGQCT6Gopm0fpyKZwfFZaWWz5+RPPGevq5UTmTb+5vvO2Li44HJc1EV7QONOw9Q==
+  dependencies:
+    "@vuepress/shared-utils" "1.8.0"
+    markdown-it "^8.4.1"
+    markdown-it-anchor "^5.0.2"
+    markdown-it-chain "^1.3.0"
+    markdown-it-emoji "^1.4.0"
+    markdown-it-table-of-contents "^0.4.0"
+    prismjs "^1.13.0"
+
+"@vuepress/shared-utils@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@vuepress/shared-utils/-/shared-utils-1.8.0.tgz#b1187c764f4c2dee018b83f3560a14067d931240"
+  integrity sha512-CVNMiYBntQyb4CuyS4KzmglDqsuBpj8V4QMzL9gCSoMv0VmwKx05fZedu+r0G5OcxYN4qjnu99yl9G6zWhOU9w==
+  dependencies:
+    chalk "^2.3.2"
+    escape-html "^1.0.3"
+    fs-extra "^7.0.1"
+    globby "^9.2.0"
+    gray-matter "^4.0.1"
+    hash-sum "^1.0.2"
+    semver "^6.0.0"
+    toml "^3.0.0"
+    upath "^1.1.0"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -3650,7 +3702,7 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camel-case@3.0.x:
+camel-case@3.0.x, camel-case@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
   integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
@@ -3751,7 +3803,7 @@ caw@^2.0.1:
     tunnel-agent "^0.6.0"
     url-to-options "^1.0.1"
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3884,7 +3936,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-clean-css@4.2.x:
+clean-css@4.2.x, clean-css@^4.1.6, clean-css@^4.2.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
   integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
@@ -4127,6 +4179,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codemirror@^5.52.2:
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922"
+  integrity sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -4197,16 +4254,16 @@ commander@1.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-1.0.0.tgz#5e6a88e7070ff5908836ead19169548c30f90bcd"
   integrity sha1-XmqI5wcP9ZCINurRkWlUjDD5C80=
 
+commander@2, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.20.3, commander@^2.8.1:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.18.0, commander@^2.20.0, commander@^2.20.3, commander@^2.8.1:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -4386,6 +4443,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
@@ -4544,6 +4608,11 @@ crypto-random-string@^3.3.0:
   dependencies:
     type-fest "^0.8.1"
 
+css-b64-images@~0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/css-b64-images/-/css-b64-images-0.2.5.tgz#42005d83204b2b4a5d93b6b1a5644133b5927a02"
+  integrity sha1-QgBdgyBLK0pdk7axpWRBM7WSegI=
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -4727,6 +4796,272 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
+
+d3-axis@1:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.12.tgz#cdf20ba210cfbb43795af33756886fb3638daac9"
+  integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==
+
+d3-brush@1:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.1.6.tgz#b0a22c7372cabec128bdddf9bddc058592f89e9b"
+  integrity sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
+
+d3-chord@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f"
+  integrity sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==
+  dependencies:
+    d3-array "1"
+    d3-path "1"
+
+d3-collection@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
+  integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==
+
+d3-color@1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
+  integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
+
+d3-contour@1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.3.2.tgz#652aacd500d2264cb3423cee10db69f6f59bead3"
+  integrity sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==
+  dependencies:
+    d3-array "^1.1.1"
+
+d3-dispatch@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58"
+  integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
+
+d3-drag@1:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.5.tgz#2537f451acd39d31406677b7dc77c82f7d988f70"
+  integrity sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==
+  dependencies:
+    d3-dispatch "1"
+    d3-selection "1"
+
+d3-dsv@1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.2.0.tgz#9d5f75c3a5f8abd611f74d3f5847b0d4338b885c"
+  integrity sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==
+  dependencies:
+    commander "2"
+    iconv-lite "0.4"
+    rw "1"
+
+d3-ease@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2"
+  integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
+
+d3-fetch@1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-1.2.0.tgz#15ce2ecfc41b092b1db50abd2c552c2316cf7fc7"
+  integrity sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==
+  dependencies:
+    d3-dsv "1"
+
+d3-force@1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.2.1.tgz#fd29a5d1ff181c9e7f0669e4bd72bdb0e914ec0b"
+  integrity sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-format@1:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
+  integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
+
+d3-geo@1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.12.1.tgz#7fc2ab7414b72e59fbcbd603e80d9adc029b035f"
+  integrity sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==
+  dependencies:
+    d3-array "1"
+
+d3-hierarchy@1:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz#2f6bee24caaea43f8dc37545fa01628559647a83"
+  integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==
+
+d3-interpolate@1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987"
+  integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
+  dependencies:
+    d3-color "1"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-polygon@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.6.tgz#0bf8cb8180a6dc107f518ddf7975e12abbfbd38e"
+  integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==
+
+d3-quadtree@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.7.tgz#ca8b84df7bb53763fe3c2f24bd435137f4e53135"
+  integrity sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==
+
+d3-random@1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.2.tgz#2833be7c124360bf9e2d3fd4f33847cfe6cab291"
+  integrity sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==
+
+d3-scale-chromatic@1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz#54e333fc78212f439b14641fb55801dd81135a98"
+  integrity sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==
+  dependencies:
+    d3-color "1"
+    d3-interpolate "1"
+
+d3-scale@2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.2.2.tgz#4e880e0b2745acaaddd3ede26a9e908a9e17b81f"
+  integrity sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-selection@1, d3-selection@^1.1.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c"
+  integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==
+
+d3-shape@1:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+d3-time-format@2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.3.0.tgz#107bdc028667788a8924ba040faf1fbccd5a7850"
+  integrity sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==
+  dependencies:
+    d3-time "1"
+
+d3-time@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
+  integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
+
+d3-timer@1:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5"
+  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
+
+d3-transition@1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.3.2.tgz#a98ef2151be8d8600543434c1ca80140ae23b398"
+  integrity sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==
+  dependencies:
+    d3-color "1"
+    d3-dispatch "1"
+    d3-ease "1"
+    d3-interpolate "1"
+    d3-selection "^1.1.0"
+    d3-timer "1"
+
+d3-voronoi@1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
+  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
+
+d3-zoom@1:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.8.3.tgz#b6a3dbe738c7763121cd05b8a7795ffe17f4fc0a"
+  integrity sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
+
+d3@^5.14, d3@^5.7.0:
+  version "5.16.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-5.16.0.tgz#9c5e8d3b56403c79d4ed42fbd62f6113f199c877"
+  integrity sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==
+  dependencies:
+    d3-array "1"
+    d3-axis "1"
+    d3-brush "1"
+    d3-chord "1"
+    d3-collection "1"
+    d3-color "1"
+    d3-contour "1"
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-dsv "1"
+    d3-ease "1"
+    d3-fetch "1"
+    d3-force "1"
+    d3-format "1"
+    d3-geo "1"
+    d3-hierarchy "1"
+    d3-interpolate "1"
+    d3-path "1"
+    d3-polygon "1"
+    d3-quadtree "1"
+    d3-random "1"
+    d3-scale "2"
+    d3-scale-chromatic "1"
+    d3-selection "1"
+    d3-shape "1"
+    d3-time "1"
+    d3-time-format "2"
+    d3-timer "1"
+    d3-transition "1"
+    d3-voronoi "1"
+    d3-zoom "1"
+
+dagre-d3@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/dagre-d3/-/dagre-d3-0.6.4.tgz#0728d5ce7f177ca2337df141ceb60fbe6eeb7b29"
+  integrity sha512-e/6jXeCP7/ptlAM48clmX4xTZc5Ek6T6kagS7Oz2HrYSdqcLZFLqpAfh7ldbZRFfxCZVyh61NEPR08UQRVxJzQ==
+  dependencies:
+    d3 "^5.14"
+    dagre "^0.8.5"
+    graphlib "^2.1.8"
+    lodash "^4.17.15"
+
+dagre@^0.8.4, dagre@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.5.tgz#ba30b0055dac12b6c1fcc247817442777d06afee"
+  integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
+  dependencies:
+    graphlib "^2.1.8"
+    lodash "^4.17.15"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -5324,7 +5659,7 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-entities@^1.1.1:
+entities@^1.1.1, entities@~1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
@@ -5334,6 +5669,18 @@ entities@^2.0.0, entities@^2.0.3:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
+entities@~2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
+  integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
+
+entity-decode@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/entity-decode/-/entity-decode-2.0.2.tgz#e4f807e52c3294246e9347d1f2b02b07fd5f92e7"
+  integrity sha512-5CCY/3ci4MC1m2jlumNjWd7VBFt4VfFnmSqSNmVcXq4gxM3Vmarxtt+SvmBnzwLS669MWdVuXboNVj1qN2esVg==
+  dependencies:
+    he "^1.1.1"
+
 env-ci@3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/env-ci/-/env-ci-3.2.2.tgz#06936f1fcfbc999102a2211fc2539df64062b61f"
@@ -5422,7 +5769,7 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
@@ -5886,6 +6233,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
@@ -6155,6 +6509,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  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"
@@ -6651,6 +7010,13 @@ graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+graphlib@^2.1.7, graphlib@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.8.tgz#5761d414737870084c92ec7b5dbcb0592c9d35da"
+  integrity sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==
+  dependencies:
+    lodash "^4.17.15"
+
 graphql-anywhere@^4.1.0-alpha.0:
   version "4.2.7"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-4.2.7.tgz#c06fb40b1d62b39470c80e3731478dbbef060067"
@@ -6719,6 +7085,16 @@ graphql@^14.5.8, graphql@^14.6.0:
   dependencies:
     iterall "^1.2.2"
 
+gray-matter@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.2.tgz#9aa379e3acaf421193fce7d2a28cebd4518ac454"
+  integrity sha512-7hB/+LxrOjq/dd8APlK0r24uL/67w7SkYnfwhNFwg/VDIGWGmduTDYf3WNstLW2fbbmRwrDGCVSJ2isuf2+4Hw==
+  dependencies:
+    js-yaml "^3.11.0"
+    kind-of "^6.0.2"
+    section-matter "^1.0.0"
+    strip-bom-string "^1.0.0"
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -6871,7 +7247,7 @@ hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@1.2.x, he@^1.1.0:
+he@1.2.x, he@^1.1.0, he@^1.1.1, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -6889,7 +7265,7 @@ 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@^10.0.0:
+highlight.js@^10.0.0, highlight.js@^10.5.0, highlight.js@~10.5.0:
   version "10.5.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f"
   integrity sha512-xTmvd9HiIHR6L53TMC7TKolEj65zG1XU+Onr8oi86mYa+nLcIbxTTWkpW7CsEwv/vK7u1zb8alZIMLDqqN6KTw==
@@ -6963,6 +7339,19 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
+html-minifier@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"
+  integrity sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==
+  dependencies:
+    camel-case "^3.0.0"
+    clean-css "^4.2.1"
+    commander "^2.19.0"
+    he "^1.2.0"
+    param-case "^2.1.1"
+    relateurl "^0.2.7"
+    uglify-js "^3.5.1"
+
 html-tags@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
@@ -7111,7 +7500,7 @@ hyperlinker@^1.0.0:
   resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e"
   integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -7304,6 +7693,11 @@ inquirer@^7.0.0, inquirer@^7.0.3, inquirer@^7.1.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+insert-text-at-cursor@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/insert-text-at-cursor/-/insert-text-at-cursor-0.3.0.tgz#1819607680ec1570618347c4cd475e791faa25da"
+  integrity sha512-/nPtyeX9xPUvxZf+r0518B7uqNKlP+LqNJqSiXFEaa2T71rWIwTVXGH7hB9xO/EVdwa5/pWlFCPwShOW81XIxQ==
+
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
@@ -7823,7 +8217,7 @@ js-tokens@^4.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.13.1, js-yaml@^3.5.2:
+js-yaml@^3.11.0, js-yaml@^3.13.1, js-yaml@^3.5.2:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
@@ -7956,6 +8350,13 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+katex@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.11.1.tgz#df30ca40c565c9df01a466a00d53e079e84ffaa2"
+  integrity sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==
+  dependencies:
+    commander "^2.19.0"
+
 keyv@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373"
@@ -7963,6 +8364,11 @@ keyv@3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
+khroma@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.2.0.tgz#46dcc9d7533923c228b51724db108f11fec108d8"
+  integrity sha512-DlKk5y243dujy8fOH02aRnnewLfiHJV0s8aXaVrCohgBf3s7fEAn6gc6LLQ21agODlFZS8ufrn+juu70uCA9Tw==
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -8032,6 +8438,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkify-it@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@@ -8333,6 +8746,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.17.0:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.18.0.tgz#cfff11cfb125ca66f1c12cb43d27fff68cbeafa9"
+  integrity sha512-Zlc3GqclU71HRw5fTOy00zz5EOlqAdKMYhOFIO8ay4SQEDQgFuhR8JNwDIzAGMLoqTsWxe0elUNmq5o2USRAzw==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.5.0"
+
 lru-cache@^4.0.1, lru-cache@^4.1.2:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -8406,6 +8827,60 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it-anchor@^5.0.2:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-5.3.0.tgz#d549acd64856a8ecd1bea58365ef385effbac744"
+  integrity sha512-/V1MnLL/rgJ3jkMWo84UR+K+jF1cxNG1a+KwqeXqTIJ+jtA8aWSHuigx8lTzauiIjBDbwF3NcWQMotd0Dm39jA==
+
+markdown-it-attrs@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-3.0.3.tgz#92acdb16fe551cb056c5eb9848413443cafb5231"
+  integrity sha512-cLnICU2t61skNCr4Wih/sdza+UbQcqJGZwvqAypnbWA284nzDm+Gpc90iaRk/JjsIy4emag5v3s0rXFhFBWhCA==
+
+markdown-it-chain@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-chain/-/markdown-it-chain-1.3.0.tgz#ccf6fe86c10266bafb4e547380dfd7f277cc17bc"
+  integrity sha512-XClV8I1TKy8L2qsT9iX3qiV+50ZtcInGXI80CA+DP62sMs7hXlyV/RM3hfwy5O3Ad0sJm9xIwQELgANfESo8mQ==
+  dependencies:
+    webpack-chain "^4.9.0"
+
+markdown-it-container@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-2.0.0.tgz#0019b43fd02eefece2f1960a2895fba81a404695"
+  integrity sha1-ABm0P9Au7+zi8ZYKKJX7qBpARpU=
+
+markdown-it-emoji@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz#9bee0e9a990a963ba96df6980c4fddb05dfb4dcc"
+  integrity sha1-m+4OmpkKljupbfaYDE/dsF37Tcw=
+
+markdown-it-table-of-contents@^0.4.0:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.4.tgz#3dc7ce8b8fc17e5981c77cc398d1782319f37fbc"
+  integrity sha512-TAIHTHPwa9+ltKvKPWulm/beozQU41Ab+FIefRaQV1NRnpzwcV9QOe6wXQS5WLivm5Q/nlo0rl6laGkMDZE7Gw==
+
+markdown-it@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
+  integrity sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==
+  dependencies:
+    argparse "^1.0.7"
+    entities "~2.0.0"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
+markdown-it@^8.4.1:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
+  integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
+  dependencies:
+    argparse "^1.0.7"
+    entities "~1.1.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 matcher@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"
@@ -8432,6 +8907,11 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -8496,6 +8976,23 @@ merge@^1.2.0:
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
   integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
 
+mermaid@^8.8.4:
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.9.0.tgz#e569517863ab903aa5389cd746b68ca958a8ca7c"
+  integrity sha512-J582tyE1vkdNu4BGgfwXnFo4Mu6jpuc4uK96mIenavaak9kr4T5gaMmYCo/7edwq/vTBkx/soZ5LcJo5WXZ1BQ==
+  dependencies:
+    "@braintree/sanitize-url" "^3.1.0"
+    d3 "^5.7.0"
+    dagre "^0.8.4"
+    dagre-d3 "^0.6.4"
+    entity-decode "^2.0.2"
+    graphlib "^2.1.7"
+    he "^1.2.0"
+    khroma "^1.1.0"
+    minify "^4.1.1"
+    moment-mini "^2.22.1"
+    stylis "^3.5.2"
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -8583,6 +9080,19 @@ mini-css-extract-plugin@^0.9.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+minify@^4.1.1:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/minify/-/minify-4.1.3.tgz#58467922d14303f55a3a28fa79641371955b8fbd"
+  integrity sha512-ykuscavxivSmVpcCzsXmsVTukWYLUUtPhHj0w2ILvHDGqC+hsuTCihBn9+PJBd58JNvWTNg9132J9nrrI2anzA==
+  dependencies:
+    clean-css "^4.1.6"
+    css-b64-images "~0.2.5"
+    debug "^4.1.0"
+    html-minifier "^4.0.0"
+    terser "^4.0.0"
+    try-catch "^2.0.0"
+    try-to-catch "^1.0.2"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -8669,6 +9179,11 @@ mkdirp@1.0.4:
   dependencies:
     minimist "^1.2.5"
 
+moment-mini@^2.22.1:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
+  integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
+
 moment@2.29.1, moment@^2.22.1:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
@@ -9254,6 +9769,11 @@ ora@^3.4.0:
     strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
+orderedmap@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.1.1.tgz#c618e77611b3b21d0fe3edc92586265e0059c789"
+  integrity sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ==
+
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -9387,7 +9907,7 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@2.1.x:
+param-case@2.1.x, param-case@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
   integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
@@ -10111,7 +10631,7 @@ pretty-error@^2.0.2:
     lodash "^4.17.20"
     renderkid "^2.0.4"
 
-prismjs@^1.20.0:
+prismjs@^1.13.0, prismjs@^1.20.0:
   version "1.23.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
   integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
@@ -10150,6 +10670,116 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+prosemirror-collab@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.2.2.tgz#8d2c0e82779cfef5d051154bd0836428bd6d9c4a"
+  integrity sha512-tBnHKMLgy5Qmx9MYVcLfs3pAyjtcqYYDd9kp3y+LSiQzkhMQDfZSV3NXWe4Gsly32adSef173BvObwfoSQL5MA==
+  dependencies:
+    prosemirror-state "^1.0.0"
+
+prosemirror-commands@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.1.5.tgz#3f07a5b13e424ad8728168b6b45e1b17e47c2b81"
+  integrity sha512-4CKAnDxLTtUHpjRZZVEF/LLMUYh7NbS3Ze3mP5UEAgar4WRWQYg3Js01wnp/GMqaZueNHhsp9UVvOrAK+7DWbQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-dropcursor@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.2.tgz#28738c4ed7102e814d7a8a26d70018523fc7cd6d"
+  integrity sha512-4c94OUGyobGnwcQI70OXyMhE/9T4aTgjU+CHxkd5c7D+jH/J0mKM/lk+jneFVKt7+E4/M0D9HzRPifu8U28Thw==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+    prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz#0c37fd6cbb1d7c46358c2e7397f8da9a8b5c6246"
+  integrity sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-history@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.1.3.tgz#4f76a1e71db4ef7cdf0e13dec6d8da2aeaecd489"
+  integrity sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==
+  dependencies:
+    prosemirror-state "^1.2.2"
+    prosemirror-transform "^1.0.0"
+    rope-sequence "^1.3.0"
+
+prosemirror-inputrules@^1.1.2, prosemirror-inputrules@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz#93f9199ca02473259c30d7e352e4c14022d54638"
+  integrity sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz#8b481bf8389a5ac40d38dbd67ec3da2c7eac6a6d"
+  integrity sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^2.2.0"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.13.1, prosemirror-model@^1.8.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.13.1.tgz#fa3dc888cf6928bd3968620588ffe6458d201f9f"
+  integrity sha512-PNH+b5bilAJi1B5yJ8QzoNY3ZV+nlD0jKG3XCBk7PmE/YUTJomBkFBS005vfU+3M9yeVR8/6spAEDsfVFUhNeQ==
+  dependencies:
+    orderedmap "^1.1.0"
+
+prosemirror-schema-list@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.1.4.tgz#471f9caf2d2bed93641d2e490434c0d2d4330df1"
+  integrity sha512-pNTuZflacFOBlxrTcWSdWhjoB8BaucwfJVp/gJNxztOwaN3wQiC65axclXyplf6TKgXD/EkWfS/QAov3/Znadw==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, prosemirror-state@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.3.4.tgz#4c6b52628216e753fc901c6d2bfd84ce109e8952"
+  integrity sha512-Xkkrpd1y/TQ6HKzN3agsQIGRcLckUMA9u3j207L04mt8ToRgpGeyhbVv0HI7omDORIBHjR29b7AwlATFFf2GLA==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-tables@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz#ad66300cc49500455cf1243bb129c9e7d883321e"
+  integrity sha512-LmCz4jrlqQZRsYRDzCRYf/pQ5CUcSOyqZlAj5kv67ZWBH1SVLP2U9WJEvQfimWgeRlIz0y0PQVqO1arRm1+woA==
+  dependencies:
+    prosemirror-keymap "^1.1.2"
+    prosemirror-model "^1.8.1"
+    prosemirror-state "^1.3.1"
+    prosemirror-transform "^1.2.1"
+    prosemirror-view "^1.13.3"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.2.8:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.2.9.tgz#dfa048102c12a457deaf4c60ae633ac3eaacc7c9"
+  integrity sha512-oiocfgn7J7Fulvl7luBsyxdAf0CJp96+0FIcqhHSvYVr/R4KqZNxXcU9xESaI9Xw+tTvDUiiS3gedVk3AOic4w==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.16.5:
+  version "1.17.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.17.3.tgz#66a51da731e840a83ddcc9531f2e5f2b519ce5ff"
+  integrity sha512-jZiuoLe/5wY4ztFZrLbnpCf2EfCpW0gCBwLNoF07ACSNTWvjcnR8WaHTiSxBK75TbSPvtqr3B8dW4K1bdYUSLg==
+  dependencies:
+    prosemirror-model "^1.1.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -10550,7 +11180,7 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
-relateurl@0.2.x:
+relateurl@0.2.x, relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
@@ -10629,6 +11259,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -10748,6 +11383,11 @@ roarr@^2.15.3:
     semver-compare "^1.0.0"
     sprintf-js "^1.1.2"
 
+rope-sequence@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.2.tgz#a19e02d72991ca71feb6b5f8a91154e48e3c098b"
+  integrity sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg==
+
 rss-parser@^3.8.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/rss-parser/-/rss-parser-3.10.0.tgz#19a8bcc569981832180a87fe58a17f1838ca3a45"
@@ -10773,6 +11413,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
+
 rxjs@^6.3.3, rxjs@^6.4.0, rxjs@^6.6.0:
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
@@ -10859,6 +11504,14 @@ sec@^1.0.0:
   resolved "https://registry.yarnpkg.com/sec/-/sec-1.0.0.tgz#033d60a3ad20ecf2e00940d14f97823465774335"
   integrity sha1-Az1go60g7PLgCUDRT5eCNGV3QzU=
 
+section-matter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+  integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
+  dependencies:
+    extend-shallow "^2.0.1"
+    kind-of "^6.0.0"
+
 seek-bzip@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/seek-bzip/-/seek-bzip-1.0.6.tgz#35c4171f55a680916b52a07859ecf3b5857f21c4"
@@ -11609,6 +12262,11 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+  integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -11676,6 +12334,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@^3.5.2:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 subscriptions-transport-ws@^0.9.11, subscriptions-transport-ws@^0.9.16:
   version "0.9.18"
   resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz#bcf02320c911fbadb054f7f928e51c6041a37b97"
@@ -11861,7 +12524,7 @@ terser-webpack-plugin@^2.3.6:
     terser "^4.6.12"
     webpack-sources "^1.4.3"
 
-terser@^4.1.2, terser@^4.6.12:
+terser@^4.0.0, terser@^4.1.2, terser@^4.6.12:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
   integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
@@ -11938,6 +12601,61 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiptap-commands@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/tiptap-commands/-/tiptap-commands-1.17.0.tgz#2174b05eb36d8a0875a57c27180801dc0a78e94b"
+  integrity sha512-DlQHeJ2ASdh0lJdi1aChFTf2UCGTcn2sZUWuWfIF1B5qsRYK7ZqDmcIXG4Riwgxo/fM994iklUv54+BYKENumg==
+  dependencies:
+    prosemirror-commands "^1.1.4"
+    prosemirror-inputrules "^1.1.2"
+    prosemirror-model "^1.13.1"
+    prosemirror-schema-list "^1.1.4"
+    prosemirror-state "^1.3.3"
+    prosemirror-tables "^1.1.1"
+    tiptap-utils "^1.13.0"
+
+tiptap-extensions@^1.35.0:
+  version "1.35.0"
+  resolved "https://registry.yarnpkg.com/tiptap-extensions/-/tiptap-extensions-1.35.0.tgz#4f4e3569bd9182df8ae5b5d6779b5b6cbf2f48c1"
+  integrity sha512-9YtvIr3YMlpMPUppKwxVQbGsVPI5PHP0NioZRyc0OufTEVOUUmlQQpniNFVH5i0w2SD0bv+OuYQQf515xraKFA==
+  dependencies:
+    lowlight "^1.17.0"
+    prosemirror-collab "^1.2.2"
+    prosemirror-history "^1.1.3"
+    prosemirror-model "^1.13.1"
+    prosemirror-state "^1.3.3"
+    prosemirror-tables "^1.1.1"
+    prosemirror-transform "^1.2.8"
+    prosemirror-view "^1.16.5"
+    tiptap "^1.32.0"
+    tiptap-commands "^1.17.0"
+    tiptap-utils "^1.13.0"
+
+tiptap-utils@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tiptap-utils/-/tiptap-utils-1.13.0.tgz#d34a81353e364ab9fec1e20c81023cd147a93a23"
+  integrity sha512-nXwqd0bh0BRXYkv2sskZCJJoGNpe7XbTiGRnBXqi35xdQZOuf51qMWx4u7yvcxkzO2hwBW+NhXS2bzEuPufahQ==
+  dependencies:
+    prosemirror-model "^1.13.1"
+    prosemirror-state "^1.3.3"
+    prosemirror-tables "^1.1.1"
+
+tiptap@^1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/tiptap/-/tiptap-1.32.0.tgz#bb3c9df38b2a855a7c10e7a9d90e8ba58148b7fb"
+  integrity sha512-+BIi33oppudIEBi6Q/rgaWSgp1CcfY9J0tQxaTSYo3KL6Y1XsGScIKpBimwjy4Q0Sj4lR3y2UEJ1Peh7iBjdcg==
+  dependencies:
+    prosemirror-commands "^1.1.4"
+    prosemirror-dropcursor "^1.3.2"
+    prosemirror-gapcursor "^1.1.5"
+    prosemirror-inputrules "^1.1.3"
+    prosemirror-keymap "^1.1.4"
+    prosemirror-model "^1.13.1"
+    prosemirror-state "^1.3.3"
+    prosemirror-view "^1.16.5"
+    tiptap-commands "^1.17.0"
+    tiptap-utils "^1.13.0"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -12002,11 +12720,21 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toml@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"
+  integrity sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==
+
 toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
@@ -12051,6 +12779,16 @@ trim-repeated@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
+try-catch@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/try-catch/-/try-catch-2.0.1.tgz#a35d354187c422f291a0bcfd9eb77e3a4f90c1e5"
+  integrity sha512-LsOrmObN/2WdM+y2xG+t16vhYrQsnV8wftXIcIOWZhQcBJvKGYuamJGwnU98A7Jxs2oZNkJztXlphEOoA0DWqg==
+
+try-to-catch@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/try-to-catch/-/try-to-catch-1.1.1.tgz#770162dd13b9a0e55da04db5b7f888956072038a"
+  integrity sha512-ikUlS+/BcImLhNYyIgZcEmq4byc31QpC+46/6Jm5ECWkVFhf8SM2Fp/0pMVXPX6vk45SMCwrP4Taxucne8I0VA==
+
 tryer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
@@ -12168,6 +12906,11 @@ typescript@~3.9.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
@@ -12176,6 +12919,11 @@ uglify-js@3.4.x:
     commander "~2.19.0"
     source-map "~0.6.1"
 
+uglify-js@^3.5.1:
+  version "3.12.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.12.5.tgz#83241496087c640efe9dfc934832e71725aba008"
+  integrity sha512-SgpgScL4T7Hj/w/GexjnBHi3Ien9WS1Rpfg5y91WXMj9SY997ZCQU76mH4TpLwwfmMvoOU8wiaRkIf6NaH3mtg==
+
 unbzip2-stream@^1.0.9:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
@@ -12293,7 +13041,7 @@ unzip-response@^2.0.1:
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
   integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
 
-upath@^1.1.1:
+upath@^1.1.0, upath@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
@@ -12733,6 +13481,11 @@ vuex@^3.4.0:
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.0.tgz#95efa56a58f7607c135b053350833a09e01aa813"
   integrity sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ==
 
+w3c-keyname@^2.2.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
+  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+
 watch@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/watch/-/watch-1.0.2.tgz#340a717bde765726fa0aa07d721e0147a551df0c"
@@ -12792,6 +13545,14 @@ webpack-bundle-analyzer@^3.8.0:
     opener "^1.5.1"
     ws "^6.0.0"
 
+webpack-chain@^4.9.0:
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-4.12.1.tgz#6c8439bbb2ab550952d60e1ea9319141906c02a6"
+  integrity sha512-BCfKo2YkDe2ByqkEWe1Rw+zko4LsyS75LVr29C6xIrxAg9JHJ4pl8kaIZ396SUSNp6b4815dRZPSTAS8LlURRQ==
+  dependencies:
+    deepmerge "^1.5.2"
+    javascript-stringify "^1.6.0"
+
 webpack-chain@^6.4.0:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.5.1.tgz#4f27284cbbb637e3c8fbdef43eef588d4d861206"