@contentful/experiences-visual-editor-react 1.3.0-beta.0 → 1.3.1-dev-20240508T1336-149a569.0

package/dist/renderApp.js

@@ -50745,17 +50745,15 @@ const useSelectedInstanceCoordinates = ({ node }) => {
 };
 
 /**
- *
  * @param styles: the list of styles to apply
- * @param nodeId: [Optional] the id of node that these styles will be applied to
+ * @param nodeId: the id of node that these styles will be applied to
  * @returns className: the className that was used
  * Builds and adds a style tag in the document. Returns the className to be attached to the element.
  * In editor mode the nodeId is used as the identifier in order to avoid creating endless tags as the styles are tweeked
- * In preview/delivery mode the styles don't change oftem so we're using the md5 hash of the content of the tag
  */
-const useStyleTag = ({ styles, nodeId }) => {
+const useEditorModeClassName = ({ styles, nodeId, }) => {
     const [className, setClassName] = reactExports.useState('');
-    reactExports.useEffect(() => {
+    reactExports.useLayoutEffect(() => {
         if (Object.keys(styles).length === 0) {
             return;
         }
@@ -50763,19 +50761,14 @@ const useStyleTag = ({ styles, nodeId }) => {
         setClassName(className);
         const existingTag = document.querySelector(`[data-cf-styles="${className}"]`);
         if (existingTag) {
-            // editor mode - update existing
-            if (nodeId) {
-                existingTag.innerHTML = styleRule;
-            }
-            // preview/delivery mode - here we don't need to update the existing tag because
-            // the className is based on the md5 hash of the content so it hasn't changed
+            existingTag.innerHTML = styleRule;
             return;
         }
         const styleTag = document.createElement('style');
         styleTag.dataset['cfStyles'] = className;
         document.head.appendChild(styleTag).innerHTML = styleRule;
     }, [styles, nodeId]);
-    return { className };
+    return className;
 };
 
 const getUnboundValues = ({ key, fallback, unboundValues, }) => {
@@ -50807,11 +50800,11 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
     const dataSource = useEditorStore((state) => state.dataSource);
     const entityStore = useEntityStore((state) => state.entityStore);
     const props = reactExports.useMemo(() => {
-        const propsBase = node.data.props?.cfSsrClassName
-            ? {
-                cfSsrClassName: resolveDesignValue(node.data.props.cfSsrClassName.valuesByBreakpoint, 'cfSsrClassName'),
-            }
-            : {};
+        const propsBase = {
+            cfSsrClassName: node.data.props.cfSsrClassName
+                ? resolveDesignValue(node.data.props.cfSsrClassName.valuesByBreakpoint, 'cfSsrClassName')
+                : undefined,
+        };
         // Don't enrich the assembly wrapper node with props
         if (!definition || node.type === ASSEMBLY_NODE_TYPE) {
             return propsBase;
@@ -50910,7 +50903,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
     // Separate the component styles from the editor wrapper styles
     const { margin, height, width, maxWidth, ...componentStyles } = cfStyles;
     // Styles that will be applied to the editor wrapper (draggable) element
-    const { className: wrapperClass } = useStyleTag({
+    const wrapperClass = useEditorModeClassName({
         styles: 
         // To ensure that assembly nodes are rendered like they are rendered in
         // the assembly editor, we need to use a normal block instead of a flex box.
@@ -50928,7 +50921,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         nodeId: `editor-${node.data.id}`,
     });
     // Styles that will be applied to the component element
-    const { className: componentClass } = useStyleTag({
+    const componentClass = useEditorModeClassName({
         styles: {
             ...componentStyles,
             margin: 0,
@@ -50960,7 +50953,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         editorMode: true,
         node,
         renderDropzone,
-        ...omit$1(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab']),
+        ...omit$1(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName']),
         ...(definition.children ? { children: renderDropzone(node) } : {}),
     };
     return { componentProps, wrapperProps };