fix: lesson editor fixes

frontend/src/components/LessonHelp.vue

@@ -15,60 +15,18 @@
 			</div>
 		</div>
 
-		<div class="space-y-2">
+		<div class="space-y-2" v-for="(item, key) in contentMap">
 			<div
 				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
-				@click="openHelpDialog('quiz')"
+				@click="openHelpDialog(key)"
 			>
 				<span>
-					{{ __('How to add a Quiz?') }}
+					{{ __(item.title) }}
 				</span>
 				<Info class="w-3 h-3 text-ink-gray-7" />
 			</div>
 			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
-				{{
-					__(
-						'Click on the add icon in the editor and select Quiz from the menu. It opens up a dialog, where you can either select a quiz from the list or create a new quiz. When you select the Create New option it redirects you to the quiz creation page.'
-					)
-				}}
-			</div>
-		</div>
-
-		<div class="space-y-2">
-			<div
-				class="flex text-sm font-medium space-x-2 cursor-pointer"
-				@click="openHelpDialog('upload')"
-			>
-				<span class="leading-5">
-					{{ __(contentMap['upload']) }}
-				</span>
-				<Info class="w-3 h-3 text-ink-gray-7" />
-			</div>
-			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
-				{{
-					__(
-						'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.'
-					)
-				}}
-			</div>
-		</div>
-
-		<div class="space-y-2">
-			<div
-				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
-				@click="openHelpDialog('youtube')"
-			>
-				<span>
-					{{ __(contentMap['youtube']) }}
-				</span>
-				<Info class="w-3 h-3 text-ink-gray-7" />
-			</div>
-			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
-				{{
-					__(
-						'Copy the URL of the video from YouTube and paste it in the editor.'
-					)
-				}}
+				{{ __(item.description) }}
 			</div>
 		</div>
 	</div>
@@ -83,14 +41,31 @@ const showExplanation = ref(false)
 const type = ref(null)
 const title = ref(null)
 const contentMap = {
-	quiz: 'How to add a Quiz?',
-	upload: 'How to upload content from your system?',
-	youtube: 'How to add a YouTube Video?',
+	quiz: {
+		title: 'How to add a Quiz?',
+		description:
+			'Click on the add icon in the editor and select Quiz from the menu. It opens up a dialog, where you can either select a quiz from the list or create a new quiz. When you select the Create New option it redirects you to the quiz creation page.',
+	},
+	upload: {
+		title: 'How to upload content from your system?',
+		description:
+			'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.',
+	},
+	youtube: {
+		title: 'How to add a YouTube Video?',
+		description:
+			'Copy the URL of the video from YouTube and paste it in the editor.',
+	},
+	remove: {
+		title: 'How to remove an embed?',
+		description:
+			'To remove an embed like YouTube or Vimeo, put your cursor on the line below the embed, then drag your mouse cursor upwards to select the embed. Once the embed is selected press BackSpace.',
+	},
 }
 
 const openHelpDialog = (contentType) => {
 	type.value = contentType
-	title.value = contentMap[contentType]
+	title.value = contentMap[contentType].title
 	showExplanation.value = true
 }
 </script>

frontend/src/components/Modals/ExplanationVideos.vue

@@ -35,5 +35,6 @@ const file = computed(() => {
 	if (props.type == 'youtube') return '/assets/lms/frontend/Youtube.mp4'
 	if (props.type == 'quiz') return '/assets/lms/frontend/Quiz.mp4'
 	if (props.type == 'upload') return '/assets/lms/frontend/Upload.mp4'
+	if (props.type == 'remove') return '/assets/lms/frontend/Remove.mp4'
 })
 </script>

frontend/src/pages/LessonForm.vue

@@ -101,6 +101,7 @@ import { ChevronRight } from 'lucide-vue-next'
 import { getEditorTools, enablePlyr } from '@/utils'
 import { capture, startRecording, stopRecording } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
+import { edit } from 'ace-builds'
 
 const { brand } = sessionStore()
 const editor = ref(null)
@@ -653,6 +654,68 @@ iframe {
 	border-radius: 8px;
 }
 
+.ce-popover__container {
+	border-radius: 12px;
+	padding: 8px;
+}
+
+.cdx-search-field {
+	border: none;
+}
+
+.cdx-search-field__input {
+	font-weight: 400;
+	font-size: 13px;
+}
+
+.cdx-search-field__input::before {
+	font-weight: 400;
+}
+
+.cdx-search-field__input:focus {
+	--tw-ring-color: theme('colors.gray.100');
+}
+
+.ce-popover-item__title {
+	font-size: 13px;
+	font-weight: 400;
+}
+
+.ce-popover-item__icon svg {
+	width: 15px;
+	height: 15px;
+}
+
+.ce-popover--opened > .ce-popover__container {
+	max-height: 320px;
+}
+
+.cdx-search-field__icon svg {
+	width: 15px;
+	height: 15px;
+}
+
+.cdx-search-field__icon {
+	margin-right: 5px;
+}
+
+.cdx-block.embed-tool {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+}
+
+.cdx-block.embed-tool::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: transparent;
+	z-index: 1000;
+}
+
 :root {
 	--plyr-range-fill-background: white;
 	--plyr-video-control-background-hover: transparent;

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')