Skip to content

fix: 노션 복붙 본문 유실 방지#609

Merged
Hyeonjun0527 merged 1 commit into
developfrom
fix/admin-lesson-editor-notion-paste
May 17, 2026
Merged

fix: 노션 복붙 본문 유실 방지#609
Hyeonjun0527 merged 1 commit into
developfrom
fix/admin-lesson-editor-notion-paste

Conversation

@Hyeonjun0527
Copy link
Copy Markdown
Member

@Hyeonjun0527 Hyeonjun0527 commented May 17, 2026

Summary

  • 이미지 포함 클립보드가 실제 이미지 단독인지 판별하는 유틸 추가
  • 텍스트+이미지 혼합 붙여넣기는 기본 에디터 paste 흐름으로 통과시켜 본문 유실 방지

Verification

  • yarn lint:fix (통과, 기존 warning 233개)
  • yarn prettier:fix (통과, .codex/skills/clarify.md symlink warning 1개)
  • yarn typecheck (통과)
  • git push pre-push next build (통과, sitemap 생성 중 로컬 127.0.0.1:8080 연결 거부 로그는 fallback 후 빌드 완료)

Summary by CodeRabbit

릴리스 노트

  • 개선 사항
    • 클립보드 이미지 붙여넣기 감지 로직을 개선하여 순수 이미지 데이터와 이미지 + 텍스트 혼합 콘텐츠를 더 정확하게 구분합니다. 마크다운 에디터의 붙여넣기 처리 정확도가 향상됩니다.

Review Change Stack

Co-authored-by: OmX <omx@oh-my-codex.dev>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 17, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
study-platform-client-dev Building Building Preview, Comment May 17, 2026 9:52am

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 17, 2026

📝 Walkthrough

전체 요약

클립보드에서 순수 이미지 데이터를 정확히 판별하기 위해 새로운 유틸리티 함수 isClipboardImageOnly를 추가하고, 마크다운 에디터의 붙여넣기 로직 분기 조건을 강화하여 이미지 처리의 정확성을 개선했다.

변경 사항

클립보드 이미지 전용 판별 및 적용

레이어 / 파일 설명
이미지 감지 유틸리티 및 헬퍼 함수
src/components/common/ui/editor/clipboard-utils.ts
이미지 URL 패턴 및 데이터 이미지 텍스트를 매칭하기 위한 정규식 상수(IMAGE_URL_PART, DATA_IMAGE_TEXT_PART)와 HTML 래퍼를 제거하는 removeHtmlWrappers 유틸 함수가 추가된다.
클립보드 이미지 전용 판별 로직
src/components/common/ui/editor/clipboard-utils.ts
클립보드의 text/plaintext/html을 검사하여 이미지가 주도적인지 판별하는 isClipboardImageOnly 함수가 추가된다. 텍스트 존재 시 이미지 URL을 제거한 후 남은 텍스트 유무를 확인하고, 없을 경우 HTML 태그 제거 결과와 직접 이미지 파일 존재 여부로 최종 판단한다.
마크다운 에디터 붙여넣기 조건 개선
src/components/common/ui/editor/markdown-editor.tsx
clipboard-utils에서 isClipboardImageOnly를 추가 import하고, handlePaste 함수에서 이미지 처리 분기 조건을 hasClipboardImageHint && isClipboardImageOnly 조합으로 변경하여 순수 이미지 붙여넣기 케이스를 더 정확히 식별한다.

예상 코드 리뷰 난이도

🎯 2 (Simple) | ⏱️ ~10 분

📋 클립보드 속 숨은 이미지를 찾아내고,
텍스트와 섞인 것은 슬쩍 빼내고,
순수한 이미지만 골라내는 토끼의 재주!
붙여넣기는 이제 더욱 똑똑해졌다네 🐰✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목이 변경사항의 핵심을 명확하게 요약하고 있습니다. 노션 복붙 시 본문 유실을 방지하는 것이 주요 목표이며, 이는 클립보드 이미지 판별 로직 추가와 paste 흐름 변경으로 구현되어 있습니다.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/admin-lesson-editor-notion-paste

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@src/components/common/ui/editor/clipboard-utils.ts`:
- Around line 13-14: The regex DATA_IMAGE_TEXT_PART currently allows trailing
whitespace/letters and can overmatch plain text; update it to only match the
data URI base64 block by removing the trailing `\s` and preventing extra
characters—e.g. change to a pattern like
`data:image\/[a-z0-9.+-]+;base64,[A-Za-z0-9+/=]+(?![A-Za-z0-9+/=])` (preserve
flags) so isClipboardImageOnly and the subsequent cleanup logic only detect pure
image data and do not strip mixed text; ensure the updated DATA_IMAGE_TEXT_PART
constant is used where isClipboardImageOnly and the cleaning flow reference it.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 26db48ae-e2b9-4d28-8e0e-d9e1e305b1f9

📥 Commits

Reviewing files that changed from the base of the PR and between 08a5d12 and 5bb61f6.

📒 Files selected for processing (2)
  • src/components/common/ui/editor/clipboard-utils.ts
  • src/components/common/ui/editor/markdown-editor.tsx

Comment on lines +13 to +14
const DATA_IMAGE_TEXT_PART =
/data:image\/[a-z0-9.+-]+;base64,[a-zA-Z0-9+/=\s]+/gi;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

data:image 텍스트 패턴이 일반 본문까지 함께 제거할 수 있습니다.

현재 정규식은 Base64 뒤 일반 영문 텍스트도 매칭해 isClipboardImageOnly가 오판할 수 있습니다. Line 136-140 정제 로직과 결합되면 혼합 붙여넣기 본문 유실이 다시 발생할 수 있습니다.

수정 제안
-const DATA_IMAGE_TEXT_PART =
-  /data:image\/[a-z0-9.+-]+;base64,[a-zA-Z0-9+/=\s]+/gi;
+const DATA_IMAGE_TEXT_PART =
+  /data:image\/[a-z0-9.+-]+;base64,[a-zA-Z0-9+/=]+/gi;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const DATA_IMAGE_TEXT_PART =
/data:image\/[a-z0-9.+-]+;base64,[a-zA-Z0-9+/=\s]+/gi;
const DATA_IMAGE_TEXT_PART =
/data:image\/[a-z0-9.+-]+;base64,[a-zA-Z0-9+/=]+/gi;
🤖 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/editor/clipboard-utils.ts` around lines 13 - 14, The
regex DATA_IMAGE_TEXT_PART currently allows trailing whitespace/letters and can
overmatch plain text; update it to only match the data URI base64 block by
removing the trailing `\s` and preventing extra characters—e.g. change to a
pattern like `data:image\/[a-z0-9.+-]+;base64,[A-Za-z0-9+/=]+(?![A-Za-z0-9+/=])`
(preserve flags) so isClipboardImageOnly and the subsequent cleanup logic only
detect pure image data and do not strip mixed text; ensure the updated
DATA_IMAGE_TEXT_PART constant is used where isClipboardImageOnly and the
cleaning flow reference it.

@Hyeonjun0527 Hyeonjun0527 merged commit d70f7ad into develop May 17, 2026
15 of 16 checks passed
@Hyeonjun0527 Hyeonjun0527 deleted the fix/admin-lesson-editor-notion-paste branch May 17, 2026 10:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant