@contentful/experiences-visual-editor-react 3.1.1 → 3.2.0-beta.0

package/dist/index.js

@@ -631,35 +631,69 @@ const breakpointsRefinement$1 = (value, ctx) => {
             code: z.ZodIssueCode.custom,
             message: `The first breakpoint should include the following attributes: { "query": "*" }`,
         });
+        return;
     }
-    const hasDuplicateIds = value.some((currentBreakpoint, currentBreakpointIndex) => {
-        // check if the current breakpoint id is found in the rest of the array
-        const breakpointIndex = value.findIndex((breakpoint) => breakpoint.id === currentBreakpoint.id);
-        return breakpointIndex !== currentBreakpointIndex;
-    });
+    // Return early if there's only one generic breakpoint
+    const hasNoBreakpointsStrategy = value.length === 1;
+    if (hasNoBreakpointsStrategy) {
+        return;
+    }
+    // Check if any breakpoint id occurs twice
+    const ids = value.map((breakpoint) => breakpoint.id);
+    const hasDuplicateIds = new Set(ids).size !== ids.length;
     if (hasDuplicateIds) {
         ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: `Breakpoint IDs must be unique`,
         });
+        return;
     }
-    // Extract the queries boundary by removing the special characters around it
-    const queries = value.map((bp) => bp.query === '*' ? bp.query : parseInt(bp.query.replace(/px|<|>/, '')));
-    // sort updates queries array in place so we need to create a copy
-    const originalQueries = [...queries];
-    queries.sort((q1, q2) => {
-        if (q1 === '*') {
-            return -1;
+    // Skip the first one which is guaranteed to be a wildcard query
+    const nonBaseBreakpoints = value.slice(1);
+    const isMobileFirstStrategy = nonBaseBreakpoints[0].query.startsWith('>');
+    const isDesktopFirstStrategy = nonBaseBreakpoints[0].query.startsWith('<');
+    if (isMobileFirstStrategy) {
+        const areOperatorsEqual = nonBaseBreakpoints.every(({ query }) => query.startsWith('>'));
+        if (!areOperatorsEqual) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Breakpoint queries must be in the format ">[size]px" for mobile-first strategy`,
+            });
         }
-        if (q2 === '*') {
-            return 1;
+        // Extract the queries boundary by removing the special characters around it
+        const queries = nonBaseBreakpoints.map((bp) => parseInt(bp.query.replace(/px|<|>/, '')));
+        // Starting with the third breakpoint, check that every query is higher than the one above
+        const isIncreasing = queries.every((value, index, array) => index === 0 || value > array[index - 1]);
+        if (!isIncreasing) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `When using a mobile-first strategy, all breakpoints must have strictly increasing pixel values`,
+            });
         }
-        return q1 > q2 ? -1 : 1;
-    });
-    if (originalQueries.join('') !== queries.join('')) {
+    }
+    else if (isDesktopFirstStrategy) {
+        const areOperatorsEqual = nonBaseBreakpoints.every(({ query }) => query.startsWith('<'));
+        if (!areOperatorsEqual) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Breakpoint queries must be in the format "<[size]px" for desktop-first strategy`,
+            });
+        }
+        // Extract the queries boundary by removing the special characters around it
+        const queries = nonBaseBreakpoints.map((bp) => parseInt(bp.query.replace(/px|<|>/, '')));
+        // Starting with the third breakpoint, check that every query is lower than the one above
+        const isDecreasing = queries.every((value, index, array) => index === 0 || value < array[index - 1]);
+        if (!isDecreasing) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `When using a desktop-first strategy, all breakpoints must have strictly decreasing pixel values`,
+            });
+        }
+    }
+    else if (!isMobileFirstStrategy && !isDesktopFirstStrategy) {
         ctx.addIssue({
             code: z.ZodIssueCode.custom,
-            message: `Breakpoints should be ordered from largest to smallest pixel value`,
+            message: `You may only use a mobile-first or desktop-first strategy for breakpoints using '<' or '>' queries`,
         });
     }
 };
@@ -718,7 +752,7 @@ const ParametersSchema$1 = z.record(propertyKeySchema$1, ParameterSchema$1);
 const BreakpointSchema$1 = z
     .object({
     id: propertyKeySchema$1,
-    query: z.string().regex(/^\*$|^<[0-9*]+px$/),
+    query: z.string().regex(/^\*$|^[<>][0-9*]+px$/),
     previewSize: z.string(),
     displayName: z.string(),
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
@@ -996,7 +1030,7 @@ const toCSSMediaQuery = ({ query }) => {
 };
 // Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
 const findLast = (array, predicate) => {
-    return array.reverse().find(predicate);
+    return [...array].reverse().find(predicate);
 };
 // Initialise media query matchers. This won't include the always matching fallback breakpoint.
 const mediaQueryMatcher = (breakpoints) => {
@@ -1016,19 +1050,19 @@ const mediaQueryMatcher = (breakpoints) => {
     return [mediaQueryMatchers, mediaQueryMatches];
 };
 const getActiveBreakpointIndex = (breakpoints, mediaQueryMatches, fallbackBreakpointIndex) => {
-    // The breakpoints are ordered (desktop-first: descending by screen width)
+    // The breakpoints are ordered (desktop-first: descending by screen width, mobile-first: ascending by screen width).
     const breakpointsWithMatches = breakpoints.map(({ id }, index) => ({
         id,
         index,
         // The fallback breakpoint with wildcard query will always match
         isMatch: mediaQueryMatches[id] ?? index === fallbackBreakpointIndex,
     }));
-    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one)
+    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one, mobile-first: the widest one)
     const mostSpecificIndex = findLast(breakpointsWithMatches, ({ isMatch }) => isMatch)?.index;
     return mostSpecificIndex ?? fallbackBreakpointIndex;
 };
 const getFallbackBreakpointIndex = (breakpoints) => {
-    // We assume that there will be a single breakpoint which uses the wildcard query.
+    // The validation ensures that there will be exactly one breakpoint using the wildcard query.
     // If there is none, we just take the first one in the list.
     return Math.max(breakpoints.findIndex(({ query }) => query === '*'), 0);
 };
@@ -3314,35 +3348,69 @@ const breakpointsRefinement = (value, ctx) => {
             code: z.ZodIssueCode.custom,
             message: `The first breakpoint should include the following attributes: { "query": "*" }`,
         });
+        return;
     }
-    const hasDuplicateIds = value.some((currentBreakpoint, currentBreakpointIndex) => {
-        // check if the current breakpoint id is found in the rest of the array
-        const breakpointIndex = value.findIndex((breakpoint) => breakpoint.id === currentBreakpoint.id);
-        return breakpointIndex !== currentBreakpointIndex;
-    });
+    // Return early if there's only one generic breakpoint
+    const hasNoBreakpointsStrategy = value.length === 1;
+    if (hasNoBreakpointsStrategy) {
+        return;
+    }
+    // Check if any breakpoint id occurs twice
+    const ids = value.map((breakpoint) => breakpoint.id);
+    const hasDuplicateIds = new Set(ids).size !== ids.length;
     if (hasDuplicateIds) {
         ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: `Breakpoint IDs must be unique`,
         });
+        return;
     }
-    // Extract the queries boundary by removing the special characters around it
-    const queries = value.map((bp) => bp.query === '*' ? bp.query : parseInt(bp.query.replace(/px|<|>/, '')));
-    // sort updates queries array in place so we need to create a copy
-    const originalQueries = [...queries];
-    queries.sort((q1, q2) => {
-        if (q1 === '*') {
-            return -1;
+    // Skip the first one which is guaranteed to be a wildcard query
+    const nonBaseBreakpoints = value.slice(1);
+    const isMobileFirstStrategy = nonBaseBreakpoints[0].query.startsWith('>');
+    const isDesktopFirstStrategy = nonBaseBreakpoints[0].query.startsWith('<');
+    if (isMobileFirstStrategy) {
+        const areOperatorsEqual = nonBaseBreakpoints.every(({ query }) => query.startsWith('>'));
+        if (!areOperatorsEqual) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Breakpoint queries must be in the format ">[size]px" for mobile-first strategy`,
+            });
         }
-        if (q2 === '*') {
-            return 1;
+        // Extract the queries boundary by removing the special characters around it
+        const queries = nonBaseBreakpoints.map((bp) => parseInt(bp.query.replace(/px|<|>/, '')));
+        // Starting with the third breakpoint, check that every query is higher than the one above
+        const isIncreasing = queries.every((value, index, array) => index === 0 || value > array[index - 1]);
+        if (!isIncreasing) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `When using a mobile-first strategy, all breakpoints must have strictly increasing pixel values`,
+            });
         }
-        return q1 > q2 ? -1 : 1;
-    });
-    if (originalQueries.join('') !== queries.join('')) {
+    }
+    else if (isDesktopFirstStrategy) {
+        const areOperatorsEqual = nonBaseBreakpoints.every(({ query }) => query.startsWith('<'));
+        if (!areOperatorsEqual) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Breakpoint queries must be in the format "<[size]px" for desktop-first strategy`,
+            });
+        }
+        // Extract the queries boundary by removing the special characters around it
+        const queries = nonBaseBreakpoints.map((bp) => parseInt(bp.query.replace(/px|<|>/, '')));
+        // Starting with the third breakpoint, check that every query is lower than the one above
+        const isDecreasing = queries.every((value, index, array) => index === 0 || value < array[index - 1]);
+        if (!isDecreasing) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `When using a desktop-first strategy, all breakpoints must have strictly decreasing pixel values`,
+            });
+        }
+    }
+    else if (!isMobileFirstStrategy && !isDesktopFirstStrategy) {
         ctx.addIssue({
             code: z.ZodIssueCode.custom,
-            message: `Breakpoints should be ordered from largest to smallest pixel value`,
+            message: `You may only use a mobile-first or desktop-first strategy for breakpoints using '<' or '>' queries`,
         });
     }
 };
@@ -3401,7 +3469,7 @@ const ParametersSchema = z.record(propertyKeySchema, ParameterSchema);
 const BreakpointSchema = z
     .object({
     id: propertyKeySchema,
-    query: z.string().regex(/^\*$|^<[0-9*]+px$/),
+    query: z.string().regex(/^\*$|^[<>][0-9*]+px$/),
     previewSize: z.string(),
     displayName: z.string(),
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
@@ -4852,7 +4920,7 @@ const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
     node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
 };
 function waitForImageToBeLoaded(imageNode) {
-    if (imageNode.complete) {
+    if (imageNode.complete && (imageNode.naturalWidth > 0 || imageNode.naturalHeight > 0)) {
         return Promise.resolve();
     }
     return new Promise((resolve, reject) => {
@@ -4886,8 +4954,8 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
         trailing: true,
     }), []);
     const debouncedCollectImages = useMemo(() => debounce(() => {
-        return Array.from(document.querySelectorAll('img'));
-    }, 300, { leading: true, trailing: true }), []);
+        setImages((prev) => ({ ...prev, allImages: findAllImages() }));
+    }, 300, { trailing: true }), []);
     // Store tree in a ref to avoid the need to deactivate & reactivate the mutation observer
     // when the tree changes. This is important to avoid missing out on some mutation events.
     const treeRef = useRef(tree);
@@ -4896,13 +4964,17 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
     }, [tree]);
     // Handling window resize events
     useEffect(() => {
-        const resizeEventListener = () => debouncedUpdateGeometry(treeRef.current, 'resize');
+        const resizeEventListener = () => {
+            debouncedUpdateGeometry(treeRef.current, 'resize');
+            // find all images on resize
+            debouncedCollectImages();
+        };
         window.addEventListener('resize', resizeEventListener);
         return () => window.removeEventListener('resize', resizeEventListener);
-    }, [debouncedUpdateGeometry]);
+    }, [debouncedCollectImages, debouncedUpdateGeometry]);
     const [{ allImages, loadedImages }, setImages] = useState(() => {
-        const allImages = debouncedCollectImages();
-        const loadedImages = new WeakSet();
+        const allImages = findAllImages();
+        const loadedImages = new WeakMap();
         return { allImages, loadedImages };
     });
     // Handling DOM mutations
@@ -4910,8 +4982,7 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
         const observer = new MutationObserver(() => {
             debouncedUpdateGeometry(treeRef.current, 'mutation');
             // find all images on any DOM change
-            const allImages = debouncedCollectImages();
-            setImages((prevState) => ({ ...prevState, allImages }));
+            debouncedCollectImages();
         });
         // send initial geometry in case the tree is empty
         debouncedUpdateGeometry(treeRef.current, 'mutation');
@@ -4927,13 +4998,14 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
     useEffect(() => {
         let isCurrent = true;
         allImages.forEach(async (imageNode) => {
-            if (loadedImages.has(imageNode)) {
+            const lastSrc = loadedImages.get(imageNode);
+            if (lastSrc === imageNode.currentSrc) {
                 return;
             }
             // update the geometry after each image is loaded, as it can shift the layout
             await waitForImageToBeLoaded(imageNode);
             if (isCurrent) {
-                loadedImages.add(imageNode);
+                loadedImages.set(imageNode, imageNode.currentSrc);
                 debouncedUpdateGeometry(treeRef.current, 'imageLoad');
             }
         });
@@ -4960,6 +5032,9 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
         return () => document.removeEventListener('wheel', onWheel);
     }, [canvasMode]);
 };
+function findAllImages() {
+    return Array.from(document.querySelectorAll('img'));
+}
 
 const RootRenderer = ({ inMemoryEntitiesStore, canvasMode }) => {
     useEditorSubscriber(inMemoryEntitiesStore);