static: add code-mirror widget
This commit is contained in:
parent
92c0ad4154
commit
b849b2aef3
|
@ -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)
|
||||
|
||||
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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>
|
|
@ -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",
|
||||
|
|
|
@ -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
|
@ -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");
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
|
@ -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) => {
|
||||
|
|
|
@ -4,6 +4,7 @@ import './ActionButton';
|
|||
import './AdminSidebar';
|
||||
import './AdminSiteShell';
|
||||
import "./AdminLoginsChart";
|
||||
import './CodeMirror';
|
||||
import './Dropdown';
|
||||
import './FetchFillSlot';
|
||||
import './FlowShellCard';
|
||||
|
|
Reference in New Issue