working implementation

src/Miu.elm

@@ -0,0 +1,68 @@
+module Miu exposing (main)
+
+import Browser
+import Html exposing (Attribute, Html, a, br, div, h2, hr, p, text)
+import Html.Attributes exposing (href, property)
+import Html.Events exposing (on)
+import Json.Decode as JD exposing (Decoder)
+import Json.Encode as JE exposing (Value)
+import Markdown
+
+
+main =
+    Browser.sandbox
+        { init = { value = "## Preview" }
+        , update = update
+        , view = view
+        }
+
+
+type alias Model =
+    { value : String
+    }
+
+
+type Msg
+    = CodeChanged String
+
+
+update : Msg -> Model -> Model
+update msg model =
+    case msg of
+        CodeChanged value ->
+            { model | value = value }
+
+
+{-| Here's our custom element, defined in js/custom-element-markitup.js
+-}
+markItUp : List (Attribute msg) -> List (Html msg) -> Html msg
+markItUp =
+    Html.node "markitup-textarea"
+
+
+{-| This is how you set the contents of the editor.
+-}
+editorValue : String -> Attribute msg
+editorValue value =
+    property "editorValue" <|
+        JE.string value
+
+
+{-| This is how you receive changes to the contents of the editor.
+-}
+onEditorChanged : (String -> msg) -> Attribute msg
+onEditorChanged tagger =
+    on "editorChanged" <|
+        JD.map tagger <|
+            JD.at [ "target", "editorValue" ]
+                JD.string
+
+
+view : Model -> Html Msg
+view model =
+    div []
+        [ h2 [] [ text "Markitup Custom Element from Elm" ]
+        , markItUp [ editorValue model.value, onEditorChanged CodeChanged ] []
+        , hr [] []
+        , Markdown.toHtml [] model.value
+        ]