fix: lesson editor fixes

frontend/src/utils/index.js

@@ -135,6 +135,17 @@ export function getEditorTools() {
 				placeholder: 'Header',
 			},
 		},
+		list: {
+			class: NestedList,
+			inlineToolbar: true,
+			config: {
+				defaultStyle: 'ordered',
+			},
+		},
+		table: {
+			class: Table,
+			inlineToolbar: true,
+		},
 		quiz: Quiz,
 		assignment: Assignment,
 		upload: Upload,
@@ -143,10 +154,6 @@ export function getEditorTools() {
 			inlineToolbar: true,
 		},
 		image: SimpleImage,
-		table: {
-			class: Table,
-			inlineToolbar: true,
-		},
 		paragraph: {
 			class: Paragraph,
 			inlineToolbar: true,
@@ -160,13 +167,6 @@ export function getEditorTools() {
 				useDefaultTheme: 'dark',
 			},
 		},
-		list: {
-			class: NestedList,
-			inlineToolbar: true,
-			config: {
-				defaultStyle: 'ordered',
-			},
-		},
 		inlineCode: {
 			class: InlineCode,
 			shortcut: 'CMD+SHIFT+M',

frontend/src/utils/markdownParser.js

@@ -8,6 +8,7 @@ export class Markdown {
 		this.config = config || {}
 		this.text = data.text || ''
 		this.readOnly = readOnly
+		this.placeholder = __("Type '/' for commands or select text to format")
 	}
 
 	static get isReadOnlySupported() {
@@ -64,7 +65,15 @@ export class Markdown {
 			this.wrapper.contentEditable = true
 			this.wrapper.innerHTML = this.text
 
+			this.wrapper.addEventListener('focus', () =>
+				this._togglePlaceholder()
+			)
+			this.wrapper.addEventListener('blur', () =>
+				this._togglePlaceholder()
+			)
+
 			this.wrapper.addEventListener('input', (event) => {
+				this._togglePlaceholder()
 				let value = event.target.textContent
 				if (event.keyCode === 32 && value.startsWith('#')) {
 					this.convertToHeader(event, value)
@@ -85,6 +94,22 @@ export class Markdown {
 		return this.wrapper
 	}
 
+	_togglePlaceholder() {
+		const blocks = document.querySelectorAll(
+			'.cdx-block.ce-paragraph[data-placeholder]'
+		)
+		blocks.forEach((block) => {
+			if (block !== this.wrapper) {
+				delete block.dataset.placeholder
+			}
+		})
+		if (this.wrapper.innerHTML.trim() === '') {
+			this.wrapper.dataset.placeholder = this.placeholder
+		} else {
+			delete this.wrapper.dataset.placeholder
+		}
+	}
+
 	convertToHeader(event, value) {
 		event.preventDefault()
 		if (['#', '##', '###', '####', '#####', '######'].includes(value)) {

frontend/src/utils/quiz.js

@@ -14,8 +14,7 @@ export class Quiz {
 
 	static get toolbox() {
 		const app = createApp({
-			render: () =>
-				h(CircleHelp, { size: 18, strokeWidth: 1.5, color: 'black' }),
+			render: () => h(CircleHelp, { size: 5, strokeWidth: 1.5 }),
 		})
 
 		const div = document.createElement('div')