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

package/dist/index.js

@@ -1,5 +1,5 @@
 import styleInject from 'style-inject';
-import React, { useRef, useMemo, useEffect, useState, forwardRef, useCallback } from 'react';
+import React, { useRef, useMemo, useEffect, useState, useLayoutEffect, forwardRef, useCallback } from 'react';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { isEqual, get as get$1, omit } from 'lodash-es';
@@ -2379,17 +2379,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] = useState('');
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (Object.keys(styles).length === 0) {
             return;
         }
@@ -2397,19 +2395,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, }) => {
@@ -2441,11 +2434,11 @@ 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'),
-            }
-            : {};
+        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;
@@ -2544,7 +2537,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.
@@ -2562,7 +2555,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,
@@ -2594,7 +2587,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         editorMode: true,
         node,
         renderDropzone,
-        ...omit(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab']),
+        ...omit(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName']),
         ...(definition.children ? { children: renderDropzone(node) } : {}),
     };
     return { componentProps, wrapperProps };