diff --git a/apps/web/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx b/apps/web/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx index c9496399..1c07b5eb 100644 --- a/apps/web/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx +++ b/apps/web/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx @@ -58,7 +58,18 @@ function Canva(props: Editor) { const editor: any = useEditor({ editable: isEditable, extensions: [ - StarterKit, + StarterKit.configure({ + bulletList: { + HTMLAttributes: { + class: 'bullet-list', + }, + }, + orderedList: { + HTMLAttributes: { + class: 'ordered-list', + }, + }, + }), NoTextInput, // Custom Extensions InfoCallout.configure({ @@ -213,6 +224,13 @@ const CanvaWrapper = styled.div` ol { padding: 0 1rem; padding-left: 20px; + } + + ul { + list-style-type: disc; + } + + ol { list-style-type: decimal; } diff --git a/apps/web/components/Objects/Editor/Editor.tsx b/apps/web/components/Objects/Editor/Editor.tsx index a7071e98..b64e8a31 100644 --- a/apps/web/components/Objects/Editor/Editor.tsx +++ b/apps/web/components/Objects/Editor/Editor.tsx @@ -35,7 +35,6 @@ import { getCourseThumbnailMediaDirectory } from '@services/media/media' import { getLinkExtension } from './EditorConf' import { Link as LinkExtension } from '@tiptap/extension-link' - // Lowlight import { common, createLowlight } from 'lowlight' const lowlight = createLowlight(common) @@ -97,7 +96,18 @@ function Editor(props: Editor) { const editor: any = useEditor({ editable: true, extensions: [ - StarterKit, + StarterKit.configure({ + bulletList: { + HTMLAttributes: { + class: 'bullet-list', + }, + }, + orderedList: { + HTMLAttributes: { + class: 'ordered-list', + }, + }, + }), InfoCallout.configure({ editable: true, }), @@ -580,6 +590,13 @@ export const EditorContentWrapper = styled.div` ol { padding: 0 1rem; padding-left: 20px; + } + + ul { + list-style-type: disc; + } + + ol { list-style-type: decimal; } diff --git a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx index c36871b7..027581e7 100644 --- a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx +++ b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx @@ -31,6 +31,8 @@ import { Tags, User, Video, + List, + ListOrdered, } from 'lucide-react' import { SiYoutube } from '@icons-pack/react-simple-icons' import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip' @@ -39,6 +41,7 @@ import LinkInputTooltip from './LinkInputTooltip' export const ToolbarButtons = ({ editor, props }: any) => { const [showTableMenu, setShowTableMenu] = React.useState(false) + const [showListMenu, setShowListMenu] = React.useState(false) const [showLinkInput, setShowLinkInput] = React.useState(false) const linkButtonRef = React.useRef(null) @@ -46,18 +49,6 @@ export const ToolbarButtons = ({ editor, props }: any) => { return null } - // YouTube extension - const addYoutubeVideo = () => { - const url = prompt('Enter YouTube URL') - - if (url) { - editor.commands.setYoutubeVideo({ - src: url, - width: 640, - height: 480, - }) - } - } const tableOptions = [ { @@ -87,6 +78,33 @@ export const ToolbarButtons = ({ editor, props }: any) => { } ] + const listOptions = [ + { + label: 'Bullet List', + icon: , + action: () => { + if (editor.isActive('bulletList')) { + editor.chain().focus().toggleBulletList().run() + } else { + editor.chain().focus().toggleOrderedList().run() + editor.chain().focus().toggleBulletList().run() + } + } + }, + { + label: 'Ordered List', + icon: , + action: () => { + if (editor.isActive('orderedList')) { + editor.chain().focus().toggleOrderedList().run() + } else { + editor.chain().focus().toggleBulletList().run() + editor.chain().focus().toggleOrderedList().run() + } + } + } + ] + const handleLinkClick = () => { // Store the current selection const { from, to } = editor.state.selection @@ -154,12 +172,32 @@ export const ToolbarButtons = ({ editor, props }: any) => { > - editor.chain().focus().toggleOrderedList().run()} - className={editor.isActive('orderedList') ? 'is-active' : ''} - > - - + + setShowListMenu(!showListMenu)} + className={showListMenu || editor.isActive('bulletList') || editor.isActive('orderedList') ? 'is-active' : ''} + > + + + + {showListMenu && ( + + {listOptions.map((option, index) => ( + { + option.action() + setShowListMenu(false) + }} + className={editor.isActive(option.label === 'Bullet List' ? 'bulletList' : 'orderedList') ? 'is-active' : ''} + > + {option.icon} + {option.label} + + ))} + + )} +