static: add code-mirror widget

This commit is contained in:
Jens Langhammer 2020-11-21 18:32:34 +01:00
parent 92c0ad4154
commit b849b2aef3
11 changed files with 98 additions and 44 deletions

View File

@ -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)

View File

@ -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 %}

View File

@ -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>

View File

@ -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",

View File

@ -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",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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");

View File

@ -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();
});
}
}

View File

@ -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) => {

View File

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