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

Fix click to load in preview (#427) 

* 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={`${styles.text} form-control`}>
<Text topLevel={topLevel} noFragments onlyImgProxy={false}>{meta.value}</Text>
<Text topLevel={topLevel} noFragments fetchOnlyImgProxy={false}>{meta.value}</Text>
</div>
</div>
)}

19
components/text.js
View File

@ -80,10 +80,10 @@ const CACHE_STATES = {
}
// 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
const slugger = new GithubSlugger()
onlyImgProxy = onlyImgProxy ?? true
fetchOnlyImgProxy ??= true
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({})
useEffect(() => {
const imgRegexp = onlyImgProxy ? IMGPROXY_URL_REGEXP : IMG_URL_REGEXP
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 (!onlyImgProxy) {
} else if (!fetchOnlyImgProxy) {
const img = new window.Image()
imgCache.current[url] = img
@ -160,7 +160,7 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
}
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
@ -183,7 +183,9 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
</a>
)
},
img: ({ node, ...props }) => <ZoomableImage topLevel={topLevel} {...props} />
img: ({ node, ...props }) => {
return <ZoomableImage topLevel={topLevel} useClickToLoad={fetchOnlyImgProxy} {...props} />
}
}}
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>
}
export function ZoomableImage ({ src, topLevel, ...props }) {
export function ZoomableImage ({ src, topLevel, useClickToLoad, ...props }) {
const me = useMe()
const [err, setErr] = useState()
const [imgSrc, setImgSrc] = useState(src)
@ -207,6 +209,7 @@ export function ZoomableImage ({ src, topLevel, ...props }) {
maxHeight: topLevel ? '75vh' : '25vh',
cursor: 'zoom-in'
}
useClickToLoad ??= true
// if image changes we need to update state
const [mediaStyle, setMediaStyle] = useState(defaultMediaStyle)
@ -258,7 +261,7 @@ export function ZoomableImage ({ src, topLevel, ...props }) {
)
return (
(!me || !me.clickToLoadImg || isImgProxy)
(!me || !me.clickToLoadImg || isImgProxy || !useClickToLoad)
? img
: <ClickToLoad>{img}</ClickToLoad>