Skip to content

Commit

Permalink
changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@auraticabhi
auraticabhi committed Mar 18, 2024
1 parent 6649bd9 commit e01cd63
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 146 deletions.
14 changes: 7 additions & 7 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,13 +442,6 @@ export default function Home() {
}
</div>
<div>
<div className="flex mb-3">
{
selectC.map((category:string, index:number)=>{
return <span className='bg-slate-300 text-slate-800 rounded-xl p-1 text-sm flex mr-1' key={index}>{category} <span onClick={()=>{delCategories(category)}} className="mt-[0.27rem] ml-1 cursor-pointer text-slate-800 hover:text-slate-900"><LuXCircle /></span></span>
})
}
</div>
<Select value={selectedCategory} onValueChange={handleSelectChange} >
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a Category" />
Expand All @@ -465,6 +458,13 @@ export default function Home() {
</SelectGroup>
</SelectContent>
</Select>
<div className="flex">
{
selectC.map((category:string, index:number)=>{
return <span className='bg-slate-300 text-slate-800 rounded-xl p-1 text-sm flex mr-1 mt-3' key={index}>{category} <span onClick={()=>{delCategories(category)}} className="mt-[0.27rem] ml-1 cursor-pointer text-slate-800 hover:text-slate-900"><LuXCircle /></span></span>
})
}
</div>
</div>
<FormField
control={form.control}
Expand Down
290 changes: 152 additions & 138 deletions components/TipTap.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

'use client'

import React, { useCallback } from "react";
Expand All @@ -16,111 +15,122 @@ import OrderedList from "@tiptap/extension-ordered-list";
import TextStyle from "@tiptap/extension-text-style";
import { Color } from "@tiptap/extension-color";



import {
FaBold,
FaHeading,
FaItalic,
FaListOl,
FaListUl,
FaQuoteLeft,
FaRedo,
FaStrikethrough,
FaUnderline,
FaUndo,
FaBold,
FaHeading,
FaItalic,
FaListOl,
FaListUl,
FaQuoteLeft,
FaRedo,
FaStrikethrough,
FaUnderline,
FaUndo,
} from "react-icons/fa";
import { IoIosLink } from "react-icons/io";
import { FaImages } from "react-icons/fa6";

const MenuBar = ({ editor }) => {

//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 (
<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>
);

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 = [
Expand All @@ -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 (
<div className="">
<MenuBar editor={editor} />
<EditorContent editor={editor} className=" min-h-[15rem] rounded-lg" />
</div>
);
});

return ( <
div className = '' >
<
MenuBar editor = { editor }
/> <
EditorContent editor = { editor }
className = " min-h-[15rem]" / >
<
/div>
);
};
2 changes: 1 addition & 1 deletion components/ui/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"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-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>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}
Expand Down

0 comments on commit e01cd63

Please sign in to comment.