rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #110 from ksanjeev284/Ordered-List

Browse source 
Add Ordered list to Editor
This commit is contained in:
Badr B 2023-08-24 11:23:25 +02:00 • committed by GitHub
commit 23e5fa0525
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
front/components/Objects/Editor/Editor.tsx
View file

@ -23,6 +23,9 @@ import QuizBlock from "./Extensions/Quiz/QuizBlock";
import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
import Link from "next/link"; import Link from "next/link";
import { getCourseThumbnailMediaDirectory } from "@services/media/media"; import { getCourseThumbnailMediaDirectory } from "@services/media/media";
import { OrderedList } from "@tiptap/extension-ordered-list";
import {ListItem} from '@tiptap/extension-list-item'
interface Editor { interface Editor {
content: string; content: string;
@ -80,6 +83,8 @@ function Editor(props: Editor) {
controls: true, controls: true,
modestBranding: true, modestBranding: true,
}), }),
OrderedList.configure(),
// Register the document with Tiptap // Register the document with Tiptap
// Collaboration.configure({ // Collaboration.configure({
// document: props.ydoc, // document: props.ydoc,
@ -404,6 +409,14 @@ export const EditorContentWrapper = styled.div`
display: block; display: block;
outline: 0px solid transparent; outline: 0px solid transparent;
} }
ul, ol {
padding: 0 1rem;
padding-left: 10px;
list-style-type: decimal;
}
`; `;
export default Editor; export default Editor;

5
front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
View file

@ -1,5 +1,5 @@
import styled from "styled-components"; 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 { AlertCircle, AlertTriangle, FileText, GraduationCap, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react";
import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
@ -39,6 +39,9 @@ export const ToolbarButtons = ({ editor, props }: any) => {
<ToolBtn onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive("strike") ? "is-active" : ""}> <ToolBtn onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive("strike") ? "is-active" : ""}>
<StrikethroughIcon /> <StrikethroughIcon />
</ToolBtn> </ToolBtn>
<ToolBtn onClick={() => editor.chain().focus().toggleOrderedList().run()} className={editor.isActive('orderedList') ? 'is-active' : ''}>
<ListBulletIcon />
</ToolBtn>
<ToolSelect <ToolSelect
onChange={(e) => onChange={(e) =>
editor editor

10
front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx
View file

@ -9,6 +9,7 @@ import ImageBlock from "@components/Objects/Editor/Extensions/Image/ImageBlock";
import VideoBlock from "@components/Objects/Editor/Extensions/Video/VideoBlock"; import VideoBlock from "@components/Objects/Editor/Extensions/Video/VideoBlock";
import MathEquationBlock from "@components/Objects/Editor/Extensions/MathEquation/MathEquationBlock"; import MathEquationBlock from "@components/Objects/Editor/Extensions/MathEquation/MathEquationBlock";
import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock"; import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock";
import { OrderedList } from "@tiptap/extension-ordered-list";
interface Editor { interface Editor {
content: string; content: string;
@ -49,6 +50,9 @@ function Canva(props: Editor) {
controls: true, controls: true,
modestBranding: true, modestBranding: true,
}), }),
OrderedList.configure()
], ],
content: props.content, content: props.content,
@ -101,6 +105,12 @@ h5 {
margin-bottom: 10px; margin-bottom: 10px;
} }
ul, ol {
padding: 0 1rem;
padding-left: 10px;
list-style-type: decimal;
}
&:focus { &:focus {
outline: none !important; outline: none !important;