@@ -96,7 +103,7 @@ export default function ReplyNote({
/>
)}
{show ? (
-
+}
+
+/**
+ * Hook for parsing content with automatic detection and processing
+ */
+export function useContentParser(
+ content: string,
+ options: UseContentParserOptions = {}
+): UseContentParserReturn {
+ const { autoParse = true, ...parseOptions } = options
+ const [parsedContent, setParsedContent] = useState(null)
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const parse = async () => {
+ if (!content.trim()) {
+ setParsedContent(null)
+ return
+ }
+
+ try {
+ setIsLoading(true)
+ setError(null)
+ const result = await contentParserService.parseContent(content, parseOptions)
+ setParsedContent(result)
+ } catch (err) {
+ setError(err instanceof Error ? err : new Error('Unknown parsing error'))
+ setParsedContent(null)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ useEffect(() => {
+ if (autoParse) {
+ parse()
+ }
+ }, [content, autoParse, JSON.stringify(parseOptions)])
+
+ return {
+ parsedContent,
+ isLoading,
+ error,
+ parse
+ }
+}
+
+/**
+ * Hook for parsing Nostr event fields
+ */
+export function useEventFieldParser(
+ event: Event,
+ field: 'content' | 'title' | 'summary' | 'description',
+ options: Omit = {}
+): UseContentParserReturn {
+ const [parsedContent, setParsedContent] = useState(null)
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const { autoParse = true, ...parseOptions } = options
+
+ const parse = async () => {
+ try {
+ setIsLoading(true)
+ setError(null)
+ const result = await contentParserService.parseEventField(event, field, parseOptions)
+ setParsedContent(result)
+ } catch (err) {
+ setError(err instanceof Error ? err : new Error('Unknown parsing error'))
+ setParsedContent(null)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ useEffect(() => {
+ if (autoParse) {
+ parse()
+ }
+ }, [event.id, field, autoParse, JSON.stringify(parseOptions)])
+
+ return {
+ parsedContent,
+ isLoading,
+ error,
+ parse
+ }
+}
+
+/**
+ * Hook for parsing multiple event fields at once
+ */
+export function useEventFieldsParser(
+ event: Event,
+ fields: Array<'content' | 'title' | 'summary' | 'description'>,
+ options: Omit = {}
+) {
+ const [parsedFields, setParsedFields] = useState>({})
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const { autoParse = true, ...parseOptions } = options
+
+ const parse = async () => {
+ try {
+ setIsLoading(true)
+ setError(null)
+
+ const results: Record = {}
+
+ for (const field of fields) {
+ const result = await contentParserService.parseEventField(event, field, parseOptions)
+ results[field] = result
+ }
+
+ setParsedFields(results)
+ } catch (err) {
+ setError(err instanceof Error ? err : new Error('Unknown parsing error'))
+ setParsedFields({})
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ useEffect(() => {
+ if (autoParse) {
+ parse()
+ }
+ }, [event.id, JSON.stringify(fields), autoParse, JSON.stringify(parseOptions)])
+
+ return {
+ parsedFields,
+ isLoading,
+ error,
+ parse
+ }
+}
diff --git a/src/lib/article-media.ts b/src/lib/article-media.ts
new file mode 100644
index 0000000..12f50c4
--- /dev/null
+++ b/src/lib/article-media.ts
@@ -0,0 +1,79 @@
+import { getImetaInfosFromEvent } from './event'
+import { TImetaInfo } from '@/types'
+import { Event } from 'nostr-tools'
+
+/**
+ * Extract all media URLs from an article event
+ */
+export function extractArticleMedia(event: Event): TImetaInfo[] {
+ const media: TImetaInfo[] = []
+ const seenUrls = new Set()
+
+ // Extract from imeta tags
+ const imetaInfos = getImetaInfosFromEvent(event)
+ imetaInfos.forEach(imeta => {
+ if (!seenUrls.has(imeta.url)) {
+ seenUrls.add(imeta.url)
+ media.push(imeta)
+ }
+ })
+
+ // Extract from metadata tags
+ const imageTag = event.tags.find(tag => tag[0] === 'image')?.[1]
+ if (imageTag && !seenUrls.has(imageTag)) {
+ seenUrls.add(imageTag)
+ media.push({
+ url: imageTag,
+ pubkey: event.pubkey
+ })
+ }
+
+ // Extract URLs from content (image/video extensions)
+ const contentUrls = extractUrlsFromContent(event.content)
+ contentUrls.forEach(url => {
+ if (!seenUrls.has(url)) {
+ seenUrls.add(url)
+ media.push({
+ url,
+ pubkey: event.pubkey
+ })
+ }
+ })
+
+ return media
+}
+
+/**
+ * Extract URLs from content that look like media files
+ */
+function extractUrlsFromContent(content: string): string[] {
+ const urls: string[] = []
+
+ // Match URLs in content
+ const urlRegex = /https?:\/\/[^\s<>"']+/g
+ const matches = content.match(urlRegex) || []
+
+ matches.forEach(url => {
+ try {
+ const urlObj = new URL(url)
+ const pathname = urlObj.pathname.toLowerCase()
+
+ // Check if it's a media file
+ const mediaExtensions = [
+ '.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.tiff',
+ '.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.flv',
+ '.mp3', '.wav', '.flac', '.aac', '.m4a'
+ ]
+
+ const isMediaFile = mediaExtensions.some(ext => pathname.endsWith(ext))
+
+ if (isMediaFile) {
+ urls.push(url)
+ }
+ } catch {
+ // Invalid URL, skip
+ }
+ })
+
+ return urls
+}
diff --git a/src/lib/markdown-cleanup.ts b/src/lib/markdown-cleanup.ts
new file mode 100644
index 0000000..b19d830
--- /dev/null
+++ b/src/lib/markdown-cleanup.ts
@@ -0,0 +1,73 @@
+/**
+ * Markdown cleanup utility for leftover markdown syntax after Asciidoc rendering
+ */
+
+export function cleanupMarkdown(html: string): string {
+ let cleaned = html
+
+ // Clean up markdown image syntax: 
+ cleaned = cleaned.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, url) => {
+ const altText = alt || ''
+ return `
`
+ })
+
+ // Clean up markdown link syntax: [text](url)
+ cleaned = cleaned.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
+ // Check if it's already an HTML link
+ if (cleaned.includes(`href="${url}"`)) {
+ return _match
+ }
+ return `${text} `
+ })
+
+ // Clean up markdown table syntax
+ cleaned = cleanupMarkdownTables(cleaned)
+
+ return cleaned
+}
+
+function cleanupMarkdownTables(html: string): string {
+ // Simple markdown table detection and conversion
+ const tableRegex = /(\|.*\|[\r\n]+\|[\s\-\|]*[\r\n]+(\|.*\|[\r\n]+)*)/g
+
+ return html.replace(tableRegex, (match) => {
+ const lines = match.trim().split('\n').filter(line => line.trim())
+ if (lines.length < 2) return match
+
+ const headerRow = lines[0]
+ const separatorRow = lines[1]
+ const dataRows = lines.slice(2)
+
+ // Check if it's actually a table (has separator row with dashes)
+ if (!separatorRow.includes('-')) return match
+
+ const headers = headerRow.split('|').map(cell => cell.trim()).filter(cell => cell)
+ const rows = dataRows.map(row =>
+ row.split('|').map(cell => cell.trim()).filter(cell => cell)
+ )
+
+ let tableHtml = '\n'
+
+ // Header
+ tableHtml += ' \n
'
+
+ return tableHtml
+ })
+}
diff --git a/src/lib/markup-detection.ts b/src/lib/markup-detection.ts
new file mode 100644
index 0000000..8bf333b
--- /dev/null
+++ b/src/lib/markup-detection.ts
@@ -0,0 +1,100 @@
+/**
+ * Markup detection and processing utilities
+ */
+
+export type MarkupType = 'asciidoc' | 'advanced-markdown' | 'basic-markdown' | 'plain-text'
+
+/**
+ * Detect the type of markup used in content
+ */
+export function detectMarkupType(content: string, eventKind?: number): MarkupType {
+ // Publications and wikis use AsciiDoc
+ if (eventKind === 30040 || eventKind === 30041 || eventKind === 30818) {
+ return 'asciidoc'
+ }
+
+ // Check for AsciiDoc syntax patterns
+ const asciidocPatterns = [
+ /^=+\s/, // Headers: = Title, == Section
+ /^\*+\s/, // Lists: * item
+ /^\.+\s/, // Lists: . item
+ /^\[\[/, // Cross-references: [[ref]]
+ /^<>
+ /^include::/, // Includes: include::file[]
+ /^image::/, // Images: image::url[alt,width]
+ /^link:/, // Links: link:url[text]
+ /^footnote:/, // Footnotes: footnote:[text]
+ /^NOTE:/, // Admonitions: NOTE:, TIP:, WARNING:, etc.
+ /^TIP:/,
+ /^WARNING:/,
+ /^IMPORTANT:/,
+ /^CAUTION:/,
+ /^\[source,/, // Source blocks: [source,javascript]
+ /^----/, // Delimited blocks: ----, ++++, etc.
+ /^\+\+\+\+/,
+ /^\|\|/, // Tables: || cell ||
+ /^\[\[.*\]\]/, // Wikilinks: [[NIP-54]]
+ ]
+
+ const hasAsciidocSyntax = asciidocPatterns.some(pattern => pattern.test(content.trim()))
+ if (hasAsciidocSyntax) {
+ return 'asciidoc'
+ }
+
+ // Check for advanced Markdown features
+ const advancedMarkdownPatterns = [
+ /```[\s\S]*?```/, // Code blocks
+ /`[^`]+`/, // Inline code
+ /^\|.*\|.*\|/, // Tables
+ /\[\^[\w\d]+\]/, // Footnotes: [^1]
+ /\[\^[\w\d]+\]:/, // Footnote references: [^1]:
+ /\[\[[\w\-\s]+\]\]/, // Wikilinks: [[NIP-54]]
+ ]
+
+ const hasAdvancedMarkdown = advancedMarkdownPatterns.some(pattern => pattern.test(content))
+ if (hasAdvancedMarkdown) {
+ return 'advanced-markdown'
+ }
+
+ // Check for basic Markdown features
+ const basicMarkdownPatterns = [
+ /^#+\s/, // Headers: # Title
+ /^\*\s/, // Lists: * item
+ /^\d+\.\s/, // Ordered lists: 1. item
+ /\[.*?\]\(.*?\)/, // Links: [text](url)
+ /!\[.*?\]\(.*?\)/, // Images: 
+ /^\>\s/, // Blockquotes: > text
+ /\*.*?\*/, // Bold: *text*
+ /_.*?_/, // Italic: _text_
+ /~.*?~/, // Strikethrough: ~text~
+ /#[\w]+/, // Hashtags: #hashtag
+ /:[\w]+:/, // Emoji: :smile:
+ ]
+
+ const hasBasicMarkdown = basicMarkdownPatterns.some(pattern => pattern.test(content))
+ if (hasBasicMarkdown) {
+ return 'basic-markdown'
+ }
+
+ return 'plain-text'
+}
+
+/**
+ * Get the appropriate CSS classes for the detected markup type
+ */
+export function getMarkupClasses(markupType: MarkupType): string {
+ const baseClasses = "prose prose-zinc max-w-none dark:prose-invert break-words"
+
+ switch (markupType) {
+ case 'asciidoc':
+ return `${baseClasses} asciidoc-content`
+ case 'advanced-markdown':
+ return `${baseClasses} markdown-content advanced`
+ case 'basic-markdown':
+ return `${baseClasses} markdown-content basic`
+ case 'plain-text':
+ return `${baseClasses} plain-text`
+ default:
+ return baseClasses
+ }
+}
diff --git a/src/services/content-parser.service.ts b/src/services/content-parser.service.ts
new file mode 100644
index 0000000..802b2da
--- /dev/null
+++ b/src/services/content-parser.service.ts
@@ -0,0 +1,640 @@
+/**
+ * Comprehensive content parsing service for all Nostr content fields
+ * Supports AsciiDoc, Advanced Markdown, Basic Markdown, and LaTeX
+ */
+
+import { detectMarkupType, getMarkupClasses, MarkupType } from '@/lib/markup-detection'
+import { Event } from 'nostr-tools'
+import { getImetaInfosFromEvent } from '@/lib/event'
+import { URL_REGEX } from '@/constants'
+import { TImetaInfo } from '@/types'
+
+export interface ParsedContent {
+ html: string
+ markupType: MarkupType
+ cssClasses: string
+ hasMath: boolean
+ media: TImetaInfo[]
+ links: Array<{ url: string; text: string; isExternal: boolean }>
+ hashtags: string[]
+ nostrLinks: Array<{ type: 'npub' | 'nprofile' | 'nevent' | 'naddr' | 'note'; id: string; text: string }>
+}
+
+export interface ParseOptions {
+ eventKind?: number
+ field?: 'content' | 'title' | 'summary' | 'description'
+ maxWidth?: string
+ enableMath?: boolean
+ enableSyntaxHighlighting?: boolean
+}
+
+class ContentParserService {
+ private asciidoctor: any = null
+ private isAsciidoctorLoaded = false
+
+ /**
+ * Initialize AsciiDoctor (lazy loading)
+ */
+ private async loadAsciidoctor() {
+ if (this.isAsciidoctorLoaded) return this.asciidoctor
+
+ try {
+ const Asciidoctor = await import('@asciidoctor/core')
+ this.asciidoctor = Asciidoctor.default()
+ this.isAsciidoctorLoaded = true
+ return this.asciidoctor
+ } catch (error) {
+ console.warn('Failed to load AsciiDoctor:', error)
+ return null
+ }
+ }
+
+ /**
+ * Parse content with appropriate markup processor
+ */
+ async parseContent(
+ content: string,
+ options: ParseOptions = {},
+ event?: Event
+ ): Promise {
+ const {
+ eventKind,
+ enableMath = true,
+ enableSyntaxHighlighting = true
+ } = options
+
+ // Detect markup type
+ const markupType = detectMarkupType(content, eventKind)
+ const cssClasses = getMarkupClasses(markupType)
+
+ // Extract all content elements
+ const media = this.extractAllMedia(content, event)
+ const links = this.extractLinks(content)
+ const hashtags = this.extractHashtags(content)
+ const nostrLinks = this.extractNostrLinks(content)
+
+ // Check for LaTeX math
+ const hasMath = enableMath && this.hasMathContent(content)
+
+ let html = ''
+ let processedContent = content
+
+ try {
+ switch (markupType) {
+ case 'asciidoc':
+ html = await this.parseAsciidoc(content, { enableMath, enableSyntaxHighlighting })
+ break
+
+ case 'advanced-markdown':
+ processedContent = this.preprocessAdvancedMarkdown(content)
+ html = await this.parseAdvancedMarkdown(processedContent, { enableMath, enableSyntaxHighlighting })
+ break
+
+ case 'basic-markdown':
+ processedContent = this.preprocessBasicMarkdown(content)
+ html = await this.parseBasicMarkdown(processedContent)
+ break
+
+ case 'plain-text':
+ default:
+ html = this.parsePlainText(content)
+ break
+ }
+ } catch (error) {
+ console.error('Content parsing error:', error)
+ // Fallback to plain text
+ html = this.parsePlainText(content)
+ }
+
+ return {
+ html,
+ markupType,
+ cssClasses,
+ hasMath,
+ media,
+ links,
+ hashtags,
+ nostrLinks
+ }
+ }
+
+ /**
+ * Parse AsciiDoc content
+ */
+ private async parseAsciidoc(content: string, options: { enableMath: boolean; enableSyntaxHighlighting: boolean }): Promise {
+ const asciidoctor = await this.loadAsciidoctor()
+ if (!asciidoctor) {
+ return this.parsePlainText(content)
+ }
+
+ try {
+ const result = asciidoctor.convert(content, {
+ safe: 'safe',
+ backend: 'html5',
+ doctype: 'article',
+ attributes: {
+ 'showtitle': true,
+ 'sectanchors': true,
+ 'sectlinks': true,
+ 'source-highlighter': options.enableSyntaxHighlighting ? 'highlight.js' : 'none',
+ 'stem': options.enableMath ? 'latexmath' : 'none'
+ }
+ })
+
+ const htmlString = typeof result === 'string' ? result : result.toString()
+
+ // Clean up any leftover markdown syntax
+ return this.cleanupMarkdown(htmlString)
+ } catch (error) {
+ console.error('AsciiDoc parsing error:', error)
+ return this.parsePlainText(content)
+ }
+ }
+
+ /**
+ * Parse advanced Markdown content
+ */
+ private async parseAdvancedMarkdown(content: string, _options: { enableMath: boolean; enableSyntaxHighlighting: boolean }): Promise {
+ // This will be handled by react-markdown with plugins
+ // Return the processed content for react-markdown to handle
+ return content
+ }
+
+ /**
+ * Parse basic Markdown content
+ */
+ private parseBasicMarkdown(content: string): string {
+ // Basic markdown processing
+ let processed = content
+
+ // Headers
+ processed = processed.replace(/^### (.*$)/gim, '$1')
+
+ // Links and images
+ processed = this.processLinks(processed)
+ processed = this.processImages(processed)
+
+ // Lists
+ processed = this.processLists(processed)
+
+ // Blockquotes
+ processed = processed.replace(/^> (.*$)/gim, '`
+ })
+ }
+
+ /**
+ * Process markdown lists
+ */
+ private processLists(content: string): string {
+ // Unordered lists
+ content = content.replace(/^[\s]*\* (.+)$/gm, '$1 ')
+ content = content.replace(/(.*<\/li>)/s, ' $1 ')
+ content = content.replace(/(.*<\/li>)/s, '`
+ })
+
+ // Clean up markdown link syntax: [text](url)
+ cleaned = cleaned.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
+ // Check if it's already an HTML link
+ if (cleaned.includes(`href="${url}"`)) {
+ return _match
+ }
+ return `${text} `
+ })
+
+ // Clean up markdown table syntax
+ cleaned = this.cleanupMarkdownTables(cleaned)
+
+ return cleaned
+ }
+
+ /**
+ * Clean up markdown tables
+ */
+ private cleanupMarkdownTables(html: string): string {
+ const tableRegex = /(\|.*\|[\r\n]+\|[\s\-\|]*[\r\n]+(\|.*\|[\r\n]+)*)/g
+
+ return html.replace(tableRegex, (match) => {
+ const lines = match.trim().split('\n').filter(line => line.trim())
+ if (lines.length < 2) return match
+
+ const headerRow = lines[0]
+ const separatorRow = lines[1]
+ const dataRows = lines.slice(2)
+
+ // Check if it's actually a table (has separator row with dashes)
+ if (!separatorRow.includes('-')) return match
+
+ const headers = headerRow.split('|').map(cell => cell.trim()).filter(cell => cell)
+ const rows = dataRows.map(row =>
+ row.split('|').map(cell => cell.trim()).filter(cell => cell)
+ )
+
+ let tableHtml = '\n'
+
+ // Header
+ tableHtml += ' \n
'
+
+ return tableHtml
+ })
+ }
+
+ /**
+ * Extract all media from content and event
+ */
+ private extractAllMedia(content: string, event?: Event): TImetaInfo[] {
+ const media: TImetaInfo[] = []
+ const seenUrls = new Set()
+
+ // 1. Extract from imeta tags if event is provided
+ if (event) {
+ const imetaMedia = getImetaInfosFromEvent(event)
+ imetaMedia.forEach(item => {
+ if (!seenUrls.has(item.url)) {
+ media.push(item)
+ seenUrls.add(item.url)
+ }
+ })
+ }
+
+ // 2. Extract from markdown images: 
+ const imageMatches = content.match(/!\[[^\]]*\]\(([^)]+)\)/g) || []
+ imageMatches.forEach(match => {
+ const url = match.match(/!\[[^\]]*\]\(([^)]+)\)/)?.[1]
+ if (url && !seenUrls.has(url)) {
+ const isVideo = /\.(mp4|webm|ogg)$/i.test(url)
+ media.push({
+ url,
+ pubkey: event?.pubkey || '',
+ m: isVideo ? 'video/*' : 'image/*'
+ })
+ seenUrls.add(url)
+ }
+ })
+
+ // 3. Extract from asciidoc images: image::url[alt,width]
+ const asciidocImageMatches = content.match(/image::([^\[]+)\[/g) || []
+ asciidocImageMatches.forEach(match => {
+ const url = match.match(/image::([^\[]+)\[/)?.[1]
+ if (url && !seenUrls.has(url)) {
+ const isVideo = /\.(mp4|webm|ogg)$/i.test(url)
+ media.push({
+ url,
+ pubkey: event?.pubkey || '',
+ m: isVideo ? 'video/*' : 'image/*'
+ })
+ seenUrls.add(url)
+ }
+ })
+
+ // 4. Extract raw URLs from content
+ const rawUrls = content.match(URL_REGEX) || []
+ rawUrls.forEach(url => {
+ if (!seenUrls.has(url)) {
+ const isImage = /\.(jpeg|jpg|png|gif|webp|svg)$/i.test(url)
+ const isVideo = /\.(mp4|webm|ogg)$/i.test(url)
+ if (isImage || isVideo) {
+ media.push({
+ url,
+ pubkey: event?.pubkey || '',
+ m: isVideo ? 'video/*' : 'image/*'
+ })
+ seenUrls.add(url)
+ }
+ }
+ })
+
+ return media
+ }
+
+ /**
+ * Extract all links from content
+ */
+ private extractLinks(content: string): Array<{ url: string; text: string; isExternal: boolean }> {
+ const links: Array<{ url: string; text: string; isExternal: boolean }> = []
+ const seenUrls = new Set()
+
+ // Extract markdown links: [text](url)
+ const markdownLinks = content.match(/\[([^\]]+)\]\(([^)]+)\)/g) || []
+ markdownLinks.forEach(_match => {
+ const linkMatch = _match.match(/\[([^\]]+)\]\(([^)]+)\)/)
+ if (linkMatch) {
+ const [, text, url] = linkMatch
+ if (!seenUrls.has(url)) {
+ links.push({
+ url,
+ text,
+ isExternal: this.isExternalUrl(url)
+ })
+ seenUrls.add(url)
+ }
+ }
+ })
+
+ // Extract asciidoc links: link:url[text]
+ const asciidocLinks = content.match(/link:([^\[]+)\[([^\]]+)\]/g) || []
+ asciidocLinks.forEach(_match => {
+ const linkMatch = _match.match(/link:([^\[]+)\[([^\]]+)\]/)
+ if (linkMatch) {
+ const [, url, text] = linkMatch
+ if (!seenUrls.has(url)) {
+ links.push({
+ url,
+ text,
+ isExternal: this.isExternalUrl(url)
+ })
+ seenUrls.add(url)
+ }
+ }
+ })
+
+ // Extract raw URLs
+ const rawUrls = content.match(URL_REGEX) || []
+ rawUrls.forEach(url => {
+ if (!seenUrls.has(url) && !this.isNostrUrl(url)) {
+ links.push({
+ url,
+ text: url,
+ isExternal: this.isExternalUrl(url)
+ })
+ seenUrls.add(url)
+ }
+ })
+
+ return links
+ }
+
+ /**
+ * Extract hashtags from content
+ */
+ private extractHashtags(content: string): string[] {
+ const hashtags: string[] = []
+ const seenTags = new Set()
+
+ // Extract hashtags: #hashtag
+ const hashtagMatches = content.match(/#([a-zA-Z0-9_]+)/g) || []
+ hashtagMatches.forEach(_match => {
+ const tag = _match.substring(1) // Remove #
+ if (!seenTags.has(tag)) {
+ hashtags.push(tag)
+ seenTags.add(tag)
+ }
+ })
+
+ return hashtags
+ }
+
+ /**
+ * Extract Nostr links from content
+ */
+ private extractNostrLinks(content: string): Array<{ type: 'npub' | 'nprofile' | 'nevent' | 'naddr' | 'note'; id: string; text: string }> {
+ const nostrLinks: Array<{ type: 'npub' | 'nprofile' | 'nevent' | 'naddr' | 'note'; id: string; text: string }> = []
+
+ // Extract nostr: prefixed links
+ const nostrMatches = content.match(/nostr:([a-z0-9]+[a-z0-9]{6,})/g) || []
+ nostrMatches.forEach(_match => {
+ const id = _match.substring(6) // Remove 'nostr:'
+ const type = this.getNostrType(id)
+ if (type) {
+ nostrLinks.push({
+ type,
+ id,
+ text: _match
+ })
+ }
+ })
+
+ // Extract raw nostr identifiers
+ const rawNostrMatches = content.match(/([a-z0-9]+[a-z0-9]{6,})/g) || []
+ rawNostrMatches.forEach(_match => {
+ const type = this.getNostrType(_match)
+ if (type && !nostrLinks.some(link => link.id === _match)) {
+ nostrLinks.push({
+ type,
+ id: _match,
+ text: _match
+ })
+ }
+ })
+
+ return nostrLinks
+ }
+
+ /**
+ * Check if URL is external
+ */
+ private isExternalUrl(url: string): boolean {
+ try {
+ const urlObj = new URL(url)
+ return urlObj.hostname !== window.location.hostname
+ } catch {
+ return true
+ }
+ }
+
+ /**
+ * Check if URL is a Nostr URL
+ */
+ private isNostrUrl(url: string): boolean {
+ return url.startsWith('nostr:') || this.getNostrType(url) !== null
+ }
+
+ /**
+ * Get Nostr identifier type
+ */
+ private getNostrType(id: string): 'npub' | 'nprofile' | 'nevent' | 'naddr' | 'note' | null {
+ if (id.startsWith('npub')) return 'npub'
+ if (id.startsWith('nprofile')) return 'nprofile'
+ if (id.startsWith('nevent')) return 'nevent'
+ if (id.startsWith('naddr')) return 'naddr'
+ if (id.startsWith('note')) return 'note'
+ return null
+ }
+
+ /**
+ * Check if content has LaTeX math
+ */
+ private hasMathContent(content: string): boolean {
+ // Check for inline math: $...$ or \(...\)
+ const inlineMath = /\$[^$]+\$|\\\([^)]+\\\)/.test(content)
+
+ // Check for block math: $$...$$ or \[...\]
+ const blockMath = /\$\$[\s\S]*?\$\$|\\\[[\s\S]*?\\\]/.test(content)
+
+ return inlineMath || blockMath
+ }
+
+ /**
+ * Parse content for a specific Nostr event field
+ */
+ async parseEventField(
+ event: Event,
+ field: 'content' | 'title' | 'summary' | 'description',
+ options: Omit = {}
+ ): Promise {
+ const content = this.getFieldContent(event, field)
+ if (!content) {
+ return {
+ html: '',
+ markupType: 'plain-text',
+ cssClasses: getMarkupClasses('plain-text'),
+ hasMath: false,
+ media: [],
+ links: [],
+ hashtags: [],
+ nostrLinks: []
+ }
+ }
+
+ return this.parseContent(content, {
+ ...options,
+ eventKind: event.kind,
+ field
+ }, event)
+ }
+
+ /**
+ * Get content from specific event field
+ */
+ private getFieldContent(event: Event, field: 'content' | 'title' | 'summary' | 'description'): string {
+ switch (field) {
+ case 'content':
+ return event.content
+ case 'title':
+ return event.tags.find(tag => tag[0] === 'title')?.[1] || ''
+ case 'summary':
+ return event.tags.find(tag => tag[0] === 'summary')?.[1] || ''
+ case 'description':
+ return event.tags.find(tag => tag[0] === 'd')?.[1] || ''
+ default:
+ return ''
+ }
+ }
+}
+
+// Export singleton instance
+export const contentParserService = new ContentParserService()
+export default contentParserService
+ {nodes.map((node, index) => {
+ if (node.type === 'text') {
+ return node.data
+ }
+ if (node.type === 'image' || node.type === 'images') {
+ const start = imageIndex
+ const end = imageIndex + (Array.isArray(node.data) ? node.data.length : 1)
+ imageIndex = end
+ logger.debug('[Content] Creating ImageGallery:', { nodeType: node.type, start, end, totalImages: allImages.length, nodeData: Array.isArray(node.data) ? node.data.length : node.data })
+ return (
+
+ )
+}
diff --git a/src/components/UniversalContent/ParsedContent.tsx b/src/components/UniversalContent/ParsedContent.tsx
new file mode 100644
index 0000000..27d56ce
--- /dev/null
+++ b/src/components/UniversalContent/ParsedContent.tsx
@@ -0,0 +1,209 @@
+/**
+ * Universal content component that uses the content parser service
+ * for all Nostr content fields
+ */
+
+import { useEventFieldParser } from '@/hooks/useContentParser'
+import { Event } from 'nostr-tools'
+import { useMemo } from 'react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
+import { Components } from '../Note/LongFormArticle/types'
+import NostrNode from '../Note/LongFormArticle/NostrNode'
+import ImageWithLightbox from '../ImageWithLightbox'
+import ImageGallery from '../ImageGallery'
+import { ExternalLink } from 'lucide-react'
+import WebPreview from '../WebPreview'
+import 'katex/dist/katex.min.css'
+
+interface ParsedContentProps {
+ event: Event
+ field: 'content' | 'title' | 'summary' | 'description'
+ className?: string
+ enableMath?: boolean
+ enableSyntaxHighlighting?: boolean
+ showMedia?: boolean
+ showLinks?: boolean
+ showHashtags?: boolean
+ showNostrLinks?: boolean
+ maxImageWidth?: string
+}
+
+export default function ParsedContent({
+ event,
+ field,
+ className = '',
+ enableMath = true,
+ enableSyntaxHighlighting = true,
+ showMedia = true,
+ showLinks = false,
+ showHashtags = false,
+ showNostrLinks = false,
+ maxImageWidth = '400px'
+}: ParsedContentProps) {
+ const { parsedContent, isLoading, error } = useEventFieldParser(event, field, {
+ enableMath,
+ enableSyntaxHighlighting
+ })
+
+ const components = useMemo(
+ () =>
+ ({
+ nostr: ({ rawText, bech32Id }) =>
+
+
+
+ )
+ }
+
+ if (error) {
+ return (
+
+ Error loading content: {error.message}
+
+ )
+ }
+
+ if (!parsedContent) {
+ return (
+
+ No content available
+
+ )
+ }
+
+ return (
+
+ {/* Render content based on markup type */}
+ {parsedContent.markupType === 'asciidoc' ? (
+ // AsciiDoc content (already processed to HTML)
+
+ ) : (
+ // Markdown content (let react-markdown handle it)
+ {
+ if (url.startsWith('nostr:')) {
+ return url.slice(6) // Remove 'nostr:' prefix for rendering
+ }
+ return url
+ }}
+ components={components}
+ >
+ {field === 'content' ? event.content : event.tags?.find(tag => tag[0] === field)?.[1] || ''}
+
+ )}
+
+ {/* Media thumbnails */}
+ {showMedia && parsedContent.media.length > 0 && (
+
+ )
+}
diff --git a/src/constants.ts b/src/constants.ts
index 6ba7e0a..d069f16 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -127,7 +127,10 @@ export const ExtendedKind = {
RELAY_REVIEW: 31987,
GROUP_METADATA: 39000,
ZAP_REQUEST: 9734,
- ZAP_RECEIPT: 9735
+ ZAP_RECEIPT: 9735,
+ PUBLICATION: 30040,
+ WIKI_ARTICLE: 30818,
+ WIKI_CHAPTER: 30041
}
export const SUPPORTED_KINDS = [
@@ -145,7 +148,10 @@ export const SUPPORTED_KINDS = [
kinds.LongFormArticle,
ExtendedKind.RELAY_REVIEW,
ExtendedKind.DISCUSSION,
- ExtendedKind.ZAP_RECEIPT
+ ExtendedKind.ZAP_RECEIPT,
+ ExtendedKind.PUBLICATION,
+ ExtendedKind.WIKI_ARTICLE,
+ ExtendedKind.WIKI_CHAPTER
]
export const URL_REGEX =
diff --git a/src/hooks/useContentParser.tsx b/src/hooks/useContentParser.tsx
new file mode 100644
index 0000000..0ebd050
--- /dev/null
+++ b/src/hooks/useContentParser.tsx
@@ -0,0 +1,154 @@
+/**
+ * React hook for content parsing
+ */
+
+import { useState, useEffect } from 'react'
+import { Event } from 'nostr-tools'
+import { contentParserService, ParsedContent, ParseOptions } from '@/services/content-parser.service'
+
+export interface UseContentParserOptions extends ParseOptions {
+ autoParse?: boolean
+}
+
+export interface UseContentParserReturn {
+ parsedContent: ParsedContent | null
+ isLoading: boolean
+ error: Error | null
+ parse: () => Promise
+
+ )}
+
+ {/* Links summary with OpenGraph previews */}
+ {showLinks && parsedContent.links.length > 0 && (
+ Images in this content:
+
+ {parsedContent.media.map((media, index) => (
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Hashtags */}
+ {showHashtags && parsedContent.hashtags.length > 0 && (
+ Links in this content:
+
+ {parsedContent.links.map((link, index) => (
+
+
+ {parsedContent.hashtags.map((tag) => (
+
+ )}
+
+ {/* Nostr links summary */}
+ {showNostrLinks && parsedContent.nostrLinks.length > 0 && (
+
+ #{tag}
+
+ ))}
+
+
+ )}
+ Nostr references:
+
+ {parsedContent.nostrLinks.map((link, index) => (
+
+
+ {link.type}:{' '}
+ {link.id}
+
+ ))}
+ | ${header} | \n` + }) + tableHtml += '
|---|
$1
') + processed = processed.replace(/^## (.*$)/gim, '$1
') + processed = processed.replace(/^# (.*$)/gim, '$1
') + + // Bold and italic + processed = processed.replace(/\*\*(.*?)\*\*/g, '$1') + processed = processed.replace(/\*(.*?)\*/g, '$1') + processed = processed.replace(/_(.*?)_/g, '$1') + processed = processed.replace(/~(.*?)~/g, '$1') + + // Line breaks + processed = processed.replace(/\n\n/g, '
') + processed = `
${processed}
` + + return processed + } + + /** + * Parse plain text content + */ + private parsePlainText(content: string): string { + // Convert line breaks to HTML + return content + .replace(/\n\n/g, '')
+ .replace(/\n/g, '
')
+ .replace(/^/, '
') + .replace(/$/, '
') + } + + /** + * Preprocess advanced Markdown content + */ + private preprocessAdvancedMarkdown(content: string): string { + // Handle wikilinks: [[NIP-54]] -> [NIP-54](https://next-alexandria.gitcitadel.eu/publication?d=nip-54) + content = content.replace(/\[\[([^\]]+)\]\]/g, (_match, text) => { + const slug = text.toLowerCase().replace(/\s+/g, '-') + return `[${text}](https://next-alexandria.gitcitadel.eu/publication?d=${slug})` + }) + + // Handle hashtags: #hashtag -> [#hashtag](/hashtag/hashtag) + content = content.replace(/#([a-zA-Z0-9_]+)/g, (_match, tag) => { + return `[#${tag}](/hashtag/${tag})` + }) + + return content + } + + /** + * Preprocess basic Markdown content + */ + private preprocessBasicMarkdown(content: string): string { + // Handle hashtags + content = content.replace(/#([a-zA-Z0-9_]+)/g, (_match, tag) => { + return `[#${tag}](/hashtag/${tag})` + }) + + // Handle emoji shortcodes + content = content.replace(/:([a-zA-Z0-9_]+):/g, (_match, _emoji) => { + // This would need an emoji mapping - for now just return as-is + return _match + }) + + return content + } + + /** + * Process markdown links + */ + private processLinks(content: string): string { + return content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => { + // Check if it's already an HTML link + if (content.includes(`href="${url}"`)) { + return match + } + + // Handle nostr: prefixes + if (url.startsWith('nostr:')) { + return `${text}` + } + + return `${text} ` + }) + } + + /** + * Process markdown images + */ + private processImages(content: string): string { + return content.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, url) => { + const altText = alt || '' + return `- $1
- $1
| ${header} | \n` + }) + tableHtml += '
|---|