diff --git a/app/page.tsx b/app/page.tsx index a732c64..0d39d6e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -442,13 +442,6 @@ export default function Home() { }
-
- { - selectC.map((category:string, index:number)=>{ - return {category} {delCategories(category)}} className="mt-[0.27rem] ml-1 cursor-pointer text-slate-800 hover:text-slate-900"> - }) - } -
+
+ { + selectC.map((category:string, index:number)=>{ + return {category} {delCategories(category)}} className="mt-[0.27rem] ml-1 cursor-pointer text-slate-800 hover:text-slate-900"> + }) + } +
{ - //inserting links - const setLink = useCallback(() => { - const previousUrl = editor.getAttributes('link').href - const url = window.prompt('URL', previousUrl) + //inserting links + const setLink = useCallback(() => { + const previousUrl = editor.getAttributes('link').href + const url = window.prompt('URL', previousUrl) - // cancelled - if (url === null) { - return - } + // cancelled + if (url === null) { + return + } - // empty - if (url === '') { - editor.chain().focus().extendMarkRange('link').unsetLink() - .run() + // empty + if (url === '') { + editor.chain().focus().extendMarkRange('link').unsetLink() + .run() - return - } + return + } + + // update link + editor.chain().focus().extendMarkRange('link').setLink({ href: url }) + .run() + }, [editor]) - // update link - editor.chain().focus().extendMarkRange('link').setLink({ href: url }) - .run() - }, [editor]) + //inserting images through URL + const addImage = () => { + const url = window.prompt('URL') + + if (url) { + editor.chain().focus().setImage({ src: url }).run() + } + } - //inserting images through URL - const addImage = () => { - const url = window.prompt('URL') - if (url) { - editor.chain().focus().setImage({ src: url }).run() + if (!editor) { + return null; } - } - - - if (!editor) { - return null; - } - - return ( -
-
- - - - - - - - - -
- -
- ); + + return ( < + div className = "pb-5 flex items-left px-4 border rounded-lg py-3 mt-4 gap-x-4" > + < + div className = " flex gap-4" > + < + button type = "button" + onClick = { + () => editor.chain().focus().toggleBold().run() } + className = { editor.isActive("bold") ? "is_active" : "" } > + < + FaBold / > + < + /button> < + button type = "button" + onClick = { + () => editor.chain().focus().toggleItalic().run() } + className = { editor.isActive("italic") ? "is_active" : "" } > + < + FaItalic / > + < + /button> < + button type = "button" + onClick = { + () => editor.chain().focus().toggleUnderline().run() } + className = { editor.isActive("underline") ? "is_active" : "" } > + < + FaUnderline / > + < + /button> < + button type = "button" + onClick = { + () => editor.chain().focus().toggleStrike().run() } + className = { editor.isActive("strike") ? "is_active" : "" } > + < + FaStrikethrough / > + < + /button> + + < + button type = "button" + onClick = { setLink } + className = { editor.isActive('link') ? 'is-active' : '' } > + < + IoIosLink / > + < + /button> + + < + button type = "button" + onClick = { addImage } > + < + FaImages / > + < + /button> + + < + /div> + + < + /div> + ); }; // const extensions = [ @@ -138,53 +148,57 @@ const MenuBar = ({ editor }) => { // }) // ]; -export const Tiptap = ({ onChange ,value }) => { - const editor = useEditor({ - extensions: [StarterKit, Underline , - // Placeholder.configure({ - // placeholder: "Write ...", - // placeholderClassName: "text-gray-400", - // emptyNodeText: "Write ...", - // editorProps: { - // attributes: { - // class: "prose rounded-lg border border-input text-black ring-offset-2 disabled:opacity-50 min-h-[10rem] p-4 py-[8rem]", - // }, - // }, - // content: `write ...`, - - // }), - Link.configure({ - openOnClick: true, - autolink: true, +export const Tiptap = ({ onChange, value }) => { + const editor = useEditor({ + extensions: [StarterKit, Underline, + // Placeholder.configure({ + // placeholder: "Write ...", + // placeholderClassName: "text-gray-400", + // emptyNodeText: "Write ...", + // editorProps: { + // attributes: { + // class: "prose rounded-lg border border-input text-black ring-offset-2 disabled:opacity-50 min-h-[10rem] p-4 py-[8rem]", + // }, + // }, + // content: `write ...`, + + // }), + Link.configure({ + openOnClick: true, + autolink: true, + editorProps: { + attributes: { + class: "underline text-blue-500", + }, + }, + }), + Image, + ], + content: ``, + placeholder: `Write ...`, editorProps: { - attributes: { - class: "underline text-blue-500", - }, + attributes: { + class: "prose rounded-lg border border-input ring-offset-2 disabled:opacity-50 min-h-[10rem] p-4 py-[8rem] ", + }, + }, + + + onUpdate: ({ editor }) => { + const html = editor.getHTML(); + // setDescription(html); + onChange(html); + // console.log("HTML", html); }, - }), - Image, - ], - content: ``, - placeholder: `Write ...`, - editorProps: { - attributes: { - class: "prose rounded-lg border border-input ring-offset-2 disabled:opacity-50 min-h-[10rem] p-4 py-[8rem]", - }, - }, - - - onUpdate: ({ editor }) => { - const html = editor.getHTML(); - // setDescription(html); - onChange(html); - // console.log("HTML", html); - }, - }); - - return ( -
- - -
- ); + }); + + return ( < + div className = '' > + < + MenuBar editor = { editor } + /> < + EditorContent editor = { editor } + className = " min-h-[15rem]" / > + < + /div> + ); }; \ No newline at end of file diff --git a/components/ui/select.tsx b/components/ui/select.tsx index cbe5a36..c1270d9 100644 --- a/components/ui/select.tsx +++ b/components/ui/select.tsx @@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef< span]:line-clamp-1", + "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className )} {...props}