fixes #1395 (#1430)

* fixes #1395

* rehype plugin for embeds

* fix lint

* replace many plugins with one rehype and improve image collage

* remove unused css

* handle more custom markdown behavior in rehype

* refactor markdown rendering more + better footnotes

* move more markdown logic to reyhpe plugin + better headers

* fix #1397

* refactor embeds out of media-or-link

components/carousel.js

@@ -120,7 +120,11 @@ export function CarouselProvider ({ children }) {
     media.current.set(src, { src, originalSrc, rel })
   }, [media.current])
 
-  const value = useMemo(() => ({ showCarousel, addMedia }), [showCarousel, addMedia])
+  const removeMedia = useCallback((src) => {
+    media.current.delete(src)
+  }, [media.current])
+
+  const value = useMemo(() => ({ showCarousel, addMedia, removeMedia }), [showCarousel, addMedia, removeMedia])
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
 }
 

components/embed.js

@@ -0,0 +1,204 @@
+import { memo, useEffect, useRef, useState } from 'react'
+import classNames from 'classnames'
+import useDarkMode from './dark-mode'
+import styles from './text.module.css'
+import { Button } from 'react-bootstrap'
+import { TwitterTweetEmbed } from 'react-twitter-embed'
+import YouTube from 'react-youtube'
+
+function TweetSkeleton ({ className }) {
+  return (
+    <div className={classNames(styles.tweetsSkeleton, className)}>
+      <div className={styles.tweetSkeleton}>
+        <div className={`${styles.img} clouds`} />
+        <div className={styles.content1}>
+          <div className={`${styles.line} clouds`} />
+          <div className={`${styles.line} clouds`} />
+          <div className={`${styles.line} clouds`} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, id }) {
+  const [show, setShow] = useState(false)
+  const iframeRef = useRef(null)
+
+  useEffect(() => {
+    if (!iframeRef.current) return
+
+    const setHeightFromIframe = (e) => {
+      if (e.origin !== 'https://njump.me' || !e?.data?.height || e.source !== iframeRef.current.contentWindow) return
+      iframeRef.current.height = `${e.data.height}px`
+    }
+
+    window?.addEventListener('message', setHeightFromIframe)
+
+    // https://github.com/vercel/next.js/issues/39451
+    iframeRef.current.src = `https://njump.me/${id}?embed=yes`
+
+    return () => {
+      window?.removeEventListener('message', setHeightFromIframe)
+    }
+  }, [iframeRef.current])
+
+  return (
+    <div className={classNames(styles.nostrContainer, !show && styles.twitterContained, className)}>
+      <iframe
+        ref={iframeRef}
+        width={topLevel ? '550px' : '350px'}
+        style={{ maxWidth: '100%' }}
+        height={iframeRef.current?.height || (topLevel ? '200px' : '150px')}
+        frameBorder='0'
+        sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox'
+        allow=''
+      />
+      {!show &&
+        <Button size='md' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
+          <div>show full note</div>
+          <small className='fw-normal fst-italic'>or other stuff</small>
+        </Button>}
+    </div>
+  )
+})
+
+const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
+  const iframeRef = useRef(null)
+
+  // https://open.spotify.com/track/1KFxcj3MZrpBGiGA8ZWriv?si=f024c3aa52294aa1
+  // Remove any additional path segments
+  const url = new URL(src)
+  url.pathname = url.pathname.replace(/\/intl-\w+\//, '/')
+
+  useEffect(() => {
+    if (!iframeRef.current) return
+
+    const id = url.pathname.split('/').pop()
+
+    // https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api
+    window.onSpotifyIframeApiReady = (IFrameAPI) => {
+      const options = {
+        uri: `spotify:episode:${id}`
+      }
+      const callback = (EmbedController) => {}
+      IFrameAPI.createController(iframeRef.current, options, callback)
+    }
+
+    return () => { window.onSpotifyIframeApiReady = null }
+  }, [iframeRef.current, url.pathname])
+
+  return (
+    <div className={classNames(styles.spotifyWrapper, className)}>
+      <iframe
+        ref={iframeRef}
+        title='Spotify Web Player'
+        src={`https://open.spotify.com/embed${url.pathname}`}
+        width='100%'
+        height='152'
+        allowFullScreen
+        frameBorder='0'
+        allow='encrypted-media; clipboard-write;'
+        style={{ borderRadius: '12px' }}
+        sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-presentation'
+      />
+    </div>
+  )
+}
+
+const Embed = memo(function Embed ({ src, provider, id, meta, className, topLevel, onError }) {
+  const [darkMode] = useDarkMode()
+  const [overflowing, setOverflowing] = useState(true)
+  const [show, setShow] = useState(false)
+
+  // This Twitter embed could use similar logic to the video embeds below
+  if (provider === 'twitter') {
+    return (
+      <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
+        <TwitterTweetEmbed
+          tweetId={id}
+          options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
+          key={darkMode ? '1' : '2'}
+          placeholder={<TweetSkeleton className={className} />}
+          onLoad={() => setOverflowing(true)}
+        />
+        {overflowing && !show &&
+          <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
+            show full tweet
+          </Button>}
+      </div>
+    )
+  }
+
+  if (provider === 'nostr') {
+    return (
+      <NostrEmbed src={src} className={className} topLevel={topLevel} id={id} />
+    )
+  }
+
+  if (provider === 'wavlake') {
+    return (
+      <div className={classNames(styles.wavlakeWrapper, className)}>
+        <iframe
+          src={`https://embed.wavlake.com/track/${id}`} width='100%' height='380' frameBorder='0'
+          allow='encrypted-media'
+          sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms allow-same-origin'
+        />
+      </div>
+    )
+  }
+
+  if (provider === 'spotify') {
+    return (
+      <SpotifyEmbed src={src} className={className} />
+    )
+  }
+
+  if (provider === 'youtube') {
+    return (
+      <div className={classNames(styles.videoWrapper, className)}>
+        <YouTube
+          videoId={id} className={styles.videoContainer} opts={{
+            playerVars: {
+              start: meta?.start || 0
+            }
+          }}
+        />
+      </div>
+    )
+  }
+
+  if (provider === 'rumble') {
+    return (
+      <div className={classNames(styles.videoWrapper, className)}>
+        <div className={styles.videoContainer}>
+          <iframe
+            title='Rumble Video'
+            allowFullScreen
+            src={meta?.href}
+            sandbox='allow-scripts'
+          />
+        </div>
+      </div>
+    )
+  }
+
+  if (provider === 'peertube') {
+    return (
+      <div className={classNames(styles.videoWrapper, className)}>
+        <div className={styles.videoContainer}>
+          <iframe
+            title='PeerTube Video'
+            allowFullScreen
+            src={meta?.href}
+            sandbox='allow-scripts'
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return null
+})
+
+export default Embed

components/form.js

@@ -393,7 +393,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
         {tab !== 'write' &&
           <div className='form-group'>
             <div className={`${styles.text} form-control`}>
-              <Text topLevel={topLevel} noFragments tab={tab}>{meta.value}</Text>
+              <Text topLevel={topLevel} tab={tab}>{meta.value}</Text>
             </div>
           </div>}
       </div>

components/media-or-link.js

@@ -1,13 +1,9 @@
 import styles from './text.module.css'
-import { useState, useEffect, useMemo, useCallback, memo, useRef } from 'react'
+import { useState, useEffect, useMemo, useCallback, memo } from 'react'
-import { decodeProxyUrl, IMGPROXY_URL_REGEXP, MEDIA_DOMAIN_REGEXP, parseEmbedUrl } from '@/lib/url'
+import { decodeProxyUrl, IMGPROXY_URL_REGEXP, MEDIA_DOMAIN_REGEXP } from '@/lib/url'
 import { useMe } from './me'
-import { Button } from 'react-bootstrap'
 import { UNKNOWN_LINK_REL } from '@/lib/constants'
 import classNames from 'classnames'
-import { TwitterTweetEmbed } from 'react-twitter-embed'
-import YouTube from 'react-youtube'
-import useDarkMode from './dark-mode'
 import { useCarousel } from './carousel'
 
 function LinkRaw ({ href, children, src, rel }) {
@@ -23,9 +19,15 @@ function LinkRaw ({ href, children, src, rel }) {
   )
 }
 
-const Media = memo(function Media ({ src, bestResSrc, srcSet, sizes, width, height, onClick, onError, style, className, video }) {
+const Media = memo(function Media ({
+  src, bestResSrc, srcSet, sizes, width,
+  height, onClick, onError, style, className, video
+}) {
   return (
-    <div className={classNames(className, styles.mediaContainer)} style={style}>
+    <div
+      className={classNames(className, styles.mediaContainer)}
+      style={style}
+    >
       {video
         ? <video
             src={src}
@@ -52,7 +54,7 @@ const Media = memo(function Media ({ src, bestResSrc, srcSet, sizes, width, heig
 export default function MediaOrLink ({ linkFallback = true, ...props }) {
   const media = useMediaHelper(props)
   const [error, setError] = useState(false)
-  const { showCarousel, addMedia } = useCarousel()
+  const { showCarousel, addMedia, removeMedia } = useCarousel()
 
   useEffect(() => {
     if (!media.image) return
@@ -64,8 +66,9 @@ export default function MediaOrLink ({ linkFallback = true, ...props }) {
 
   const handleError = useCallback((err) => {
     console.error('Error loading media', err)
+    removeMedia(media.bestResSrc)
     setError(true)
-  }, [setError])
+  }, [setError, removeMedia, media.bestResSrc])
 
   if (!media.src) return null
 
@@ -77,14 +80,6 @@ export default function MediaOrLink ({ linkFallback = true, ...props }) {
         />
       )
     }
-
-    if (media.embed) {
-      return (
-        <Embed
-          {...media.embed} topLevel={props.topLevel} src={media.src} onError={handleError}
-        />
-      )
-    }
   }
 
   if (linkFallback) {
@@ -102,11 +97,10 @@ export const useMediaHelper = ({ src, srcSet: srcSetIntital, topLevel, tab }) =>
   const [isImage, setIsImage] = useState(video === false && trusted)
   const [isVideo, setIsVideo] = useState(video)
   const showMedia = useMemo(() => tab === 'preview' || me?.privates?.showImagesAndVideos !== false, [tab, me?.privates?.showImagesAndVideos])
-  const embed = useMemo(() => parseEmbedUrl(src), [src])
 
   useEffect(() => {
     // don't load the video at all if user doesn't want these
-    if (!showMedia || isVideo || isImage || embed) return
+    if (!showMedia || isVideo || isImage) return
     // make sure it's not a false negative by trying to load URL as <img>
     const img = new window.Image()
     img.onload = () => setIsImage(true)
@@ -121,7 +115,7 @@ export const useMediaHelper = ({ src, srcSet: srcSetIntital, topLevel, tab }) =>
       video.onloadeddata = null
       video.src = ''
     }
-  }, [src, setIsImage, setIsVideo, showMedia, isVideo, embed])
+  }, [src, setIsImage, setIsVideo, showMedia, isVideo])
 
   const srcSet = useMemo(() => {
     if (Object.keys(srcSetObj).length === 0) return undefined
@@ -170,203 +164,7 @@ export const useMediaHelper = ({ src, srcSet: srcSetIntital, topLevel, tab }) =>
     style,
     width,
     height,
-    image: (!me?.privates?.imgproxyOnly || trusted) && showMedia && isImage && !isVideo && !embed,
+    image: (!me?.privates?.imgproxyOnly || trusted) && showMedia && isImage && !isVideo,
-    video: !me?.privates?.imgproxyOnly && showMedia && isVideo && !embed,
+    video: !me?.privates?.imgproxyOnly && showMedia && isVideo
-    embed: !me?.privates?.imgproxyOnly && showMedia && embed
   }
 }
-
-function TweetSkeleton ({ className }) {
-  return (
-    <div className={classNames(styles.tweetsSkeleton, className)}>
-      <div className={styles.tweetSkeleton}>
-        <div className={`${styles.img} clouds`} />
-        <div className={styles.content1}>
-          <div className={`${styles.line} clouds`} />
-          <div className={`${styles.line} clouds`} />
-          <div className={`${styles.line} clouds`} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, id }) {
-  const [show, setShow] = useState(false)
-  const iframeRef = useRef(null)
-
-  useEffect(() => {
-    if (!iframeRef.current) return
-
-    const setHeightFromIframe = (e) => {
-      if (e.origin !== 'https://njump.me' || !e?.data?.height || e.source !== iframeRef.current.contentWindow) return
-      iframeRef.current.height = `${e.data.height}px`
-    }
-
-    window?.addEventListener('message', setHeightFromIframe)
-
-    // https://github.com/vercel/next.js/issues/39451
-    iframeRef.current.src = `https://njump.me/${id}?embed=yes`
-
-    return () => {
-      window?.removeEventListener('message', setHeightFromIframe)
-    }
-  }, [iframeRef.current])
-
-  return (
-    <div className={classNames(styles.nostrContainer, !show && styles.twitterContained, className)}>
-      <iframe
-        ref={iframeRef}
-        width={topLevel ? '550px' : '350px'}
-        style={{ maxWidth: '100%' }}
-        height={iframeRef.current?.height || (topLevel ? '200px' : '150px')}
-        frameBorder='0'
-        sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox'
-        allow=''
-      />
-      {!show &&
-        <Button size='md' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
-          <div>show full note</div>
-          <small className='fw-normal fst-italic'>or other stuff</small>
-        </Button>}
-    </div>
-  )
-})
-
-const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
-  const iframeRef = useRef(null)
-
-  // https://open.spotify.com/track/1KFxcj3MZrpBGiGA8ZWriv?si=f024c3aa52294aa1
-  // Remove any additional path segments
-  const url = new URL(src)
-  url.pathname = url.pathname.replace(/\/intl-\w+\//, '/')
-
-  useEffect(() => {
-    if (!iframeRef.current) return
-
-    const id = url.pathname.split('/').pop()
-
-    // https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api
-    window.onSpotifyIframeApiReady = (IFrameAPI) => {
-      const options = {
-        uri: `spotify:episode:${id}`
-      }
-      const callback = (EmbedController) => {}
-      IFrameAPI.createController(iframeRef.current, options, callback)
-    }
-
-    return () => { window.onSpotifyIframeApiReady = null }
-  }, [iframeRef.current, url.pathname])
-
-  return (
-    <div className={classNames(styles.spotifyWrapper, className)}>
-      <iframe
-        ref={iframeRef}
-        title='Spotify Web Player'
-        src={`https://open.spotify.com/embed${url.pathname}`}
-        width='100%'
-        height='152'
-        allowFullScreen
-        frameBorder='0'
-        allow='encrypted-media; clipboard-write;'
-        style={{ borderRadius: '12px' }}
-        sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-presentation'
-      />
-    </div>
-  )
-}
-
-export const Embed = memo(function Embed ({ src, provider, id, meta, className, topLevel, onError }) {
-  const [darkMode] = useDarkMode()
-  const [overflowing, setOverflowing] = useState(true)
-  const [show, setShow] = useState(false)
-
-  // This Twitter embed could use similar logic to the video embeds below
-  if (provider === 'twitter') {
-    return (
-      <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
-        <TwitterTweetEmbed
-          tweetId={id}
-          options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
-          key={darkMode ? '1' : '2'}
-          placeholder={<TweetSkeleton className={className} />}
-          onLoad={() => setOverflowing(true)}
-        />
-        {overflowing && !show &&
-          <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
-            show full tweet
-          </Button>}
-      </div>
-    )
-  }
-
-  if (provider === 'nostr') {
-    return (
-      <NostrEmbed src={src} className={className} topLevel={topLevel} id={id} />
-    )
-  }
-
-  if (provider === 'wavlake') {
-    return (
-      <div className={classNames(styles.wavlakeWrapper, className)}>
-        <iframe
-          src={`https://embed.wavlake.com/track/${id}`} width='100%' height='380' frameBorder='0'
-          allow='encrypted-media'
-          sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms allow-same-origin'
-        />
-      </div>
-    )
-  }
-
-  if (provider === 'spotify') {
-    return (
-      <SpotifyEmbed src={src} className={className} />
-    )
-  }
-
-  if (provider === 'youtube') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <YouTube
-          videoId={id} className={styles.videoContainer} opts={{
-            playerVars: {
-              start: meta?.start || 0
-            }
-          }}
-        />
-      </div>
-    )
-  }
-
-  if (provider === 'rumble') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <div className={styles.videoContainer}>
-          <iframe
-            title='Rumble Video'
-            allowFullScreen
-            src={meta?.href}
-            sandbox='allow-scripts'
-          />
-        </div>
-      </div>
-    )
-  }
-
-  if (provider === 'peertube') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <div className={styles.videoContainer}>
-          <iframe
-            title='PeerTube Video'
-            allowFullScreen
-            src={meta?.href}
-            sandbox='allow-scripts'
-          />
-        </div>
-      </div>
-    )
-  }
-
-  return null
-})

components/text.js

@@ -3,18 +3,10 @@ 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 React, { useState, memo, useRef, useCallback, useMemo, useEffect } from 'react'
-import { slug } 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 MediaOrLink from './media-or-link'
-import { IMGPROXY_URL_REGEXP, parseInternalLinks, decodeProxyUrl } from '@/lib/url'
+import { IMGPROXY_URL_REGEXP, decodeProxyUrl } from '@/lib/url'
 import reactStringReplace from 'react-string-replace'
-import { rehypeInlineCodeProperty, rehypeStyler } from '@/lib/md'
 import { Button } from 'react-bootstrap'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
@@ -24,10 +16,23 @@ import UserPopover from './user-popover'
 import ItemPopover from './item-popover'
 import classNames from 'classnames'
 import { CarouselProvider, useCarousel } from './carousel'
+import rehypeSN from '@/lib/rehype-sn'
+import Embed from './embed'
 
-// Explicitely defined start/end tags & which CSS class from text.module.css to apply
+const rehypeSNStyled = () => rehypeSN({
-export const rehypeSuperscript = () => rehypeStyler('<sup>', '</sup>', styles.superscript)
+  stylers: [{
-export const rehypeSubscript = () => rehypeStyler('<sub>', '</sub>', styles.subscript)
+    startTag: '<sup>',
+    endTag: '</sup>',
+    className: styles.superscript
+  }, {
+    startTag: '<sub>',
+    endTag: '</sub>',
+    className: styles.subscript
+  }]
+})
+
+const remarkPlugins = [gfm]
+const rehypePlugins = [rehypeSNStyled]
 
 export function SearchText ({ text }) {
   return (
@@ -42,16 +47,17 @@ export function SearchText ({ text }) {
 }
 
 // this is one of the slowest components to render
-export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, outlawed, topLevel, noFragments }) {
+export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, children, tab, itemId, outlawed, topLevel }) {
   const [overflowing, setOverflowing] = useState(false)
   const router = useRouter()
   const [show, setShow] = useState(false)
   const containerRef = useRef(null)
 
+  // if we are navigating to a hash, show the full text
   useEffect(() => {
-    setShow(router.asPath.includes('#'))
+    setShow(router.asPath.includes('#') && !router.asPath.includes('#itemfn-'))
     const handleRouteChange = (url, { shallow }) => {
-      setShow(url.includes('#'))
+      setShow(url.includes('#') && !url.includes('#itemfn-'))
     }
 
     router.events.on('hashChangeStart', handleRouteChange)
@@ -59,8 +65,9 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
     return () => {
       router.events.off('hashChangeStart', handleRouteChange)
     }
-  }, [router])
+  }, [router.asPath, router.events])
 
+  // clip item and give it a`show full text` button if we are overflowing
   useEffect(() => {
     const container = containerRef.current
     if (!container || overflowing) return
@@ -83,213 +90,157 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
     }
   }, [containerRef.current, setOverflowing])
 
-  const Heading = useCallback(({ children, node, ...props }) => {
+  const TextMediaOrLink = useCallback(props => {
-    const [copied, setCopied] = useState(false)
+    return <MediaLink {...props} outlawed={outlawed} imgproxyUrls={imgproxyUrls} topLevel={topLevel} rel={rel} />
-    const nodeText = toString(node)
+  },
-    const id = useMemo(() => noFragments ? undefined : slug(nodeText.replace(/[^\w\-\s]+/gi, '')), [nodeText, noFragments])
+  [outlawed, imgproxyUrls, topLevel, rel])
-    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>
-    )
-  }, [topLevel, noFragments])
-
-  const Table = useCallback(({ node, ...props }) =>
-    <span className='table-responsive'>
-      <table className='table table-bordered table-sm' {...props} />
-    </span>, [])
-
-  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>
-        )
-  }, [])
-
-  const P = useCallback(({ children, node, ...props }) => <div className={styles.p} {...props}>{children}</div>, [])
-
-  const TextMediaOrLink = useCallback(({ node, src, ...props }) => {
-    const url = IMGPROXY_URL_REGEXP.test(src) ? decodeProxyUrl(src) : src
-    // if outlawed, render the media link as text
-    if (outlawed) {
-      return url
-    }
-    const srcSet = imgproxyUrls?.[url]
-
-    return <MediaOrLink srcSet={srcSet} tab={tab} src={src} rel={rel ?? UNKNOWN_LINK_REL} {...props} topLevel={topLevel} />
-  }, [imgproxyUrls, topLevel, tab, outlawed, rel])
 
   const components = useMemo(() => ({
-    h1: Heading,
+    h1: ({ node, id, ...props }) => <h1 id={topLevel ? id : undefined} {...props} />,
-    h2: Heading,
+    h2: ({ node, id, ...props }) => <h2 id={topLevel ? id : undefined} {...props} />,
-    h3: Heading,
+    h3: ({ node, id, ...props }) => <h3 id={topLevel ? id : undefined} {...props} />,
-    h4: Heading,
+    h4: ({ node, id, ...props }) => <h4 id={topLevel ? id : undefined} {...props} />,
-    h5: Heading,
+    h5: ({ node, id, ...props }) => <h5 id={topLevel ? id : undefined} {...props} />,
-    h6: Heading,
+    h6: ({ node, id, ...props }) => <h6 id={topLevel ? id : undefined} {...props} />,
     table: Table,
     p: P,
-    li: props => {
-      return <li {...props} id={props.id && itemId ? `${props.id}-${itemId}` : props.id} />
-    },
     code: Code,
+    mention: Mention,
+    sub: Sub,
+    item: Item,
+    footnote: Footnote,
+    headlink: ({ node, href, ...props }) => <Link href={href} {...props} />,
+    autolink: TextMediaOrLink,
     a: ({ node, href, children, ...props }) => {
-      children = children ? Array.isArray(children) ? children : [children] : []
-      // don't allow zoomable images to be wrapped in links
-      if (children.some(e => e?.props?.node?.tagName === 'img')) {
-        return <>{children}</>
-      }
-
       // if outlawed, render the link as text
       if (outlawed) {
         return href
       }
 
-      // If [text](url) was parsed as <a> and text is not empty and not a link itself,
+      // eslint-disable-next-line
-      // we don't render it as an image since it was probably a conscious choice to include text.
+      return <Link id={props.id} target='_blank' rel={rel} href={href}>{children}</Link>
-      const text = children[0]
-      let url
-      try {
-        url = !href.startsWith('/') && new URL(href)
-      } catch {
-        // ignore invalid URLs
-      }
-
-      const internalURL = process.env.NEXT_PUBLIC_URL
-      if (!!text && !/^https?:\/\//.test(text)) {
-        if (props['data-footnote-ref'] || typeof props['data-footnote-backref'] !== 'undefined') {
-          return (
-            <Link
-              {...props}
-              id={props.id && itemId ? `${props.id}-${itemId}` : props.id}
-              href={itemId ? `${href}-${itemId}` : href}
-            >{text}
-            </Link>
-          )
-        }
-        if (text.startsWith?.('@')) {
-          // user mention might be within a markdown link like this: [@user foo bar](url)
-          const name = text.replace('@', '').split(' ')[0]
-          return (
-            <UserPopover name={name}>
-              <Link
-                id={props.id}
-                href={href}
-              >
-                {text}
-              </Link>
-            </UserPopover>
-          )
-        } else if (href.startsWith('/') || url?.origin === internalURL) {
-          try {
-            const { linkText } = parseInternalLinks(href)
-            if (linkText) {
-              return (
-                <ItemPopover id={linkText.replace('#', '').split('/')[0]}>
-                  <Link href={href}>{text}</Link>
-                </ItemPopover>
-              )
-            }
-          } catch {
-            // ignore errors like invalid URLs
-          }
-
-          return (
-            <Link
-              id={props.id}
-              href={href}
-            >
-              {text}
-            </Link>
-          )
-        }
-        return (
-          // eslint-disable-next-line
-          <a id={props.id} target='_blank' rel={rel ?? UNKNOWN_LINK_REL} href={href}>{text}</a>
-        )
-      }
-
-      try {
-        const { linkText } = parseInternalLinks(href)
-        if (linkText) {
-          return (
-            <ItemPopover id={linkText.replace('#', '').split('/')[0]}>
-              <Link href={href}>{linkText}</Link>
-            </ItemPopover>
-          )
-        }
-      } catch {
-        // ignore errors like invalid URLs
-      }
-
-      // assume the link is an image which will fallback to link if it's not
-      return <TextMediaOrLink src={href} rel={rel ?? UNKNOWN_LINK_REL} {...props}>{children}</TextMediaOrLink>
     },
-    img: TextMediaOrLink
+    img: TextMediaOrLink,
-  }), [outlawed, rel, itemId, Code, P, Heading, Table, TextMediaOrLink])
+    embed: Embed
+  }), [outlawed, rel, TextMediaOrLink, topLevel])
 
-  const remarkPlugins = useMemo(() => [gfm, mention, sub], [])
-  const rehypePlugins = useMemo(() => [rehypeInlineCodeProperty, rehypeSuperscript, rehypeSubscript], [])
   const carousel = useCarousel()
 
+  const markdownContent = useMemo(() => (
+    <ReactMarkdown
+      components={components}
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      remarkRehypeOptions={{ clobberPrefix: `itemfn-${itemId}-` }}
+    >
+      {children}
+    </ReactMarkdown>
+  ), [components, remarkPlugins, rehypePlugins, children, itemId])
+
+  const showOverflow = useCallback(() => setShow(true), [setShow])
+
   return (
-    <div className={classNames(styles.text, topLevel && styles.topLevel, show ? styles.textUncontained : overflowing && styles.textContained)} ref={containerRef}>
+    <div
-      {carousel && tab !== 'preview'
+      className={classNames(
-        ? (
+        styles.text,
-          <ReactMarkdown
+        topLevel && styles.topLevel,
-            components={components}
+        show ? styles.textUncontained : overflowing && styles.textContained
-            remarkPlugins={remarkPlugins}
+      )}
-            rehypePlugins={rehypePlugins}
+      ref={containerRef}
-          >
+    >
-            {children}
+      {
-          </ReactMarkdown>)
+        carousel && tab !== 'preview'
-        : (
+          ? markdownContent
-          <CarouselProvider>
+          : <CarouselProvider>{markdownContent}</CarouselProvider>
-            <ReactMarkdown
+      }
-              components={components}
+      {overflowing && !show && (
-              remarkPlugins={remarkPlugins}
+        <Button
-              rehypePlugins={rehypePlugins}
+          size='lg'
-            >
+          variant='info'
-              {children}
+          className={styles.textShowFull}
-            </ReactMarkdown>
+          onClick={showOverflow}
-          </CarouselProvider>)}
+        >
-      {overflowing && !show &&
-        <Button size='lg' variant='info' className={styles.textShowFull} onClick={() => setShow(true)}>
           show full text
-        </Button>}
+        </Button>
+      )}
     </div>
   )
 }, isEqual)
+
+function Mention ({ children, node, href, name, id }) {
+  return (
+    <UserPopover name={name}>
+      <Link
+        id={id}
+        href={href}
+      >
+        {children}
+      </Link>
+    </UserPopover>
+  )
+}
+
+function Sub ({ children, node, href, ...props }) {
+  return <Link href={href}>{children}</Link>
+}
+
+function Item ({ children, node, href, id }) {
+  return (
+    <ItemPopover id={id}>
+      <Link href={href}>{children}</Link>
+    </ItemPopover>
+  )
+}
+
+function Footnote ({ children, node, ...props }) {
+  return (
+    <Link {...props}>{children}</Link>
+  )
+}
+
+function MediaLink ({
+  node, src, outlawed, imgproxyUrls, rel = UNKNOWN_LINK_REL, ...props
+}) {
+  const url = IMGPROXY_URL_REGEXP.test(src) ? decodeProxyUrl(src) : src
+  // if outlawed, render the media link as text
+  if (outlawed) {
+    return url
+  }
+
+  const srcSet = imgproxyUrls?.[url]
+
+  return <MediaOrLink srcSet={srcSet} src={src} rel={rel} {...props} />
+}
+
+function Table ({ node, ...props }) {
+  return (
+    <span className='table-responsive'>
+      <table className='table table-bordered table-sm' {...props} />
+    </span>
+  )
+}
+
+function Code ({ node, inline, className, children, style, ...props }) {
+  return inline
+    ? (
+      <code className={className} {...props}>
+        {children}
+      </code>
+      )
+    : (
+      <SyntaxHighlighter style={atomDark} language='text' PreTag='div' {...props}>
+        {children}
+      </SyntaxHighlighter>
+      )
+}
+
+function P ({ children, node, onlyImages, somethingBefore, somethingAfter, ...props }) {
+  return (
+    <div
+      className={classNames(styles.p, onlyImages && styles.onlyImages,
+        somethingBefore && styles.somethingBefore, somethingAfter && styles.somethingAfter)} {...props}
+    >
+      {children}
+    </div>
+  )
+}

components/text.module.css

@@ -9,11 +9,16 @@
     --grid-gap: 0.5rem;
 }
 
+.text.topLevel {
+    --grid-gap: 0.75rem;
+}
 
 .text :global(.footnotes) {
     font-size: smaller;
     color: #8b949e;
     border-top: 1px solid #30363d;
+    margin-top: calc(var(--grid-gap)* 0.5);
+    padding-top: 0 !important;
 }
 
   /* Hide the section label for visual users. */
@@ -37,6 +42,12 @@
     content: ']';
 }
 
+.text :global(sup:has([data-footnote-ref])) {
+    top: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+
 .textUncontained {
     max-height: none;
 }
@@ -110,33 +121,18 @@
     display: block;
     white-space: pre-wrap;
     word-break: break-word;
-    padding-top: .25rem;
+    padding-top: calc(var(--grid-gap) * 0.5);
-    padding-bottom: .25rem;
+    padding-bottom: calc(var(--grid-gap) * 0.5);
-}
-
-.text.topLevel .p {
-    padding-top: .375rem;
-    padding-bottom: .375rem;
 }
 
 .text>*:not(.heading) {
-    padding-top: .25rem;
+    padding-top: calc(var(--grid-gap) * 0.5);
-    padding-bottom: .25rem;
+    padding-bottom: calc(var(--grid-gap) * 0.5);
-}
-
-.text.topLevel>*:not(.heading) {
-    padding-top: .375rem;
-    padding-bottom: .375rem;
 }
 
 .text pre, .text blockquote {
-    margin-top: .25rem;
+    margin-top: calc(var(--grid-gap) * 0.5);
-    margin-bottom: .25rem;
+    margin-bottom: calc(var(--grid-gap) * 0.5);
-}
-
-.text.topLevel pre, .text.topLevel blockquote {
-    margin-top: .375rem;
-    margin-bottom: .375rem;
 }
 
 .text pre>div {
@@ -168,50 +164,50 @@
 
 .mediaContainer {
     display: block;
-    width: calc(100% - var(--grid-gap));
+    width: 100%;
-    max-width: calc(100% - var(--grid-gap));
+    max-width: 100%;
     height: auto;
     overflow: hidden;
     max-height: 25vh;
     aspect-ratio: var(--aspect-ratio);
+    margin: 0;
 }
 
-.p:has(> .mediaContainer) {
+.mediaContainer.hasTextSiblingsBefore {
-    white-space: normal;
+    margin-top: var(--grid-gap);
-    padding: 0 !important;
 }
 
-.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child),
+.mediaContainer.hasTextSiblingsAfter {
-.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) {
+    margin-bottom: var(--grid-gap);
-    display: inline-block;
+}
+
+.p:has(> .mediaContainer) .mediaContainer
+{
+    display: flex;
     width: min-content;
-    max-width: calc(100% - var(--grid-gap));
+    max-width: 100%;
 }
 
-.mediaContainer ~ .mediaContainer, .mediaContainer:has(+ .mediaContainer) {
+.p:has(> .mediaContainer) .mediaContainer img,
-    display: inline-block;
+.p:has(> .mediaContainer) .mediaContainer video
-    width: min-content;
+{
-    margin-right: var(--grid-gap);
-}
-
-.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child,
-.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child,
-.mediaContainer:first-child:has(+ .mediaContainer)  {
-    margin-right: var(--grid-gap);
-}
-
-.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child img,
-.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child img,
-.mediaContainer ~ .mediaContainer img,
-.mediaContainer:has(+ .mediaContainer) img {
     block-size: revert-layer;
     max-width: stretch;
 }
-.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child video,
+
-.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child video,
+.p.onlyImages {
-.mediaContainer ~ .mediaContainer video,
+    display: flex;
-.mediaContainer:has(+ .mediaContainer) video {
+    flex-direction: row;
-    block-size: stretch;
+    flex-wrap: wrap;
+    gap: var(--grid-gap);
+}
+
+.p.onlyImages:not(.somethingBefore) {
+    padding-top: 0;
+}
+
+.p.onlyImages:not(.somethingAfter) {
+    padding-bottom: 0;
 }
 
 .mediaContainer img, .mediaContainer video {
@@ -226,6 +222,7 @@
 .mediaContainer img {
     cursor: zoom-in;
     min-width: 30%;
+    max-width: 100%;
     object-position: left top;
 }
 
@@ -268,30 +265,29 @@
 .text h1, .text h2, .text h3, .text h4, .text h5, .text h6 {
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
-}
-
-.text h1 {
-    font-size: 1.6rem;
-}
-
-.text h2 {
-    font-size: 1.45rem;
-}
-
-.text h3 {
-    font-size: 1.3rem;
-}
-
-.text h4 {
-    font-size: 1.15rem;
-}
-
-.text h5 {
     font-size: 1rem;
 }
 
-.text h6 {
+.text h1 a, .text h2 a, .text h3 a, .text h4 a, .text h5 a, .text h6 a {
-    font-size: .85rem;
+    text-decoration: none;
+    --bs-text-opacity: 1;
+    color: inherit !important;
+}
+
+.topLevel.text h1 {
+    font-size: 1.6rem;
+}
+
+.topLevel.text h2 {
+    font-size: 1.45rem;
+}
+
+.topLevel.text h3 {
+    font-size: 1.3rem;
+}
+
+.topLevel.text h4 {
+    font-size: 1.15rem;
 }
 
 
@@ -306,17 +302,9 @@
     font-size: smaller;
 }
 
-.twitterContainer, .nostrContainer, .videoWrapper, .wavlakeWrapper, .spotifyWrapper, .mediaContainer {
+.twitterContainer, .nostrContainer, .videoWrapper, .wavlakeWrapper, .spotifyWrapper {
-    margin-top: 0.25rem;
+    margin-top: calc(var(--grid-gap) * 0.5);
-    margin-bottom: 0.25rem;
+    margin-bottom: calc(var(--grid-gap) * 0.5);
-}
-
-.topLevel .twitterContainer, .topLevel .nostrContainer, .topLevel .videoWrapper,
-.topLevel .wavlakeWrapper, .topLevel .spotifyWrapper, .topLevel .mediaContainer,
-:global(.topLevel) .twitterContainer, :global(.topLevel) .nostrContainer, :global(.topLevel) .videoWrapper,
-:global(.topLevel) .wavlakeWrapper, :global(.topLevel) .spotifyWrapper, :global(.topLevel) .mediaContainer {
-    margin-top: 0.375rem;
-    margin-bottom: 0.375rem;
 }
 
 .videoWrapper {

lib/md.js

@@ -19,45 +19,6 @@ export function mdHas (md, test) {
   return found
 }
 
-export function rehypeInlineCodeProperty () {
-  return function (tree) {
-    visit(tree, { tagName: 'code' }, function (node, index, parent) {
-      if (parent && parent.tagName === 'pre') {
-        node.properties.inline = false
-      } else {
-        node.properties.inline = true
-      }
-    })
-  }
-}
-
-export function rehypeStyler (startTag, endTag, className) {
-  return function (tree) {
-    visit(tree, 'element', (node) => {
-      for (let i = 0; i < node.children.length; i += 1) {
-        const start = node.children[i]
-        const text = node.children[i + 1]
-        const end = node.children[i + 2]
-
-        // is this a children slice wrapped with the tags we're looking for?
-        const isWrapped =
-          start?.type === 'raw' && start?.value === startTag &&
-          text?.type === 'text' &&
-          end?.type === 'raw' && end?.value === endTag
-        if (!isWrapped) continue
-
-        const newChildren = {
-          type: 'element',
-          tagName: 'span',
-          properties: { className: [className] },
-          children: [{ type: 'text', value: text.value }]
-        }
-        node.children.splice(i, 3, newChildren)
-      }
-    })
-  }
-}
-
 export function extractUrls (md) {
   if (!md) return []
   const tree = fromMarkdown(md, {

lib/rehype-sn.js

@@ -0,0 +1,230 @@
+import { SKIP, visit } from 'unist-util-visit'
+import { parseEmbedUrl, parseInternalLinks } from './url'
+import { slug } from 'github-slugger'
+import { toString } from 'mdast-util-to-string'
+
+const userGroup = '[\\w_]+'
+const subGroup = '[A-Za-z][\\w_]+'
+
+const mentionRegex = new RegExp('@(' + userGroup + '(?:\\/' + userGroup + ')?)', 'gi')
+const subRegex = new RegExp('~(' + subGroup + '(?:\\/' + subGroup + ')?)', 'gi')
+
+export default function rehypeSN (options = {}) {
+  const { stylers = [] } = options
+
+  return function transformer (tree) {
+    try {
+      visit(tree, (node, index, parent) => {
+        // Handle inline code property
+        if (node.tagName === 'code') {
+          node.properties.inline = !(parent && parent.tagName === 'pre')
+        }
+
+        if (node.type === 'element' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(node.tagName) && !node.properties.id) {
+          const nodeText = toString(node)
+          const headingId = slug(nodeText.replace(/[^\w\-\s]+/gi, ''))
+          node.properties.id = headingId
+
+          // Create a new link element
+          const linkElement = {
+            type: 'element',
+            tagName: 'headlink',
+            properties: {
+              href: `#${headingId}`
+            },
+            children: node.children
+          }
+
+          // Replace the heading's children with the new link element
+          node.children = [linkElement]
+        }
+
+        // if img is wrapped in a link, remove the link
+        if (node.tagName === 'a' && node.children.length === 1 && node.children[0].tagName === 'img') {
+          parent.children[index] = node.children[0]
+          return index
+        }
+
+        // handle internal links
+        if (node.tagName === 'a') {
+          try {
+            if (node.properties.href.includes('#itemfn-')) {
+              node.tagName = 'footnote'
+            } else {
+              const { itemId, linkText } = parseInternalLinks(node.properties.href)
+              if (itemId) {
+                node.tagName = 'item'
+                node.properties.id = itemId
+                if (node.properties.href === toString(node)) {
+                  node.children[0].value = linkText
+                }
+              }
+            }
+          } catch {
+            // ignore errors like invalid URLs
+          }
+        }
+
+        // only show a link as an embed if it doesn't have text siblings
+        if (node.tagName === 'a' &&
+                  !parent.children.some(s => s.type === 'text' && s.value.trim()) &&
+                  toString(node) === node.properties.href) {
+          const embed = parseEmbedUrl(node.properties.href)
+          if (embed) {
+            node.tagName = 'embed'
+            node.properties = { ...embed, src: node.properties.href }
+          } else {
+            node.tagName = 'autolink'
+          }
+        }
+
+        // if the link text is a URL, just show the URL
+        if (node.tagName === 'a' && isMisleadingLink(toString(node), node.properties.href)) {
+          node.children = [{ type: 'text', value: node.properties.href }]
+          return [SKIP]
+        }
+
+        // Handle @mentions and ~subs
+        if (node.type === 'text') {
+          const newChildren = []
+          let lastIndex = 0
+          let match
+
+          const combinedRegex = new RegExp(mentionRegex.source + '|' + subRegex.source, 'gi')
+
+          while ((match = combinedRegex.exec(node.value)) !== null) {
+            if (lastIndex < match.index) {
+              newChildren.push({ type: 'text', value: node.value.slice(lastIndex, match.index) })
+            }
+
+            const [fullMatch, mentionMatch, subMatch] = match
+            const replacement = mentionMatch ? replaceMention(fullMatch, mentionMatch) : replaceSub(fullMatch, subMatch)
+
+            if (replacement) {
+              newChildren.push(replacement)
+            } else {
+              newChildren.push({ type: 'text', value: fullMatch })
+            }
+
+            lastIndex = combinedRegex.lastIndex
+          }
+
+          if (lastIndex < node.value.length) {
+            newChildren.push({ type: 'text', value: node.value.slice(lastIndex) })
+          }
+
+          if (newChildren.length > 0) {
+            parent.children.splice(index, 1, ...newChildren)
+            return index + newChildren.length
+          }
+        }
+
+        // handle custom tags
+        if (node.type === 'element') {
+          for (const { startTag, endTag, className } of stylers) {
+            for (let i = 0; i < node.children.length - 2; i++) {
+              const [start, text, end] = node.children.slice(i, i + 3)
+
+              if (start?.type === 'raw' && start?.value === startTag &&
+                  text?.type === 'text' &&
+                  end?.type === 'raw' && end?.value === endTag) {
+                const newChild = {
+                  type: 'element',
+                  tagName: 'span',
+                  properties: { className: [className] },
+                  children: [{ type: 'text', value: text.value }]
+                }
+                node.children.splice(i, 3, newChild)
+              }
+            }
+          }
+        }
+
+        // merge adjacent images and empty paragraphs into a single image collage
+        if ((node.tagName === 'img' || isImageOnlyParagraph(node)) && Array.isArray(parent.children)) {
+          const adjacentNodes = [node]
+          let nextIndex = index + 1
+          const siblings = parent.children
+          const somethingBefore = parent.children[index - 1] && parent.children[index - 1].tagName !== 'p'
+          let somethingAfter = false
+
+          while (nextIndex < siblings.length) {
+            const nextNode = siblings[nextIndex]
+            if (!nextNode) break
+            if (nextNode.tagName === 'img' || isImageOnlyParagraph(nextNode)) {
+              adjacentNodes.push(nextNode)
+              nextIndex++
+            } else if (nextNode.type === 'text' && typeof nextNode.value === 'string' && !nextNode.value.trim()) {
+              nextIndex++
+            } else {
+              somethingAfter = true
+              break
+            }
+          }
+
+          if (adjacentNodes.length > 0) {
+            const allImages = adjacentNodes.flatMap(n =>
+              n.tagName === 'img' ? [n] : (Array.isArray(n.children) ? n.children.filter(child => child.tagName === 'img') : [])
+            )
+            const collageNode = {
+              type: 'element',
+              tagName: 'p',
+              children: allImages,
+              properties: { onlyImages: true, somethingBefore, somethingAfter }
+            }
+            parent.children.splice(index, nextIndex - index, collageNode)
+            return index + 1
+          }
+        }
+      })
+    } catch (error) {
+      console.error('Error in rehypeSN transformer:', error)
+    }
+
+    return tree
+  }
+
+  function isImageOnlyParagraph (node) {
+    return node &&
+        node.tagName === 'p' &&
+        Array.isArray(node.children) &&
+        node.children.every(child =>
+          (child.tagName === 'img') ||
+          (child.type === 'text' && typeof child.value === 'string' && !child.value.trim())
+        )
+  }
+
+  function replaceMention (value, username) {
+    return {
+      type: 'element',
+      tagName: 'mention',
+      properties: { href: '/' + username, name: username },
+      children: [{ type: 'text', value }]
+    }
+  }
+
+  function replaceSub (value, sub) {
+    return {
+      type: 'element',
+      tagName: 'sub',
+      properties: { href: '/~' + sub, name: sub },
+      children: [{ type: 'text', value }]
+    }
+  }
+
+  function isMisleadingLink (text, href) {
+    let misleading = false
+
+    if (/^\s*(\w+\.)+\w+/.test(text)) {
+      try {
+        const hrefUrl = new URL(href)
+
+        if (new URL(hrefUrl.protocol + text).origin !== hrefUrl.origin) {
+          misleading = true
+        }
+      } catch {}
+    }
+
+    return misleading
+  }
+}

lib/remark-mention.js

@@ -1,38 +0,0 @@
-import { findAndReplace } from 'mdast-util-find-and-replace'
-
-const userGroup = '[\\w_]+'
-
-const mentionRegex = new RegExp(
-  '@(' + userGroup + '(?:\\/' + userGroup + ')?)',
-  'gi'
-)
-
-export default function mention (options) {
-  return function transformer (tree) {
-    findAndReplace(
-      tree,
-      [
-        [mentionRegex, replaceMention]
-      ],
-      { ignore: ['link', 'linkReference'] }
-    )
-  }
-
-  function replaceMention (value, username, match) {
-    if (
-      /[\w`]/.test(match.input.charAt(match.index - 1)) ||
-      /[/\w`]/.test(match.input.charAt(match.index + value.length))
-    ) {
-      return false
-    }
-
-    const node = { type: 'text', value }
-
-    return {
-      type: 'link',
-      title: null,
-      url: '/' + username,
-      children: [node]
-    }
-  }
-}

lib/remark-sub.js

@@ -1,38 +0,0 @@
-import { findAndReplace } from 'mdast-util-find-and-replace'
-
-const subGroup = '[A-Za-z][\\w_]+'
-
-const subRegex = new RegExp(
-  '~(' + subGroup + '(?:\\/' + subGroup + ')?)',
-  'gi'
-)
-
-export default function sub (options) {
-  return function transformer (tree) {
-    findAndReplace(
-      tree,
-      [
-        [subRegex, replaceSub]
-      ],
-      { ignore: ['link', 'linkReference'] }
-    )
-  }
-
-  function replaceSub (value, sub, match) {
-    if (
-      /[\w`]/.test(match.input.charAt(match.index - 1)) ||
-      /[/\w`]/.test(match.input.charAt(match.index + value.length))
-    ) {
-      return false
-    }
-
-    const node = { type: 'text', value }
-
-    return {
-      type: 'link',
-      title: null,
-      url: '/~' + sub,
-      children: [node]
-    }
-  }
-}

lib/url.js

@@ -177,7 +177,7 @@ export function parseEmbedUrl (href) {
       }
     }
   } catch (err) {
-    console.error('Error parsing embed URL:', err)
+    console.log('Error parsing embed URL:', href)
   }
 
   return null

styles/globals.scss

@@ -940,6 +940,10 @@ div[contenteditable]:focus,
   animation: flipX 2s linear infinite;
 }
 
+.topLevel {
+  --grid-gap: 0.75rem;
+}
+
 @keyframes flipY {
   from {
     transform: rotateY(0deg);