web/elements: improve codemirror mismatching value

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-31 22:18:40 +02:00
parent f2d5d62c9c
commit e264e10ad6

View file

@ -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>`;
} }
} }