moved logic to validate custom fonts

penpot · Apr 30, 2024 · d7cd6bb · d7cd6bb
1 parent 81d7401
commit d7cd6bb
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 17 deletions.
diff --git a/plugin-src/code.ts b/plugin-src/code.ts
@@ -3,10 +3,39 @@ import {
   handleExportMessage,
   handleResizeMessage
 } from '@plugin/messageHandlers';
+import {isGoogleFont} from "@plugin/translators/text/gfonts";
+import {isLocalFont} from "@plugin/translators/text/local";
+
+const findAllTextNodes = async () => {
+  await figma.loadAllPagesAsync();
+
+  const nodes = figma.root.findAllWithCriteria({
+    types: ['TEXT']
+  });
+
+  const fonts = new Set<string>;
+  nodes.forEach(node => {
+    const styledTextSegments = node.getStyledTextSegments(['fontName']);
+    styledTextSegments.forEach(segment => {
+      if (isGoogleFont(segment.fontName) || isLocalFont(segment.fontName)) {
+        return;
+      }
+      fonts.add(segment.fontName.family);
+    });
+  });
+
+  figma.ui.postMessage({
+    type: 'CUSTOM_FONTS',
+    data: Array.from(fonts)
+  });
+}
 
 figma.showUI(__html__, { themeColors: true, height: 200, width: 300 });
 
 figma.ui.onmessage = async msg => {
+  if (msg.type === 'ready') {
+    findAllTextNodes();
+  }
   if (msg.type === 'export') {
     await handleExportMessage();
   }

diff --git a/plugin-src/translators/text/custom/translateCustomFont.ts b/plugin-src/translators/text/custom/translateCustomFont.ts
@@ -8,10 +8,6 @@ import { FontId } from '@ui/lib/types/text/textContent';
  * @TODO: implement custom font loading for Penpot
  */
 export const translateCustomFont = (fontName: FontName, fontWeight: number): FontId | undefined => {
-  // For now display a message in the UI, so the user knows
-  // that the file is using a custom font not present in Penpot
-  figma.ui.postMessage({ type: 'FONT_NAME', data: fontName.family });
-
   return {
     fontId: slugify(fontName.family.toLowerCase()),
     fontVariantId: translateFontVariantId(fontName, fontWeight)

diff --git a/plugin-src/translators/text/gfonts/translateGoogleFont.ts b/plugin-src/translators/text/gfonts/translateGoogleFont.ts
@@ -18,6 +18,10 @@ export const translateGoogleFont = (fontName: FontName, fontWeight: number): Fon
   };
 };
 
+export const isGoogleFont = (fontName: FontName): boolean => {
+  return getGoogleFont(fontName) !== undefined;
+};
+
 const getGoogleFont = (fontName: FontName): GoogleFont | undefined => {
   return gfonts.find(font => font.family === fontName.family);
 };
diff --git a/plugin-src/translators/text/local/translateLocalFont.ts b/plugin-src/translators/text/local/translateLocalFont.ts
@@ -15,6 +15,10 @@ export const translateLocalFont = (fontName: FontName, fontWeight: number): Font
   };
 };
 
+export const isLocalFont = (fontName: FontName): boolean => {
+  return getLocalFont(fontName) !== undefined;
+};
+
 const getLocalFont = (fontName: FontName): LocalFont | undefined => {
   return localFonts.find(localFont => localFont.name === fontName.family);
 };
diff --git a/ui-src/PenpotExporter.tsx b/ui-src/PenpotExporter.tsx
@@ -6,13 +6,9 @@ import { PenpotDocument } from '@ui/lib/types/penpotDocument';
 import Logo from './logo.svg?react';
 
 export const PenpotExporter = () => {
-  const [missingFonts, setMissingFonts] = useState(new Set<string>());
+  const [missingFonts, setMissingFonts] = useState<string[]>([]);
   const [exporting, setExporting] = useState(false);
 
-  const addFontWarning = (font: string) => {
-    setMissingFonts(missingFonts => missingFonts.add(font));
-  };
-
   const onMessage = (event: MessageEvent<{ pluginMessage: { type: string; data: unknown } }>) => {
     if (event.data.pluginMessage?.type == 'FIGMAFILE') {
       const document = event.data.pluginMessage.data as PenpotDocument;
@@ -21,8 +17,8 @@ export const PenpotExporter = () => {
       file.export();
 
       setExporting(false);
-    } else if (event.data.pluginMessage?.type == 'FONT_NAME') {
-      addFontWarning(event.data.pluginMessage.data as string);
+    } else if (event.data.pluginMessage?.type == 'CUSTOM_FONTS') {
+      setMissingFonts(event.data.pluginMessage.data as string[]);
     }
   };
 
@@ -37,13 +33,13 @@ export const PenpotExporter = () => {
   };
 
   const setDimensions = () => {
-    const isMissingFonts = missingFonts.size > 0;
+    const isMissingFonts = missingFonts.length > 0;
 
     let width = 300;
     let height = 280;
 
     if (isMissingFonts) {
-      height += missingFonts.size * 20;
+      height += missingFonts.length * 20;
       width = 400;
       parent.postMessage({ pluginMessage: { type: 'resize', width: width, height: height } }, '*');
     }
@@ -52,6 +48,8 @@ export const PenpotExporter = () => {
   useEffect(() => {
     window.addEventListener('message', onMessage);
 
+    parent.postMessage({ pluginMessage: { type: 'ready' } }, '*');
+
     return () => {
       window.removeEventListener('message', onMessage);
     };
@@ -68,12 +66,12 @@ export const PenpotExporter = () => {
         <h2>Penpot Exporter</h2>
       </header>
       <section>
-        <div style={{ display: missingFonts.size > 0 ? 'inline' : 'none' }}>
+        <div style={{ display: missingFonts.length > 0 ? 'inline' : 'none' }}>
           <div id="missing-fonts">
-            {missingFonts.size} non-default font
-            {missingFonts.size > 1 ? 's' : ''}:{' '}
+            {missingFonts.length} non-default font
+            {missingFonts.length > 1 ? 's' : ''}:{' '}
           </div>
-          <small>Ensure fonts are installed in Penpot before importing.</small>
+          <small>Ensure fonts are installed in Penpot before exporting.</small>
           <div id="missing-fonts-list">
             <ul>
               {Array.from(missingFonts).map(font => (