News: normalize category select values; fix Studio news editor category persistence; add CSV→SQL generator and news_dates.sql
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { router, useForm, usePage } from '@inertiajs/react'
|
||||
import StudioLayout from '../../Layouts/StudioLayout'
|
||||
import RichTextEditor from '../../components/forum/RichTextEditor'
|
||||
@@ -92,6 +93,48 @@ function normalizeNewTagName(value) {
|
||||
return String(value || '').replace(/\s+/g, ' ').trim().slice(0, 80)
|
||||
}
|
||||
|
||||
function normalizeNewsTagKey(value) {
|
||||
return normalizeNewTagName(value).toLowerCase()
|
||||
}
|
||||
|
||||
function parseNewsTagList(input) {
|
||||
return String(input || '')
|
||||
.split(/[\n,]+/)
|
||||
.map((item) => normalizeNewTagName(item))
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
function analyzePastedNewsTags(rawText, selectedKeys) {
|
||||
const parts = parseNewsTagList(rawText)
|
||||
const tagsToAdd = []
|
||||
const skippedDuplicates = []
|
||||
const skippedInvalid = []
|
||||
|
||||
for (const part of parts) {
|
||||
const normalized = normalizeNewTagName(part)
|
||||
const key = normalizeNewsTagKey(normalized)
|
||||
|
||||
if (!normalized || !key) {
|
||||
skippedInvalid.push(String(part || '').trim())
|
||||
continue
|
||||
}
|
||||
|
||||
if (selectedKeys.includes(key) || tagsToAdd.some((item) => item.key === key)) {
|
||||
skippedDuplicates.push(normalized)
|
||||
continue
|
||||
}
|
||||
|
||||
tagsToAdd.push({ key, name: normalized })
|
||||
}
|
||||
|
||||
return {
|
||||
parsedCount: parts.length,
|
||||
tagsToAdd,
|
||||
skippedDuplicates,
|
||||
skippedInvalid,
|
||||
}
|
||||
}
|
||||
|
||||
function SectionCard({ eyebrow, title, description, actions, children, tone = 'default' }) {
|
||||
const toneClass = tone === 'feature'
|
||||
? 'bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_38%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] shadow-[0_24px_70px_rgba(2,6,23,0.28)]'
|
||||
@@ -112,138 +155,373 @@ function SectionCard({ eyebrow, title, description, actions, children, tone = 'd
|
||||
)
|
||||
}
|
||||
|
||||
function TagPicker({ options, selectedIds, newTagNames, tagQuery, onTagQueryChange, onToggle, onCreateTag, onRemoveNewTag, manageUrl }) {
|
||||
const selectedTags = useMemo(() => options.filter((tag) => selectedIds.includes(tag.id)), [options, selectedIds])
|
||||
const normalizedQuery = useMemo(() => normalizeNewTagName(tagQuery), [tagQuery])
|
||||
const matchingExistingTag = useMemo(() => {
|
||||
if (!normalizedQuery) return null
|
||||
function NewsTagInputDialog({ open, preview, onClose, onConfirm }) {
|
||||
const backdropRef = useRef(null)
|
||||
|
||||
const lowerQuery = normalizedQuery.toLowerCase()
|
||||
useEffect(() => {
|
||||
if (!open) return undefined
|
||||
|
||||
return options.find((tag) => String(tag.name || '').toLowerCase() === lowerQuery) || null
|
||||
}, [options, normalizedQuery])
|
||||
const queryMatchesPending = useMemo(() => {
|
||||
if (!normalizedQuery) return false
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
onClose?.()
|
||||
}
|
||||
}
|
||||
|
||||
const lowerQuery = normalizedQuery.toLowerCase()
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [onClose, open])
|
||||
|
||||
return newTagNames.some((tagName) => tagName.toLowerCase() === lowerQuery)
|
||||
}, [newTagNames, normalizedQuery])
|
||||
if (!open || !preview) return null
|
||||
|
||||
const availableTags = useMemo(() => {
|
||||
const query = String(tagQuery || '').trim().toLowerCase()
|
||||
return createPortal(
|
||||
<div
|
||||
ref={backdropRef}
|
||||
className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#04070dcc] px-4 backdrop-blur-md"
|
||||
onClick={(event) => {
|
||||
if (event.target === backdropRef.current) {
|
||||
onClose?.()
|
||||
}
|
||||
}}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="news-tag-import-title"
|
||||
className="w-full max-w-lg overflow-hidden rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(16,22,34,0.98),rgba(8,12,19,0.98))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]"
|
||||
>
|
||||
<div className="border-b border-white/[0.06] bg-white/[0.02] px-6 py-5">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/35">Tag Import</p>
|
||||
<h3 id="news-tag-import-title" className="mt-2 text-lg font-semibold text-white">
|
||||
Add {preview.tagsToAdd.length} pasted tag{preview.tagsToAdd.length === 1 ? '' : 's'}?
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-6 text-white/65">
|
||||
Parsed {preview.parsedCount} item{preview.parsedCount === 1 ? '' : 's'} from your paste. Confirm before adding them to the article.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
return options
|
||||
.filter((tag) => !selectedIds.includes(tag.id))
|
||||
.filter((tag) => (query === '' ? true : String(tag.name || '').toLowerCase().includes(query)))
|
||||
.slice(0, 12)
|
||||
}, [options, selectedIds, tagQuery])
|
||||
<div className="space-y-4 px-6 py-5">
|
||||
{(preview.skippedDuplicates.length > 0 || preview.skippedInvalid.length > 0) ? (
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-white/70">
|
||||
{preview.skippedDuplicates.length > 0 ? `${preview.skippedDuplicates.length} duplicate tag${preview.skippedDuplicates.length === 1 ? '' : 's'} ignored.` : ''}
|
||||
{preview.skippedDuplicates.length > 0 && preview.skippedInvalid.length > 0 ? ' ' : ''}
|
||||
{preview.skippedInvalid.length > 0 ? `${preview.skippedInvalid.length} invalid tag${preview.skippedInvalid.length === 1 ? '' : 's'} ignored.` : ''}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Selected tags</div>
|
||||
<div className="mt-1 text-sm text-slate-400">Attach article topics without forcing the editor to scan a wall of checkboxes.</div>
|
||||
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/40">Tags to add</p>
|
||||
<div className="max-h-56 overflow-auto rounded-2xl border border-white/10 bg-white/[0.03] p-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{preview.tagsToAdd.map((tag) => (
|
||||
<span
|
||||
key={tag.key}
|
||||
className="inline-flex items-center rounded-full border border-sky-300/25 bg-sky-400/10 px-3 py-1.5 text-xs font-medium text-sky-100"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{manageUrl ? <a href={manageUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-white">Manage tags</a> : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex min-h-[3.5rem] flex-wrap gap-2">
|
||||
{selectedTags.length > 0 ? selectedTags.map((tag) => (
|
||||
<button
|
||||
key={tag.id}
|
||||
type="button"
|
||||
onClick={() => onToggle(tag.id)}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-2 text-sm text-sky-50 transition hover:bg-sky-400/15"
|
||||
>
|
||||
<span>{tag.name}</span>
|
||||
<span className="text-xs text-sky-100/70">Remove</span>
|
||||
</button>
|
||||
)) : null}
|
||||
{newTagNames.map((tagName) => (
|
||||
<button
|
||||
key={tagName}
|
||||
type="button"
|
||||
onClick={() => onRemoveNewTag(tagName)}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-emerald-300/20 bg-emerald-400/10 px-3 py-2 text-sm text-emerald-50 transition hover:bg-emerald-400/15"
|
||||
>
|
||||
<span>{tagName}</span>
|
||||
<span className="rounded-full border border-emerald-200/30 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-emerald-100/80">New</span>
|
||||
</button>
|
||||
))}
|
||||
{selectedTags.length === 0 && newTagNames.length === 0 ? <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] px-4 py-3 text-sm text-slate-500">No tags selected yet.</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Find tags</span>
|
||||
<input
|
||||
value={tagQuery}
|
||||
onChange={(event) => onTagQueryChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (!['Enter', ','].includes(event.key)) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
const nextQuery = normalizeNewTagName(event.currentTarget.value)
|
||||
if (!nextQuery) {
|
||||
return
|
||||
}
|
||||
|
||||
if (matchingExistingTag && !selectedIds.includes(matchingExistingTag.id)) {
|
||||
onToggle(matchingExistingTag.id)
|
||||
onTagQueryChange('')
|
||||
return
|
||||
}
|
||||
|
||||
if (!queryMatchesPending) {
|
||||
onCreateTag(nextQuery)
|
||||
}
|
||||
|
||||
onTagQueryChange('')
|
||||
}}
|
||||
placeholder="Search existing tags or type a new one"
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{normalizedQuery && !matchingExistingTag && !queryMatchesPending ? (
|
||||
<div className="flex items-center justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onCreateTag(normalizedQuery)
|
||||
onTagQueryChange('')
|
||||
}}
|
||||
className="mt-3 inline-flex items-center gap-2 rounded-full border border-emerald-300/20 bg-emerald-400/10 px-3 py-2 text-sm font-semibold text-emerald-50"
|
||||
onClick={() => onClose?.()}
|
||||
className="inline-flex items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition hover:bg-white/[0.08] hover:text-white"
|
||||
>
|
||||
<span>Create tag</span>
|
||||
<span className="rounded-full border border-emerald-200/30 px-2 py-0.5 text-xs text-emerald-100">{normalizedQuery}</span>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onConfirm?.()}
|
||||
className="inline-flex items-center justify-center rounded-full border border-sky-300/25 bg-sky-400/90 px-4 py-2 text-sm font-semibold text-slate-950 transition hover:brightness-110"
|
||||
>
|
||||
Add tags
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{availableTags.length > 0 ? availableTags.map((tag) => (
|
||||
<button
|
||||
key={tag.id}
|
||||
type="button"
|
||||
onClick={() => onToggle(tag.id)}
|
||||
className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white transition hover:border-white/20 hover:bg-white/[0.08]"
|
||||
>
|
||||
+ {tag.name}
|
||||
</button>
|
||||
)) : <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] px-4 py-3 text-sm text-slate-500">No additional tags match the current search.</div>}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-xs leading-5 text-slate-500">
|
||||
Press Enter or comma to queue a new tag. Pending tags are written into the news tag list when the article is saved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
|
||||
function NewsTagInput({ options, selectedIds, newTagNames, onSelectedIdsChange, onNewTagNamesChange, manageUrl }) {
|
||||
const [query, setQuery] = useState('')
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [highlightedIndex, setHighlightedIndex] = useState(-1)
|
||||
const [error, setError] = useState('')
|
||||
const [pastePreview, setPastePreview] = useState(null)
|
||||
|
||||
const selectedIdSet = useMemo(() => new Set((selectedIds || []).map((id) => Number(id))), [selectedIds])
|
||||
const existingTags = useMemo(() => (Array.isArray(options) ? options : []).filter((tag) => selectedIdSet.has(Number(tag.id))), [options, selectedIdSet])
|
||||
const pendingTags = useMemo(() => (Array.isArray(newTagNames) ? newTagNames : []).map((name) => ({ key: normalizeNewsTagKey(name), name: normalizeNewTagName(name) })).filter((tag) => tag.key), [newTagNames])
|
||||
const combinedNames = useMemo(() => [...existingTags.map((tag) => String(tag.name || '')), ...pendingTags.map((tag) => tag.name)], [existingTags, pendingTags])
|
||||
const combinedKeys = useMemo(() => combinedNames.map((name) => normalizeNewsTagKey(name)).filter(Boolean), [combinedNames])
|
||||
const normalizedQuery = useMemo(() => normalizeNewTagName(query), [query])
|
||||
|
||||
const syncNames = useCallback((names) => {
|
||||
const seen = new Set()
|
||||
const nextIds = []
|
||||
const nextNewNames = []
|
||||
|
||||
names.forEach((rawName) => {
|
||||
const nextName = normalizeNewTagName(rawName)
|
||||
const key = normalizeNewsTagKey(nextName)
|
||||
|
||||
if (!key || seen.has(key)) {
|
||||
return
|
||||
}
|
||||
|
||||
seen.add(key)
|
||||
|
||||
const existing = (Array.isArray(options) ? options : []).find((tag) => normalizeNewsTagKey(tag.name) === key)
|
||||
if (existing) {
|
||||
nextIds.push(Number(existing.id))
|
||||
return
|
||||
}
|
||||
|
||||
nextNewNames.push(nextName)
|
||||
})
|
||||
|
||||
onSelectedIdsChange(nextIds)
|
||||
onNewTagNamesChange(nextNewNames)
|
||||
}, [onNewTagNamesChange, onSelectedIdsChange, options])
|
||||
|
||||
const exactMatch = useMemo(() => {
|
||||
if (!normalizedQuery) return null
|
||||
return (Array.isArray(options) ? options : []).find((tag) => normalizeNewsTagKey(tag.name) === normalizeNewsTagKey(normalizedQuery)) || null
|
||||
}, [normalizedQuery, options])
|
||||
|
||||
const suggestions = useMemo(() => {
|
||||
const source = Array.isArray(options) ? options : []
|
||||
const lowerQuery = normalizeNewsTagKey(query)
|
||||
|
||||
return source
|
||||
.filter((tag) => !selectedIdSet.has(Number(tag.id)))
|
||||
.filter((tag) => !pendingTags.some((pendingTag) => pendingTag.key === normalizeNewsTagKey(tag.name)))
|
||||
.filter((tag) => (lowerQuery === '' ? true : normalizeNewsTagKey(tag.name).includes(lowerQuery)))
|
||||
.slice(0, 8)
|
||||
}, [options, pendingTags, query, selectedIdSet])
|
||||
|
||||
useEffect(() => {
|
||||
setHighlightedIndex(suggestions.length > 0 ? 0 : -1)
|
||||
}, [suggestions])
|
||||
|
||||
const addCandidate = useCallback((rawName) => {
|
||||
const nextName = normalizeNewTagName(rawName)
|
||||
if (!nextName) {
|
||||
return
|
||||
}
|
||||
|
||||
const key = normalizeNewsTagKey(nextName)
|
||||
if (combinedKeys.includes(key)) {
|
||||
setError('Duplicate tag')
|
||||
return
|
||||
}
|
||||
|
||||
setError('')
|
||||
syncNames([...combinedNames, nextName])
|
||||
setQuery('')
|
||||
setIsOpen(false)
|
||||
}, [combinedKeys, combinedNames, syncNames])
|
||||
|
||||
const removeExisting = useCallback((tagId) => {
|
||||
onSelectedIdsChange((selectedIds || []).filter((id) => Number(id) !== Number(tagId)))
|
||||
}, [onSelectedIdsChange, selectedIds])
|
||||
|
||||
const removePending = useCallback((tagName) => {
|
||||
onNewTagNamesChange((newTagNames || []).filter((name) => normalizeNewsTagKey(name) !== normalizeNewsTagKey(tagName)))
|
||||
}, [newTagNames, onNewTagNamesChange])
|
||||
|
||||
const handlePaste = useCallback((event) => {
|
||||
const raw = event.clipboardData?.getData('text')
|
||||
if (!raw) return
|
||||
|
||||
const parts = parseNewsTagList(raw)
|
||||
if (parts.length <= 1) return
|
||||
|
||||
event.preventDefault()
|
||||
const preview = analyzePastedNewsTags(raw, combinedKeys)
|
||||
if (preview.tagsToAdd.length === 0) {
|
||||
setError('No new tags found in pasted text')
|
||||
return
|
||||
}
|
||||
|
||||
setError('')
|
||||
setPastePreview(preview)
|
||||
}, [combinedKeys])
|
||||
|
||||
const handleConfirmPaste = useCallback(() => {
|
||||
if (!pastePreview) return
|
||||
syncNames([...combinedNames, ...pastePreview.tagsToAdd.map((tag) => tag.name)])
|
||||
setPastePreview(null)
|
||||
setQuery('')
|
||||
setIsOpen(false)
|
||||
}, [combinedNames, pastePreview, syncNames])
|
||||
|
||||
const handleKeyDown = useCallback((event) => {
|
||||
if (event.key === 'Escape') {
|
||||
setIsOpen(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'Backspace' && query.length === 0 && combinedNames.length > 0) {
|
||||
const lastPending = pendingTags[pendingTags.length - 1]
|
||||
if (lastPending) {
|
||||
removePending(lastPending.name)
|
||||
return
|
||||
}
|
||||
|
||||
const lastExisting = existingTags[existingTags.length - 1]
|
||||
if (lastExisting) {
|
||||
removeExisting(lastExisting.id)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
if (suggestions.length === 0) return
|
||||
setIsOpen(true)
|
||||
setHighlightedIndex((current) => Math.min(current + 1, suggestions.length - 1))
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
if (suggestions.length === 0) return
|
||||
setIsOpen(true)
|
||||
setHighlightedIndex((current) => Math.max(current - 1, 0))
|
||||
return
|
||||
}
|
||||
|
||||
if (!['Enter', ',', 'Tab'].includes(event.key)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'Tab' && !isOpen && normalizedQuery === '') {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
if ((event.key === 'Enter' || event.key === 'Tab') && isOpen && highlightedIndex >= 0 && suggestions[highlightedIndex]) {
|
||||
addCandidate(suggestions[highlightedIndex].name)
|
||||
return
|
||||
}
|
||||
|
||||
if (!normalizedQuery) {
|
||||
return
|
||||
}
|
||||
|
||||
if (exactMatch) {
|
||||
addCandidate(exactMatch.name)
|
||||
return
|
||||
}
|
||||
|
||||
addCandidate(normalizedQuery)
|
||||
}, [addCandidate, combinedNames.length, exactMatch, existingTags, highlightedIndex, isOpen, normalizedQuery, pendingTags, query.length, removeExisting, removePending, suggestions])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid gap-4">
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Selected tags</div>
|
||||
<div className="mt-1 text-sm text-slate-400">Attach article topics with the same chip-based flow used on artwork tags.</div>
|
||||
</div>
|
||||
{manageUrl ? <a href={manageUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-white">Manage tags</a> : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 min-h-[3rem] rounded-xl border border-white/10 bg-white/5 p-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{existingTags.length === 0 && pendingTags.length === 0 ? <span className="px-2 py-1 text-xs text-white/50">No tags selected</span> : null}
|
||||
{existingTags.map((tag) => (
|
||||
<span key={tag.id} className="group inline-flex max-w-full items-center gap-2 rounded-full border border-white/20 bg-slate-900/80 px-3 py-1.5 text-xs text-slate-100">
|
||||
<span className="truncate">{tag.name}</span>
|
||||
<button type="button" onClick={() => removeExisting(tag.id)} className="rounded-full p-0.5 text-slate-300 transition hover:bg-white/10 hover:text-white" aria-label={`Remove tag ${tag.name}`}>
|
||||
✕
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
{pendingTags.map((tag) => (
|
||||
<span key={tag.key} className="group inline-flex max-w-full items-center gap-2 rounded-full border border-emerald-300/25 bg-emerald-400/10 px-3 py-1.5 text-xs text-emerald-50">
|
||||
<span className="truncate">{tag.name}</span>
|
||||
<span className="rounded-full border border-emerald-200/30 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-emerald-100/80">New</span>
|
||||
<button type="button" onClick={() => removePending(tag.name)} className="rounded-full p-0.5 text-emerald-100/75 transition hover:bg-white/10 hover:text-white" aria-label={`Remove new tag ${tag.name}`}>
|
||||
✕
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Find tags</span>
|
||||
<input
|
||||
value={query}
|
||||
onChange={(event) => {
|
||||
setQuery(event.target.value)
|
||||
setError('')
|
||||
setIsOpen(true)
|
||||
}}
|
||||
onFocus={() => setIsOpen(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPaste={handlePaste}
|
||||
placeholder="Search existing tags or type a new one"
|
||||
className="w-full rounded-xl border border-white/10 bg-white/10 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-400 focus:outline-none"
|
||||
aria-label="Search or add news tags"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{isOpen ? (
|
||||
<div className="mt-3 overflow-hidden rounded-xl bg-slate-950/98 shadow-xl shadow-black/50 ring-1 ring-white/10">
|
||||
<ul role="listbox" className="max-h-56 overflow-auto py-1">
|
||||
{suggestions.length > 0 ? suggestions.map((tag, index) => {
|
||||
const active = index === highlightedIndex
|
||||
return (
|
||||
<li
|
||||
key={tag.id}
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
className={`flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm transition ${active ? 'bg-sky-500/20 text-white' : 'text-white/85 hover:bg-white/10'}`}
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault()
|
||||
addCandidate(tag.name)
|
||||
}}
|
||||
>
|
||||
<span className="truncate">{tag.name}</span>
|
||||
</li>
|
||||
)
|
||||
}) : (
|
||||
<li className="px-3 py-2 text-xs text-white/50">No suggestions</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-3 flex items-center justify-between gap-3 text-xs">
|
||||
<span className={error ? 'text-amber-200' : 'text-white/55'} role="status" aria-live="polite">
|
||||
{error || 'Type and press Enter, comma, or Tab to add. Paste a comma-separated list to review multiple tags.'}
|
||||
</span>
|
||||
<span className="text-white/50">{existingTags.length + pendingTags.length} selected</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NewsTagInputDialog
|
||||
open={Boolean(pastePreview)}
|
||||
preview={pastePreview}
|
||||
onClose={() => setPastePreview(null)}
|
||||
onConfirm={handleConfirmPaste}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -291,7 +569,7 @@ function stripHtml(value) {
|
||||
function selectOptionsFromValues(options, emptyLabel = null) {
|
||||
const base = Array.isArray(options)
|
||||
? options.map((option) => ({
|
||||
value: option.value ?? option.id,
|
||||
value: String(option.value ?? option.id),
|
||||
label: option.label ?? option.name,
|
||||
}))
|
||||
: []
|
||||
@@ -333,6 +611,14 @@ function buildSubmitPayload(data) {
|
||||
}
|
||||
}
|
||||
|
||||
function hasRequiredCategory(categoryId) {
|
||||
if (categoryId === '' || categoryId == null) {
|
||||
return false
|
||||
}
|
||||
|
||||
return Number(categoryId) > 0
|
||||
}
|
||||
|
||||
function buildInitialFormData(article, defaultAuthor, typeOptions) {
|
||||
return {
|
||||
title: article.title || '',
|
||||
@@ -341,7 +627,7 @@ function buildInitialFormData(article, defaultAuthor, typeOptions) {
|
||||
content: article.content || '',
|
||||
cover_image: article.cover_image || '',
|
||||
type: article.type || (typeOptions?.[0]?.value || 'announcement'),
|
||||
category_id: article.category_id || '',
|
||||
category_id: article.category_id ? String(article.category_id) : '',
|
||||
author_id: article.author_id || defaultAuthor?.id || '',
|
||||
editorial_status: article.editorial_status || 'draft',
|
||||
published_at: article.published_at ? String(article.published_at).slice(0, 16) : '',
|
||||
@@ -377,7 +663,6 @@ export default function StudioNewsEditor() {
|
||||
const [authorQuery, setAuthorQuery] = useState(article.author?.title || article.author?.subtitle?.replace(/^@/, '') || '')
|
||||
const [selectedAuthor, setSelectedAuthor] = useState(article.author || props.defaultAuthor || null)
|
||||
const [relationResults, setRelationResults] = useState({})
|
||||
const [tagQuery, setTagQuery] = useState('')
|
||||
const [coverPreviewUrl, setCoverPreviewUrl] = useState(article.cover_url || (String(article.cover_image || '').startsWith('http') ? article.cover_image : ''))
|
||||
const [stagedCoverPath, setStagedCoverPath] = useState('')
|
||||
const lastSyncedArticleKeyRef = useRef(articleSyncKey)
|
||||
@@ -395,7 +680,6 @@ export default function StudioNewsEditor() {
|
||||
setSelectedAuthor(article.author || props.defaultAuthor || null)
|
||||
setAuthorQuery(article.author?.title || article.author?.subtitle?.replace(/^@/, '') || '')
|
||||
setRelationResults({})
|
||||
setTagQuery('')
|
||||
setCoverPreviewUrl(article.cover_url || (String(article.cover_image || '').startsWith('http') ? article.cover_image : ''))
|
||||
setStagedCoverPath('')
|
||||
}, [article, articleSyncKey, form, initialFormData, props.defaultAuthor])
|
||||
@@ -407,7 +691,7 @@ export default function StudioNewsEditor() {
|
||||
}, [form.data.content])
|
||||
const typeOptions = useMemo(() => selectOptionsFromValues(props.typeOptions || []), [props.typeOptions])
|
||||
const statusOptions = useMemo(() => selectOptionsFromValues(props.statusOptions || []), [props.statusOptions])
|
||||
const categoryOptions = useMemo(() => selectOptionsFromValues(props.categoryOptions || [], 'No category'), [props.categoryOptions])
|
||||
const categoryOptions = useMemo(() => selectOptionsFromValues(props.categoryOptions || [], 'Select category'), [props.categoryOptions])
|
||||
|
||||
const searchEntities = async (type, query) => {
|
||||
const url = new URL(props.entitySearchUrl, window.location.origin)
|
||||
@@ -467,48 +751,6 @@ export default function StudioNewsEditor() {
|
||||
setRelationResults((current) => ({ ...current, [index]: items }))
|
||||
}
|
||||
|
||||
const toggleTag = (tagId) => {
|
||||
const numericId = Number(tagId)
|
||||
const next = form.data.tag_ids.includes(numericId)
|
||||
? form.data.tag_ids.filter((currentId) => currentId !== numericId)
|
||||
: [...form.data.tag_ids, numericId]
|
||||
|
||||
form.setData('tag_ids', next)
|
||||
|
||||
if (!form.data.tag_ids.includes(numericId)) {
|
||||
const matchedTag = (Array.isArray(props.tagOptions) ? props.tagOptions : []).find((tag) => tag.id === numericId)
|
||||
if (matchedTag) {
|
||||
const lowerName = String(matchedTag.name || '').toLowerCase()
|
||||
form.setData('new_tag_names', form.data.new_tag_names.filter((tagName) => tagName.toLowerCase() !== lowerName))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const addNewTagName = (rawValue) => {
|
||||
const nextTagName = normalizeNewTagName(rawValue)
|
||||
if (!nextTagName) return
|
||||
|
||||
const lowerName = nextTagName.toLowerCase()
|
||||
const matchingExistingTag = (Array.isArray(props.tagOptions) ? props.tagOptions : []).find((tag) => String(tag.name || '').toLowerCase() === lowerName)
|
||||
|
||||
if (matchingExistingTag) {
|
||||
if (!form.data.tag_ids.includes(matchingExistingTag.id)) {
|
||||
form.setData('tag_ids', [...form.data.tag_ids, matchingExistingTag.id])
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (form.data.new_tag_names.some((tagName) => tagName.toLowerCase() === lowerName)) {
|
||||
return
|
||||
}
|
||||
|
||||
form.setData('new_tag_names', [...form.data.new_tag_names, nextTagName])
|
||||
}
|
||||
|
||||
const removeNewTagName = (tagName) => {
|
||||
form.setData('new_tag_names', form.data.new_tag_names.filter((currentTagName) => currentTagName !== tagName))
|
||||
}
|
||||
|
||||
const handleManualCoverChange = (nextValue) => {
|
||||
form.setData('cover_image', nextValue)
|
||||
|
||||
@@ -532,6 +774,12 @@ export default function StudioNewsEditor() {
|
||||
const submit = (event) => {
|
||||
event.preventDefault()
|
||||
|
||||
if (!hasRequiredCategory(form.data.category_id)) {
|
||||
form.setError('category_id', 'Choose a category before saving the article.')
|
||||
pushToast('Choose a category before saving the article.', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
const options = {
|
||||
preserveScroll: true,
|
||||
preserveState: false,
|
||||
@@ -674,7 +922,12 @@ export default function StudioNewsEditor() {
|
||||
<NovaSelect label="Type" value={form.data.type || null} onChange={(nextValue) => form.setData('type', String(nextValue || ''))} options={typeOptions} searchable={false} className="bg-black/20" error={form.errors.type} />
|
||||
</div>
|
||||
<div className="grid gap-2 text-sm text-slate-300">
|
||||
<NovaSelect label="Category" value={form.data.category_id || ''} onChange={(nextValue) => form.setData('category_id', String(nextValue || ''))} options={categoryOptions} searchable={false} className="bg-black/20" error={form.errors.category_id} />
|
||||
<NovaSelect label="Category" value={form.data.category_id || ''} onChange={(nextValue) => {
|
||||
form.setData('category_id', String(nextValue || ''))
|
||||
if (nextValue) {
|
||||
form.clearErrors('category_id')
|
||||
}
|
||||
}} options={categoryOptions} searchable={false} className="bg-black/20" error={form.errors.category_id} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -726,15 +979,12 @@ export default function StudioNewsEditor() {
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard eyebrow="Taxonomy" title="Tags" description="Search and apply tags quickly instead of scanning a wall of checkboxes.">
|
||||
<TagPicker
|
||||
<NewsTagInput
|
||||
options={Array.isArray(props.tagOptions) ? props.tagOptions : []}
|
||||
selectedIds={form.data.tag_ids}
|
||||
newTagNames={form.data.new_tag_names}
|
||||
tagQuery={tagQuery}
|
||||
onTagQueryChange={setTagQuery}
|
||||
onToggle={toggleTag}
|
||||
onCreateTag={addNewTagName}
|
||||
onRemoveNewTag={removeNewTagName}
|
||||
onSelectedIdsChange={(nextIds) => form.setData('tag_ids', nextIds)}
|
||||
onNewTagNamesChange={(nextNames) => form.setData('new_tag_names', nextNames)}
|
||||
manageUrl={props.tagsUrl}
|
||||
/>
|
||||
<div className="mt-3">
|
||||
|
||||
Reference in New Issue
Block a user