helper.hの関数を使用して、段落の一部を太字/斜体などにする方法

貢献 UX
1

少し単純な質問かもしれませんが、これで少しつまずいてしまいました :sweat_smile:

Discourse の helper.h 関数を使ってこれをどのように実現すればよいでしょうか？

<div>
<p>This text <i>is italic</i> </p>
</div>

私が最も近づけたのはこれです：

    html() {
      return [  h('div'),
                h('p', "This text" + h('i', "is italic"))
             ]
    }

しかし、結果はこうなります：
image

それ以外にいくつかのバリエーションを試しましたが、This text または is italic のどちらか一方しか表示されず、両方が表示されません :thinking:

例えば、こちら：

    html() {
      return [  h('div'),
                h('p', "This text", [h('i', "is italic")])
             ]
    }

これは is italic だけを表示します
image

あと一歩ですか？
こちら：

    html() {
      return [  h('div', ),
                h('p', [h('i', "is italic"), "This text"])
             ]
    }

結果はこうなります :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