diff --git a/front/components/Objects/Editor/Editor.tsx b/front/components/Objects/Editor/Editor.tsx index 79b35d47..d101e3d0 100644 --- a/front/components/Objects/Editor/Editor.tsx +++ b/front/components/Objects/Editor/Editor.tsx @@ -23,6 +23,9 @@ import QuizBlock from "./Extensions/Quiz/QuizBlock"; import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; import Link from "next/link"; import { getCourseThumbnailMediaDirectory } from "@services/media/media"; +import { OrderedList } from "@tiptap/extension-ordered-list"; +import {ListItem} from '@tiptap/extension-list-item' + interface Editor { content: string; @@ -80,6 +83,8 @@ function Editor(props: Editor) { controls: true, modestBranding: true, }), + OrderedList.configure(), + // Register the document with Tiptap // Collaboration.configure({ // document: props.ydoc, @@ -404,6 +409,14 @@ export const EditorContentWrapper = styled.div` display: block; outline: 0px solid transparent; } + + ul, ol { + padding: 0 1rem; + padding-left: 10px; + list-style-type: decimal; + } + + `; export default Editor; diff --git a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx index 212a3e54..4df34e3c 100644 --- a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx +++ b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon, DividerVerticalIcon } from "@radix-ui/react-icons"; +import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon, DividerVerticalIcon, ListBulletIcon } from "@radix-ui/react-icons"; import { AlertCircle, AlertTriangle, FileText, GraduationCap, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react"; import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; @@ -39,6 +39,9 @@ export const ToolbarButtons = ({ editor, props }: any) => { editor.chain().focus().toggleStrike().run()} className={editor.isActive("strike") ? "is-active" : ""}> + editor.chain().focus().toggleOrderedList().run()} className={editor.isActive('orderedList') ? 'is-active' : ''}> + + editor diff --git a/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx index 1b570d29..5ab24ea7 100644 --- a/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx +++ b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx @@ -9,6 +9,7 @@ import ImageBlock from "@components/Objects/Editor/Extensions/Image/ImageBlock"; import VideoBlock from "@components/Objects/Editor/Extensions/Video/VideoBlock"; import MathEquationBlock from "@components/Objects/Editor/Extensions/MathEquation/MathEquationBlock"; import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock"; +import { OrderedList } from "@tiptap/extension-ordered-list"; interface Editor { content: string; @@ -49,6 +50,9 @@ function Canva(props: Editor) { controls: true, modestBranding: true, }), + + OrderedList.configure() + ], content: props.content, @@ -101,6 +105,12 @@ h5 { margin-bottom: 10px; } +ul, ol { + padding: 0 1rem; + padding-left: 10px; + list-style-type: decimal; +} + &:focus { outline: none !important;