feat: help guide videos

frontend/src/utils/quiz.js

@@ -1,7 +1,9 @@
 import QuizBlock from '@/components/QuizBlock.vue'
-import { createApp } from 'vue'
+import QuizPlugin from '@/components/QuizPlugin.vue'
+import { createApp, h } from 'vue'
 import { usersStore } from '../stores/user'
 import translationPlugin from '../translation'
+import { CircleHelp } from 'lucide-vue-next'
 
 export class Quiz {
 	constructor({ data, api, readOnly }) {
@@ -9,17 +11,31 @@ export class Quiz {
 		this.readOnly = readOnly
 	}
 
+	static get toolbox() {
+		const app = createApp({
+			render: () =>
+				h(CircleHelp, { size: 18, strokeWidth: 1.5, color: 'black' }),
+		})
+
+		const div = document.createElement('div')
+		app.mount(div)
+
+		return {
+			title: __('Quiz'),
+			icon: div.innerHTML,
+		}
+	}
+
 	static get isReadOnlySupported() {
 		return true
 	}
 
 	render() {
 		this.wrapper = document.createElement('div')
-		if (this.data) {
-			let renderedQuiz = this.renderQuiz(this.data.quiz)
-			if (!this.readOnly) {
-				this.wrapper.innerHTML = renderedQuiz
-			}
+		if (Object.keys(this.data).length) {
+			this.renderQuiz(this.data.quiz)
+		} else {
+			this.renderQuizModal()
 		}
 		return this.wrapper
 	}
@@ -27,7 +43,7 @@ export class Quiz {
 	renderQuiz(quiz) {
 		if (this.readOnly) {
 			const app = createApp(QuizBlock, {
-				quiz: quiz, // Pass quiz content as prop
+				quiz: quiz,
 			})
 			app.use(translationPlugin)
 			const { userResource } = usersStore()
@@ -35,11 +51,23 @@ export class Quiz {
 			app.mount(this.wrapper)
 			return
 		}
-		return `<div class='border rounded-md p-10 text-center mb-2'>
+		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center mb-2'>
             <span class="font-medium">
                 Quiz: ${quiz}
             </span>
         </div>`
+		return
+	}
+
+	renderQuizModal() {
+		const app = createApp(QuizPlugin, {
+			onQuizAddition: (quiz) => {
+				this.data.quiz = quiz
+				this.renderQuiz(quiz)
+			},
+		})
+		app.use(translationPlugin)
+		app.mount(this.wrapper)
 	}
 
 	save(blockContent) {

frontend/src/utils/upload.js

@@ -1,7 +1,7 @@
 import AudioBlock from '@/components/AudioBlock.vue'
 import VideoBlock from '@/components/VideoBlock.vue'
 import UploadPlugin from '@/components/UploadPlugin.vue'
-import { h, createApp, inject } from 'vue'
+import { h, createApp } from 'vue'
 import { Upload as UploadIcon } from 'lucide-vue-next'
 import translationPlugin from '../translation'
 
@@ -70,7 +70,6 @@ export class Upload {
 
 	renderFileUploader() {
 		const app = createApp(UploadPlugin, {
-			wrapper: this.wrapper,
 			onFileUploaded: (file) => {
 				this.data.file_url = file.file_url
 				this.data.file_type = file.file_type