올해의 주요 프로젝트 중 하나는 작성기(composer)를 위한 새로운 리치 텍스트 편집 모드를 개발하는 것이었습니다. 이를 통해 Discourse에서 글을 작성하는 경험이 더 익숙하고 직관적으로 느껴집니다. 새로운 작성기는 이미 Meta에서 사용 가능하며, 실험적 설정으로 제공되어 왔습니다. 이제 experimental(실험적) 라벨을 떼어내고 여러분의 커뮤니티에 이를 사용해 볼 것을 초대할 수 있는 단계에 이르렀습니다!
이 주제에서는 작성기에 대해 더 자세히 공유하고, 그 작동 원리, 그리고 몇 번의 클릭만으로 커뮤니티에서 이를 활성화하는 방법을 안내하겠습니다.
Discourse를 위한 새로운 리치 텍스트 에디터
새로운 리치 텍스트 에디터는 Discourse 사용자의 글쓰기 경험을 단순화하며, 특히 기술에 익숙하지 않거나 Markdown으로 글을 작성하는 데 익숙하지 않거나 불편함을 느끼는 사용자들에게 유용합니다. 이 리치 텍스트 에디터는 Markdown을 지원할 뿐만 아니라, 일반적인 키보드 단축키와 툴바 서식 조정 기능을 제공합니다. 또한 서식이 즉시 렌더링되어 Google Docs나 Notion과 같은 친숙한 도구와 유사한 WYSIWYG(“What You See Is What You Get”, 보이는 그대로) 경험을 제공합니다.
Markdown의 미래
많은 Discourse 사용자가 현재 Markdown 작성기를 사랑하며, 예측 가능하고 단순한 글쓰기 경험을 즐기고 있다는 것을 알고 있습니다. 새로운 에디터는 기존 Markdown 모드와 나란히 존재하는 작성기 "모드"이므로, 사용자와 회원들은 자신에게 가장 적합한 글쓰기 스타일을 선택할 수 있습니다.
클래식한 Markdown 작성기에서 수행하던 대부분의 작업이 이제 리치 텍스트 에디터에서도 지원됩니다. 여기에는 다음이 포함됩니다:
Markdown(**굵게**), 일반적인 키보드 단축키(Command + B), 툴바 아이콘을 통해 지원되는 모든 기본 서식.
그러나 표와 투표 편집을 더 쉽게 만드는 것 등 아직 작업 중인 영역이 있습니다. 작성기 모드 간의 기능 동등성을 향해 계속 노력할 것이며, 여러분에게 가장 중요한 기능과 기능이 무엇인지에 대한 Contribute > Feature 요청을 공유해 주시면 업무 우선순위를 정하는 데 도움이 됩니다. 그 동안에는 고급 작업이 필요할 때 언제든 Markdown 모드로 다시 전환할 수 있습니다.
우리는 어떻게 만들었는가
우리의 구현은 훌륭한 ProseMirror와 그 비코어(non-core) Markdown 모듈을 기반으로 하며, 해당 모듈의 스키마, 파싱 및 직렬화 정의를 기반으로 Discourse 고유 기능을 추가로 개발했습니다.
새로운 작성기 활성화하기
리치 에디터는 모든 커뮤니티에서 기본적으로 활성화되어 있습니다. 귀하나 회원들이 작성기를 열면 툴바에 토글 스위치를 확인할 수 있습니다. 이를 통해 클래식한 Markdown 전용 모드와 새로운 리치 텍스트 에디터 간을 전환할 수 있습니다.
Great news. Is there a feature on the roadmap that is already present in all rich editors? Colored text? Since markdown does not support colored text, this can be achieved using CSS add-ons. Alternatively, there may be other options that we are unaware of.
it’s a customization that would need to be updated to be compatible with the new editor, perhaps you’re using a theme component like Composer Button Bonanza ? (there are likely others)
have you updated Discourse recently? if so, you have to click on the image in the composer to see it
I like writing with markdown (maybe I just got used to it?), but when I use the markdown version, I’m not a fan of the new monospace font, so for me, it doesn’t make sense to include the rich editor in my community (since I will probably be the one who writes the most). That being said, this could be a setting a user could enable/disable. For example, if I disable it, I always get just the markdown version, so I keep the “normal” font (not the monospace). If I enable it, then I get what has been implemented. As an admin I can enable it for the community, but each user could enable/disable. Either that, or each user could decide what font to use in the markdown version.
I find it a bit distracting that when rich editor is enabled, the whole composer is resized and moved. Especially if I’m going to be using both versions interchangeably (I know I will), having the window resizing whenever I click the toggle, feels distracting to me. I understand that with the rich editor we don’t need the extra right preview pane, but still… maybe that space could be used for something else?
This is just a minor detail, but if the resizing will stay, it just feels weird that the composer is align to the middle of the page, but compared to the area of the topic, is not aligned and so it feels off to my eyes:
I’m still not convinced I will use this feature, to be honest. I can see how it can eventually be useful, but at the moment I always have that “itchy” feeling whenever I think of using it.
A user tried out some html code and it was not rendered in WYSIWYG mode - all that happened is that the html text was put in a box. When you switch back to markdown, you see the correct result in the preview panel. Is it supposed to show the results of the html or do you need to flip back to markdown for a preview? e.g.
Wiki article under construction
Please allow the creator to work on this as they are able. You are free to offer help or advice by replying, but please do not edit it without permission.
That’s intentional, complex HTML support is only done via the “passthrough” HTML block, as you saw. Writing HTML, although partially supported in elements like <kbd>, is not expected to be fully supported in the new editor in a visual way, hence the HTML editor.
That said, if we consider this HTML.
<hr>
<H2 style="color:red;">Wiki article under construction</h2>
<p> Please allow the creator to work on this as they are able. You are free to offer help or advice by replying, but please do not edit it without permission.</p>
<hr>
The style gets stripped by the sanitizer, why not write it like this:
---
## Wiki article under construction
Please allow the creator to work on this as they are able. You are free to offer help or advice by replying, but please do not edit it without permission.
---
Have been testing the new composer on our forum and really like it, but during testing have come across a strange behaviour I don’t know is intended or not.
When quoting someone using the old editor, the layout is fine and cursor appears under the quote: