Lightbox não funciona mais?

Bug
1

Não tenho certeza do que mudou, mas notei hoje que clicar em imagens nas postagens agora simplesmente abre a imagem como uma nova página (link direto para a imagem) em vez de abri-la em um frame Lightbox. Isso inclui imagens grandes em postagens que eu sei que costumavam funcionar.

Não vejo nenhuma nova configuração na interface de administração que ative/desative esse recurso. Não tenho certeza de quando essa funcionalidade parou de funcionar. O Discourse está totalmente atualizado de acordo com a página /admin/upgrade.

Existe alguma maneira de depurar por que as imagens não estão sendo exibidas em Lightbox? Eu posso ver no código HTML que a classe “Lightbox” está sendo aplicada às imagens corretamente (e também há uma classe “Lightbox” na tag a que envolve a imagem):

image
image602×107 13 KB

Meu site está usando Cloudflare. Não tenho certeza se isso poderia estar interferindo de alguma forma?

Obrigado!

3 curtidas
2

Acabei de testar isso com a versão 2.9.0.beta3 do Discourse e não consegui reproduzir o problema.

Clicar em uma imagem em um tópico abre uma Lightbox contendo a imagem, e o HTML mostra que a classe lightbox está sendo aplicada à imagem também.

Estou acessando o Discourse através do Google Chrome Versão 99.0.4844.82, e o site do Discourse que testei está sendo hospedado através da Digital Ocean.

Espero que isso ajude a fornecer mais informações sobre o que pode estar causando esse problema no seu site.

4 curtidas
3

Você também está usando o rocket loader ou alguma outra otimização de JS do Cloudflare no discourse?

Se sim, a primeira coisa a tentar é desativar as otimizações mencionadas e tentar novamente.

4 curtidas
4

O problema não parece depender do navegador ou do sistema operacional. Estou vendo isso no Firefox, Chrome e Safari no macOS, Safari no iOS e Firefox/Chrome/Edge no Windows. Não consigo descobrir nenhuma combinação de navegador/SO onde o Lightbox realmente funcione, então suponho que seja algum tipo de problema com o próprio site, talvez alguma configuração ou outro plugin que o esteja quebrando?

Não tenho certeza de como ou onde começar a tentar descobrir isso, pois não estou vendo nada no console ou nos logs do site que indique um problema.

Não, não estou usando nenhuma otimização ou opção de minimização no Cloudflare. Todas essas estão desativadas. A única coisa que está atualmente ativada é o cache por 4 horas.

1 curtida
5

Consegui duplicar meu site de produção localmente e reproduzir o problema. Descobri que é um bug que está aparecendo por causa de algum código em um plugin de tema personalizado que escrevi. Ainda não consigo explicar por que isso está quebrando o Lightbox ou por que isso só se tornou um problema recentemente. Poderia ser um bug ainda não descoberto no core?

Meu código de plugin é muito simples:

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

export default apiInitializer("0.11.1", (api) => {
  // Render adjustments for post content
  api.decorateCookedElement(
    (elem) => {
      elem.innerHTML = elem.innerHTML.replace(/Finances/, "Test Str");
    },
    { id: "test-decorator", onlyStream: true }
  );
});

Tudo o que ele tenta fazer é uma substituição simples de string no conteúdo renderizado do post. De alguma forma, isso quebra todos os Lightboxes em todos os posts (mesmo aqueles que não contêm a string). Comentar a linha elem.innerHTML = ... faz com que os Lightboxes voltem a funcionar.

Note que o exemplo acima é simplificado (meu plugin real substitui links renderizados específicos em posts e realiza outras operações no conteúdo cozido), mas mesmo o código muito simples acima reproduz o problema que estou vendo.

Esta é a maneira correta de modificar o conteúdo cozido no momento da renderização em posts e este é um novo bug do core relacionado a Lightboxes? Ou eu estive fazendo isso errado o tempo todo e isso nunca deveria ter funcionado em primeiro lugar?

6

Criei um componente de tema simples que expõe este problema do Lightbox. Qualquer pessoa poderá reproduzir o problema em qualquer instalação do Discourse ativando este componente de tema:
https://github.com/hayatae/lightbox-theme-component-bug

Se alguém tiver alguma solução alternativa ou sugestão, por favor me avise! Ainda não tenho certeza por que isso quebra o Lightbox.

7

Para qualquer outra pessoa que possa encontrar este problema, consegui descobrir uma solução alternativa por enquanto.

Desde que você não faça nenhuma substituição de innerHtml em nenhum elemento que contenha imagens que serão exibidas em lightbox, o problema não ocorrerá. Consegui refatorar parte do meu código para segmentar elementos de forma mais específica e direcionar apenas aqueles que não são hrefs ao redor de imagens.

4 curtidas