fix: sanitize the description of the keymap (#2352)

* fix: sanitize the description of the keymap

Also fixes the immutability of the state

* fix: remove br conversion

* fix: keep new lines

Author: ert78gb

packages/uhk-web/src/app/components/editable-text/editable-text.component.html

@@ -7,7 +7,9 @@
     <span *ngIf="showText"
           class="editable">
         <span (click)="editText()"
-              [innerHtml]="displayText"></span>
+        >
+            <ng-container *ngFor="let line of displayLines">{{line}}<br></ng-container>
+        </span>
     </span>
 </div>
 

packages/uhk-web/src/app/components/editable-text/editable-text.component.ts

@@ -21,8 +21,12 @@ export class EditableTextComponent implements ControlValueAccessor {
         return !this.text || this.text.trim().length === 0;
     }
 
-    get displayText(): string {
-        return this.text && this.text.replace(/\n/g, '<br>');
+    get displayLines(): string[] {
+        if (!this.text) {
+            return [];
+        }
+
+        return this.text.split('\n');
     }
 
     constructor(private cdr: ChangeDetectorRef) {

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -893,8 +893,12 @@ export function reducer(
             const userConfiguration: UserConfiguration = Object.assign(new UserConfiguration(), state.userConfiguration);
             userConfiguration.keymaps = state.userConfiguration.keymaps.map(keymap => {
                 if (keymap.abbreviation === data.abbr) {
-                    keymap.description = data.description;
+                    const newKeymap = new Keymap(keymap);
+                    newKeymap.description = data.description;
+
+                    return newKeymap;
                 }
+
                 return keymap;
             });