stacker.news/components/text.js

192 lines
6.9 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 YouTube from 'react-youtube'
2021-06-27 22:28:30 +00:00
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'
2023-12-04 22:07:10 +00:00
import React, { useState, memo, useRef, useCallback, useMemo, useEffect } 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 ZoomableImage, { decodeOriginalUrl } from './image'
2023-10-01 23:03:52 +00:00
import { IMGPROXY_URL_REGEXP } from '../lib/url'
import reactStringReplace from 'react-string-replace'
2023-10-23 22:14:37 +00:00
import { rehypeInlineCodeProperty } from '../lib/md'
2023-12-04 22:07:10 +00:00
import { Button } from 'react-bootstrap'
2022-07-21 22:39:05 +00:00
export function SearchText ({ text }) {
return (
<div className={styles.text}>
<p className={styles.p}>
{reactStringReplace(text, /\*\*\*([^*]+)\*\*\*/g, (match, i) => {
return <mark key={`strong-${match}-${i}`}>{match}</mark>
})}
</p>
</div>
)
2022-02-03 22:01:42 +00:00
}
2021-04-14 23:56:29 +00:00
// this is one of the slowest components to render
export default memo(function Text ({ nofollow, imgproxyUrls, children, tab, ...outerProps }) {
2023-12-04 22:07:10 +00:00
const [overflowing, setOverflowing] = useState(false)
const [show, setShow] = useState(false)
const containerRef = useRef(null)
useEffect(() => {
const container = containerRef.current
if (!container || overflowing) return
2023-12-16 00:18:30 +00:00
function checkOverflow () {
setOverflowing(container.scrollHeight > window.innerHeight * 2)
}
2023-12-17 19:23:52 +00:00
let resizeObserver
if (!overflowing && 'ResizeObserver' in window) {
resizeObserver = new window.ResizeObserver(checkOverflow).observe(container)
}
2023-12-16 00:18:30 +00:00
window.addEventListener('resize', checkOverflow)
checkOverflow()
return () => {
window.removeEventListener('resize', checkOverflow)
2023-12-17 19:23:52 +00:00
resizeObserver?.disconnect()
2023-12-16 00:18:30 +00:00
}
}, [containerRef.current, setOverflowing])
2023-12-04 22:07:10 +00:00
// all the reactStringReplace calls are to facilitate search highlighting
const slugger = useRef(new GithubSlugger())
2023-11-12 15:04:28 +00:00
const Heading = useCallback(({ children, node, ...props }) => {
const [copied, setCopied] = useState(false)
const { noFragments, topLevel } = outerProps
const id = useMemo(() =>
noFragments ? undefined : slugger?.current?.slug(toString(node).replace(/[^\w\-\s]+/gi, '')), [node, noFragments, slugger])
const h = useMemo(() => {
if (topLevel) {
return node?.TagName
}
const h = parseInt(node?.tagName?.replace('h', '') || 0)
if (h < 4) return `h${h + 3}`
return 'h6'
}, [node, topLevel])
const Icon = copied ? Thumb : LinkIcon
return (
<span className={styles.heading}>
{React.createElement(h || node?.tagName, { id, ...props }, children)}
{!noFragments && topLevel &&
<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>
)
}, [outerProps, slugger.current])
const Table = useCallback(({ node, ...props }) =>
<span className='table-responsive'>
<table className='table table-bordered table-sm' {...props} />
</span>, [])
2022-07-17 15:33:55 +00:00
const Code = useCallback(({ node, inline, className, children, style, ...props }) => {
return inline
? (
<code className={className} {...props}>
{children}
</code>
)
: (
<SyntaxHighlighter style={atomDark} language='text' PreTag='div' {...props}>
{children}
</SyntaxHighlighter>
)
}, [])
2023-10-23 22:14:37 +00:00
const P = useCallback(({ children, node, ...props }) => <div className={styles.p} {...props}>{children}</div>, [])
const Img = useCallback(({ node, src, ...props }) => {
const url = IMGPROXY_URL_REGEXP.test(src) ? decodeOriginalUrl(src) : src
const srcSet = imgproxyUrls?.[url]
return <ZoomableImage srcSet={srcSet} tab={tab} src={src} {...props} {...outerProps} />
}, [imgproxyUrls, outerProps, tab])
2021-04-14 23:56:29 +00:00
return (
<div className={`${styles.text} ${show ? styles.textUncontained : overflowing ? styles.textContained : ''}`} ref={containerRef}>
2021-06-27 22:28:30 +00:00
<ReactMarkdown
components={{
2023-11-12 15:04:28 +00:00
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
table: Table,
p: P,
code: Code,
a: ({ node, href, children, ...props }) => {
2023-10-15 20:43:06 +00:00
children = children ? Array.isArray(children) ? children : [children] : []
// don't allow zoomable images to be wrapped in links
2023-10-15 20:43:06 +00:00
if (children.some(e => e?.props?.node?.tagName === 'img')) {
2022-08-10 15:06:31 +00:00
return <>{children}</>
}
// If [text](url) was parsed as <a> and text is not empty and not a link itself,
2023-10-18 14:50:33 +00:00
// we don't render it as an image since it was probably a conscious choice to include text.
2023-10-15 20:43:06 +00:00
const text = children[0]
if (!!text && !/^https?:\/\//.test(text)) {
return (
2023-10-22 18:28:18 +00:00
<a target='_blank' rel={`noreferrer ${nofollow ? 'nofollow' : ''} noopener`} href={href}>{text}</a>
)
}
// if the link is to a youtube video, render the video
const youtube = href.match(/(https?:\/\/)?((www\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)(?<id>[_0-9a-z-]+)((?:\?|&)(?:t|start)=(?<start>\d+))?/i)
if (youtube?.groups?.id) {
return (
<div style={{ maxWidth: outerProps.topLevel ? '640px' : '320px', paddingRight: '15px', margin: '0.5rem 0' }}>
<YouTube
videoId={youtube.groups.id} className={styles.youtubeContainer} opts={{
playerVars: {
start: youtube?.groups?.start
}
}}
/>
</div>
)
}
// assume the link is an image which will fallback to link if it's not
return <Img src={href} nofollow={nofollow} {...props}>{children}</Img>
},
img: Img
2021-06-27 22:28:30 +00:00
}}
remarkPlugins={[gfm, mention, sub]}
2023-10-23 22:14:37 +00:00
rehypePlugins={[rehypeInlineCodeProperty]}
2021-06-27 22:28:30 +00:00
>
{children}
</ReactMarkdown>
2023-12-04 22:07:10 +00:00
{overflowing && !show &&
<Button size='lg' variant='info' className={styles.textShowFull} onClick={() => setShow(true)}>
show full text
</Button>}
2021-06-27 22:28:30 +00:00
</div>
2021-04-14 23:56:29 +00:00
)
})