Como tornar parte do texto em um parágrafo negrito/itálico/etc usando funções helper.h?

Contribuir Experiência do Usuário
1

Talvez seja uma pergunta simples, mas me deixou travado por um momento :sweat_smile:

Como fazer isso usando a função helper.h do Discourse?

<div>
<p>Este texto <i>está em itálico</i> </p>
</div>

O mais próximo que cheguei foi isso:

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

Que retorna isso:
image

Caso contrário, algumas outras variantes que tentei retornam apenas Este texto ou está em itálico, mas não ambos :thinking:

Por exemplo, isso:

    html() {
      return [  h('div'),
                h('p', "Este texto", [h('i', "está em itálico")])
             ]
    }

retorna apenas o está em itálico
image

Quase lá?
Isso:

    html() {
      return [  h('div', ),
                h('p', [h('i', "está em itálico"), "Este texto"])
             ]
    }

Me dá isso :sweat_smile:

image

2

Os parâmetros da função h são tagName, properties, children. Você pode omitir properties se quiser e usar apenas tagName, children. Os filhos podem ser um único nó ou um array de vários nós.

Portanto, acho que você quer algo assim:

h('div',   // <div>
  h('p', [   // <p>
    'Este texto ',
    h('i', 'está em itálico')  // <i></i>
  ])  // </p>
);  // </div>
6 curtidas
3

Obrigado, não percebi que um único nó também pode ser um texto simples. Isso ficou bastante poderoso.

Outro assunto: você já considerou introduzir um conversor simples de HTML para a função h? Isso aceleraria muito o desenvolvimento em certos momentos :slight_smile:

4

É possível usar um modelo como este em alguns casos

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

5 curtidas