새로운 작곡가(Composer)를 사용해 보세요!

Discourse에서 글을 쓰기가 더 쉬워지도록 새로운 리치 텍스트 에디터 모드를 개발해 왔습니다. 이제 커뮤니티에서 이 기능에 대한 더 많은 피드백을 받기 위해 테스트를 시작할 준비가 되었습니다!

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

이 토픽은 새로운 컴포저 테스트 가이드이자 피드백을 추적하는 허브 역할을 하게 됩니다. 미리 도움을 주셔서 감사합니다! :sparkling_heart:

:gear: 커뮤니티에서 새 컴포저 사용

현재 컴포저는 여전히 실험 단계로 간주되고 있습니다 하지만 rich editor 설정을 활성화하여 커뮤니티에서 사용 시작할 수 있습니다:

:writing_hand: 새 컴포저 알아보기

새 컴포저는 글쓰기 경험을 단순화하는 리치 텍스트 에디터로, 특히 Markdown에 익숙하지 않은 비기술 사용자를 위해 설계되었습니다. 이 에디터는 여전히 Markdown을 지원하지만, 포맷팅이 즉시 렌더링되어 WYSIWYG(What You See Is What You Get) 경험을 제공하며, Notion이나 Google Docs와 같은 다른 현대적인 웹 작성 도구와 유사한 느낌을 줍니다.

새 컴포저에 액세스하려면 툴바의 토글 버튼을 클릭하세요. 이를 통해 현재 Markdown 전용 모드에서 새로운 리치 텍스트 에디터로 전환할 수 있습니다. 필요할 경우 토글 버튼을 다시 클릭하여 원래 모드로 되돌릴 수 있습니다.

toggle

오늘 테스트하는 것은 새 컴포저의 첫 번째 버전입니다. 아직 현재 Markdown 전용 컴포저의 완전한 대체재로 의도되지 않았습니다. 우리는 먼저 대부분의 사용자 요구를 충족할 수 있는 기본 기능에 집중했습니다.

새 컴포저에서 현재 가능한 것과 아직 준비되지 않은 것을 이해하기 위해 아래 섹션을 검토해 주세요. 지원 범위가 확장되는 대로 이 부분들을 업데이트할 예정입니다!

:green_circle: 지원되는 기능

새 컴포저에서 다음 기능이 지원됩니다:

  • 제목 추가 및 카테고리, 태그 설정
  • 리치 텍스트 에디터 모드일 때의 단일 창 에디터(예: 미리보기 창 없음)
  • Markdown 전용 모드와 리치 텍스트 에디터 모드 간 전환 토글
  • 기본 포맷팅 [1] Markdown, 키보드 단축키, 툴바 아이콘으로 지원
  • 이모지 지원
  • 일반 텍스트 붙여넣기 시 Markdown을 리치 텍스트로 자동 변환(예: **굵게**굵게)
  • 이모티콘 자동 변환(예: :) → :))
  • 추가된 이미지의 크기 조절, 캡션, 그리드 레이아웃을 위한 이미지 UI
  • 추가된 링크의 방문, 편집, 복사, 삭제 및 제목 변경을 위한 링크 UI
  • 테이블 빌더 UI
  • 투표 빌더 UI
  • 각주
  • 멘션 및 해시태그 지원
  • 인라인 HTML <태그> [2]
  • 타이포그래퍼 대체(예: ™ , → , ± )
  • 이미지 업로드
  • 파일 첨부
  • 토픽 및 채팅 인용
  • 세부 내용 숨기기 (Hide Details)
  • 블러 스포일러 (제한 사항 있음, 누락된 기능 섹션 참조)
  • 원박스(Oneboxes)
  • 수평선 자동 변환(즉, --- 입력 시 수평선으로 변환)

:red_circle: 누락된 기능

새 컴포저에서 현재 누락되었거나 아직 완전히 지원되지 않는 것으로 알려진 기능:

  • 테이블 생성 후 열 또는 행을 추가하거나 제거하기 위한 테이블 UI
  • 이전에 생성된 투표를 편집하기 위한 투표 UI
  • 헤딩을 추가하기 위한 툴바 지원
  • 기존 텍스트에 블러 추가, 인라인 블러 지원, 블러 제거 용이성을 위한 개선된 블러 스포일러 지원
  • 지원되는 기능 섹션에 명시되지 않은 기타 항목(예: Mermaid 다이어그램 지원)

:mega: 테스트 및 피드백 공유

테스트 중 컴포저가 예상대로 작동하지 않는 문제를 겪을 수 있습니다. 그런 경우 반드시 알려주세요! 여러분의 피드백은 새 컴포저를 개선하여 커뮤니티에서 사용할 수 있는 상태로 만드는 데 매우 소중한 자산입니다.

구체적인 재현 단계, 브라우저/디바이스 정보, 관련 스크린샷이나 녹화 파일을 제공해 주세요! 아래 알려진 이슈 트래커를 확인하여 이미 누군가가 보고한 내용인지 살펴볼 수도 있습니다. 문제를 식별하고 수정하는 대로 이 섹션들을 최신 상태로 유지할 것입니다.

새 컴포저 사용 중 문제가 발생하면 토글을 사용하여 언제든지 Markdown 전용 모드로 되돌아갈 수 있다는 점을 기억하세요.

:bug: 버그

  • Firefox에서 멘션이 게시글의 시작 부분에 있을 때 커서를 멘션 앞에 위치시킬 수 없어 보이는 문제(실제로는 가능하지만 시각적으로 명확하지 않음)

:art: UX 문제

  • 예상치 못한 스타일링을 방지하기 위해 링크의 일부 포맷팅 방지
  • 카테고리, 태그, 채팅 채널 해시태그에 대한 예상되는 시각적 렌더링/검증 적용
  • 사용자 및 그룹 멘션에 대한 예상되는 시각적 렌더링/검증 적용
  • 인용문으로 게시글을 시작하거나 인용문을 복사/붙여넣을 때 커서가 인용문 내부(아래 행 대신)에 포커스되는 문제

:wrench: 개발 개선 사항

  • 인라인 HTML 파싱 개선(예: <a>)

  1. 굵게, 기울임, 밑줄(툴바 지원 없음), 취소선(Markdown 전용 ~~), 링크, 인용문, 코드, 체크박스(Markdown 전용 ; 툴바 지원 예정), 불릿 목록, 번호 목록 ↩︎

  2. 일부는 가장 가까운 Markdown으로 변환됨(예: s, strike, strong, b, em, i, code; u는 실제 밑줄로 쿡되지 않아 명시적으로 지원되지 않음); 나머지는 “html_inline” 노드로 허용됨(예: kbd, sup, sub, small, big, del, ins, mark) ↩︎

71개의 좋아요

Looking good!

There are some issues with spoiler tags:

  1. If you highlight some text and choose “Blur Spoiler”, it replaces the text with “This text will be blurred”, losing what you highlighted

  2. Inline spoilers aren’t working, it puts them on a new line

  3. No way to toggle a spoiler off again

11개의 좋아요

Thanks Shaun, noted that in the OP that we have more work to do on spoilers.

9개의 좋아요

I was waiting for this feature and it’s awesome Discourse finally made this step :clap:

Only 1 thing for now: it looks bizarre to have such a narrow textarea to write our post.

Obviously I was very much used to the side-to-side view of the composer and preview, but this now looks… Weird. Maybe I just need time tho. Yeah, probably. :smile:

18개의 좋아요

Fantastic progress! :heart:

The second thing I noticed is that the current style doesn’t visually toggle on (and off) in the tool bar even though it remains in effect. It would be really nice if the current style was highlighted until toggled off.

That is all for now!

(Basing my feedback from grey amber theme)

15개의 좋아요

These are good call outs — right now, we’ve been focused primarily on the editor itself (where you actually type), but we do have planned improvements to the composer container and toolbar which should address these issues.

10개의 좋아요

A bit of a strange defect but when the composer is open this happens to the reply indicator.

Illl fully test when I’m on desktop later but it looks promising.

4개의 좋아요

Finally here! :heart_eyes: That’s a lot of work unfolded; fantastic job! That will be a significant pro for users who are uncomfortable with Markdown.

Edgy upload issue:

If you’re uploading an image and switch to markdown, the upload markdown is not here and throws an error:
image

Reversely, uploading from markdown, then switching to the new editor doesn’t error, but the image doesn’t appear.

12개의 좋아요

I wonder if we should just block switching until the upload is done… we can potentially convert placeholders between editors, but it doesn’t seem that useful.

11개의 좋아요

Yes, my thoughts are the same. Blocking sounds like a good idea!
When uploading a big image with a slow connection, I could not help but test the switch until it’s done. :grinning_face_with_smiling_eyes:

11개의 좋아요

New design looks great. I love how Discourse iterates over time, tries new ideas and involves the community.

Some subjective observations, if you’re looking for feedback:

  • The alignment button (left/right) is an unconventional icon, and a feature that seems very niche. Since the icons wrap onto two lines on mobile, I would simply remove this feature. Likewise, the “insert date” feature is advanced/niche and could be hidden within the :gear: menu. That way the remaining icons would all fit on a single line
  • The video upload feature was confusing for me, even as a technical user. What would I supply in the “video source” box? Also, the buttons get a bit jumbled visually (see below)
  • The “M” button (switching between raw text and preview) doesn’t reveal its purpose until you click it. There’s some spare space on the bottom of the composer between the :wastebasket: and GIF buttons and I think a preview button would make more sense down here. And you’d have room for the word “preview”

8개의 좋아요

These are features we’ve enabled on meta at some point, probably for an experiment. They are not available by default and we could turn them off or stick them behind the :gear:

I agree with this. Not sure why we always include this so prominently in the menu. I use it all the time myself but I also frequently use alot of features behind the :gear: menu too!

Agree that at least mouseover helper text would help with discoverability here.

Down the road I suspect we’ll want to default to the new composer and make switching to markdown the power move, which power users will then know or be able to discover.

9개의 좋아요

:megaphone: 이 메뉴 항목들은 새 컴포저와 직접적인 관련이 없으므로 여기서는 집중할 필요가 없습니다. 메뉴 항목에 대해 더 많은 피드백이 있다면, 새로운 Contribute > Feature 주제를 시작하거나 검색을 이용해 보세요.

그럼에도 불구하고:

  • 메타에서는 Insert Video 테마 컴포넌트를 통해 제공되는 “동영상 삽입” 버튼을 제거했습니다.

  • “방향 전환” 버튼은 support mixed text direction 사이트 설정에 의존합니다. 현재 다국어 기능을 능동적으로 테스트하고 있으므로 메타에서는 이 설정을 활성화된 상태로 유지할 것입니다.

  • 메타에서는 GIF와 Ask AI도 있으며, 이들에 대한 접근성을 높이고 싶습니다.

6개의 좋아요

Congrats team! I did notice a discrepancy around oneboxing. Pasting a url from the browser generates a onebox, but typing it out does not. Until you swap back to see the markdown preview which triggers it to generate.

test: Pasting from browser bar here: https://google.com/ Typing here: https://google.com

6개의 좋아요

Pressing Return in the new WYSIWYG composer creates a double-line break (a paragraph break). I don’t like it (though I guess this is subjective), but I especially don’t like it for bulleted/numbered lists, where there’s a ton of space between list items.

  • this

  • is

  • too

  • much

13개의 좋아요

You can do shift + enter to avoid the double-line break, though it doesn’t work for lists.
I agree this behavior change should not be the default.

7개의 좋아요

Great work, this is a step in the right direction! However, I still have some basic UX issues which I wish were solved, but I’ll get into that later.

The good:
I love the new single-editor mode, it’s really cool and inline images in the composer work great.
Even though this is a preview it still works as I would expect, I haven’t noticed anything missing personally (besides --- which i use a lot)

The bad:
Buttons being all over the place here is confusing, there should be one place for all of them. Replace the double down arrow icon with an X. Also, instead of << possibly it could just be Y axis draggable so we can control its size isnstsd if just one or closed?

I still really dislike the row of icons at the top and the “more” gear menu, it’s cluttered and confusing to use. I remember there being a topic on it to some degree but I cannot find it.

On my work computer (windows firefox) the markdown button is offset.

image

Still great I just wish these were fixed :+1:

Added to our :art: UX issues secton in OP to fix.

This is a known missing feature and something we intend to add support for:

We are planning improvements to the composer container and toolbar, but right now the changes are limited to the editor itself. We can keep this in mind for those future changes though.

I can’t tell from this description or screenshot what’s gone wrong here exactly — could you share a few more details so I can take a look?

5개의 좋아요

Could just be visual but at least to me it looks like it is too far up by a little bit.

1개의 좋아요