WYSIWYG-Editor und Upload-Feld

frontend/package.json

@@ -20,6 +20,7 @@
         "core-js": "^3.45.1",
         "pinia": "^3.0.3",
         "pinia-plugin-persistedstate": "^4.5.0",
+        "tinymce": "^8.2.1",
         "uuid": "^13.0.0",
         "vue": "^3.5.22",
         "vue-router": "^4.5.1"

frontend/src/components/ErrorModal.vue

@@ -5,14 +5,7 @@
 -->
 
 <template>
-    <BModal
-        body-bg-variant="danger-subtle"
-        body-class="pb-0"
-        header-variant="danger"
-        no-footer
-        v-model="show"
-        @hide="clearError"
-    >
+    <BModal body-bg-variant="danger-subtle" header-variant="danger" no-footer v-model="show" @hide="clearError">
         <template #title>{{ error?.name }}</template>
         <ErrorDisplay v-if="error" :error="error" />
     </BModal>

frontend/src/components/common/ActionButton.vue

@@ -0,0 +1,37 @@
+<!--
+  This file is part of the QuestionPy SDK. (https://questionpy.org)
+  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
+  (c) Technische Universität Berlin, innoCampus <[email protected]>
+-->
+
+<template>
+    <BPopover :body="label" teleport-to="body">
+        <template #target>
+            <BButton
+                :aria-label="label"
+                class="d-flex gap-2 align-items-center p-1"
+                v-bind="{ ...buttonProps, ...$attrs }"
+            >
+                <component :is="iconComponent" />
+            </BButton>
+        </template>
+    </BPopover>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { BButtonProps } from 'bootstrap-vue-next'
+import type { Component } from 'vue'
+
+const props = defineProps<
+    BButtonProps & {
+        iconComponent?: Component
+        label: string
+    }
+>()
+
+const buttonProps = computed(() => {
+    const { iconComponent, label, ...rest } = props
+    return rest
+})
+</script>

frontend/src/components/common/TinyMCE/TinyMCE.vue

@@ -0,0 +1,73 @@
+<!--
+  This file is part of the QuestionPy SDK. (https://questionpy.org)
+  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
+  (c) Technische Universität Berlin, innoCampus <[email protected]>
+-->
+
+<template>
+    <div :id="id" ref="targetElement"></div>
+</template>
+
+<script lang="ts" setup>
+// Loosely based on
+// - https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/
+// - https://github.com/tinymce/tinymce-vue
+
+import { ref, watch } from 'vue'
+import type { RawEditorOptions } from 'tinymce/tinymce'
+
+import type { RichTextEditor } from '@/types'
+
+import useTinyMCEInstance from './useTinyMCEInstance'
+
+const {
+    disabled = false,
+    id,
+    initOptions: tineMCEOptions = {},
+    modelValue,
+} = defineProps<{
+    disabled?: boolean
+    id: string
+    initOptions?: RawEditorOptions
+    modelValue?: RichTextEditor
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: RichTextEditor): void
+}>()
+
+const targetElement = ref<HTMLDivElement | undefined>()
+
+// Pass editor updates to model
+function onUpdate(state: RichTextEditor) {
+    emit('update:modelValue', state)
+}
+
+const editorInstance = useTinyMCEInstance({
+    targetElement,
+    onUpdate,
+    initialState: modelValue ?? { text: '', files: [] },
+    tinyMCEOptions: { ...tineMCEOptions, disabled },
+})
+
+// Pass model value updates to editor
+watch(
+    () => modelValue,
+    (newValue) => {
+        if (editorInstance && newValue?.text !== editorInstance.getContent()) {
+            editorInstance.setContent(newValue?.text ?? '')
+        }
+    },
+)
+
+watch(
+    () => disabled,
+    (newValue) => {
+        if (editorInstance) {
+            editorInstance.options.set('disabled', newValue)
+        }
+    },
+)
+</script>
+
+<style lang="scss" src="./TinyMCEUI.scss" />