Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rich Text Editor #75

Closed
wants to merge 2 commits into from
Closed

Rich Text Editor #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9874afc
init version of rich text editor
zprangon Aug 25, 2024
667c642
update text editor
zprangon Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions apps/jonogon-web-next/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
"dependencies": {
"@formkit/auto-animate": "^0.8.2",
"@heroicons/react": "^2.1.5",
"next": "14.2.5",
"react": "^18",
"react-dom": "^18",
"@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1",
Expand Down Expand Up @@ -45,9 +48,6 @@
"lucide-react": "^0.427.0",
"mobx": "^6.13.1",
"mobx-react-lite": "^4.0.7",
"next": "14.2.5",
"react": "^18",
"react-dom": "^18",
"react-dropzone": "^14.2.3",
"react-icons": "^5.2.1",
"react-markdown": "9.0.1",
Expand All @@ -57,8 +57,12 @@
"tailwindcss-animate": "^1.0.7",
"typescript": "5.5.4",
"use-debounce": "^10.0.2",
"zustand": "4.5.4",
"zod": "3.23.8",
"zustand": "4.5.4"
"react-quill": "^2.0.0",
"quilljs-markdown": "^1.2.0",
"remark-gfm": "^1.0.0",
"rehype-raw": "^7.0.0"
},
"devDependencies": {
"@cloudflare/next-on-pages": "1",
Expand Down
120 changes: 64 additions & 56 deletions apps/jonogon-web-next/src/app/_components/PetitionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,66 +93,74 @@ const PetitionList = () => {
key={i}></div>
);
})
: petitions.slice(0, 32).map((p, i) => {
return (
<Fragment key={p.data.id}>
<PetitionCard
id={p.data.id}
userVote={p.extras.user_vote}
mode={type}
status={p.data.status}
name={p.extras.user.name ?? ''}
title={
p.data.title ?? 'Untitled Petition'
}
attachment={p.data.attachment ?? ''}
date={
new Date(
p.data.submitted_at ??
'1970-01-01',
)
}
target={p.data.target ?? 'Some Ministry'}
key={p.data.id ?? 0}
upvotes={
Number(
p.data.petition_upvote_count,
) ?? 0
}
downvotes={
Number(
p.data.petition_downvote_count,
) ?? 0
}
/>
{type === 'request' &&
sort === 'votes' &&
page === 0 &&
i ===
(process.env.NODE_ENV === 'development'
? 0
: 4) ? (
<div
key={'formalization-line'}
className={
'py-5 text-center text-green-700 flex flex-row items-center relative'
}>
<div
className={
'border-t-2 border-dashed border-t-green-500 w-full absolute'
}></div>
: petitions
.filter((x) => x != null)
.slice(0, 32)
.map((p, i) => {
return (
<Fragment key={p.data.id}>
<PetitionCard
id={p.data.id}
userVote={p.extras.user_vote}
mode={type}
status={p.data.status}
name={p.extras.user.name ?? ''}
title={
p.data.title ??
'Untitled Petition'
}
attachment={p.data.attachment ?? ''}
date={
new Date(
p.data.submitted_at ??
'1970-01-01',
)
}
target={
p.data.target ?? 'Some Ministry'
}
key={p.data.id ?? 0}
upvotes={
Number(
p.data.petition_upvote_count,
) ?? 0
}
downvotes={
Number(
p.data
.petition_downvote_count,
) ?? 0
}
/>
{type === 'request' &&
sort === 'votes' &&
page === 0 &&
i ===
(process.env.NODE_ENV ===
'development'
? 0
: 4) ? (
<div
key={'formalization-line'}
className={
'top-0 pr-4 left-0 bg-background z-[1] font-semibold'
'py-5 text-center text-green-700 flex flex-row items-center relative'
}>
☝️ যেসব দাবি, Formalization-এর
জন্য review করা হবে
<div
className={
'border-t-2 border-dashed border-t-green-500 w-full absolute'
}></div>
<div
className={
'top-0 pr-4 left-0 bg-background z-[1] font-semibold'
}>
☝️ যেসব দাবি, Formalization-এর
জন্য review করা হবে
</div>
</div>
</div>
) : null}
</Fragment>
);
})}
) : null}
</Fragment>
);
})}
</div>
<div className={'py-4'}>
<Pagination>
Expand Down
6 changes: 5 additions & 1 deletion apps/jonogon-web-next/src/app/petitions/[id]/_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {ImageCarousel} from '@/app/petitions/[id]/_components/ImageCarousel';
import {trpc} from '@/trpc/client';
import {useAuthState} from '@/auth/token-manager';
import {useParams, useRouter} from 'next/navigation';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';

export default function Petition() {
const utils = trpc.useUtils();
Expand Down Expand Up @@ -264,7 +266,9 @@ export default function Petition() {
</div>
<ImageCarousel />
{petition?.data.description && (
<Markdown>
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw]}>
{petition.data.description ?? 'No description yet.'}
</Markdown>
)}
Expand Down
40 changes: 33 additions & 7 deletions apps/jonogon-web-next/src/app/petitions/[id]/edit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ import {
} from '@/components/ui/alert-dialog';
import {AutoCompleteInput} from '@/components/ui/input-autocomplete';
import {petitionLocations, petitionTargets} from '@/lib/constants';
const ReactQuill = dynamic(() => import('react-quill'), {ssr: true});

import '@/styles/custom-quill.css';
import 'react-quill/dist/quill.snow.css';
import dynamic from 'next/dynamic';
import Image from 'next/image';

export default function EditPetition() {
const {get: getToken} = useTokenManager();
Expand Down Expand Up @@ -399,7 +405,7 @@ export default function EditPetition() {
className={
'flex justify-center items-center border-4 w-24 h-20 rounded-lg bg-black relative'
}>
<img
<Image
src={attachment.thumbnail!!.replace(
'$CORE_HOSTNAME',
window.location.hostname,
Expand Down Expand Up @@ -436,13 +442,33 @@ export default function EditPetition() {
</div>
<div className={'text-stone-500'}>বিস্তারিত লিখুন</div>
</Label>
<textarea
className={'font-mono p-3 h-48'}
placeholder={'Enter Details Here...'}
<ReactQuill
placeholder="Enter Details Here..."
className={'font-mono min-h-80 text-black rounded-md'}
value={petitionData.description ?? ''}
onChange={(e) =>
handleUpdateData('description', e.target.value)
}></textarea>
onChange={(content) =>
handleUpdateData('description', content)
}
theme="snow"
modules={{
toolbar: [
[{header: [1, 2, false]}],
[
'bold',
'italic',
'underline',
'strike',
'blockquote',
],
[
{list: 'ordered'},
{list: 'bullet'},
{indent: '-1'},
{indent: '+1'},
],
],
}}
/>
</div>
<div className={'flex flex-row space-x-2'}>
<Button
Expand Down
17 changes: 17 additions & 0 deletions apps/jonogon-web-next/src/styles/custom-quill.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/* Style for the Quill toolbar */
.ql-toolbar.ql-snow {
background-color: #fff;
border-bottom: none;
border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
padding: 4px;
}

/* Style for the Quill editor area */
.ql-container {
min-height: 250px;
background-color: #fff;
border-top: none;
border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
padding: 12px;
font-size: 14px;
}
Loading