From 7e30a9fd5c06edb7edffa5a4dfaeb37180c17c69 Mon Sep 17 00:00:00 2001
From: Marc Durdin <marc@durdin.net>
Date: Fri, 24 Jan 2025 10:46:32 +0700
Subject: [PATCH] fix(developer): escape font facename in touch layout editor

Fixes: #13017
---
 developer/src/tike/xml/layoutbuilder/builder.js     | 13 ++++++++++---
 developer/src/tike/xml/layoutbuilder/prepare-key.js |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/developer/src/tike/xml/layoutbuilder/builder.js b/developer/src/tike/xml/layoutbuilder/builder.js
index 3f30b1061c7..8915308d6ff 100644
--- a/developer/src/tike/xml/layoutbuilder/builder.js
+++ b/developer/src/tike/xml/layoutbuilder/builder.js
@@ -348,6 +348,13 @@ $(function() {
     return builder.renameSpecialKey(hint);
   }
 
+  this.escapeFontName = function(fontName) {
+    if(!fontName) {
+      return "";
+    }
+    return JSON.stringify(fontName);
+  }
+
   this.prepareLayer = function () {
     var layer = KVKL[builder.lastPlatform].layer[builder.lastLayerIndex];
 
@@ -380,11 +387,11 @@ $(function() {
     }
 
     $('#kbd,#sub-key-groups')
-      .css('font-family', KVKL[builder.lastPlatform].font)
+      .css('font-family', this.escapeFontName(KVKL[builder.lastPlatform].font))
       .css('font-size', KVKL[builder.lastPlatform].fontsize || "1em");
 
     $('#inpKeyCap,#inpSubKeyCap')
-      .css('font-family', KVKL[builder.lastPlatform].font)
+      .css('font-family', this.escapeFontName(KVKL[builder.lastPlatform].font))
       .css('font-size', '18pt');
 
     $('#kbd div').remove();
@@ -421,7 +428,7 @@ $(function() {
           .css('height', (100 * this.yscale) + 'px')
           .css('margin-top', (builder.keyMargin * this.yscale) + 'px')
           .css('margin-left', p + 'px')
-          .css('font-family', key.font)
+          .css('font-family', this.escapeFontName(key.font))
           .css('font-size', key.fontsize);
 
         if(this.specialCharacters[text])
diff --git a/developer/src/tike/xml/layoutbuilder/prepare-key.js b/developer/src/tike/xml/layoutbuilder/prepare-key.js
index 2b7819f7ed3..46c5e29839c 100644
--- a/developer/src/tike/xml/layoutbuilder/prepare-key.js
+++ b/developer/src/tike/xml/layoutbuilder/prepare-key.js
@@ -140,7 +140,7 @@ $(function() {
           .data('direction', key.direction) // used only by flicks
           .data('default', key.default) // used only by longpress
           .css('width', (100 * 0.7) + 'px')
-          .css('font-family', key.font)
+          .css('font-family',builder.escapeFontName(key.font))
           .css('font-size', key.fontsize);
 
         if(builder.specialCharacters[text]) {