feat(richtext-lexical): multiline string support for objects in MDX parser (#10208)

Author: AlessioGr

packages/richtext-lexical/package.json

@@ -362,7 +362,7 @@
     "bson-objectid": "2.0.4",
     "dequal": "2.0.3",
     "escape-html": "1.0.3",
-    "json5": "^2.2.3",
+    "jsox": "1.2.121",
     "lexical": "0.20.0",
     "mdast-util-from-markdown": "2.0.2",
     "mdast-util-mdx-jsx": "3.1.3",

packages/richtext-lexical/src/utilities/jsx/declare.d.ts

@@ -0,0 +1,3 @@
+declare module 'jsox' {
+  export const JSOX: any
+}

packages/richtext-lexical/src/utilities/jsx/extractPropsFromJSXPropsString.ts

@@ -1,6 +1,4 @@
-import JSON5Import from 'json5'
-
-const JSON5 = ('default' in JSON5Import ? JSON5Import.default : JSON5Import) as typeof JSON5Import
+import { JSOX } from 'jsox'
 
 /**
  * Turns a JSX props string into an object.
@@ -82,7 +80,7 @@ function handleArray(propsString: string, startIndex: number): { newIndex: numbe
     i++
   }
 
-  return { newIndex: i, value: JSON5.parse(`[${value}]`) }
+  return { newIndex: i, value: JSOX.parse(`[${value}]`) }
 }
 
 function handleQuotedString(
@@ -120,10 +118,10 @@ function handleObject(propsString: string, startIndex: number): { newIndex: numb
 
 function parseObject(objString: string): Record<string, any> {
   if (objString[0] !== '{') {
-    return JSON5.parse(objString)
+    return JSOX.parse(objString)
   }
 
-  const result = JSON5.parse(objString.replace(/(\w+):/g, '"$1":'))
+  const result = JSOX.parse(objString.replace(/(\w+):/g, '"$1":'))
 
   return result
 }

packages/richtext-lexical/src/utilities/jsx/jsx.spec.ts

@@ -118,13 +118,30 @@ describe('jsx', () => {
       },
       {
         // Test if unquoted property keys in objects within arrays are supprted. This is
-        // supported through the more lenient json5 parser, instead of using JSON.parse()
+        // supported through the more lenient JSOX parser, instead of using JSON.parse()
         input: 'key={[1, 2, { hello: "there" }]}',
         inputFromOutput: 'key={[1, 2, { "hello": "there" }]}',
         output: {
           key: [1, 2, { hello: 'there' }],
         },
       },
+      {
+        // Test if ` strings work
+        input: `key={[1, 2, { hello: \`there\` }]}`,
+        inputFromOutput: 'key={[1, 2, { "hello": "there" }]}',
+        output: {
+          key: [1, 2, { hello: 'there' }],
+        },
+      },
+      {
+        // Test if multiline ` strings work
+        input: `key={[1, 2, { hello: \`Hello
+there\` }]}`,
+        inputFromOutput: 'key={[1, 2, { "hello": "Hello\\nthere" }]}',
+        output: {
+          key: [1, 2, { hello: 'Hello\nthere' }],
+        },
+      },
     ]
 
     for (const { input, output } of INPUT_AND_OUTPUT) {