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
1 changed files with 11 additions and 7 deletions

View File

@ -1,5 +1,4 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import CodeMirror from "codemirror";
import "codemirror/addon/display/autorefresh";
@ -25,12 +24,12 @@ export class CodeMirrorTextarea extends LitElement {
editor?: CodeMirror.EditorFromTextArea;
private _value?: string;
@property()
set value(v: string) {
if (v === null) return;
this._value = v.toString();
if (this.editor) {
this.editor.setValue(v);
}
}
get value(): string {
@ -56,7 +55,11 @@ export class CodeMirrorTextarea extends LitElement {
}
static get styles(): CSSResult[] {
return [PFForm, CodeMirrorStyle, CodeMirrorTheme];
return [CodeMirrorStyle, CodeMirrorTheme, css`
.CodeMirror-wrap pre {
word-break: break-word !important;
}
`];
}
firstUpdated(): void {
@ -70,6 +73,7 @@ export class CodeMirrorTextarea extends LitElement {
lineNumbers: false,
readOnly: this.readOnly,
autoRefresh: true,
lineWrapping: true,
});
this.editor.on("blur", () => {
this.editor?.save();
@ -77,6 +81,6 @@ export class CodeMirrorTextarea extends LitElement {
}
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>`;
}
}