Cody Tseng
11 months ago
committed by
GitHub
27 changed files with 441 additions and 296 deletions
@ -1,4 +0,0 @@
@@ -1,4 +0,0 @@
|
||||
export type TEmbeddedRenderer = { |
||||
regex: RegExp |
||||
render: (match: string, index: number) => JSX.Element |
||||
} |
||||
@ -1,25 +1,46 @@
@@ -1,25 +1,46 @@
|
||||
import { |
||||
EmbeddedHashtagParser, |
||||
EmbeddedMentionParser, |
||||
EmbeddedNormalUrlParser, |
||||
EmbeddedWebsocketUrlParser, |
||||
parseContent |
||||
} from '@/lib/content-parser' |
||||
import { useMemo } from 'react' |
||||
import { |
||||
embedded, |
||||
embeddedHashtagRenderer, |
||||
embeddedNormalUrlRenderer, |
||||
embeddedNostrNpubRenderer, |
||||
embeddedNpubRenderer, |
||||
embeddedWebsocketUrlRenderer |
||||
EmbeddedHashtag, |
||||
EmbeddedMention, |
||||
EmbeddedNormalUrl, |
||||
EmbeddedWebsocketUrl |
||||
} from '../Embedded' |
||||
|
||||
export default function ProfileAbout({ about, className }: { about?: string; className?: string }) { |
||||
const nodes = useMemo(() => { |
||||
return about |
||||
? embedded(about, [ |
||||
embeddedWebsocketUrlRenderer, |
||||
embeddedNormalUrlRenderer, |
||||
embeddedHashtagRenderer, |
||||
embeddedNostrNpubRenderer, |
||||
embeddedNpubRenderer |
||||
]) |
||||
: null |
||||
const aboutNodes = useMemo(() => { |
||||
if (!about) return null |
||||
|
||||
const nodes = parseContent(about, [ |
||||
EmbeddedWebsocketUrlParser, |
||||
EmbeddedNormalUrlParser, |
||||
EmbeddedHashtagParser, |
||||
EmbeddedMentionParser |
||||
]) |
||||
return nodes.map((node, index) => { |
||||
if (node.type === 'text') { |
||||
return node.data |
||||
} |
||||
if (node.type === 'url') { |
||||
return <EmbeddedNormalUrl key={index} url={node.data} /> |
||||
} |
||||
if (node.type === 'websocket-url') { |
||||
return <EmbeddedWebsocketUrl key={index} url={node.data} /> |
||||
} |
||||
if (node.type === 'hashtag') { |
||||
return <EmbeddedHashtag key={index} hashtag={node.data} /> |
||||
} |
||||
if (node.type === 'mention') { |
||||
return <EmbeddedMention key={index} userId={node.data.split(':')[1]} /> |
||||
} |
||||
}) |
||||
}, [about]) |
||||
|
||||
return <div className={className}>{nodes}</div> |
||||
return <div className={className}>{aboutNodes}</div> |
||||
} |
||||
|
||||
@ -0,0 +1,193 @@
@@ -0,0 +1,193 @@
|
||||
export type TEmbeddedNodeType = |
||||
| 'text' |
||||
| 'image' |
||||
| 'images' |
||||
| 'video' |
||||
| 'event' |
||||
| 'mention' |
||||
| 'legacy-mention' |
||||
| 'hashtag' |
||||
| 'websocket-url' |
||||
| 'url' |
||||
|
||||
export type TEmbeddedNode = |
||||
| { |
||||
type: Exclude<TEmbeddedNodeType, 'images'> |
||||
data: string |
||||
} |
||||
| { |
||||
type: 'images' |
||||
data: string[] |
||||
} |
||||
|
||||
type TContentParser = { type: Exclude<TEmbeddedNodeType, 'images'>; regex: RegExp } |
||||
|
||||
export const EmbeddedHashtagParser: TContentParser = { |
||||
type: 'hashtag', |
||||
regex: /#[\p{L}\p{N}\p{M}_]+/gu |
||||
} |
||||
|
||||
export const EmbeddedMentionParser: TContentParser = { |
||||
type: 'mention', |
||||
regex: /nostr:(npub1[a-z0-9]{58}|nprofile1[a-z0-9]+)/g |
||||
} |
||||
|
||||
export const EmbeddedLegacyMentionParser: TContentParser = { |
||||
type: 'legacy-mention', |
||||
regex: /npub1[a-z0-9]{58}|nprofile1[a-z0-9]+/g |
||||
} |
||||
|
||||
export const EmbeddedEventParser: TContentParser = { |
||||
type: 'event', |
||||
regex: /nostr:(note1[a-z0-9]{58}|nevent1[a-z0-9]+|naddr1[a-z0-9]+)/g |
||||
} |
||||
|
||||
export const EmbeddedImageParser: TContentParser = { |
||||
type: 'image', |
||||
regex: |
||||
/https?:\/\/[\w\p{L}\p{N}\p{M}&.-/?=#\-@%+_:!~*]+\.(jpg|jpeg|png|gif|webp|bmp|tiff|heic|svg)(\?[\w\p{L}\p{N}\p{M}&.-/?=#\-@%+_:!~*]+)?/giu |
||||
} |
||||
|
||||
export const EmbeddedVideoParser: TContentParser = { |
||||
type: 'video', |
||||
regex: |
||||
/https?:\/\/[\w\p{L}\p{N}\p{M}&.-/?=#\-@%+_:!~*]+\.(mp4|webm|ogg|mov)(\?[\w\p{L}\p{N}\p{M}&.-/?=#\-@%+_:!~*]+)?/giu |
||||
} |
||||
|
||||
export const EmbeddedWebsocketUrlParser: TContentParser = { |
||||
type: 'websocket-url', |
||||
regex: /wss?:\/\/[\w\p{L}\p{N}\p{M}&.-/?=#\-@%+_:!~*]+/gu |
||||
} |
||||
|
||||
export const EmbeddedNormalUrlParser: TContentParser = { |
||||
type: 'url', |
||||
regex: /https?:\/\/[\w\p{L}\p{N}\p{M}&.-/?=#\-@%+_:!~*]+/gu |
||||
} |
||||
|
||||
export function parseContent(content: string, parsers: TContentParser[]) { |
||||
let nodes: TEmbeddedNode[] = [{ type: 'text', data: content.trim() }] |
||||
|
||||
parsers.forEach((parser) => { |
||||
nodes = nodes |
||||
.flatMap((node) => { |
||||
if (node.type !== 'text') return [node] |
||||
const matches = node.data.matchAll(parser.regex) |
||||
const result: TEmbeddedNode[] = [] |
||||
let lastIndex = 0 |
||||
for (const match of matches) { |
||||
const matchStart = match.index! |
||||
// Add text before the match
|
||||
if (matchStart > lastIndex) { |
||||
result.push({ |
||||
type: 'text', |
||||
data: node.data.slice(lastIndex, matchStart) |
||||
}) |
||||
} |
||||
|
||||
// Add the match as specific type
|
||||
result.push({ |
||||
type: parser.type, |
||||
data: match[0] // The whole matched string
|
||||
}) |
||||
|
||||
lastIndex = matchStart + match[0].length |
||||
} |
||||
|
||||
// Add text after the last match
|
||||
if (lastIndex < node.data.length) { |
||||
result.push({ |
||||
type: 'text', |
||||
data: node.data.slice(lastIndex) |
||||
}) |
||||
} |
||||
|
||||
return result |
||||
}) |
||||
.filter((n) => n.data !== '') |
||||
}) |
||||
|
||||
nodes = mergeConsecutiveTextNodes(nodes) |
||||
nodes = mergeConsecutiveImageNodes(nodes) |
||||
nodes = removeExtraNewlines(nodes) |
||||
|
||||
return nodes |
||||
} |
||||
|
||||
function mergeConsecutiveTextNodes(nodes: TEmbeddedNode[]) { |
||||
const merged: TEmbeddedNode[] = [] |
||||
let currentText = '' |
||||
|
||||
nodes.forEach((node) => { |
||||
if (node.type === 'text') { |
||||
currentText += node.data |
||||
} else { |
||||
if (currentText) { |
||||
merged.push({ type: 'text', data: currentText }) |
||||
currentText = '' |
||||
} |
||||
merged.push(node) |
||||
} |
||||
}) |
||||
|
||||
if (currentText) { |
||||
merged.push({ type: 'text', data: currentText }) |
||||
} |
||||
|
||||
return merged |
||||
} |
||||
|
||||
function mergeConsecutiveImageNodes(nodes: TEmbeddedNode[]) { |
||||
const merged: TEmbeddedNode[] = [] |
||||
nodes.forEach((node, i) => { |
||||
if (node.type === 'image') { |
||||
const lastNode = merged[merged.length - 1] |
||||
if (lastNode && lastNode.type === 'images') { |
||||
lastNode.data.push(node.data) |
||||
} else { |
||||
merged.push({ type: 'images', data: [node.data] }) |
||||
} |
||||
} else if (node.type === 'text' && node.data.trim() === '') { |
||||
// Only remove whitespace-only text nodes if they are sandwiched between image nodes.
|
||||
const prev = merged[merged.length - 1] |
||||
const next = nodes[i + 1] |
||||
if (prev && prev.type === 'images' && next && next.type === 'image') { |
||||
return // skip this whitespace node
|
||||
} else { |
||||
merged.push(node) |
||||
} |
||||
} else { |
||||
merged.push(node) |
||||
} |
||||
}) |
||||
|
||||
return merged |
||||
} |
||||
|
||||
function removeExtraNewlines(nodes: TEmbeddedNode[]) { |
||||
const isBlockNode = (node: TEmbeddedNode) => { |
||||
return ['image', 'images', 'video', 'event'].includes(node.type) |
||||
} |
||||
|
||||
const newNodes: TEmbeddedNode[] = [] |
||||
nodes.forEach((node, i) => { |
||||
if (isBlockNode(node)) { |
||||
newNodes.push(node) |
||||
return |
||||
} |
||||
|
||||
const prev = nodes[i - 1] |
||||
const next = nodes[i + 1] |
||||
let data = node.data as string |
||||
if (prev && isBlockNode(prev)) { |
||||
data = data.replace(/^[ ]*\n/, '') |
||||
} |
||||
if (next && isBlockNode(next)) { |
||||
data = data.replace(/\n[ ]*$/, '') |
||||
} |
||||
newNodes.push({ |
||||
type: node.type as Exclude<TEmbeddedNodeType, 'images'>, |
||||
data |
||||
}) |
||||
}) |
||||
return newNodes |
||||
} |
||||
Loading…
Reference in new issue