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.
45 lines
1.6 KiB
React
45 lines
1.6 KiB
React
2 years ago
|
import { useEffect, useRef } from 'preact/hooks'
|
||
|
|
import { Markdown } from './Markdown.jsx'
|
||
|
|
|
||
|
|
export const MarkdownEditor = ({ source, setSource }) => {
|
||
|
|
const editorRef = useRef()
|
||
|
|
|
||
|
|
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">
|
||
|
|
<h1>Editor</h1>
|
||
|
|
<textarea
|
||
|
|
onInput={e => setSource(e.target.value)}
|
||
|
|
value={source}
|
||
|
|
cols="60"
|
||
|
|
ref={editorRef}
|
||
|
|
placeholder="Scrivi una nuova soluzione..."
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="preview">
|
||
|
|
<h1>Preview</h1>
|
||
|
|
<div class="preview-content">
|
||
|
|
{source.trim().length ? (
|
||
|
|
<Markdown source={source} />
|
||
|
|
) : (
|
||
|
|
<div class="placeholder">Scrivi una nuova soluzione...</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|