Properly escape grid color values

Color definitions with a # need to be escaped to be properly rendered when used in a background image url
eclipse-glsp · Jun 15, 2024 · 711f72f · 711f72f
1 parent 998b9d5
commit 711f72f
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/packages/client/src/views/ggraph-view.tsx b/packages/client/src/views/ggraph-view.tsx
@@ -56,7 +56,7 @@ export class GGraphView extends SGraphView {
     }
 
     protected getBackgroundImage(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string {
-        const color = getComputedStyle(document.documentElement).getPropertyValue(GridProperty.GRID_COLOR).trim();
+        const color = getComputedStyle(document.documentElement).getPropertyValue(GridProperty.GRID_COLOR).trim().replace(/#/g, '%23');
         // eslint-disable-next-line max-len
         return `url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${gridManager.grid.x} ${gridManager.grid.y}"><rect width="${gridManager.grid.x}" height="${gridManager.grid.y}" x="0" y="0" fill="none" stroke="${color}" stroke-width="1" /></svg>')`;
     }

diff --git a/packages/client/src/views/glsp-projection-view.tsx b/packages/client/src/views/glsp-projection-view.tsx
@@ -97,7 +97,7 @@ export class GLSPProjectionView extends ProjectedViewportView {
     }
 
     protected getBackgroundImage(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string {
-        const color = getComputedStyle(document.documentElement).getPropertyValue(GridProperty.GRID_COLOR).trim();
+        const color = getComputedStyle(document.documentElement).getPropertyValue(GridProperty.GRID_COLOR).trim().replace(/#/g, '%23');
         // eslint-disable-next-line max-len
         return `url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${gridManager.grid.x} ${gridManager.grid.y}"><rect width="${gridManager.grid.x}" height="${gridManager.grid.y}" x="0" y="0" fill="none" stroke="${color}" stroke-width="1" /></svg>')`;
     }