mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2026-02-06 09:55:47 +00:00
Replace react-markdown with TipTap read-only editor for TextView component. Changes: - Create TipTap extensions folder with custom Hashtag and VideoEmbed nodes - Hashtag extension: clickable hashtags with tag colors and filter integration - VideoEmbed extension: YouTube and Rumble iframe embeds - Add preprocessMarkdown utility for URL, email, video link, and hashtag conversion - Migrate TextView to use TipTap with StarterKit, Markdown, Link extensions - Remove unused itemId prop from TextView and all callers Known issue: Popup buttons may not work correctly when TextView has content due to Leaflet's handling of contenteditable elements. To be fixed in follow-up. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
|
import { TextView } from '#components/Map/Subcomponents/ItemPopupComponents'
|
|
import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView'
|
|
import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
|
|
|
|
import type { Item } from '#types/Item'
|
|
|
|
export const OnepagerView = ({ item }: { item: Item }) => {
|
|
return (
|
|
<div className='tw:h-full tw:overflow-y-auto fade'>
|
|
<GroupSubHeaderView
|
|
item={item}
|
|
shareBaseUrl={`https://www.wuerdekompass.org/aktivitaeten/gruppensuche/#/gruppe/${item.slug}`}
|
|
/>
|
|
{item.user_created?.first_name && <ContactInfoView heading='Du hast Fragen?' item={item} />}
|
|
{/* Description Section */}
|
|
<div className='tw:my-10 tw:mt-2 tw:px-6 tw:text-sm '>
|
|
<TextView rawText={item.text ?? 'Keine Beschreibung vorhanden'} />
|
|
</div>
|
|
{/* Next Appointment Section */}
|
|
{item.next_appointment && (
|
|
<div className='tw:my-10 tw:px-6'>
|
|
<h2 className='tw:text-lg tw:font-semibold'>Nächste Termine</h2>
|
|
<div className='tw:mt-2 tw:text-sm'>
|
|
<TextView rawText={item.next_appointment} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
;{/* Relations Section */}
|
|
{/* {d.relations && ( */}
|
|
{/* <div className="tw:my-10 tw:px-6"> */}
|
|
{/* <h2 className="tw:text-lg tw:font-semibold tw:mb-4">Projekte</h2> */}
|
|
{/* {d.relations.map((project, index) => ( */}
|
|
{/* <RelationCard */}
|
|
{/* key={index} */}
|
|
{/* title={project.title} */}
|
|
{/* description={project.description} */}
|
|
{/* imageSrc={project.imageSrc} */}
|
|
{/* /> */}
|
|
{/* ))} */}
|
|
{/* </div> */}
|
|
{/* )} */}
|
|
</div>
|
|
)
|
|
}
|