feat: Contentstack <-> ImageVault integration

types/contentstack.ts

@@ -0,0 +1,60 @@
+import { Lang } from './lang';
+
+// This type is only a partial of the data available.
+export type ContentstackPluginDefinition = {
+  type: 'field' | 'rte_plugin';
+  title: string;
+  src: string;
+};
+
+// This type is only a partial of the data available.
+// Check console when editing an entry for all the data available.
+// The data comes from Contentstack, we have no control.
+// Extend this if needed.
+export type ContentstackEmbeddedData = {
+  entryMetadata: {
+    contentTypeUid: string;
+    entryUid: string;
+    locale: Lang;
+  };
+  utilis: {
+    content_type: {
+      schema: Array<
+        | {
+            uid: string;
+            data_type: "text";
+            value: string;
+          }
+        | {
+            uid: string;
+            data_type: "json";
+            value: unknown;
+          }
+      >;
+    };
+    extensions: ContentstackPluginDefinition[];
+  };
+  requestProps: {
+    stack: {
+      api_key: string;
+    };
+    branch: string;
+  };
+};
+
+// This is our version of the required fields we need that are available in ContentstackEmbeddedData
+export type ExtractedContentstackEmbeddedData = {
+  contentType: {
+    uid: string;
+  };
+  entry: {
+    locale: Lang;
+    title: string;
+    uid: string;
+  };
+  plugin: ContentstackPluginDefinition;
+  stack: {
+    apiKey: string;
+  };
+  branch: string;
+};

types/imagevault.ts

@@ -0,0 +1,243 @@
+/**
+ * @file TypeScript typings for ImageVault
+ *
+ * The types in this file are based on the source maps of the downloaded
+ * distribution at https://clientscript.imagevault.se/Installation/ImageVaultInsertMedia
+ *
+ * They have been clean up and amended to.
+ */
+
+declare global {
+  interface Window {
+    ImageVault: {
+      InsertMediaWindow: typeof InsertMediaWindow;
+    };
+    iframeRef: HTMLElement | null;
+  }
+}
+
+export declare class InsertMediaWindow {
+  constructor(config: Config, windowOptions: string);
+  openImageVault: () => void;
+  containerWindow: Window | null;
+}
+
+export interface IInsertSuccessCallback {
+  (message: InsertSuccessMessageEvent): void;
+}
+
+/**
+ * Message returned from the Success Callback method
+ */
+export interface InsertSuccessMessageEvent extends MessageEvent {
+  /**
+   * The response from the ImageVault insert operation
+   */
+  data: string;
+  /**
+   * The response from the ImageVault insert operation
+   */
+  response: InsertResponse;
+}
+
+export type MetaData = {
+  DefinitionType?: number;
+  Description: string | null;
+  LanguageId: null;
+  MetadataDefinitionId: number;
+  Name: string;
+  Value: string;
+};
+
+export type ImageVaultAsset = {
+  id: number;
+  title: string;
+  url: string;
+  dimensions: {
+    width: number;
+    height: number;
+    aspectRatio: number;
+  };
+  meta: { alt: string | undefined; caption: string | undefined };
+};
+
+/**
+ * The response from ImageVault when inserting an asset
+ */
+export declare class InsertResponse {
+  /**
+   * The media item id of the asset
+   */
+  Id: number;
+  /**
+   * The id of the vault where the asset resides
+   */
+  VaultId: number;
+  /**
+   * The name of the asset
+   */
+  Name: string;
+  /**
+   * The conversion selected by the user. Is an array but will only contain one object
+   */
+  MediaConversions: MediaConversion[];
+  /**
+   * Date when the asset was added to ImageVault
+   */
+  DateAdded: string;
+  /**
+   * Name of the user that added the asset to ImageVault
+   */
+  AddedBy: string;
+
+  Metadata?: MetaData[] | undefined;
+}
+
+/**
+ * Defines a media asset, original or conversion
+ */
+export declare class MediaConversion {
+  /**
+   * The url to the conversion
+   */
+  Url: string;
+  /**
+   * Name of the conversion
+   */
+  Name: string;
+  /**
+   * Html representing the conversion
+   */
+  Html: string;
+  /**
+   * Content type of the conversion
+   */
+  ContentType: string;
+  /**
+   * Width, in pixels, of the conversion
+   */
+  Width: number;
+  /**
+   * Height, in pixels, of the conversion
+   */
+  Height: number;
+  /**
+   * Aspect ratio of the conversion
+   */
+  AspectRatio: number;
+  /**
+   * Width of the selected/requested format
+   */
+  FormatWidth: number;
+  /**
+   * Height of the selected/requested format
+   */
+  FormatHeight: number;
+  /**
+   * Aspect ratio of the selected/requested format
+   */
+  FormatAspectRatio: number;
+  /**
+   * Name of the media format
+   */
+  MediaFormatName: string;
+  /**
+   * Id of the selected media format
+   */
+  MediaFormatId: number;
+}
+/**
+ * Defines where an ImageVault asset is used when requesting it
+ */
+export declare class PublishDetails {
+  /**
+   * The textual description on where an asset is used
+   */
+  text: string;
+  /**
+   * The url to where the asset is used
+   */
+  url: string;
+  /**
+   * An optional id for grouping usage
+   */
+  groupId?: string;
+}
+
+/**
+ * Defines the configuration needed to invoke the insert function
+ */
+export declare class Config {
+  /**
+   * The url to the ImageVault ui that should be used
+   */
+  imageVaultUiUrl: string;
+  /**
+   * [Optional] Origin where the insert function is launched from. Is normally calculated and does not need to be supplied.
+   */
+  origin?: string;
+  /**
+   * The language that the ImageVault ui should be displayed in
+   */
+  uiLang: string;
+  /**
+   * [Optional] The language for the default content in ImageVault
+   */
+  pageLang?: string;
+  /**
+   * The publishingSource where the image should be used. Normally the url for the site.
+   */
+  publishingSource: string;
+  /**
+   * If it should be possible to select multiple assets from ImageVault. Default is false.
+   */
+  insertMultiple: boolean;
+  /**
+   * The url base that the media assets should use. Supply the url to a cdn.
+   */
+  mediaUrlBase: string;
+  /**
+   * The ids of the formats that the selection should result in.
+   */
+  formatId: string;
+  /**
+   * [Optional] The comma-separated id-list of additional metadata definitions that the selection should result in.
+   */
+  additionalMetadataIds?: string;
+  /**
+   * The publishDetails to use. If supplied, published urls are returned.
+   */
+  publishDetails?: PublishDetails;
+  /**
+   * Function that is invoked when the user insert items from ImageVault
+   */
+  success: IInsertSuccessCallback;
+  /**
+   * This function is called when the Insert window should be closed
+   */
+  close: (result: unknown) => void;
+  /**
+   * [Optional] This function is called whenever an error is encountered
+   */
+  error?: (result: unknown, errorMessage: string) => void;
+  /**
+   * [Optional] Listen on this method for debug messages
+   */
+  debug?: (result: unknown) => void;
+
+  /**
+   * [Optional] Set media url to edit existing media
+   */
+  mediaUrl?: string;
+  /**
+   * [Optional] Set media id to show specific media
+   */
+  mediaId?: number;
+
+  /**
+   * [Optional]
+   * @0 (Default) Insert with format or choose format from dropdown in ImageVault UI
+   * @1 Same as 0 (default) except that you can edit media in editor before insert
+   */
+  insertMode?: number;
+}

types/lang.ts

@@ -0,0 +1,10 @@
+export const langEnum = {
+  en: 'en',
+  sv: 'sv',
+  no: 'no',
+  fi: 'fi',
+  da: 'da',
+  de: 'de',
+} as const;
+
+export type Lang = keyof typeof langEnum;