fix (intentionally) bad merge

Author: b-kelly

src/rich-text/node-views/code-block.ts

@@ -27,15 +27,7 @@ export class CodeBlockView implements NodeView {
     ) {
         this.dom = document.createElement("div");
         this.dom.classList.add("ps-relative", "p0", "ws-normal", "ow-normal");
-
-        const rawLanguage = this.getLanguageFromBlock(node);
-        this.language = rawLanguage;
-
-        this.dom.innerHTML = escapeHTML`
-<div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-300 js-language-indicator" contenteditable=false>${rawLanguage}</div>
-<pre class="s-code-block"><code class="content-dom"></code></pre>
-        `;
-
+        this.render(view, getPos);
         this.contentDOM = this.dom.querySelector(".content-dom");
         this.update(node);
     }
@@ -49,7 +41,7 @@ export class CodeBlockView implements NodeView {
         const rawLanguage = this.getLanguageFromBlock(node);
 
         const processorApplies = this.getValidProcessorResult(
-            rawLanguage,
+            rawLanguage.raw,
             node
         );
 
@@ -68,7 +60,6 @@ export class CodeBlockView implements NodeView {
         const randomId = generateRandomId();
 
         this.dom.innerHTML = escapeHTML`
-        <div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-300 js-language-indicator" contenteditable=false></div>
         <div class="d-flex ps-absolute t0 r0 js-processor-toggle">
             <label class="flex--item mr4" for="js-editor-toggle-${randomId}">
                 Edit
@@ -79,7 +70,8 @@ export class CodeBlockView implements NodeView {
             </div>
         </div>
         <div class="d-none js-processor-view"></div>
-        <pre class="s-code-block js-code-view js-code-mode"><code class="content-dom"></code></pre>`;
+        <pre class="s-code-block js-code-view js-code-mode"><code class="content-dom"></code></pre>
+        <div class="s-select s-select__sm ps-absolute t6 r6 js-language-indicator"><select class="js-lang-select"></select></div>`;
 
         this.contentDOM = this.dom.querySelector(".content-dom");
 
@@ -102,6 +94,8 @@ export class CodeBlockView implements NodeView {
                     })
                 );
             });
+
+        this.initializeLanguageSelect(view, getPos);
     }
 
     /** Switches the view between editor mode and processor mode */
@@ -116,61 +110,6 @@ export class CodeBlockView implements NodeView {
     }
 
     /** Gets the codeblock language from the node */
-    private getLanguageFromBlock(node: ProsemirrorNode) {
-        let autodetectedLanguage = node.attrs
-            .detectedHighlightLanguage as string;
-
-        // add an "auto" dropdown that we can target via JS
-        const autoOpt = document.createElement("option");
-        autoOpt.textContent = "auto";
-        autoOpt.value = "auto";
-        autoOpt.className = "js-auto-option";
-        $sel.appendChild(autoOpt);
-
-        getLoadedLanguages().forEach((lang) => {
-            const opt = document.createElement("option");
-            opt.value = lang;
-            opt.textContent = lang;
-            opt.defaultSelected = lang === this.language.raw;
-            $sel.appendChild(opt);
-        });
-
-        if (typeof getPos !== "function") {
-            return;
-        }
-
-        // when the dropdown is changed, update the language on the node
-        $sel.addEventListener("change", (e) => {
-            e.stopPropagation();
-
-            const newLang = $sel.value;
-
-            view.dispatch(
-                view.state.tr.setNodeMarkup(getPos(), null, {
-                    params: newLang === "auto" ? null : newLang,
-                    detectedHighlightLanguage: null,
-                })
-            );
-        });
-    }
-
-    private updateDisplayedLanguage() {
-        const lang = this.language.raw;
-        const $sel =
-            this.dom.querySelector<HTMLSelectElement>(".js-lang-select");
-        const $auto = $sel.querySelector(".js-auto-option");
-
-        if (this.language.autodetected) {
-            $sel.value = "auto";
-            $auto.textContent = _t("nodes.codeblock_lang_auto", {
-                lang,
-            });
-        } else {
-            $sel.value = lang;
-            $auto.textContent = _t("nodes.codeblock_auto");
-        }
-    }
-
     private getLanguageFromBlock(node: ProsemirrorNode) {
         const autodetectedLanguage = node.attrs
             .detectedHighlightLanguage as string;
@@ -182,11 +121,13 @@ export class CodeBlockView implements NodeView {
     }
 
     /** Updates the edit/code view */
-    private updateCodeBlock(rawLanguage: string) {
-        if (this.language !== rawLanguage) {
-            this.dom.querySelector(".js-language-indicator").textContent =
-                rawLanguage;
+    private updateCodeBlock(rawLanguage: CodeBlockView["language"]) {
+        if (this.language?.raw !== rawLanguage.raw) {
+            this.dom.querySelector<HTMLSelectElement>(
+                ".js-language-indicator"
+            ).value = rawLanguage.raw;
             this.language = rawLanguage;
+            this.updateDisplayedLanguage();
         }
     }
 
@@ -245,4 +186,59 @@ export class CodeBlockView implements NodeView {
 
         return processors;
     }
+
+    private initializeLanguageSelect(view: EditorView, getPos: getPosParam) {
+        const $sel =
+            this.dom.querySelector<HTMLSelectElement>(".js-lang-select");
+
+        // add an "auto" dropdown that we can target via JS
+        const autoOpt = document.createElement("option");
+        autoOpt.textContent = "auto";
+        autoOpt.value = "auto";
+        autoOpt.className = "js-auto-option";
+        $sel.appendChild(autoOpt);
+
+        getLoadedLanguages().forEach((lang) => {
+            const opt = document.createElement("option");
+            opt.value = lang;
+            opt.textContent = lang;
+            opt.defaultSelected = lang === this.language?.raw;
+            $sel.appendChild(opt);
+        });
+
+        if (typeof getPos !== "function") {
+            return;
+        }
+
+        // when the dropdown is changed, update the language on the node
+        $sel.addEventListener("change", (e) => {
+            e.stopPropagation();
+
+            const newLang = $sel.value;
+
+            view.dispatch(
+                view.state.tr.setNodeMarkup(getPos(), null, {
+                    params: newLang === "auto" ? null : newLang,
+                    detectedHighlightLanguage: null,
+                })
+            );
+        });
+    }
+
+    private updateDisplayedLanguage() {
+        const lang = this.language?.raw;
+        const $sel =
+            this.dom.querySelector<HTMLSelectElement>(".js-lang-select");
+        const $auto = $sel.querySelector(".js-auto-option");
+
+        if (this.language?.autodetected) {
+            $sel.value = "auto";
+            $auto.textContent = _t("nodes.codeblock_lang_auto", {
+                lang,
+            });
+        } else {
+            $sel.value = lang;
+            $auto.textContent = _t("nodes.codeblock_auto");
+        }
+    }
 }