La localización de contenido usa la URL cruda del bucket R2 en lugar de la URL del CDN S3 en las publicaciones traducidas

Hola,

Al usar la localización de contenido con las traducciones de Discourse AI y Cloudflare R2 como almacenamiento compatible con S3, el contenido de las publicaciones traducidas almacena la URL del endpoint del bucket de R2 en bruto en lugar de la s3_cdn_url configurada (dominio personalizado). Las imágenes se muestran rotas para todos los usuarios que ven las traducciones.

Entorno

  • Discourse: última versión
  • Cloudflare R2 configurado mediante almacenamiento compatible con S3
  • s3_cdn_url: https://files.mydomain.com
  • s3_use_cdn_url_for_all_uploads: habilitado
  • Localización de contenido + traducción de Discourse AI: habilitado

Pasos para reproducir

  1. Configura Cloudflare R2 con un dominio personalizado (s3_cdn_url)
  2. Habilita la localización de contenido y la traducción por IA
  3. Crea una publicación con una imagen
  4. Espera a que la traducción por IA genere la versión localizada
  5. Cambia el idioma: las imágenes en la versión traducida están rotas

Comportamiento observado

El contenido traducido contiene URLs como:

//files.myendpoint.r2.cloudflarestorage.com/original/1X/ en lugar de https://files.mydomain.com/original/1X/

Error relacionado: Chat thumbnails bypass s3_cdn_url & use raw S3 bucket URLs

Una solución temporal es realizar un remapeo o usar este tc:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.8.0", (api) => {
  const badDomain = "files.myendpoint.r2.cloudflarestorage.com";
  const goodDomain = "files.mydomain.com";

  function fixImages() {
    document.querySelectorAll(`img[src*="${badDomain}"]`).forEach(img => {
      img.src = img.src.replace(badDomain, goodDomain);
    });
    document.querySelectorAll(`img[data-src*="${badDomain}"]`).forEach(img => {
      img.dataset.src = img.dataset.src.replace(badDomain, goodDomain);
    });
    document.querySelectorAll(`img[data-large-src*="${badDomain}"]`).forEach(img => {
      img.dataset.largeSrc = img.dataset.largeSrc.replace(badDomain, goodDomain);
    });
  }

  api.decorateCooked(() => fixImages(), { id: "fix-r2-translated-images" });
  api.onPageChange(() => fixImages());
});

No estoy muy seguro de esto. Tengo cubos de Cloudflare R2 para almacenamiento de objetos y copias de seguridad en nuestro sitio, y contamos con múltiples idiomas con traducción por IA; las imágenes se cargan perfectamente en todos ellos.

Por ejemplo:

Inglés

Alemán

Ruso

Portugués

Sí, en mis pruebas subo de 3 a 5 imágenes. Pero solo 1 o 2 funcionan como se espera.