stacker.news/components/text.js

import styles from './text.module.css'
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'
import mention from '../lib/remark-mention'
import sub from '../lib/remark-sub'
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'
import GithubSlugger from 'github-slugger'
import LinkIcon from '../svgs/link.svg'
import Thumb from '../svgs/thumb-up-fill.svg'
import { toString } from 'mdast-util-to-string'
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'
import { useMe } from './me'

function searchHighlighter () {
  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 = {}
      }
    })
  }
}

function decodeOriginalUrl (imgProxyUrl) {
  const parts = imgProxyUrl.split('/')
  // base64url is not a known encoding in browsers
  // so we need to replace the invalid chars
  const b64Url = parts[parts.length - 1].replace(/-/g, '+').replace(/_/, '/')
  const originalUrl = Buffer.from(b64Url, 'base64').toString('utf-8')
  return originalUrl
}

function Heading ({ h, slugger, noFragments, topLevel, children, node, ...props }) {
  const [copied, setCopied] = useState(false)
  const [id] = useState(noFragments ? undefined : slugger.slug(toString(node).replace(/[^\w\-\s]+/gi, '')))

  const Icon = copied ? Thumb : LinkIcon

  return (
    <span className={styles.heading}>
      {React.createElement(h, { 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>
  )
}

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, fetchOnlyImgProxy, children }) {
  // all the reactStringReplace calls are to facilitate search highlighting
  const slugger = new GithubSlugger()
  fetchOnlyImgProxy ??= true

  const HeadingWrapper = (props) => Heading({ topLevel, slugger, noFragments, ...props })

  const imgCache = useRef({})
  const [urlCache, setUrlCache] = useState({})

  useEffect(() => {
    const imgRegexp = fetchOnlyImgProxy ? 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 (!fetchOnlyImgProxy) {
        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])

  return (
    <div className={styles.text}>
      <ReactMarkdown
        components={{
          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 }),
          table: ({ node, ...props }) =>
            <span className='table-responsive'>
              <table className='table table-bordered table-sm' {...props} />
            </span>,
          p: ({ children, ...props }) => <div className={styles.p} {...props}>{children}</div>,
          code ({ node, inline, className, children, style, ...props }) {
            return !inline
              ? (
                <SyntaxHighlighter showLineNumbers style={atomDark} PreTag='div' {...props}>
                  {reactStringReplace(String(children).replace(/\n$/, ''), /:high\[([^\]]+)\]/g, (match, i) => {
                    return match
                  }).join('')}
                </SyntaxHighlighter>
                )
              : (
                <code className={className} style={atomDark} {...props}>
                  {reactStringReplace(String(children), /:high\[([^\]]+)\]/g, (match, i) => {
                    return <mark key={`mark-${match}`}>{match}</mark>
                  })}
                </code>
                )
          },
          a: ({ node, href, children, ...props }) => {
            if (children?.some(e => e?.props?.node?.tagName === 'img')) {
              return <>{children}</>
            }

            if (urlCache[href] === CACHE_STATES.IS_LOADED) {
              return <ZoomableImage topLevel={topLevel} useClickToLoad={fetchOnlyImgProxy} {...props} src={href} />
            }

            // map: fix any highlighted links
            children = children?.map(e =>
              typeof e === 'string'
                ? reactStringReplace(e, /:high\[([^\]]+)\]/g, (match, i) => {
                  return <mark key={`mark-${match}-${i}`}>{match}</mark>
                })
                : 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>
            )
          },
          img: ({ node, ...props }) => {
            return <ZoomableImage topLevel={topLevel} useClickToLoad={fetchOnlyImgProxy} {...props} />
          }
        }}
        remarkPlugins={[gfm, mention, sub, remarkDirective, searchHighlighter]}
      >
        {children}
      </ReactMarkdown>
    </div>
  )
})

function ClickToLoad ({ children }) {
  const [clicked, setClicked] = useState(false)
  return clicked ? children : <div className='m-1 fst-italic pointer text-muted' onClick={() => setClicked(true)}>click to load image</div>
}

export function ZoomableImage ({ src, topLevel, useClickToLoad, ...props }) {
  const me = useMe()
  const [err, setErr] = useState()
  const [imgSrc, setImgSrc] = useState(src)
  const [isImgProxy, setIsImgProxy] = useState(IMGPROXY_URL_REGEXP.test(src))
  const defaultMediaStyle = {
    maxHeight: topLevel ? '75vh' : '25vh',
    cursor: 'zoom-in'
  }
  useClickToLoad ??= true

  // 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) {
    if (!isImgProxy) {
      return (
        <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' />
          image error
        </span>
      )
    }
    try {
      const originalUrl = decodeOriginalUrl(src)
      setImgSrc(originalUrl)
      setErr(null)
    } catch (err) {
      console.error(err)
      setErr(err)
    }
    // always set to false since imgproxy returned error
    setIsImgProxy(false)
  }

  const img = (
    <img
      className={topLevel ? styles.topLevel : undefined}
      style={mediaStyle}
      src={imgSrc}
      onClick={() => {
        if (mediaStyle.cursor === 'zoom-in') {
          setMediaStyle({
            width: '100%',
            cursor: 'zoom-out'
          })
        } else {
          setMediaStyle(defaultMediaStyle)
        }
      }}
      onError={() => setErr(true)}
      {...props}
    />
  )

  return (
    (!me || !me.clickToLoadImg || isImgProxy || !useClickToLoad)
      ? img
      : <ClickToLoad>{img}</ClickToLoad>

  )
}