web/elements: improve codemirror mismatching value
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
f2d5d62c9c
commit
e264e10ad6
|
@ -1,5 +1,4 @@
|
||||||
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||||
import PFForm from "@patternfly/patternfly/components/Form/form.css";
|
|
||||||
|
|
||||||
import CodeMirror from "codemirror";
|
import CodeMirror from "codemirror";
|
||||||
import "codemirror/addon/display/autorefresh";
|
import "codemirror/addon/display/autorefresh";
|
||||||
|
@ -25,12 +24,12 @@ export class CodeMirrorTextarea extends LitElement {
|
||||||
|
|
||||||
editor?: CodeMirror.EditorFromTextArea;
|
editor?: CodeMirror.EditorFromTextArea;
|
||||||
|
|
||||||
private _value?: string;
|
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
set value(v: string) {
|
set value(v: string) {
|
||||||
if (v === null) return;
|
if (v === null) return;
|
||||||
this._value = v.toString();
|
if (this.editor) {
|
||||||
|
this.editor.setValue(v);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get value(): string {
|
get value(): string {
|
||||||
|
@ -56,7 +55,11 @@ export class CodeMirrorTextarea extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return [PFForm, CodeMirrorStyle, CodeMirrorTheme];
|
return [CodeMirrorStyle, CodeMirrorTheme, css`
|
||||||
|
.CodeMirror-wrap pre {
|
||||||
|
word-break: break-word !important;
|
||||||
|
}
|
||||||
|
`];
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(): void {
|
firstUpdated(): void {
|
||||||
|
@ -70,6 +73,7 @@ export class CodeMirrorTextarea extends LitElement {
|
||||||
lineNumbers: false,
|
lineNumbers: false,
|
||||||
readOnly: this.readOnly,
|
readOnly: this.readOnly,
|
||||||
autoRefresh: true,
|
autoRefresh: true,
|
||||||
|
lineWrapping: true,
|
||||||
});
|
});
|
||||||
this.editor.on("blur", () => {
|
this.editor.on("blur", () => {
|
||||||
this.editor?.save();
|
this.editor?.save();
|
||||||
|
@ -77,6 +81,6 @@ export class CodeMirrorTextarea extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
render(): TemplateResult {
|
render(): TemplateResult {
|
||||||
return html`<textarea class="pf-c-form-control" name=${ifDefined(this.name)}>${this._value || ""}</textarea>`;
|
return html`<textarea name=${ifDefined(this.name)}></textarea>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue