Visualizações em PDF inline

Personalização Componente de tema
, ,
55

Excelente! Obrigado, @Johani. Posso confirmar que funciona em todos os 3 navegadores agora.

4 curtidas
56

Fantástico — são melhorias sólidas e claramente exigiram muito trabalho para serem alcançadas. Obrigado por nos ouvir, nós, co-conspiradores um pouco irritantes do mundo auto-hospedado!

O Componente agora funciona com uploads para o S3?

3 curtidas
57

Eu não testei, mas deve funcionar se seu bucket estiver configurado corretamente. Este componente faz uma requisição para carregar o PDF.

Esse tipo de requisição feita em JavaScript é bloqueado se a origem não tiver permissão de acesso ao arquivo. Nesse caso, você acabará com um erro de CORS. Se você verificar o console, provavelmente verá algo como:

image

Não há muito o que o componente possa fazer sobre isso. Tudo precisa ser tratado na sua configuração do S3. A origem — seu domínio do Discourse — deve ter permissão para fazer esse tipo de requisição para evitar problemas de CORS.

9 curtidas
58

Obrigado! Em breve, darei o salto de volta para o S3 com coragem.

Outra sugestão: usar tab em vez de espaço antes do nome do arquivo

O que eu gostaria é que o PDF fosse incorporado (inline) por padrão e que abrisse em uma nova aba se um espaço fosse inserido no nome do arquivo. Isso daria aos autores a opção de escolher, para cada PDF, entre incorporado ou nova aba, em vez de fazer essa escolha por componente.

Talvez a configuração do componente deveria ser: “Qual comportamento padrão você deseja?” e, se um espaço for inserido, o comportamento alternativo seria aplicado.

Ou, alternativamente, você poderia perguntar o que o espaço deve fazer (incorporar / abrir em nova aba / baixar).

2 curtidas
59

Aargh! O Chrome está mostrando apenas caixas cinzas novamente. O Firefox e o Safari estão OK.

3 curtidas
60

Este componente do tema está enviando o PDF para um interpretador externo?
Tenho a opção “mídia segura” ativada porque quero evitar que arquivos sejam carregados por um serviço externo.

1 curtida
61

Descobri que isso ocorre por causa do seguinte código:

<a class="attachment pdf-attachment" href="...pdf">doc.pdf
  <iframe src="blob:..." height="500" loading="lazy" class="pdf-preview">
  </iframe>
</a>

Se você substituir o código acima pelo seguinte:

<a class="attachment pdf-attachment" href="...pdf">doc.pdf</a>
<iframe src="blob:..." height="500" loading="lazy" class="pdf-preview"></iframe>

Isso funcionará.
Mas não tenho certeza de como corrigir isso no código existente.

5 curtidas
62

@Johani
O erro está associado ao seguinte código, linhas 34 a 41:

        const setUpPreviewType = (pdf) => {
          if (previewMode === "Inline") {
            const preview = createPreviewElement();
            pdf.classList.add("pdf-attachment");
            pdf.append(preview);

            return preview;
          }
4 curtidas
63

Essa solução parece funcionar em todos os navegadores.

4 curtidas
64

pdf.parentNode.append(preview); parece resolver o problema (mas, no caso de múltiplos PDFs, as pré-visualizações aparecem abaixo de todos os links, e não abaixo de cada um).

3 curtidas
65

Mas se o parentNode for o parágrafo, então isso não deveria ser um problema, pois o link e o iframe estarão dentro da tag de parágrafo.

Para contornar esse problema, você pode simplesmente adicionar uma nova linha entre os anexos:

[doc1.pdf|attachment](...)

[doc2.pdf|attachment](...)

E com sua solução, a pré-visualização do PDF também será exibida corretamente no Chrome.

3 curtidas
66

Acabei de enviar algumas alterações.

Sim, isso faz mais sentido do que ignorar o arquivo. Veja como as coisas funcionarão após a atualização.

  1. Se você configurar a opção para “Nova Aba”, o componente não anexará nenhuma pré-visualização nas postagens. Se clicar no link, o PDF abrirá em uma nova aba.

  2. Se você configurar a opção para “Incorporado”, o componente anexará uma pré-visualização em todas as postagens com PDFs por padrão. Se o nome do arquivo começar com um espaço, a pré-visualização não será anexada, mas clicar no link abrirá o PDF em uma nova aba em vez de baixá-lo.

    Todos os visualizadores de PDF nativos dos navegadores possuem um botão de download, então você pode baixá-lo a partir daí se desejar.

Obrigado pela depuração e pelos detalhes, @sharewoodsDavid. Acontece que as tags <iframe> dentro de tags <a> falham na validação.

O elemento iframe não deve aparecer como descendente do elemento a

Portanto, sua correção está perfeita. Fiz essa alteração no PR acima.

Se você quiser adicionar um elemento após outro elemento, pode usar after() da seguinte forma:

someElement.after(newElement)

Se quiser adicionar um elemento antes de outro elemento, pode usar insertBefore() assim:

// parentNode: o pai do elemento antes do qual você deseja inserir
// newNode: o elemento que você deseja inserir
// referenceNode: o elemento antes do qual você deseja inserir

parentNode.insertBefore(newNode, referenceNode)

Não. Não há serviços externos envolvidos nisso. Veja como funciona:

  1. O usuário visita uma postagem com um anexo PDF.
  2. O navegador do usuário solicita o anexo.
  3. O servidor o envia para o navegador do usuário.
  4. O navegador do usuário o lê usando o visualizador de PDF integrado.

É isso.

7 curtidas
67

Perfeito - obrigado @Johani. Confirmo que funciona no Chrome, FF e Safari. :+1:

3 curtidas
68

Isso é ótimo! Muito obrigado. Eu o instalei e está funcionando! Era exatamente o que eu estava procurando.

5 curtidas
69

Isso será retroativo para os PDFs já postados no fórum?

2 curtidas
70

Acabei de testar no meu site de teste e parece que funciona para os existentes também, sem precisar ‘reconstruir o html’. :+1:

6 curtidas
71

Vi uma atualização no código-fonte na semana passada, então imagino que este componente esteja ativo. Mas, infelizmente, ele nunca funcionou para mim em nenhum navegador. Seria por causa das configurações seguras de “mídia”?
Sou o único que não consegue fazer isso funcionar ou este é um problema comum?

2 curtidas
72

Nunca funcionou para mim também.

2 curtidas
73

O componente funciona bem. Que problema/erro você está vendo?

3 curtidas
74

Eu vi apenas um link de download comum de um arquivo. Não comecei a investigar mais a fundo porque não era tão importante para mim, seria bom ter, nada mais. Então, desculpe, mas não posso detalhar mais.

Editar

Bem, verifiquei novamente — a última vez foi há algum tempo.

O DiscourseHub mostra isto (iPad), e nenhum erro nos logs do Discourse:

image
image2048×1536 177 KB

Mas quando tentei usar o Safari, ele mostrou a primeira página, mas não a segunda.

1 curtida