((resolve, reject) => {
17 | if (font.family === notInstalledFontFamily) {
18 | reject("Font not found");
19 | } else {
20 | resolve();
21 | }
22 | });
23 | });
24 |
25 | figma.loadFontAsync = loadFontAsyncMock;
26 | });
27 |
28 | // TODO: Add a test to check if it ignores figma.mixed
29 | test("Finds fonts to load", async () => {
30 | const installedFont = {
31 | family: "DIN Alternate",
32 | style: "Regular",
33 | };
34 | const notInstalledFont = {
35 | family: notInstalledFontFamily,
36 | style: "Regular",
37 | };
38 |
39 | const text1 = figma.createText();
40 | text1.fontName = Inter[0].fontName;
41 | text1.characters = "Text 1";
42 |
43 | const text2 = figma.createText();
44 | text2.fontName = installedFont;
45 | text2.characters = "Text 2";
46 |
47 | const container = figma.createFrame();
48 | container.appendChild(text1);
49 | container.appendChild(text2);
50 |
51 | const text3 = figma.createText();
52 | text3.fontName = notInstalledFont;
53 | text3.characters = "Text 3";
54 |
55 | // Intentionally include a nested font
56 | const nestedContainer = figma.createFrame();
57 | nestedContainer.appendChild(text3);
58 | container.appendChild(nestedContainer);
59 |
60 | const d = await dump([container]);
61 |
62 | const fonts = fontsToLoad(d);
63 | const expected: F.FontName[] = [
64 | Inter[0].fontName,
65 | installedFont,
66 | notInstalledFont,
67 | ];
68 | expect(fonts).toEqual(expected);
69 | });
70 |
71 | test("Loads fonts that user has installed", async () => {
72 | const requestedFonts: F.FontName[] = [
73 | Inter[3].fontName,
74 | {
75 | family: "Avenir",
76 | style: "Bold",
77 | },
78 | ];
79 | const { availableFonts, missingFonts } = await loadFonts(
80 | requestedFonts,
81 | fallbackFonts,
82 | );
83 |
84 | expect(availableFonts).toEqual(requestedFonts);
85 | expect(missingFonts).toEqual([]);
86 | });
87 |
88 | test("Detects missing fonts without choking", async () => {
89 | const requestedFonts: F.FontName[] = [
90 | {
91 | family: notInstalledFontFamily,
92 | style: "Regular",
93 | },
94 | ];
95 | const { availableFonts, missingFonts } = await loadFonts(
96 | requestedFonts,
97 | fallbackFonts,
98 | );
99 |
100 | expect(availableFonts).toEqual([]);
101 | expect(missingFonts).toEqual(requestedFonts);
102 | });
103 |
104 | test("Finds font replacements", async () => {
105 | const notInstalledFontBold = {
106 | family: notInstalledFontFamily,
107 | style: "Bold",
108 | };
109 | const notInstalledFontSemiBold = {
110 | family: notInstalledFontFamily,
111 | style: "Semi Bold",
112 | };
113 | const notInstalledFontCustomStyle = {
114 | family: notInstalledFontFamily,
115 | style: "Custom Style",
116 | };
117 |
118 | const requestedFonts: F.FontName[] = [
119 | notInstalledFontBold,
120 | notInstalledFontSemiBold,
121 | notInstalledFontCustomStyle,
122 | ];
123 | const { fontReplacements } = await loadFonts(requestedFonts, fallbackFonts);
124 |
125 | expect(fontReplacements).toEqual({
126 | [encodeFont(notInstalledFontBold)]: encodeFont({
127 | family: "Inter",
128 | style: "Bold",
129 | }),
130 | [encodeFont(notInstalledFontSemiBold)]: encodeFont({
131 | family: "Inter",
132 | style: "Semi Bold",
133 | }),
134 | // Default to Inter Regular
135 | [encodeFont(notInstalledFontCustomStyle)]: encodeFont({
136 | family: "Inter",
137 | style: "Regular",
138 | }),
139 | });
140 | });
141 |
142 | test("Applies font", async () => {
143 | const text1 = figma.createText();
144 | text1.characters = "Text 1";
145 |
146 | const text2 = figma.createText();
147 | text2.characters = "Text 2";
148 |
149 | const text3 = figma.createText();
150 | text3.characters = "Text 3";
151 | const originalFontText3 = text3.fontName;
152 |
153 | // Fonts to apply
154 | const installedFont = {
155 | family: "Georgia",
156 | style: "Bold",
157 | };
158 | const notInstalledFont = {
159 | family: notInstalledFontFamily,
160 | style: "Light",
161 | };
162 | const mixedFont: F.Mixed = "__Symbol(figma.mixed)__";
163 |
164 | const { fontReplacements } = await loadFonts(
165 | [installedFont, notInstalledFont],
166 | fallbackFonts,
167 | );
168 |
169 | applyFontName(text1, installedFont, fontReplacements);
170 | applyFontName(text2, notInstalledFont, fontReplacements);
171 | applyFontName(text3, mixedFont, fontReplacements);
172 |
173 | expect(text1.fontName).toEqual(installedFont);
174 | // Not installed font should be replaced with fallback
175 | expect(text2.fontName).toEqual({
176 | family: "Inter",
177 | style: "Light",
178 | });
179 | // Skips mixed fonts
180 | expect(text3.fontName).toEqual(originalFontText3);
181 | });
182 |
--------------------------------------------------------------------------------
/plugin/ui.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { render } from "react-dom";
3 | import Toolbar, { InsertButton } from "./toolbar";
4 | import { PluginToUIMessage } from "./pluginMessage";
5 |
6 | interface UIState {
7 | dump?: any;
8 | showInsert: boolean;
9 | inserting: boolean;
10 | recentInsertText?: string;
11 | }
12 |
13 | console.log("Starting plugin");
14 | // declare global onmessage = store.update;
15 |
16 | class InsertUI extends React.Component<{
17 | recentInsertText?: string;
18 | doInsert: (json: string) => void;
19 | }> {
20 | doInsert = () => {
21 | if (this.textArea !== null) {
22 | const text = this.textArea.value;
23 | if (text !== null) {
24 | const { doInsert } = this.props;
25 | console.log("about to insert", text);
26 | doInsert(text);
27 | }
28 | }
29 | };
30 |
31 | textArea: HTMLTextAreaElement | null = null;
32 |
33 | render() {
34 | const { recentInsertText } = this.props;
35 | return (
36 |
44 |
45 |
48 |
49 |