This repository has been archived on 2024-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
authentik/web/src/elements/CodeMirror.ts

125 lines
3.8 KiB
TypeScript
Raw Normal View History

2020-11-21 17:32:34 +00:00
import CodeMirror from "codemirror";
import "codemirror/addon/dialog/dialog";
2020-11-21 17:32:34 +00:00
import "codemirror/addon/display/autorefresh";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/search/search";
import "codemirror/addon/search/searchcursor";
import "codemirror/mode/htmlmixed/htmlmixed.js";
2021-02-03 20:58:30 +00:00
import "codemirror/mode/javascript/javascript.js";
2020-11-21 17:32:34 +00:00
import "codemirror/mode/python/python.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/yaml/yaml.js";
import YAML from "yaml";
import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import CodeMirrorDialogStyle from "codemirror/addon/dialog/dialog.css";
import CodeMirrorShowHintStyle from "codemirror/addon/hint/show-hint.css";
import CodeMirrorStyle from "codemirror/lib/codemirror.css";
import CodeMirrorTheme from "codemirror/theme/monokai.css";
2020-11-21 17:32:34 +00:00
2020-12-05 21:08:42 +00:00
@customElement("ak-codemirror")
2020-11-21 17:32:34 +00:00
export class CodeMirrorTextarea extends LitElement {
@property({ type: Boolean })
2020-12-01 08:15:41 +00:00
readOnly = false;
2020-11-21 17:32:34 +00:00
@property()
2020-12-01 08:15:41 +00:00
mode = "yaml";
2020-11-21 17:32:34 +00:00
@property()
name?: string;
editor?: CodeMirror.EditorFromTextArea;
_value?: string;
@property()
// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
set value(v: any) {
if (v === null || v === undefined) return;
// Value might be an object if within an iron-form, as that calls the getter of value
// in the beginning and the calls this setter on reset
let textValue = v;
if (!(typeof v === "string" || v instanceof String)) {
switch (this.mode.toLowerCase()) {
case "yaml":
textValue = YAML.stringify(v);
break;
case "javascript":
textValue = JSON.stringify(v);
break;
default:
textValue = v.toString();
break;
}
}
if (this.editor) {
this.editor.setValue(textValue);
} else {
this._value = textValue;
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
get value(): any {
try {
switch (this.mode.toLowerCase()) {
case "yaml":
return YAML.parse(this.getInnerValue());
case "javascript":
return JSON.parse(this.getInnerValue());
default:
return this.getInnerValue();
}
} catch (e) {
return this.getInnerValue();
}
}
private getInnerValue(): string {
if (!this.editor) {
return "";
}
return this.editor.getValue();
}
2020-11-21 17:32:34 +00:00
static get styles(): CSSResult[] {
return [
CodeMirrorStyle,
CodeMirrorTheme,
CodeMirrorDialogStyle,
CodeMirrorShowHintStyle,
css`
.CodeMirror-wrap pre {
word-break: break-word !important;
}
`,
];
2020-11-21 17:32:34 +00:00
}
firstUpdated(): void {
const textarea = this.shadowRoot?.querySelector("textarea");
2020-11-21 17:32:34 +00:00
if (!textarea) {
return;
}
this.editor = CodeMirror.fromTextArea(textarea, {
mode: this.mode,
2020-11-21 19:48:49 +00:00
theme: "monokai",
lineNumbers: true,
2020-11-21 17:32:34 +00:00
readOnly: this.readOnly,
autoRefresh: true,
lineWrapping: true,
value: this._value,
2020-11-21 17:32:34 +00:00
});
this.editor.on("blur", () => {
2020-11-21 17:32:34 +00:00
this.editor?.save();
});
}
render(): TemplateResult {
return html`<textarea name=${ifDefined(this.name)}>${ifDefined(this._value)}</textarea>`;
}
2020-11-21 17:32:34 +00:00
}