안녕하세요 여러분!
이 글에서 다른 주제들을 언급할 예정이지만, 제가 설명할 문제는 다른 보고서에서 언급된 것보다 더 큰 문제라고 생각합니다.
제 테스트 환경
- OS: MacOS 15.6.1
- 브라우저: Google Chrome 139.0.7258.140 (공식 빌드) (arm64)
원래 관찰한 현상
작성 도구(composer)의 리치 텍스트 에디터가 코드 블록을 자주 깨뜨리는 것을 발견했습니다. 사용자들이 코드와 로그를 한 줄로 게시하기 시작했고, 처음에는 사용자가 작성 도구에 내용을 복사하는 과정에서 실수를 한 줄 알았습니다. 게시된 줄 사이에 공백 문자가 전혀 없었으며, 줄바꿈만 사라진 것이 아니었습니다.
가끔 사용자들은 YAML에서 들여쓰기를 잃어버린 여러 줄의 코드를 한 줄로 게시하기도 했고, 때로는 여러 줄의 코드가 한 줄로 하이라이트되기도 했으며, 때로는 코드 블록 안에 한 줄만 표시되기도 했습니다. 이 문제가 너무 자주 발생하여 어제 리치 텍스트 모드를 테스트해 보았지만, 보고는 보류했습니다. 오늘에는 해당 문제를 재현할 수 없었지만, 리치 텍스트 에디터에서 코드의 줄바꿈을 깨뜨리는 다른 방법을 발견했습니다.
그것이 버그인지 확신이 서지 않아, 버그가 수정되었는지 확인을 기다리며 우리 관리자들과만 문제를 논의했습니다. 그러다 보니 동일한 동작을 발견하지 못했지만, 모든 문제는 공백과 관련되어 있었습니다. 단, 다른 관리자가 언급한 문제는 재현할 수 없었는데, 이는 그가 코드 에디터나 터미널에서 텍스트를 복사한 반면, 저는 포럼의 이전 코드 블록에서 복사했기 때문에 공백 문제가 다르게 나타났기 때문이었습니다.
코드 블록에서 공백을 깨뜨리는 다양한 방법
첫 번째 방법
- 터미널에서 출력을 복사합니다.
- 리치 텍스트 모드에서 작성 도구에 출력을 다음과 같이 붙여넣습니다. (
runc명령어의 인자 없는 출력의 일부)
COMMANDS:
checkpoint checkpoint a running container
create create a container
delete delete any resources held by the container often used with detached
- 여러 줄의 출력을 볼 수 있지만, 들여쓰기는 제거됩니다.
- 이제 코드 블록이 필요하다는 것을 깨닫고, 텍스트를 선택한 후 코드 버튼을 클릭하여 코드 블록으로 만듭니다.
- 이제 코드가 조금 이상해 보입니다. 코드처럼 보이지만 코드 블록처럼 보이지는 않습니다. 마크다운으로 전환하여 그 이유를 확인하고, 이것이 보일 것입니다:
`COMMANDS:`
`checkpoint checkpoint a running container`
`create create a container`
`delete delete any resources held by the container often used with detached container`
- 위와 같이, 텍스트의 각 줄이 한 줄짜리 인라인 코드가 되었습니다.
(아래 관련 버그 보고서를 링크해 주신 @per1234 님께 감사드립니다: Rich Text editor in topics breaks white-space characters in multiple ways - #2 by per1234)
다른 주제나 같은 주제의 다른 게시물에서 코드를 복사하는 경우
발견한 기존 주제: `white-space` CSS property of clipboard data not respected when pasting in rich text editor
물론, 이는 Discourse에서 코드를 복사하는 올바른 방법이 아닙니다. 선택한 텍스트에 대해 일반적으로 코드 블록의 일부에도 작동하는 “인용” 버튼이 있고, 각 코드 블록의 구석에는 복사 버튼이 있기 때문입니다. 하지만 저는 이 방식으로 문제를 발견했으며, 복사 버튼도 작동하지 않았습니다.
- HTML 페이지에서 여러 줄의 코드를 복사합니다.
- 리치 텍스트 모드에서 작성 도구에 붙여넣습니다.
- 줄바꿈이 사라진 것을 확인합니다.
- 이 시점에서 HTML에서만 그런 것일 수 있으므로 코드 블록으로 만듭니다.
- 줄바꿈이 돌아오지 않습니다.
다른 게시물의 코드 블록 오른쪽 상단의 복사 버튼을 사용하는 경우
- 기존 코드 블록 위에 마우스 포인터를 올려놓습니다.
- 오른쪽 상단에 작은 “복사” 버튼이 나타나는 것을 확인합니다.
- 코드를 복사하기 위해 해당 버튼을 클릭합니다.
- 리치 텍스트 모드에서 작성 도구에 붙여넣습니다.
- 줄바꿈은 유지되지만, HTML에서 직접 복사했을 때와 동일한 방식으로 들여쓰기가 사라집니다.
- 코드 블록으로 만들면 들여쓰기가 없는 여러 개의 한 줄짜리 인라인 코드가 됩니다.
마크다운으로 전환할 때 발생했던, 아마도 수정된 문제
- 리치 텍스트 에디터에서 코드 블록을 작성합니다.
- 완벽하게 보이는 여러 줄의 코드 블록을 확인합니다.
- 마크다운으로 전환합니다.
- 코드 블록 대신 한 줄이 보인다는 것을 확인합니다.
- 더 이상 코드 블록이 아니라는 것을 알아차리며, 텍스트가 길다면 들여쓰기도 사라졌다는 것을 놓칠 수 있습니다.
- 코드 블록으로 만듭니다.
- 게시하면 줄바꿈이 완전히 제거되고 심지어 공백조차 남아있지 않은 한 줄만 포함된 코드 블록이 됩니다.
다시 말하지만, 이것은 오늘 재현할 수 없는 문제이며, 수정되었는지 확인하기 위해 릴리스 노트를 검색하지는 않았지만, 다른 주제에서 이 문제가 보고된 것을 찾지도 못했습니다.
결론
따라서 리치 텍스트 모드는 코드 블록과 관련하여 여러 가지 문제를 가지고 있는 것으로 보입니다. 사용자들이 게시물을 올바르게 포맷하지 않았다고 가정하는 경우가 많아 관리가 더 어려워지며, 따라서 포맷 가이드를 링크하지만 이는 리치 텍스트 모드에서는 작동하지 않습니다. 하지만 가이드는 수정할 수 있으므로 그것이 문제는 아닙니다. 문제는 사용자가 실제로 게시물을 포맷하려고 시도하지만 리치 텍스트 에디터 때문에 실패한다는 것입니다.
제가 처음 발견한 원래 문제는 이제 수정되었을 가능성이 높으므로, 일부 사용자가 리치 텍스트 에디터로 시작하여 만족하지 못하고 마크다운으로 전환한 후, 코드 블록이 깨진 것을 깨닫고 수정을 시도했지만 실패하여 모든 것을 다시 붙여넣지 않은 것 같습니다.
이 시점에서 리치 텍스트 에디터를 완전히 비활성화하는 방법에 대한 이 주제도 언급하겠습니다: How can i set disable Markdown & Default to Rich Text
어제 기존 보고서를 검색할 때 찾은 첫 번째 주제 중 하나였기 때문에 링크합니다. 그리고 저는 기본값을 마크다운으로 다시 변경했습니다. 이 부분에 대해 누군가가 반응하지 않도록 여기서 마무리하고, 다른 주제에 몇 가지 주석을 추가할 예정입니다.
P.S.: 이 게시물에 교정 기능을 사용했습니다. 정말 놀랍습니다!