@contentful/experiences-visual-editor-react 1.0.3 → 1.0.4-beta.0

package/dist/index.js

@@ -520,6 +520,11 @@ const getOptimizedImageAsset = (file, sizes, quality = '100%', format) => {
 
 const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
     let value;
+    // If it is not a deep path and not pointing to the file of the asset,
+    // it is just pointing to a normal field and therefore we just resolve the value as normal field
+    if (!isDeepPath(path) && !lastPathNamedSegmentEq(path, 'file')) {
+        return getBoundValue(asset, path);
+    }
     //TODO: this will be better served by injectable type transformers instead of if statement
     if (variableName === 'cfImageAsset') {
         const optionsVariableName = 'cfImageOptions';
@@ -558,8 +563,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
         }
         return;
     }
-    // return getBoundValue(asset, entityStore, binding, path);
-    return getBoundValue(asset, path);
+    return asset.fields.file?.url;
 };
 
 const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableDefinition, path) => {
@@ -568,6 +572,10 @@ const transformBoundContentValue = (variables, entityStore, binding, resolveDesi
         return;
     switch (variableDefinition.type) {
         case 'Media':
+            // If we bound a normal entry field to the media veriable we just return the bound value
+            if (entityOrAsset.sys.type === 'Entry') {
+                return getBoundValue(entityOrAsset, path);
+            }
             return transformMedia(entityOrAsset, variables, resolveDesignValue, variableName, path);
         case 'RichText':
             return transformRichText(entityOrAsset, path);
@@ -1165,6 +1173,17 @@ const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
     chunks.push(currentChunk);
     return chunks.filter(excludeEmptyChunks);
 };
+const lastPathNamedSegmentEq = (path, expectedName) => {
+    // `/key123/fields/featureImage/~locale/fields/file/~locale`
+    // ['', 'key123', 'fields', 'featureImage', '~locale', 'fields', 'file', '~locale']
+    const segments = path.split('/');
+    if (segments.length < 2) {
+        console.warn(`[experiences-sdk-react] Attempting to check whether last named segment of the path (${path}) equals to '${expectedName}', but the path doesn't have enough segments.`);
+        return false;
+    }
+    const secondLast = segments[segments.length - 2]; // skipping trailing '~locale'
+    return secondLast === expectedName;
+};
 
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {