«button» HTML5 태그가 에디터 미리보기에는 표시되지만 게시글에는 표시되지 않음

문제

게시글 내용을 저장한 후, 렌더링된 게시글에서 약 4ms 동안 렌더링이 되다가 로딩 원형이 2ms 동안 표시된 후 사라집니다:

해결책

미리보기에서 렌더링되는 것이 우연한 것이라면, 그리고 제가 알지 못하는 보안상의 우려로 인해 렌더링된 게시글에서 제거되는 것이 의도적인 것이라면, 적어도 <button>을 <button disabled>로 대체하는 것은 어떨까요?

튜토리얼 및 재현 단계에서 <code>와 <kbd>가 <button>이 의미론적으로 더 적합한데도 오용되는 경우가 자주 목격되기 때문에 질문드립니다.

1개의 좋아요

이것이 정확히 버그인지 확신할 수 없습니다. 혼란스러우신 점을 이해합니다.

HTML 태그와 속성/클래스 이름이 필터링되지 않도록 하려면, Discourse 코어 또는 플러그인에서 이를 명시적으로 허용해야 합니다.

예를 들어, 기본 허용 목록은 다음 위치에서 확인할 수 있습니다:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115

또한 미리보기에만 특정 태그를 허용하는 것도 가능합니다. 예를 들어, 이미지 컨트롤에는 여러 태그/클래스 이름/속성 조합이 있습니다.

https://github.com/discourse/discourse/discourse-markdown-it/src/features/image-controls.js#L198

여기서 허용된 태그의 부수적 효과(side effect)로 인해 미리보기에서 버튼이 표시되는 것을 볼 수 있습니다.
그러나 disabled 속성은 정의되어 있지 않으므로 무시됩니다.

https://github.com/discourse/discourse/discourse-markdown-it/src/features/image-controls.js#L223

허용 목록이 어떻게 파싱되는지는 확인해 보지 않았습니다. 이것이 의도된 동작인지 궁금합니다. :thinking:. 현재로서는 속성과 관계없이 태그가 허용되는 것처럼 보입니다. 만약 예를 들어 <button class="alt-text-edit-ok btn btn-primary">를 정확히 사용하지 않는 경우 버튼이 렌더링되지 않기를 기대했을 것입니다.

게시물 렌더링 시 <button>을 허용하는 플러그인을 만들 수 있습니다. 도움이 필요하시면 말씀해 주세요.

2개의 좋아요

@Arkshine, 감사합니다. 하지만 저는 인스턴스 운영자가 아닙니다. 콘텐츠를 작성하다가 이 문제를 발견했을 뿐입니다.

이것은 미리보기에서 HTML5와 CSS3 표현이 최종 렌더링 결과와 다른 경우가 많은 많은 사례 중 하나입니다. 이는 Discourse에서 콘텐츠를 작성하는 것을 어렵게 만듭니다. 특히 편집이 비활성화되었거나, 인스턴스 전체에서 매우 짧은 시간으로 제한된 경우 더욱 그러합니다.

1개의 좋아요

알겠습니다. 충분히 이해가 갑니다! 그 경험은 별로 좋지 않다는 데 동의합니다.

원하신다면, <button> 태그에 disabled 속성을 사용할 수 있도록 이 작은 플러그인을 만들었습니다: GitHub - Arkshine/discourse-markdown-allowlist · GitHub

불행히도 이 상황에서는 설정을 변경할 수 없으므로, 다른 태그를 추가하려면 제 저장소를 포크한 후 직접 여기에 추가해야 합니다.

3개의 좋아요

@Arkshine, 이건 업스트림으로 올릴 수 없나요? 제가 사용하는 모든 인스턴스에 영향을 미치기 때문에, 이렇게 사소한 문제를 해결하기 위해 모든 인스턴스에 패치를 적용하도록 요청하는 것은 현실적으로 불가능할 것 같습니다.

보통 이런 경우에는 관련 GitHub 저장소에서 이슈를 등록하지만, Discourse의 경우 이슈 섹션이 비활성화되어 있습니다.

여기서는 GitHub 대신 #contribute:feature를 사용해야 하나요? #contribute:bug는 이 경우에 해당하지 않으니까요.

@Jagster, 이 태그가 단순히 사용할 수 없는 상태라면 그렇게 했을 것입니다. 하지만 미리보기 기능이 미리보기 역할을 하지 못하는 것은 #contribute:bug입니다.

이를 기능 요청으로 분류하려면 제목을 어떻게 다시 작성해야 할까요?

1개의 좋아요

#contribute:feature는 누락된 기능에 대한 카테고리입니다. #contribute:bug는 오류를 위한 것이며, 이는 오류가 아닙니다.

GitHub의 이슈 섹션을 사용하는 것과 정확히 같은 방식으로 사용하면 어떨까요?

1개의 좋아요

미리보기와 렌더링된 게시물 간의 불일치를 Contribute > Bug 로 다루는 것이 합리적이라고 생각합니다.

해결책은 미리보기에서도 이를 차단하는 것이 될 가능성이 높으며, 이는 앞으로 "게시물에 <button> 지원을 추가"하는 것이 유효한 Contribute > Feature 요청이 될 수 있음을 의미합니다 :wink:

3개의 좋아요

맞습니다, @david. 이들을 분리했어야 했습니다:

죄송합니다, 그리고 감사합니다.

3개의 좋아요