helper.h 함수를 사용하여 문단 내 텍스트의 일부만 굵게/기울임/etc.로 만드는 방법?

기여 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>
    'This text ',
    h('i', 'is italic')  // <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개의 좋아요