새로운 작성기 소개: Discourse에서 글쓰기가 이제 더 쉬워졌습니다

올해의 주요 프로젝트 중 하나는 작성기(composer)를 위한 새로운 리치 텍스트 편집 모드를 개발하는 것이었습니다. 이를 통해 Discourse에서 글을 작성하는 경험이 더 익숙하고 직관적으로 느껴집니다. 새로운 작성기는 이미 Meta에서 사용 가능하며, 실험적 설정으로 제공되어 왔습니다. 이제 experimental(실험적) 라벨을 떼어내고 여러분의 커뮤니티에 이를 사용해 볼 것을 초대할 수 있는 단계에 이르렀습니다!

이 주제에서는 작성기에 대해 더 자세히 공유하고, 그 작동 원리, 그리고 몇 번의 클릭만으로 커뮤니티에서 이를 활성화하는 방법을 안내하겠습니다.

:writing_hand: Discourse를 위한 새로운 리치 텍스트 에디터

새로운 리치 텍스트 에디터는 Discourse 사용자의 글쓰기 경험을 단순화하며, 특히 기술에 익숙하지 않거나 Markdown으로 글을 작성하는 데 익숙하지 않거나 불편함을 느끼는 사용자들에게 유용합니다. 이 리치 텍스트 에디터는 Markdown을 지원할 뿐만 아니라, 일반적인 키보드 단축키와 툴바 서식 조정 기능을 제공합니다. 또한 서식이 즉시 렌더링되어 Google Docs나 Notion과 같은 친숙한 도구와 유사한 WYSIWYG(“What You See Is What You Get”, 보이는 그대로) 경험을 제공합니다.

:thought_balloon: Markdown의 미래

많은 Discourse 사용자가 현재 Markdown 작성기를 사랑하며, 예측 가능하고 단순한 글쓰기 경험을 즐기고 있다는 것을 알고 있습니다. 새로운 에디터는 기존 Markdown 모드와 나란히 존재하는 작성기 "모드"이므로, 사용자와 회원들은 자신에게 가장 적합한 글쓰기 스타일을 선택할 수 있습니다.

클래식한 Markdown 작성기에서 수행하던 대부분의 작업이 이제 리치 텍스트 에디터에서도 지원됩니다. 여기에는 다음이 포함됩니다:

  • Markdown(**굵게**), 일반적인 키보드 단축키(Command + B), 툴바 아이콘을 통해 지원되는 모든 기본 서식.

  • 표 만들기, 투표 만들기, 날짜/시간 삽입, 세부 정보 숨김 섹션 추가, 블러 스포일러 섹션 추가, 파일/이미지/비디오 업로드, 링크를 원박스(onebox)로 렌더링, 카테고리/태그/사용자 멘션 스타일링, 콘텐츠 인용, 각주 삽입 등 고급 기능 지원.

  • 링크 방문, 편집, 복사, 제목 설정 또는 삭제를 위한 전용 링크 UI

  • 이미지 크기 조정, 캡션 추가 또는 삭제를 위한 전용 이미지 UI

그러나 표와 투표 편집을 더 쉽게 만드는 것 등 아직 작업 중인 영역이 있습니다. 작성기 모드 간의 기능 동등성을 향해 계속 노력할 것이며, 여러분에게 가장 중요한 기능과 기능이 무엇인지에 대한 Contribute > Feature 요청을 공유해 주시면 업무 우선순위를 정하는 데 도움이 됩니다. 그 동안에는 고급 작업이 필요할 때 언제든 Markdown 모드로 다시 전환할 수 있습니다.

:hammer: 우리는 어떻게 만들었는가

우리의 구현은 훌륭한 ProseMirror와 그 비코어(non-core) Markdown 모듈을 기반으로 하며, 해당 모듈의 스키마, 파싱 및 직렬화 정의를 기반으로 Discourse 고유 기능을 추가로 개발했습니다.

:gear: 새로운 작성기 활성화하기

리치 에디터는 모든 커뮤니티에서 기본적으로 활성화되어 있습니다. 귀하나 회원들이 작성기를 열면 툴바에 토글 스위치를 확인할 수 있습니다. 이를 통해 클래식한 Markdown 전용 모드와 새로운 리치 텍스트 에디터 간을 전환할 수 있습니다.

CleanShot 2025-06-11 at 15.45.35


업데이트: 회원들에게 기본적으로 Markdown 작성기를 표시하기를 선호하는 경우:

45개의 좋아요

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.

3개의 좋아요

Is there a setting for which editor is default after that? Thanks.

4개의 좋아요

Not yet, but we plan to add one.

12개의 좋아요

When you press the “text size” button (which doesn’t appear to be here on this site but it’s on mine) you get this error

I also don’t see the “image UI” in the post?

I’ve been anxiously waiting for the image scaling option and I love the simplicity of this!

8개의 좋아요

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

3개의 좋아요

I think this may be the official bbcode plugin, I remember it had all sorts of stuff in it like color support and size

4개의 좋아요

My suggestions:

  1. 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.
  2. 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?
  3. 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.

4개의 좋아요

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.


`
2개의 좋아요

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.
---
2개의 좋아요

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:

However either using the new one by default or changing it during composing a reply, the cursor jumps automatically to the end of the quoted text:

If you type anything it counts towards the quote and trying to reply, the post error appears:

If this by default we can let our users know, just wanted to be sure if it’s the new behaviour when quoting users with the new editor.

Thanks.

1개의 좋아요

It’s not intentional, we have an internal task to improve this behavior in particular very soon.

3개의 좋아요

Hello :waving_hand: Thanks, this is pretty cool :heart_eyes:

I’ve noticed that it didn’t support the wrap [wrap]Hello[/wrap] yet and I’ve got this message when try to use it.

Token type wrap_open not supported by Markdown parser

2개의 좋아요

I don’t think there is a plan for supporting a generic “wrap” node at least for now, what would that look like? Just a div?

Or is there a [wrap=something] you’re expecting to use with the new composer?

2개의 좋아요

where did you see this error message? My instance just drops the BBcode



becomes


Hello

We use some theme component like Discourse Icon and Discourse Stickers.

I think, I can make the sticker component without wrap because that is just for target and add some style to the sticker.

Paste it to the Rich Text Editor side or switch from Markdown side if you pasted there.

2개의 좋아요

i don’t get the error, but the BBcode stays there. There’s no preview on desktop, when the rich text editor is selected



that was on Discourse commit hash latest-release +269

and

BBcode commit hash 1fbff6b1

This is working as intended, typed BBCode is intentionally escaped (= shown as text) if they’re not recognized/implemented yet, which is the case.

Would this work for you:

.d-editor-container .d-editor-textarea-wrapper textarea.d-editor-input {
    font-family: var(--font-family);
}

3개의 좋아요