Fix many style text issue

Author: owjs3901

src/Element.ts

@@ -9,8 +9,10 @@ import {
   space,
 } from './utils'
 import { extractKeyValueFromCssVar } from './utils/extract-key-value-from-css-var'
+import { textSegmentToTypography } from './utils/text-segment-to-typography'
 
 export type ComponentType =
+  | 'Fragment'
   | 'Box'
   | 'Text'
   | 'Button'
@@ -21,6 +23,21 @@ export type ComponentType =
   | 'Image'
   | 'Grid'
   | 'svg'
+const SEGMENT_TYPE = [
+  'fontName',
+  'fontWeight',
+  'fontSize',
+  'textDecoration',
+  'textCase',
+  'lineHeight',
+  'letterSpacing',
+  'fills',
+  'textStyleId',
+  'fillStyleId',
+  'listOptions',
+  'indentation',
+  'hyperlink',
+] as (keyof Omit<StyledTextSegment, 'characters' | 'start' | 'end'>)[]
 
 export class Element {
   node: SceneNode
@@ -216,6 +233,40 @@ export class Element {
     const originProps = await this.getProps()
     const mergedProps = { ...originProps, ...this.additionalProps }
     const children = this.getChildren()
+
+    if (this.node.type === 'TEXT') {
+      const segs = this.node.getStyledTextSegments(SEGMENT_TYPE)
+      if (segs.length > 1) {
+        const children = (
+          await Promise.all(
+            segs.map(async (seg) => {
+              const props = propsToComponentProps(
+                organizeProps({
+                  ...mergedProps,
+                  ...Object.fromEntries(
+                    Object.entries(
+                      await propsToPropsWithTypography(
+                        (await textSegmentToTypography(seg)) as any,
+                        seg.textStyleId,
+                      ),
+                    )
+                      .filter(([_, value]) => Boolean(value))
+                      .map(([key, value]) => [key, String(value)]),
+                  ),
+                }),
+                'Text',
+                1,
+              )
+              return `<Text ${Object.entries(props)
+                .map(([key, value]) => `${key}="${value}"`)
+                .join(' ')}>${fixChildrenText(seg.characters)}</Text>`
+            }),
+          )
+        ).join('')
+        return `<>${children}</>`
+      }
+    }
+
     const props = organizeProps(
       this.node.type === 'TEXT'
         ? await propsToPropsWithTypography(mergedProps, this.node.textStyleId)

src/__tests__/Element.test.ts

@@ -13,6 +13,7 @@ function createNode(
     parent,
     layoutPositioning = 'AUTO',
     layoutSizingHorizontal,
+    styledTextSegments = [],
     ...props
   }: {
     [_: string]: any
@@ -21,12 +22,14 @@ function createNode(
     textStyleId?: string
     children?: SceneNode[]
     layoutPositioning?: string
+    styledTextSegments?: any[]
   } = {},
 ): SceneNode {
   const ret = {
     type,
     getCSSAsync: async () => props,
     exportAsync: async () => '<svg>\n<path/>\n</svg>',
+    getStyledTextSegments: () => styledTextSegments,
     layoutSizingHorizontal,
     textStyleId,
     parent,
@@ -577,6 +580,59 @@ describe('Element', () => {
           '<Text typography="button-title">\n  a\n</Text>',
         )
       })
+      it('should render many Text', async () => {
+        const element = createElement('TEXT', {
+          characters: 'ab',
+          styledTextSegments: [
+            {
+              start: 0,
+              end: 1,
+              fontName: {
+                family: 'Roboto',
+                style: 'Italic',
+              },
+              textDecoration: 'NONE',
+              fontWeight: 400,
+              textCase: 'UPPER',
+              lineHeight: {
+                value: 20,
+                unit: 'PIXELS',
+              },
+              letterSpacing: {
+                value: 20,
+                unit: 'PIXELS',
+              },
+              characters: 'a',
+              fontSize: 16,
+            },
+            {
+              fontSize: 16,
+              characters: 'b',
+              start: 1,
+              end: 2,
+              fontName: {
+                family: 'Roboto',
+                style: 'Italic',
+              },
+              textCase: 'UPPER',
+              textDecoration: 'NONE',
+              fontWeight: 700,
+              lineHeight: {
+                value: 20,
+                unit: 'PIXELS',
+              },
+              letterSpacing: {
+                value: 20,
+                unit: 'PIXELS',
+              },
+            },
+          ],
+        })
+        expect(await element.getComponentType()).toEqual('Text')
+        expect(await element.render()).toEqual(
+          '<><Text fontFamily="Roboto" fontStyle="italic" fontWeight="400" fontSize="16px" textTransform="upper" lineHeight="20px" letterSpacing="20px">a</Text><Text fontFamily="Roboto" fontStyle="italic" fontWeight="700" fontSize="16px" textTransform="upper" lineHeight="20px" letterSpacing="20px">b</Text></>',
+        )
+      })
     })
     describe('Flex', () => {
       it('should render Flex', async () => {

src/devup/index.ts

@@ -63,7 +63,7 @@ export async function exportDevup() {
             return
           }
         }
-        const seg = text.getStyledTextSegments([
+        const segs = text.getStyledTextSegments([
           'fontName',
           'fontWeight',
           'fontSize',
@@ -77,16 +77,18 @@ export async function exportDevup() {
           'listOptions',
           'indentation',
           'hyperlink',
-        ])[0]
-        if (seg) {
-          const typo = textSegmentToTypography(seg as StyledTextSegment)
-          typography[name] ??= [null, null, null, null, null]
-          if (type === 'mobile') {
-            typography[name][0] = typo
-          } else if (type === 'tablet') {
-            typography[name][2] = typo
-          } else if (type === 'desktop') {
-            typography[name][4] = typo
+        ])
+        for (const seg of segs) {
+          if (seg) {
+            const typo = textSegmentToTypography(seg as StyledTextSegment)
+            typography[name] ??= [null, null, null, null, null]
+            if (type === 'mobile') {
+              typography[name][0] = typo
+            } else if (type === 'tablet') {
+              typography[name][2] = typo
+            } else if (type === 'desktop') {
+              typography[name][4] = typo
+            }
           }
         }
       }

src/utils.ts

@@ -93,7 +93,7 @@ export async function propsToPropsWithTypography(
   const ret: Record<string, string> = { ...props }
   delete ret['w']
   delete ret['h']
-  if (typeof textStyleId === 'string') {
+  if (typeof textStyleId === 'string' && textStyleId) {
     const style = await figma.getStyleByIdAsync(textStyleId as string)
     if (style) {
       const split = style.name.split('/')