blog.bythewood.me-wagtail

 1import CodeMirror from "codemirror/lib/codemirror.js";
 2
 3// import "codemirror/mode/python/python.js";
 4// import "codemirror/mode/javascript/javascript.js";
 5// import "codemirror/mode/htmlmixed/htmlmixed.js";
 6// import "codemirror/mode/css/css.js";
 7// import "codemirror/mode/shell/shell.js";
 8
 9import "codemirror/lib/codemirror.css";
10import "codemirror/theme/material-darker.css";
11
12const initCodeMirror = (codeBlocks) => {
13  for (let i = 0; i < codeBlocks.length; i++) {
14    const codeBlock = codeBlocks[i];
15    if (codeBlock.innerHTML === "Code") {
16      let parentDiv = codeBlock.parentElement;
17      while (parentDiv.className !== "c-sf-block") {
18        parentDiv = parentDiv.parentElement;
19      }
20
21      const textarea = parentDiv.querySelector("textarea");
22      if (!textarea.dataset.cmInitialized) {
23        setTimeout(() => {
24          CodeMirror.fromTextArea(textarea, {
25            theme: "material-darker",
26            lineNumbers: true,
27            viewportMargin: Infinity,
28            // mode: "javascript",
29          });
30        }, 100);
31        textarea.dataset.cmInitialized = "true";
32      }
33    }
34  }
35};
36
37document.addEventListener("DOMContentLoaded", () => {
38  const codeBlocks = document.querySelectorAll(".c-sf-block__type");
39  initCodeMirror(codeBlocks);
40
41  var observer = new MutationObserver(function (mutations) {
42    mutations.forEach(function (mutation) {
43      const codeBlocks = mutation.target.querySelectorAll(".c-sf-block__type");
44      initCodeMirror(codeBlocks);
45    });
46  });
47
48  observer.observe(
49    document.querySelector("[data-contentpath='body']"),
50    { childList: true, subtree: true }
51  );
52});