Full refactor to Typescript

2022-11-17 19:19:33 +01:00
parent de3f10b3ee
commit ffd3c99292
19 changed files with 180 additions and 95 deletions
@@ -0,0 +1,52 @@
+import { Component, JSX } from 'preact'
+import { StateUpdater, useEffect, useRef } from 'preact/hooks'
+import { Markdown } from './Markdown'
+
+type Props = {
+    source: string
+    setSource: StateUpdater<string>
+}
+
+export const MarkdownEditor = ({ source, setSource }: Props) => {
+    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">
+                <h1>Editor</h1>
+                <textarea
+                    onInput={e =>
+                        setSource(e.target instanceof HTMLTextAreaElement ? 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>
+    )
+}