Cómo hacer que parte del texto en un párrafo sea negrita/cursiva/etc. usando funciones de helper.h

Contribuir UX
1

Quizás sea una pregunta sencilla, pero me ha hecho detenerme un momento :sweat_smile:

¿Cómo lograr esto usando la función h de los helpers de Discourse?

<div>
<p>Este texto <i>está en cursiva</i> </p>
</div>

Lo más cercano que logré fue esto:

    html() {
      return [  h('div'),
                h('p', "Este texto" + h('i', "está en cursiva"))
             ]
    }

Lo cual devuelve esto:
image

De lo contrario, algunas otras variantes que probé devuelven solo Este texto o solo está en cursiva, pero no ambos :thinking:

Por ejemplo, esto:

    html() {
      return [  h('div'),
                h('p', "Este texto", [h('i', "está en cursiva")])
             ]
    }

devuelve solo está en cursiva
image

¿Casi lo logro?
Esto:

    html() {
      return [  h('div', ),
                h('p', [h('i', "está en cursiva"), "Este texto"])
             ]
    }

Me da esto :sweat_smile:

image

2

Los parámetros de la función h son tagName, properties, children. Puedes omitir properties si lo deseas y usar solo tagName, children. Los hijos pueden ser un único nodo o un array de varios nodos.

Así que creo que quieres algo como

h('div',   // <div>
  h('p', [   // <p>
    'Este texto ',
    h('i', 'está en cursiva')  // <i></i>
  ])  // </p>
);  // </div>
6 Me gusta
3

Gracias, no sabía que un solo nodo también podía ser un texto simple. Esto es ahora bastante potente.

Por otro lado, ¿alguna vez consideraron introducir un convertidor sencillo de HTML a la función h? Esto aceleraría mucho el desarrollo en ocasiones :slight_smile:

4

En algunos casos es posible utilizar una plantilla como esta

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

5 Me gusta