Come rendere parte del testo in un paragrafo grassetto/corsivo/ecc. usando le funzioni di helper.h?

Contribuisci UX
1

Forse una domanda semplice, ma mi ha fatto bloccare un po’ :sweat_smile:

Come si ottiene questo risultato usando la funzione helper.h di Discourse?

<div>
<p>Questo testo <i>è in corsivo</i> </p>
</div>

La cosa più vicina che sono riuscito a ottenere è questa:

    html() {
      return [  h('div'),
                h('p', "Questo testo" + h('i', "è in corsivo"))
             ]
    }

Che restituisce questo:
image

In alternativa, alcune altre varianti che ho provato restituiscono solo Questo testo o è in corsivo, ma non entrambi :thinking:

Ad esempio, questa:

    html() {
      return [  h('div'),
                h('p', "Questo testo", [h('i', "è in corsivo")])
             ]
    }

restituisce solo è in corsivo
image

Quasi arrivato?
Questa:

    html() {
      return [  h('div', ),
                h('p', [h('i', "è in corsivo"), "Questo testo"])
             ]
    }

Mi dà questo :sweat_smile:

image

2

I parametri della funzione h sono tagName, properties, children. Puoi omettere properties se vuoi, usando semplicemente tagName, children. I children possono essere un singolo nodo o un array di più nodi.

Quindi penso che tu voglia qualcosa del genere:

h('div',   // <div>
  h('p', [   // <p>
    'Questo testo ',
    h('i', 'è in corsivo')  // <i></i>
  ])  // </p>
);  // </div>
6 Mi Piace
3

Grazie, non avevo capito che un singolo nodo potesse essere anche un semplice testo. Ora è davvero potente.

A proposito, avete mai pensato di introdurre un semplice convertitore da HTML alla funzione h? Questo accelererebbe molto lo sviluppo in alcune occasioni :slight_smile:

4

In alcuni casi è possibile utilizzare un modello come questo

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/embedded-post.js#L11

5 Mi Piace