Как сделать часть текста в абзаце жирным/курсивом и т.д. с помощью функций helper.h?

Внести вклад UX
1

Возможно, вопрос простой, но я застрял на нём на некоторое время :sweat_smile:

Как добиться этого с помощью функции helper.h в Discourse?

<div>
<p>Этот текст <i>наклонен</i> </p>
</div>

Самое близкое, что у меня получилось, это:

    html() {
      return [  h('div'),
                h('p', "Этот текст" + h('i', "наклонен"))
             ]
    }

Что возвращает следующее:
image

В противном случае несколько других вариантов, которые я пробовал, возвращают либо Этот текст, либо наклонен, но не оба сразу :thinking:

Например, этот:

    html() {
      return [  h('div'),
                h('p', "Этот текст", [h('i', "наклонен")])
             ]
    }

возвращает только наклонен
image

Почти получилось?
Это:

    html() {
      return [  h('div', ),
                h('p', [h('i', "наклонен"), "Этот текст"])
             ]
    }

Дает мне следующее :sweat_smile:

image

2

Параметры функции h (ссылка) — это tagName, properties, children. Вы можете пропустить properties, если хотите, и использовать только tagName и children. Аргумент children может быть либо одним узлом, либо массивом из нескольких узлов.

Так что, думаю, вам нужно что-то вроде:

h('div',   // <div>
  h('p', [   // <p>
    'Этот текст ',
    h('i', 'курсивный')  // <i></i>
  ])  // </p>
);  // </div>
6 лайков
3

Спасибо, я не знал, что один узел может быть простым текстом. Теперь это довольно мощно.

Кстати, вы когда-нибудь думали о создании простого конвертера из HTML в функцию h? Это во многом ускорит разработку :slight_smile:

4

В некоторых случаях можно использовать шаблон, подобный этому

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

5 лайков