Aperçus de PDF en ligne

[omarfilip]

Excellent ! Merci @Johani. Je peux confirmer que cela fonctionne maintenant sur les 3 navigateurs.

[nathank (Nathan Kershaw)]

Fantastique — ce sont là des améliorations solides et qui ont clairement nécessité beaucoup de travail pour être réalisées. Merci d’avoir écouté nous, vos complices un peu agaçants du monde de l’auto-hébergement !

Le composant fonctionne-t-il désormais avec les uploads S3 ?

[Johani (Joe)]

@nathank

Le composant fonctionne-t-il désormais avec les uploads S3 ?

Je ne l’ai pas testé, mais cela devrait fonctionner si votre bucket est correctement configuré. Ce composant effectue une requête pour charger le PDF.

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

Ce type de requête effectué en JavaScript est bloqué si l’origine n’a pas l’autorisation d’accéder au fichier. Vous obtenez alors une erreur CORS. Si vous vérifiez la console, vous verrez probablement un message du type :

Le composant ne peut pas grand-chose contre cela. Tout doit être géré dans votre configuration S3. L’origine — votre domaine Discourse — doit être autorisée à effectuer de telles requêtes pour éviter les problèmes CORS.

[nathank (Nathan Kershaw)]

Merci ! Je vais courageusement me lancer à nouveau dans S3 sous peu.

Une autre suggestion : la touche Tab au lieu de l’espace avant le nom de fichier

Ce que je souhaite, c’est que le PDF s’affiche en ligne par défaut, et s’ouvre dans un nouvel onglet si un espace est ajouté dans le nom de fichier. Cela donne aux auteurs le choix, pour chaque PDF, entre l’affichage en ligne et l’ouverture dans un onglet, plutôt que de devoir le configurer au niveau du composant.

Peut-être que le paramètre du composant devrait plutôt être « Quel comportement par défaut souhaitez-vous ? » et, si un espace est ajouté, le comportement opposé s’applique.

Ou bien, vous pourriez demander ce que l’espace doit faire (afficher en ligne / ouvrir dans un onglet / télécharger).

[omarfilip]

Aïe ! Chrome affiche à nouveau uniquement des rectangles gris. Firefox et Safari fonctionnent correctement.

[Alon1 (Alon)]

Ce composant de thème envoie-t-il le PDF à un interprète externe ?
J’ai activé « média sécurisé » car je souhaite éviter que des fichiers soient chargés par un service externe.

[sharewoodsDavid]

J’ai découvert que cela est dû au code suivant :

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

Si vous remplacez le code ci-dessus par le suivant :

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

Cela fonctionnera.
Mais je ne suis pas sûr de savoir comment corriger cela dans le code existant.

[sharewoodsDavid]

@Johani
L’erreur est liée au code suivant, lignes 34 à 41 :

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

            return preview;
          }

[sharewoodsDavid]

Cette solution semble fonctionner pour tous les navigateurs.

[Benjamin_D (Benjamin Decotte)]

@sharewoodsDavid

L’erreur est liée au code suivant, lignes 34 à 41 :

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

pdf.parentNode.append(preview); semble fonctionner (mais dans le cas de plusieurs PDF, les aperçus s’affichent sous tous les liens, et non sous chacun d’eux).

[sharewoodsDavid]

Mais si le parentNode est le paragraphe, alors cela ne devrait pas poser de problème, car le lien et l’iframe seront à l’intérieur de la balise paragraphe.

Pour contourner ce problème, vous pouvez simplement ajouter une nouvelle ligne entre les pièces jointes :

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

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

Avec votre solution, l’aperçu du PDF s’affichera correctement sur Chrome également.

[Johani (Joe)]

Je viens de pousser quelques modifications.

DEV: Fix invalid markup (#6)

@nathank

Ce que je veux, c’est que le PDF soit intégré par défaut et qu’il s’ouvre dans un nouvel onglet si un espace est présent dans le nom du fichier.

Oui, c’est plus logique que d’ignorer le fichier. Voici comment les choses fonctionneront après la mise à jour.

1. Si vous définissez le paramètre sur « Nouvel onglet », le composant n’ajoutera aucun aperçu dans les publications. Si vous cliquez sur le lien, le PDF s’ouvrira dans un nouvel onglet.

2. Si vous définissez le paramètre sur « Intégré », le composant ajoutera un aperçu dans la publication pour tous les PDF par défaut. Si le nom du fichier commence par un espace, aucun aperçu ne sera ajouté, mais cliquer sur le lien ouvrira le PDF dans un nouvel onglet au lieu de le télécharger.

   Tous les visionneuses PDF natives des navigateurs disposent d’un bouton de téléchargement, vous pouvez donc télécharger le fichier depuis là si vous le souhaitez.

@omarfilip

Chrome affiche à nouveau uniquement des boîtes grises

@sharewoodsDavid

Si vous remplacez le code ci-dessus par le suivant :

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

Cela fonctionnera.

Merci pour le débogage et les détails @sharewoodsDavid. Il s’avère que les balises <iframe> à l’intérieur des balises <a> échouent à la validation.

L’élément iframe ne doit pas apparaître en tant que descendant de l’élément a.

Votre correctif est donc exact. J’ai apporté cette modification dans la PR ci-dessus.

@Benjamin_D

pdf.parentNode.append(preview); semble faire l’affaire

Si vous souhaitez ajouter un élément après un autre élément, vous pouvez utiliser after() comme ceci :

someElement.after(newElement)

Si vous souhaitez ajouter un élément avant un autre élément, vous pouvez utiliser insertBefore() comme ceci :

// parentNode : le parent de l'élément devant lequel vous souhaitez insérer
// newNode : l'élément que vous souhaitez insérer
// referenceNode : l'élément devant lequel vous souhaitez insérer

parentNode.insertBefore(newNode, referenceNode)

@Alon1

Ce composant de thème envoie-t-il le PDF à un interpréteur externe ?

Non. Aucun service externe n’est impliqué ici. Voici comment cela fonctionne.

1. L’utilisateur visite une publication avec une pièce jointe PDF.
2. Le navigateur de l’utilisateur demande la pièce jointe.
3. Le serveur l’envoie au navigateur de l’utilisateur.
4. Le navigateur de l’utilisateur la lit à l’aide de la visionneuse PDF intégrée.

C’est tout.

[omarfilip]

Parfait — merci @Johani. Je confirme que cela fonctionne sur Chrome, Firefox et Safari.

[spamless (Dallman Ross)]

@Johani

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

C’est super ! Merci beaucoup. Je l’ai installé et ça fonctionne ! Exactement ce que je cherchais.

[kbpierson (KatieBeth Pierson)]

@Johani

Comment l’utiliser ?

1. installer le composant
2. autoriser les téléchargements de pdf
3. rafraîchir la page
4. télécharger un pdf

C’est tout. Le reste devrait fonctionner automatiquement.

Est-ce que cela sera rétroactif pour les pdf déjà publiés sur le forum ?

[JammyDodger]

Je viens de tester sur mon site de test, et il semble que cela fonctionne aussi pour ceux qui existent déjà, sans avoir besoin de « reconstruire le HTML ».

[Alon1 (Alon)]

J’ai vu une mise à jour dans la source la semaine dernière, donc je suppose que ce composant est actif. Mais malheureusement, il n’a jamais fonctionné pour moi sur aucun navigateur. Est-ce à cause du réglage sécurisé des « médias » peut-être ?
Suis-je le seul à ne pas y arriver ou est-ce un problème courant ?

[Jagster (Jakke Flemming)]

Ça n’a jamais marché pour moi non plus.

[omarfilip]

Le composant fonctionne bien. Quel problème/erreur voyez-vous ?

[Jagster (Jakke Flemming)]

Je n’ai vu qu’un lien de téléchargement ordinaire d’un fichier. Je n’ai pas creusé plus profondément car ce n’était pas si important pour moi, ce serait bien de l’avoir, rien de plus. Donc, désolé, mais je ne peux pas éclaircir cela davantage.

Edit

Eh bien, j’ai vérifié à nouveau — la dernière fois c’était il y a quelque temps.

DiscourseHub montre ceci (iPad), et aucune erreur dans les journaux de Discourse :

Mais quand j’ai essayé d’utiliser Safari, il a montré la toute première page, mais pas la deuxième.