@getdraft/plugin 1.13.0 → 1.15.0

package/src/plugin.ts

@@ -1,5 +1,6 @@
 import { LOCAL_ENDPOINT, PROD_ENDPOINT } from './routes';
 import {
+  DraftError,
   EditorMenu,
   ExitParams,
   OnInitParams,
@@ -11,6 +12,8 @@ import {
   UploadImageParams,
   ViewMode,
   HandlerParams,
+  MessageData,
+  ExportAsFileParams,
 } from './types';
 import {
   getImageParamsFromFileUrl,
@@ -28,12 +31,8 @@ const getDeployLink = () => {
     return LOCAL_ENDPOINT;
   }
 
-  if (
-    value === 'stage' ||
-    value?.includes('https://') ||
-    window.location.pathname.includes('netlify')
-  ) {
-    return value?.includes('https://') ? value : `${PROD_ENDPOINT}/stage`;
+  if (value?.startsWith('https://')) {
+    return value;
   }
 
   const [major, mid] = pkg.version.split('.');
@@ -55,17 +54,19 @@ const verifyConfig = ({ token, pluginId, apiUrl }: PluginConfig) => {
   }
 };
 
-const createIframe = () => {
+const createIframe = (parentOrigin: string) => {
   const iframe = document.createElement('iframe');
-  iframe.src = getDeployLink();
+  const url = new URL(getDeployLink());
+  url.searchParams.set('parentOrigin', parentOrigin);
+  iframe.src = url.toString();
   iframe.setAttribute(
     'style',
-    'height:100%;width:100%;min-width:960px;border:0px',
+    'height:100%;width:100%;min-width:960px;border:0px;',
   );
   iframe.setAttribute('allow', 'clipboard-read; clipboard-write');
   iframe.setAttribute(
     'sandbox',
-    'allow-scripts allow-same-origin allow-forms allow-popups',
+    'allow-scripts allow-same-origin allow-forms allow-popups allow-downloads',
   );
 
   return iframe;
@@ -74,6 +75,7 @@ const createIframe = () => {
 export class PluginInstance {
   public iframe: HTMLIFrameElement | null = null;
   private hotkeysAttached = false;
+  private iframeOrigin: string | null = null;
   constructor(public config: PluginConfig) {}
 
   private captureHotkeysEnabled() {
@@ -116,35 +118,69 @@ export class PluginInstance {
     });
   };
 
+  private static HEARTBEAT_TIMEOUT = 4000;
+
   private promisedIframeMethod<T>(eventName: string) {
     let timer: ReturnType<typeof setTimeout> | null = null;
+    let listener: ((e: MessageEvent<MessageData>) => void) | null = null;
+
+    const cleanup = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+
+      if (listener) {
+        window.removeEventListener('message', listener, true);
+        listener = null;
+      }
+    };
 
     const res = new Promise<T>((resolve, reject) => {
-      const onEvent = (
-        e: MessageEvent<{ source: string; event: keyof PluginConfig['on'] }>,
-      ) => {
-        const {
-          data: { source, event, ...data },
-        } = e;
-        if (source === 'DraftPlugin' && event === eventName) {
+      const resetTimer = () => {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+          cleanup();
+          reject(
+            new DraftError('timeout_error', `Action "${eventName}" timed out`),
+          );
+        }, PluginInstance.HEARTBEAT_TIMEOUT);
+      };
+
+      listener = (e: MessageEvent<MessageData>) => {
+        if (e.source !== this.iframe?.contentWindow) return;
+
+        const { data } = e;
+        if (data.source !== 'DraftPlugin') return;
+
+        if (data.event === 'actionPing' && data.action === eventName) {
           e.stopPropagation();
+          resetTimer();
 
-          if (timer) {
-            clearTimeout(timer);
-            timer = null;
+          return;
+        }
+
+        if (data.event === eventName) {
+          e.stopPropagation();
+          cleanup();
+
+          const { source: _1, event: _2, ok, code, message, ...rest } = data;
+
+          if (ok === false) {
+            reject(
+              new DraftError(
+                code || 'unknown_error',
+                message || 'Unknown error',
+              ),
+            );
+          } else {
+            resolve(rest as T);
           }
-          resolve(data as T);
-          window.removeEventListener('message', onEvent, true);
         }
       };
 
-      window.addEventListener('message', onEvent, true);
-
-      timer = setTimeout(() => {
-        window.removeEventListener('message', onEvent, true);
-        reject('Request timed out');
-        timer = null;
-      }, 2000);
+      window.addEventListener('message', listener, true);
+      resetTimer();
     });
 
     this.postEvent(eventName);
@@ -153,15 +189,17 @@ export class PluginInstance {
   }
 
   private postEvent(event: string, data: object = {}) {
-    if (this.iframe && this.iframe.contentWindow) {
+    if (this.iframe && this.iframe.contentWindow && this.iframeOrigin) {
       this.iframe.contentWindow.postMessage(
         {
           ...data,
           event,
           source: 'DraftPlugin',
         },
-        '*',
+        this.iframeOrigin,
       );
+    } else if (!this.iframeOrigin) {
+      throw new Error('Iframe origin is not initialized');
     }
   }
 
@@ -232,6 +270,10 @@ export class PluginInstance {
   private onMessage = (
     ev: MessageEvent<{ source: string; event: keyof Handlers }>,
   ) => {
+    if (ev.source !== this.iframe?.contentWindow) {
+      return;
+    }
+
     const {
       data: { source, event, ...data },
     } = ev;
@@ -258,7 +300,7 @@ export class PluginInstance {
     uid,
   }: {
     template: string | TemplateJSON;
-    uid: string;
+    uid: string | number;
     templateName?: string;
   }) {
     const containerEl = document.querySelector(this.config.container);
@@ -266,8 +308,15 @@ export class PluginInstance {
     if (!containerEl) {
       throw new Error('Specified container not found');
     } else {
-      const onInit = ({ data: { source, event } }: OnInitParams) => {
+      const onInit = (msg: OnInitParams) => {
+        const {
+          data: { source, event },
+        } = msg;
         if (source === 'DraftPlugin' && event === 'loaded') {
+          if (msg.source !== this.iframe?.contentWindow) return;
+
+          this.iframeOrigin = msg.origin;
+
           const {
             on,
             container,
@@ -276,6 +325,7 @@ export class PluginInstance {
             token,
             apiUrl,
             pluginId,
+            authData,
             __config,
           } = this.config;
 
@@ -289,6 +339,7 @@ export class PluginInstance {
               autosave,
               token,
               pluginId,
+              authData,
               apiUrl,
               __config,
               enabledListeners: Object.keys(on),
@@ -302,7 +353,7 @@ export class PluginInstance {
         }
       };
 
-      this.iframe = createIframe();
+      this.iframe = createIframe(window.location.origin);
       window.addEventListener('message', onInit);
       containerEl.appendChild(this.iframe);
 
@@ -369,4 +420,8 @@ export class PluginInstance {
   exportContent() {
     return this.promisedIframeMethod<SaveParams>('exportContent');
   }
+
+  exportAsFile() {
+    return this.promisedIframeMethod<ExportAsFileParams>('exportAsFile');
+  }
 }

package/src/types.ts

@@ -2,6 +2,30 @@ export type EventHandler<T> = (data: T) => void;
 
 export type AsyncEventHandler<P, R> = (params: P) => Promise<R>;
 
+export class DraftError extends Error {
+  public readonly code: string;
+
+  constructor(code: string, message: string) {
+    super(message);
+    this.name = 'DraftError';
+    this.code = code;
+  }
+}
+
+export type MessageData = {
+  source: string;
+  event: string;
+  ok?: boolean;
+  code?: string;
+  message?: string;
+  action?: string;
+};
+
+export interface ExportAsFileParams {
+  blob: Blob;
+  fileName: string;
+}
+
 export interface SaveParams {
   json: TemplateJSON;
   html: string;
@@ -34,6 +58,7 @@ export interface ReadyParams extends SaveParams {
 export interface ErrorParams {
   message: string;
   code?: string;
+  details?: unknown;
 }
 
 export interface ExitParams extends SaveParams {}
@@ -239,6 +264,10 @@ export interface PluginConfig {
         interval: number;
       };
   token: string;
+  authData?: {
+    orgId: number;
+    projectId?: number;
+  };
   pluginId: string;
   apiUrl: string;
   disableHotkeysPassing?: boolean;

package/vite.config.ts

@@ -9,8 +9,8 @@ export default defineConfig({
     sourcemap: true,
     lib: {
       entry: path.resolve(__dirname, 'src/index.ts'),
-      name: 'seplugin',
-      formats: ['es', 'cjs'],
+      name: 'DraftPlugin',
+      formats: ['es', 'cjs', 'iife'],
       fileName: (format) => `index.${format}.js`,
     },
   },

package/.turbo/turbo-build.log

@@ -1,22 +0,0 @@
-
-> @letty-email/plugin@1.12.1 build /Users/nipanasovich/Documents/Work/draft/packages/plugin
-> vite build
-
-The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
-vite v5.4.20 building for production...
-transforming...
-✓ 6 modules transformed.
-rendering chunks...
-
-[vite:dts] Start generate declaration files...
-computing gzip size...
-dist/index.es.js  7.69 kB │ gzip: 2.73 kB │ map: 21.92 kB
-
-[vite:dts] The resolved path of type entry is not ending with '.d.ts'.
-
-[vite:dts] Outside emitted: /Users/nipanasovich/Documents/Work/draft/packages/plugin/src.d.ts
-[vite:dts] Declaration files built in 8574ms.
-
-Entry module "src/index.ts" is using named and default exports together. Consumers of your bundle will have to use `seplugin.default` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
-dist/index.cjs.js  5.69 kB │ gzip: 2.41 kB │ map: 21.10 kB
-✓ built in 9.44s

package/.turbo/turbo-eslint.log

@@ -1,4 +0,0 @@
-
-> @getdraft/plugin@1.13.0-beta.0 eslint /Users/nipanasovich/Documents/Work/draft/packages/plugin
-> npx eslint src "--quiet" "--fix"
-