Add spell check component

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

@@ -23,7 +23,7 @@
       >
       </submission-form>
 
-      <div v-html="corrections"></div>
+      <spell-check :corrections="corrections" :text="submission.text"></spell-check>
 
       <div v-if="this.assignment.submission.submissionFeedback" class="assignment__feedback">
         <p>{{feedbackText}}</p>
@@ -54,6 +54,7 @@
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import Solution from '@/components/content-blocks/Solution';
   import SimpleFileUpload from '@/components/SimpleFileUpload';
+  import SpellCheck from '@/components/content-blocks/assignment/SpellCheck';
 
   export default {
     props: ['value'],
@@ -65,7 +66,8 @@
       FinalSubmission,
       Solution,
       SimpleFileUpload,
-      SubmissionForm
+      SubmissionForm,
+      SpellCheck
     },
 
     computed: {
@@ -190,22 +192,12 @@
           mutation: SPELL_CHECK_MUTATION,
           variables: {
             input: {
-              assignment: 'Hallo',
+              assignment: this.assignment.id,
               text: this.assignment.submission.text
             }
           },
-          update(store, {data: {spellCheck: {correct, results}}}) {
-            console.log(results);
-            console.log(correct);
-            let corrections = results.map(result => {
-              let first, middle, last;
-              first = result.sentence.substring(0, result.offset);
-              middle = result.sentence.substring(result.offset, result.offset + result.length);
-              last = result.sentence.substring(result.offset + result.length);
-
-              return `<p>${first}<span class="taskbase__correction">${middle}</span>${last}</p>`;
-            });
-            self.corrections = corrections.join('');
+          update(store, {data: {spellCheck: {results}}}) {
+            self.corrections = results;
           }
         });
       }

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="spellcheck" v-if="corrections">
+    <p v-html="highlightedText"></p>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['corrections', 'text'],
+
+    computed: {
+      highlightedText() {
+        if (!this.corrections) {
+          return ''
+        }
+        let parts = [];
+        let index = 0;
+        this.corrections.forEach(current => {
+          parts.push({
+            correct: true,
+            text: this.text.substring(index, current.offset)
+          });
+          parts.push({
+            correct: false,
+            text: this.text.substring(current.offset, current.offset + current.length)
+          });
+          index = current.offset + current.length
+        });
+        parts.push({
+          correct: true,
+          text: this.text.substring(index, this.text.length + 1)
+        });
+        return parts
+          .filter(part => part.text.length)
+          .reduce((previous, part) => {
+            if(part.correct) {
+              return `${previous}${part.text}`;
+            } else {
+              return `${previous}<span class="spellcheck__correction">${part.text}</span>`;
+            }
+          }, '');
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .spellcheck {
+  &__correction {
+    background: yellow;
+  }
+}
+
+</style>

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

@@ -16,7 +16,7 @@
               @click="$emit('turnIn')"
       >{{action}}
       </button>
-      <button class="submission-form-container__submit button button--primary button--white-bg"
+      <button class="submission-form-container__submit submission-form-container__spellcheck button button--primary button--white-bg"
               v-if="spellcheck"
               @click="$emit('spellcheck')"
       >Rechtschreibung prüfen