Compass/web/components/editor/image.tsx

import {Image} from '@tiptap/extension-image'
import clsx from 'clsx'
import {useState} from 'react'

export const BasicImage = Image.extend({
  renderReact: (attrs: any) => <img loading="lazy" {...attrs} alt={attrs.alt ?? ''} />,
})

export const DisplayImage = Image.extend({
  renderReact: (attrs: any) => <ExpandingImage {...attrs} />,
})

export const MediumDisplayImage = Image.extend({
  renderReact: (attrs: any) => <ExpandingImage size={'md'} {...attrs} />,
})

function ExpandingImage(props: {src: string; alt?: string; title?: string; size?: 'md'}) {
  const [expanded, setExpanded] = useState(false)
  const {size, alt, ...rest} = props

  return (
    <>
      <img
        loading="lazy"
        alt={alt ?? ''}
        {...rest}
        onClick={() => setExpanded(true)}
        className={clsx(
          'cursor-pointer object-contain',
          size === 'md' ? 'max-h-[400px]' : 'h-[128px]',
        )}
        height={size === 'md' ? 400 : 128}
      />
      {expanded && (
        <div
          className="bg-opacity fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60"
          onClick={() => setExpanded(false)}
        >
          <img alt={alt ?? ''} {...rest} className="max-h-full cursor-pointer object-contain" />
        </div>
      )}
    </>
  )
}