노션 스타일 에디터

여러분 안녕하세요,

Discourse를 계속 익히고 사용하면서, 지난 수년간 사용해 본 포럼 소프트웨어 중 에디터가 단연 내 최애라는 사실을 깨달았습니다. 다만, 제 추천은 "/"를 입력하면 빠른 단축키가 나타나는 블록 기반 에디터입니다. 예를 들어 Notion이 있고, 또 다른 예로는 TipTap 에디터가 있습니다.

여기에는 데스크톱용 오픈소스 마크다운 에디터 중 제가 가장 좋아하는 Marktext의 스크린샷을 첨부했습니다:

많은 마크다운 에디터가 블록 단축키 방향으로 나아가고 있으며, Discourse 역시 형태와 기능 양면에서 이러한 개념의 이점을 얻을 수 있다고 생각합니다.

13개의 좋아요

이걸 완벽하게 동작하게 만드는 데는 상당한 작업이 필요할 것 같습니다.

간접적으로 관련이 있지만, 얼마 전 생성되어 논의되었던 WYSIWYG 에디터 플러그인이 현재는 작동하지 않습니다:

3개의 좋아요

네, 이 글을 올리기 전에 해당 내용을 확인해 봤고, 정식 요청으로 남기고 싶어서요.

@sam 님이 2022년 10월 기준으로 사실상 계획(Plans™)이 진행 중이라고 언급하신 것을 확인했습니다.

3개의 좋아요

우연히 노션(Notion)과 유사한 명령어를 지원하는 오픈소스 라이브러리를 발견했습니다. Discourse에 통합하기가 얼마나 쉬운지는 확신할 수 없지만, 혹시 다른 분들에게 영감이 될 수 있을까 해서 공유합니다:

6개의 좋아요

이것은 https://tiptap.dev/ 기반으로 만들어져 보이는데, 비공개인가요?

1개의 좋아요

제가 아는 한, Tiptap은 오픈소스입니다:

3개의 좋아요

아, 그렇군요. 프로 확장 기능은 유료로 제공되네요.

여기서 가장 까다로운 부분은 마크다운과 HTML 간의 양방향 브리징입니다. 이 분야의 실험에서는 마크다운을 포기하는 것은 피하고 싶습니다.

5개의 좋아요

TipTap는 ProseMirror를 감싸는 래퍼입니다: https://prosemirror.net/.

2개의 좋아요

동의합니다.

저는 주로 예시로 링크를 달았을 뿐입니다. 이 분야에서 실험을 해볼 가치가 있다고 생각하지만, 특히 마크다운과 HTML 간의 브리징을 포기하지 않는 것이 목표 중 하나인 점을 고려할 때, 기술적인 측면에서 이것이 어떻게 작동할 수 있는지는 아직 확신이 서지 않습니다.

2023년 7월에 이 주제를 만들었을 때와 마찬가지로, 여전히 긍정적인 시각을 유지하고 있습니다. 글쓰기가 포함된 앱을 사용할 때 거의 모든 앱에 유사한 기능이 탑재되어 있기 때문입니다.

앞으로 몇 주 동안 더 깊이 생각해 보고, 생각이 나면 다시 게시하겠습니다.

최소한, 디스코스가 가치 있다고 판단하는 포맷팅 삽입을 위한 시ーム리스한 선택 팔레트를 불러오는 키보드 방식, 예를 들어 “/” 또는 다른 지정된 기호를 입력하는 방식이 포함되어야 합니다. 노션, 티타입(tiptap) 등이 그러하듯 말이죠.

1개의 좋아요

ProseMirror가 Discourse(https://discuss.prosemirror.net/)를 사용하는 것 같으니, 관련해서 몇 가지 생각을 가지고 있을 수도 있겠네요. 또한 마크다운 통합 기능도 있다는 것을 확인했지만, Sam이 언급한 내용과 이 중 어떤 것이 일치하는지는 알 수 없습니다. 더 자세히 조사해 보시는 분들을 위해 참고용으로 공유합니다.

3개의 좋아요

이 프로젝트의 제작자는 메타(Meta)에도 계정이 있습니다. 여기서 직접 언급하지는 않겠지만, 그는 훌륭한 자바스크립트 책의 저자입니다: https://eloquentjavascript.net/.

제 지식范围内으로는, 현재 디스코르스(Discourse) 편집기를 prosemirror 기반의 것으로 전환하는 것은 정말 복잡한 작업이 될 것입니다.

2개의 좋아요

이 주제에 대해 제가 제안한 것은 tiptap을 정확히 사용하라는 것이 아니라, 이를 예시로 든 것입니다. 제가 추천하는 것은 블록 편집 경험입니다.

2개의 좋아요

이 편집기는 기본적으로 마크다운 ↔ HTML 변환을 지원하는 것 같습니다:

2개의 좋아요

@thoka 주신 링크로 테스트해 보았습니다. 정말 잘 작동합니다. 이 편집기가 discourse에서 볼 수 있길 바랍니다. 앞으로 이런 변화가 있기를 희망합니다.

음. 처음에는 잘 작동하는 것 같습니다.
적합한 에디터는 어떤 디스코urse 마크다운 → HTML/에디터 상태 → 마크다운으로든 손실 없는 왕복 변환을 최소한 지원해야 합니다.

링크된 데모는 예를 들어 정렬된 테이블에서 실패합니다.

3개의 좋아요

테이블에서는 아직 시도해 보지 않았습니다. 개발이 계속된다면 이 문제도 수정할 수 있습니다.

Meta의 Lexical 에디터를 살펴볼 가치가 있을 수 있습니다: Introduction | Lexical. 양방향 마크다운에서 HTML로의 브리징을 지원합니다: @lexical/markdown | Lexical.

문서에서 시작할 수 있는 자료를 많이 찾지는 못했지만, 적어도 React 앱 컨텍스트에서는 Lexical Playground 코드를 역추적하는 것이 도움이 됩니다.

8개의 좋아요

그렇습니다. @renato가 이걸로 좀 실험을 해봤는데, 거대한 프로젝트이지만 우리가 매우 관심 있게 탐구해 보고 싶은 분야입니다.

8개의 좋아요

현재 Discourse는 마크다운, bbcode 및 HTML을 혼합하여 기본 데이터 형식으로 사용하고 있습니다. 더 통합된 형식으로 전환할 계획이 있습니까?

실험에 관해: 시각적 편집기는 적어도 멱등성(로드, 편집하지 않음, 저장 시 소스에 변경 사항이 없음)과 지역적 포함(편집이 수행된 위치에서만 소스가 변경됨)을 가져야 한다는 것이 일반적인 상식입니까?

3개의 좋아요

Invision이 TipTap를 새로운 에디터로 발표했습니다:

https://invisioncommunity.com/news/invision-community/invision-community-5-the-all-new-editor-r1301/

3개의 좋아요