feat(lib): support different origin

storyblok · Sep 20, 2024 · 27a4dbe · 27a4dbe
1 parent f2b7f56
commit 27a4dbe
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 19 deletions.
diff --git a/packages/field-plugin/helpers/react/src/useFieldPlugin.ts b/packages/field-plugin/helpers/react/src/useFieldPlugin.ts
@@ -5,18 +5,16 @@ import {
 } from '@storyblok/field-plugin'
 import { useEffect, useState } from 'react'
 
-export const useFieldPlugin = <Content>({
-  validateContent,
-}: Omit<
-  CreateFieldPluginOptions<Content>,
-  'onUpdateState'
-> = {}): FieldPluginResponse<Content> => {
+export const useFieldPlugin = <Content>(
+  options: Omit<CreateFieldPluginOptions<Content>, 'onUpdateState'> = {},
+): FieldPluginResponse<Content> => {
   const [plugin, setPlugin] = useState<FieldPluginResponse<Content>>({
     type: 'loading',
   })
 
   useEffect(() => {
     createFieldPlugin<Content>({
+      ...options,
       onUpdateState: (state) => {
         if (state.type === 'error') {
           setPlugin({
@@ -31,7 +29,6 @@ export const useFieldPlugin = <Content>({
           })
         }
       },
-      validateContent,
     })
   }, [])
 

diff --git a/packages/field-plugin/helpers/vue3/src/useFieldPlugin.ts b/packages/field-plugin/helpers/vue3/src/useFieldPlugin.ts
@@ -21,17 +21,16 @@ const updateObjectWithoutChangingReference = (
   Object.assign(originalObject, newObject)
 }
 
-export const useFieldPlugin = <Content>({
-  validateContent,
-}: Omit<CreateFieldPluginOptions<Content>, 'onUpdateState'> = {}): UnwrapRef<
-  FieldPluginResponse<Content>
-> => {
+export const useFieldPlugin = <Content>(
+  options: Omit<CreateFieldPluginOptions<Content>, 'onUpdateState'> = {},
+): UnwrapRef<FieldPluginResponse<Content>> => {
   const plugin = reactive<FieldPluginResponse<Content>>({
     type: 'loading',
   })
 
   onMounted(() => {
     createFieldPlugin<Content>({
+      ...options,
       onUpdateState: (state) => {
         if (state.type === 'error') {
           Object.assign(plugin, {
@@ -88,7 +87,6 @@ export const useFieldPlugin = <Content>({
           return
         }
       },
-      validateContent,
     })
   })
 

diff --git a/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts b/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts
@@ -10,6 +10,7 @@ import { isCloneable } from '../utils/isCloneable'
 export type CreateFieldPluginOptions<Content> = {
   onUpdateState: (state: FieldPluginResponse<Content>) => void
   validateContent?: ValidateContent<Content>
+  origin?: string
 }
 
 export type CreateFieldPlugin = <Content = unknown>(
@@ -22,6 +23,7 @@ export type CreateFieldPlugin = <Content = unknown>(
 export const createFieldPlugin: CreateFieldPlugin = ({
   onUpdateState,
   validateContent,
+  origin,
 }) => {
   const isEmbedded = window.parent !== window
 
@@ -48,14 +50,16 @@ export const createFieldPlugin: CreateFieldPlugin = ({
   }
 
   const { uid, host } = params
-  const origin =
-    host === 'plugin-sandbox.storyblok.com'
-      ? 'https://plugin-sandbox.storyblok.com'
-      : 'https://app.storyblok.com'
+  const postMessageOrigin =
+    typeof origin === 'string'
+      ? origin
+      : host === 'plugin-sandbox.storyblok.com'
+        ? 'https://plugin-sandbox.storyblok.com'
+        : 'https://app.storyblok.com'
 
   const postToContainer = (message: unknown) => {
     try {
-      window.parent.postMessage(message, origin)
+      window.parent.postMessage(message, postMessageOrigin)
     } catch (err) {
       if (isCloneable(message)) {
         // eslint-disable-next-line functional/no-throw-statement
@@ -103,7 +107,7 @@ export const createFieldPlugin: CreateFieldPlugin = ({
 
   const cleanupMessageListenerSideEffects = createPluginMessageListener(
     params.uid,
-    origin,
+    postMessageOrigin,
     messageCallbacks,
   )