Anteprime PDF in linea

[omarfilip]

Ottimo! Grazie @Johani. Posso confermare che ora funziona in tutti e 3 i browser.

[nathank (Nathan Kershaw)]

Fantastico: si tratta di miglioramenti solidi e il lavoro necessario per raggiungerli è stato notevole. Grazie per averci ascoltato, noi cospiratori un po’ fastidiosi del mondo self-hosted!

Il Componente ora funziona con gli upload S3?

[Johani (Joe)]

@nathank

Il componente funziona ora con gli upload su S3?

Non l’ho provato, ma dovrebbe funzionare se il tuo bucket è configurato correttamente. Questo componente effettua una richiesta per caricare il PDF

discourse-pdf-previews/javascripts/discourse/initializers/initialize-for-pdf-preview.js at main · discourse/discourse-pdf-previews · GitHub

Questi tipi di richieste effettuate in JavaScript vengono bloccati se l’origine non ha autorizzato l’accesso al file. In tal caso, si verifica un errore CORS. Se controlli la console, probabilmente vedrai qualcosa di simile a questo.

Il componente non può fare molto al riguardo. Tutto deve essere gestito nella configurazione del tuo S3. L’origine, ovvero il tuo dominio Discourse, deve essere autorizzata a effettuare tali richieste per evitare problemi CORS.

[nathank (Nathan Kershaw)]

Grazie! Tornerò coraggiosamente su S3 tra poco.

Un’altra suggerimento: tab quando c’è uno spazio prima del nome file

Ciò che vorrei è che il PDF venga visualizzato inline di default e si apra in una nuova scheda se viene inserito uno spazio nel nome file. Questo dà agli autori la possibilità di scegliere, per ogni PDF, tra visualizzazione inline o apertura in scheda, invece di doverlo fare per ogni componente.

Forse l’impostazione del componente dovrebbe essere invece “Qual è il comportamento predefinito che desideri?” e se viene inserito uno spazio, si ottiene l’altro.

In alternativa, si potrebbe chiedere cosa dovrebbe fare lo spazio (inline / scheda / download).

[omarfilip]

Aargh! Chrome mostra di nuovo solo riquadri grigi. FF e Safari stanno bene.

[Alon1 (Alon)]

Questo componente del tema sta inviando il PDF a un interprete esterno?
Ho attivato “media sicuri” perché voglio evitare che i file vengano caricati da un servizio esterno.

[sharewoodsDavid]

Ho scoperto che questo è dovuto al seguente codice:

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

Se sostituisci il codice sopra con il seguente:

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

funzionerà.
Ma non sono sicuro di come correggere questo nel codice esistente.

[sharewoodsDavid]

@Johani
L’errore è associato al seguente codice, righe 34-41:

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

            return preview;
          }

[sharewoodsDavid]

Questa soluzione sembra funzionare per tutti i browser.

[Benjamin_D (Benjamin Decotte)]

@sharewoodsDavid

L’errore è associato al seguente codice, righe 34-41:

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

pdf.parentNode.append(preview); sembra funzionare (ma nel caso di più PDF, le anteprime vengono visualizzate sotto tutti i link, non sotto ciascuno di essi).

[sharewoodsDavid]

Ma se il nodo genitore è il paragrafo, allora questo non dovrebbe essere un problema, poiché il link e l’iframe saranno all’interno del tag del paragrafo.

Per aggirare questo problema, puoi semplicemente aggiungere una nuova riga tra gli allegati:

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

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

Con la tua soluzione, l’anteprima del PDF verrà visualizzata correttamente anche su Chrome.

[Johani (Joe)]

Ho appena inviato alcune modifiche.

DEV: Fix invalid markup (#6)

@nathank

Ciò che voglio è che il PDF sia incorporato di default e che si apra in una nuova scheda se viene inserito uno spazio nel nome del file.

Sì, ha più senso rispetto all’ignorare il file. Ecco come funzionerà tutto dopo l’aggiornamento.

1. Se imposti l’opzione su “Nuova Scheda”, il componente non aggiungerà alcuna anteprima nei post. Se fai clic sul link, il PDF si aprirà in una nuova scheda.

2. Se imposti l’opzione su “Incorporato”, il componente aggiungerà un’anteprima a tutti i PDF nei post per impostazione predefinita. Se il nome del file inizia con uno spazio, non verrà aggiunta l’anteprima, ma facendo clic sul link il PDF si aprirà in una nuova scheda invece di essere scaricato.

   Tutti i visualizzatori PDF nativi dei browser hanno un pulsante di download, quindi puoi scaricarlo da lì se lo desideri.

@omarfilip

Chrome mostra di nuovo solo riquadri grigi

@sharewoodsDavid

Se sostituisci il codice sopra con il seguente:

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

Funzionerà

Grazie per il debug e i dettagli @sharewoodsDavid. Si è scoperto che i tag <iframe> all’interno dei tag <a> non superano la convalida

L’elemento iframe non deve apparire come discendente dell’elemento a

Quindi, la tua correzione è perfetta. Ho apportato quella modifica nella PR sopra.

@Benjamin_D

pdf.parentNode.append(preview); sembra fare al caso nostro

Se vuoi aggiungere un elemento dopo un altro elemento, puoi usare after() in questo modo

someElement.after(newElement)

Se vuoi aggiungere un elemento prima di un altro elemento, puoi usare insertBefore() in questo modo

// parentNode: il genitore dell'elemento prima del quale vuoi inserire
// newNode: l'elemento che vuoi inserire
// referenceNode: l'elemento prima del quale vuoi inserire

parentNode.insertBefore(newNode, referenceNode)

@Alon1

Questo componente del tema invia il PDF a un interprete esterno?

No. Non sono coinvolti servizi esterni. Ecco come funziona.

1. L’utente visita un post con un allegato PDF
2. Il browser dell’utente richiede l’allegato
3. Il server lo invia al browser dell’utente
4. Il browser dell’utente lo legge utilizzando il visualizzatore PDF integrato

È tutto.

[omarfilip]

Perfetto, grazie @Johani. Confermo che funziona su Chrome, Firefox e Safari.

[spamless (Dallman Ross)]

@Johani

https://github.com/discourse/discourse-pdf-previews

Fantastico! Grazie mille. L’ho installato e funziona! Era proprio quello che cercavo.

[kbpierson (KatieBeth Pierson)]

@Johani

Come si usa?

1. installa il componente
2. consenti caricamenti pdf
3. aggiorna la pagina
4. carica un pdf

Ecco fatto. Il resto dovrebbe funzionare automaticamente.

Sarà retroattivo per i pdf già pubblicati nel forum?

[JammyDodger]

Ho appena testato sul mio sito di prova e sembra che funzioni anche per quelli esistenti, senza bisogno di ‘ricostruire l’html’.

[Alon1 (Alon)]

La settimana scorsa ho visto un aggiornamento nel codice sorgente, quindi immagino che questo componente sia attivo. Ma sfortunatamente non ha mai funzionato per me su nessun browser. È forse a causa delle impostazioni di sicurezza per i “media”? Sono l’unico a non riuscire a farlo funzionare o è un problema comune?

[Jagster (Jakke Flemming)]

Non ha mai funzionato nemmeno per me.

[omarfilip]

Il componente funziona bene. Quale problema/errore stai riscontrando?

[Jagster (Jakke Flemming)]

Ho visto solo un normale link per il download di un file. Non ho iniziato a scavare più a fondo perché non era così importante per me, sarebbe stato bello averlo, niente di più. Quindi, mi dispiace ma non posso approfondire questo.

Modifica

Beh, ho ricontrollato - l’ultima volta è stato un po’ di tempo fa.

DiscourseHub mostra questo (iPad), e nessun errore nei log di Discourse:

Ma quando ho provato a usare Safari ha mostrato la primissima pagina, ma non la seconda.