EditorMarkdownTextArea.kt

package net.perfectdreams.dreamblog.frontend.components.editor

import androidx.compose.runtime.Composable
import kotlinx.browser.document
import kotlinx.dom.clear
import net.perfectdreams.dreamblog.frontend.screen.MutableI18nContentData
import net.perfectdreams.dreamblog.frontend.utils.EasyMDE
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.TextArea
import org.w3c.dom.HTMLElement
import org.w3c.dom.HTMLTextAreaElement

@Composable
fun EditorMarkdownTextArea(
    i18nContentDataMap: MutableI18nContentData
) {
    Div {
        DomSideEffect(i18nContentDataMap) { ref ->
            val textArea = document.createElement("textarea") as HTMLTextAreaElement
            textArea.value = i18nContentDataMap.content ?: ""
            ref.append(textArea)

            val easyMDE = EasyMDE(
                object : EasyMDE.Options {
                    override var element: HTMLElement?
                        get() = textArea
                        set(value) {}
                }
            )

            val e: () -> (Unit) = {
                i18nContentDataMap._content.value = easyMDE.value()
            }

            easyMDE.codemirror.on("change", e)

            onDispose {
                println("Should be disposed")

                it.clear()
            }
        }
    }
}