Penpot/penpot-exporter-figma-plugin
0
Fork 0
mirror of https://github.com/penpot/penpot-exporter-figma-plugin.git synced 2024-12-22 05:33:02 -05:00
Code Issues Activity

🐛 Fix text transform and decoration

Browse source 
This change implements support for text casing and transformation
(underline / strikethrough).

Signed-off-by: Ryan Breen <rbreen@zmags.com>
This commit is contained in:
Ryan Breen 2023-01-04 12:49:55 -05:00
parent 12c918c16f
commit 567a6711ea
2 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/code.ts
View file

@ -71,7 +71,7 @@ function traverse(node): NodeData {
}
if (node.type == "TEXT") {
const styledTextSegments = node.getStyledTextSegments(["fontName", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "fills"]);
const styledTextSegments = node.getStyledTextSegments(["fontName", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textCase", "textDecoration", "fills"]);
let font = {
fontName: styledTextSegments[0].fontName,
fontSize: styledTextSegments[0].fontSize.toString(),
@ -80,6 +80,8 @@ function traverse(node): NodeData {
lineHeight: styledTextSegments[0].lineHeight,
letterSpacing: styledTextSegments[0].letterSpacing,
fills: styledTextSegments[0].fills,
textCase: styledTextSegments[0].textCase,
textDecoration: styledTextSegments[0].textDecoration,
textAlignHorizontal: node.textAlignHorizontal,
textAlignVertical: node.textAlignVertical,
children: styledTextSegments

34
src/ui.tsx
View file

@ -166,7 +166,33 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
return style.toLowerCase().replace(/\s/g, "")
}
getTextDecoration(node){
const textDecoration = node.textDecoration;
if (textDecoration === "STRIKETHROUGH"){
return "line-through";
}
if (textDecoration === "UNDERLINE"){
return "underline";
}
return "none";
}
getTextTransform(node){
const textCase = node.textCase;
if (textCase === "UPPER"){
return "uppercase";
}
if (textCase === "LOWER"){
return "lowercase";
}
if (textCase === "TITLE"){
return "capitalize";
}
return "none";
}
createPenpotText(file, node, baseX, baseY){
const children = node.children.map((val) => {
return {
lineHeight: val.lineHeight,
@ -176,8 +202,8 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
fontSize: val.fontSize.toString(),
fontWeight: val.fontWeight.toString(),
fontVariantId: this.translateFontStyle(val.fontName.style),
textDecoration: "none",
textTransform: "none",
textDecoration: this.getTextDecoration(val),
textTransform: this.getTextTransform(val),
letterSpacing: val.letterSpacing,
fills: this.translateFills(val.fills, node.width, node.height),
fontFamily: val.fontName.family,
@ -201,13 +227,13 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
lineHeight: node.lineHeight,
fontStyle: "normal",
children: children,
textTransform: "none",
textTransform: this.getTextTransform(node),
textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
fontId: "gfont-" + slugify(node.fontName.family.toLowerCase()),
fontSize: node.fontSize.toString(),
fontWeight: node.fontWeight.toString(),
type: "paragraph",
textDecoration: "none",
textDecoration: this.getTextDecoration(node),
letterSpacing: node.letterSpacing,
fills: this.translateFills(node.fills, node.width, node.height),
fontFamily: node.fontName.family