239 lines
8.7 KiB
JavaScript
239 lines
8.7 KiB
JavaScript
import React, { useCallback, useRef, useState } from 'react'
|
|
import ReactMarkdown from 'react-markdown'
|
|
import EmojiPickerButton from '../comments/EmojiPickerButton'
|
|
|
|
function ToolbarButton({ title, onClick, children, className = '' }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
title={title}
|
|
onMouseDown={(event) => {
|
|
event.preventDefault()
|
|
onClick?.()
|
|
}}
|
|
className={[
|
|
'inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-xs font-semibold text-white/60 transition',
|
|
'hover:bg-white/10 hover:text-white',
|
|
className,
|
|
].join(' ')}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default function UploadDescriptionEditor({ id, value, onChange, placeholder, error, rows = 8 }) {
|
|
const [tab, setTab] = useState('write')
|
|
const textareaRef = useRef(null)
|
|
|
|
const focusTextarea = useCallback(() => {
|
|
requestAnimationFrame(() => {
|
|
textareaRef.current?.focus()
|
|
})
|
|
}, [])
|
|
|
|
const wrapSelection = useCallback((before, after, placeholderText = 'text') => {
|
|
const textarea = textareaRef.current
|
|
if (!textarea) return
|
|
|
|
const current = String(value || '')
|
|
const start = textarea.selectionStart
|
|
const end = textarea.selectionEnd
|
|
const selected = current.slice(start, end)
|
|
const replacement = `${before}${selected || placeholderText}${after}`
|
|
const next = current.slice(0, start) + replacement + current.slice(end)
|
|
|
|
onChange?.(next)
|
|
|
|
requestAnimationFrame(() => {
|
|
textarea.focus()
|
|
if (selected) {
|
|
textarea.selectionStart = start + replacement.length
|
|
textarea.selectionEnd = start + replacement.length
|
|
} else {
|
|
textarea.selectionStart = start + before.length
|
|
textarea.selectionEnd = start + before.length + placeholderText.length
|
|
}
|
|
})
|
|
}, [onChange, value])
|
|
|
|
const prefixLines = useCallback((prefix) => {
|
|
const textarea = textareaRef.current
|
|
if (!textarea) return
|
|
|
|
const current = String(value || '')
|
|
const start = textarea.selectionStart
|
|
const end = textarea.selectionEnd
|
|
const selected = current.slice(start, end)
|
|
const fallback = prefix.endsWith('. ') ? `${prefix}item` : `${prefix}item`
|
|
const source = selected || fallback
|
|
const nextBlock = source.split('\n').map((line) => `${prefix}${line}`).join('\n')
|
|
const next = current.slice(0, start) + nextBlock + current.slice(end)
|
|
|
|
onChange?.(next)
|
|
|
|
requestAnimationFrame(() => {
|
|
textarea.focus()
|
|
textarea.selectionStart = start
|
|
textarea.selectionEnd = start + nextBlock.length
|
|
})
|
|
}, [onChange, value])
|
|
|
|
const insertLink = useCallback(() => {
|
|
const textarea = textareaRef.current
|
|
if (!textarea) return
|
|
|
|
const current = String(value || '')
|
|
const start = textarea.selectionStart
|
|
const end = textarea.selectionEnd
|
|
const selected = current.slice(start, end)
|
|
const replacement = selected && /^https?:\/\//i.test(selected)
|
|
? `[link](${selected})`
|
|
: `[link](https://)`
|
|
const next = current.slice(0, start) + replacement + current.slice(end)
|
|
|
|
onChange?.(next)
|
|
|
|
requestAnimationFrame(() => {
|
|
textarea.focus()
|
|
if (selected && /^https?:\/\//i.test(selected)) {
|
|
textarea.selectionStart = start + 1
|
|
textarea.selectionEnd = start + 5
|
|
} else {
|
|
const urlStart = start + replacement.indexOf('https://')
|
|
textarea.selectionStart = urlStart
|
|
textarea.selectionEnd = urlStart + 'https://'.length
|
|
}
|
|
})
|
|
}, [onChange, value])
|
|
|
|
const insertAtCursor = useCallback((text) => {
|
|
const textarea = textareaRef.current
|
|
if (!textarea) {
|
|
onChange?.(`${String(value || '')}${text}`)
|
|
return
|
|
}
|
|
|
|
const current = String(value || '')
|
|
const start = textarea.selectionStart ?? current.length
|
|
const end = textarea.selectionEnd ?? current.length
|
|
const next = current.slice(0, start) + text + current.slice(end)
|
|
|
|
onChange?.(next)
|
|
|
|
requestAnimationFrame(() => {
|
|
textarea.focus()
|
|
textarea.selectionStart = start + text.length
|
|
textarea.selectionEnd = start + text.length
|
|
})
|
|
}, [onChange, value])
|
|
|
|
const handleKeyDown = useCallback((event) => {
|
|
const withModifier = event.ctrlKey || event.metaKey
|
|
if (!withModifier) return
|
|
|
|
switch (event.key.toLowerCase()) {
|
|
case 'b':
|
|
event.preventDefault()
|
|
wrapSelection('**', '**')
|
|
break
|
|
case 'i':
|
|
event.preventDefault()
|
|
wrapSelection('*', '*')
|
|
break
|
|
case 'k':
|
|
event.preventDefault()
|
|
insertLink()
|
|
break
|
|
case 'e':
|
|
event.preventDefault()
|
|
wrapSelection('`', '`')
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}, [insertLink, wrapSelection])
|
|
|
|
const previewValue = String(value || '').trim()
|
|
|
|
return (
|
|
<div className={`overflow-hidden rounded-xl border bg-white/10 ${error ? 'border-red-300/60' : 'border-white/15'}`}>
|
|
<div className="flex items-center justify-between border-b border-white/10 px-2 py-1.5">
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => setTab('write')}
|
|
className={`rounded-md px-2.5 py-1 text-xs font-medium transition ${tab === 'write' ? 'bg-white/12 text-white' : 'text-white/55 hover:text-white/80'}`}
|
|
>
|
|
Write
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setTab('preview')}
|
|
className={`rounded-md px-2.5 py-1 text-xs font-medium transition ${tab === 'preview' ? 'bg-white/12 text-white' : 'text-white/55 hover:text-white/80'}`}
|
|
>
|
|
Preview
|
|
</button>
|
|
</div>
|
|
<div className="text-[11px] uppercase tracking-[0.16em] text-white/40">
|
|
Safe formatting only
|
|
</div>
|
|
</div>
|
|
|
|
{tab === 'write' && (
|
|
<>
|
|
<div className="flex flex-wrap items-center gap-1 border-b border-white/10 px-2 py-1">
|
|
<ToolbarButton title="Bold (Ctrl+B)" onClick={() => wrapSelection('**', '**')}>B</ToolbarButton>
|
|
<ToolbarButton title="Italic (Ctrl+I)" onClick={() => wrapSelection('*', '*')}>I</ToolbarButton>
|
|
<ToolbarButton title="Inline code (Ctrl+E)" onClick={() => wrapSelection('`', '`')}>{'</>'}</ToolbarButton>
|
|
<ToolbarButton title="Link (Ctrl+K)" onClick={insertLink}>Link</ToolbarButton>
|
|
<span className="mx-1 h-4 w-px bg-white/10" aria-hidden="true" />
|
|
<ToolbarButton title="Bulleted list" onClick={() => prefixLines('- ')}>List</ToolbarButton>
|
|
<ToolbarButton title="Numbered list" onClick={() => prefixLines('1. ')}>1.</ToolbarButton>
|
|
<ToolbarButton title="Quote" onClick={() => prefixLines('> ')}>Quote</ToolbarButton>
|
|
<span className="mx-1 h-4 w-px bg-white/10" aria-hidden="true" />
|
|
<EmojiPickerButton onEmojiSelect={insertAtCursor} className="h-8 w-8 rounded-md text-white/60 hover:bg-white/10 hover:text-white" />
|
|
</div>
|
|
|
|
<textarea
|
|
id={id}
|
|
ref={textareaRef}
|
|
value={value}
|
|
onChange={(event) => onChange?.(event.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
rows={rows}
|
|
className="w-full resize-y bg-transparent px-3 py-3 text-sm text-white placeholder-white/45 focus:outline-none"
|
|
placeholder={placeholder}
|
|
/>
|
|
|
|
<div className="flex flex-wrap items-center justify-between gap-2 px-3 pb-2 text-[11px] text-white/45">
|
|
<span>Supports bold, italic, code, links, lists, quotes, and emoji.</span>
|
|
<button type="button" onClick={focusTextarea} className="text-white/50 transition hover:text-white/80">Continue editing</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{tab === 'preview' && (
|
|
<div className="min-h-[188px] px-3 py-3">
|
|
{previewValue ? (
|
|
<div className="prose prose-invert prose-sm max-w-none text-white/85 [&_a]:text-sky-300 [&_a]:no-underline hover:[&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-white/20 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-white/10 [&_code]:px-1 [&_code]:py-0.5 [&_ul]:pl-4 [&_ol]:pl-4">
|
|
<ReactMarkdown
|
|
allowedElements={['p', 'strong', 'em', 'a', 'code', 'pre', 'ul', 'ol', 'li', 'blockquote', 'br']}
|
|
unwrapDisallowed
|
|
components={{
|
|
a: ({ href, children }) => (
|
|
<a href={href} target="_blank" rel="noopener noreferrer nofollow">{children}</a>
|
|
),
|
|
}}
|
|
>
|
|
{previewValue}
|
|
</ReactMarkdown>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm italic text-white/35">Nothing to preview yet.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
} |