jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-07 18:09:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Indent-based folds for YAML editor (#21966)

Browse Source 
* Indent-based folds for YAML editor

* adding compartment

* code review
This commit is contained in:
Miguel Palhas
2024-09-25 12:15:02 +01:00
committed by GitHub
parent 4bd27e5055
commit e687ddab21
2 changed files with 62 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ha-code-editor.ts
View File

@@ -124,9 +124,12 @@ export class HaCodeEditor extends ReactiveElement {
const transactions: TransactionSpec[] = [];
if (changedProps.has("mode")) {
transactions.push({
effects: this._loadedCodeMirror!.langCompartment!.reconfigure(
this._mode
),
effects: [
this._loadedCodeMirror!.langCompartment!.reconfigure(this._mode),
this._loadedCodeMirror!.foldingCompartment.reconfigure(
this._getFoldingExtensions()
),
],
});
}
if (changedProps.has("readOnly")) {
@@ -194,6 +197,9 @@ export class HaCodeEditor extends ReactiveElement {
this.linewrap ? this._loadedCodeMirror.EditorView.lineWrapping : []
),
this._loadedCodeMirror.EditorView.updateListener.of(this._onUpdate),
this._loadedCodeMirror.foldingCompartment.of(
this._getFoldingExtensions()
),
];
if (!this.readOnly) {
@@ -311,6 +317,17 @@ export class HaCodeEditor extends ReactiveElement {
fireEvent(this, "value-changed", { value: this._value });
};
private _getFoldingExtensions = (): Extension => {
if (this.mode === "yaml") {
return [
this._loadedCodeMirror!.foldGutter(),
this._loadedCodeMirror!.foldingOnIndent,
];
}
return [];
};
static get styles(): CSSResultGroup {
return css`
:host(.error-state) .cm-gutters {