기본 게시글 편집기의 textarea를 마크다운 문법 하이라이터로 교체하는 것이 어려울까요?
아니면 어디선가 해당 옵션을 놓치고 있는 걸까요?
관리자 스타일 편집기에서 CSS에 대해 이미 훌륭하게 구현해 두셨잖아요:
기본 게시글 편집기의 textarea를 마크다운 문법 하이라이터로 교체하는 것이 어려울까요?
아니면 어디선가 해당 옵션을 놓치고 있는 걸까요?
관리자 스타일 편집기에서 CSS에 대해 이미 훌륭하게 구현해 두셨잖아요:
흥미로운 아이디어네요. 목표는 텍스트 영역(즉, 작성 화면의 왼쪽 부분)에서 문법 하이라이팅을 지원해서 마크다운 문법 실수를 바로 확인할 수 있도록 하는 것입니다. 네, 코드 블록은 미리보기에서도 같은 방식으로 동작하지만, 예를 들어 마크다운 실수는 볼 수 없거든요. 그리고 복잡한 마크다운을 작성할 때, 표나 업로드, 링크, 제목이 많이 포함된 게시글 같은 경우 더 쉽게 살펴볼 수 있을 것입니다.
다만, 이게 쉽지는 않을 것 같습니다. 저희 관리 화면에서는 ACE 에디터를 사용하고 있는데, 게시글 작성기에 그대로 끌어다 쓸 수 있을지 의문입니다.
네, 바로 제 사용 사례입니다.
문법에 대해 매우 직접적인 피드백을 제공합니다: 자잘한 문법 실수를 하고 있지는 않은지 확인하려고 오른쪽 패널을 매 순간 확인해야 할 필요가 없습니다.
Markdown에 익숙하지 않은 사용자(초보자를 포함)에게 조금 더 구조를 부여해 줄 것입니다.
물론 여전히 작성 창 오른쪽에 렌더링된 HTML이 표시됩니다.
특히 이것이 옵션이라면, 즉각적인 단점은 없을 것으로 생각합니다.
P.S.: 코드 블록에 마크다운 문법 하이라이터가 설치되어 있지조차 않은 것 같습니다
:
# Markdown codeblock's syntax...
... unfortunately ...
- isn't
- highlighted
**at all**!
2시간 후 수정: @pmusaraj 님이 수정했습니다
오, 잘 지적하셨네요! 마크다운 하이라이터에 대한 스타일이 몇 가지 빠져 있는 것 같아요.
단순히 마크다운을 편집하기 위해 풀블로우 에디터를 사용하는 것은 과한 것 아닌가요?
개인적으로, OP의 필요에 더 부합하는 것은 마크다운의 반 WYSIWYG 에디터라고 생각합니다. 예를 들어 https://ui.toast.com/tui-editor, Playground | Milkdown 등이 있죠.
그 두 개 모두 훌륭해 보입니다!
다만, 오른쪽에 미리보기가 이미 제공되고 있으므로 편집기가 좀 더 ‘수중 화면’[1] 같은 느낌을 줘도 괜찮다면, 더 단순한 Milkdown이 더 적합할 수 있다고 생각합니다.
네, WordPerfect를 생생하게 기억합니다
↩︎
네, ACE, TUI, Milkdown 중 어느 것을 선택하든 아주 큰 변화가 될 거예요. 이 셋 다 textarea를 contenteditable로 대체해야 하거든요. 확실히 실험해볼 만한 가치가 있지만, 코어 레벨에서는 큰 프로젝트가 될 거예요.
누락된 마크다운 하이라이팅을 수정한 PR이 올라갔습니다: UX: Update highlight.js styles - Pull Request #23999 - discourse/discourse - GitHub
보충 설명을 하자면, 우선 이 부분은 코어가 반드시 지원해야 한다고 강력히 원하고 있으며, 복잡성에 대해서도 자세히 짚어볼 가치가 있습니다.
Discourse 코어는 TEXTAREA에 대해 수많은 API를 직접 사용합니다. @mentions, 툴바를 통한 텍스트AREA 삽입, 업로드, 이미지 잘라내기 및 붙여넣기 등 다양한 기능이 해당됩니다.
이 모든 기능은 추상화되어 있지 않으며, TEXTAREA와 상호작용한다고 전제하고 있습니다. 여기에 contenteditable을 직접 추가한다면, TEXTAREA를 정확하고 정밀하게 시뮬레이션해야 하는데, 이는 실패할 가능성이 높습니다. 따라서 요소를 교체할 수 있는某种의 프로바이더 프레임워크를 구축하려면 상당한 작업이 필요합니다.
참고:
Highlighter는 양방향 마크다운-텍스트 매핑에 대해 걱정할 필요가 없으므로, 이 방향으로의 훌륭한 첫걸음이 될 수 있습니다.
TEXTAREA를 숨긴 후 그 위에 contenteditable을 렌더링하고, 이벤트를 원본으로 전달하는 닌자 같은 해킹 방법이 있을 수 있지만, 그 경우에도 @mention 위치 지정 로직을 재구현해야 합니다.
솔직히 말씀드리면, Trello 에디터를 보고 나니 Discourse의 에디터는 다소 2000년대 초반 느낌이라고 느껴집니다:
이런 부분이 중요하다고 생각합니다.
참고: 여전히 마크다운 문법을 100% 지원합니다.
개인적으로는 이 방식이 마음에 들지 않습니다. 너무 복잡해 보입니다. Discourse의 편집기가 시각적으로 깔끔한 것을 좋아합니다. 저는 정말로 텍스트만 보이고, 렌더링된 내용은 제자리에 맞춰 옆에 배치되어 있는 점이 좋습니다.
다시 문법 하이라이팅이라는 주요 주제로 돌아가자면, 이것도 제가 보고 싶은 기능입니다. 최소한 # 제목과 ## 소제목이 어떤 방식으로든 강조되기를 바랍니다. 미리보기와 편집기가 정렬되지 않아서 긴 게시글을 검색할 때 관련 # 제목을 찾는 데 오랜 시간이 걸리는 경우가 얼마나 많은지 말씀드리기 어렵습니다.
저에게는 작성기 편집기 측면에서 # 제목을 굵게 표시하거나 특정 색상으로 표시하는 것만으로도 큰 개선이 될 것입니다.
그렇지 않나요?
이 편집기들은 개발자나 코더들을 위해 만들어졌으며, 일반 사용자들에게는 정말로 혼란스럽습니다.
하지만 어쩔 수 없는 일이고, 코어에 너무 깊이 박혀 있어 바꾸기 어렵습니다. 초안 질문처럼요 ![]()
어쨌든 — 오프토픽이고 그렇습니다.
이것이 실현에 조금이라도 가까워졌나요?
배경:
해당 영역에서 작업을 시작했으며, @lindsey가 진행 상황을 공유할 예정입니다.
정말 좋은 소식입니다. 마크다운을 사용하는 것은 파워 유저들에게는 훌륭한 기능이지만, 대다수의 일반 유저들에게는 학습 곡선이 꽤 가파릅니다. 이 기능이 도입되면 커뮤니티의 접근성을 크게 향상시킬 수 있을 것입니다.
Hey @lindsey, 당신을 재촉하려는 의도는 전혀 없지만, 다음 사항들을 공유해 주실 수 있을지 여쭤봐도 될 것 같아서요:
변경 사항에 플러그인이 에디터 솔루션을 개발할 수 있도록 상호 운용성/프레임워크를 포함할지 여부.
이와 관련하여, 플러그인 등을 통해 자체적인 리치 텍스트 에디터를 개발하는 것을 검토하고 계신지 여부.
1번과/또는 2번에 대해 예상하시는 대략적인 일정.
제 맥락은 이 잠재적 프로젝트에 대한 접근 방식과 일정입니다.
@Rohail_Altaf 과 저는 특히 일정을 중심으로 이 문제를 어떻게 접근하는 것이 최선인지 고민하고 있습니다. 그럼에도 불구하고, 현재 단계에서 이를 공유하기 어려운 점에 대해 충분히 이해합니다.
안거스, 안녕하세요 — 답장이 늦어진 점 죄송합니다.我们公司의 연간 리트릿을 도쿄에서 진행 중이었거든요!
현재 구현 세부 사항을 아직 확정하지 못하고 있어서, 구체적인 내용을 많이 말씀드리기 어렵습니다. 앞으로 몇 주 안에 충분히 파악하여 이 질문들에 답할 수 있을 것 같아서, 더 자세한 정보가 파악되면 다시 연락드리겠습니다.