fix(backend): jsx compatible with html-entities & curly braces (#243)

Author: hirokith

packages/backend/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@figma/plugin-typings": "^1.121.0",
+    "html-entities": "^2.6.0",
     "js-base64": "^3.7.8",
     "nanoid": "^5.1.6",
     "react": "19.0.0",

packages/backend/src/common/parseJSX.ts

@@ -1,3 +1,4 @@
+import { encode } from "html-entities";
 import { numberToFixedString } from "./numToAutoFixed";
 
 export const formatWithJSX = (
@@ -40,3 +41,10 @@ export const formatMultipleJSX = (
     .filter(([key, value]) => value)
     .map(([key, value]) => formatWithJSX(key, isJsx, value!))
     .join(isJsx ? ", " : "; ");
+
+export const escapeJSXText = (text: string): string => {
+  return encode(text, { level: "html5" })
+    // process JSX curly braces
+    .replace(/\{/g, "{")
+    .replace(/\}/g, "}");
+};

packages/backend/src/html/htmlDefaultBuilder.ts

@@ -62,6 +62,11 @@ export class HtmlDefaultBuilder {
     return this.settings.htmlGenerationMode === "svelte";
   }
 
+  get needsJSXTextEscaping() {
+    const mode = this.settings.htmlGenerationMode;
+    return mode === "jsx" || mode === "styled-components" || mode === "svelte";
+  }
+
   get useStyledComponents() {
     return this.settings.htmlGenerationMode === "styled-components";
   }

packages/backend/src/html/htmlTextBuilder.ts

@@ -1,4 +1,4 @@
-import { formatMultipleJSX, formatWithJSX } from "../common/parseJSX";
+import { formatMultipleJSX, formatWithJSX, escapeJSXText } from "../common/parseJSX";
 import { HtmlDefaultBuilder } from "./htmlDefaultBuilder";
 import { htmlColorFromFills } from "./builderImpl/htmlColor";
 import {
@@ -70,7 +70,11 @@ export class HtmlTextBuilder extends HtmlDefaultBuilder {
         this.isJSX,
       );
 
-      const charsWithLineBreak = segment.characters.split("\n").join("<br/>");
+      let chars = segment.characters;
+      if (this.needsJSXTextEscaping) {
+        chars = escapeJSXText(chars);
+      }
+      const charsWithLineBreak = chars.split("\n").join("<br/>");
       const result: any = {
         style: styleAttributes,
         text: charsWithLineBreak,

packages/backend/src/tailwind/tailwindDefaultBuilder.ts

@@ -54,6 +54,10 @@ export class TailwindDefaultBuilder {
     return this.settings.tailwindGenerationMode === "jsx";
   }
 
+  get needsJSXTextEscaping() {
+    return this.isJSX;
+  }
+
   get isTwigComponent() {
     return this.settings.tailwindGenerationMode === "twig" && this.node.type === "INSTANCE"
   }

packages/backend/src/tailwind/tailwindTextBuilder.ts

@@ -2,6 +2,7 @@ import {
   commonLetterSpacing,
   commonLineHeight,
 } from "../common/commonTextHeightSpacing";
+import { escapeJSXText } from "../common/parseJSX";
 import { tailwindColorFromFills } from "./builderImpl/tailwindColor";
 import {
   pxToFontSize,
@@ -60,7 +61,11 @@ export class TailwindTextBuilder extends TailwindDefaultBuilder {
         .filter(Boolean)
         .join(" ");
 
-      const charsWithLineBreak = segment.characters.split("\n").join("<br/>");
+      let chars = segment.characters;
+      if (this.needsJSXTextEscaping) {
+        chars = escapeJSXText(chars);
+      }
+      const charsWithLineBreak = chars.split("\n").join("<br/>");
       return {
         style: styleClasses,
         text: charsWithLineBreak,