Merge pull request #3 from penpot/superalex-support-multi-style-texts

🎉 Support for multi style texts

README.md

@@ -89,7 +89,7 @@ As mentioned above, this plugin gets you to a starting point. Things that are cu
 - **Frames** (Boards in Penpot).
 - **Groups**.
 - **Fills** (solid colors and linear gradients).
-- **Texts** (basic support. No segments. Only fonts available on Google fonts).
+- **Texts** (basic support. Only fonts available on Google fonts).
 - **Images** (basic support)
 
 ## Limitations ##

src/code.ts

@@ -52,7 +52,7 @@ function traverse(node): NodeData {
     fills: node.fills
   }
 
-  if (node.fills){
+  if (node.fills && Array.isArray(node.fills)){
     for (const paint of node.fills) {
       if (paint.type === 'IMAGE') {
         // Get the (encoded) bytes for this image.
@@ -91,33 +91,30 @@ function traverse(node): NodeData {
   const defaultTextAlignVertical = "TOP";
 
   if (node.type == "TEXT") {
-
+    const styledTextSegments = node.getStyledTextSegments(["fontName", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "fills"]);
     let font = {
-      fontName: typeof node.fontName === 'symbol'? defaultFontName: node.fontName, //TODO This means a text with several styles
-      fontSize: typeof node.fontSize === 'symbol'? defaultFontSize: node.fontSize, //TODO This means a text with several styles
-      fontWeight: typeof node.fontWeight === 'symbol'? defaultFontWeight: node.fontWeight, //TODO This means a text with several styles
-      characters: typeof node.characters === 'symbol'? '': node.characters, //TODO This means a text with several styles
-      lineHeight: typeof node.lineHeight === 'symbol'? defaultLineHeight: node.lineHeight, //TODO This means a text with several styles
-      letterSpacing: typeof node.letterSpacing === 'symbol'? defaultLetterSpacing: node.letterSpacing, //TODO This means a text with several styles
-      textAlignHorizontal: typeof node.textAlignHorizontal === 'symbol'? defaultTextAlignHorizontal: node.textAlignHorizontal, //TODO This means a text with several styles
-      textAlignVertical: typeof node.textAlignVertical === 'symbol'? defaultTextAlignVertical: node.textAlignVertical, //TODO This means a text with several styles
+      fontName: styledTextSegments[0].fontName,
+      fontSize: styledTextSegments[0].fontSize.toString(),
+      fontWeight: styledTextSegments[0].fontWeight.toString(),
+      characters: node.characters,
+      lineHeight: styledTextSegments[0].lineHeight,
+      letterSpacing: styledTextSegments[0].letterSpacing,
+      fills: styledTextSegments[0].fills,
+      textAlignHorizontal: node.textAlignHorizontal,
+      textAlignVertical: node.textAlignVertical,
+      children: styledTextSegments
     };
-
     result = {...result, ...font};
   }
 
   return result;
 }
 
-
-
 figma.showUI(__html__, { themeColors: true, height: 200, width: 300 });
 
 let root: NodeData = traverse(figma.root) // start the traversal at the root
 figma.ui.postMessage({type: "FIGMAFILE", data: root});
 
-
-
 figma.ui.onmessage = (msg) => {
   if (msg.type === "cancel") {
     figma.closePlugin();

src/ui.tsx

@@ -167,6 +167,23 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
   }
 
   createPenpotText(file, node, baseX, baseY){
+    const children = node.children.map((val) => {
+      return {
+        lineHeight: val.lineHeight,
+        fontStyle: "normal",
+        textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
+        fontId: "gfont-" + slugify(val.fontName.family.toLowerCase()),
+        fontSize: val.fontSize.toString(),
+        fontWeight: val.fontWeight.toString(),
+        fontVariantId: this.translateFontStyle(val.fontName.style),
+        textDecoration: "none",
+        textTransform: "none",
+        letterSpacing: val.letterSpacing,
+        fills: this.translateFills(val.fills, node.width, node.height),
+        fontFamily: val.fontName.family,
+        text: val.characters }
+      });
+
     file.createText({
       name: node.name,
       x: node.x + baseX,
@@ -183,25 +200,12 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
           children: [{
             lineHeight: node.lineHeight,
             fontStyle: "normal",
-            children: [{
-              lineHeight: node.lineHeight,
-              fontStyle: "normal",
-              textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
-              fontId: "gfont-" + slugify(node.fontName.family.toLowerCase()),
-              fontSize: node.fontSize,
-              fontWeight: node.fontWeight,
-              fontVariantId: this.translateFontStyle(node.fontName.style),
-              textDecoration: "none",
-              letterSpacing: node.letterSpacing,
-              fills: this.translateFills(node.fills, node.width, node.height),
-              fontFamily: node.fontName.family,
-              text: node.characters
-            }],
+            children: children,
             textTransform: "none",
             textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
             fontId: "gfont-" + slugify(node.fontName.family.toLowerCase()),
-            fontSize: node.fontSize,
-            fontWeight: node.fontWeight,
+            fontSize: node.fontSize.toString(),
+            fontWeight: node.fontWeight.toString(),
             type: "paragraph",
             textDecoration: "none",
             letterSpacing: node.letterSpacing,