Hello, I think I went down the rabbit hole too fast and got something working which I don't understand why/how it works.
Context: I try to the Ace editor in my Elm application. I found this discussion <https://groups.google.com/forum/#!topic/elm-discuss/FFiAjYYndY0> here, that helped me to first embed my generated "aceIntegration.js" into a HTML page that has also features an Ace editor. As Ryan Rempel points out <https://groups.google.com/d/msg/elm-discuss/FFiAjYYndY0/RpJ8iBYZAQAJ> in the mentioned thread, it would be nicer if one could include the JS component in their Elm program, so I tried his suggestion using juicy-ace-editor <https://github.com/Juicy/juicy-ace-editor>, a custom element wrapper around Ace to enable its integration by using a DOM node. I tried to understand how I could add a "link tag" to my elm rendering logic so that I can integrate the juicy-ace-editor tag and use it in Elm. The result's like this: port module AceIntegration exposing (..) import Html exposing (div, node, text) import Html.Attributes exposing (rel, href) main = div [] [ node "link" [ rel "import" , href "bower_components/juicy-ace-editor/juicy-ace-editor.html" ] [ ] , node "juicy-ace-editor" [ ] [ text "my editor content"] ] <html lang="en"> <head> <meta charset="UTF-8"> <title>ACE with Elm</title> <script src="./aceIntegration.js"></script> <script>window.Elm = require('./aceIntegration.js');</script> </head> <body> </body> <script type="text/javascript"> Elm.AceIntegration.fullscreen(); </script> </html> Notice that I use the HTML above as main entry point for electron to run this as a desktop app, just as a side note. But it works (the Ace editor is there and I can use it). What I cannot quite wrap my head around (since I found this by pure brute-force) is the way I create the link node in Elm and actually make juicy-ace-editor available? Is Elm taking care of adding that to the head node of the DOM somehow? Is it not necessary to have this "link node" as a child of the "head node"? Looking at the generated AceIntegration.js didn't really help me understand this yet, and yes, I'm new to web development. Also, I'm curious if there is a better way to integrate a JS component that can modify the DOM? If this is fine, I plan to use the exposed "change" event of "juicy-ace-editor" to get notified about changes in my Elm program. Thanks -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/d/optout.
