I’m trying to include a rich HTML editor, and Tiny...

# compose-web

[steamstreet]

I’m trying to include a rich HTML editor, and TinyMCE seems to be pretty good, and they have a web components implementation. I’m able to create the component, which was quite straightforward. Here’s kind of the starting point:

import androidx.compose.runtime.Composable
import kotlinx.browser.document
import org.jetbrains.compose.web.attributes.AttrsScope
import org.jetbrains.compose.web.dom.ElementBuilder
import org.jetbrains.compose.web.dom.TagElement
import org.jetbrains.compose.web.dom.Text
import org.w3c.dom.Element
import org.w3c.dom.HTMLElement

private open class ElementBuilderImplementation<TElement : Element>(private val tagName: String) :
    ElementBuilder<TElement> {
    private val el: Element by lazy { document.createElement(tagName) }

    @Suppress("UNCHECKED_CAST")
    override fun create(): TElement = el.cloneNode() as TElement
}

class TinyMCEAttrsScope(
    attrsScope: AttrsScope<HTMLElement>
) : AttrsScope<HTMLElement> by attrsScope {

    fun apiKey(key: String): TinyMCEAttrsScope = apply {
        attr("api-key", key)
    }

    fun hideMenuBar(): TinyMCEAttrsScope = apply {
        attr("menubar", "false")
    }

    fun plugins(vararg list: String): TinyMCEAttrsScope = apply {
        attr("plugins", list.joinToString(" "))
    }

    fun toolbar(defn: String): TinyMCEAttrsScope = apply {
        attr("toolbar", defn)
    }
}

@Composable
fun tinyMce(attrs: TinyMCEAttrsScope.() -> Unit = {}, content: String) = TagElement(
    ElementBuilderImplementation<HTMLElement>("tinymce-editor"), applyAttrs = {
        val tinymceAttrsBuilder = TinyMCEAttrsScope(this)
        tinymceAttrsBuilder.attrs()
    }) {
 Text(content)
}

What I’m struggling with is events. The developer claims that input events are fired, but I’ve tried different ways to install the handler to no avail. I’ve tried to get other events as well, and I just don’t get callbacks. Any thoughts on how I would install these event handlers?

[steamstreet]

Here’s the guide: https://www.tiny.cloud/docs/tinymce/6/webcomponent-cloud/

[steamstreet]

And the claimed events that are produced: https://www.tiny.cloud/docs/tinymce/6/events/