{
91 | return new Promise((resolve) => {
92 | setTimeout(resolve, n);
93 | });
94 | }
95 |
96 | async function doInsert(data: F.DumpedFigma) {
97 | await tick(200);
98 | console.log("plugin inserting: ", data);
99 | // TODO: this is broken, not clear why...
100 | const prom = insert(data);
101 | await tick(200);
102 | console.log("promise to insert is ", prom);
103 | await prom;
104 | // insert(data);
105 | console.log("plugin done inserting.");
106 | postMessage({ type: "didInsert" });
107 | }
108 |
109 | async function logDefaults() {
110 | const defaults = await genDefaults();
111 | console.log("defaults: ", defaults);
112 | }
113 |
114 | async function updateUIWithSelection() {
115 | try {
116 | // Dump document selection to JSON
117 | const opt = { images: true, styles: true };
118 | console.log("dumping...", opt);
119 | const data = await dump(figma.currentPage.selection, opt);
120 | postMessage({ type: "update", data });
121 | } catch (e) {
122 | console.error("error during plugin: ", e);
123 | } finally {
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/plugin/pluginMessage.ts:
--------------------------------------------------------------------------------
1 | import * as F from "../src/figma-json";
2 |
3 | /// Messages UI code sends to Plugin
4 |
5 | export interface ReadyMessage {
6 | type: "ready";
7 | }
8 |
9 | export interface InsertMessage {
10 | type: "insert";
11 | data: F.DumpedFigma;
12 | }
13 |
14 | export interface InsertTestCasesMessage {
15 | type: "insertTestCases";
16 | data: F.DumpedFigma[];
17 | }
18 |
19 | export interface LogDefaultsMessage {
20 | type: "logDefaults";
21 | }
22 |
23 | export type UIToPluginMessage =
24 | | ReadyMessage
25 | | InsertMessage
26 | | InsertTestCasesMessage
27 | | LogDefaultsMessage;
28 |
29 | /// Messages Plugin code sends to UI
30 |
31 | export interface UpdateDumpMessage {
32 | type: "update";
33 | data: F.DumpedFigma;
34 | }
35 |
36 | export interface UpdateInsertTextMessage {
37 | type: "updateInsertText";
38 | recentInsertText: string;
39 | }
40 |
41 | export interface DidInsertMessage {
42 | type: "didInsert";
43 | }
44 |
45 | export type PluginToUIMessage =
46 | | UpdateDumpMessage
47 | | DidInsertMessage
48 | | UpdateInsertTextMessage;
49 |
--------------------------------------------------------------------------------
/plugin/toolbar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | const doNothing = (e: React.MouseEvent) => {
4 | console.log("No event hooked up!");
5 | };
6 |
7 | export const InsertButton = ({
8 | onInsert,
9 | }: {
10 | onInsert: (e: React.MouseEvent) => void;
11 | }) => (
12 |
24 | );
25 |
26 | const Toolbar: React.FunctionComponent = ({ children }) => (
27 |
34 | {children}
35 |
36 | );
37 |
38 | export default Toolbar;
39 |
--------------------------------------------------------------------------------
/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 |