Implement RichTextBlock

client/src/pages/learningPath/learningContentPage/LearningContentParent.vue

@@ -8,11 +8,12 @@ import type { Component } from "vue";
 import { computed, onUnmounted } from "vue";
 import AssignmentBlock from "./blocks/AssignmentBlock.vue";
 import AttendanceDayBlock from "./blocks/AttendanceDayBlock.vue";
+import DescriptionBlock from "./blocks/DescriptionBlock.vue";
 import FeedbackBlock from "./blocks/FeedbackBlock.vue";
 import IframeBlock from "./blocks/IframeBlock.vue";
 import MediaLibraryBlock from "./blocks/MediaLibraryBlock.vue";
 import PlaceholderBlock from "./blocks/PlaceholderBlock.vue";
-import DescriptionBlock from "./blocks/RichTextBlock.vue";
+import RichTextBlock from "./blocks/RichTextBlock.vue";
 import VideoBlock from "./blocks/VideoBlock.vue";
 
 log.debug("LearningContent.vue setup");
@@ -31,7 +32,7 @@ const COMPONENTS: Record<LearningContentType, Component> = {
   "learnpath.LearningContentLearningModule": IframeBlock,
   "learnpath.LearningContentMediaLibrary": MediaLibraryBlock,
   "learnpath.LearningContentPlaceholder": PlaceholderBlock,
-  "learnpath.LearningContentRichText": DescriptionBlock,
+  "learnpath.LearningContentRichText": RichTextBlock,
   "learnpath.LearningContentTest": IframeBlock,
   "learnpath.LearningContentVideo": VideoBlock,
 };

client/src/pages/learningPath/learningContentPage/blocks/DescriptionBlock.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="container-medium">
+    <div class="lg:mt-8">
+      <p class="text-large my-4">{{ props.content.description }}}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LearningContentInterface } from "@/types";
+
+const props = defineProps<{
+  content: LearningContentInterface;
+}>();
+</script>

client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue

@@ -1,15 +1,14 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div class="container-medium">
-    <div class="lg:mt-8">
-      <p class="text-large my-4">{{ props.content.description }}}</p>
-    </div>
+    <div v-html="props.content.text"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { LearningContentInterface } from "@/types";
+import type { LearningContentRichText } from "@/types";
 
 const props = defineProps<{
-  content: LearningContentInterface;
+  content: LearningContentRichText;
 }>();
 </script>

client/src/types.ts

@@ -72,6 +72,7 @@ export interface LearningContentPlaceholder extends LearningContentInterface {
 
 export interface LearningContentRichText extends LearningContentInterface {
   readonly content_type: "learnpath.LearningContentRichText";
+  text: string;
 }
 
 export interface LearningContentTest extends LearningContentInterface {

server/vbv_lernwelt/learnpath/models.py

@@ -306,8 +306,13 @@ class LearningContentTest(LearningContent):
 
 
 class LearningContentRichText(LearningContent):
+    text = RichTextField(blank=True)
+
     parent_page_types = ["learnpath.Circle"]
     subpage_types = []
+    content_panels = LearningContent.content_panels + [
+        FieldPanel("text", classname="Text"),
+    ]
 
 
 class LearningContentAssignment(LearningContent):