Bugs in settings fixed, profile added

frontend/src/components/QuillEditor.vue

@@ -0,0 +1,76 @@
+<template>
+    <div ref="quillEditor" class="quill-editor"></div>
+</template>
+
+<script>
+import Quill from 'quill/core';
+import Toolbar from 'quill/modules/toolbar';
+import Snow from 'quill/themes/snow';
+import Bold from 'quill/formats/bold';
+import Italic from 'quill/formats/italic';
+import Underline from 'quill/formats/underline';
+import List from 'quill/formats/list';
+
+Quill.register({
+    'modules/toolbar': Toolbar,
+    'themes/snow': Snow,
+    'formats/bold': Bold,
+    'formats/italic': Italic,
+    'formats/underline': Underline,
+    'formats/list': List
+});
+
+export default {
+    name: 'QuillEditor',
+    props: {
+        content: {
+            type: String,
+            default: ''
+        },
+        placeholder: {
+            type: String,
+            default: 'Compose an epic...'
+        }
+    },
+    data() {
+        return {
+            editor: null,
+        };
+    },
+    mounted() {
+        this.editor = new Quill(this.$refs.quillEditor, {
+            theme: 'snow',
+            placeholder: this.placeholder,
+            modules: {
+                toolbar: [
+                    [{ 'header': [1, 2, false] }],
+                    ['bold', 'italic', 'underline'],
+                    ['link', 'image'],
+                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                    [{ 'align': [] }],
+                    [{ 'color': [] }, { 'background': [] }],
+                    ['clean']
+                ]
+            }
+        });
+
+        this.editor.on('text-change', () => {
+            this.$emit('update:content', this.editor.root.innerHTML);
+        });
+
+        this.editor.root.innerHTML = this.content;
+    },
+    beforeUnmount() {
+        if (this.editor) {
+            this.editor.off('text-change');
+            this.editor = null;
+        }
+    }
+};
+</script>
+
+<style scoped>
+.quill-editor {
+    min-height: 200px;
+}
+</style>