From 0aae8fd49ab7c81fefcd6acf446d8ff5849d3764 Mon Sep 17 00:00:00 2001
From: "Felipe S. S. Schneider"
 <37125+schneiderfelipe@users.noreply.github.com>
Date: Sat, 10 Apr 2021 06:02:16 -0300
Subject: [PATCH] Use CodeMirror.findModeByName instead of listing aliases
 (#1069)

* Use CodeMirror.findModeByName instead of listing aliases

* whitespace

Co-authored-by: Fons van der Plas <fonsvdplas@gmail.com>
---
 frontend/components/CellOutput.js | 37 +++++++++++++++++--------------
 frontend/editor.html              |  1 +
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/components/CellOutput.js b/frontend/components/CellOutput.js
index d8a2a980f3..d4ab0e1578 100644
--- a/frontend/components/CellOutput.js
+++ b/frontend/components/CellOutput.js
@@ -9,6 +9,9 @@ import { cl } from "../common/ClassTable.js"
 import { observablehq_for_cells } from "../common/SetupCellEnvironment.js"
 import { PlutoBondsContext, PlutoContext } from "../common/PlutoContext.js"
 
+//@ts-ignore
+const CodeMirror = window.CodeMirror
+
 export class CellOutput extends Component {
     constructor() {
         super()
@@ -333,16 +336,7 @@ export let RawHTMLContainer = ({ body, persist_js_state = false, last_run_timest
                 for (let code_element of container.current.querySelectorAll("code")) {
                     for (let className of code_element.classList) {
                         if (className.startsWith("language-")) {
-                            let aliases = {
-                                "html": "htmlmixed",
-                                "jl": "julia",
-                                "js": "javascript",
-                            }
-
                             let language = className.substr(9)
-                            if (language in aliases) {
-                                language = aliases[language]
-                            }
 
                             // Remove "language-"
                             highlight(code_element, language)
@@ -363,17 +357,26 @@ export let RawHTMLContainer = ({ body, persist_js_state = false, last_run_timest
 /** @param {HTMLElement} code_element */
 export let highlight = (code_element, language) => {
     if (code_element.children.length === 0) {
-        // @ts-ignore
-        window.CodeMirror.requireMode(
-            language,
-            function () {
-                window.CodeMirror.runMode(code_element.innerText, language, code_element)
+        let mode = language // fallback
+
+        let info = CodeMirror.findModeByName(language)
+        if (info) {
+            mode = info.mode
+        }
+
+        // Will not be required after release of https://github.com/codemirror/CodeMirror/commit/bd1b7d2976d768ae4e3b8cf209ec59ad73c0305a
+        if (mode == "jl") {
+            mode = "julia"
+        }
+
+        CodeMirror.requireMode(
+            mode,
+            () => {
+                CodeMirror.runMode(code_element.innerText, mode, code_element)
                 code_element.classList.add("cm-s-default")
             },
             {
-                path: function (language) {
-                    return `https://cdn.jsdelivr.net/npm/codemirror@5.58.1/mode/${language}/${language}.min.js`
-                },
+                path: (mode) => `https://cdn.jsdelivr.net/npm/codemirror@5.58.1/mode/${mode}/${mode}.min.js`,
             }
         )
     }
diff --git a/frontend/editor.html b/frontend/editor.html
index f71529dbdb..4e00f87696 100644
--- a/frontend/editor.html
+++ b/frontend/editor.html
@@ -29,6 +29,7 @@
     <script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/lib/codemirror.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/mode/julia/julia.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/addon/mode/loadmode.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/mode/meta.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/addon/hint/show-hint.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/addon/display/placeholder.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/addon/edit/matchbrackets.min.js" defer></script>