Supporto HTML per modali di dialogo

Ciao,

Nella pagina di una categoria, quando un utente non può creare un argomento, utilizzo un testo banner con un link all’argomento sui livelli di fiducia.
Screenshot 2022-12-09 at 9.09.29

L’HTML funziona correttamente nel banner

Ma facendo clic su + Nuovo argomento, la modale non gestisce l’HTML.

Sarebbe davvero ottimo se anche la modale potesse gestire l’HTML, proprio come la modale bootbox utilizzata in precedenza.

Grazie :slightly_smiling_face:

3 Mi Piace

@pmusaraj ha fornito una soluzione che supporta contenuti HTML qui.

4 Mi Piace

Ciao Tim,

Grazie per il suggerimento :slightly_smiling_face: L’ho modificato con modifyClass ma penso che sarebbe una modifica ragionevole rendere questo dialog htmlSafe nel core poiché anche il banner della categoria gestisce l’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 Mi Piace

Ciao team!

L’impostazione seguente vorrei richiedere l’opzione di poter utilizzare un link. Nel mio caso una Categoria può essere visualizzata da tutti; tuttavia è necessario appartenere a un Gruppo per poter creare e rispondere agli argomenti.

"Testo del banner quando un utente non può creare un argomento in questa categoria: "

Quindi avevo provato a usare del testo come:

Per partecipare è necessario “Applica link al gruppo”.

Sfortunatamente questa impostazione supporta solo testo normale, nessun link. Il team potrebbe considerare di cambiarla?

2 Mi Piace

Ho spostato il tuo post in questo argomento per mantenere insieme le richieste per questa modifica. :+1:

2 Mi Piace

Grazie Jammydodger!

A volte può essere difficile capire dove sia meglio pubblicare le cose. Discourse è enorme e questo non è necessariamente un male; tuttavia, può renderlo a volte intimidatorio per noi che siamo ancora relativamente nuovi.

Tuttavia, è qui che il tuo fantastico team e la community sono, più spesso che no, fondamentali nell’assistere tutti!

2 Mi Piace

Ciao Don e @TimJensen questa soluzione risolverà anche il markdown come nel mio esempio qui sotto? da usare:

Per partecipare alla categoria devi [Candidarti](/g/groupname/members).

Anche il codice presumo debba creare un componente tematico. In quale sezione devo inserirlo?


EDiT:
Hmm.. aggiungere un file js al momento potrebbe essere un po’ al di là delle mie attuali capacità. :sad_but_relieved_face: Avrò bisogno di un po’ di assistenza per riuscirci con successo.

1 Mi Piace

Ciao Dan,

Il banner supporta l’HTML. Questo argomento riguarda la finestra di dialogo che appare quando fai clic sul pulsante “Crea argomento”.

No, supporta l’HTML. Il tuo esempio sarebbe qualcosa del genere: :arrow_down_small:

Per partecipare alla categoria devi \u003ca href=\"/g/groupname/members\"\u003eFare domanda\u003c/a\u003e.

Questo dovrebbe funzionare nell’Header per supportare l’HTML nella finestra di dialogo. :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 Mi Piace

Fantastico, quindi tutto quello che devo fare è usare l’HTML invece del Markdown.

Quindi il banner funzionerà se qualcuno prova a rispondere e/o a creare un nuovo argomento all’interno della categoria? Dove, se ho capito bene, la tua richiesta è relativa, diciamo, al componente tematico del pulsante “nuovo argomento”?

Con il tuo JS creeresti semplicemente un nuovo componente tematico e caricheresti il file *.js? C’è qualcos’altro necessario nelle parti CSS, ecc.? O funzionerà semplicemente?

E se volessi una finestra di dialogo prima del pulsante link, cosa dovrei fare a livello di codice. Mi scuso, sto ancora imparando.

1 Mi Piace

Crea semplicemente un nuovo componente in admin e incolla il codice sopra (https://meta.discourse.org/t/dialog-modal-html-support/248361/10?u=dodesz) nella sezione Common > Header. Permetterà di gestire l’HTML nella modale quando fai clic sul pulsante Nuovo argomento. :slightly_smiling_face:

Demo

Senza codice
Come puoi vedere il banner supporta l’HTML ma quando faccio clic sul pulsante Nuovo argomento la modale (finestra di dialogo) non lo supporta.


Con codice


Non sono sicuro di cosa intendi con :arrow_down_small:

2 Mi Piace

Grazie per aver spiegato dove aggiungere il codice per la correzione dell’HTML.

In realtà il tuo primo video risponde perfettamente alla mia domanda e mi dà chiarezza. Il testo della finestra di dialogo prima del pulsante link è lo stesso della procedura markdown. (Il primo video lo mostra quando fallisce senza il codice inserito) L’ho perso anche io nel tuo esempio di codice :facepalm:
cioè
Per partecipare “markdown”
Per partecipare “html”

Grazie mille per avermi aiutato a chiarirmi le idee
Dan

2 Mi Piace

Mi scuso per il ritardo, ragazzi, questo dovrebbe risolvere il problema: FIX: Allow HTML in category read-only dialog by pmusaraj · Pull Request #20349 · discourse/discourse · GitHub

4 Mi Piace

Questo argomento è stato chiuso automaticamente dopo 2 giorni. Non sono più consentite nuove risposte.