chore: use vite plugins from frappe-ui

frontend/src/components/AppSidebar.vue

@@ -109,7 +109,8 @@ import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
 import { useSettings } from '@/stores/settings'
 import { ChevronRight, Plus } from 'lucide-vue-next'
-import { Button, createResource, TrialBanner } from 'frappe-ui'
+import { Button, createResource } from 'frappe-ui'
+import { TrialBanner } from "frappe-ui/frappe"
 import PageModal from '@/components/Modals/PageModal.vue'
 
 const { user, sidebarSettings } = sessionStore()

frontend/src/components/Assignment.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="assignment.data"
-		class="grid grid-cols-[65%,35%] h-full"
+		class="grid grid-cols-[60%,40%] h-full"
 		:class="{ 'border rounded-lg': !showTitle }"
 	>
 		<div class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]">
@@ -115,7 +115,13 @@
 						:readonly="!canModifyAssignment"
 					/>
 				</div>
-				<div v-else>
+				<div v-if="true">
+					<div class="text-sm mb-4">
+						{{ __('Write your answer here') }}
+					</div>
+					<FormControl />
+				</div>
+				<!-- <div v-else>
 					<div class="text-sm mb-4">
 						{{ __('Write your answer here') }}
 					</div>
@@ -126,7 +132,7 @@
 						:fixedMenu="true"
 						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 					/>
-				</div>
+				</div> -->
 
 				<div
 					v-if="

frontend/src/components/AssignmentBlock.vue

@@ -1,4 +1,6 @@
 <template>
+	{{ user.data }}
+	{{ submission.data }}
 	<Assignment
 		v-if="user.data && submission.data"
 		:assignmentID="assignmentID"
@@ -16,7 +18,7 @@
 	</div>
 </template>
 <script setup>
-import { inject, watch } from 'vue'
+import { inject } from 'vue'
 import { Button, createResource } from 'frappe-ui'
 import Assignment from '@/components/Assignment.vue'
 

frontend/src/components/CertificationLinks.vue

@@ -2,7 +2,7 @@
 	<Button
 		v-if="certification.data && certification.data.certificate"
 		@click="downloadCertificate"
-		class="w-full"
+		class=""
 	>
 		<template #prefix>
 			<GraduationCap class="size-4 stroke-1.5" />
@@ -71,7 +71,7 @@ const certification = createResource({
 	params: {
 		course: props.courseName,
 	},
-	auto: true,
+	auto: user.data ? true : false,
 	cache: ['certificationData', user.data?.name],
 })
 

frontend/src/components/CourseCardOverlay.vue

@@ -30,7 +30,7 @@
 						</span>
 					</Button>
 				</router-link>
-				<CertificationLinks :courseName="course.data.name" />
+				<CertificationLinks :courseName="course.data.name" class="w-full" />
 			</div>
 			<router-link
 				v-else-if="course.data.paid_course"

frontend/src/utils/assignment.js

@@ -5,6 +5,7 @@ import AssignmentBlock from '@/components/AssignmentBlock.vue'
 import translationPlugin from '../translation'
 import { usersStore } from '@/stores/user'
 import router from '../router'
+import { FrappeUI, setConfig, frappeRequest, pageMetaPlugin } from 'frappe-ui'
 
 export class Assignment {
 	constructor({ data, api, readOnly }) {
@@ -46,8 +47,11 @@ export class Assignment {
 			const app = createApp(AssignmentBlock, {
 				assignmentID: assignment,
 			})
+			app.use(FrappeUI)
+			setConfig('resourceFetcher', frappeRequest)
 			app.use(translationPlugin)
 			app.use(router)
+			app.use(pageMetaPlugin)
 			const { userResource } = usersStore()
 			app.provide('$user', userResource)
 			app.mount(this.wrapper)

frontend/src/utils/code.ts

@@ -1,5 +1,7 @@
 import { Code } from "lucide-vue-next"
 import { h, createApp } from "vue"
+import hljs from 'highlight.js/lib/core';
+
 
 const DEFAULT_THEMES = ['light', 'dark'];
 const COMMON_LANGUAGES = {
@@ -42,7 +44,6 @@ export class CodeBox {
 		this.selectInput = document.createElement('input');
 		this.selectDropIcon = document.createElement('i');
 
-		this._injectHighlightJSScriptElement();
 		this._injectHighlightJSCSSElement();
 
 		this.api.listeners.on(window, 'click', this._closeAllLanguageSelects, true);
@@ -150,7 +151,7 @@ export class CodeBox {
 	}
 
 	_highlightCodeArea(event) {
-		window.hljs.highlightBlock(this.codeArea);
+		hljs.highlightBlock(this.codeArea);
 	}
 
 	_handleCodeAreaPaste(event) {
@@ -167,7 +168,8 @@ export class CodeBox {
 		this.codeArea.removeAttribute('class');
 		this.data.language = language[0];
 		this.codeArea.setAttribute('class', `codeBoxTextArea ${this.config.useDefaultTheme} ${this.data.language}`);
-		window.hljs.highlightBlock(this.codeArea);
+	
+		hljs.highlightElement(this.codeArea);
 	}
 
 	_closeAllLanguageSelects() {
@@ -175,20 +177,6 @@ export class CodeBox {
 		for (let i = 0, len = selectPreviews.length; i < len; i++) selectPreviews[i].classList.remove('codeBoxShow');
 	}
 
-	_injectHighlightJSScriptElement() {
-		const highlightJSScriptElement = document.querySelector(`#${this.highlightScriptID}`);
-		const highlightJSScriptURL = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js';
-		if (!highlightJSScriptElement) {
-			const script = document.createElement('script');
-			const head = document.querySelector('head');
-			script.setAttribute('src', highlightJSScriptURL);
-			script.setAttribute('id', this.highlightScriptID);
-
-			if (head) head.appendChild(script);
-		}
-		else highlightJSScriptElement.setAttribute('src', highlightJSScriptURL);
-	}
-
 	_injectHighlightJSCSSElement() {
 		const highlightJSCSSElement = document.querySelector(`#${this.highlightCSSID}`);
 		let highlightJSCSSURL = this._getThemeURLFromConfig();

frontend/src/utils/index.js

@@ -174,15 +174,6 @@ export function getEditorTools() {
 				preserveBlank: true,
 			},
 		},
-		codeBox: {
-			class: CodeBox,
-			config: {
-				themeURL:
-					'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css',
-				themeName: 'atom-one-dark',
-				useDefaultTheme: 'dark',
-			},
-		},
 		list: {
 			class: NestedList,
 			inlineToolbar: true,