set the language attribute for the code editor

I've also added the Elm highlighter from @codemirror/legacy-modes
This commit is contained in:
Christian Lawson-Perfect 2025-02-09 20:29:06 +00:00
parent 90a3f2388b
commit 33769c8d1e
5 changed files with 37312 additions and 83 deletions

View file

@ -2,6 +2,7 @@ port module App exposing (..)
import Browser
import Browser.Navigation
import Dict
import File exposing (File)
import Html as H exposing (Html)
import Html.Attributes as HA
@ -523,89 +524,109 @@ main_nav model =
]
editor_pane model =
H.section
[ HA.id "editor"
, HE.preventDefaultOn "drop" (JD.at ["dataTransfer", "files"] (JD.list File.decoder) |> JD.map (\f -> (DropFiles Content f, True)) )
, HE.preventDefaultOn "dragover" (JD.succeed (NoOp,True))
]
[ H.nav
[ HA.id "editor-controls" ]
[ H.span
[ HA.id "file-path"
, HA.class "file-path"
]
[ H.text model.file_path ]
, H.span
[ HA.id "file-changed-status"
, HA.classList
[ ("changed", model.content_changed) ]
]
[ H.text <| if model.content_changed then "changed" else "saved" ]
, H.details
[]
[ H.summary
let
extension =
model.file_path
|> String.split "."
|> List.drop 1
|> List.head
|> Maybe.withDefault ""
languages = Dict.fromList
[ ("js", "javascript")
, ("mjs", "javascript")
, ("py", "python")
, ("r", "r")
, ("R", "r")
, ("elm", "elm")
]
language = Dict.get extension languages |> Maybe.withDefault ""
in
H.section
[ HA.id "editor"
, HE.preventDefaultOn "drop" (JD.at ["dataTransfer", "files"] (JD.list File.decoder) |> JD.map (\f -> (DropFiles Content f, True)) )
, HE.preventDefaultOn "dragover" (JD.succeed (NoOp,True))
]
[ H.nav
[ HA.id "editor-controls" ]
[ H.span
[ HA.id "file-path"
, HA.class "file-path"
]
[ H.text model.file_path ]
, H.span
[ HA.id "file-changed-status"
, HA.classList
[ ("changed", model.content_changed) ]
]
[ H.text <| if model.content_changed then "changed" else "saved" ]
, H.details
[]
[ H.text "Actions" ]
, form model
[ HA.method "POST"
, HA.action "delete-file"
]
[ H.input
[ HA.type_ "hidden"
, HA.name "path"
, HA.value model.file_path
]
[ H.summary
[]
, H.button
[ HA.type_ "submit" ]
[ H.text "Delete" ]
]
, form model
[ HA.method "POST"
, HA.action "rename-file"
]
[ H.input
[ HA.type_ "hidden"
, HA.name "path"
, HA.value model.file_path
[ H.text "Actions" ]
, form model
[ HA.method "POST"
, HA.action "delete-file"
]
[]
, H.input
[ HA.type_ "text"
, HA.name "newpath"
, HA.value model.file_path
[ H.input
[ HA.type_ "hidden"
, HA.name "path"
, HA.value model.file_path
]
[]
, H.button
[ HA.type_ "submit" ]
[ H.text "Delete" ]
]
, form model
[ HA.method "POST"
, HA.action "rename-file"
]
[ H.input
[ HA.type_ "hidden"
, HA.name "path"
, HA.value model.file_path
]
[]
, H.input
[ HA.type_ "text"
, HA.name "newpath"
, HA.value model.file_path
]
[]
, H.button
[ HA.type_ "submit" ]
[ H.text "Rename" ]
]
[]
, H.button
[ HA.type_ "submit" ]
[ H.text "Rename" ]
]
]
, form model
[ HA.id "file-form"
, HA.method "POST"
, HA.action "save-file"
]
[ H.node "code-editor"
[ HE.on "change" (JD.at ["target", "value"] JD.string |> JD.map SetFileContent)
, HA.attribute "content" model.file_content
, HA.attribute "language" language
]
[ H.text model.file_content ]
, H.input
[ HA.name "path"
, HA.value model.file_path
, HA.type_ "hidden"
]
[]
, H.input
[ HA.name "content"
, HA.value model.file_content
, HA.type_ "hidden"
]
[]
]
]
, form model
[ HA.id "file-form"
, HA.method "POST"
, HA.action "save-file"
]
[ H.node "code-editor"
[ HE.on "change" (JD.at ["target", "value"] JD.string |> JD.map SetFileContent)
, HA.attribute "content" model.file_content
]
[ H.text model.file_content ]
, H.input
[ HA.name "path"
, HA.value model.file_path
, HA.type_ "hidden"
]
[]
, H.input
[ HA.name "content"
, HA.value model.file_content
, HA.type_ "hidden"
]
[]
]
]
log_pane : Model -> Html Msg
log_pane model =