fix: youtube embed issue

frontend/src/utils/index.js

@@ -158,7 +158,10 @@ export function getEditorTools() {
 		quiz: Quiz,
 		assignment: Assignment,
 		upload: Upload,
-		markdown: Markdown,
+		markdown: {
+			class: Markdown,
+			inlineToolbar: true,
+		},
 		image: SimpleImage,
 		table: {
 			class: Table,

frontend/src/utils/markdownParser.js

@@ -1,3 +1,6 @@
+import { CodeXml } from 'lucide-vue-next'
+import { createApp, h } from 'vue'
+
 export class Markdown {
 	constructor({ data, api, readOnly, config }) {
 		this.api = api
@@ -18,13 +21,26 @@ export class Markdown {
 		}
 	}
 
+	static get toolbox() {
+		const app = createApp({
+			render: () =>
+				h(CodeXml, { size: 18, strokeWidth: 1.5, color: 'black' }),
+		})
+
+		const div = document.createElement('div')
+		app.mount(div)
+		return {
+			title: '',
+			icon: div.innerHTML,
+		}
+	}
+
 	onPaste(event) {
 		const data = {
 			text: event.detail.data.innerHTML,
 		}
 
 		this.data = data
-
 		window.requestAnimationFrame(() => {
 			if (!this.wrapper) {
 				return
@@ -41,15 +57,14 @@ export class Markdown {
 
 	render() {
 		this.wrapper = document.createElement('div')
-		this.wrapper.classList.add('cdx-block')
-		this.wrapper.classList.add('ce-paragraph')
+		this.wrapper.classList.add('cdx-block', 'ce-paragraph')
 		this.wrapper.innerHTML = this.text
 
 		if (!this.readOnly) {
 			this.wrapper.contentEditable = true
 			this.wrapper.innerHTML = this.text
 
-			this.wrapper.addEventListener('keydown', (event) => {
+			this.wrapper.addEventListener('input', (event) => {
 				let value = event.target.textContent
 				if (event.keyCode === 32 && value.startsWith('#')) {
 					this.convertToHeader(event, value)
@@ -165,7 +180,7 @@ export class Markdown {
 	}
 
 	canBeEmbed(line) {
-		return /^https?:\/\/.+/.test(line)
+		return /^https?:\/\/.+/.test(line.trim())
 	}
 }