JSX: Allow for one level of nested curly braces inside tag attribute …

…value. Fix #1335
PrismJS · Mar 8, 2018 · 05bf67d · 05bf67d
1 parent 31a2a69
commit 05bf67d
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 2 deletions.
diff --git a/components/prism-jsx.js b/components/prism-jsx.js
@@ -3,7 +3,7 @@
 var javascript = Prism.util.clone(Prism.languages.javascript);
 
 Prism.languages.jsx = Prism.languages.extend('markup', javascript);
-Prism.languages.jsx.tag.pattern= /<\/?[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+|(?:\{\{?[^}]*\}?\})))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?>/i;
+Prism.languages.jsx.tag.pattern= /<\/?[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{[^}]+\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?>/i;
 
 Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i;
 

diff --git a/components/prism-jsx.min.js b/components/prism-jsx.min.js
diff --git a/tests/languages/jsx/issue1335.test b/tests/languages/jsx/issue1335.test
@@ -0,0 +1,124 @@
+<Button onClick={(e) => this.setState({clicked: true})} />
+<Component
+  data={[
+    {id: 0, name: 'Joe'},
+    {id: 1, name: 'Sue'},
+  ]}
+/>
+<Component title={`${name}`} />
+<Component title={`${name}'s page`} />
+
+----------------------------------------------------
+
+[
+	["tag", [
+		["tag", [
+			["punctuation", "<"],
+			"Button"
+		]],
+		["attr-name", ["onClick"]],
+		["script", [
+			["punctuation", "="],
+			["punctuation", "{"],
+			["punctuation", "("],
+			"e",
+			["punctuation", ")"],
+			["operator", "=>"],
+			["keyword", "this"],
+			["punctuation", "."],
+			["function", "setState"],
+			["punctuation", "("],
+			["punctuation", "{"],
+			"clicked",
+			["punctuation", ":"],
+			["boolean", "true"],
+			["punctuation", "}"],
+			["punctuation", ")"],
+			["punctuation", "}"]
+		]],
+		["punctuation", "/>"]
+	]],
+	["tag", [
+		["tag", [
+			["punctuation", "<"],
+			"Component"
+		]],
+		["attr-name", ["data"]],
+		["script", [
+			["punctuation", "="],
+			["punctuation", "{"],
+			["punctuation", "["],
+			["punctuation", "{"],
+			"id",
+			["punctuation", ":"],
+			["number", "0"],
+			["punctuation", ","],
+			" name",
+			["punctuation", ":"],
+			["string", "'Joe'"],
+			["punctuation", "}"],
+			["punctuation", ","],
+			["punctuation", "{"],
+			"id",
+			["punctuation", ":"],
+			["number", "1"],
+			["punctuation", ","],
+			" name",
+			["punctuation", ":"],
+			["string", "'Sue'"],
+			["punctuation", "}"],
+			["punctuation", ","],
+			["punctuation", "]"],
+			["punctuation", "}"]
+		]],
+		["punctuation", "/>"]
+	]],
+	["tag", [
+		["tag", [
+			["punctuation", "<"],
+			"Component"
+		]],
+		["attr-name", ["title"]],
+		["script", [
+			["punctuation", "="],
+			["punctuation", "{"],
+			["template-string", [
+				["string", "`"],
+				["interpolation", [
+					["interpolation-punctuation", "${"],
+					"name",
+					["interpolation-punctuation", "}"]
+				]],
+				["string", "`"]
+			]],
+			["punctuation", "}"]
+		]],
+		["punctuation", "/>"]
+	]],
+	["tag", [
+		["tag", [
+			["punctuation", "<"],
+			"Component"
+		]],
+		["attr-name", ["title"]],
+		["script", [
+			["punctuation", "="],
+			["punctuation", "{"],
+			["template-string", [
+				["string", "`"],
+				["interpolation", [
+					["interpolation-punctuation", "${"],
+					"name",
+					["interpolation-punctuation", "}"]
+				]],
+				["string", "'s page`"]
+			]],
+			["punctuation", "}"]
+		]],
+		["punctuation", "/>"]
+	]]
+]
+
+----------------------------------------------------
+
+Handles nested pairs of curly braces inside tag attribute. See #1335