hashtag detection

lib/package.json

@@ -127,6 +127,7 @@
     "html-truncate": "^1.2.2",
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
+    "markdown-truncate": "^1.1.1",
     "mdast-util-to-string": "^4.0.0",
     "prosemirror-markdown": "^1.13.2",
     "prosemirror-state": "^1.4.3",
@@ -138,9 +139,14 @@
     "react-inlinesvg": "^4.2.0",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
+    "react-markdown": "^10.1.0",
     "react-photo-album": "^3.0.2",
     "react-router-dom": "^6.23.0",
     "react-toastify": "^9.1.3",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.10",

lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextPreview.tsx

@@ -1,47 +1,62 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import truncate from 'markdown-truncate'
+import Markdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import remarkBreaks from 'remark-breaks'
+import remarkGfm from 'remark-gfm'
+
 import { useAddFilterTag } from '#components/Map/hooks/useFilter'
 import { useTags } from '#components/Map/hooks/useTags'
 import { decodeTag } from '#utils/FormatTags'
 
 import type { Item } from '#types/Item'
-import type { Tag } from '#types/Tag'
 
-const MAX_CHARS = 100
-
-/**
- * @category Map
- */
 export const TextPreview = ({ item }: { item: Item }) => {
-  const tags = useTags()
+  if (!item.text) return null
+  // Text auf ~100 Zeichen stutzen (inkl. Ellipse „…“)
+  const previewRaw = truncate(item.text, { limit: 100, ellipsis: true }) as string
 
-  if (!item.text) return ''
-  const s = item.text
-    .replace(/`([^`]+)`/g, '$1')
-    .replace(/<\/?[^>]+>/g, '') // übrige HTML
-    .replace(/!\[.*?\]\(.*?\)/g, '') // Remove images
-    .replace(/(`{1,3})(.*?)\1/g, '$2') // Remove inline code
-    .replace(/(\*{1,2}|_{1,2})(.*?)\1/g, '$2') // Remove bold and italic
-    .replace(/(#+)\s+(.*)/g, '$2') // Remove headers
-    .replace(/>\s+(.*)/g, '$1') // Remove blockquotes
-    .replace(/^\s*\n/gm, '\n') // Preserve empty lines
-    .replace(/(\r\n|\n|\r)/gm, '\n') // Preserve line breaks
+  const withExtraHashes = previewRaw.replace(
+    /^(#{1,6})\s/gm,
+    (_match: string, hashes: string): string => `${hashes}## `,
+  )
 
-  return s
+  return (
+    <div className='markdown'>
+      <Markdown
+        remarkPlugins={[remarkBreaks, remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        components={{ span: Span }}
+      >
+        {withExtraHashes}
+      </Markdown>
+    </div>
+  )
 }
 
-const HashTag = ({ children, tag, itemId }: { children: string; tag: Tag; itemId?: string }) => {
+export const HashTag = ({ tag }: { tag: string }) => {
+  const tags = useTags()
+  const t = tags.find((t) => t.name === tag.slice(1))
   const addFilterTag = useAddFilterTag()
-
+  if (!t) return <span>{tag}</span>
   return (
     <a
       className='hashtag'
-      style={{ color: tag.color }}
-      key={`${tag.name}-${itemId ?? ''}`}
+      style={{ color: t.color }}
+      key={`${t.name}`}
       onClick={(e) => {
         e.stopPropagation()
-        addFilterTag(tag)
+        addFilterTag(t)
       }}
     >
-      {decodeTag(children)}
+      {decodeTag(tag)}
     </a>
   )
 }
+
+export const Span = (node) => {
+  if (node['data-type'] === 'mention') {
+    return <HashTag tag={node.children} />
+  }
+  return <span {...node}>{node.children}</span>
+}