diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextViewStatic.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextViewStatic.tsx index db02c64a..591b3367 100644 --- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextViewStatic.tsx +++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextViewStatic.tsx @@ -1,7 +1,9 @@ -import { useRef, useEffect, useMemo } from 'react' +import { useEffect, useMemo, useRef } from 'react' import { useNavigate } from 'react-router-dom' import { useAddFilterTag } from '#components/Map/hooks/useFilter' +import { useGetItemColor } from '#components/Map/hooks/useItemColor' +import { useItems } from '#components/Map/hooks/useItems' import { useTags } from '#components/Map/hooks/useTags' import { preprocessMarkdown, @@ -36,6 +38,8 @@ export const TextViewStatic = ({ } const tags = useTags() + const items = useItems() + const getItemColor = useGetItemColor() const addFilterTag = useAddFilterTag() const navigate = useNavigate() const containerRef = useRef(null) @@ -65,8 +69,8 @@ export const TextViewStatic = ({ const html = useMemo(() => { if (!innerText) return '' const processed = preprocessMarkdown(innerText) - return simpleMarkdownToHtml(processed, tags) - }, [innerText, tags]) + return simpleMarkdownToHtml(processed, tags, { items, getItemColor }) + }, [innerText, tags, items, getItemColor]) // Handle clicks for internal navigation and hashtags useEffect(() => { diff --git a/lib/src/Components/TipTap/utils/simpleMarkdownToHtml.tsx b/lib/src/Components/TipTap/utils/simpleMarkdownToHtml.tsx index 56345634..23cd004c 100644 --- a/lib/src/Components/TipTap/utils/simpleMarkdownToHtml.tsx +++ b/lib/src/Components/TipTap/utils/simpleMarkdownToHtml.tsx @@ -1,5 +1,6 @@ import { decodeTag } from '#utils/FormatTags' +import type { Item } from '#types/Item' import type { Tag } from '#types/Tag' /** @@ -7,7 +8,14 @@ import type { Tag } from '#types/Tag' * Handles basic markdown syntax without requiring TipTap. * Used for lightweight popup/card previews. */ -export function simpleMarkdownToHtml(text: string, tags: Tag[]): string { +export function simpleMarkdownToHtml( + text: string, + tags: Tag[], + options?: { + items?: Item[] + getItemColor?: (item: Item | undefined, fallback?: string) => string + }, +): string { if (!text) return '' let html = text @@ -44,15 +52,20 @@ export function simpleMarkdownToHtml(text: string, tags: Tag[]): string { const tag = tags.find((t) => t.name.toLowerCase() === label.toLowerCase()) const color = tag?.color ?? 'inherit' const decoded = decodeTag(`#${tagText}`) - return `${decoded}` + return `${decoded}` }, ) - // Convert item-mention spans to styled spans + // Convert item-mention spans to styled links with correct colors html = html.replace( /@([^<]+)<\/span>/g, (_, label: string, id: string) => { - return `@${label}` + // Find item and get its color + const item = options?.items?.find((i) => i.id === id) + const color = options?.getItemColor + ? options.getItemColor(item, 'var(--color-primary, #3b82f6)') + : (item?.color ?? 'var(--color-primary, #3b82f6)') + return `@${label}` }, )