@alpaca-editor/contenthub 1.0.0

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@repo/eslint-config/react-internal";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@alpaca-editor/contenthub",
+  "version": "1.0.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./styles.css"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@turbo/gen": "^2.4.4",
+    "@types/node": "^22.13.9",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "eslint": "^9.22.0",
+    "typescript": "5.8.2"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.14",
+    "postcss": "^8.5.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.14",
+    "primereact": "10.9.1"
+  }
+}

package/src/DamSelector.tsx

@@ -0,0 +1,57 @@
+import { Dialog } from 'primereact/dialog';
+import { DialogProps } from '@alpaca-editor/core';
+import { useEffect } from 'react';
+import { DamImageValue, DamSelectorProps } from './types';
+
+export function DamSelector({
+  onClose,
+  contentHubHost,
+  contentHubBrowsePage,
+  externalRedirectKey
+}: DamSelectorProps & DialogProps<DamImageValue>) {
+  
+  useEffect(() => {
+    const handleMessage = (message: MessageEvent) => {
+      console.log('Received message:', message);
+      
+      const normalizedHost = contentHubHost.replace(/\/$/, '');
+      const messageOrigin = message.origin.replace(/\/$/, '');
+      
+      if (messageOrigin !== normalizedHost) {
+        console.log('Origin mismatch:', messageOrigin, normalizedHost);
+        return;
+      }
+
+      const data = message.data as DamImageValue;
+      if (!data || !data.public_link) {
+        console.log('Invalid data received:', data);
+        return;
+      }
+
+      console.log('Processing valid data:', data);
+      onClose(data);
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [contentHubHost, onClose]);
+
+  return (
+    <Dialog
+      visible={true}
+      onHide={() => onClose(null)}
+      header="Insert from Sitecore DAM"
+      modal
+      style={{ width: '90vw', height: '90vh' }}
+      contentStyle={{ padding: 0, height: 'calc(100% - 71px)' }} // 71px accounts for header height
+      className="select-medidialog"
+      draggable={false}
+      resizable={false}
+    >
+      <iframe
+        className="w-full h-full border-none"
+        src={`${contentHubHost}${contentHubBrowsePage}?externalRedirectKey=${externalRedirectKey}&externalRedirectUrl=${window.location.href}&hasExternalRedirect=true`}
+      />
+    </Dialog>
+  );
+} 

package/src/DamSelectorButton.tsx

@@ -0,0 +1,33 @@
+import { ClientFieldButton } from "@alpaca-editor/core";
+import { DamSelector } from "./DamSelector";
+import { DamSelectorProps, DamImageValue, ContentHubExtension } from "./types";
+
+export const DamSelectorButton: ClientFieldButton = {
+  label: "Open Content Hub",
+  icon: "pi pi-external-link",
+  clientAction: async ({ dialogContext, editContext, field }) => {
+    const contentHubConfig = editContext!.configuration.extensions.contentHub as ContentHubExtension;
+    console.log("contentHubConfig", contentHubConfig);
+    
+    const data = await dialogContext.openDialog<DamImageValue, DamSelectorProps>(
+      DamSelector, {
+        contentHubHost: contentHubConfig.contentHubHost,
+        contentHubBrowsePage: contentHubConfig.contentHubBrowsePage,
+        externalRedirectKey: contentHubConfig.externalRedirectKey
+      }
+    )
+    
+    if (data != null){
+      const rawValue = `<image src="${data?.public_link}" dam-id="${data?.['dam-id']}" width="${data?.width}" height="${data?.height}" alt="${data?.alt}" dam-content-type="Image" thumbnailsrc="${data?.thumbnailsrc}" />`;
+
+      editContext!.operations.editField({
+        field: field.descriptor,
+        rawValue: rawValue,
+        refresh: "immediate",
+      });
+    }
+  },
+  isGenerator: false,
+  id: "open-contenthub-dam",
+  description: "Opens the Content Hub DAM to select an image",
+}

package/src/index.ts

@@ -0,0 +1,39 @@
+import { EditorConfiguration } from "@alpaca-editor/core";
+import { ContentHubExtension } from "./types";
+import { DamSelectorButton } from "./DamSelectorButton";
+
+/**
+ * Configures the ContentHub extension for the editor
+ * @param configuration - The editor configuration object
+ * @param contentHubHost - The base URL of the Content Hub instance (e.g., "https://your-instance.sitecoresandbox.cloud")
+ * @param browsePage - The relative path to the browse page (will be appended to contentHubHost)
+ * @returns The updated configuration object
+ */
+export function configureContentHub(
+  configuration: EditorConfiguration,
+  contentHub: ContentHubExtension,
+) {
+  configuration.extensions = {
+    ...configuration.extensions,
+    contentHub: {
+      contentHubHost: contentHub.contentHubHost,
+      contentHubBrowsePage: contentHub.contentHubBrowsePage,
+      externalRedirectKey: contentHub.externalRedirectKey
+    }
+  };  
+
+  if (!configuration.fieldTypes.image) {
+    configuration.fieldTypes.image = {
+      editor: () => null,
+      buttons: []
+    }
+  }
+  
+  if (!configuration.fieldTypes.image.buttons) {
+    configuration.fieldTypes.image.buttons = [];
+  }
+
+  configuration.fieldTypes.image.buttons.push(DamSelectorButton);    
+
+  return configuration;
+}

package/src/types.ts

@@ -0,0 +1,24 @@
+export type DamSelectorProps = {
+    contentHubHost: string;
+    contentHubBrowsePage: string;
+    externalRedirectKey: string;
+}
+
+export type DamImageValue = {
+    src: string;
+    'dam-id': string;
+    width: number;
+    height: number;
+    alt: string;
+    'dam-content-type': string;
+    thumbnailsrc: string;
+    public_link: string;
+}
+
+export type ContentHubExtension = {
+    contentHubHost: string;
+    contentHubBrowsePage: string;
+    externalRedirectKey: string;
+}
+
+

package/styles.css

@@ -0,0 +1 @@
+@source "./";

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}