Widget.elm

module Editor.Widget exposing (Widget, Msg, init, update, view)

import Html
import Html.Events
import Markdown

type State
    = Write
    | Preview

type alias Widget =
    { state : State
    , text : String
    }

type Msg
    = Switch State
    | Input String

init : String -> (Widget, Cmd Msg)
init text =
    (Widget Write text, Cmd.none)

markdownOptions : Markdown.Options
markdownOptions =
    Markdown.Options (Just { tables = False, breaks = False }) Nothing True True

update : Msg -> Widget -> (Widget, Cmd Msg)
update msg widget =
    case msg of
        Input text ->
            ({ widget | text = text }, Cmd.none)

        Switch state ->
            ({ widget | state = state }, Cmd.none)

view : Widget -> Html.Html Msg
view widget =
    Html.div []
        [ Html.nav []
            [ Html.button [ Html.Events.onClick <| Switch Write ] [ Html.text "Write" ]
            , Html.button [ Html.Events.onClick <| Switch Preview ] [ Html.text "Preview" ]
            ]
        , case widget.state of
            Preview ->
                Html.div []
                    [ Markdown.toHtmlWith markdownOptions [] widget.text
                    ]

            Write ->
                Html.div []
                    [ Html.textarea [ Html.Events.onInput <| Input ] [ Html.text widget.text ]
                    ]
        ]