172 lines
8.1 KiB
JavaScript
172 lines
8.1 KiB
JavaScript
import React, { useCallback, useEffect } from 'react'
|
|
import { EditorContent, useEditor } from '@tiptap/react'
|
|
import StarterKit from '@tiptap/starter-kit'
|
|
import Link from '@tiptap/extension-link'
|
|
import Placeholder from '@tiptap/extension-placeholder'
|
|
|
|
function ToolbarButton({ onClick, active, disabled, title, children }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
title={title}
|
|
className={[
|
|
'inline-flex h-8 w-8 items-center justify-center rounded-lg text-sm transition-colors',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400',
|
|
active
|
|
? 'bg-sky-600/25 text-sky-300'
|
|
: 'text-zinc-400 hover:bg-white/[0.06] hover:text-zinc-200',
|
|
disabled ? 'pointer-events-none opacity-30' : '',
|
|
].join(' ')}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function Divider() {
|
|
return <div className="mx-1 h-5 w-px bg-white/10" />
|
|
}
|
|
|
|
function Toolbar({ editor }) {
|
|
if (!editor) return null
|
|
|
|
const addLink = useCallback(() => {
|
|
const previous = editor.getAttributes('link').href
|
|
const url = window.prompt('URL', previous ?? 'https://')
|
|
if (url === null) return
|
|
|
|
if (url === '') {
|
|
editor.chain().focus().extendMarkRange('link').unsetLink().run()
|
|
return
|
|
}
|
|
|
|
editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
|
|
}, [editor])
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-0.5 border-b border-white/[0.06] px-2.5 py-2">
|
|
<ToolbarButton onClick={() => editor.chain().focus().toggleBold().run()} active={editor.isActive('bold')} title="Bold">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6zm0 8h9a4 4 0 014 4 4 4 0 01-4 4H6z" /></svg>
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton onClick={() => editor.chain().focus().toggleItalic().run()} active={editor.isActive('italic')} title="Italic">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="19" y1="4" x2="10" y2="4" /><line x1="14" y1="20" x2="5" y2="20" /><line x1="15" y1="4" x2="9" y2="20" /></svg>
|
|
</ToolbarButton>
|
|
|
|
<Divider />
|
|
|
|
<ToolbarButton onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} active={editor.isActive('heading', { level: 2 })} title="Heading 2">
|
|
<span className="text-xs font-bold">H2</span>
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} active={editor.isActive('heading', { level: 3 })} title="Heading 3">
|
|
<span className="text-xs font-bold">H3</span>
|
|
</ToolbarButton>
|
|
|
|
<Divider />
|
|
|
|
<ToolbarButton onClick={() => editor.chain().focus().toggleBulletList().run()} active={editor.isActive('bulletList')} title="Bullet list">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="9" y1="6" x2="20" y2="6" /><line x1="9" y1="12" x2="20" y2="12" /><line x1="9" y1="18" x2="20" y2="18" /><circle cx="4.5" cy="6" r="1" fill="currentColor" /><circle cx="4.5" cy="12" r="1" fill="currentColor" /><circle cx="4.5" cy="18" r="1" fill="currentColor" /></svg>
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton onClick={() => editor.chain().focus().toggleOrderedList().run()} active={editor.isActive('orderedList')} title="Numbered list">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="10" y1="6" x2="21" y2="6" /><line x1="10" y1="12" x2="21" y2="12" /><line x1="10" y1="18" x2="21" y2="18" /><text x="3" y="8" fontSize="7" fill="currentColor" stroke="none" fontFamily="sans-serif">1</text><text x="3" y="14" fontSize="7" fill="currentColor" stroke="none" fontFamily="sans-serif">2</text><text x="3" y="20" fontSize="7" fill="currentColor" stroke="none" fontFamily="sans-serif">3</text></svg>
|
|
</ToolbarButton>
|
|
|
|
<Divider />
|
|
|
|
<ToolbarButton onClick={() => editor.chain().focus().toggleBlockquote().run()} active={editor.isActive('blockquote')} title="Quote">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311C9.591 11.68 11 13.24 11 15.14c0 .94-.36 1.84-1.001 2.503A3.34 3.34 0 017.559 18.6a3.77 3.77 0 01-2.976-.879zm10.4 0C13.953 16.227 13.4 15 13.4 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.986.169 3.395 1.729 3.395 3.629 0 .94-.36 1.84-1.001 2.503a3.34 3.34 0 01-2.44.957 3.77 3.77 0 01-2.976-.879z" /></svg>
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton onClick={addLink} active={editor.isActive('link')} title="Link">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" /></svg>
|
|
</ToolbarButton>
|
|
|
|
<div className="ml-auto flex items-center gap-0.5">
|
|
<ToolbarButton onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()} title="Undo">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 102.13-9.36L1 10" /></svg>
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()} title="Redo">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 11-2.13-9.36L23 10" /></svg>
|
|
</ToolbarButton>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function HomepageAnnouncementEditor({
|
|
content = '',
|
|
onChange,
|
|
placeholder = 'Write the announcement message…',
|
|
error,
|
|
minHeight = 14,
|
|
}) {
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit.configure({
|
|
link: false,
|
|
heading: { levels: [2, 3] },
|
|
code: false,
|
|
codeBlock: false,
|
|
horizontalRule: false,
|
|
}),
|
|
Link.configure({
|
|
openOnClick: false,
|
|
HTMLAttributes: {
|
|
class: 'text-sky-300 underline hover:text-sky-200',
|
|
rel: 'noopener noreferrer nofollow',
|
|
},
|
|
}),
|
|
Placeholder.configure({ placeholder }),
|
|
],
|
|
immediatelyRender: false,
|
|
content,
|
|
editorProps: {
|
|
attributes: {
|
|
class: [
|
|
'prose prose-invert prose-sm max-w-none',
|
|
'focus:outline-none',
|
|
'px-4 py-3',
|
|
'prose-headings:text-white prose-headings:font-bold',
|
|
'prose-p:text-zinc-200 prose-p:leading-relaxed',
|
|
'prose-a:text-sky-300 prose-a:no-underline hover:prose-a:text-sky-200',
|
|
'prose-blockquote:border-l-sky-500/50 prose-blockquote:text-zinc-400',
|
|
'prose-ul:text-zinc-200 prose-ol:text-zinc-200',
|
|
].join(' '),
|
|
style: `min-height: ${minHeight}rem`,
|
|
},
|
|
},
|
|
onUpdate: ({ editor: currentEditor }) => {
|
|
onChange?.(currentEditor.getHTML())
|
|
},
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (editor && content !== editor.getHTML()) {
|
|
editor.commands.setContent(content || '', false)
|
|
onChange?.(content || '')
|
|
}
|
|
}, [content, editor, onChange])
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<div
|
|
className={[
|
|
'overflow-hidden rounded-[28px] border bg-black/20 transition-colors',
|
|
error
|
|
? 'border-red-500/60 focus-within:border-red-500/70 focus-within:ring-2 focus-within:ring-red-500/30'
|
|
: 'border-white/12 hover:border-white/20 focus-within:border-sky-500/50 focus-within:ring-2 focus-within:ring-sky-500/20',
|
|
].join(' ')}
|
|
>
|
|
<Toolbar editor={editor} />
|
|
<EditorContent editor={editor} />
|
|
</div>
|
|
|
|
{error ? <p role="alert" className="text-xs text-red-400">{error}</p> : null}
|
|
</div>
|
|
)
|
|
} |