리치 에디터에서 <span data-attribute> 지원

한 줄에서 일부 텍스트를 선택한 뒤 composer 버튼으로 감싸기(wrap)를 적용하면 인라인 감싸기가 적용됩니다. 이 방법은 동작은 하지만, 선택된 텍스트의 마지막 글자가 일부 잘리는 문제가 있습니다:

image

인라인 감싸기를 만드는 방법 중 하나이며, 같은 줄에 다른 콘텐츠가 없으면 자동으로 블록 감싸기로 변환됩니다.

다른 방법은 <span data-attribute>인데, 리치 에디터에서는 지원되지 않습니다(data-attribute가 제거됨). 하지만 마크다운 에디터에서는 완전히 지원됩니다. 흥미롭게도, 이 허용 구문은 discourse/frontend/pretty-text/addon/allow-lister.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub 에 나열되어 있지 않고, 대신 discourse/frontend/discourse-markdown-it/src/features/d-wrap.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub 에 있습니다 :slight_smile:

<span data-attribute>는 메타(meta)에 문서화되어 있으며, 제 포럼 밖에서도 실제 사용되고 있을 가능성이 높습니다. 같은 줄에 다른 콘텐츠가 없더라도 블록 요소로 변환되지 않는다는 장점이 있습니다.

이런 식으로 한 줄에 단독으로 있는 일반 감싸기:

[wrap="fish"]text[/wrap]

블록으로 렌더링됩니다:

<div class="d-wrap" data-wrap="fish">
<p>text</p>
</div>

제 지식 범위 내에서 이 동작을 피하는 유일한 방법들은 다음과 같습니다:

  • <span data-attribute> 사용:

    <span data-fish>text</span>
    

    다음과 같이 렌더링됩니다:

    <span data-fish="">text</span>
    
  • 줄의 시작이나 끝에 공백이 제거되지 않는(가장 이상적으로는 제로-폭) 공백, 예: &ZeroWidthSpace;을 추가합니다.

    &ZeroWidthSpace;[wrap=fish]Fishyfishy[/wrap]
    

    다음과 같이 렌더링됩니다:

    &ZeroWidthSpace;<span class="d-wrap" data-wrap="fish">Fishyfishy</span>
    

후자는 다소 해킹(hacky)적인 방법입니다.

저는 리치 에디터에서 첫 번째 해결책을 사용할 수 있기를 선호합니다. 더 일반적으로, 인라인 감싸기를 쉽게 만들 수 있는 어떤 방법도 좋겠습니다.