336 lines
14 KiB
TypeScript
336 lines
14 KiB
TypeScript
import { useEditor, EditorContent, type Editor } from '@tiptap/react'
|
|
import StarterKit from '@tiptap/starter-kit'
|
|
import Image from '@tiptap/extension-image'
|
|
import Link from '@tiptap/extension-link'
|
|
import Mention from '@tiptap/extension-mention'
|
|
import Placeholder from '@tiptap/extension-placeholder'
|
|
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table'
|
|
import { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react'
|
|
import {
|
|
Bold, Italic, Strikethrough, Code, List, ListOrdered, Quote,
|
|
Heading1, Heading2, Heading3, Image as ImageIcon, Link as LinkIcon,
|
|
Table as TableIcon, Undo, Redo, Minus,
|
|
} from 'lucide-react'
|
|
|
|
export interface PersonItem {
|
|
id: string
|
|
name: string
|
|
label?: string
|
|
}
|
|
|
|
export interface LinkTagItem {
|
|
id: string
|
|
label: string
|
|
url: string
|
|
type: 'url' | 'miniprogram' | 'ckb'
|
|
appId?: string
|
|
pagePath?: string
|
|
}
|
|
|
|
export interface RichEditorRef {
|
|
getHTML: () => string
|
|
getMarkdown: () => string
|
|
}
|
|
|
|
interface RichEditorProps {
|
|
content: string
|
|
onChange: (html: string) => void
|
|
onImageUpload?: (file: File) => Promise<string>
|
|
persons?: PersonItem[]
|
|
linkTags?: LinkTagItem[]
|
|
placeholder?: string
|
|
className?: string
|
|
}
|
|
|
|
function htmlToMarkdown(html: string): string {
|
|
if (!html) return ''
|
|
let md = html
|
|
md = md.replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1\n\n')
|
|
md = md.replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1\n\n')
|
|
md = md.replace(/<h3[^>]*>(.*?)<\/h3>/gi, '### $1\n\n')
|
|
md = md.replace(/<strong[^>]*>(.*?)<\/strong>/gi, '**$1**')
|
|
md = md.replace(/<b[^>]*>(.*?)<\/b>/gi, '**$1**')
|
|
md = md.replace(/<em[^>]*>(.*?)<\/em>/gi, '*$1*')
|
|
md = md.replace(/<i[^>]*>(.*?)<\/i>/gi, '*$1*')
|
|
md = md.replace(/<s[^>]*>(.*?)<\/s>/gi, '~~$1~~')
|
|
md = md.replace(/<del[^>]*>(.*?)<\/del>/gi, '~~$1~~')
|
|
md = md.replace(/<code[^>]*>(.*?)<\/code>/gi, '`$1`')
|
|
md = md.replace(/<blockquote[^>]*>(.*?)<\/blockquote>/gi, '> $1\n\n')
|
|
md = md.replace(/<img[^>]*src="([^"]*)"[^>]*alt="([^"]*)"[^>]*>/gi, '')
|
|
md = md.replace(/<img[^>]*src="([^"]*)"[^>]*>/gi, '')
|
|
md = md.replace(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, '[$2]($1)')
|
|
md = md.replace(/<li[^>]*>(.*?)<\/li>/gi, '- $1\n')
|
|
md = md.replace(/<\/?[uo]l[^>]*>/gi, '\n')
|
|
md = md.replace(/<br\s*\/?>/gi, '\n')
|
|
md = md.replace(/<p[^>]*>(.*?)<\/p>/gi, '$1\n\n')
|
|
md = md.replace(/<hr\s*\/?>/gi, '---\n\n')
|
|
md = md.replace(/<span[^>]*data-type="mention"[^>]*data-id="([^"]*)"[^>]*>@([^<]*)<\/span>/gi, '@$2')
|
|
md = md.replace(/<span[^>]*data-type="linkTag"[^>]*data-url="([^"]*)"[^>]*>#([^<]*)<\/span>/gi, '#[$2]($1)')
|
|
md = md.replace(/<[^>]+>/g, '')
|
|
md = md.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, "'")
|
|
md = md.replace(/\n{3,}/g, '\n\n')
|
|
return md.trim()
|
|
}
|
|
|
|
function markdownToHtml(md: string): string {
|
|
if (!md) return ''
|
|
if (md.startsWith('<') && md.includes('</')) return md
|
|
let html = md
|
|
html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>')
|
|
html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>')
|
|
html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>')
|
|
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
|
html = html.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
|
html = html.replace(/~~(.+?)~~/g, '<s>$1</s>')
|
|
html = html.replace(/`([^`]+)`/g, '<code>$1</code>')
|
|
html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />')
|
|
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
|
|
html = html.replace(/^> (.+)$/gm, '<blockquote><p>$1</p></blockquote>')
|
|
html = html.replace(/^---$/gm, '<hr />')
|
|
html = html.replace(/^- (.+)$/gm, '<li>$1</li>')
|
|
const lines = html.split('\n')
|
|
const result: string[] = []
|
|
for (const line of lines) {
|
|
const trimmed = line.trim()
|
|
if (!trimmed) continue
|
|
if (/^<(?:h[1-6]|blockquote|hr|li|ul|ol|table|img)/.test(trimmed)) {
|
|
result.push(trimmed)
|
|
} else {
|
|
result.push(`<p>${trimmed}</p>`)
|
|
}
|
|
}
|
|
return result.join('')
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const MentionSuggestion = (persons: PersonItem[]): any => ({
|
|
items: ({ query }: { query: string }) =>
|
|
persons.filter(p => p.name.toLowerCase().includes(query.toLowerCase()) || p.id.includes(query)).slice(0, 8),
|
|
render: () => {
|
|
let popup: HTMLDivElement | null = null
|
|
let selectedIndex = 0
|
|
let items: PersonItem[] = []
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
let command: ((p: { id: string; label: string }) => void) | null = null
|
|
|
|
const update = () => {
|
|
if (!popup) return
|
|
popup.innerHTML = items.map((item, i) =>
|
|
`<div class="mention-item ${i === selectedIndex ? 'is-selected' : ''}" data-index="${i}">
|
|
<span class="mention-name">@${item.name}</span>
|
|
<span class="mention-id">${item.label || item.id}</span>
|
|
</div>`
|
|
).join('')
|
|
popup.querySelectorAll('.mention-item').forEach(el => {
|
|
el.addEventListener('click', () => {
|
|
const idx = parseInt(el.getAttribute('data-index') || '0')
|
|
if (command && items[idx]) command({ id: items[idx].id, label: items[idx].name })
|
|
})
|
|
})
|
|
}
|
|
|
|
return {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
onStart: (props: any) => {
|
|
popup = document.createElement('div')
|
|
popup.className = 'mention-popup'
|
|
document.body.appendChild(popup)
|
|
items = props.items
|
|
command = props.command
|
|
selectedIndex = 0
|
|
update()
|
|
if (props.clientRect) {
|
|
const rect = props.clientRect()
|
|
if (rect) {
|
|
popup.style.top = `${rect.bottom + 4}px`
|
|
popup.style.left = `${rect.left}px`
|
|
}
|
|
}
|
|
},
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
onUpdate: (props: any) => {
|
|
items = props.items
|
|
command = props.command
|
|
selectedIndex = 0
|
|
update()
|
|
if (props.clientRect && popup) {
|
|
const rect = props.clientRect()
|
|
if (rect) {
|
|
popup.style.top = `${rect.bottom + 4}px`
|
|
popup.style.left = `${rect.left}px`
|
|
}
|
|
}
|
|
},
|
|
onKeyDown: (props: { event: KeyboardEvent }) => {
|
|
if (props.event.key === 'ArrowUp') { selectedIndex = Math.max(0, selectedIndex - 1); update(); return true }
|
|
if (props.event.key === 'ArrowDown') { selectedIndex = Math.min(items.length - 1, selectedIndex + 1); update(); return true }
|
|
if (props.event.key === 'Enter') { if (command && items[selectedIndex]) command({ id: items[selectedIndex].id, label: items[selectedIndex].name }); return true }
|
|
if (props.event.key === 'Escape') { popup?.remove(); popup = null; return true }
|
|
return false
|
|
},
|
|
onExit: () => { popup?.remove(); popup = null },
|
|
}
|
|
},
|
|
})
|
|
|
|
const RichEditor = forwardRef<RichEditorRef, RichEditorProps>(({
|
|
content,
|
|
onChange,
|
|
onImageUpload,
|
|
persons = [],
|
|
linkTags = [],
|
|
placeholder = '开始编辑内容...',
|
|
className,
|
|
}, ref) => {
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
const [linkUrl, setLinkUrl] = useState('')
|
|
const [showLinkInput, setShowLinkInput] = useState(false)
|
|
const initialContent = useRef(markdownToHtml(content))
|
|
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit,
|
|
Image.configure({ inline: true, allowBase64: true }),
|
|
Link.configure({ openOnClick: false, HTMLAttributes: { class: 'rich-link' } }),
|
|
Mention.configure({
|
|
HTMLAttributes: { class: 'mention-tag' },
|
|
suggestion: MentionSuggestion(persons),
|
|
}),
|
|
Placeholder.configure({ placeholder }),
|
|
Table.configure({ resizable: true }),
|
|
TableRow, TableCell, TableHeader,
|
|
],
|
|
content: initialContent.current,
|
|
onUpdate: ({ editor: ed }: { editor: Editor }) => {
|
|
onChange(ed.getHTML())
|
|
},
|
|
editorProps: {
|
|
attributes: { class: 'rich-editor-content' },
|
|
},
|
|
})
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
getHTML: () => editor?.getHTML() || '',
|
|
getMarkdown: () => htmlToMarkdown(editor?.getHTML() || ''),
|
|
}))
|
|
|
|
useEffect(() => {
|
|
if (editor && content !== editor.getHTML()) {
|
|
const html = markdownToHtml(content)
|
|
if (html !== editor.getHTML()) {
|
|
editor.commands.setContent(html)
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [content])
|
|
|
|
const handleImageUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0]
|
|
if (!file || !editor) return
|
|
if (onImageUpload) {
|
|
const url = await onImageUpload(file)
|
|
if (url) editor.chain().focus().setImage({ src: url }).run()
|
|
} else {
|
|
const reader = new FileReader()
|
|
reader.onload = () => {
|
|
if (typeof reader.result === 'string') editor.chain().focus().setImage({ src: reader.result }).run()
|
|
}
|
|
reader.readAsDataURL(file)
|
|
}
|
|
e.target.value = ''
|
|
}, [editor, onImageUpload])
|
|
|
|
const insertLinkTag = useCallback((tag: LinkTagItem) => {
|
|
if (!editor) return
|
|
editor.chain().focus().insertContent({
|
|
type: 'text',
|
|
marks: [{ type: 'link', attrs: { href: tag.url, target: '_blank' } }],
|
|
text: `#${tag.label}`,
|
|
}).run()
|
|
}, [editor])
|
|
|
|
const addLink = useCallback(() => {
|
|
if (!editor || !linkUrl) return
|
|
editor.chain().focus().setLink({ href: linkUrl }).run()
|
|
setLinkUrl('')
|
|
setShowLinkInput(false)
|
|
}, [editor, linkUrl])
|
|
|
|
if (!editor) return null
|
|
|
|
return (
|
|
<div className={`rich-editor-wrapper ${className || ''}`}>
|
|
<div className="rich-editor-toolbar">
|
|
<div className="toolbar-group">
|
|
<button onClick={() => editor.chain().focus().toggleBold().run()} className={editor.isActive('bold') ? 'is-active' : ''} type="button"><Bold className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().toggleItalic().run()} className={editor.isActive('italic') ? 'is-active' : ''} type="button"><Italic className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive('strike') ? 'is-active' : ''} type="button"><Strikethrough className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().toggleCode().run()} className={editor.isActive('code') ? 'is-active' : ''} type="button"><Code className="w-4 h-4" /></button>
|
|
</div>
|
|
<div className="toolbar-divider" />
|
|
<div className="toolbar-group">
|
|
<button onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''} type="button"><Heading1 className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''} type="button"><Heading2 className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''} type="button"><Heading3 className="w-4 h-4" /></button>
|
|
</div>
|
|
<div className="toolbar-divider" />
|
|
<div className="toolbar-group">
|
|
<button onClick={() => editor.chain().focus().toggleBulletList().run()} className={editor.isActive('bulletList') ? 'is-active' : ''} type="button"><List className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().toggleOrderedList().run()} className={editor.isActive('orderedList') ? 'is-active' : ''} type="button"><ListOrdered className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().toggleBlockquote().run()} className={editor.isActive('blockquote') ? 'is-active' : ''} type="button"><Quote className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().setHorizontalRule().run()} type="button"><Minus className="w-4 h-4" /></button>
|
|
</div>
|
|
<div className="toolbar-divider" />
|
|
<div className="toolbar-group">
|
|
<input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
|
|
<button onClick={() => fileInputRef.current?.click()} type="button"><ImageIcon className="w-4 h-4" /></button>
|
|
<button onClick={() => setShowLinkInput(!showLinkInput)} className={editor.isActive('link') ? 'is-active' : ''} type="button"><LinkIcon className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()} type="button"><TableIcon className="w-4 h-4" /></button>
|
|
</div>
|
|
<div className="toolbar-divider" />
|
|
<div className="toolbar-group">
|
|
<button onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()} type="button"><Undo className="w-4 h-4" /></button>
|
|
<button onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()} type="button"><Redo className="w-4 h-4" /></button>
|
|
</div>
|
|
{linkTags.length > 0 && (
|
|
<>
|
|
<div className="toolbar-divider" />
|
|
<div className="toolbar-group">
|
|
<select
|
|
className="link-tag-select"
|
|
onChange={(e) => {
|
|
const tag = linkTags.find(t => t.id === e.target.value)
|
|
if (tag) insertLinkTag(tag)
|
|
e.target.value = ''
|
|
}}
|
|
defaultValue=""
|
|
>
|
|
<option value="" disabled># 插入链接标签</option>
|
|
{linkTags.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
|
|
</select>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
{showLinkInput && (
|
|
<div className="link-input-bar">
|
|
<input
|
|
type="url"
|
|
placeholder="输入链接地址..."
|
|
value={linkUrl}
|
|
onChange={e => setLinkUrl(e.target.value)}
|
|
onKeyDown={e => e.key === 'Enter' && addLink()}
|
|
className="link-input"
|
|
/>
|
|
<button onClick={addLink} className="link-confirm" type="button">确定</button>
|
|
<button onClick={() => { editor.chain().focus().unsetLink().run(); setShowLinkInput(false) }} className="link-remove" type="button">移除</button>
|
|
</div>
|
|
)}
|
|
<EditorContent editor={editor} />
|
|
</div>
|
|
)
|
|
})
|
|
|
|
RichEditor.displayName = 'RichEditor'
|
|
export default RichEditor
|