Elm에 CodeMirror 포함

Elm 으로 그린 ​​요소 안에 JavaScript 의 컴퍼넌트를 포함하고 싶어지는 것이 가끔 있습니다. 이 기사에서는 일반적인 예제로 편집기를 포함하는 샘플을 작성해 보겠습니다. 이번에 사용하는 라이브러리는 CodeMirror입니다.

그렇다고 할 수 있었던 것이 이쪽.

하지만

코드

이것만으로는 알기 어렵지만, 에디터는 제대로 Elm 안에 있습니다. 잘못 DOM을 만지면 Virtual DOM이 에러를 냅니다.

Elm 측 코드

#editor 요소를 CodeMirror로 초기화합니다. CodeMirror 특유의 사정으로는, 이 요소의 바로 뒤에 에디터의 요소가 삽입되기 때문에, 그 장소에 다른 요소는 두지 않게 합니다.

view : Model -> Html Msg
view model =
    div [ class "main" ]
        [ div [ class "editor" ]
            [ textarea
                [ id "editor"
                , style "display" "none"
                , onInput Input
                ]
                [ text "Hello, press `Ctrl+S` to see the result." ]
            ]
        , pre [ class "result" ] [ text model.lastSaved ]
        ]

이 예에서는 초기화하기 전에 일순 더러운 textarea 가 보이지 않게 숨기고 있습니다만, 편집 버튼을 누르면 에디터로 전환하는 UI 에도 할 수 있을 것 같습니다.
흥미로운 점은 onInput가 정상적으로 작동하는 것입니다. 텍스트를 동기화하는 것만으로는 Port조차 필요하지 않습니다.

그렇다고는 해도, 이것만이라면 지루하지 않기 때문에 보존( Ctrl+S ) 했을 때에 메세지를 받을 수 있도록(듯이) 해 봅니다.

port save : (String -> msg) -> Sub msg

JavaScript 측 코드

에디터의 초기화만 조금 까다롭습니다. Elm으로 그려진 타이밍을 아는 방법이 없기 때문에 요소가 나올 때까지 setInterval에서 기다리고 있습니다. 뭐 이것이라고 실패했을 때에 무한 루프 해 버리므로, 제대로 쓴다면 좀 더 궁리가 필요할 것 같습니다만.

var app = Elm.Main.init({
    node: document.getElementById("app")
});
var initializer = setInterval(function () {
    var textarea = document.getElementById("editor");
    if (!textarea) {
        return;
    }
    var editor = CodeMirror.fromTextArea(textarea, {
        lineNumbers: true
    });
    editor.setOption("extraKeys", {
        ["Ctrl-S"]: function (cm) {
            app.ports.save.send(editor.doc.getValue());
        },
        ["Cmd-S"]: function (cm) {
            app.ports.save.send(editor.doc.getValue());
        }
    });
    clearInterval(initializer);
}, 10);

단축키로 저장하면 Elm 측에 메시지를 보내도록 하고 있습니다. 편의를 위해 텍스트를 보내고 있습니다만, onInput 로 이미 취득하고 있으므로 실은 없어도 됩니다.

감상

더 트래블할까 생각했는데, 실제로는 의도적으로 에러를 일으킬 때까지는 평온 무사했습니다. 에디터나 그 조상의 요소를 지우면 다시 textarea로 돌아간다는 트러블이 있습니다만, 실제로는 그렇게 퐁퐁 초기화를 반복하는 앱은 아마 별로 없다고 생각하기 때문에, 거기까지 걱정할 필요도 없다 안녕하세요.

앞으로는 WebComponents를 사용하면 더욱 스마트하게 할 수 있을 것입니다. 관심이 있으시면 선구자 동영상을 참조하십시오.