Untitled
unknown
tsx
a year ago
1.8 kB
9
Indexable
'use client'; import { ToggleTextarea } from '@/components/ToggleTextarea/ToggleTextarea'; import { withTryCatch } from '@/utils/async'; import { useUpdateMyBio } from '@nerdbord/graphql-api'; import { useState } from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; interface BioEditorProps { bio: string; onToggleEdit?(): void; } export const BioEditor = (props: BioEditorProps) => { const [isEditing, setIsEditing] = useState(false); const [bio, setBio] = useState(props.bio); const { updateMyBio } = useUpdateMyBio(); const handleUpdate = () => { if (props.bio === bio) { handleToggleEdit(); return; } withTryCatch(async () => { handleToggleEdit(); await updateMyBio(bio); }, 'Bio updated'); }; const handleToggleEdit = () => { setIsEditing(!isEditing); }; if (!isEditing) { return <BioReader onToggleEdit={handleToggleEdit} bio={bio} />; } return ( <ToggleTextarea value={bio} classNames="resize-none w-full min-h-[373px] rounded bg-white text-gray-600 text-m font-normal leading-[150%] font-inter p-6" placeholder={ 'You can use markdown to format your bio. E.g. use **bold text**.' } onChange={(e) => { setBio(e.currentTarget.value); }} onUpdate={handleUpdate} /> ); }; export const BioReader = (props: BioEditorProps) => { return ( <div onClick={props.onToggleEdit} className="w-full min-h-[220px] md:min-h-[260px] rounded bg-white text-gray-600 font-inter p-6" > <div className="bio-markdown"> <ReactMarkdown remarkPlugins={[remarkGfm]}> {props.bio || 'This user has not written a bio yet.'} </ReactMarkdown> </div> </div> ); };
Editor is loading...
Leave a Comment