diff --git a/frontend/public/Remove.mp4 b/frontend/public/Remove.mp4 new file mode 100644 index 00000000..1f6f8389 Binary files /dev/null and b/frontend/public/Remove.mp4 differ diff --git a/frontend/src/components/LessonHelp.vue b/frontend/src/components/LessonHelp.vue index 3c13e9b9..7904cbac 100644 --- a/frontend/src/components/LessonHelp.vue +++ b/frontend/src/components/LessonHelp.vue @@ -15,60 +15,18 @@ -
+
- {{ __('How to add a Quiz?') }} + {{ __(item.title) }}
- {{ - __( - '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.' - ) - }} -
-
- -
-
- - {{ __(contentMap['upload']) }} - - -
-
- {{ - __( - '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.' - ) - }} -
-
- -
-
- - {{ __(contentMap['youtube']) }} - - -
-
- {{ - __( - 'Copy the URL of the video from YouTube and paste it in the editor.' - ) - }} + {{ __(item.description) }}
@@ -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 } diff --git a/frontend/src/components/Modals/ExplanationVideos.vue b/frontend/src/components/Modals/ExplanationVideos.vue index 2f362cb4..677fe520 100644 --- a/frontend/src/components/Modals/ExplanationVideos.vue +++ b/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' }) diff --git a/frontend/src/pages/LessonForm.vue b/frontend/src/pages/LessonForm.vue index 68b1ed95..0aaa8dd7 100644 --- a/frontend/src/pages/LessonForm.vue +++ b/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; diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js index 19c17a9b..265ce072 100644 --- a/frontend/src/utils/index.js +++ b/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', diff --git a/frontend/src/utils/markdownParser.js b/frontend/src/utils/markdownParser.js index 8cf772fe..f4a335a1 100644 --- a/frontend/src/utils/markdownParser.js +++ b/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)) { diff --git a/frontend/src/utils/quiz.js b/frontend/src/utils/quiz.js index 2a60f46b..61024758 100644 --- a/frontend/src/utils/quiz.js +++ b/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')