test push
This commit is contained in:
jze9
@@ -6,11 +6,9 @@ function fmt(iso) {
|
||||
}
|
||||
|
||||
export default function ArticleModal({ article, onClose }) {
|
||||
// Закрытие по Escape
|
||||
useEffect(() => {
|
||||
const handler = e => { if (e.key === 'Escape') onClose() }
|
||||
window.addEventListener('keydown', handler)
|
||||
// Блокируем скролл страницы под модалкой
|
||||
document.body.style.overflow = 'hidden'
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handler)
|
||||
@@ -18,6 +16,8 @@ export default function ArticleModal({ article, onClose }) {
|
||||
}
|
||||
}, [onClose])
|
||||
|
||||
const isFullHtml = /^\s*<!DOCTYPE|^\s*<html/i.test(article.content ?? '')
|
||||
|
||||
return (
|
||||
<div className="article-modal-overlay" onClick={onClose}>
|
||||
<div className="article-modal" onClick={e => e.stopPropagation()}>
|
||||
@@ -27,42 +27,67 @@ export default function ArticleModal({ article, onClose }) {
|
||||
<img className="article-modal__cover" src={article.cover_url} alt={article.title} />
|
||||
)}
|
||||
|
||||
<div className="article-modal__body">
|
||||
<div className="article-meta">
|
||||
{article.category && (
|
||||
<span className="chip chip--primary">{article.category.name}</span>
|
||||
{isFullHtml ? (
|
||||
<>
|
||||
<div className="article-modal__body" style={{ paddingBottom: 0 }}>
|
||||
<div className="article-meta">
|
||||
{article.category && (
|
||||
<span className="chip chip--primary">{article.category.name}</span>
|
||||
)}
|
||||
{article.published_at && <span>{fmt(article.published_at)}</span>}
|
||||
</div>
|
||||
<h1 className="article-title">{article.title}</h1>
|
||||
</div>
|
||||
<iframe
|
||||
srcDoc={article.content}
|
||||
style={{ width: '100%', border: 'none', display: 'block', minHeight: '70vh' }}
|
||||
title={article.title}
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
onLoad={e => {
|
||||
const doc = e.target.contentDocument
|
||||
if (doc) e.target.style.height = doc.documentElement.scrollHeight + 'px'
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="article-modal__body">
|
||||
<div className="article-meta">
|
||||
{article.category && (
|
||||
<span className="chip chip--primary">{article.category.name}</span>
|
||||
)}
|
||||
{article.published_at && <span>{fmt(article.published_at)}</span>}
|
||||
</div>
|
||||
|
||||
<h1 className="article-title">{article.title}</h1>
|
||||
|
||||
<div
|
||||
className="article-body"
|
||||
style={article.font_family ? { fontFamily: article.font_family } : undefined}
|
||||
dangerouslySetInnerHTML={{ __html: article.content ?? '' }}
|
||||
/>
|
||||
|
||||
{article.tags?.length > 0 && (
|
||||
<div className="article-tags">
|
||||
{article.tags.map(t => (
|
||||
<span key={t.id} className="chip chip--ghost">#{t.name}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{article.source_url && (
|
||||
<div className="article-source">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||||
</svg>
|
||||
<span>Источник:</span>
|
||||
<a href={article.source_url} target="_blank" rel="noopener noreferrer">
|
||||
{article.source_url}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<span>{fmt(article.published_at)}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="article-title">{article.title}</h1>
|
||||
|
||||
<div
|
||||
className="article-body"
|
||||
dangerouslySetInnerHTML={{ __html: article.content ?? '' }}
|
||||
/>
|
||||
|
||||
{article.tags?.length > 0 && (
|
||||
<div className="article-tags">
|
||||
{article.tags.map(t => (
|
||||
<span key={t.id} className="chip chip--ghost">#{t.name}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{article.source_url && (
|
||||
<div className="article-source">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||||
</svg>
|
||||
<span>Источник:</span>
|
||||
<a href={article.source_url} target="_blank" rel="noopener noreferrer">
|
||||
{article.source_url}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -32,6 +32,28 @@ export default function NewsDetail() {
|
||||
</div>
|
||||
)
|
||||
|
||||
const isFullHtml = /^\s*<!DOCTYPE|^\s*<html/i.test(article.content ?? '')
|
||||
|
||||
if (isFullHtml) {
|
||||
return (
|
||||
<div>
|
||||
<div style={{ padding: '0.5rem 1rem', background: 'var(--c-surface)', borderBottom: '1px solid var(--c-border)' }}>
|
||||
<button className="back-btn" onClick={() => navigate(-1)}>← Назад</button>
|
||||
</div>
|
||||
<iframe
|
||||
srcDoc={article.content}
|
||||
style={{ width: '100%', border: 'none', display: 'block' }}
|
||||
title={article.title}
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
onLoad={e => {
|
||||
const doc = e.target.contentDocument
|
||||
if (doc) e.target.style.height = doc.documentElement.scrollHeight + 'px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="article-page">
|
||||
<button className="back-btn" onClick={() => navigate(-1)}>← Назад</button>
|
||||
@@ -49,7 +71,8 @@ export default function NewsDetail() {
|
||||
|
||||
<div
|
||||
className="article-body"
|
||||
dangerouslySetInnerHTML={{ __html: article.body ?? '' }}
|
||||
style={article.font_family ? { fontFamily: article.font_family } : undefined}
|
||||
dangerouslySetInnerHTML={{ __html: article.content ?? '' }}
|
||||
/>
|
||||
|
||||
{article.tags?.length > 0 && (
|
||||
|
||||
@@ -53,63 +53,27 @@ const DEFAULT_META = {
|
||||
status: 'draft',
|
||||
}
|
||||
|
||||
/* ── Загрузчик: сначала данные, потом редактор ── */
|
||||
export default function App() {
|
||||
const [initContent, setInitContent] = useState(IS_NEW ? '' : null) // null = ещё не загружено
|
||||
const [initMeta, setInitMeta] = useState(DEFAULT_META)
|
||||
|
||||
useEffect(() => {
|
||||
if (IS_NEW) return
|
||||
api.getArticle(ARTICLE_ID, TOKEN)
|
||||
.then(data => {
|
||||
setInitMeta({
|
||||
id: data.id,
|
||||
title: data.title,
|
||||
slug: data.slug,
|
||||
excerpt: data.excerpt || '',
|
||||
cover_url: data.cover_url || null,
|
||||
source_url: data.source_url || null,
|
||||
font_family: data.font_family || 'Merriweather',
|
||||
category_id: data.category?.id || null,
|
||||
tag_names: (data.tags || []).map(t => t.name),
|
||||
status: data.status,
|
||||
})
|
||||
const html = data.content?.startsWith('<')
|
||||
? data.content
|
||||
: marked.parse(data.content || '')
|
||||
setInitContent(html || '')
|
||||
})
|
||||
.catch(() => setInitContent(''))
|
||||
}, [])
|
||||
|
||||
// Пока данные не загружены — показываем лоадер
|
||||
if (initContent === null) {
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100vh', alignItems: 'center', justifyContent: 'center',
|
||||
background: '#f8fafc', color: '#94a3b8', fontSize: 14 }}>
|
||||
Загрузка статьи…
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <EditorApp initContent={initContent} initMeta={initMeta} />
|
||||
}
|
||||
|
||||
/* ── Сам редактор — рендерится только когда данные готовы ── */
|
||||
function EditorApp({ initContent, initMeta }) {
|
||||
const [meta, setMeta] = useState(initMeta)
|
||||
const [meta, setMeta] = useState(DEFAULT_META)
|
||||
const [categories, setCategories] = useState([])
|
||||
const [saveStatus, setSaveStatus] = useState('saved')
|
||||
const [mediaState, setMediaState] = useState(null)
|
||||
const [htmlMode, setHtmlMode] = useState(false)
|
||||
const [htmlDraft, setHtmlDraft] = useState('')
|
||||
const [rawHtml, setRawHtml] = useState(null) // полный HTML-документ, обходит TipTap
|
||||
const rawHtmlRef = useRef(null)
|
||||
rawHtmlRef.current = rawHtml
|
||||
|
||||
const metaRef = useRef(meta)
|
||||
metaRef.current = meta
|
||||
const currentIdRef = useRef(initMeta.id ?? (IS_NEW ? null : ARTICLE_ID))
|
||||
const saveTimerRef = useRef(null)
|
||||
const editorRef = useRef(null)
|
||||
const doSaveRef = useRef(null)
|
||||
/* Refs so callbacks always see latest values without re-creating them */
|
||||
const metaRef = useRef(meta)
|
||||
metaRef.current = meta
|
||||
const currentIdRef = useRef(IS_NEW ? null : ARTICLE_ID)
|
||||
const saveTimerRef = useRef(null)
|
||||
const editorRef = useRef(null) // always points to live editor instance
|
||||
const articleLoadedRef = useRef(false)
|
||||
const doSaveRef = useRef(null) // always points to latest doSave
|
||||
|
||||
/* ── Editor создаётся сразу с готовым контентом ── */
|
||||
/* ── Editor ── */
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
@@ -130,22 +94,62 @@ function EditorApp({ initContent, initMeta }) {
|
||||
Placeholder.configure({ placeholder: 'Начните писать статью…' }),
|
||||
CharacterCount,
|
||||
],
|
||||
content: initContent,
|
||||
onUpdate: () => {
|
||||
setSaveStatus('unsaved')
|
||||
clearTimeout(saveTimerRef.current)
|
||||
// Always call the latest doSave via ref — avoids stale closure
|
||||
saveTimerRef.current = setTimeout(() => doSaveRef.current?.(), 3000)
|
||||
},
|
||||
})
|
||||
|
||||
// Keep editorRef current every render so doSave never uses a stale instance
|
||||
editorRef.current = editor
|
||||
|
||||
/* ── Категории ── */
|
||||
/* ── Load categories once on mount ── */
|
||||
useEffect(() => {
|
||||
api.getCategories(TOKEN).then(setCategories).catch(() => {})
|
||||
}, [])
|
||||
|
||||
/* ── Сохранение ── */
|
||||
/* ── Load article once the editor is ready ── */
|
||||
useEffect(() => {
|
||||
if (!editor || IS_NEW || articleLoadedRef.current) return
|
||||
articleLoadedRef.current = true
|
||||
|
||||
api.getArticle(ARTICLE_ID, TOKEN)
|
||||
.then(data => {
|
||||
setMeta({
|
||||
id: data.id,
|
||||
title: data.title,
|
||||
slug: data.slug,
|
||||
excerpt: data.excerpt || '',
|
||||
cover_url: data.cover_url || null,
|
||||
source_url: data.source_url || null,
|
||||
font_family: data.font_family || 'Merriweather',
|
||||
category_id: data.category?.id || null,
|
||||
tag_names: (data.tags || []).map(t => t.name),
|
||||
status: data.status,
|
||||
})
|
||||
const html = data.content?.startsWith('<')
|
||||
? data.content
|
||||
: marked.parse(data.content || '')
|
||||
const isFullDoc = /^\s*<!DOCTYPE|^\s*<html/i.test(html)
|
||||
if (isFullDoc) {
|
||||
setRawHtml(html)
|
||||
editor.commands.setContent('', false)
|
||||
} else {
|
||||
setRawHtml(null)
|
||||
editor.commands.setContent(html, false)
|
||||
}
|
||||
setSaveStatus('saved')
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [editor])
|
||||
|
||||
/* ── Save ─────────────────────────────────────────────────────────────────
|
||||
Uses editorRef + metaRef so this callback is stable (no deps that change).
|
||||
doSaveRef is updated every render so the auto-save timer always calls the
|
||||
freshest version.
|
||||
── */
|
||||
const doSave = useCallback(async overrideStatus => {
|
||||
const editor = editorRef.current
|
||||
if (!editor) return
|
||||
@@ -153,15 +157,16 @@ function EditorApp({ initContent, initMeta }) {
|
||||
setSaveStatus('saving')
|
||||
|
||||
const payload = {
|
||||
title: m.title || 'Без названия',
|
||||
slug: m.slug || undefined,
|
||||
content: editor.getHTML(),
|
||||
excerpt: m.excerpt,
|
||||
cover_url: m.cover_url || null,
|
||||
title: m.title || 'Без названия',
|
||||
slug: m.slug || undefined,
|
||||
content: rawHtmlRef.current ?? editor.getHTML(),
|
||||
excerpt: m.excerpt,
|
||||
cover_url: m.cover_url || null,
|
||||
source_url: m.source_url || null,
|
||||
font_family: m.font_family,
|
||||
category_id: m.category_id || null,
|
||||
tag_names: m.tag_names,
|
||||
status: overrideStatus ?? m.status,
|
||||
tag_names: m.tag_names,
|
||||
status: overrideStatus ?? m.status,
|
||||
}
|
||||
|
||||
try {
|
||||
@@ -175,12 +180,15 @@ function EditorApp({ initContent, initMeta }) {
|
||||
saved = await api.updateArticle(currentIdRef.current, payload, TOKEN)
|
||||
}
|
||||
setSaveStatus('saved')
|
||||
if (overrideStatus) setMeta(m => ({ ...m, status: overrideStatus }))
|
||||
if (overrideStatus) {
|
||||
setMeta(m => ({ ...m, status: overrideStatus }))
|
||||
}
|
||||
} catch {
|
||||
setSaveStatus('error')
|
||||
}
|
||||
}, [])
|
||||
}, []) // stable: reads from editorRef + metaRef
|
||||
|
||||
// Keep ref current so the auto-save timer always calls the latest version
|
||||
doSaveRef.current = doSave
|
||||
|
||||
const handleUploadCover = async file => {
|
||||
@@ -190,6 +198,7 @@ function EditorApp({ initContent, initMeta }) {
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/* ── Render ── */
|
||||
return (
|
||||
<div className="flex flex-col h-screen overflow-hidden bg-slate-50" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
|
||||
@@ -214,6 +223,26 @@ function EditorApp({ initContent, initMeta }) {
|
||||
type: 'video',
|
||||
cb: url => editor.chain().focus().insertVideo({ src: url }).run(),
|
||||
})}
|
||||
onEditHtml={() => {
|
||||
if (htmlMode) {
|
||||
const isFullDoc = /^\s*<!DOCTYPE|^\s*<html/i.test(htmlDraft)
|
||||
if (isFullDoc) {
|
||||
// Полный HTML-документ — обходим TipTap, сохраняем как есть
|
||||
setRawHtml(htmlDraft)
|
||||
editor.commands.setContent('', false)
|
||||
} else {
|
||||
// Фрагмент — отдаём в TipTap
|
||||
setRawHtml(null)
|
||||
editor.commands.setContent(htmlDraft, true)
|
||||
}
|
||||
setHtmlMode(false)
|
||||
} else {
|
||||
// Открываем редактор: показываем rawHtml или HTML из TipTap
|
||||
setHtmlDraft(rawHtml ?? editor.getHTML())
|
||||
setHtmlMode(true)
|
||||
}
|
||||
}}
|
||||
htmlMode={htmlMode}
|
||||
fonts={FONTS}
|
||||
/>
|
||||
|
||||
@@ -229,12 +258,45 @@ function EditorApp({ initContent, initMeta }) {
|
||||
onChange={e => setMeta(m => ({ ...m, title: e.target.value }))}
|
||||
/>
|
||||
|
||||
{/* TipTap content */}
|
||||
<div style={{ fontFamily: meta.font_family }}>
|
||||
<EditorContent editor={editor} />
|
||||
</div>
|
||||
{/* HTML source textarea */}
|
||||
{htmlMode && (
|
||||
<textarea
|
||||
spellCheck={false}
|
||||
value={htmlDraft}
|
||||
onChange={e => setHtmlDraft(e.target.value)}
|
||||
style={{
|
||||
width: '100%', minHeight: '60vh',
|
||||
fontFamily: '"JetBrains Mono", "Fira Code", monospace',
|
||||
fontSize: '0.8rem', lineHeight: 1.7,
|
||||
color: '#1e293b', background: '#f8fafc',
|
||||
border: '1px solid #e2e8f0', borderRadius: 8,
|
||||
padding: '1rem', resize: 'vertical', outline: 'none',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* TipTap visual editor */}
|
||||
{!htmlMode && !rawHtml && (
|
||||
<div style={{ fontFamily: meta.font_family }}>
|
||||
<EditorContent editor={editor} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Full HTML iframe — вне узкого контейнера, на всю ширину колонки */}
|
||||
{!htmlMode && rawHtml && (
|
||||
<iframe
|
||||
srcDoc={rawHtml}
|
||||
style={{ width: '100%', border: 'none', display: 'block' }}
|
||||
title="HTML preview"
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
onLoad={e => {
|
||||
const doc = e.target.contentDocument
|
||||
if (doc) e.target.style.height = doc.documentElement.scrollHeight + 'px'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -12,7 +12,10 @@ export function MediaModal({ type, token, onSelect, onClose }) {
|
||||
|
||||
useEffect(() => {
|
||||
api.listMedia(token, type)
|
||||
.then(data => { setAllItems(data); setItems(data); setLoading(false) })
|
||||
.then(data => {
|
||||
const list = Array.isArray(data) ? data : (data.items ?? [])
|
||||
setAllItems(list); setItems(list); setLoading(false)
|
||||
})
|
||||
.catch(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
|
||||
@@ -35,60 +35,38 @@ function Sep() {
|
||||
return <div className="w-px h-5 bg-slate-200 mx-0.5 flex-shrink-0" />
|
||||
}
|
||||
|
||||
/* ── Hook: позиция дропдауна через fixed (вырывается из overflow-контейнеров) ── */
|
||||
|
||||
function useFixedDropdown() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [pos, setPos] = useState({ top: 0, left: 0 })
|
||||
const btnRef = useRef(null)
|
||||
|
||||
const toggle = e => {
|
||||
e.preventDefault()
|
||||
if (!open && btnRef.current) {
|
||||
const r = btnRef.current.getBoundingClientRect()
|
||||
setPos({ top: r.bottom + 4, left: r.left })
|
||||
}
|
||||
setOpen(o => !o)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const close = e => {
|
||||
if (!btnRef.current?.contains(e.target)) setOpen(false)
|
||||
}
|
||||
document.addEventListener('mousedown', close)
|
||||
return () => document.removeEventListener('mousedown', close)
|
||||
}, [open])
|
||||
|
||||
return { open, setOpen, pos, btnRef, toggle }
|
||||
}
|
||||
|
||||
/* ── Font family dropdown ── */
|
||||
|
||||
function FontDropdown({ editor, fonts }) {
|
||||
const { open, setOpen, pos, btnRef, toggle } = useFixedDropdown()
|
||||
const [open, setOpen] = useState(false)
|
||||
const ref = useRef(null)
|
||||
const current = editor.getAttributes('textStyle').fontFamily || 'Шрифт'
|
||||
|
||||
useEffect(() => {
|
||||
const h = e => { if (!ref.current?.contains(e.target)) setOpen(false) }
|
||||
document.addEventListener('mousedown', h)
|
||||
return () => document.removeEventListener('mousedown', h)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0">
|
||||
<div className="relative flex-shrink-0" ref={ref}>
|
||||
<button
|
||||
ref={btnRef}
|
||||
type="button"
|
||||
onMouseDown={toggle}
|
||||
onMouseDown={e => { e.preventDefault(); setOpen(o => !o) }}
|
||||
className="flex items-center gap-1 px-2 h-[30px] rounded-md text-xs text-slate-600 hover:bg-slate-100 border border-transparent hover:border-slate-200 transition-colors max-w-[130px] cursor-pointer"
|
||||
title="Шрифт"
|
||||
>
|
||||
<span className="truncate leading-none" style={{ fontFamily: current !== 'Шрифт' ? current : undefined }}>
|
||||
<span
|
||||
className="truncate leading-none"
|
||||
style={{ fontFamily: current !== 'Шрифт' ? current : undefined }}
|
||||
>
|
||||
{current}
|
||||
</span>
|
||||
<ChevronDown size={11} className="flex-shrink-0 opacity-60" />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
style={{ position: 'fixed', top: pos.top, left: pos.left, zIndex: 9999, width: 208 }}
|
||||
className="bg-white border border-slate-200 rounded-xl shadow-2xl max-h-72 overflow-y-auto py-1.5"
|
||||
>
|
||||
<div className="absolute top-[34px] left-0 z-50 bg-white border border-slate-200 rounded-xl shadow-2xl w-52 max-h-72 overflow-y-auto py-1.5">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-3 py-1.5 text-left text-xs text-slate-400 hover:bg-slate-50 transition-colors"
|
||||
@@ -117,15 +95,21 @@ function FontDropdown({ editor, fonts }) {
|
||||
/* ── Font size dropdown ── */
|
||||
|
||||
function SizeDropdown({ editor }) {
|
||||
const { open, setOpen, pos, btnRef, toggle } = useFixedDropdown()
|
||||
const [open, setOpen] = useState(false)
|
||||
const ref = useRef(null)
|
||||
const current = editor.getAttributes('textStyle').fontSize?.replace('px', '') || '—'
|
||||
|
||||
useEffect(() => {
|
||||
const h = e => { if (!ref.current?.contains(e.target)) setOpen(false) }
|
||||
document.addEventListener('mousedown', h)
|
||||
return () => document.removeEventListener('mousedown', h)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0">
|
||||
<div className="relative flex-shrink-0" ref={ref}>
|
||||
<button
|
||||
ref={btnRef}
|
||||
type="button"
|
||||
onMouseDown={toggle}
|
||||
onMouseDown={e => { e.preventDefault(); setOpen(o => !o) }}
|
||||
className="flex items-center gap-1 px-1.5 h-[30px] w-14 rounded-md text-xs text-slate-600 hover:bg-slate-100 border border-transparent hover:border-slate-200 transition-colors cursor-pointer"
|
||||
title="Размер шрифта"
|
||||
>
|
||||
@@ -134,10 +118,7 @@ function SizeDropdown({ editor }) {
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
style={{ position: 'fixed', top: pos.top, left: pos.left, zIndex: 9999, width: 80 }}
|
||||
className="bg-white border border-slate-200 rounded-xl shadow-2xl max-h-56 overflow-y-auto py-1.5"
|
||||
>
|
||||
<div className="absolute top-[34px] left-0 z-50 bg-white border border-slate-200 rounded-xl shadow-2xl w-20 max-h-56 overflow-y-auto py-1.5">
|
||||
{FONT_SIZES.map(s => (
|
||||
<button
|
||||
key={s}
|
||||
@@ -158,23 +139,13 @@ function SizeDropdown({ editor }) {
|
||||
|
||||
function TableMenu({ editor }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [pos, setPos] = useState({ top: 0, left: 0 })
|
||||
const wrapRef = useRef(null)
|
||||
|
||||
const toggle = () => {
|
||||
if (!open && wrapRef.current) {
|
||||
const r = wrapRef.current.getBoundingClientRect()
|
||||
setPos({ top: r.bottom + 4, left: r.left })
|
||||
}
|
||||
setOpen(o => !o)
|
||||
}
|
||||
const ref = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const close = e => { if (!wrapRef.current?.contains(e.target)) setOpen(false) }
|
||||
document.addEventListener('mousedown', close)
|
||||
return () => document.removeEventListener('mousedown', close)
|
||||
}, [open])
|
||||
const h = e => { if (!ref.current?.contains(e.target)) setOpen(false) }
|
||||
document.addEventListener('mousedown', h)
|
||||
return () => document.removeEventListener('mousedown', h)
|
||||
}, [])
|
||||
|
||||
const items = [
|
||||
{ label: 'Вставить таблицу 3×3', fn: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
|
||||
@@ -191,9 +162,9 @@ function TableMenu({ editor }) {
|
||||
]
|
||||
|
||||
return (
|
||||
<div ref={wrapRef} className="flex-shrink-0">
|
||||
<div className="relative flex-shrink-0" ref={ref}>
|
||||
<Btn
|
||||
onClick={toggle}
|
||||
onClick={() => setOpen(o => !o)}
|
||||
active={editor.isActive('table')}
|
||||
title="Таблица"
|
||||
>
|
||||
@@ -201,10 +172,7 @@ function TableMenu({ editor }) {
|
||||
</Btn>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
style={{ position: 'fixed', top: pos.top, left: pos.left, zIndex: 9999, width: 208 }}
|
||||
className="bg-white border border-slate-200 rounded-xl shadow-2xl py-1.5"
|
||||
>
|
||||
<div className="absolute top-[34px] left-0 z-50 bg-white border border-slate-200 rounded-xl shadow-2xl w-52 py-1.5">
|
||||
{items.map((item, i) =>
|
||||
item === null ? (
|
||||
<div key={i} className="my-1 border-t border-slate-100" />
|
||||
@@ -213,7 +181,9 @@ function TableMenu({ editor }) {
|
||||
key={item.label}
|
||||
type="button"
|
||||
className={`w-full px-3 py-1.5 text-left text-xs transition-colors
|
||||
${item.danger ? 'text-red-500 hover:bg-red-50' : 'text-slate-700 hover:bg-slate-50'}`}
|
||||
${item.danger
|
||||
? 'text-red-500 hover:bg-red-50'
|
||||
: 'text-slate-700 hover:bg-slate-50'}`}
|
||||
onMouseDown={e => { e.preventDefault(); item.fn(); setOpen(false) }}
|
||||
>
|
||||
{item.label}
|
||||
@@ -228,7 +198,7 @@ function TableMenu({ editor }) {
|
||||
|
||||
/* ── Main Toolbar ── */
|
||||
|
||||
export function Toolbar({ editor, onInsertImage, onInsertVideo, fonts }) {
|
||||
export function Toolbar({ editor, onInsertImage, onInsertVideo, onEditHtml, htmlMode, fonts }) {
|
||||
if (!editor) return null
|
||||
|
||||
const setLink = () => {
|
||||
@@ -240,7 +210,7 @@ export function Toolbar({ editor, onInsertImage, onInsertVideo, fonts }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-0.5 px-3 py-1.5 bg-white border-b border-slate-200 shadow-sm overflow-x-auto flex-shrink-0 min-h-[46px]" style={{ scrollbarWidth: 'none' }}>
|
||||
<div className="sticky top-0 z-10 flex items-center gap-0.5 px-3 py-1.5 bg-white border-b border-slate-200 shadow-sm overflow-x-auto flex-wrap min-h-[46px]">
|
||||
{/* History */}
|
||||
<Btn onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()} title="Отменить (Ctrl+Z)">
|
||||
<Undo2 size={14} />
|
||||
@@ -305,9 +275,7 @@ export function Toolbar({ editor, onInsertImage, onInsertVideo, fonts }) {
|
||||
<Btn onClick={() => editor.chain().focus().toggleBlockquote().run()} active={editor.isActive('blockquote')} title="Цитата">
|
||||
<Quote size={14} />
|
||||
</Btn>
|
||||
<Btn onClick={() => editor.chain().focus().toggleCodeBlock().run()} active={editor.isActive('codeBlock')} title="Блок кода">
|
||||
<Code2 size={14} />
|
||||
</Btn>
|
||||
|
||||
<Btn onClick={() => editor.chain().focus().setHorizontalRule().run()} title="Разделитель">
|
||||
<Minus size={14} />
|
||||
</Btn>
|
||||
@@ -324,6 +292,19 @@ export function Toolbar({ editor, onInsertImage, onInsertVideo, fonts }) {
|
||||
<Video size={14} />
|
||||
</Btn>
|
||||
<TableMenu editor={editor} />
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={e => { e.preventDefault(); onEditHtml?.() }}
|
||||
title={htmlMode ? 'Вернуться в редактор (применить HTML)' : 'Редактировать HTML-код'}
|
||||
style={{
|
||||
height: 30, padding: '0 8px', borderRadius: 6, border: 'none', cursor: 'pointer',
|
||||
fontFamily: 'monospace', fontSize: 12, fontWeight: 700, flexShrink: 0,
|
||||
background: htmlMode ? '#4f46e5' : 'transparent',
|
||||
color: htmlMode ? '#fff' : '#64748b',
|
||||
}}
|
||||
onMouseEnter={e => { if (!htmlMode) e.target.style.background = '#f1f5f9' }}
|
||||
onMouseLeave={e => { if (!htmlMode) e.target.style.background = 'transparent' }}
|
||||
></></button>
|
||||
<Sep />
|
||||
|
||||
{/* Typography */}
|
||||
|
||||
Reference in New Issue
Block a user