static: add code-mirror widget

passbook/admin/fields.py

@@ -36,15 +36,15 @@ class CodeMirrorWidget(forms.Textarea):
     # CodeMirror mode to enable
     mode: str
 
+    template_name = "fields/codemirror.html"
+
     def __init__(self, *args, mode="yaml", **kwargs):
         super().__init__(*args, **kwargs)
         self.mode = mode
 
     def render(self, *args, **kwargs):
         attrs = kwargs.setdefault("attrs", {})
-        attrs.setdefault("class", "")
-        attrs["class"] += " codemirror"
-        attrs["data-cm-mode"] = self.mode
+        attrs["mode"] = self.mode
         return super().render(*args, **kwargs)
 
 

passbook/admin/templates/administration/shell.html

@@ -8,13 +8,8 @@
 
 {% block head %}
 {{ block.super }}
-<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
-<script src="{% static 'node_modules/codemirror/addon/display/autorefresh.js' %}"></script>
 <link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
 <link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
-<script src="{% static 'node_modules/codemirror/mode/xml/xml.js' %}"></script>
-<script src="{% static 'node_modules/codemirror/mode/yaml/yaml.js' %}"></script>
-<script src="{% static 'node_modules/codemirror/mode/python/python.js' %}"></script>
 {% endblock %}
 
 {% block page_content %}

passbook/admin/templates/fields/codemirror.html

@@ -0,0 +1 @@
+<pb-codemirror mode="{{ widget.attrs.mode }}"><textarea class="pf-c-form-control" name="{{ widget.name }}">{% if widget.value %}{{ widget.value }}{% endif %}</textarea></pb-codemirror>

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';