317 lines
9.5 KiB
JavaScript
317 lines
9.5 KiB
JavaScript
import React, { useCallback, useEffect, useRef } from 'react'
|
|
import { mergeAttributes } from '@tiptap/core'
|
|
import Image from '@tiptap/extension-image'
|
|
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
|
|
|
|
function clamp(value, min, max) {
|
|
return Math.min(max, Math.max(min, value))
|
|
}
|
|
|
|
function parsePixelValue(rawValue) {
|
|
const normalized = String(rawValue || '').trim()
|
|
|
|
if (!normalized) {
|
|
return null
|
|
}
|
|
|
|
const parsed = Number.parseFloat(normalized.replace(/px$/i, ''))
|
|
return Number.isFinite(parsed) ? Math.round(parsed) : null
|
|
}
|
|
|
|
function readImageAttrs(element) {
|
|
const imageElement = element.tagName?.toLowerCase() === 'img'
|
|
? element
|
|
: element.querySelector?.('img')
|
|
|
|
const captionElement = element.querySelector?.('figcaption')
|
|
|
|
return {
|
|
src: imageElement?.getAttribute('src') || '',
|
|
alt: imageElement?.getAttribute('alt') || '',
|
|
title: imageElement?.getAttribute('title') || '',
|
|
caption: captionElement?.textContent?.trim() || '',
|
|
width: parsePixelValue(
|
|
element.getAttribute?.('data-width')
|
|
|| element.getAttribute?.('width')
|
|
|| imageElement?.getAttribute('width')
|
|
|| element.style?.width
|
|
|| '',
|
|
),
|
|
}
|
|
}
|
|
|
|
function RichImageNodeView({ editor, node, selected, updateAttributes, deleteNode, getPos }) {
|
|
const imageRef = useRef(null)
|
|
const cleanupResizeRef = useRef(null)
|
|
|
|
useEffect(() => () => {
|
|
if (typeof cleanupResizeRef.current === 'function') {
|
|
cleanupResizeRef.current()
|
|
}
|
|
}, [])
|
|
|
|
const selectNode = useCallback(() => {
|
|
if (!editor || typeof getPos !== 'function') {
|
|
return
|
|
}
|
|
|
|
editor.chain().focus().setNodeSelection(getPos()).run()
|
|
}, [editor, getPos])
|
|
|
|
const startResize = useCallback((event) => {
|
|
if (!imageRef.current || event.button !== 0) {
|
|
return
|
|
}
|
|
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
selectNode()
|
|
|
|
const imageElement = imageRef.current
|
|
const parentWidth = imageElement.parentElement?.getBoundingClientRect().width || imageElement.getBoundingClientRect().width || 0
|
|
const startX = event.clientX
|
|
const startWidth = node.attrs.width || Math.round(imageElement.getBoundingClientRect().width) || 0
|
|
const minWidth = 180
|
|
const maxWidth = Math.max(minWidth, Math.round(parentWidth || 1280))
|
|
|
|
const handleMove = (moveEvent) => {
|
|
const nextWidth = clamp(Math.round(startWidth + (moveEvent.clientX - startX)), minWidth, maxWidth)
|
|
updateAttributes({ width: nextWidth })
|
|
}
|
|
|
|
const handleUp = () => {
|
|
window.removeEventListener('pointermove', handleMove)
|
|
window.removeEventListener('pointerup', handleUp)
|
|
cleanupResizeRef.current = null
|
|
}
|
|
|
|
cleanupResizeRef.current = handleUp
|
|
window.addEventListener('pointermove', handleMove)
|
|
window.addEventListener('pointerup', handleUp)
|
|
}, [node.attrs.width, selectNode, updateAttributes])
|
|
|
|
const width = Number.isFinite(Number(node.attrs.width)) && Number(node.attrs.width) > 0
|
|
? Number(node.attrs.width)
|
|
: null
|
|
|
|
return (
|
|
<NodeViewWrapper
|
|
as="figure"
|
|
className={[
|
|
'rich-image-node',
|
|
selected ? 'is-selected' : '',
|
|
].filter(Boolean).join(' ')}
|
|
data-rich-image="true"
|
|
onMouseDown={(event) => {
|
|
if (event.target instanceof HTMLElement && event.target.closest('input, textarea, button, select, label')) {
|
|
return
|
|
}
|
|
|
|
selectNode()
|
|
}}
|
|
>
|
|
<div className="rich-image-node__frame">
|
|
<img
|
|
ref={imageRef}
|
|
src={node.attrs.src}
|
|
alt={node.attrs.alt || ''}
|
|
title={node.attrs.title || ''}
|
|
className="rich-image-node__img"
|
|
style={width ? { width: `${width}px` } : undefined}
|
|
/>
|
|
|
|
{selected ? (
|
|
<button
|
|
type="button"
|
|
data-drag-handle
|
|
className="rich-image-node__drag-handle"
|
|
title="Drag to move image"
|
|
onMouseDown={selectNode}
|
|
>
|
|
<i className="fa-solid fa-grip-lines" />
|
|
</button>
|
|
) : null}
|
|
|
|
{selected ? (
|
|
<button
|
|
type="button"
|
|
className="rich-image-node__resize-handle"
|
|
title="Resize image"
|
|
onPointerDown={startResize}
|
|
>
|
|
<i className="fa-solid fa-up-right-and-down-left-from-center" />
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
{!selected && node.attrs.caption ? (
|
|
<figcaption className="rich-image-node__caption">{node.attrs.caption}</figcaption>
|
|
) : null}
|
|
|
|
{selected ? (
|
|
<div className="rich-image-node__editor" contentEditable={false}>
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Alt text</span>
|
|
<input
|
|
value={node.attrs.alt || ''}
|
|
onChange={(event) => updateAttributes({ alt: event.target.value })}
|
|
placeholder="Describe the image for screen readers"
|
|
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
|
/>
|
|
</label>
|
|
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Caption</span>
|
|
<input
|
|
value={node.attrs.caption || ''}
|
|
onChange={(event) => updateAttributes({ caption: event.target.value })}
|
|
placeholder="Visible caption below the image"
|
|
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_auto] md:items-end">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Width</span>
|
|
<input
|
|
type="number"
|
|
min="180"
|
|
max="2400"
|
|
value={width || ''}
|
|
onChange={(event) => {
|
|
const nextValue = Number.parseInt(event.target.value, 10)
|
|
updateAttributes({ width: Number.isFinite(nextValue) ? nextValue : null })
|
|
}}
|
|
placeholder="Auto"
|
|
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
|
/>
|
|
</label>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => updateAttributes({ width: null })}
|
|
className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
|
|
>
|
|
Fit
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={deleteNode}
|
|
className="rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</NodeViewWrapper>
|
|
)
|
|
}
|
|
|
|
const RichImage = Image.extend({
|
|
addOptions() {
|
|
return {
|
|
...this.parent?.(),
|
|
HTMLAttributes: {
|
|
class: 'rich-image-node',
|
|
},
|
|
}
|
|
},
|
|
|
|
addAttributes() {
|
|
return {
|
|
...this.parent?.(),
|
|
alt: {
|
|
default: '',
|
|
},
|
|
title: {
|
|
default: '',
|
|
},
|
|
caption: {
|
|
default: '',
|
|
},
|
|
width: {
|
|
default: null,
|
|
parseHTML: (element) => parsePixelValue(
|
|
element.getAttribute?.('data-width')
|
|
|| element.getAttribute?.('width')
|
|
|| element.style?.width
|
|
|| '',
|
|
),
|
|
renderHTML: (attributes) => {
|
|
const width = Number(attributes.width)
|
|
|
|
if (!Number.isFinite(width) || width <= 0) {
|
|
return {}
|
|
}
|
|
|
|
return {
|
|
'data-width': String(Math.round(width)),
|
|
style: `width:${Math.round(width)}px;max-width:100%;`,
|
|
}
|
|
},
|
|
},
|
|
}
|
|
},
|
|
|
|
parseHTML() {
|
|
return [
|
|
{
|
|
tag: 'figure[data-rich-image]',
|
|
getAttrs: (element) => readImageAttrs(element),
|
|
},
|
|
{
|
|
tag: 'img[src]',
|
|
getAttrs: (element) => readImageAttrs(element),
|
|
},
|
|
]
|
|
},
|
|
|
|
renderHTML({ node, HTMLAttributes }) {
|
|
const {
|
|
src: _src,
|
|
alt: _alt,
|
|
title: _title,
|
|
caption: _caption,
|
|
width: _width,
|
|
'data-width': _dataWidth,
|
|
...figureHTMLAttributes
|
|
} = HTMLAttributes
|
|
|
|
const figureAttributes = mergeAttributes(this.options.HTMLAttributes, figureHTMLAttributes, {
|
|
'data-rich-image': 'true',
|
|
})
|
|
const imageAttributes = {
|
|
src: node.attrs.src,
|
|
alt: node.attrs.alt || '',
|
|
title: node.attrs.title || '',
|
|
loading: 'lazy',
|
|
decoding: 'async',
|
|
}
|
|
|
|
if (Number.isFinite(Number(node.attrs.width)) && Number(node.attrs.width) > 0) {
|
|
const width = Math.round(Number(node.attrs.width))
|
|
imageAttributes.style = `width:${width}px;max-width:100%;`
|
|
imageAttributes['data-width'] = String(width)
|
|
}
|
|
|
|
const children = [
|
|
['img', imageAttributes],
|
|
]
|
|
|
|
if (node.attrs.caption) {
|
|
children.push(['figcaption', { class: 'rich-image-node__caption' }, node.attrs.caption])
|
|
}
|
|
|
|
return ['figure', figureAttributes, ...children]
|
|
},
|
|
|
|
addNodeView() {
|
|
return ReactNodeViewRenderer(RichImageNodeView)
|
|
},
|
|
})
|
|
|
|
export default RichImage |