@pantheon-systems/p1-media 0.4.3 → 0.4.4

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactElement, ImgHTMLAttributes, ReactNode } from 'react';
+import { ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { ComponentConfig } from '@puckeditor/core';
 
 /**
@@ -188,7 +188,7 @@ declare function getMediaProps(value: MediaFieldValue | null | undefined, option
  * (a broken foreign-origin image is never emitted). `alt` may be overridden;
  * otherwise it comes from the value.
  */
-declare function MediaImage({ image, mediaBaseUrl, transform, alt, ...rest }: {
+declare function MediaImage({ image, mediaBaseUrl, transform, alt, loading, decoding, ...rest }: {
     image: MediaFieldValue | null | undefined;
     mediaBaseUrl?: string;
     transform?: ImageTransformParams;
@@ -198,17 +198,21 @@ declare function MediaImage({ image, mediaBaseUrl, transform, alt, ...rest }: {
  * ESCAPED text (React default escaping — never dangerouslySetInnerHTML, req.
  * R6). Renders nothing when the src is rejected/empty.
  */
-declare function MediaFigure({ image, schema, mediaBaseUrl, transform, className, captionClassName, }: {
+declare function MediaFigure({ image, schema, mediaBaseUrl, transform, className, captionClassName, loading, decoding, }: {
     image: MediaFieldValue | null | undefined;
     schema?: MetadataFieldDef[];
     mediaBaseUrl?: string;
     transform?: ImageTransformParams;
     className?: string;
     captionClassName?: string;
+    /** Defaults to "lazy"; pass "eager" for an above-the-fold figure. */
+    loading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
+    decoding?: ImgHTMLAttributes<HTMLImageElement>["decoding"];
 }): ReactElement | null;
 
 interface MediaFigureBlockProps {
     photo: MediaFieldValue | null;
+    loading?: "lazy" | "eager";
 }
 interface MediaFigureBlockOptions {
     /**
@@ -233,6 +237,12 @@ interface MediaFigureBlockOptions {
     captionClassName?: string;
     /** Rendered when no photo is chosen (or its URL fails origin validation). */
     placeholder?: ReactNode;
+    /**
+     * Default for the block's "Loading" field. "lazy" (the default) keeps
+     * off-screen images off the wire on image-heavy pages; use "eager" when the
+     * block is reliably above the fold.
+     */
+    defaultLoading?: "lazy" | "eager";
 }
 /**
  * Builds a registerable Puck component around the rich `p1-media` field and

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactElement, ImgHTMLAttributes, ReactNode } from 'react';
+import { ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { ComponentConfig } from '@puckeditor/core';
 
 /**
@@ -188,7 +188,7 @@ declare function getMediaProps(value: MediaFieldValue | null | undefined, option
  * (a broken foreign-origin image is never emitted). `alt` may be overridden;
  * otherwise it comes from the value.
  */
-declare function MediaImage({ image, mediaBaseUrl, transform, alt, ...rest }: {
+declare function MediaImage({ image, mediaBaseUrl, transform, alt, loading, decoding, ...rest }: {
     image: MediaFieldValue | null | undefined;
     mediaBaseUrl?: string;
     transform?: ImageTransformParams;
@@ -198,17 +198,21 @@ declare function MediaImage({ image, mediaBaseUrl, transform, alt, ...rest }: {
  * ESCAPED text (React default escaping — never dangerouslySetInnerHTML, req.
  * R6). Renders nothing when the src is rejected/empty.
  */
-declare function MediaFigure({ image, schema, mediaBaseUrl, transform, className, captionClassName, }: {
+declare function MediaFigure({ image, schema, mediaBaseUrl, transform, className, captionClassName, loading, decoding, }: {
     image: MediaFieldValue | null | undefined;
     schema?: MetadataFieldDef[];
     mediaBaseUrl?: string;
     transform?: ImageTransformParams;
     className?: string;
     captionClassName?: string;
+    /** Defaults to "lazy"; pass "eager" for an above-the-fold figure. */
+    loading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
+    decoding?: ImgHTMLAttributes<HTMLImageElement>["decoding"];
 }): ReactElement | null;
 
 interface MediaFigureBlockProps {
     photo: MediaFieldValue | null;
+    loading?: "lazy" | "eager";
 }
 interface MediaFigureBlockOptions {
     /**
@@ -233,6 +237,12 @@ interface MediaFigureBlockOptions {
     captionClassName?: string;
     /** Rendered when no photo is chosen (or its URL fails origin validation). */
     placeholder?: ReactNode;
+    /**
+     * Default for the block's "Loading" field. "lazy" (the default) keeps
+     * off-screen images off the wire on image-heavy pages; use "eager" when the
+     * block is reliably above the fold.
+     */
+    defaultLoading?: "lazy" | "eager";
 }
 /**
  * Builds a registerable Puck component around the rich `p1-media` field and

package/dist/index.js

@@ -2815,6 +2815,8 @@ function MediaImage({
   mediaBaseUrl,
   transform,
   alt,
+  loading = "lazy",
+  decoding = "async",
   ...rest
 }) {
   const props = getMediaProps(image, { mediaBaseUrl, transform });
@@ -2824,6 +2826,8 @@ function MediaImage({
     {
       src: props.src,
       alt: alt ?? props.alt,
+      loading,
+      decoding,
       ...props.width !== void 0 ? { width: props.width } : {},
       ...props.height !== void 0 ? { height: props.height } : {},
       ...rest
@@ -2856,7 +2860,9 @@ function MediaFigure({
   mediaBaseUrl,
   transform,
   className,
-  captionClassName
+  captionClassName,
+  loading = "lazy",
+  decoding = "async"
 }) {
   const props = getMediaProps(image, { mediaBaseUrl, transform });
   if (!props.src) return null;
@@ -2867,6 +2873,8 @@ function MediaFigure({
       {
         src: props.src,
         alt: props.alt,
+        loading,
+        decoding,
         ...props.width !== void 0 ? { width: props.width } : {},
         ...props.height !== void 0 ? { height: props.height } : {}
       }
@@ -2898,19 +2906,29 @@ function createMediaFigureBlock(options) {
     schema,
     className,
     captionClassName,
-    placeholder = "Choose a photo from the media library"
+    placeholder = "Choose a photo from the media library",
+    defaultLoading = "lazy"
   } = options;
   return {
     label,
     fields: {
       // `p1-media` is registered by createMediaPlugin via overrides.fieldTypes,
       // so it is not part of Puck's built-in Field union.
-      photo: { type: "p1-media", label: fieldLabel }
+      photo: { type: "p1-media", label: fieldLabel },
+      loading: {
+        type: "radio",
+        label: "Loading",
+        options: [
+          { label: "Lazy", value: "lazy" },
+          { label: "Eager", value: "eager" }
+        ]
+      }
     },
     defaultProps: {
-      photo: null
+      photo: null,
+      loading: defaultLoading
     },
-    render: ({ photo }) => {
+    render: ({ photo, loading }) => {
       const { src } = getMediaProps(photo ?? null, { mediaBaseUrl });
       if (!src) {
         return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: placeholderStyle, children: placeholder });
@@ -2923,7 +2941,8 @@ function createMediaFigureBlock(options) {
           transform,
           schema,
           className,
-          captionClassName
+          captionClassName,
+          loading: loading === "eager" ? "eager" : "lazy"
         }
       );
     }