@getdraft/plugin 1.13.0-beta.0

package/src/types.ts

@@ -0,0 +1,247 @@
+export type EventHandler<T> = (data: T) => void;
+
+export type AsyncEventHandler<P, R> = (params: P) => Promise<R>;
+
+export interface SaveParams {
+  json: TemplateJSON;
+  html: string;
+}
+
+export type OnInitParams = MessageEvent<{
+  source: string;
+  event: 'loaded' | unknown;
+}>;
+
+export enum EditorMenu {
+  Audit = 'audit',
+  Guide = 'guide',
+  Style = 'style',
+  Blocks = 'blocks',
+}
+
+export enum ViewMode {
+  Desktop = 'desktop',
+  Mobile = 'mobile',
+}
+
+export interface ReadyParams extends SaveParams {
+  lastSavedTemplate?: {
+    template: TemplateJSON;
+    date: Date;
+  };
+}
+
+export interface ErrorParams {
+  message: string;
+  code?: string;
+}
+
+export interface ExitParams extends SaveParams {}
+
+export interface NotificationParams {
+  intent: 'error' | 'info' | 'success' | 'warning';
+  errorDetails?: object;
+  message?: string;
+  title: string;
+}
+
+export interface OpenGalleryParams {
+  id: string;
+}
+
+export interface UploadImageParams {
+  file: string;
+  name: string;
+}
+
+export interface ImageParams {
+  url: string;
+  originalWidth: number;
+  originalHeight: number;
+  ratio: number;
+  fileSize: number;
+}
+
+export interface AutosaveParams {
+  json: TemplateJSON;
+}
+
+interface ToggleParams {
+  state: boolean;
+}
+
+export interface ToggleGridParams extends ToggleParams {}
+
+export interface TogglePreviewParams extends ToggleParams {
+  json: TemplateJSON;
+  html: string;
+  darkHTML: string;
+}
+
+export interface ToggleViewModeParams {
+  mode: ViewMode;
+}
+
+export interface ToggleMenuParams {
+  menu: EditorMenu | null;
+}
+
+export interface HistoryParams {
+  hasUndos: boolean;
+  hasRedos: boolean;
+  currentStep: number;
+}
+
+export type TemplateJSON = Record<string, any>;
+
+export type PersonalizationDictionary = Array<
+  | { name: string; value: string }
+  | { groupName: string; items: Array<{ name: string; value: string }> }
+>;
+
+export type ToolbarActionName =
+  | 'duplicate'
+  | 'destroy'
+  | 'edit'
+  | 'up'
+  | 'down';
+export type HotkeyContext = 'hotkey';
+export type OverlayContext = 'overlay-click' | 'overlay-double-click';
+export type ToolbarContext = 'toolbar';
+export type UnitSettingsContext = 'unit-settings';
+export type BlockType = 'system' | 'user';
+export type DndDragContext = 'canvas' | 'list' | 'palette';
+export type DndDropContext = 'dropline' | 'placeholder' | 'empty-placeholder';
+export type DndDropTarget = 'root' | 'section' | 'column' | 'element';
+
+export interface DuplicateEvent {
+  name: 'duplicate';
+  context: HotkeyContext | ToolbarContext | UnitSettingsContext;
+  unitType: string;
+}
+
+export interface DestroyEvent {
+  name: 'destroy';
+  context: HotkeyContext | ToolbarContext | UnitSettingsContext;
+  unitType: string;
+}
+
+export interface EditEvent {
+  name: 'edit';
+  context: OverlayContext | ToolbarContext;
+  unitType: string;
+}
+
+export interface HistoryEvent {
+  name: 'history';
+  type: 'undo' | 'redo';
+  context: HotkeyContext;
+}
+
+export interface PreviewEvent {
+  name: 'preview';
+  context: HotkeyContext;
+}
+
+export interface ToolbarMoveEvent {
+  name: 'up' | 'down';
+  context: ToolbarContext;
+  unitType: string;
+}
+
+export interface BlockInsertEvent {
+  name: 'block-insert';
+  context: 'double-click';
+  blockType: BlockType;
+  blockName: string;
+  blockCategory: string | number;
+  blockId: string | number;
+}
+
+export interface BlockSaveEvent {
+  name: 'block-save';
+  blockType: 'user';
+  blockName: string;
+  blockCategory: string | number;
+  blockId: string | number;
+  elements: Record<string, number> & { sum: number };
+}
+
+export interface BlockDestroyEvent {
+  name: 'block-destroy';
+}
+
+export interface DropEventDragMeta {
+  context?: DndDragContext;
+  layer?: 'element' | 'section' | 'column' | 'root';
+  type?: string | string[];
+  blockCategory?: string | number;
+  blockId?: string | number;
+  blockName?: string;
+  blockType?: BlockType;
+  alt?: boolean;
+  dropKind?: 'create' | 'move';
+}
+
+export interface DropEventDropzoneMeta {
+  context?: DndDropContext;
+  dropTarget?: DndDropTarget;
+}
+
+export interface DropEvent {
+  name: 'drop';
+  drag?: DropEventDragMeta;
+  dropzone?: DropEventDropzoneMeta;
+}
+
+export type AnalyticsParams =
+  | DuplicateEvent
+  | DestroyEvent
+  | EditEvent
+  | HistoryEvent
+  | PreviewEvent
+  | ToolbarMoveEvent
+  | BlockInsertEvent
+  | BlockSaveEvent
+  | BlockDestroyEvent
+  | DropEvent;
+
+export interface Handlers {
+  ready: EventHandler<ReadyParams>;
+  error: EventHandler<ErrorParams>;
+  save: EventHandler<SaveParams>;
+  exit: EventHandler<ExitParams>;
+  notification: EventHandler<NotificationParams>;
+  autosave: EventHandler<AutosaveParams>;
+  toggleGrid: EventHandler<ToggleGridParams>;
+  togglePreview: EventHandler<TogglePreviewParams>;
+  toggleViewMode: EventHandler<ToggleViewModeParams>;
+  toggleMenu: EventHandler<ToggleMenuParams>;
+  history: EventHandler<HistoryParams>;
+  analytics: EventHandler<AnalyticsParams>;
+  openGallery: EventHandler<(url?: string) => Promise<void>>;
+  uploadImage: AsyncEventHandler<UploadImageParams, string>;
+  loadPersonalization: AsyncEventHandler<void, PersonalizationDictionary>;
+}
+
+export type HandlerParams<H> = H extends
+  | EventHandler<infer P>
+  | AsyncEventHandler<infer P, unknown>
+  ? P
+  : never;
+
+export interface PluginConfig {
+  container: string;
+  locale?: string;
+  autosave?:
+    | boolean
+    | {
+        interval: number;
+      };
+  token: string;
+  pluginId: string;
+  apiUrl: string;
+  disableHotkeysPassing?: boolean;
+  __config?: object;
+  on: Partial<Handlers>;
+}

package/src/utils.ts

@@ -0,0 +1,43 @@
+import { ImageParams } from './types';
+
+const getImageFileSize = async (imageUrl: string) => {
+  try {
+    const response = await fetch(imageUrl, { method: 'HEAD' });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const contentLength = response.headers.get('Content-Length');
+
+    if (contentLength) {
+      return parseInt(contentLength, 10);
+    } else {
+      return null;
+    }
+  } catch (error) {
+    return null;
+  }
+};
+
+export const getImageParamsFromFileUrl = (imgSrc: string) =>
+  new Promise<Omit<ImageParams, 'url'>>((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = async () => {
+      const fileSize = (await getImageFileSize(imgSrc)) ?? 0;
+
+      resolve({
+        originalWidth: img.width,
+        originalHeight: img.height,
+        ratio: img.width / img.height,
+        fileSize,
+      });
+    };
+
+    img.onerror = (error) => {
+      reject(error);
+    };
+
+    img.src = imgSrc;
+  });

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "target": "esnext",
+    "lib": ["es6", "dom", "es2015", "es2017"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "declarationDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "baseUrl": ".",
+    "resolveJsonModule": true,
+    "incremental": true,
+    "noFallthroughCasesInSwitch": true,
+    "useDefineForClassFields": true,
+    "moduleResolution": "Bundler"
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*"]
+}

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  base: './',
+  plugins: [dts({ insertTypesEntry: true })],
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'seplugin',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format}.js`,
+    },
+  },
+});