Clean up code, sanitize some inputs

client/src/components/content-blocks/Solution.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div
     class="solution"
     data-cy="solution"
@@ -17,13 +18,15 @@
         data-cy="solution-text"
 
         v-if="visible"
-        v-html="value.text"
+        v-html="sanitizedText"
       />
     </transition>
   </div>
 </template>
 
 <script>
+  import {sanitize} from '@/helpers/text';
+
   export default {
     props: ['value'],
 
@@ -33,6 +36,12 @@
       };
     },
 
+    computed: {
+      sanitizedText() {
+        return sanitize(this.value.text);
+      }
+    },
+
     methods: {
       toggle() {
         this.visible = !this.visible;
@@ -42,8 +51,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_functions.scss";
 
   .solution {
     display: grid;

client/src/components/content-blocks/SubtitleBlock.vue

@@ -1,20 +1,27 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <h5
     class="subtitle"
-    v-html="value.text"
+    v-html="sanitizedText"
   />
 </template>
 
 <script>
-  //todo: esacpe value.text
+  import {sanitize} from '@/helpers/text';
+
   export default {
-    props: ['value']
+    props: ['value'],
+
+    computed: {
+      sanitizedText() {
+        return sanitize(this.value.text);
+      }
+    }
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .subtitle {
     padding-top: 1px;

client/src/components/content-blocks/TextBlock.vue

@@ -1,14 +1,22 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div
     class="text-block"
-    v-html="value.text"
+    v-html="sanitizedText"
   />
 </template>
 
 <script>
-  // todo: escape text maybe
+  import {sanitize} from '@/helpers/text';
+
   export default {
-    props: ['value']
+    props: ['value'],
+
+    computed: {
+      sanitizedText() {
+        return sanitize(this.value.text);
+      }
+    }
   };
 </script>
 

client/src/components/content-blocks/assignment/Assignment.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div
     :data-scrollto="value.id"
     class="assignment"
@@ -62,6 +63,7 @@
   import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
   import debounce from 'lodash/debounce';
   import cloneDeep from 'lodash/cloneDeep';
+  import {sanitize} from '@/helpers/text';
 
   const SubmissionForm = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SubmissionForm');
   const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
@@ -112,9 +114,9 @@
         return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
       },
       feedbackText() {
-        // todo: should we maybe clean up this feedback text?
         let feedback = this.assignment.submission.submissionFeedback;
-        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${feedback.text}`;
+        let sanitizedFeedbackText = sanitize(feedback.text);
+        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
       },
     },
 

client/src/helpers/new-note-mutation.js

@@ -1,9 +1,7 @@
 import ADD_NOTE_MUTATION from '@/graphql/gql/mutations/addNote.gql';
 import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
 import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
-import MODULE_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
 import INSTRUMENT_FRAGMENT from '@/graphql/gql/fragments/instrumentParts.gql';
-import gql from 'graphql-tag';
 import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
 import {replaceAtIndex} from '@/graphql/immutable-operations';
 

client/src/helpers/text.js

@@ -1,4 +1,4 @@
-const sanitize = html => {
+export const sanitize = html => {
   let doc = new DOMParser().parseFromString(html, 'text/html');
   return doc.body.textContent || '';
 };

client/src/pages/createContentBlock.vue

@@ -92,7 +92,7 @@
   import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
   import {setUserBlockType} from '@/helpers/content-block';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {insertAtIndex, removeAtIndex, replaceAtIndex} from '@/graphql/immutable-operations';
+  import {removeAtIndex, replaceAtIndex} from '@/graphql/immutable-operations';
 
   export default Vue.extend({
     props: {