@crtobiasdelsud/portal-ui 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/EditorOutput/EditorOutput.jsx

@@ -57,7 +57,9 @@ function loadTwitterWidgets() {
 
 function EmbedIframe({ src, service, style }) {
   const safeSrc = sanitizeResourceUrl(src)
-  const ref = useRef(null)
+  const wrapRef = useRef(null)      // placeholder observado por IO
+  const contentRef = useRef(null)   // contenedor real del tweet/iframe (post-inView)
+  const [inView, setInView] = useState(false)
   const [autoHeight, setAutoHeight] = useState(null)
   const [twitterDone, setTwitterDone] = useState(false)
   if (!safeSrc) return null
@@ -68,10 +70,32 @@ function EmbedIframe({ src, service, style }) {
   // solo → altura exacta, sin blanco ni scroll.
   const tweetId = service === 'twitter' ? (String(src).match(/[?&]id=(\d+)/)?.[1] || null) : null
 
+  // Lazy load: difiere TODO (iframe src, widgets.js de Twitter, listener de
+  // Instagram MEASURE) hasta que el embed esté cerca del viewport. Sin esto,
+  // tweets / instagram / youtube debajo del fold cargan junto con la nota y
+  // pegan al LCP. El rootMargin de 400px precarga antes que el usuario llegue.
   useEffect(() => {
-    if (!tweetId) return
+    if (inView) return
+    if (typeof IntersectionObserver === 'undefined') { setInView(true); return }
+    const el = wrapRef.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some(e => e.isIntersecting)) {
+          setInView(true)
+          io.disconnect()
+        }
+      },
+      { rootMargin: '400px 0px' },
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [inView])
+
+  useEffect(() => {
+    if (!inView || !tweetId) return
     let cancelled = false
-    const el = ref.current
+    const el = contentRef.current
     if (!el) return
     loadTwitterWidgets().then((twttr) => {
       if (cancelled || !twttr?.widgets || !el) return
@@ -81,16 +105,16 @@ function EmbedIframe({ src, service, style }) {
         .then(() => { if (!cancelled) setTwitterDone(true) })
     })
     return () => { cancelled = true }
-  }, [tweetId])
+  }, [inView, tweetId])
 
   useEffect(() => {
     // Servicios que se sabe que postean MEASURE: Instagram. (Twitter se maneja
     // arriba con widgets.js. TikTok no postea altura.)
-    if (service !== 'instagram') return
+    if (!inView || service !== 'instagram') return
 
     function handleMessage(event) {
       if (typeof event.origin !== 'string' || !event.origin.includes('instagram.com')) return
-      if (event.source !== ref.current?.contentWindow) return
+      if (event.source !== contentRef.current?.contentWindow) return
 
       let data = event.data
       if (typeof data === 'string') {
@@ -102,18 +126,24 @@ function EmbedIframe({ src, service, style }) {
 
     window.addEventListener('message', handleMessage)
     return () => window.removeEventListener('message', handleMessage)
-  }, [service])
+  }, [inView, service])
+
+  // Placeholder antes de inView: ocupa el lugar (height del callsite) pero no
+  // dispara ningún fetch. Reserva el espacio → no genera CLS al "hidratar".
+  if (!inView) {
+    return <div ref={wrapRef} style={style} aria-hidden="true" />
+  }
 
   // Twitter via widget: contenedor que crece con el tweet. `minHeight` es solo
   // placeholder anti-CLS hasta que widgets.js mida; después el widget fija su
   // propia altura exacta. Si no hubo tweetId (URL rara), cae al iframe normal.
   if (tweetId) {
     const { height, ...rest } = style || {}
-    return <div ref={ref} style={{ ...rest, minHeight: twitterDone ? undefined : height }} />
+    return <div ref={contentRef} style={{ ...rest, minHeight: twitterDone ? undefined : height }} />
   }
 
   const finalStyle = autoHeight != null ? { ...style, height: autoHeight } : style
-  return <iframe ref={ref} src={safeSrc} style={finalStyle} allowFullScreen />
+  return <iframe ref={contentRef} src={safeSrc} style={finalStyle} allowFullScreen />
 }
 
 // Fixed class names for AMP (no CSS Modules hashing)

package/src/components/EditorOutputFull/EditorOutputFull.jsx

@@ -38,16 +38,39 @@ function resolveEmbedSrc({ service, embed, source }) {
 
 function EmbedIframe({ src, service, style }) {
   const safeSrc = sanitizeResourceUrl(src)
-  const ref = useRef(null)
+  const wrapRef = useRef(null)      // placeholder observado por IO
+  const contentRef = useRef(null)   // iframe real (post-inView)
+  const [inView, setInView] = useState(false)
   const [autoHeight, setAutoHeight] = useState(null)
   if (!safeSrc) return null
 
+  // Lazy load: difiere el iframe src y el listener de Instagram hasta que el
+  // embed esté cerca del viewport (400px de margen para precargar). Sin esto
+  // los embeds abajo del fold cargan junto con la nota y suben el LCP.
   useEffect(() => {
-    if (service !== 'instagram') return
+    if (inView) return
+    if (typeof IntersectionObserver === 'undefined') { setInView(true); return }
+    const el = wrapRef.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some(e => e.isIntersecting)) {
+          setInView(true)
+          io.disconnect()
+        }
+      },
+      { rootMargin: '400px 0px' },
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [inView])
+
+  useEffect(() => {
+    if (!inView || service !== 'instagram') return
 
     function handleMessage(event) {
       if (typeof event.origin !== 'string' || !event.origin.includes('instagram.com')) return
-      if (event.source !== ref.current?.contentWindow) return
+      if (event.source !== contentRef.current?.contentWindow) return
 
       let data = event.data
       if (typeof data === 'string') {
@@ -59,10 +82,15 @@ function EmbedIframe({ src, service, style }) {
 
     window.addEventListener('message', handleMessage)
     return () => window.removeEventListener('message', handleMessage)
-  }, [service])
+  }, [inView, service])
+
+  // Placeholder antes de inView: ocupa el lugar pero no dispara fetch del iframe.
+  if (!inView) {
+    return <div ref={wrapRef} style={style} aria-hidden="true" />
+  }
 
   const finalStyle = autoHeight != null ? { ...style, height: autoHeight } : style
-  return <iframe ref={ref} src={safeSrc} style={finalStyle} allowFullScreen />
+  return <iframe ref={contentRef} src={safeSrc} style={finalStyle} allowFullScreen />
 }
 
 // Fixed class names for AMP (no CSS Modules hashing)

package/src/utils/volanta.js

@@ -1,12 +1,21 @@
-// Helper compartido por cabezales, hero, bajada, etc. La volanta se renderiza
-// inline con el título separada por ". " (en cabezales el espacio lo da el
-// `margin-right` del CSS; en bajada/leeAdemas/loQueSeLee es un literal en JSX).
-// Si quien edita la nota ya cerró la volanta con un signo (".", "!", "?", "…"),
-// no agregamos otro punto — devolvemos el texto tal cual.
+// Helper compartido por cabezales, hero, bajada, etc. Normaliza la volanta
+// para que el render con el título siempre sea: «volanta + punto + espacio + titulo».
+// El espacio entre volanta y titulo lo provee el callsite (literal " " en JSX,
+// o `margin-right` en CSS).
+//
+// Normalización:
+// 1. Quita whitespace trailing ("postgres "        → "postgres").
+// 2. Colapsa whitespace entre la palabra y un signo final ("postgres ."  → "postgres.").
+// 3. Si no termina en signo de cierre (.!?…), agrega ".".
+//
+// Resultado: "Política." / "Política." (sin doble) / "EXCLUSIVO!" / "" .
 
-const SENTENCE_END = /[.!?…]\s*$/
+const SENTENCE_END = /[.!?…]$/
 
 export function volantaWithStop(volanta) {
   if (!volanta) return ''
-  return SENTENCE_END.test(volanta) ? volanta : `${volanta}.`
+  // Colapsa "palabra <space> . <space>" → "palabra.", y limpia trailing.
+  const clean = volanta.replace(/\s+([.!?…])\s*$/, '$1').trimEnd()
+  if (!clean) return ''
+  return SENTENCE_END.test(clean) ? clean : `${clean}.`
 }