Anton Tranelis 319f4a5057 refactor(TextView): migrate from react-markdown to TipTap
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>
2026-01-14 09:58:43 +01:00

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>
)
}