import { Component, JSX } from 'preact' import { StateUpdater, useEffect, useRef } from 'preact/hooks' import { Markdown } from './Markdown' type Props = { placeholder?: string source: string setSource: StateUpdater } export const MarkdownEditor = ({ placeholder, source, setSource }: Props) => { placeholder ??= 'Scrivi qualcosa...' const editorRef = useRef(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 (
Editor
Preview
{source.trim().length ? :
{placeholder}
}
) }