set the language attribute for the code editor

I've also added the Elm highlighter from @codemirror/legacy-modes

.gitignore

@@ -1,5 +1,4 @@
 .make.*
-dist/code-editor.mjs
 dist/think-editor.js
 elm-stuff
 jj/status

dist/think-editor.css

@@ -9,6 +9,7 @@
     --editor-size: 50%;
 
     --background: hsl(70,100%,95%);
+    --default-background: white;
     --color: black;
     --button-bg: #ddd;
 }
@@ -16,6 +17,7 @@
 @media (prefers-color-scheme: dark) {
   body {
     --background: hsl(70,100%,8%);
+    --default-background: black;
     --color: white;
     --button-bg: #333;
   }
@@ -237,10 +239,9 @@ input {
             z-index: 1;
         }
 
-        & #code-editor {
+        & code-editor {
+            background: var(--default-background);
             display: block;
-            max-width: 50vw;
-            padding-bottom: 10em;
         }
     }
 

index.html

@@ -17,11 +17,13 @@
       "slug": "loaded-thing",
       "files": [
         {"path": ".", "is_dir": true, "name": ".."},
-        {"path": "src/poo.elm", "is_dir": false, "name": "poo.elm"}
+        {"path": "src/poo.elm", "is_dir": false, "name": "poo.elm"},
+        {"path": "src/poo.js", "is_dir": false, "name": "poo.js"},
+        {"path": "src/poo.py", "is_dir": false, "name": "poo.py"}
       ],
-      "file_path": "src/poo.elm",
+      "file_path": "src/poo.js",
       "is_dir": false,
-      "file_content": "this\nis\nmy\nfile",
+      "file_content": "function x() {\n  return 1;\n}",
       "csrf_token": "arg",
       "elm_packages": [
         { 

src/App.elm

@@ -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
+  let
-    [ HA.id "editor" 
+    extension =
-    , HE.preventDefaultOn "drop" (JD.at ["dataTransfer", "files"] (JD.list File.decoder) |> JD.map (\f -> (DropFiles Content f, True)) )
+      model.file_path
-    , HE.preventDefaultOn "dragover" (JD.succeed (NoOp,True))
+      |> String.split "."
-    ]
+      |> List.drop 1
-    [ H.nav
+      |> List.head
-      [ HA.id "editor-controls" ]
+      |> Maybe.withDefault ""
-      [ H.span
+
-        [ HA.id "file-path"
+    languages = Dict.fromList
-        , HA.class "file-path"
+      [ ("js", "javascript")
-        ]
+      , ("mjs", "javascript")
-        [ H.text model.file_path ]
+      , ("py", "python")
-      , H.span 
+      , ("r", "r")
-        [ HA.id "file-changed-status"
+      , ("R", "r")
-        , HA.classList
+      , ("elm", "elm")
-          [ ("changed", model.content_changed) ]
+      ]
-        ]
+
-        [ H.text <| if model.content_changed then "changed" else "saved" ]
+    language = Dict.get extension languages |> Maybe.withDefault ""
-      , H.details
+  in
-        []
+    H.section
-        [ H.summary
+      [ 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" ]
+          [ H.summary
-        , form model
-          [ HA.method "POST"
-          , HA.action "delete-file"
-          ]
-          [ H.input
-            [ HA.type_ "hidden"
-            , HA.name "path"
-            , HA.value model.file_path
-            ]
             []
-          , H.button
+            [ H.text "Actions" ]
-            [ HA.type_ "submit" ]
+          , form model
-            [ H.text "Delete" ]
+            [ HA.method "POST"
-          ]
+            , HA.action "delete-file"
-        , form model
-          [ HA.method "POST"
-          , HA.action "rename-file"
-          ]
-          [ H.input
-            [ HA.type_ "hidden"
-            , HA.name "path"
-            , HA.value model.file_path
             ]
-            []
+            [ H.input
-          , H.input
+              [ HA.type_ "hidden"
-            [ HA.type_ "text"
+              , HA.name "path"
-            , HA.name "newpath"
+              , HA.value model.file_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 =