stacker.news/components/text.js

230 lines
7.6 KiB
JavaScript
Raw Normal View History

2021-04-14 23:56:29 +00:00
import styles from './text.module.css'
2021-06-27 22:28:30 +00:00
import ReactMarkdown from 'react-markdown'
import gfm from 'remark-gfm'
import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
2021-07-15 19:56:23 +00:00
import mention from '../lib/remark-mention'
2022-03-03 22:18:38 +00:00
import sub from '../lib/remark-sub'
2022-02-03 22:01:42 +00:00
import remarkDirective from 'remark-directive'
import { visit } from 'unist-util-visit'
import reactStringReplace from 'react-string-replace'
import React, { useRef, useEffect, useState, memo } from 'react'
2022-07-17 15:33:55 +00:00
import GithubSlugger from 'github-slugger'
2022-10-04 17:43:18 +00:00
import LinkIcon from '../svgs/link.svg'
import Thumb from '../svgs/thumb-up-fill.svg'
2022-11-15 20:51:55 +00:00
import { toString } from 'mdast-util-to-string'
2022-10-04 17:43:18 +00:00
import copy from 'clipboard-copy'
import { IMGPROXY_URL_REGEXP, IMG_URL_REGEXP } from '../lib/url'
import { extractUrls } from '../lib/md'
import FileMissing from '../svgs/file-warning-line.svg'
2022-07-21 22:39:05 +00:00
function searchHighlighter () {
2022-02-03 22:01:42 +00:00
return (tree) => {
visit(tree, (node) => {
if (
node.type === 'textDirective' ||
node.type === 'leafDirective'
) {
if (node.name !== 'high') return
const data = node.data || (node.data = {})
data.hName = 'mark'
data.hProperties = {}
}
})
}
}
2021-04-14 23:56:29 +00:00
2022-07-17 15:33:55 +00:00
function Heading ({ h, slugger, noFragments, topLevel, children, node, ...props }) {
2022-10-04 17:43:18 +00:00
const [copied, setCopied] = useState(false)
const [id] = useState(noFragments ? undefined : slugger.slug(toString(node).replace(/[^\w\-\s]+/gi, '')))
const Icon = copied ? Thumb : LinkIcon
2022-07-17 15:33:55 +00:00
return (
<span className={styles.heading}>
2022-07-17 15:33:55 +00:00
{React.createElement(h, { id, ...props }, children)}
2022-10-04 17:43:18 +00:00
{!noFragments && topLevel &&
2022-11-15 20:51:55 +00:00
<a className={`${styles.headingLink} ${copied ? styles.copied : ''}`} href={`#${id}`}>
<Icon
onClick={() => {
const location = new URL(window.location)
location.hash = `${id}`
copy(location.href)
setTimeout(() => setCopied(false), 1500)
setCopied(true)
}}
width={18}
height={18}
className='fill-grey'
/>
</a>}
</span>
2022-07-17 15:33:55 +00:00
)
}
const CACHE_STATES = {
IS_LOADING: 'IS_LOADING',
IS_LOADED: 'IS_LOADED',
IS_ERROR: 'IS_ERROR'
}
// this is one of the slowest components to render
export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgProxy, children }) {
// all the reactStringReplace calls are to facilitate search highlighting
2022-07-17 15:33:55 +00:00
const slugger = new GithubSlugger()
onlyImgProxy = onlyImgProxy ?? true
2022-07-17 15:33:55 +00:00
2022-11-15 20:51:55 +00:00
const HeadingWrapper = (props) => Heading({ topLevel, slugger, noFragments, ...props })
const imgCache = useRef({})
const [urlCache, setUrlCache] = useState({})
useEffect(() => {
const imgRegexp = onlyImgProxy ? IMGPROXY_URL_REGEXP : IMG_URL_REGEXP
const urls = extractUrls(children)
urls.forEach((url) => {
if (imgRegexp.test(url)) {
setUrlCache((prev) => ({ ...prev, [url]: CACHE_STATES.IS_LOADED }))
} else if (!onlyImgProxy) {
2023-07-25 14:14:45 +00:00
const img = new window.Image()
imgCache.current[url] = img
setUrlCache((prev) => ({ ...prev, [url]: CACHE_STATES.IS_LOADING }))
const callback = (state) => {
setUrlCache((prev) => ({ ...prev, [url]: state }))
delete imgCache.current[url]
}
img.onload = () => callback(CACHE_STATES.IS_LOADED)
img.onerror = () => callback(CACHE_STATES.IS_ERROR)
img.src = url
}
})
return () => {
Object.values(imgCache.current).forEach((img) => {
img.onload = null
img.onerror = null
img.src = ''
})
}
}, [children])
2021-04-14 23:56:29 +00:00
return (
2021-06-27 22:28:30 +00:00
<div className={styles.text}>
<ReactMarkdown
components={{
2022-07-17 15:33:55 +00:00
h1: (props) => HeadingWrapper({ h: topLevel ? 'h1' : 'h3', ...props }),
h2: (props) => HeadingWrapper({ h: topLevel ? 'h2' : 'h4', ...props }),
h3: (props) => HeadingWrapper({ h: topLevel ? 'h3' : 'h5', ...props }),
h4: (props) => HeadingWrapper({ h: topLevel ? 'h4' : 'h6', ...props }),
h5: (props) => HeadingWrapper({ h: topLevel ? 'h5' : 'h6', ...props }),
h6: (props) => HeadingWrapper({ h: 'h6', ...props }),
2021-06-27 22:28:30 +00:00
table: ({ node, ...props }) =>
<span className='table-responsive'>
2021-06-27 22:28:30 +00:00
<table className='table table-bordered table-sm' {...props} />
</span>,
p: ({ children, ...props }) => <div className={styles.p} {...props}>{children}</div>,
2023-07-27 17:10:05 +00:00
code ({ node, inline, className, children, style, ...props }) {
2021-06-27 22:28:30 +00:00
return !inline
? (
2023-07-27 17:10:05 +00:00
<SyntaxHighlighter showLineNumbers style={atomDark} PreTag='div' {...props}>
{reactStringReplace(String(children).replace(/\n$/, ''), /:high\[([^\]]+)\]/g, (match, i) => {
return match
}).join('')}
2021-06-27 22:28:30 +00:00
</SyntaxHighlighter>
)
: (
<code className={className} style={atomDark} {...props}>
{reactStringReplace(String(children), /:high\[([^\]]+)\]/g, (match, i) => {
return <mark key={`mark-${match}`}>{match}</mark>
})}
2021-06-27 22:28:30 +00:00
</code>
)
},
a: ({ node, href, children, ...props }) => {
2022-08-10 15:06:31 +00:00
if (children?.some(e => e?.props?.node?.tagName === 'img')) {
return <>{children}</>
}
if (urlCache[href] === CACHE_STATES.IS_LOADED) {
return <ZoomableImage topLevel={topLevel} {...props} src={href} />
}
2022-08-10 15:06:31 +00:00
// map: fix any highlighted links
2022-07-17 15:33:55 +00:00
children = children?.map(e =>
typeof e === 'string'
2022-11-15 20:51:55 +00:00
? reactStringReplace(e, /:high\[([^\]]+)\]/g, (match, i) => {
2023-07-25 14:14:45 +00:00
return <mark key={`mark-${match}-${i}`}>{match}</mark>
})
2022-11-15 20:51:55 +00:00
: e)
return (
/* eslint-disable-next-line */
<a
target='_blank' rel={nofollow ? 'nofollow' : 'noreferrer'}
href={reactStringReplace(href, /:high%5B([^%5D]+)%5D/g, (match, i) => {
return match
}).join('')} {...props}
>
{children}
</a>
)
},
2022-07-17 15:33:55 +00:00
img: ({ node, ...props }) => <ZoomableImage topLevel={topLevel} {...props} />
2021-06-27 22:28:30 +00:00
}}
remarkPlugins={[gfm, mention, sub, remarkDirective, searchHighlighter]}
2021-06-27 22:28:30 +00:00
>
{children}
</ReactMarkdown>
</div>
2021-04-14 23:56:29 +00:00
)
})
2023-01-05 19:24:09 +00:00
export function ZoomableImage ({ src, topLevel, ...props }) {
const [err, setErr] = useState()
const defaultMediaStyle = {
maxHeight: topLevel ? '75vh' : '25vh',
cursor: 'zoom-in'
}
// if image changes we need to update state
const [mediaStyle, setMediaStyle] = useState(defaultMediaStyle)
useEffect(() => {
setMediaStyle(defaultMediaStyle)
setErr(null)
}, [src])
if (!src) return null
if (err) {
return (
2023-07-26 01:02:43 +00:00
<span className='d-flex align-items-baseline text-warning-emphasis fw-bold pb-1'>
<FileMissing width={18} height={18} className='fill-warning me-1 align-self-center' />
broken image <small className='ms-1'>stacker probably used an unreliable host</small>
</span>
)
}
2022-07-17 15:33:55 +00:00
return (
<img
className={topLevel ? styles.topLevel : undefined}
style={mediaStyle}
src={src}
onClick={() => {
if (mediaStyle.cursor === 'zoom-in') {
setMediaStyle({
width: '100%',
cursor: 'zoom-out'
})
} else {
setMediaStyle(defaultMediaStyle)
}
}}
onError={() => setErr(true)}
2022-07-17 15:33:55 +00:00
{...props}
/>
)
}