Merge branch 'develop' of https://github.com/frappe/lms into develop
This commit is contained in:
Jannat Patel
@@ -10,10 +10,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@editorjs/checklist": "^1.6.0",
|
||||
"@editorjs/code": "^2.9.0",
|
||||
"@editorjs/editorjs": "^2.29.0",
|
||||
"@editorjs/embed": "^2.7.0",
|
||||
"@editorjs/header": "^2.8.1",
|
||||
"@editorjs/image": "^2.9.0",
|
||||
"@editorjs/inline-code": "^1.5.0",
|
||||
"@editorjs/nested-list": "^1.4.2",
|
||||
"@editorjs/paragraph": "^2.11.3",
|
||||
"chart.js": "^4.4.1",
|
||||
@@ -25,7 +27,7 @@
|
||||
"pinia": "^2.0.33",
|
||||
"socket.io-client": "^4.7.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"vue": "^3.2.25",
|
||||
"vue": "^3.4.23",
|
||||
"vue-chartjs": "^5.3.0",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
|
||||
BIN
frontend/public/Youtube.mov
Normal file
BIN
frontend/public/Youtube.mov
Normal file
Binary file not shown.
@@ -108,13 +108,16 @@ const getCoursesColumns = () => {
|
||||
{
|
||||
label: 'Title',
|
||||
key: 'title',
|
||||
width: 2,
|
||||
},
|
||||
{
|
||||
label: 'Lessons',
|
||||
key: 'lesson_count',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
label: 'Enrollments',
|
||||
align: 'right',
|
||||
key: 'enrollment_count',
|
||||
},
|
||||
]
|
||||
@@ -131,7 +134,6 @@ const removeCourse = createResource({
|
||||
})
|
||||
|
||||
const removeCourses = (selections) => {
|
||||
console.log(selections)
|
||||
selections.forEach(async (course) => {
|
||||
removeCourse.submit({ course })
|
||||
await setTimeout(1000)
|
||||
|
||||
@@ -109,6 +109,7 @@ const getStudentColumns = () => {
|
||||
{
|
||||
label: 'Full Name',
|
||||
key: 'full_name',
|
||||
width: 2,
|
||||
},
|
||||
{
|
||||
label: 'Courses Done',
|
||||
|
||||
@@ -10,7 +10,13 @@
|
||||
:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
|
||||
>
|
||||
<div class="flex relative top-4 left-4 w-fit flex-wrap">
|
||||
<Badge theme="gray" size="md" class="mr-2" v-for="tag in course.tags">
|
||||
<Badge
|
||||
variant="outline"
|
||||
theme="gray"
|
||||
size="md"
|
||||
class="mr-2"
|
||||
v-for="tag in course.tags"
|
||||
>
|
||||
{{ tag }}
|
||||
</Badge>
|
||||
</div>
|
||||
@@ -89,17 +95,7 @@
|
||||
:user="instructor"
|
||||
/>
|
||||
</div>
|
||||
<span v-if="course.instructors.length == 1">
|
||||
{{ course.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="course.instructors.length == 2">
|
||||
{{ course.instructors[0].first_name }} and
|
||||
{{ course.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="course.instructors.length > 2">
|
||||
{{ course.instructors[0].first_name }} and
|
||||
{{ course.instructors.length - 1 }} others
|
||||
</span>
|
||||
<CourseInstructors :instructors="course.instructors" />
|
||||
</div>
|
||||
|
||||
<div class="font-semibold">
|
||||
@@ -114,6 +110,7 @@ import { BookOpen, Users, Star } from 'lucide-vue-next'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { sessionStore } from '@/stores/session'
|
||||
import { Badge, Tooltip } from 'frappe-ui'
|
||||
import CourseInstructors from '@/components/CourseInstructors.vue'
|
||||
|
||||
const { user } = sessionStore()
|
||||
|
||||
|
||||
50
frontend/src/components/CourseInstructors.vue
Normal file
50
frontend/src/components/CourseInstructors.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<span v-if="instructors.length == 1">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'Profile',
|
||||
params: { username: instructors[0].username },
|
||||
}"
|
||||
>
|
||||
{{ instructors[0].full_name }}
|
||||
</router-link>
|
||||
</span>
|
||||
<span v-if="instructors.length == 2">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'Profile',
|
||||
params: { username: instructors[0].username },
|
||||
}"
|
||||
>
|
||||
{{ instructors[0].first_name }}
|
||||
</router-link>
|
||||
and
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'Profile',
|
||||
params: { username: instructors[1].username },
|
||||
}"
|
||||
>
|
||||
{{ instructors[1].first_name }}
|
||||
</router-link>
|
||||
</span>
|
||||
<span v-if="instructors.length > 2">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'Profile',
|
||||
params: { username: instructors[0].username },
|
||||
}"
|
||||
>
|
||||
{{ instructors[0].first_name }}
|
||||
</router-link>
|
||||
and {{ instructors.length - 1 }} others
|
||||
</span>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
instructors: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -25,7 +25,7 @@
|
||||
:key="chapter.name"
|
||||
:defaultOpen="openChapterDetail(chapter.idx)"
|
||||
>
|
||||
<DisclosureButton ref="" class="flex w-full px-2 py-3">
|
||||
<DisclosureButton ref="" class="flex w-full p-2">
|
||||
<ChevronRight
|
||||
:class="{
|
||||
'rotate-90 transform duration-200': open,
|
||||
@@ -38,7 +38,7 @@
|
||||
{{ chapter.title }}
|
||||
</div>
|
||||
</DisclosureButton>
|
||||
<DisclosurePanel class="pb-2">
|
||||
<DisclosurePanel>
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.name">
|
||||
<div class="outline-lesson pl-8 py-2">
|
||||
<router-link
|
||||
|
||||
@@ -15,11 +15,25 @@
|
||||
<div class="grid gap-8 mt-10">
|
||||
<div v-for="(review, index) in reviews.data">
|
||||
<div class="flex items-center">
|
||||
<UserAvatar :user="review.owner_details" :size="'2xl'" />
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'Profile',
|
||||
params: { username: review.owner_details.username },
|
||||
}"
|
||||
>
|
||||
<UserAvatar :user="review.owner_details" :size="'2xl'" />
|
||||
</router-link>
|
||||
<div class="mx-4">
|
||||
<span class="text-lg font-medium mr-4">
|
||||
{{ review.owner_details.full_name }}
|
||||
</span>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'Profile',
|
||||
params: { username: review.owner_details.username },
|
||||
}"
|
||||
>
|
||||
<span class="text-lg font-medium mr-4">
|
||||
{{ review.owner_details.full_name }}
|
||||
</span>
|
||||
</router-link>
|
||||
<span>
|
||||
{{ review.creation }}
|
||||
</span>
|
||||
|
||||
@@ -40,13 +40,16 @@
|
||||
<div v-else-if="singleThread && topics.data">
|
||||
<DiscussionReplies :topic="topics.data" :singleThread="singleThread" />
|
||||
</div>
|
||||
<div v-else class="flex justify-center border mt-5 p-5 rounded-md">
|
||||
<MessageSquareIcon class="w-10 h-10 stroke-1.5 text-gray-800 mr-2" />
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center justify-center border mt-5 p-5 rounded-md"
|
||||
>
|
||||
<MessageSquareIcon class="w-5 h-5 stroke-1.5 mr-2" />
|
||||
<div>
|
||||
<div class="text-xl font-semibold mb-2">
|
||||
<div v-if="emptyStateTitle" class="font-medium mb-2">
|
||||
{{ __(emptyStateTitle) }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="">
|
||||
{{ __(emptyStateText) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,7 +92,7 @@ const props = defineProps({
|
||||
},
|
||||
emptyStateTitle: {
|
||||
type: String,
|
||||
default: 'No topics yet',
|
||||
default: '',
|
||||
},
|
||||
emptyStateText: {
|
||||
type: String,
|
||||
|
||||
@@ -68,13 +68,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="text-xs text-gray-600 mb-1">
|
||||
{{
|
||||
__(
|
||||
'To add a YouTube video, paste the URL of the video in the editor.'
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<YouTubeExplanation>
|
||||
<template v-slot="{ togglePopover }">
|
||||
<div
|
||||
@click="togglePopover()"
|
||||
class="flex items-center text-sm underline cursor-pointer"
|
||||
>
|
||||
<Info class="w-3 h-3 stroke-1.5 text-gray-700 mr-1" />
|
||||
{{ __('Learn More') }}
|
||||
</div>
|
||||
</template>
|
||||
</YouTubeExplanation>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { FileUploader, Button, Select, Tooltip } from 'frappe-ui'
|
||||
import { Plus, FileText } from 'lucide-vue-next'
|
||||
import { Plus, FileText, Info } from 'lucide-vue-next'
|
||||
import { ref, watch } from 'vue'
|
||||
import YouTubeExplanation from '@/components/Modals/YouTubeExplanation.vue'
|
||||
|
||||
const quiz = ref(null)
|
||||
const file = ref(null)
|
||||
|
||||
@@ -14,7 +14,13 @@
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<Link doctype="LMS Course" v-model="course" />
|
||||
<Link doctype="LMS Course" v-model="course" :label="__('Course')" />
|
||||
<Link
|
||||
doctype="Course Evaluator"
|
||||
v-model="evaluator"
|
||||
:label="__('Evaluator')"
|
||||
class="mt-4"
|
||||
/>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -26,6 +32,7 @@ import { showToast } from '@/utils'
|
||||
|
||||
const show = defineModel()
|
||||
const course = ref(null)
|
||||
const evaluator = ref(null)
|
||||
const courses = defineModel('courses')
|
||||
|
||||
const props = defineProps({
|
||||
@@ -45,6 +52,7 @@ const createBatchCourse = createResource({
|
||||
parenttype: 'LMS Batch',
|
||||
parentfield: 'courses',
|
||||
course: course.value,
|
||||
evaluator: evaluator.value,
|
||||
},
|
||||
}
|
||||
},
|
||||
@@ -58,6 +66,7 @@ const addCourse = (close) => {
|
||||
courses.value.reload()
|
||||
close()
|
||||
course.value = null
|
||||
evaluator.value = null
|
||||
},
|
||||
onError(err) {
|
||||
showToast('Error', err.message[0] || err, 'x')
|
||||
|
||||
30
frontend/src/components/Modals/YouTubeExplanation.vue
Normal file
30
frontend/src/components/Modals/YouTubeExplanation.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<Popover transition="default">
|
||||
<template #target="{ isOpen, togglePopover }" class="flex w-full">
|
||||
<slot v-bind="{ isOpen, togglePopover }"></slot>
|
||||
</template>
|
||||
<template #body>
|
||||
<div
|
||||
class="absolute left-0 mt-3 w-[35rem] max-w-lg -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
|
||||
>
|
||||
<div
|
||||
class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
|
||||
>
|
||||
<video
|
||||
controls
|
||||
autoplay
|
||||
muted
|
||||
width="100%"
|
||||
controlsList="nodownload"
|
||||
class="rounded-sm"
|
||||
>
|
||||
<source src="/Youtube.mov" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Popover } from 'frappe-ui'
|
||||
</script>
|
||||
@@ -51,17 +51,7 @@
|
||||
:user="instructor"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 1">
|
||||
{{ course.data.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 2">
|
||||
{{ course.data.instructors[0].first_name }} and
|
||||
{{ course.data.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length > 2">
|
||||
{{ course.data.instructors[0].first_name }} and
|
||||
{{ course.data.instructors.length - 1 }} others
|
||||
</span>
|
||||
<CourseInstructors :instructors="course.data.instructors" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-3 mb-4 w-fit">
|
||||
@@ -87,7 +77,6 @@
|
||||
/>
|
||||
</div>
|
||||
<CourseReviews
|
||||
v-if="course.data.avg_rating"
|
||||
:courseName="course.data.name"
|
||||
:avg_rating="course.data.avg_rating"
|
||||
:membership="course.data.membership"
|
||||
@@ -109,6 +98,7 @@ import CourseOutline from '@/components/CourseOutline.vue'
|
||||
import CourseReviews from '@/components/CourseReviews.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { updateDocumentTitle } from '@/utils'
|
||||
import CourseInstructors from '@/components/CourseInstructors.vue'
|
||||
|
||||
const props = defineProps({
|
||||
courseName: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="grid md:grid-cols-[75%,25%] h-full">
|
||||
<div class="grid md:grid-cols-[75%,25%] h-screen">
|
||||
<div class="border-r">
|
||||
<header
|
||||
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b overflow-hidden bg-white px-3 py-2.5 sm:px-5"
|
||||
@@ -103,7 +103,7 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!user.data?.is_moderator || !user.data?.is_instructor) {
|
||||
if (!user.data?.is_moderator && !user.data?.is_instructor) {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
editor.value = renderEditor('content')
|
||||
@@ -440,10 +440,100 @@ const breadcrumbs = computed(() => {
|
||||
}
|
||||
|
||||
.ce-toolbar__actions {
|
||||
right: 108%;
|
||||
right: 108% !important;
|
||||
}
|
||||
|
||||
.ce-block__content {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.codeBoxHolder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.codeBoxTextArea {
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 10px;
|
||||
border-radius: 2px 2px 2px 0;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
font: 14px monospace;
|
||||
}
|
||||
|
||||
.codeBoxSelectDiv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.codeBoxSelectInput {
|
||||
border-radius: 0 0 20px 2px;
|
||||
padding: 2px 26px;
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.codeBoxSelectDropIcon {
|
||||
position: absolute !important;
|
||||
left: 10px !important;
|
||||
bottom: 0 !important;
|
||||
width: unset !important;
|
||||
height: unset !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.codeBoxSelectPreview {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 3px 15px -3px rgba(13, 20, 33, 0.13);
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin: 5px 0;
|
||||
max-height: 30vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.codeBoxSelectItem {
|
||||
width: 100%;
|
||||
padding: 5px 20px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.codeBoxSelectItem:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.codeBoxSelectedItem {
|
||||
background-color: lightblue !important;
|
||||
}
|
||||
|
||||
.codeBoxShow {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.dark {
|
||||
color: #abb2bf;
|
||||
background-color: #282c34;
|
||||
}
|
||||
|
||||
.light {
|
||||
color: #383a42;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
>
|
||||
<Breadcrumbs class="h-7" :items="breadcrumbs" />
|
||||
</header>
|
||||
<div class="grid md:grid-cols-[70%,30%] h-full">
|
||||
<div class="grid md:grid-cols-[70%,30%] h-screen">
|
||||
<div
|
||||
v-if="lesson.data.no_preview"
|
||||
class="border-r-2 text-center pt-10 px-5 md:px-0 pb-10"
|
||||
class="border-r text-center pt-10 px-5 md:px-0 pb-10"
|
||||
>
|
||||
<p class="mb-4">
|
||||
{{
|
||||
@@ -25,7 +25,7 @@
|
||||
</Button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else class="border-r-2 container pt-5 pb-10 px-5">
|
||||
<div v-else class="border-r container pt-5 pb-10 px-5">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between">
|
||||
<div class="text-3xl font-semibold">
|
||||
{{ lesson.data.title }}
|
||||
@@ -101,17 +101,7 @@
|
||||
:user="instructor"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="lesson.data.instructors.length == 1">
|
||||
{{ lesson.data.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="lesson.data.instructors.length == 2">
|
||||
{{ lesson.data.instructors[0].first_name }} and
|
||||
{{ lesson.data.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="lesson.data.instructors.length > 2">
|
||||
{{ lesson.data.instructors[0].first_name }} and
|
||||
{{ lesson.data.instructors.length - 1 }} others
|
||||
</span>
|
||||
<CourseInstructors :instructors="lesson.data.instructors" />
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
@@ -161,7 +151,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sticky top-10">
|
||||
<div class="bg-gray-50 p-5 border-b-2">
|
||||
<div class="bg-gray-50 p-5 border-b">
|
||||
<div class="text-lg font-semibold">
|
||||
{{ lesson.data.course_title }}
|
||||
</div>
|
||||
@@ -196,6 +186,7 @@ import Discussions from '@/components/Discussions.vue'
|
||||
import { getEditorTools } from '../utils'
|
||||
import EditorJS from '@editorjs/editorjs'
|
||||
import LessonContent from '@/components/LessonContent.vue'
|
||||
import CourseInstructors from '@/components/CourseInstructors.vue'
|
||||
|
||||
const user = inject('$user')
|
||||
const route = useRoute()
|
||||
@@ -246,7 +237,6 @@ const lesson = createResource({
|
||||
|
||||
const renderEditor = (holder, content) => {
|
||||
// empty the holder
|
||||
document.getElementById(holder).innerHTML = ''
|
||||
return new EditorJS({
|
||||
holder: holder,
|
||||
tools: getEditorTools(),
|
||||
@@ -396,4 +386,98 @@ const allowInstructorContent = () => {
|
||||
.embed-tool__caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ce-block__content {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.codeBoxHolder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.codeBoxTextArea {
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 10px;
|
||||
border-radius: 2px 2px 2px 0;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
font: 14px monospace;
|
||||
}
|
||||
|
||||
.codeBoxSelectDiv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.codeBoxSelectInput {
|
||||
border-radius: 0 0 20px 2px;
|
||||
padding: 2px 26px;
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.codeBoxSelectDropIcon {
|
||||
position: absolute !important;
|
||||
left: 10px !important;
|
||||
bottom: 0 !important;
|
||||
width: unset !important;
|
||||
height: unset !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.codeBoxSelectPreview {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 3px 15px -3px rgba(13, 20, 33, 0.13);
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin: 5px 0;
|
||||
max-height: 30vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.codeBoxSelectItem {
|
||||
width: 100%;
|
||||
padding: 5px 20px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.codeBoxSelectItem:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.codeBoxSelectedItem {
|
||||
background-color: lightblue !important;
|
||||
}
|
||||
|
||||
.codeBoxShow {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.dark {
|
||||
color: #abb2bf;
|
||||
background-color: #282c34;
|
||||
}
|
||||
|
||||
.light {
|
||||
color: #383a42;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
|
||||
218
frontend/src/utils/code.ts
Normal file
218
frontend/src/utils/code.ts
Normal file
@@ -0,0 +1,218 @@
|
||||
import { Code } from "lucide-vue-next"
|
||||
import { h, createApp } from "vue"
|
||||
|
||||
const DEFAULT_THEMES = ['light', 'dark'];
|
||||
const COMMON_LANGUAGES = {
|
||||
none: 'Auto-detect', apache: 'Apache', bash: 'Bash', cs: 'C#', cpp: 'C++', css: 'CSS', coffeescript: 'CoffeeScript', diff: 'Diff',
|
||||
go: 'Go', html: 'HTML, XML', http: 'HTTP', json: 'JSON', java: 'Java', javascript: 'JavaScript', kotlin: 'Kotlin',
|
||||
less: 'Less', lua: 'Lua', makefile: 'Makefile', markdown: 'Markdown', nginx: 'Nginx', objectivec: 'Objective-C',
|
||||
php: 'PHP', perl: 'Perl', properties: 'Properties', python: 'Python', ruby: 'Ruby', rust: 'Rust', scss: 'SCSS',
|
||||
sql: 'SQL', shell: 'Shell Session', swift: 'Swift', toml: 'TOML, also INI', typescript: 'TypeScript', yaml: 'YAML',
|
||||
plaintext: 'Plaintext'
|
||||
};
|
||||
|
||||
export class CodeBox {
|
||||
api: any;
|
||||
config: { themeName: any; themeURL: any; useDefaultTheme: any; };
|
||||
readOnly: boolean;
|
||||
data: { code: any; language: any; theme: any; };
|
||||
highlightScriptID: string;
|
||||
highlightCSSID: string;
|
||||
codeArea: HTMLDivElement;
|
||||
selectInput: HTMLInputElement;
|
||||
selectDropIcon: HTMLElement;
|
||||
|
||||
constructor({ data, api, config, readOnly }) {
|
||||
this.api = api;
|
||||
this.readOnly = readOnly;
|
||||
this.config = {
|
||||
themeName: config.themeName && typeof config.themeName === 'string' ? config.themeName : '',
|
||||
themeURL: config.themeURL && typeof config.themeURL === 'string' ? config.themeURL : '',
|
||||
useDefaultTheme: (config.useDefaultTheme && typeof config.useDefaultTheme === 'string'
|
||||
&& DEFAULT_THEMES.includes(config.useDefaultTheme.toLowerCase())) ? config.useDefaultTheme : 'dark',
|
||||
};
|
||||
this.data = {
|
||||
code: data.code && typeof data.code === 'string' ? data.code : '',
|
||||
language: data.language && typeof data.language === 'string' ? data.language : 'Auto-detect',
|
||||
theme: data.theme && typeof data.theme === 'string' ? data.theme : this._getThemeURLFromConfig(),
|
||||
};
|
||||
this.highlightScriptID = 'highlightJSScriptElement';
|
||||
this.highlightCSSID = 'highlightJSCSSElement';
|
||||
this.codeArea = document.createElement('div');
|
||||
this.selectInput = document.createElement('input');
|
||||
this.selectDropIcon = document.createElement('i');
|
||||
|
||||
this._injectHighlightJSScriptElement();
|
||||
this._injectHighlightJSCSSElement();
|
||||
|
||||
this.api.listeners.on(window, 'click', this._closeAllLanguageSelects, true);
|
||||
}
|
||||
|
||||
static get isReadOnlySupported() {
|
||||
return true
|
||||
}
|
||||
|
||||
static get sanitize() {
|
||||
return {
|
||||
code: true,
|
||||
language: false,
|
||||
theme: false,
|
||||
}
|
||||
}
|
||||
|
||||
static get toolbox() {
|
||||
const app = createApp({
|
||||
render: () => h(Code, { size: 24, strokeWidth: 2, color: 'black' }),
|
||||
});
|
||||
|
||||
const div = document.createElement('div');
|
||||
app.mount(div);
|
||||
|
||||
return {
|
||||
title: 'CodeBox',
|
||||
icon: div.innerHTML
|
||||
};
|
||||
}
|
||||
|
||||
static get displayInToolbox() {
|
||||
return true;
|
||||
}
|
||||
|
||||
static get enableLineBreaks() {
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
const codeAreaHolder = document.createElement('pre');
|
||||
const languageSelect = this._createLanguageSelectElement();
|
||||
|
||||
codeAreaHolder.setAttribute('class', 'codeBoxHolder');
|
||||
this.codeArea.setAttribute('class', `codeBoxTextArea ${this.config.useDefaultTheme} ${this.data.language}`);
|
||||
this.codeArea.setAttribute('contenteditable', 'true');
|
||||
this.codeArea.innerHTML = this.data.code;
|
||||
this.api.listeners.on(this.codeArea, 'blur', event => this._highlightCodeArea(event), false);
|
||||
this.api.listeners.on(this.codeArea, 'paste', event => this._handleCodeAreaPaste(event), false);
|
||||
|
||||
codeAreaHolder.appendChild(this.codeArea);
|
||||
!this.readOnly && codeAreaHolder.appendChild(languageSelect);
|
||||
|
||||
return codeAreaHolder;
|
||||
}
|
||||
|
||||
save(blockContent) {
|
||||
return Object.assign(this.data, { code: this.codeArea.innerHTML, theme: this._getThemeURLFromConfig() });
|
||||
}
|
||||
|
||||
validate(savedData) {
|
||||
if (!savedData.code.trim()) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.api.listeners.off(window, 'click', this._closeAllLanguageSelects, true);
|
||||
this.api.listeners.off(this.codeArea, 'blur', event => this._highlightCodeArea(event), false);
|
||||
this.api.listeners.off(this.codeArea, 'paste', event => this._handleCodeAreaPaste(event), false);
|
||||
this.api.listeners.off(this.selectInput, 'click', event => this._handleSelectInputClick(event), false);
|
||||
}
|
||||
|
||||
_createLanguageSelectElement() {
|
||||
const selectHolder = document.createElement('div');
|
||||
const selectPreview = document.createElement('div');
|
||||
const languages = Object.entries(COMMON_LANGUAGES);
|
||||
|
||||
selectHolder.setAttribute('class', 'codeBoxSelectDiv');
|
||||
|
||||
this.selectDropIcon.setAttribute('class', `codeBoxSelectDropIcon ${this.config.useDefaultTheme}`);
|
||||
this.selectDropIcon.innerHTML = '↓';
|
||||
this.selectInput.setAttribute('class', `codeBoxSelectInput ${this.config.useDefaultTheme}`);
|
||||
this.selectInput.setAttribute('type', 'text');
|
||||
this.selectInput.setAttribute('readonly', 'true');
|
||||
this.selectInput.value = this.data.language;
|
||||
this.api.listeners.on(this.selectInput, 'click', event => this._handleSelectInputClick(event), false);
|
||||
|
||||
selectPreview.setAttribute('class', 'codeBoxSelectPreview');
|
||||
|
||||
languages.forEach(language => {
|
||||
const selectItem = document.createElement('p');
|
||||
selectItem.setAttribute('class', `codeBoxSelectItem ${this.config.useDefaultTheme}`);
|
||||
selectItem.setAttribute('data-key', language[0]);
|
||||
selectItem.textContent = language[1];
|
||||
this.api.listeners.on(selectItem, 'click', event => this._handleSelectItemClick(event, language), false);
|
||||
|
||||
selectPreview.appendChild(selectItem);
|
||||
});
|
||||
|
||||
selectHolder.appendChild(this.selectDropIcon);
|
||||
selectHolder.appendChild(this.selectInput);
|
||||
selectHolder.appendChild(selectPreview);
|
||||
|
||||
return selectHolder;
|
||||
}
|
||||
|
||||
_highlightCodeArea(event) {
|
||||
window.hljs.highlightBlock(this.codeArea);
|
||||
}
|
||||
|
||||
_handleCodeAreaPaste(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
_handleSelectInputClick(event) {
|
||||
event.target.nextSibling.classList.toggle('codeBoxShow');
|
||||
}
|
||||
|
||||
_handleSelectItemClick(event, language) {
|
||||
event.target.parentNode.parentNode.querySelector('.codeBoxSelectInput').value = language[1];
|
||||
event.target.parentNode.classList.remove('codeBoxShow');
|
||||
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);
|
||||
}
|
||||
|
||||
_closeAllLanguageSelects() {
|
||||
const selectPreviews = document.querySelectorAll('.codeBoxSelectPreview');
|
||||
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();
|
||||
if (!highlightJSCSSElement) {
|
||||
const link = document.createElement('link');
|
||||
const head = document.querySelector('head');
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
link.setAttribute('href', highlightJSCSSURL);
|
||||
link.setAttribute('id', this.highlightCSSID);
|
||||
|
||||
if (head) head.appendChild(link);
|
||||
}
|
||||
else highlightJSCSSElement.setAttribute('href', highlightJSCSSURL);
|
||||
}
|
||||
|
||||
_getThemeURLFromConfig() {
|
||||
let themeURL = `https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-${this.config.useDefaultTheme}.min.css`;
|
||||
|
||||
if (this.config.themeName) themeURL = `https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/${this.config.themeName}.min.css`;
|
||||
if (this.config.themeURL) themeURL = this.config.themeURL;
|
||||
|
||||
return themeURL;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default CodeBox;
|
||||
@@ -6,7 +6,9 @@ import { Upload } from '@/utils/upload'
|
||||
import Header from '@editorjs/header'
|
||||
import Paragraph from '@editorjs/paragraph'
|
||||
import Embed from '@editorjs/embed'
|
||||
import { CodeBox } from '@/utils/code'
|
||||
import NestedList from '@editorjs/nested-list'
|
||||
import InlineCode from '@editorjs/inline-code'
|
||||
import { watch } from 'vue'
|
||||
import dayjs from '@/utils/dayjs'
|
||||
|
||||
@@ -130,12 +132,25 @@ export function getEditorTools() {
|
||||
class: Paragraph,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
codeBox: {
|
||||
class: CodeBox,
|
||||
config: {
|
||||
themeURL:
|
||||
'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/dracula.min.css', // Optional
|
||||
themeName: 'atom-one-dark', // Optional
|
||||
useDefaultTheme: 'dark', // Optional. This also determines the background color of the language select drop-down
|
||||
},
|
||||
},
|
||||
list: {
|
||||
class: NestedList,
|
||||
config: {
|
||||
defaultStyle: 'ordered',
|
||||
},
|
||||
},
|
||||
inlineCode: {
|
||||
class: InlineCode,
|
||||
shortcut: 'CMD+SHIFT+M',
|
||||
},
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
@@ -336,3 +351,19 @@ export function getFormattedDateRange(
|
||||
format
|
||||
)}`
|
||||
}
|
||||
|
||||
export function getLineStartPosition(string, position) {
|
||||
const charLength = 1
|
||||
let char = ''
|
||||
|
||||
while (char !== '\n' && position > 0) {
|
||||
position = position - charLength
|
||||
char = string.substr(position, charLength)
|
||||
}
|
||||
|
||||
if (char === '\n') {
|
||||
position += 1
|
||||
}
|
||||
|
||||
return position
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ export class Upload {
|
||||
|
||||
renderUpload(file) {
|
||||
if (this.isVideo(file.file_type)) {
|
||||
return `<video controls width='100%' controls controlsList='nodownload' class="mb-4">
|
||||
return `<video controls width='100%' controlsList='nodownload' class="mb-4">
|
||||
<source src=${encodeURI(file.file_url)} type='video/mp4'>
|
||||
</video>`
|
||||
} else if (this.isAudio(file.file_type)) {
|
||||
|
||||
1880
frontend/yarn.lock
Normal file
1880
frontend/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user