correctly translate font style

penpot · Apr 29, 2024 · 09f4ff5 · 09f4ff5
1 parent fff31d7
commit 09f4ff5
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/plugin-src/transformers/partials/transformTextStyle.ts b/plugin-src/transformers/partials/transformTextStyle.ts
@@ -2,6 +2,7 @@ import slugify from 'slugify';
 
 import {
   translateFontStyle,
+  translateFontVariantId,
   translateHorizontalAlign,
   translateLetterSpacing,
   translateLineHeight,
@@ -32,9 +33,9 @@ export const transformTextStyle = (
     fontFamily: segment.fontName.family,
     fontId: `gfont-${slugify(segment.fontName.family.toLowerCase())}`,
     fontSize: segment.fontSize.toString(),
-    fontStyle: segment.fontName.style,
+    fontStyle: translateFontStyle(segment.fontName.style),
     fontWeight: segment.fontWeight.toString(),
-    fontVariantId: translateFontStyle(segment.fontName.style),
+    fontVariantId: translateFontVariantId(segment.fontName.style),
     textAlign: translateHorizontalAlign(node.textAlignHorizontal),
     textDecoration: translateTextDecoration(segment),
     textTransform: translateTextTransform(segment),

diff --git a/plugin-src/translators/index.ts b/plugin-src/translators/index.ts
@@ -2,6 +2,7 @@ export * from './translateBlendMode';
 export * from './translateShadowEffects';
 export * from './translateFills';
 export * from './translateFontStyle';
+export * from './translateFontVariantId';
 export * from './translateGrowType';
 export * from './translateHorizontalAlign';
 export * from './translateLetterSpacing';

diff --git a/plugin-src/translators/translateFontStyle.ts b/plugin-src/translators/translateFontStyle.ts
@@ -1,3 +1,9 @@
-export const translateFontStyle = (style: string) => {
-  return style.toLowerCase().replace(/\s/g, '');
+import { TextFontStyle } from '@ui/lib/types/text/textContent';
+
+export const translateFontStyle = (style: string): TextFontStyle => {
+  if (style.toLowerCase().includes('italic')) {
+    return 'italic';
+  }
+
+  return 'normal';
 };
diff --git a/plugin-src/translators/translateFontVariantId.ts b/plugin-src/translators/translateFontVariantId.ts
@@ -0,0 +1,3 @@
+export const translateFontVariantId = (style: string) => {
+  return style.toLowerCase().replace(/\s/g, '');
+};
diff --git a/ui-src/lib/types/text/textContent.d.ts b/ui-src/lib/types/text/textContent.d.ts
@@ -9,6 +9,7 @@ export type TextContent = {
 
 export type TextVerticalAlign = 'top' | 'bottom' | 'center';
 export type TextHorizontalAlign = 'left' | 'right' | 'center' | 'justify';
+export type TextFontStyle = 'normal' | 'italic';
 
 type ParagraphSet = {
   type: 'paragraph-set';
@@ -32,7 +33,7 @@ type TextStyle = {
   fontFamily?: string;
   fontVariantId?: string;
   fontSize?: string;
-  fontStyle?: string;
+  fontStyle?: TextFontStyle;
   fontWeight?: string;
   textDecoration?: string;
   textTransform?: string;