You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

50 lines
1.8 KiB
TypeScript

import { Component, JSX } from 'preact'
import { StateUpdater, useEffect, useRef } from 'preact/hooks'
import { Markdown } from './Markdown'
type Props = {
placeholder?: string
source: string
setSource: StateUpdater<string>
}
export const MarkdownEditor = ({ placeholder, source, setSource }: Props) => {
placeholder ??= 'Scrivi qualcosa...'
const editorRef = useRef<HTMLTextAreaElement>(null)
useEffect(() => {
if (editorRef.current) {
// settare questo ad "auto" toglie l'altezza al contenitore che passa alla sua
// dimensione minima iniziale, ciò serve per permettere all'autosize della textarea di
// crescere e ridursi ma ha il problema che resetta lo scroll della pagina che deve
// essere preservato a mano
const oldScrollY = window.scrollY
editorRef.current.style.height = 'auto'
editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
window.scrollTo(0, oldScrollY)
}
}, [source])
return (
<div class="markdown-editor">
<div class="editor">
<div class="label">Editor</div>
<textarea
onInput={e => setSource(e.target instanceof HTMLTextAreaElement ? e.target.value : '')}
value={source}
cols={60}
ref={editorRef}
placeholder={placeholder}
></textarea>
</div>
<div class="preview">
<div class="label">Preview</div>
<div class="preview-content">
{source.trim().length ? <Markdown source={source} /> : <div class="placeholder">{placeholder}</div>}
</div>
</div>
</div>
)
}