@contentful/experiences-visual-editor-react 1.1.0 → 1.2.0-beta.0

package/dist/index.js

@@ -911,7 +911,7 @@ const optionalBuiltInStyles = {
     },
 };
 
-const designTokensRegistry = {};
+let designTokensRegistry = {};
 /**
  * Register design tokens styling
  * @param designTokenDefinition - {[key:string]: Record<string, string>}
@@ -2441,11 +2441,16 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
     const dataSource = useEditorStore((state) => state.dataSource);
     const entityStore = useEntityStore((state) => state.entityStore);
     const props = useMemo(() => {
+        const propsBase = node.data.props?.cfSsrClassName
+            ? {
+                cfSsrClassName: resolveDesignValue(node.data.props.cfSsrClassName.valuesByBreakpoint, 'cfSsrClassName'),
+            }
+            : {};
         // Don't enrich the assembly wrapper node with props
         if (!definition || node.type === ASSEMBLY_NODE_TYPE) {
-            return {};
+            return propsBase;
         }
-        return Object.entries(definition.variables).reduce((acc, [variableName, variableDefinition]) => {
+        const extractedProps = Object.entries(definition.variables).reduce((acc, [variableName, variableDefinition]) => {
             const variableMapping = node.data.props[variableName];
             if (!variableMapping) {
                 return {
@@ -2520,6 +2525,10 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
                 return { ...acc };
             }
         }, {});
+        return {
+            ...propsBase,
+            ...extractedProps,
+        };
     }, [
         hyperlinkPattern,
         node,
@@ -2581,7 +2590,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
     const stylesToKeep = ['cfImageAsset'];
     const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
     const componentProps = {
-        className: componentClass,
+        className: props.cfSsrClassName ?? componentClass,
         editorMode: true,
         node,
         renderDropzone,