ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix click to load in preview (#427)

Browse Source 
* Rename confusing variable name

* Use nullish coalescing operator

* Fix click to load in preview

---------

Co-authored-by: ekzyis <ek@stacker.news>
This commit is contained in:
ekzyis 2023-08-23 22:30:38 +02:00 committed by GitHub
parent ee3f892053
commit 0ea4f9bc27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/form.js
View File

@ -161,7 +161,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
: ( : (
<div className='form-group'> <div className='form-group'>
<div className={`${styles.text} form-control`}> <div className={`${styles.text} form-control`}>
<Text topLevel={topLevel} noFragments onlyImgProxy={false}>{meta.value}</Text> <Text topLevel={topLevel} noFragments fetchOnlyImgProxy={false}>{meta.value}</Text>
</div> </div>
</div> </div>
)} )}

19
components/text.js
View File

@ -80,10 +80,10 @@ const CACHE_STATES = {
} }
// this is one of the slowest components to render // this is one of the slowest components to render
export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgProxy, children }) { export default memo(function Text ({ topLevel, noFragments, nofollow, fetchOnlyImgProxy, children }) {
// all the reactStringReplace calls are to facilitate search highlighting // all the reactStringReplace calls are to facilitate search highlighting
const slugger = new GithubSlugger() const slugger = new GithubSlugger()
onlyImgProxy = onlyImgProxy ?? true fetchOnlyImgProxy ??= true
const HeadingWrapper = (props) => Heading({ topLevel, slugger, noFragments, ...props }) const HeadingWrapper = (props) => Heading({ topLevel, slugger, noFragments, ...props })
@ -91,13 +91,13 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
const [urlCache, setUrlCache] = useState({}) const [urlCache, setUrlCache] = useState({})
useEffect(() => { useEffect(() => {
const imgRegexp = onlyImgProxy ? IMGPROXY_URL_REGEXP : IMG_URL_REGEXP const imgRegexp = fetchOnlyImgProxy ? IMGPROXY_URL_REGEXP : IMG_URL_REGEXP
const urls = extractUrls(children) const urls = extractUrls(children)
urls.forEach((url) => { urls.forEach((url) => {
if (imgRegexp.test(url)) { if (imgRegexp.test(url)) {
setUrlCache((prev) => ({ ...prev, [url]: CACHE_STATES.IS_LOADED })) setUrlCache((prev) => ({ ...prev, [url]: CACHE_STATES.IS_LOADED }))
} else if (!onlyImgProxy) { } else if (!fetchOnlyImgProxy) {
const img = new window.Image() const img = new window.Image()
imgCache.current[url] = img imgCache.current[url] = img
@ -160,7 +160,7 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
} }
if (urlCache[href] === CACHE_STATES.IS_LOADED) { if (urlCache[href] === CACHE_STATES.IS_LOADED) {
return <ZoomableImage topLevel={topLevel} {...props} src={href} /> return <ZoomableImage topLevel={topLevel} useClickToLoad={fetchOnlyImgProxy} {...props} src={href} />
} }
// map: fix any highlighted links // map: fix any highlighted links
@ -183,7 +183,9 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
</a> </a>
) )
}, },
img: ({ node, ...props }) => <ZoomableImage topLevel={topLevel} {...props} /> img: ({ node, ...props }) => {
return <ZoomableImage topLevel={topLevel} useClickToLoad={fetchOnlyImgProxy} {...props} />
}
}} }}
remarkPlugins={[gfm, mention, sub, remarkDirective, searchHighlighter]} remarkPlugins={[gfm, mention, sub, remarkDirective, searchHighlighter]}
> >
@ -198,7 +200,7 @@ function ClickToLoad ({ children }) {
return clicked ? children : <div className='m-1 fst-italic pointer text-muted' onClick={() => setClicked(true)}>click to load image</div> 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, ...props }) { export function ZoomableImage ({ src, topLevel, useClickToLoad, ...props }) {
const me = useMe() const me = useMe()
const [err, setErr] = useState() const [err, setErr] = useState()
const [imgSrc, setImgSrc] = useState(src) const [imgSrc, setImgSrc] = useState(src)
@ -207,6 +209,7 @@ export function ZoomableImage ({ src, topLevel, ...props }) {
maxHeight: topLevel ? '75vh' : '25vh', maxHeight: topLevel ? '75vh' : '25vh',
cursor: 'zoom-in' cursor: 'zoom-in'
} }
useClickToLoad ??= true
// if image changes we need to update state // if image changes we need to update state
const [mediaStyle, setMediaStyle] = useState(defaultMediaStyle) const [mediaStyle, setMediaStyle] = useState(defaultMediaStyle)
@ -258,7 +261,7 @@ export function ZoomableImage ({ src, topLevel, ...props }) {
) )
return ( return (
(!me || !me.clickToLoadImg || isImgProxy) (!me || !me.clickToLoadImg || isImgProxy || !useClickToLoad)
? img ? img
: <ClickToLoad>{img}</ClickToLoad> : <ClickToLoad>{img}</ClickToLoad>