Full refactor to Typescript

client/components/Markdown.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'preact/hooks'
+
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkMath from 'remark-math'
+import remarkRehype from 'remark-rehype'
+import rehypeKatex from 'rehype-katex'
+import rehypeStringify from 'rehype-stringify'
+
+async function renderMarkdownAsync(source: string) {
+    return await unified()
+        .use(remarkParse)
+        .use(remarkMath)
+        .use(remarkRehype)
+        .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
+        .use(rehypeStringify)
+        .process(source)
+}
+
+// function renderMarkdownSync(source) {
+//     console.warn(`[Markdown] Rendering ${source.length} characters of markdown in sync mode`)
+
+//     return unified()
+//         .use(remarkParse)
+//         .use(remarkMath)
+//         .use(remarkRehype)
+//         .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
+//         .use(rehypeStringify)
+//         .processSync(source)
+// }
+
+export const Markdown = ({ source }: { source: string }) => {
+    const elementRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        renderMarkdownAsync(source).then(data => {
+            if (elementRef.current) {
+                elementRef.current.innerHTML = data.toString()
+            }
+        })
+    }, [source])
+
+    return <div class="markdown" ref={elementRef}></div>
+}