Support HTML pour les modales de dialogue

Bonjour,

Sur une page de catégorie où l’utilisateur ne peut pas créer de sujet, j’utilise un texte de bannière avec un lien vers le sujet sur les niveaux de confiance.
Screenshot 2022-12-09 at 9.09.29

Le HTML fonctionne bien dans la bannière

Mais en cliquant sur le + Nouveau Sujet, la modale ne gère pas le HTML.

Ce serait vraiment bien si la modale pouvait également gérer le HTML, tout comme la modale bootbox précédemment utilisée.

Merci :slightly_smiling_face:

3 « J'aime »

@pmusaraj a fourni une solution qui prend en charge le contenu HTML ici.

4 « J'aime »

Bonjour Tim,

Merci pour le tuyau :slightly_smiling_face: J’ai changé cela avec modifyClass mais je pense que ce serait un changement raisonnable de rendre cette boîte de dialogue htmlSafe dans le cœur puisque la bannière de catégorie gère également le HTML.

import { htmlSafe } from "@ember/template";

export default {
  name: "dialog-html-support",

  initialize() {
    withPluginApi("0.8.7", (api) => {
      api.modifyClass("component:d-navigation", {
        pluginId: "dialog-html-support",

        actions: {
          clickCreateTopicButton() {
            if (this.categoryReadOnlyBanner && !this.hasDraft) {
              this.dialog.alert({
                message: htmlSafe(this.categoryReadOnlyBanner),
              });
            } else {
              this.createTopic();
            }
          },
        },
      });
    });
  },
};
3 « J'aime »

Salut l’équipe !

Le paramètre ci-dessous, j’aimerais demander la possibilité d’utiliser un lien. Dans mon cas, une catégorie peut être consultée par tout le monde ; cependant, vous devez appartenir à un groupe pour pouvoir créer et répondre à des sujets.

« Texte de la bannière lorsqu’un utilisateur ne peut pas créer de sujet dans cette catégorie : »

J’avais donc essayé d’utiliser un texte comme :

Pour participer, vous devez « Appliquer le lien au groupe ».

Malheureusement, ce paramètre ne prend en charge que le texte brut, sans liens. L’équipe pourrait-elle envisager de modifier cela ?

2 « J'aime »

J’ai déplacé votre message dans ce sujet pour regrouper les demandes concernant ce changement. :+1:

2 « J'aime »

Merci Jammydodger !

Il est parfois difficile de savoir où poster les choses. Discourse est immense et ce n’est pas nécessairement une mauvaise chose ; cependant, cela peut être intimidant pour ceux d’entre nous qui sont encore relativement nouveaux.

Cependant, c’est là que votre fantastique équipe et communauté sont le plus souvent instrumentales pour aider tout le monde !

2 « J'aime »

Salut Don et @TimJensen cette solution corrigera-t-elle également le markdown comme dans mon exemple ci-dessous ? à utiliser :

Pour participer à la catégorie, vous devez [Postuler](/g/groupname/members).

Le code, je présume, nécessite également la création d’un composant thématique. Dans quelle section dois-je l’insérer ?


ÉDiT :
Hmmm.. ajouter un fichier js pour le moment pourrait être un peu au-delà de mes compétences actuelles. :sad_but_relieved_face: J’aurai besoin d’un peu d’aide pour y parvenir avec succès.

1 « J'aime »

Salut Dan,

La bannière prend en charge le HTML. Ce sujet concerne la boîte de dialogue qui s’affiche lorsque vous cliquez sur le bouton Créer un sujet.

Non, elle prend en charge le HTML. Votre exemple ressemblerait à ceci : :arrow_down_small:

Pour participer à la catégorie, vous devez \u003ca href=\"/g/groupname/members\"\u003e postuler \u003c/a\u003e.

Cela devrait fonctionner dans Header pour prendre en charge le HTML dans la boîte de dialogue. :slightly_smiling_face:

<script type="text/discourse-plugin" version="0.8">
  const { htmlSafe } = require("@ember/template");

  api.modifyClass("component:d-navigation", {
    pluginId: "dialog-html-support",
        
    actions: {
      clickCreateTopicButton() {
        if (this.categoryReadOnlyBanner && !this.hasDraft) {
          this.dialog.alert({
            message: htmlSafe(this.categoryReadOnlyBanner),
          });
        } else {
          this.createTopic();
        }
      },
    },
  });
</script>
3 « J'aime »

cool donc tout ce que j’ai à faire est d’utiliser html au lieu de markdown.

La bannière fonctionnera-t-elle si quelqu’un essaie de répondre et/ou de créer un nouveau sujet dans la catégorie ? Où si je comprends bien votre demande concerne par exemple le composant de thème du bouton nouveau sujet ?

Avec votre js, créeriez-vous simplement un nouveau composant de thème et téléchargeriez-vous le fichier *.js ? Y a-t-il autre chose de nécessaire dans les parties css etc. ? ou cela fonctionnera-t-il simplement ?

Et si je veux une boîte de dialogue avant le bouton lien, que devrais-je faire en termes de code. mes excuses, j’apprends encore

1 « J'aime »

Créez simplement un nouveau composant dans l’administration et collez le code ci-dessus dans la section Common > Header. Cela permettra de gérer le HTML dans la fenêtre modale lorsque vous cliquerez sur le bouton Nouveau sujet. :slightly_smiling_face:

Démo

Sans code
Comme vous pouvez le voir, la bannière prend en charge le HTML, mais lorsque je clique sur le bouton Nouveau sujet, la fenêtre modale (dialogue) ne le prend pas en charge.


Avec code


Je ne suis pas sûr de ce que vous entendez par :arrow_down_small:

2 « J'aime »

Merci d’avoir expliqué où ajouter le code pour la correction HTML.

En fait, votre première vidéo répond parfaitement à ma question et m’apporte de la clarté. Le texte de dialogue avant le bouton de lien est le même que la procédure markdown. (La première vidéo le montre quand cela échoue sans le code en place) Je l’ai aussi manqué dans votre exemple de code :facepalm:

c’est-à-dire

Pour participer “markdown”
Pour participer “html”

Merci beaucoup de m’avoir aidé à m’éclairer

Dan

2 « J'aime »

Désolé pour le retard, voici ce qui devrait régler le problème : FIX: Allow HTML in category read-only dialog by pmusaraj · Pull Request #20349 · discourse/discourse · GitHub

4 « J'aime »

Ce sujet a été automatiquement fermé après 2 jours. Les nouvelles réponses ne sont plus autorisées.