Completed Ordered List Function

added Ordered List Function to Editor and Dynamic Canva.
This commit is contained in:
Sanjeev Kumar 2023-08-22 01:04:24 +05:30
parent 0bd6c06987
commit 88d7d516e3
4 changed files with 21 additions and 3 deletions

View file

@ -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

View file

@ -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;

View file

@ -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) => {
<StrikethroughIcon />
</ToolBtn>
<ToolBtn onClick={() => editor.chain().focus().toggleOrderedList().run()} className={editor.isActive('orderedList') ? 'is-active' : ''}>
<ListOrdered />
<ListBulletIcon />
</ToolBtn>
<ToolSelect
onChange={(e) =>

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 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;