Wie man einen Teil des Textes in einem Absatz mit helper.h-Funktionen fett/kursiv/etc. macht.

Beitragen UX
1

Vielleicht eine einfache Frage, aber sie hat mich kurz aufgehalten :sweat_smile:

Wie erreicht man das mit der Discourse helper.h-Funktion?

<div>
<p>Dieser Text <i>ist kursiv</i> </p>
</div>

Das Nächste, was ich erreicht habe, ist folgendes:

    html() {
      return [  h('div'),
                h('p', "Dieser Text" + h('i', "ist kursiv"))
             ]
    }

Das ergibt folgendes:
image

Ansonsten haben einige andere Varianten, die ich ausprobiert habe, entweder nur Dieser Text oder ist kursiv zurückgegeben, aber nicht beides :thinking:

Zum Beispiel dieses:

    html() {
      return [  h('div'),
                h('p', "Dieser Text", [h('i', "ist kursiv")])
             ]
    }

gibt nur ist kursiv zurück
image

Fast geschafft?
Das hier:

    html() {
      return [  h('div', ),
                h('p', [h('i', "ist kursiv"), "Dieser Text"])
             ]
    }

ergibt folgendes :sweat_smile:

image

2

Die Parameter der h-Funktion sind tagName, properties, children. Du kannst properties überspringen, wenn du möchtest, und einfach tagName, children verwenden. Children können entweder ein einzelner Knoten oder ein Array aus mehreren Knoten sein.

Ich denke also, du möchtest etwas wie folgendes:

h('div',   // <div>
  h('p', [   // <p>
    'Dieser Text ',
    h('i', 'ist kursiv')  // <i></i>
  ])  // </p>
);  // </div>
6 „Gefällt mir“
3

Danke, ich wusste nicht, dass ein einzelner Knoten auch einfacher Text sein kann. Das ist jetzt ziemlich mächtig.

Apropos: Hast du jemals darüber nachgedacht, einen einfachen Konverter von HTML zur h-Funktion einzuführen? Das würde die Entwicklung in vielen Fällen deutlich beschleunigen :slight_smile:

4

In einigen Fällen ist es möglich, eine Vorlage wie diese zu verwenden

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

5 „Gefällt mir“