static: add code-mirror widget

passbook/static/static/package-lock.json

@@ -90,11 +90,18 @@
         "@types/node": "*"
       }
     },
+    "@types/codemirror": {
+      "version": "0.0.98",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.98.tgz",
+      "integrity": "sha512-cbty5LPayy2vNSeuUdjNA9tggG+go5vAxmnLDRWpiZI5a+RDBi9dlozy4/jW/7P/gletbBWbQREEa7A81YxstA==",
+      "requires": {
+        "@types/tern": "*"
+      }
+    },
     "@types/estree": {
       "version": "0.0.45",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz",
-      "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==",
-      "dev": true
+      "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g=="
     },
     "@types/html-minifier": {
       "version": "3.5.3",
@@ -128,6 +135,14 @@
         "@types/node": "*"
       }
     },
+    "@types/tern": {
+      "version": "0.23.3",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.3.tgz",
+      "integrity": "sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==",
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
     "@types/uglify-js": {
       "version": "3.11.0",
       "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.11.0.tgz",

passbook/static/static/package.json

@@ -6,8 +6,9 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",
-    "@types/chart.js": "^2.9.28",
     "@patternfly/patternfly": "^4.65.6",
+    "@types/chart.js": "^2.9.28",
+    "@types/codemirror": "0.0.98",
     "chart.js": "^2.9.4",
     "codemirror": "^5.58.3",
     "lit-element": "^2.4.0",

passbook/static/static/src/AdminSidebar.ts

@@ -35,7 +35,6 @@ export class AdminSideBar extends LitElement {
     }
 
     render() {
-        console.log(this.activePath);
         this.paths.forEach(path => {
             if (path.match.exec(this.activePath)) {
                 path.anchor.classList.add("pf-m-current");

passbook/static/static/src/CodeMirror.ts

@@ -0,0 +1,42 @@
+import { customElement, html, LitElement, property } from "lit-element";
+
+// @ts-ignore
+import CodeMirror from "codemirror";
+import "codemirror/addon/display/autorefresh";
+import "codemirror/mode/xml/xml.js";
+import "codemirror/mode/yaml/yaml.js";
+import "codemirror/mode/python/python.js";
+
+@customElement("pb-codemirror")
+export class CodeMirrorTextarea extends LitElement {
+
+    @property()
+    readOnly: boolean = false;
+
+    @property()
+    mode: string = "yaml";
+
+    editor?: CodeMirror.EditorFromTextArea;
+
+    createRenderRoot() {
+        return this;
+    }
+
+    firstUpdated() {
+        const textarea = this.querySelector("textarea");
+        if (!textarea) {
+            return;
+        }
+        this.editor = CodeMirror.fromTextArea(textarea, {
+            mode: this.mode,
+            theme: 'monokai',
+            lineNumbers: false,
+            readOnly: this.readOnly,
+            autoRefresh: true,
+        });
+        this.editor.on("blur", (e) => {
+            this.editor?.save();
+        });
+    }
+
+}

passbook/static/static/src/legacy.js

@@ -41,21 +41,21 @@ document.querySelectorAll(".pf-c-check__label").forEach((checkLabel) => {
 });
 
 // CodeMirror
-document.querySelectorAll(".codemirror").forEach((cm) => {
-    let cmMode = 'xml';
-    if ('data-cm-mode' in cm.attributes) {
-        cmMode = cm.attributes['data-cm-mode'].value;
-    }
-    // https://github.com/codemirror/CodeMirror/issues/5092
-    cm.removeAttribute("required");
-    CodeMirror.fromTextArea(cm, {
-        mode: cmMode,
-        theme: 'monokai',
-        lineNumbers: false,
-        readOnly: cm.readOnly,
-        autoRefresh: true,
-    });
-});
+// document.querySelectorAll(".codemirror").forEach((cm) => {
+//     let cmMode = 'xml';
+//     if ('data-cm-mode' in cm.attributes) {
+//         cmMode = cm.attributes['data-cm-mode'].value;
+//     }
+//     // https://github.com/codemirror/CodeMirror/issues/5092
+//     cm.removeAttribute("required");
+//     CodeMirror.fromTextArea(cm, {
+//         mode: cmMode,
+//         theme: 'monokai',
+//         lineNumbers: false,
+//         readOnly: cm.readOnly,
+//         autoRefresh: true,
+//     });
+// });
 
 // Automatic slug fields
 const convertToSlug = (text) => {

passbook/static/static/src/main.ts

@@ -4,6 +4,7 @@ import './ActionButton';
 import './AdminSidebar';
 import './AdminSiteShell';
 import "./AdminLoginsChart";
+import './CodeMirror';
 import './Dropdown';
 import './FetchFillSlot';
 import './FlowShellCard';