458 lines
15 KiB
TypeScript
458 lines
15 KiB
TypeScript
import Prism from 'prismjs'
|
||
import { createEffect, createSignal, onMount, Show } from 'solid-js'
|
||
import 'prismjs/components/prism-json'
|
||
import 'prismjs/components/prism-markup'
|
||
import 'prismjs/components/prism-javascript'
|
||
import 'prismjs/components/prism-css'
|
||
import 'prismjs/themes/prism-tomorrow.css'
|
||
|
||
import styles from '../styles/CodePreview.module.css'
|
||
import { detectLanguage } from './CodePreview'
|
||
|
||
interface EditableCodePreviewProps {
|
||
content: string
|
||
onContentChange: (newContent: string) => void
|
||
onSave?: (content: string) => void
|
||
onCancel?: () => void
|
||
language?: string
|
||
maxHeight?: string
|
||
placeholder?: string
|
||
showButtons?: boolean
|
||
}
|
||
|
||
/**
|
||
* Форматирует HTML контент для лучшего отображения
|
||
* Убирает лишние пробелы и делает разметку красивой
|
||
*/
|
||
const formatHtmlContent = (html: string): string => {
|
||
if (!html || typeof html !== 'string') return ''
|
||
|
||
// Удаляем лишние пробелы между тегами
|
||
let formatted = html
|
||
.replace(/>\s+</g, '><') // Убираем пробелы между тегами
|
||
.replace(/\s+/g, ' ') // Множественные пробелы в одиночные
|
||
.trim() // Убираем пробелы в начале и конце
|
||
|
||
// Добавляем отступы для лучшего отображения
|
||
const indent = ' '
|
||
let indentLevel = 0
|
||
const lines: string[] = []
|
||
|
||
// Разбиваем на токены (теги и текст)
|
||
const tokens = formatted.match(/<[^>]+>|[^<]+/g) || []
|
||
|
||
for (const token of tokens) {
|
||
if (token.startsWith('<')) {
|
||
if (token.startsWith('</')) {
|
||
// Закрывающий тег - уменьшаем отступ
|
||
indentLevel = Math.max(0, indentLevel - 1)
|
||
lines.push(indent.repeat(indentLevel) + token)
|
||
} else if (token.endsWith('/>')) {
|
||
// Самозакрывающийся тег
|
||
lines.push(indent.repeat(indentLevel) + token)
|
||
} else {
|
||
// Открывающий тег - добавляем отступ
|
||
lines.push(indent.repeat(indentLevel) + token)
|
||
indentLevel++
|
||
}
|
||
} else {
|
||
// Текстовое содержимое
|
||
const trimmed = token.trim()
|
||
if (trimmed) {
|
||
lines.push(indent.repeat(indentLevel) + trimmed)
|
||
}
|
||
}
|
||
}
|
||
|
||
return lines.join('\n')
|
||
}
|
||
|
||
/**
|
||
* Генерирует номера строк для текста
|
||
*/
|
||
const generateLineNumbers = (text: string): string[] => {
|
||
if (!text) return ['1']
|
||
const lines = text.split('\n')
|
||
return lines.map((_, index) => String(index + 1))
|
||
}
|
||
|
||
/**
|
||
* Редактируемый компонент для кода с подсветкой синтаксиса
|
||
*/
|
||
const EditableCodePreview = (props: EditableCodePreviewProps) => {
|
||
const [isEditing, setIsEditing] = createSignal(false)
|
||
const [content, setContent] = createSignal(props.content)
|
||
let editorRef: HTMLDivElement | undefined
|
||
let highlightRef: HTMLPreElement | undefined
|
||
let lineNumbersRef: HTMLDivElement | undefined
|
||
|
||
const language = () => props.language || detectLanguage(content())
|
||
|
||
/**
|
||
* Обновляет подсветку синтаксиса
|
||
*/
|
||
const updateHighlight = () => {
|
||
if (!highlightRef) return
|
||
|
||
const code = content() || ''
|
||
const lang = language()
|
||
|
||
try {
|
||
if (Prism.languages[lang]) {
|
||
highlightRef.innerHTML = Prism.highlight(code, Prism.languages[lang], lang)
|
||
} else {
|
||
highlightRef.textContent = code
|
||
}
|
||
} catch (e) {
|
||
console.error('Error highlighting code:', e)
|
||
highlightRef.textContent = code
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обновляет номера строк
|
||
*/
|
||
const updateLineNumbers = () => {
|
||
if (!lineNumbersRef) return
|
||
|
||
const lineNumbers = generateLineNumbers(content())
|
||
lineNumbersRef.innerHTML = lineNumbers
|
||
.map(num => `<div class="${styles.lineNumber}">${num}</div>`)
|
||
.join('')
|
||
}
|
||
|
||
/**
|
||
* Синхронизирует скролл между редактором и подсветкой
|
||
*/
|
||
const syncScroll = () => {
|
||
if (editorRef && highlightRef) {
|
||
highlightRef.scrollTop = editorRef.scrollTop
|
||
highlightRef.scrollLeft = editorRef.scrollLeft
|
||
}
|
||
if (editorRef && lineNumbersRef) {
|
||
lineNumbersRef.scrollTop = editorRef.scrollTop
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обработчик изменения контента
|
||
*/
|
||
const handleInput = (e: Event) => {
|
||
const target = e.target as HTMLDivElement
|
||
|
||
// Сохраняем текущую позицию курсора
|
||
const selection = window.getSelection()
|
||
let caretOffset = 0
|
||
|
||
if (selection && selection.rangeCount > 0) {
|
||
const range = selection.getRangeAt(0)
|
||
const preCaretRange = range.cloneRange()
|
||
preCaretRange.selectNodeContents(target)
|
||
preCaretRange.setEnd(range.endContainer, range.endOffset)
|
||
caretOffset = preCaretRange.toString().length
|
||
}
|
||
|
||
const newContent = target.textContent || ''
|
||
setContent(newContent)
|
||
props.onContentChange(newContent)
|
||
updateHighlight()
|
||
updateLineNumbers()
|
||
|
||
// Восстанавливаем позицию курсора после обновления
|
||
requestAnimationFrame(() => {
|
||
if (target && selection) {
|
||
try {
|
||
const textNode = target.firstChild
|
||
if (textNode && textNode.nodeType === Node.TEXT_NODE) {
|
||
const range = document.createRange()
|
||
const safeOffset = Math.min(caretOffset, textNode.textContent?.length || 0)
|
||
range.setStart(textNode, safeOffset)
|
||
range.setEnd(textNode, safeOffset)
|
||
selection.removeAllRanges()
|
||
selection.addRange(range)
|
||
}
|
||
} catch (error) {
|
||
console.warn('Could not restore caret position:', error)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* Обработчик сохранения
|
||
*/
|
||
const handleSave = () => {
|
||
if (props.onSave) {
|
||
props.onSave(content())
|
||
}
|
||
setIsEditing(false)
|
||
}
|
||
|
||
/**
|
||
* Обработчик отмены
|
||
*/
|
||
const handleCancel = () => {
|
||
const originalContent = props.content
|
||
setContent(originalContent) // Возвращаем исходный контент
|
||
|
||
// Обновляем содержимое редактируемой области
|
||
if (editorRef) {
|
||
editorRef.textContent = originalContent
|
||
}
|
||
|
||
if (props.onCancel) {
|
||
props.onCancel()
|
||
}
|
||
setIsEditing(false)
|
||
}
|
||
|
||
/**
|
||
* Обработчик клавиш
|
||
*/
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
// Ctrl+Enter или Cmd+Enter для сохранения
|
||
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||
e.preventDefault()
|
||
handleSave()
|
||
return
|
||
}
|
||
|
||
// Escape для отмены
|
||
if (e.key === 'Escape') {
|
||
e.preventDefault()
|
||
handleCancel()
|
||
return
|
||
}
|
||
|
||
// Tab для отступа
|
||
if (e.key === 'Tab') {
|
||
e.preventDefault()
|
||
const selection = window.getSelection()
|
||
if (selection && selection.rangeCount > 0) {
|
||
const range = selection.getRangeAt(0)
|
||
range.deleteContents()
|
||
range.insertNode(document.createTextNode(' ')) // Два пробела
|
||
range.collapse(false)
|
||
selection.removeAllRanges()
|
||
selection.addRange(range)
|
||
handleInput(e)
|
||
}
|
||
}
|
||
}
|
||
|
||
// Эффект для обновления контента при изменении props
|
||
createEffect(() => {
|
||
if (!isEditing()) {
|
||
const formattedContent = language() === 'markup' || language() === 'html'
|
||
? formatHtmlContent(props.content)
|
||
: props.content
|
||
setContent(formattedContent)
|
||
updateHighlight()
|
||
updateLineNumbers()
|
||
}
|
||
})
|
||
|
||
// Эффект для обновления подсветки при изменении контента
|
||
createEffect(() => {
|
||
content() // Реактивность
|
||
updateHighlight()
|
||
updateLineNumbers()
|
||
})
|
||
|
||
// Эффект для синхронизации редактируемой области с content
|
||
createEffect(() => {
|
||
if (editorRef) {
|
||
const currentContent = content()
|
||
if (editorRef.textContent !== currentContent) {
|
||
// Сохраняем позицию курсора
|
||
const selection = window.getSelection()
|
||
let caretOffset = 0
|
||
|
||
if (selection && selection.rangeCount > 0 && isEditing()) {
|
||
const range = selection.getRangeAt(0)
|
||
const preCaretRange = range.cloneRange()
|
||
preCaretRange.selectNodeContents(editorRef)
|
||
preCaretRange.setEnd(range.endContainer, range.endOffset)
|
||
caretOffset = preCaretRange.toString().length
|
||
}
|
||
|
||
editorRef.textContent = currentContent
|
||
|
||
// Восстанавливаем курсор только в режиме редактирования
|
||
if (isEditing() && selection) {
|
||
requestAnimationFrame(() => {
|
||
try {
|
||
const textNode = editorRef?.firstChild
|
||
if (textNode && textNode.nodeType === Node.TEXT_NODE) {
|
||
const range = document.createRange()
|
||
const safeOffset = Math.min(caretOffset, textNode.textContent?.length || 0)
|
||
range.setStart(textNode, safeOffset)
|
||
range.setEnd(textNode, safeOffset)
|
||
selection.removeAllRanges()
|
||
selection.addRange(range)
|
||
}
|
||
} catch (error) {
|
||
console.warn('Could not restore caret position:', error)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
onMount(() => {
|
||
const formattedContent = language() === 'markup' || language() === 'html'
|
||
? formatHtmlContent(props.content)
|
||
: props.content
|
||
setContent(formattedContent)
|
||
updateHighlight()
|
||
updateLineNumbers()
|
||
})
|
||
|
||
return (
|
||
<div class={styles.editableCodeContainer}>
|
||
{/* Контейнер редактора - увеличиваем размер */}
|
||
<div
|
||
class={styles.editorWrapper}
|
||
style={`height: 100%; ${isEditing() ? 'border: 2px solid #007acc;' : ''}`}
|
||
>
|
||
{/* Номера строк */}
|
||
<div
|
||
ref={lineNumbersRef}
|
||
class={styles.lineNumbersContainer}
|
||
style="position: absolute; left: 0; top: 0; width: 50px; height: 100%; background: #1e1e1e; border-right: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; user-select: none; padding: 8px 0; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; line-height: 1.4;"
|
||
/>
|
||
|
||
{/* Подсветка синтаксиса (фон) - только в режиме редактирования */}
|
||
<Show when={isEditing()}>
|
||
<pre
|
||
ref={highlightRef}
|
||
class={`${styles.syntaxHighlight} language-${language()}`}
|
||
style="position: absolute; top: 0; left: 50px; right: 0; bottom: 0; pointer-events: none; color: transparent; background: transparent; margin: 0; padding: 8px 12px; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; z-index: 0;"
|
||
aria-hidden="true"
|
||
/>
|
||
</Show>
|
||
|
||
{/* Редактируемая область */}
|
||
<div
|
||
ref={(el) => {
|
||
editorRef = el
|
||
// Синхронизируем содержимое при создании элемента
|
||
if (el && el.textContent !== content()) {
|
||
el.textContent = content()
|
||
}
|
||
}}
|
||
contentEditable={isEditing()}
|
||
class={styles.editorArea}
|
||
style={`
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50px;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
background: ${isEditing() ? 'rgba(0, 0, 0, 0.02)' : 'transparent'};
|
||
color: ${isEditing() ? 'rgba(255, 255, 255, 0.9)' : 'transparent'};
|
||
margin: 0;
|
||
padding: 8px 12px;
|
||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
overflow-y: auto;
|
||
outline: none;
|
||
cursor: ${isEditing() ? 'text' : 'default'};
|
||
caret-color: ${isEditing() ? '#fff' : 'transparent'};
|
||
`}
|
||
onInput={handleInput}
|
||
onKeyDown={handleKeyDown}
|
||
onScroll={syncScroll}
|
||
spellcheck={false}
|
||
/>
|
||
|
||
{/* Превью для неактивного режима */}
|
||
<Show when={!isEditing()}>
|
||
<pre
|
||
class={`${styles.codePreview} language-${language()}`}
|
||
style={`
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50px;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: 0;
|
||
padding: 8px 12px;
|
||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
overflow-y: auto;
|
||
z-index: 2;
|
||
`}
|
||
onClick={() => setIsEditing(true)}
|
||
onScroll={(e) => {
|
||
// Синхронизируем номера строк при скролле в режиме просмотра
|
||
if (lineNumbersRef) {
|
||
lineNumbersRef.scrollTop = (e.target as HTMLElement).scrollTop
|
||
}
|
||
}}
|
||
>
|
||
<code
|
||
class={`language-${language()}`}
|
||
innerHTML={(() => {
|
||
try {
|
||
return Prism.highlight(content(), Prism.languages[language()], language())
|
||
} catch {
|
||
return content()
|
||
}
|
||
})()}
|
||
/>
|
||
</pre>
|
||
</Show>
|
||
</div>
|
||
|
||
{/* Индикатор языка */}
|
||
<span class={styles.languageBadge} style="top: 8px; right: 8px; z-index: 10;">
|
||
{language()}
|
||
</span>
|
||
|
||
{/* Плейсхолдер */}
|
||
<Show when={!content()}>
|
||
<div
|
||
class={styles.placeholder}
|
||
onClick={() => setIsEditing(true)}
|
||
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #666; cursor: pointer; font-style: italic; font-size: 14px;"
|
||
>
|
||
{props.placeholder || 'Нажмите для редактирования...'}
|
||
</div>
|
||
</Show>
|
||
|
||
{/* Кнопки управления внизу */}
|
||
{props.showButtons !== false && (
|
||
<div class={styles.editorControls} style="border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: none; background-color: #1e1e1e;">
|
||
<Show when={isEditing()} fallback={
|
||
<button class={styles.editButton} onClick={() => setIsEditing(true)}>
|
||
✏️ Редактировать
|
||
</button>
|
||
}>
|
||
<div class={styles.editingControls}>
|
||
<button class={styles.saveButton} onClick={handleSave}>
|
||
💾 Сохранить (Ctrl+Enter)
|
||
</button>
|
||
<button class={styles.cancelButton} onClick={handleCancel}>
|
||
❌ Отмена (Esc)
|
||
</button>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default EditableCodePreview
|