From 9e84908d10193d3cf612398a781518acef02d48a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 26 Apr 2024 13:33:11 +0200
Subject: [PATCH 1/7] Update mutation to also handle solutions

---
 server/books/schema/inputs.py          |  1 +
 server/books/schema/mutations/utils.py | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/server/books/schema/inputs.py b/server/books/schema/inputs.py
index 663852ac..0afd5f86 100644
--- a/server/books/schema/inputs.py
+++ b/server/books/schema/inputs.py
@@ -13,6 +13,7 @@ class InputTypes(graphene.Enum):
     document_block = "document_block"
     content_list_item = "content_list_item"
     subtitle = "subtitle"
+    solution = "solution"
     readonly = "readonly"
 
 
diff --git a/server/books/schema/mutations/utils.py b/server/books/schema/mutations/utils.py
index 6a9058e2..ed02486c 100644
--- a/server/books/schema/mutations/utils.py
+++ b/server/books/schema/mutations/utils.py
@@ -6,8 +6,11 @@ import bleach
 from api.utils import get_object
 from assignments.models import Assignment
 from books.models import ContentBlock
+from core.logger import get_logger
 from wagtail.blocks import StreamValue
 
+logger = get_logger(__name__)
+
 
 class AssignmentParameterException(Exception):
     pass
@@ -46,6 +49,7 @@ ALLOWED_BLOCKS = (
     "document_block",
     "content_list_item",
     "subtitle",
+    "solution",
     "readonly",
 )
 
@@ -75,6 +79,7 @@ def handle_content_block(
     # todo: add all the content blocks
     # todo: sanitize user inputs!
     if content["type"] not in allowed_blocks:
+        logger.info("not in allowed blocks")
         return
 
     id = content.get("id")
@@ -136,6 +141,12 @@ def handle_content_block(
         content_type = "document_block"
         value = {"url": bleach.clean(content["value"]["url"])}
         return get_content_dict(content_type=content_type, id=id, value=value)
+    elif content["type"] == "solution":
+        content_type = "solution"
+        value = {
+            "text": handle_text(bleach.clean(content["value"]["text"], strip=True)),
+        }
+        return get_content_dict(content_type=content_type, id=id, value=value)
     elif content["type"] == "subtitle":
         content_type = "subtitle"
         value = {"text": bleach.clean(content["value"]["text"])}

From db628eec24cabf7ec2e07fbb449999eeaa3bb4d6 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 26 Apr 2024 13:38:23 +0200
Subject: [PATCH 2/7] Add new solution form to element chooser workflow

---
 .../content-block-form/ContentElement.vue     |  79 ++++------
 .../content-forms/ChooserElement.vue          |  27 ++--
 .../ContentBlockElementChooserWidget.vue      |  19 ++-
 .../content-forms/DocumentInput.vue           | 139 ++++++++++++++++++
 .../components/content-forms/SolutionForm.vue |  37 +++++
 .../src/components/ui/form-element-icons.js   |  30 ++--
 6 files changed, 235 insertions(+), 96 deletions(-)
 create mode 100644 client/src/components/content-forms/DocumentInput.vue
 create mode 100644 client/src/components/content-forms/SolutionForm.vue

diff --git a/client/src/components/content-block-form/ContentElement.vue b/client/src/components/content-block-form/ContentElement.vue
index f1ed33eb..50f7abfa 100644
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@@ -1,3 +1,4 @@
+<!-- Element used to display Blocks in a ContentForm -->
 <template>
   <div class="content-element">
     <!-- Element Chooser if element has chooser type or no type -->
@@ -38,65 +39,35 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineAsyncComponent } from 'vue';
 import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
 import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
-import { defineAsyncComponent } from 'vue';
 
 const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
-const ContentBlockElementChooserWidget = defineAsyncComponent(() =>
-  import('@/components/content-forms/ContentBlockElementChooserWidget.vue')
+const ContentBlockElementChooserWidget = defineAsyncComponent(
+  () => import('@/components/content-forms/ContentBlockElementChooserWidget.vue')
 );
-const LinkForm = defineAsyncComponent(() =>
-  import('@/components/content-forms/LinkForm.vue')
-);
-const VideoForm = defineAsyncComponent(() =>
-  import('@/components/content-forms/VideoForm.vue')
-);
-const ImageForm = defineAsyncComponent(() =>
-  import('@/components/content-forms/ImageForm.vue')
-);
-const DocumentForm = defineAsyncComponent(() =>
-  import('@/components/content-forms/DocumentForm.vue')
-);
-const AssignmentForm = defineAsyncComponent(() =>
-  import('@/components/content-forms/AssignmentForm.vue')
-);
-const TextForm = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/TipTap.vue')
-);
-const SubtitleForm = defineAsyncComponent(() =>
-  import('@/components/content-forms/SubtitleForm.vue')
+const LinkForm = defineAsyncComponent(() => import('@/components/content-forms/LinkForm.vue'));
+const VideoForm = defineAsyncComponent(() => import('@/components/content-forms/VideoForm.vue'));
+const ImageForm = defineAsyncComponent(() => import('@/components/content-forms/ImageForm.vue'));
+const DocumentForm = defineAsyncComponent(() => import('@/components/content-forms/DocumentForm.vue'));
+const AssignmentForm = defineAsyncComponent(() => import('@/components/content-forms/AssignmentForm.vue'));
+const TextForm = defineAsyncComponent(
+  () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/TipTap.vue')
 );
+const SubtitleForm = defineAsyncComponent(() => import('@/components/content-forms/SubtitleForm.vue'));
+const SolutionForm = defineAsyncComponent(() => import('@/components/content-forms/SolutionForm.vue'));
 // readonly blocks
-const Assignment = defineAsyncComponent(() =>
-  import('@/components/content-blocks/assignment/Assignment.vue')
-);
-const SurveyBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/SurveyBlock.vue')
-);
-const Solution = defineAsyncComponent(() =>
-  import('@/components/content-blocks/Solution.vue')
-);
-const ImageBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/ImageBlock.vue')
-);
-const Instruction = defineAsyncComponent(() =>
-  import('@/components/content-blocks/Instruction.vue')
-);
-const ModuleRoomSlug = defineAsyncComponent(() =>
-  import('@/components/content-blocks/ModuleRoomSlug.vue')
-);
-const CmsDocumentBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/CmsDocumentBlock.vue')
-);
-const ThinglinkBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/ThinglinkBlock.vue')
-);
-const InfogramBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/InfogramBlock.vue')
-);
-
+const Assignment = defineAsyncComponent(() => import('@/components/content-blocks/assignment/Assignment.vue'));
+const SurveyBlock = defineAsyncComponent(() => import('@/components/content-blocks/SurveyBlock.vue'));
+const Solution = defineAsyncComponent(() => import('@/components/content-blocks/Solution.vue'));
+const ImageBlock = defineAsyncComponent(() => import('@/components/content-blocks/ImageBlock.vue'));
+const Instruction = defineAsyncComponent(() => import('@/components/content-blocks/Instruction.vue'));
+const ModuleRoomSlug = defineAsyncComponent(() => import('@/components/content-blocks/ModuleRoomSlug.vue'));
+const CmsDocumentBlock = defineAsyncComponent(() => import('@/components/content-blocks/CmsDocumentBlock.vue'));
+const ThinglinkBlock = defineAsyncComponent(() => import('@/components/content-blocks/ThinglinkBlock.vue'));
+const InfogramBlock = defineAsyncComponent(() => import('@/components/content-blocks/InfogramBlock.vue'));
 const CHOOSER = 'content-block-element-chooser-widget';
 
 export default {
@@ -141,8 +112,8 @@ export default {
     InfogramBlock,
     ThinglinkBlock,
     Assignment,
+    SolutionForm,
   },
-
   computed: {
     actions() {
       return {
@@ -220,7 +191,7 @@ export default {
           };
         case 'solution':
           return {
-            component: 'solution',
+            component: 'solution-form',
             title: 'Lösung',
           };
         case 'image_block':
diff --git a/client/src/components/content-forms/ChooserElement.vue b/client/src/components/content-forms/ChooserElement.vue
index c552b557..bb530220 100644
--- a/client/src/components/content-forms/ChooserElement.vue
+++ b/client/src/components/content-forms/ChooserElement.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
- 
+
 interface Props {
   type: string;
   icon: string;
@@ -29,15 +29,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['select']);
 
-const defaultTitle = (type:string) => {
-  return type.replace(/^\w/, (c :string) => c.toUpperCase());
-}
+const defaultTitle = (type: string) => {
+  return type.replace(/^\w/, (c: string) => c.toUpperCase());
+};
 
-const defaultIcon = (type:string) => {
+const defaultIcon = (type: string) => {
   return `${type}-icon`;
-}
+};
 
-const subclass =`chooser-element--${props.type}`; 
+const subclass = `chooser-element--${props.type}`;
 const cy = `choose-${props.type}-widget`;
 
 const realTitle = computed(() => {
@@ -55,7 +55,7 @@ export default {
   components: {
     ...formElementIcons,
   },
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -65,19 +65,20 @@ export default {
   cursor: pointer;
   border: 1px solid $color-silver;
   border-radius: 4px;
-  height: 105px;
-  width: 105px;
+  height: 120px;
+  flex-direction: column;
+  flex: 0 0 calc(25% - $medium-spacing * 3 / 4);
   box-sizing: border-box;
-  display: grid;
-  grid-template-rows: 1fr 45px;
+  display: flex;
   justify-content: center;
   justify-items: center;
   align-items: center;
+  align-content: center;
+  gap: $small-spacing;
 
   &__icon {
     width: 40px;
     height: 40px;
-    align-self: end;
   }
 }
 </style>
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index 08940fa9..74673ff0 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import Checkbox from '@/components/ui/Checkbox.vue';
 
 import formElementIcons from '@/components/ui/form-element-icons';
@@ -112,6 +112,12 @@ export default {
           title: 'Dokument',
           show: hasDefaultFeatures,
         },
+        {
+          type: 'solution',
+          block: 'solution',
+          title: 'Lösung',
+          icon: 'tick-circle-icon',
+        },
       ],
     };
   },
@@ -143,14 +149,11 @@ export default {
 @import 'styles/helpers';
 
 .content-block-element-chooser-widget {
-  display: -ms-grid;
+  display: flex;
+  flex-wrap: wrap;
 
-  @supports (display: grid) {
-    display: grid;
-  }
-  grid-template-columns: repeat(7, 1fr);
-  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  grid-column-gap: 0;
+  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  gap: $medium-spacing;
   font-family: $sans-serif-font-family;
   text-align: center;
   position: relative;
diff --git a/client/src/components/content-forms/DocumentInput.vue b/client/src/components/content-forms/DocumentInput.vue
new file mode 100644
index 00000000..cb687919
--- /dev/null
+++ b/client/src/components/content-forms/DocumentInput.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="document-input"
+    ref="documentform"
+  >
+    <div
+      v-if="!url"
+      ref="uploadcarePanel"
+    />
+    <div
+      class="document-input__spinner"
+      v-if="loading"
+    >
+      <loading-icon class="document-input__loading-icon" />
+    </div>
+    <div
+      class="document-input__uploaded"
+      v-if="url"
+    >
+      <document-icon class="document-input__icon" />
+      <a
+        :href="previewUrl"
+        class="document-input__link"
+        target="_blank"
+        >{{ previewLink }}</a
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LoadingIcon from '@/components/icons/LoadingIcon.vue';
+import { uploadcare } from '@/helpers/uploadcare';
+import { computed, onMounted, ref } from 'vue';
+import { defineAsyncComponent } from 'vue';
+const DocumentIcon = defineAsyncComponent(() => import('@/components/icons/DocumentIcon.vue'));
+const loading = ref(false);
+const documentform = ref(null);
+const uploadcarePanel = ref(null);
+
+export interface Props {
+  url: string;
+}
+const props = defineProps<Props>();
+
+const previewUrl = computed(() => {
+  return props.url ? props.url : '';
+});
+const previewLink = computed(() => {
+  const url = props.url;
+  if (url > '') {
+    const parts = url.split('/');
+    return parts[parts.length - 1];
+  }
+  return '';
+});
+
+const emit = defineEmits(['update']);
+
+onMounted(() => {
+  uploadcare(
+    {
+      $refs: {
+        'uploadcare-panel': uploadcarePanel.value,
+        documentform: documentform.value,
+      },
+    },
+    (url: string) => {
+      emit('update', url);
+      loading.value = false;
+    },
+    () => {
+      loading.value = true;
+    }
+  );
+});
+</script>
+
+<style scoped lang="postcss">
+/* todo: do this with a mixin, but in postcss (we have one in scss) */
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.document-input {
+  &__uploaded {
+    display: flex;
+    align-items: center;
+  }
+  &__link {
+    text-decoration: underline;
+  }
+  &__spinner {
+    width: 100%;
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__loading-icon {
+    /* todo: make this work with postcss
+    // @include spin;
+    */
+    animation: spin 2.5s linear infinite;
+    fill: var(--color-silver-dark);
+  }
+
+  &__icon {
+    width: 30px;
+    height: 30px;
+    margin-right: var(--small-spacing);
+  }
+
+  &__file-input {
+    width: 0.1px;
+    height: 0.1px;
+    overflow: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+
+    & + label {
+      cursor: pointer;
+      background-color: var(--color-silver-light);
+      height: 150px;
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      font-family: var(--sans-serif-font-family);
+      font-weight: var(--regular-font-weight);
+      text-decoration: underline;
+    }
+  }
+}
+</style>
diff --git a/client/src/components/content-forms/SolutionForm.vue b/client/src/components/content-forms/SolutionForm.vue
new file mode 100644
index 00000000..93432158
--- /dev/null
+++ b/client/src/components/content-forms/SolutionForm.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="solution-form">
+    <textarea
+      placeholder="Lösung erfassen"
+      class="skillbox-textarea"
+      :value="text"
+      @input="$emit('change-text', $event.target.value, index)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  value: any;
+  index: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+  value: null,
+  index: -1,
+});
+defineEmits(['change-text']);
+
+const text = computed(() => {
+  // todo: refactor this and use the helper, just copied it from TextForm.vue
+  return props.value.text ? props.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/gi, '') : '';
+});
+</script>
+
+<style lang="postcss" scoped>
+.solution-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--small-spacing);
+}
+</style>
diff --git a/client/src/components/ui/form-element-icons.js b/client/src/components/ui/form-element-icons.js
index 04946250..e945525a 100644
--- a/client/src/components/ui/form-element-icons.js
+++ b/client/src/components/ui/form-element-icons.js
@@ -3,29 +3,16 @@ const LinkIcon = defineAsyncComponent(() => import('@/components/icons/LinkIcon.
 const VideoIcon = defineAsyncComponent(() => import('@/components/icons/VideoIcon.vue'));
 const ImageIcon = defineAsyncComponent(() => import('@/components/icons/ImageIcon.vue'));
 const TextIcon = defineAsyncComponent(() => import('@/components/icons/TextIcon.vue'));
-const SpeechBubbleIcon = defineAsyncComponent(() =>
-  import('@/components/icons/SpeechBubbleIcon.vue')
-);
-const DocumentIcon = defineAsyncComponent(() =>
-  import('@/components/icons/DocumentIcon.vue')
-);
+const SpeechBubbleIcon = defineAsyncComponent(() => import('@/components/icons/SpeechBubbleIcon.vue'));
+const DocumentIcon = defineAsyncComponent(() => import('@/components/icons/DocumentIcon.vue'));
 const TitleIcon = defineAsyncComponent(() => import('@/components/icons/TitleIcon.vue'));
-const DocumentWithLinesIcon = defineAsyncComponent(() =>
-  import('@/components/icons/DocumentWithLinesIcon.vue')
-);
-const ArrowThinBottom = defineAsyncComponent(() =>
-  import('@/components/icons/ArrowThinBottom.vue')
-);
-const ArrowThinDown = defineAsyncComponent(() =>
-  import('@/components/icons/ArrowThinDown.vue')
-);
-const ArrowThinTop = defineAsyncComponent(() =>
-  import('@/components/icons/ArrowThinTop.vue')
-);
-const ArrowThinUp = defineAsyncComponent(() =>
-  import('@/components/icons/ArrowThinUp.vue')
-);
+const DocumentWithLinesIcon = defineAsyncComponent(() => import('@/components/icons/DocumentWithLinesIcon.vue'));
+const ArrowThinBottom = defineAsyncComponent(() => import('@/components/icons/ArrowThinBottom.vue'));
+const ArrowThinDown = defineAsyncComponent(() => import('@/components/icons/ArrowThinDown.vue'));
+const ArrowThinTop = defineAsyncComponent(() => import('@/components/icons/ArrowThinTop.vue'));
+const ArrowThinUp = defineAsyncComponent(() => import('@/components/icons/ArrowThinUp.vue'));
 const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
+const TickCircleIcon = defineAsyncComponent(() => import('@/components/icons/TickCircleIcon.vue'));
 
 /*
   for icons with a single word, leave the *-icon name, to prevent conflicts
@@ -45,4 +32,5 @@ export default {
   ArrowThinTop,
   ArrowThinUp,
   TrashIcon,
+  TickCircleIcon,
 };

From e1c53b99da810f3ddb8079ca0990978df9569094 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 26 Apr 2024 13:39:27 +0200
Subject: [PATCH 3/7] Refactor some code

---
 .../components/content-forms/DocumentForm.vue | 83 +++----------------
 .../src/components/content-forms/LinkForm.vue |  2 +-
 2 files changed, 14 insertions(+), 71 deletions(-)

diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index 36048a94..b4048309 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -3,82 +3,25 @@
     class="document-form"
     ref="documentform"
   >
-    <div
-      v-if="!value.url"
-      ref="uploadcare-panel"
+    <document-input
+      :url="value.url"
+      @update="updateUrl"
     />
-    <div
-      class="document-form__spinner"
-      v-if="loading"
-    >
-      <loading-icon class="document-form__loading-icon" />
-    </div>
-    <div
-      class="document-form__uploaded"
-      v-if="value.url"
-    >
-      <document-icon class="document-form__icon" />
-      <a
-        :href="previewUrl"
-        class="document-form__link"
-        target="_blank"
-        >{{ previewLink }}</a
-      >
-    </div>
   </div>
 </template>
 
-<script>
-import { uploadcare } from '@/helpers/uploadcare';
-import LoadingIcon from '@/components/icons/LoadingIcon.vue';
-import { defineAsyncComponent } from 'vue';
+<script setup lang="ts">
+import DocumentInput from '@/components/content-forms/DocumentInput.vue';
+export interface Props {
+  value: any;
+  index: number;
+}
 
-const DocumentIcon = defineAsyncComponent(() =>
-  import('@/components/icons/DocumentIcon.vue')
-);
+const props = defineProps<Props>();
+const emit = defineEmits(['change-url']);
 
-export default {
-  props: ['value', 'index'],
-
-  components: {
-    LoadingIcon,
-    DocumentIcon,
-  },
-
-  data() {
-    return {
-      loading: false,
-    };
-  },
-
-  computed: {
-    previewUrl() {
-      if (this.value && this.value.url) {
-        return this.value.url;
-      }
-      return null;
-    },
-    previewLink() {
-      if (this.value && this.value.url) {
-        const parts = this.value.url.split('/');
-        return parts[parts.length - 1];
-      }
-      return '';
-    },
-  },
-
-  mounted() {
-    uploadcare(
-      this,
-      (url) => {
-        this.$emit('change-url', url, this.index);
-        this.loading = false;
-      },
-      () => {
-        this.loading = true;
-      }
-    );
-  },
+const updateUrl = (url: string) => {
+  emit('change-url', url, props.index);
 };
 </script>
 
diff --git a/client/src/components/content-forms/LinkForm.vue b/client/src/components/content-forms/LinkForm.vue
index 5b6f1773..26065cb9 100644
--- a/client/src/components/content-forms/LinkForm.vue
+++ b/client/src/components/content-forms/LinkForm.vue
@@ -28,7 +28,7 @@ export default {
 .link-form {
   display: grid;
   grid-auto-rows: auto;
-  grid-row-gap: 11px;
+  grid-row-gap: $small-spacing;
 
   &__text,
   &__url {

From 4594060aa45938452c336a9ce945c0d62438984b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 26 Apr 2024 13:48:05 +0200
Subject: [PATCH 4/7] Add unit test

---
 .../books/tests/test_create_custom_content_block.py  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/server/books/tests/test_create_custom_content_block.py b/server/books/tests/test_create_custom_content_block.py
index 9c71c0de..605ade89 100644
--- a/server/books/tests/test_create_custom_content_block.py
+++ b/server/books/tests/test_create_custom_content_block.py
@@ -273,6 +273,18 @@ class TestCreateCustomContentBlock:
         assert subtitle_block.get("id") is not None
         assert subtitle_block.get("value").get("text") == value.get("text")
 
+    def test_add_solution(self, teacher, get_client):
+        content_type = "solution"
+        value = {"text": "some solution"}
+        client = get_client(teacher)
+        input = create_block_input(content_type=content_type, value=value)
+        new_content_block = self._add_content_block(client=client, input=input)
+        subtitle_block = new_content_block.contents.raw_data[0]
+        assert subtitle_block.get("id") is not None
+        assert subtitle_block.get("value").get("text") == "<p>{}</p>".format(
+            value.get("text")
+        )
+
     # def test_add_readonly(self):
     #     content_type = "readonly"
     #     value = {"text": "some subtitle"}

From 823b69cf19d5f4320fd60e50a57aaeea88800bab Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 29 Apr 2024 17:18:54 +0200
Subject: [PATCH 5/7] Update error message

---
 server/books/schema/mutations/utils.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/server/books/schema/mutations/utils.py b/server/books/schema/mutations/utils.py
index ed02486c..322a96fe 100644
--- a/server/books/schema/mutations/utils.py
+++ b/server/books/schema/mutations/utils.py
@@ -79,7 +79,7 @@ def handle_content_block(
     # todo: add all the content blocks
     # todo: sanitize user inputs!
     if content["type"] not in allowed_blocks:
-        logger.info("not in allowed blocks")
+        logger.error(f"{content['type']} not in allowed blocks")
         return
 
     id = content.get("id")
@@ -96,6 +96,7 @@ def handle_content_block(
             id=id,
             value=value,
         )
+
     elif content["type"] == "assignment":
         if module is None:
             raise AssignmentParameterException(

From 29456126f39c3e75aa02391e593be7cff0ff7f2f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 29 Apr 2024 17:24:38 +0200
Subject: [PATCH 6/7] Add documentation

---
 .../components/content-forms/DocumentForm.vue | 56 -------------------
 .../content-forms/DocumentInput.vue           |  2 +
 2 files changed, 2 insertions(+), 56 deletions(-)

diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index b4048309..be771851 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -24,59 +24,3 @@ const updateUrl = (url: string) => {
   emit('change-url', url, props.index);
 };
 </script>
-
-<style scoped lang="scss">
-@import 'styles/helpers';
-
-.document-form {
-  &__uploaded {
-    display: flex;
-    align-items: center;
-  }
-
-  &__link {
-    text-decoration: underline;
-  }
-
-  &__spinner {
-    width: 100%;
-    height: 150px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__loading-icon {
-    @include spin;
-    fill: $color-silver-dark;
-  }
-
-  &__icon {
-    width: 30px;
-    height: 30px;
-    margin-right: $small-spacing;
-  }
-
-  &__file-input {
-    width: 0.1px;
-    height: 0.1px;
-    overflow: hidden;
-    opacity: 0;
-    position: absolute;
-    z-index: -1;
-
-    & + label {
-      cursor: pointer;
-      background-color: $color-silver-light;
-      height: 150px;
-      display: flex;
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-regular;
-      text-decoration: underline;
-    }
-  }
-}
-</style>
diff --git a/client/src/components/content-forms/DocumentInput.vue b/client/src/components/content-forms/DocumentInput.vue
index cb687919..733ca561 100644
--- a/client/src/components/content-forms/DocumentInput.vue
+++ b/client/src/components/content-forms/DocumentInput.vue
@@ -115,6 +115,8 @@ onMounted(() => {
   }
 
   &__file-input {
+    /* this element should not be visible for the user, but the width can't be 0, otherwise it does not exist in the
+* DOM. With this hack, the element still works */
     width: 0.1px;
     height: 0.1px;
     overflow: hidden;

From 0a6a7246ca579c2e5b0e886d06783f0ea4bce36b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 29 Apr 2024 17:26:01 +0200
Subject: [PATCH 7/7] Clean up code

---
 client/src/helpers/text.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/helpers/text.js b/client/src/helpers/text.js
index 65d515e9..79156a65 100644
--- a/client/src/helpers/text.js
+++ b/client/src/helpers/text.js
@@ -16,7 +16,6 @@ const isSafe = (attr) => {
 
 const removeAttributes = (node) => {
   let attributes = [...node.attributes];
-  console.log(attributes);
   for (const attr of attributes) {
     if (isSafe(attr)) {
       continue;