feat(rich-text): admin 에디터·미리보기·레슨 상세 렌더링 동기화 + WYSIWYG 표#727
Merged
Conversation
…·레슨 상세 렌더링 동기화 + WYSIWYG 표 release: minor - 단일 렌더 파이프라인(markdown-render-pipeline) 추출: admin 미리보기(MarkdownContent)와 레슨 상세·피드·커뮤니티(MarkdownContentCore)가 동일 파이프라인을 사용하도록 통합 - 레슨 상세에서 누락되던 표/취소선(<s>)/이미지 URL 해석/mermaid/normalize 확보 - 빈 단락을 줄바꿈(<p><br></p>)으로 복원해 에디터-미리보기-상세 줄바꿈 일치 - 에디터에 TipTap 표 확장 도입 → 툴바·붙여넣기에서 실제 표(WYSIWYG) 편집 - 정화기 colspan/rowspan 허용, 에디터 표 CSS 추가 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughTiptap 네이티브 테이블 확장 4개 패키지를 추가하고, 분산된 마크다운 렌더링/위생 처리 로직을 ChangesTiptap 테이블 지원 및 렌더 파이프라인 통합
Sequence Diagram(s)sequenceDiagram
participant MarkdownEditor
participant MarkdownTableExtensions
participant insertTable
participant renderMarkdownToSafeHtml
participant DOMPurify
participant enhanceRenderedMarkdown
rect rgba(99, 179, 237, 0.5)
note over MarkdownEditor,insertTable: 툴바 표 삽입
MarkdownEditor->>MarkdownTableExtensions: extensions 등록
MarkdownEditor->>insertTable: insertTable({ rows:3, cols:2, withHeaderRow:true })
insertTable-->>MarkdownEditor: TipTap 테이블 노드 삽입
end
rect rgba(154, 230, 180, 0.5)
note over MarkdownEditor,DOMPurify: 클립보드 붙여넣기
MarkdownEditor->>MarkdownEditor: isHtmlTableOnlyPaste 판별
MarkdownEditor->>MarkdownEditor: pastedHtml 또는 convertTabularTextToHtmlTable(pastedText)
MarkdownEditor->>insertTable: insertContent(htmlTable)
end
rect rgba(251, 211, 141, 0.5)
note over renderMarkdownToSafeHtml,enhanceRenderedMarkdown: 뷰어 렌더링
renderMarkdownToSafeHtml->>DOMPurify: sanitize(html, SANITIZE_OPTIONS)
DOMPurify-->>renderMarkdownToSafeHtml: sanitizedHtml
renderMarkdownToSafeHtml-->>enhanceRenderedMarkdown: container
enhanceRenderedMarkdown->>enhanceRenderedMarkdown: hljs + renderMermaidBlocks
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related issues
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/common/ui/rich-text/markdown-content-core.tsx (1)
29-35: 💤 Low value두 컴포넌트 간 렌더링 패턴 불일치 (optional)
markdown-content.tsx는 빈 div에 useEffect에서innerHTML을 직접 설정하는 반면, 이 컴포넌트는dangerouslySetInnerHTML을 사용합니다. 기능상 문제는 없지만, 코드베이스 일관성을 위해 하나의 패턴으로 통일하는 것을 고려해 볼 수 있습니다.
dangerouslySetInnerHTML방식이 React에서 더 관용적이며, 초기 렌더링 시 콘텐츠 깜빡임을 방지합니다.Also applies to: 78-80
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/ui/rich-text/markdown-content-core.tsx` around lines 29 - 35, Standardize the markdown content rendering pattern across both files to use dangerouslySetInnerHTML for consistency and to prevent content flickering. In markdown-content-core.tsx, ensure both the useEffect block around lines 29-35 (where enhanceRenderedMarkdown is called) and the code around lines 78-80 follow the same dangerouslySetInnerHTML pattern rather than setting innerHTML directly in useEffect. Additionally, update markdown-content.tsx to align with this same pattern for codebase consistency, as dangerouslySetInnerHTML is the more idiomatic React approach and provides better rendering performance by preventing initial content flicker.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/common/ui/rich-text/markdown-content-core.tsx`:
- Around line 29-35: Standardize the markdown content rendering pattern across
both files to use dangerouslySetInnerHTML for consistency and to prevent content
flickering. In markdown-content-core.tsx, ensure both the useEffect block around
lines 29-35 (where enhanceRenderedMarkdown is called) and the code around lines
78-80 follow the same dangerouslySetInnerHTML pattern rather than setting
innerHTML directly in useEffect. Additionally, update markdown-content.tsx to
align with this same pattern for codebase consistency, as
dangerouslySetInnerHTML is the more idiomatic React approach and provides better
rendering performance by preventing initial content flicker.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 0e2f4938-78ca-4793-9c2b-4d8e1160e7b1
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (10)
package.jsonsrc/app/global.csssrc/components/common/ui/editor/extensions.tssrc/components/common/ui/editor/markdown-content.tsxsrc/components/common/ui/editor/markdown-editor.tsxsrc/components/common/ui/editor/markdown-render-pipeline.test.tssrc/components/common/ui/editor/markdown-render-pipeline.tssrc/components/common/ui/editor/markdown-sanitizer.tssrc/components/common/ui/editor/markdown-table-utils.tssrc/components/common/ui/rich-text/markdown-content-core.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
release: minor
배경
공개 콘텐츠를 그리는 렌더러가 둘로 갈라져(drift) 레슨 상세에서 표·취소선이 사라지고, admin 미리보기와 결과가 달랐습니다.
MarkdownContent(admin 미리보기 + 미션/과제/그룹스터디 소개): 공유 sanitizer 사용, 정상MarkdownContentCore(레슨 상세 + 빌더 피드 + 랜딩 피드 + 커뮤니티): 인라인 복사본 — 표 태그/표 CSS/취소선(<s>)/이미지 URL 해석/mermaid/normalize 누락또한 에디터에서 표는
| 항목 | 설명 |텍스트로만 보여 에디터-미리보기-상세가 어긋났습니다.변경
렌더 동기화 (미리보기 ≡ 상세 ≡ 모든 공개 화면)
markdown-render-pipeline.ts신규: 단일 렌더 파이프라인(renderMarkdownToSafeHtml) + 후처리(enhanceRenderedMarkdown) + 빈 단락→줄바꿈 복원(restoreEmptyParagraphsAsLineBreaks)MarkdownContent·MarkdownContentCore모두 이 파이프라인 사용 → 표/취소선/이미지 URL 해석/mermaid/normalize/줄바꿈 일치 (스타일 토큰만 화면별로 유지)에디터 WYSIWYG 표
extension-table) → 툴바 "표" 버튼이 실제 표 삽입colspan/rowspan허용, 에디터 표 CSS 추가영향 / 의도된 변화
MarkdownContent(admin) 로직 동일 → 미션/과제/그룹스터디 영향 없음MarkdownContentCore는 전부 "추가" → 레슨/피드/커뮤니티에 개선. 단 (1) 이미지 폭 클램프 200800으로 admin과 통일(기존 80400), (2) 빈 줄이 상세/미리보기에도 표시(에디터와 일치)renderMarkdownTablesInHtml로 계속 표 렌더(하위호환)검증
yarn build는/sitemap.xml에서 백엔드 500(환경 이슈)로만 중단 — 렌더링 무관, CI는 백엔드 접속되어 통과 예상🤖 Generated with Claude Code
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일
테스트