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
UltimateHackingKeyboard · Oct 7, 2024 · 04b26dd · 04b26dd
1 parent c8a650b
commit 04b26dd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/uhk-web/src/app/components/editable-text/editable-text.component.html b/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>
 

diff --git a/packages/uhk-web/src/app/components/editable-text/editable-text.component.ts b/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) {

diff --git a/packages/uhk-web/src/app/store/reducers/user-configuration.ts b/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;
             });