diff --git a/front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx b/front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx
index 4c945527..ecf880b0 100644
--- a/front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx
+++ b/front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx
@@ -12,6 +12,18 @@ import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock";
import { OrderedList } from "@tiptap/extension-ordered-list";
import QuizBlock from "@components/Objects/Editor/Extensions/Quiz/QuizBlock";
+// Lowlight
+import { common, createLowlight } from 'lowlight'
+const lowlight = createLowlight(common)
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import css from 'highlight.js/lib/languages/css'
+import js from 'highlight.js/lib/languages/javascript'
+import ts from 'highlight.js/lib/languages/typescript'
+import html from 'highlight.js/lib/languages/xml'
+import python from 'highlight.js/lib/languages/python'
+import java from 'highlight.js/lib/languages/java'
+
+
interface Editor {
content: string;
activity: any;
@@ -20,6 +32,16 @@ interface Editor {
function Canva(props: Editor) {
const isEditable = false;
+
+ // Code Block Languages for Lowlight
+ lowlight.register('html', html)
+ lowlight.register('css', css)
+ lowlight.register('js', js)
+ lowlight.register('ts', ts)
+ lowlight.register('python', python)
+ lowlight.register('java', java)
+
+
const editor: any = useEditor({
editable: isEditable,
extensions: [
@@ -55,8 +77,10 @@ function Canva(props: Editor) {
controls: true,
modestBranding: true,
}),
-
- OrderedList.configure()
+ OrderedList.configure(),
+ CodeBlockLowlight.configure({
+ lowlight,
+ }),
],
@@ -78,50 +102,118 @@ const CanvaWrapper = styled.div`
.ProseMirror {
-h1 {
- font-size: 30px;
- font-weight: 600;
- margin-bottom: 10px;
-}
+ h1 {
+ font-size: 30px;
+ font-weight: 600;
+ margin-bottom: 10px;
+ }
-h2 {
- font-size: 25px;
- font-weight: 600;
- margin-bottom: 10px;
-}
+ h2 {
+ font-size: 25px;
+ font-weight: 600;
+ margin-bottom: 10px;
+ }
-h3 {
- font-size: 20px;
- font-weight: 600;
- margin-bottom: 10px;
-}
+ h3 {
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 10px;
+ }
-h4 {
- font-size: 18px;
- font-weight: 600;
- margin-top: 10px;
- margin-bottom: 10px;
-}
+ h4 {
+ font-size: 18px;
+ font-weight: 600;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
-h5 {
- font-size: 16px;
- font-weight: 600;
- margin-top: 10px;
- margin-bottom: 10px;
-}
+ h5 {
+ font-size: 16px;
+ font-weight: 600;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
-ul, ol {
- padding: 0 1rem;
- padding-left: 20px;
- list-style-type: decimal;
-}
+ ul, ol {
+ padding: 0 1rem;
+ padding-left: 20px;
+ list-style-type: decimal;
+ }
-&:focus {
- outline: none !important;
- outline-style: none !important;
- box-shadow: none !important;
-}
+ &:focus {
+ outline: none !important;
+ outline-style: none !important;
+ box-shadow: none !important;
+ }
+
+ // Code Block
+ pre {
+ background: #0d0d0d;
+ border-radius: 0.5rem;
+ color: #fff;
+ font-family: "JetBrainsMono", monospace;
+ padding: 0.75rem 1rem;
+
+ code {
+ background: none;
+ color: inherit;
+ font-size: 0.8rem;
+ padding: 0;
+ }
+
+ .hljs-comment,
+ .hljs-quote {
+ color: #616161;
+ }
+
+ .hljs-variable,
+ .hljs-template-variable,
+ .hljs-attribute,
+ .hljs-tag,
+ .hljs-name,
+ .hljs-regexp,
+ .hljs-link,
+ .hljs-name,
+ .hljs-selector-id,
+ .hljs-selector-class {
+ color: #f98181;
+ }
+
+ .hljs-number,
+ .hljs-meta,
+ .hljs-built_in,
+ .hljs-builtin-name,
+ .hljs-literal,
+ .hljs-type,
+ .hljs-params {
+ color: #fbbc88;
+ }
+
+ .hljs-string,
+ .hljs-symbol,
+ .hljs-bullet {
+ color: #b9f18d;
+ }
+
+ .hljs-title,
+ .hljs-section {
+ color: #faf594;
+ }
+
+ .hljs-keyword,
+ .hljs-selector-tag {
+ color: #70cff8;
+ }
+
+ .hljs-emphasis {
+ font-style: italic;
+ }
+
+ .hljs-strong {
+ font-weight: 700;
+ }
+ }
}
diff --git a/front/components/Objects/Editor/Editor.tsx b/front/components/Objects/Editor/Editor.tsx
index fd7ad21e..272fd7f5 100644
--- a/front/components/Objects/Editor/Editor.tsx
+++ b/front/components/Objects/Editor/Editor.tsx
@@ -26,6 +26,18 @@ import { getCourseThumbnailMediaDirectory } from "@services/media/media";
import { OrderedList } from "@tiptap/extension-ordered-list";
+// Lowlight
+import { common, createLowlight } from 'lowlight'
+const lowlight = createLowlight(common)
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import css from 'highlight.js/lib/languages/css'
+import js from 'highlight.js/lib/languages/javascript'
+import ts from 'highlight.js/lib/languages/typescript'
+import html from 'highlight.js/lib/languages/xml'
+import python from 'highlight.js/lib/languages/python'
+import java from 'highlight.js/lib/languages/java'
+
+
interface Editor {
content: string;
ydoc: any;
@@ -44,6 +56,14 @@ function Editor(props: Editor) {
// remove activity_ from activity_id
const activity_id = props.activity.activity_id.substring(9);
+ // Code Block Languages for Lowlight
+ lowlight.register('html', html)
+ lowlight.register('css', css)
+ lowlight.register('js', js)
+ lowlight.register('ts', ts)
+ lowlight.register('python', python)
+ lowlight.register('java', java)
+
const editor: any = useEditor({
editable: true,
@@ -83,6 +103,10 @@ function Editor(props: Editor) {
modestBranding: true,
}),
OrderedList.configure(),
+ CodeBlockLowlight.configure({
+ lowlight,
+ }),
+
// Register the document with Tiptap
// Collaboration.configure({
@@ -139,7 +163,7 @@ function Editor(props: Editor) {
{!auth.isAuthenticated && Loading}
{auth.isAuthenticated && }
-
+
props.setContent(editor.getJSON())}> Save
@@ -328,6 +352,75 @@ export const EditorContentWrapper = styled.div`
outline-style: none !important;
box-shadow: none !important;
}
+
+ // Code Block
+ pre {
+ background: #0d0d0d;
+ border-radius: 0.5rem;
+ color: #fff;
+ font-family: "JetBrainsMono", monospace;
+ padding: 0.75rem 1rem;
+
+ code {
+ background: none;
+ color: inherit;
+ font-size: 0.8rem;
+ padding: 0;
+ }
+
+ .hljs-comment,
+ .hljs-quote {
+ color: #616161;
+ }
+
+ .hljs-variable,
+ .hljs-template-variable,
+ .hljs-attribute,
+ .hljs-tag,
+ .hljs-name,
+ .hljs-regexp,
+ .hljs-link,
+ .hljs-name,
+ .hljs-selector-id,
+ .hljs-selector-class {
+ color: #f98181;
+ }
+
+ .hljs-number,
+ .hljs-meta,
+ .hljs-built_in,
+ .hljs-builtin-name,
+ .hljs-literal,
+ .hljs-type,
+ .hljs-params {
+ color: #fbbc88;
+ }
+
+ .hljs-string,
+ .hljs-symbol,
+ .hljs-bullet {
+ color: #b9f18d;
+ }
+
+ .hljs-title,
+ .hljs-section {
+ color: #faf594;
+ }
+
+ .hljs-keyword,
+ .hljs-selector-tag {
+ color: #70cff8;
+ }
+
+ .hljs-emphasis {
+ font-style: italic;
+ }
+
+ .hljs-strong {
+ font-weight: 700;
+ }
+ }
+
}
iframe {
diff --git a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
index 22d5804f..3e910195 100644
--- a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
+++ b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
@@ -1,6 +1,6 @@
import styled from "styled-components";
import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon, DividerVerticalIcon, ListBulletIcon } from "@radix-ui/react-icons";
-import { AlertCircle, AlertTriangle, FileText, GraduationCap, HelpCircle, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react";
+import { AlertCircle, AlertTriangle, BadgeHelp, Code, FileText, GraduationCap, HelpCircle, ImagePlus, Info, ListChecks, Sigma, Video, Youtube } from "lucide-react";
import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
export const ToolbarButtons = ({ editor, props }: any) => {
@@ -148,7 +148,15 @@ export const ToolbarButtons = ({ editor, props }: any) => {
.run()
}
>
-
+
+
+
+
+ editor.chain().focus().toggleCodeBlock().run()}
+ className={editor.isActive('codeBlock') ? 'is-active' : ''}
+ >
+