@getdraft/plugin 1.13.0-beta.0

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@getdraft/plugin",
+  "version": "1.13.0-beta.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "src",
+  "scripts": {
+    "prebuild": "rm -rf dist",
+    "build": "vite build",
+    "dev-tsc": "npx tsc --noEmit",
+    "eslint": "npx eslint src",
+    "eslint:fix": "pnpm eslint --fix",
+    "prettify": "npx prettier -w ./",
+    "prepublish": "pnpm build",
+    "watch": "NODE_ENV=development vite build --watch",
+    "start": "NODE_ENV=development npx vite"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/letty": "workspace:^",
+    "@vitejs/plugin-legacy": "5.4.1",
+    "rollup": "4.22.4",
+    "terser": "5.31.3",
+    "rollup-plugin-dts": "6.1.1",
+    "@letty/eslint-config-ts": "workspace:^",
+    "@letty/prettier": "workspace:^"
+  },
+  "license": "MIT"
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+import { PluginInstance } from './plugin';
+import { PluginConfig } from './types';
+
+const DEFAULT_CONFIG: Partial<PluginConfig> = {
+  container: '#draft-plugin-container',
+  disableHotkeysPassing: false,
+  locale: 'ru',
+  on: {},
+};
+
+class PluginWrapper {
+  create(config: PluginConfig) {
+    return new PluginInstance({
+      ...DEFAULT_CONFIG,
+      ...config,
+    });
+  }
+}
+
+const DraftPlugin = new PluginWrapper();
+
+declare global {
+  interface Window {
+    DraftPlugin: PluginWrapper;
+  }
+}
+
+window.DraftPlugin = DraftPlugin;
+
+export default DraftPlugin;
+export * from './types';

package/src/plugin.ts

@@ -0,0 +1,429 @@
+import { LOCAL_ENDPOINT, PROD_ENDPOINT } from './routes';
+import {
+  EditorMenu,
+  ExitParams,
+  OnInitParams,
+  OpenGalleryParams,
+  Handlers,
+  PluginConfig,
+  SaveParams,
+  TemplateJSON,
+  UploadImageParams,
+  ViewMode,
+  HandlerParams,
+} from './types';
+import { getImageParamsFromFileUrl } from './utils';
+import pkg from '../package.json';
+
+const getLatinKey = (key: string, code: string) => {
+  if (key.length !== 1) {
+    return key;
+  }
+
+  const capitalHetaCode = 880;
+  const isNonLatin = key.charCodeAt(0) >= capitalHetaCode;
+
+  if (isNonLatin) {
+    if (code.indexOf('Key') === 0 && code.length === 4) {
+      return code.charAt(3);
+    }
+
+    if (code.indexOf('Digit') === 0 && code.length === 6) {
+      return code.charAt(5);
+    }
+  }
+
+  return key;
+};
+
+const constructKeyCode = (event: KeyboardEvent) => {
+  let keyCode =
+    `${getLatinKey(event.key, event.code)}`.toLowerCase() || event.key;
+  const macOs = navigator.userAgent.includes('Mac OS');
+
+  if (keyCode === 'backspace' && macOs) {
+    keyCode = 'delete';
+  }
+
+  const prefix = [];
+
+  if ((macOs && event.metaKey) || (!macOs && event.ctrlKey)) {
+    prefix.push('mod');
+  }
+
+  if (event.shiftKey) {
+    prefix.push('shift');
+  }
+
+  if (prefix.length > 0) {
+    keyCode = `${prefix.join('-')}-${getLatinKey(keyCode, event.code)}`;
+  }
+
+  return keyCode;
+};
+
+const CORE_HOTKEYS = new Set([
+  'escape',
+  'mod-c',
+  'mod-d',
+  'mod-z',
+  'mod-y',
+  'mod-shift-z',
+  'mod-v',
+  'delete',
+  'mod-g',
+  'mod-p',
+  'mod-s',
+]);
+
+const getDeployLink = () => {
+  const regex = new RegExp(`(^| )seplugin-dev=([^;]+)`);
+  const match = document.cookie.match(regex);
+  const value = match?.[2].toLowerCase?.();
+
+  if (value === 'true') {
+    return LOCAL_ENDPOINT;
+  }
+
+  if (
+    value === 'stage' ||
+    value?.includes('https://') ||
+    window.location.pathname.includes('netlify')
+  ) {
+    return value?.includes('https://') ? value : `${PROD_ENDPOINT}/stage`;
+  }
+
+  const [major, mid] = pkg.version.split('.');
+
+  return `${PROD_ENDPOINT}/v${major}.${mid}`;
+};
+
+const verifyConfig = ({ token, pluginId, apiUrl }: PluginConfig) => {
+  if (!token) {
+    throw new Error('No [token] was provided');
+  }
+
+  if (!pluginId) {
+    throw new Error('No [pluginId] was provided');
+  }
+
+  if (!apiUrl) {
+    throw new Error('No [apiUrl] was provided');
+  }
+};
+
+const createIframe = () => {
+  const iframe = document.createElement('iframe');
+  iframe.src = getDeployLink();
+  iframe.setAttribute(
+    'style',
+    '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',
+  );
+
+  return iframe;
+};
+
+export class PluginInstance {
+  public iframe: HTMLIFrameElement | null = null;
+  private hotkeysAttached = false;
+  constructor(public config: PluginConfig) {}
+
+  private captureHotkeysEnabled() {
+    return this.config.disableHotkeysPassing !== true;
+  }
+
+  private onHostHotkey = (event: KeyboardEvent) => {
+    if (!this.captureHotkeysEnabled() || !this.iframe?.contentWindow) {
+      return;
+    }
+
+    const keyCode = constructKeyCode(event);
+
+    if (!CORE_HOTKEYS.has(keyCode)) {
+      return;
+    }
+
+    const target = event.target as HTMLElement | null;
+
+    if (
+      target &&
+      (target.isContentEditable ||
+        ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+
+    this.postEvent('hostHotkey', {
+      key,
+      code: event.code,
+      metaKey,
+      ctrlKey,
+      shiftKey,
+      altKey,
+      keyCode,
+    });
+  };
+
+  private promisedIframeMethod<T>(eventName: string) {
+    let timer: ReturnType<typeof setTimeout> | null = 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) {
+          e.stopPropagation();
+
+          if (timer) {
+            clearTimeout(timer);
+            timer = null;
+          }
+          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);
+    });
+
+    this.postEvent(eventName);
+
+    return res;
+  }
+
+  private postEvent(event: string, data: object = {}) {
+    if (this.iframe && this.iframe.contentWindow) {
+      this.iframe.contentWindow.postMessage(
+        {
+          ...data,
+          event,
+          source: 'DraftPlugin',
+        },
+        '*',
+      );
+    }
+  }
+
+  private onImageUpload = async ({
+    id,
+    ...data
+  }: UploadImageParams & { id: string }) => {
+    try {
+      const url = await this.config.on.uploadImage?.(data);
+      let params = {};
+
+      if (url) {
+        params = await getImageParamsFromFileUrl(url);
+      }
+
+      this.postEvent('imageUploaded', { id, img: { ...params, url } });
+    } catch (e) {
+      this.postEvent('imageUploaded', { id });
+    }
+  };
+
+  private onLoadPersonalization = async () => {
+    try {
+      if (!this.config.on.loadPersonalization) {
+        throw new Error('No personalization loader provided');
+      }
+
+      const personalizationDictionary =
+        await this.config.on.loadPersonalization();
+
+      this.postEvent('loadPersonalization', {
+        items: personalizationDictionary,
+      });
+    } catch (e) {
+      this.postEvent('loadPersonalization', {});
+    }
+  };
+
+  private onGalleryOpen = async ({ id }: { id: string }) => {
+    const applyImage = async (url?: string) => {
+      const imgParams = { url };
+
+      if (url) {
+        const params = await getImageParamsFromFileUrl(url);
+        Object.assign(imgParams, params);
+      }
+
+      this.postEvent('imageUploaded', {
+        id,
+        img: imgParams,
+      });
+    };
+
+    this.config.on.openGallery?.(applyImage);
+  };
+
+  private triggerEvent<H extends CallableFunction | undefined>(
+    handler: H,
+    params: HandlerParams<H>,
+  ) {
+    if (!handler) {
+      return;
+    }
+
+    return handler(params);
+  }
+
+  private onMessage = (
+    ev: MessageEvent<{ source: string; event: keyof Handlers }>,
+  ) => {
+    const {
+      data: { source, event, ...data },
+    } = ev;
+
+    if (source === 'DraftPlugin') {
+      if (event === 'openGallery') {
+        this.onGalleryOpen(data as OpenGalleryParams);
+      } else if (event === 'uploadImage') {
+        this.onImageUpload(data as UploadImageParams & { id: string });
+      } else if (event === 'loadPersonalization') {
+        this.onLoadPersonalization();
+      } else {
+        this.triggerEvent(
+          this.config.on[event],
+          data as HandlerParams<Handlers[typeof event]>,
+        );
+      }
+    }
+  };
+
+  start({
+    template,
+    templateName,
+    uid,
+  }: {
+    template: string | TemplateJSON;
+    uid: string;
+    templateName?: string;
+  }) {
+    const containerEl = document.querySelector(this.config.container);
+
+    if (!containerEl) {
+      throw new Error('Specified container not found');
+    } else {
+      const onInit = ({ data: { source, event } }: OnInitParams) => {
+        if (source === 'DraftPlugin' && event === 'loaded') {
+          const {
+            on,
+            container,
+            locale,
+            autosave,
+            token,
+            apiUrl,
+            pluginId,
+            __config,
+          } = this.config;
+
+          verifyConfig(this.config);
+
+          if (this.iframe && this.iframe.contentWindow) {
+            this.postEvent('init', {
+              container,
+              locale,
+              uid,
+              autosave,
+              token,
+              pluginId,
+              apiUrl,
+              __config,
+              enabledListeners: Object.keys(on),
+              template,
+              templateName,
+            });
+          }
+
+          window.addEventListener('message', this.onMessage);
+          window.removeEventListener('message', onInit);
+        }
+      };
+
+      this.iframe = createIframe();
+      window.addEventListener('message', onInit);
+      containerEl.appendChild(this.iframe);
+
+      if (this.captureHotkeysEnabled() && !this.hotkeysAttached) {
+        window.addEventListener('keydown', this.onHostHotkey);
+        this.hotkeysAttached = true;
+      }
+    }
+  }
+
+  destroy = () => {
+    this.iframe?.remove();
+    this.iframe = null;
+    window.removeEventListener('message', this.onMessage);
+
+    if (this.hotkeysAttached) {
+      window.removeEventListener('keydown', this.onHostHotkey);
+      this.hotkeysAttached = false;
+    }
+  };
+
+  changeTemplate(
+    template: string | TemplateJSON,
+    options: {
+      templateName?: string;
+      uid?: string;
+    } = {},
+  ) {
+    this.postEvent('changeTemplate', { ...options, template });
+  }
+
+  toggleGrid(state?: boolean) {
+    this.postEvent('toggleGrid', { state });
+  }
+
+  togglePreview(state?: boolean) {
+    this.postEvent('togglePreview', { state });
+  }
+
+  toggleMenu(menu: EditorMenu | null = null) {
+    this.postEvent('toggleMenu', { menu });
+  }
+
+  toggleViewMode(viewMode: ViewMode) {
+    this.postEvent('toggleViewMode', { viewMode });
+  }
+
+  undo() {
+    this.postEvent('undo');
+  }
+
+  redo() {
+    this.postEvent('redo');
+  }
+
+  save() {
+    return this.promisedIframeMethod<SaveParams>('saveAction');
+  }
+
+  exit() {
+    return this.promisedIframeMethod<ExitParams>('exitAction');
+  }
+
+  exportContent() {
+    return this.promisedIframeMethod<SaveParams>('exportContent');
+  }
+}

package/src/routes.ts

@@ -0,0 +1,2 @@
+export const LOCAL_ENDPOINT = 'http://localhost:5174';
+export const PROD_ENDPOINT = 'https://seplugin.sendsay.ru';