From 0bd6c06987167e4efe61529de9979b007f7d3e0e Mon Sep 17 00:00:00 2001 From: Sanjeev Kumar Date: Sun, 20 Aug 2023 16:23:25 +0530 Subject: [PATCH 1/3] added Ordered List added Ordered List --- config/config.yaml | 2 +- front/components/Objects/Editor/Editor.tsx | 5 +++++ front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx | 5 ++++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/config/config.yaml b/config/config.yaml index 12ee9e60..28e3295a 100644 --- a/config/config.yaml +++ b/config/config.yaml @@ -3,7 +3,7 @@ site_description: LearnHouse is an open-source platform tailored for learning ex contact_email: hi@learnhouse.app general: - development_mode: false + development_mode: true install_mode: false security: diff --git a/front/components/Objects/Editor/Editor.tsx b/front/components/Objects/Editor/Editor.tsx index 79b35d47..8470f22c 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, diff --git a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx index 212a3e54..b00a71c5 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 } from "@radix-ui/react-icons"; -import { AlertCircle, AlertTriangle, FileText, GraduationCap, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react"; +import { AlertCircle, AlertTriangle, FileText, GraduationCap, ImagePlus, Info, Sigma, Video, Youtube, ListOrdered } from "lucide-react"; import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; export const ToolbarButtons = ({ editor, props }: any) => { @@ -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 From 88d7d516e31e11eddd96cfda129d56cd71978130 Mon Sep 17 00:00:00 2001 From: Sanjeev Kumar Date: Tue, 22 Aug 2023 01:04:24 +0530 Subject: [PATCH 2/3] Completed Ordered List Function added Ordered List Function to Editor and Dynamic Canva. --- config/config.yaml | 2 +- front/components/Objects/Editor/Editor.tsx | 8 ++++++++ .../Objects/Editor/Toolbar/ToolbarButtons.tsx | 4 ++-- .../Pages/Activities/DynamicCanva/DynamicCanva.tsx | 10 ++++++++++ 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/config/config.yaml b/config/config.yaml index 28e3295a..9e892240 100644 --- a/config/config.yaml +++ b/config/config.yaml @@ -4,7 +4,7 @@ contact_email: hi@learnhouse.app general: development_mode: true - install_mode: false + install_mode: true security: auth_jwt_secret_key: secret diff --git a/front/components/Objects/Editor/Editor.tsx b/front/components/Objects/Editor/Editor.tsx index 8470f22c..d101e3d0 100644 --- a/front/components/Objects/Editor/Editor.tsx +++ b/front/components/Objects/Editor/Editor.tsx @@ -409,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 b00a71c5..a9a2c0c5 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, ListOrdered } from "lucide-react"; import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; @@ -40,7 +40,7 @@ export const ToolbarButtons = ({ editor, props }: any) => { editor.chain().focus().toggleOrderedList().run()} className={editor.isActive('orderedList') ? 'is-active' : ''}> - + 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; From 9080a78a90273789e967393d5ec8d42ffcba0e08 Mon Sep 17 00:00:00 2001 From: Sanjeev Kumar Date: Tue, 22 Aug 2023 01:05:41 +0530 Subject: [PATCH 3/3] Update ToolbarButtons.tsx --- front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx index a9a2c0c5..4df34e3c 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, ImagePlus, Info, Sigma, Video, Youtube, ListOrdered } from "lucide-react"; +import { AlertCircle, AlertTriangle, FileText, GraduationCap, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react"; import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; export const ToolbarButtons = ({ editor, props }: any) => {