https://kotlinlang.org logo
#getting-started
Title
# getting-started
k

kr15t14ns

11/23/2023, 11:35 AM
Hello, was someone able to integrate npm libraries like tinymce or other wysiwyg into compose for web? I'm trying to do that, but I'm not success ... I installed in my gradle using
implementation(npm("tinymce", "6.8.0"))
and then in my component I used thisone implementation:
Copy code
package com.dsmp.app.views.templates.parts

import androidx.compose.runtime.*
import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLElement

@Composable
fun TinyMCEEditor(
    content: String,
    onContentChange: (String) -> Unit
) {
    val elementRef = remember { mutableStateOf<HTMLElement?>(null) }

    Div(
        attrs = {
            ref { domElement ->
                val element = domElement

                js("""
                    tinymce.init({
                        target: element, 
                        setup: function(editor) {
                            editor.on('Change', function() {
                                onContentChange(editor.getContent())
                            })
                        }
                    })
                """)

                onDispose {
                    js("tinymce.remove(element)")
                }
            }
        }
    ) {
        Text(content)
    }
}
That seems to work, and also in console I can see that something is loaded ... after that I used kotlin require in my App:
Copy code
kotlinext.js.require("tinymce")
but Iˇm missing still a lof of JS files and CSS stylesheets ... is this possible somehow to achieve, or can you help me with?