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

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
+import { EntityStore } from '@contentful/experiences-core';
+import { Experience } from '@contentful/experiences-core/types';
 
-declare const VisualEditorRoot: () => React.JSX.Element | null;
+declare const VisualEditorRoot: ({ experience }: {
+    experience?: Experience<EntityStore> | undefined;
+}) => React.JSX.Element | null;
 
 export { VisualEditorRoot as default };

package/dist/index.js

@@ -725,7 +725,7 @@ const builtInStyles = {
     },
     cfHyperlink: {
         displayName: 'Hyperlink',
-        type: 'Text',
+        type: 'Hyperlink',
         defaultValue: '',
         validations: {
             format: 'URL',
@@ -1185,6 +1185,56 @@ const lastPathNamedSegmentEq = (path, expectedName) => {
     return secondLast === expectedName;
 };
 
+const resolveHyperlinkPattern = (pattern, entry, locale) => {
+    if (!entry || !locale)
+        return null;
+    const variables = {
+        entry,
+        locale,
+    };
+    return buildTemplate({ template: pattern, context: variables });
+};
+function getValue(obj, path) {
+    return path
+        .replace(/\[/g, '.')
+        .replace(/\]/g, '')
+        .split('.')
+        .reduce((o, k) => (o || {})[k], obj);
+}
+function addLocale(str, locale) {
+    const fieldsIndicator = 'fields';
+    const fieldsIndex = str.indexOf(fieldsIndicator);
+    if (fieldsIndex !== -1) {
+        const dotIndex = str.indexOf('.', fieldsIndex + fieldsIndicator.length + 1); // +1 for '.'
+        if (dotIndex !== -1) {
+            return str.slice(0, dotIndex + 1) + locale + '.' + str.slice(dotIndex + 1);
+        }
+    }
+    return str;
+}
+function getTemplateValue(ctx, path) {
+    const pathWithLocale = addLocale(path, ctx.locale);
+    const retrievedValue = getValue(ctx, pathWithLocale);
+    return typeof retrievedValue === 'object' && retrievedValue !== null
+        ? retrievedValue[ctx.locale]
+        : retrievedValue;
+}
+function buildTemplate({ template, context, }) {
+    const localeVariable = /{\s*locale\s*}/g;
+    // e.g. "{ page.sys.id }"
+    const variables = /{\s*([\S]+?)\s*}/g;
+    return (template
+        // first replace the locale pattern
+        .replace(localeVariable, context.locale)
+        // then resolve the remaining variables
+        .replace(variables, (_, path) => {
+        const fallback = path + '_NOT_FOUND';
+        const value = getTemplateValue(context, path) ?? fallback;
+        // using _.result didn't gave proper results so we run our own version of it
+        return String(typeof value === 'function' ? value() : value);
+    }));
+}
+
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {
         return;
@@ -1794,6 +1844,7 @@ const CF_STYLE_ATTRIBUTES = [
     'cfBackgroundImageAlignmentHorizontal',
 ];
 const EMPTY_CONTAINER_HEIGHT = '80px';
+const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;
 var PostMessageMethods$1;
 (function (PostMessageMethods) {
     PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
@@ -2248,11 +2299,15 @@ const createAssemblyRegistration = ({ definitionId, definitionName, component, }
 
 const useEditorStore = create((set, get) => ({
     dataSource: {},
+    hyperLinkPattern: undefined,
     unboundValues: {},
     isDragging: false,
     dragItem: '',
     selectedNodeId: null,
     locale: null,
+    setHyperLinkPattern: (pattern) => {
+        set({ hyperLinkPattern: pattern });
+    },
     setSelectedNodeId: (id) => {
         set({ selectedNodeId: id });
     },
@@ -2364,6 +2419,8 @@ const useEntityStore = create((set) => ({
 
 const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, userIsDragging, }) => {
     const unboundValues = useEditorStore((state) => state.unboundValues);
+    const hyperlinkPattern = useEditorStore((state) => state.hyperLinkPattern);
+    const locale = useEditorStore((state) => state.locale);
     const dataSource = useEditorStore((state) => state.dataSource);
     const entityStore = useEntityStore((state) => state.entityStore);
     const props = useMemo(() => {
@@ -2393,6 +2450,14 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
                     [variableName]: designValue,
                 };
             }
+            else if (variableMapping.type === 'HyperlinkValue') {
+                const binding = dataSource[variableMapping.linkTargetKey];
+                const hyperlinkEntry = entityStore.getEntryOrAsset(binding, variableMapping.linkTargetKey);
+                return {
+                    ...acc,
+                    [variableName]: resolveHyperlinkPattern(definition.hyperlinkPattern || hyperlinkPattern || HYPERLINK_DEFAULT_PATTERN, hyperlinkEntry, locale),
+                };
+            }
             else if (variableMapping.type === 'BoundValue') {
                 const [, uuid, path] = variableMapping.path.split('/');
                 const binding = dataSource[uuid];
@@ -2431,15 +2496,14 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
             }
         }, {});
     }, [
+        hyperlinkPattern,
+        node,
+        locale,
         definition,
-        node.data.props,
-        node.children,
-        node.data.blockId,
         resolveDesignValue,
         dataSource,
         areEntitiesFetched,
         unboundValues,
-        node.type,
         entityStore,
     ]);
     const cfStyles = buildCfStyles(props, node.data.blockId);
@@ -2616,6 +2680,11 @@ const deserializeAssemblyNode = ({ node, nodeId, nodeLocation, parentId, assembl
                     path: instanceProperty.path,
                 };
             }
+            else if (instanceProperty?.type === 'HyperlinkValue') {
+                const componentInstanceValue = componentInstanceDataSource[instanceProperty.linkTargetKey];
+                dataSource[instanceProperty.linkTargetKey] == componentInstanceValue;
+                childNodeVariable[variableName] = instanceProperty;
+            }
         }
     }
     const isAssembly = assembliesRegistry.has(node.definitionId);
@@ -4513,10 +4582,16 @@ const useInitializeEditor = () => {
     return initialized;
 };
 
-const VisualEditorRoot = () => {
+const VisualEditorRoot = ({ experience }) => {
     const initialized = useInitializeEditor();
+    const setHyperLinkPattern = useEditorStore((state) => state.setHyperLinkPattern);
     const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
     const setHoveringZone = useZoneStore((state) => state.setHoveringZone);
+    useEffect(() => {
+        if (experience?.hyperlinkPattern) {
+            setHyperLinkPattern(experience.hyperlinkPattern);
+        }
+    }, [experience?.hyperlinkPattern, setHyperLinkPattern]);
     useEffect(() => {
         const onMouseMove = (e) => {
             setMousePosition(e.clientX, e.clientY);