Remove broken emoji from text (#1693)

* remove broken emoji from string

* add changeset

* add test

* update changeset

* delete old changeset

* remove console.log

.changeset/curvy-mugs-judge.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Builder]: Remove broken emoji from text

packages/core/src/parsers/builder/builder.test.ts

@@ -0,0 +1,31 @@
+import { BuilderContent } from '@builder.io/sdk';
+import { builderContentToMitosisComponent } from './builder';
+
+describe('Unpaired Surrogates', () => {
+  test('removes unpaired surrogates from Text component content', () => {
+    const builderContent: BuilderContent = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            component: {
+              name: 'Text',
+              options: {
+                text: `Hello \uD800 World. Welcome to \uDFFF section`,
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const output = builderContentToMitosisComponent(builderContent);
+    // Text should be cleaned of unpaired surrogates
+    expect(output.children[0].children[0].properties._text).toBe(
+      'Hello  World. Welcome to section',
+    );
+    // Verify unpaired surrogates are removed
+    expect(output.children[0].children[0].properties._text).not.toContain('\uD800');
+    expect(output.children[0].children[0].properties._text).not.toContain('\uDFFF');
+  });
+});

packages/core/src/parsers/builder/builder.ts

@@ -1135,7 +1135,14 @@ const builderContentPartToMitosisComponent = (
 
       try {
         if (elem.component?.name === 'Text') {
-          elem.component.options.text = elem.component.options.text.replace(voidElemRegex, '$1 />');
+          const text = elem.component.options.text;
+          elem.component.options.text = text.replace(voidElemRegex, '$1 />');
+          // Remove broken emojis
+          const hasUnpairedSurrogate =
+            /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]/g;
+          if (hasUnpairedSurrogate.test(text)) {
+            elem.component.options.text = text.replace(hasUnpairedSurrogate, '');
+          }
         }
       } catch (_error) {
         // pass