feat: 取り込み補助に Markdown 対応と D&D 導線を追加#300
Merged
Merged
Conversation
職務経歴書フォームの取り込み補助（PDF 原本からの流し込み）を Markdown ファイルにも拡張し、ファイル取り込み導線を右カラムのドロップゾーンに一本化する。 - Markdown を marked + DOMPurify で sanitize 描画する renderMarkdown を utils に抽出（MarkdownTextarea の重複ロジックも統合） - 原本ビューを kind で PDF / Markdown のレンダラー切替に変更。 MarkdownDocumentView を新設し、選択→流し込みは既存の getSelection 機構を流用 - useResumeImportAssist に kind 判定・種別別サイズ上限（PDF 20MB / MD 2MB）・ ドロップ受け入れ用 acceptFile を追加 - 取り込み導線をヘッダーボタンから右カラムのドロップゾーン（D&D / クリック）へ一本化 - 折り畳みトグルをサイドバーと同じシェブロン UI に統一 - PDF 限定の命名を一般化（ResumePdfTracePanel→ResumeSourceTracePanel、 usePdfPanelLayout→useImportPanelLayout、メッセージ文言・UI_MESSAGES） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Warning Review limit reached
More reviews will be available in 48 minutes and 25 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe PR extends the resume import feature from PDF-only to support both PDF and Markdown files by introducing a shared Markdown utility, refactoring panel/assist hooks to handle multiple file types, replacing the single-format ResumePdfTracePanel with a new multi-format ResumeSourceTracePanel component, and updating UI messages and form integration accordingly. ChangesResume Import Expansion
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
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 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.
Actionable comments posted: 2
🤖 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 `@frontend/src/components/forms/MarkdownDocumentView.tsx`:
- Around line 32-60: The render-error path leaves html as null so the loading
placeholder remains; update the catch handler inside the useEffect that calls
file.text() to also setHtml to a non-null sentinel (e.g., empty string or an
"error" value) so the component no longer renders the RENDERING placeholder, and
keep calling onError(IMPORT_ASSIST_MESSAGES.RENDER_FAILED); modify the
useEffect's catch block (and the cleanup behavior if needed) to setHtml(...)
alongside onError to reflect failure, referencing the useEffect, file.text(),
onError, setHtml and html symbols to locate the change.
In `@frontend/src/components/forms/ResumeSourceTracePanel.module.css`:
- Around line 158-169: The .markdownBody CSS rule uses the deprecated
declaration "word-break: break-word"; update this rule to remove that deprecated
property and instead add "overflow-wrap: break-word" (keeping existing layout
properties intact) so the .markdownBody selector uses the standard,
non-deprecated wrapping behavior.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 7c8d7ff6-6edc-4203-8d53-89382c780421
📒 Files selected for processing (18)
.claude/rules/frontend/architecture.mdfrontend/src/components/forms/CareerResumeForm.module.cssfrontend/src/components/forms/CareerResumeForm.tsxfrontend/src/components/forms/MarkdownDocumentView.tsxfrontend/src/components/forms/MarkdownTextarea.tsxfrontend/src/components/forms/PdfDocumentView.tsxfrontend/src/components/forms/ProjectModal.test.tsxfrontend/src/components/forms/ProjectModal.tsxfrontend/src/components/forms/ResumePdfTracePanel.tsxfrontend/src/components/forms/ResumeSourceTracePanel.module.cssfrontend/src/components/forms/ResumeSourceTracePanel.tsxfrontend/src/constants/messages.tsfrontend/src/hooks/career/useImportPanelLayout.test.tsfrontend/src/hooks/career/useImportPanelLayout.tsfrontend/src/hooks/career/useResumeImportAssist.test.tsfrontend/src/hooks/career/useResumeImportAssist.tsfrontend/src/utils/markdown.test.tsfrontend/src/utils/markdown.ts
💤 Files with no reviewable changes (1)
- frontend/src/components/forms/ResumePdfTracePanel.tsx
- ファイル選択 / ドラッグ&ドロップでの Markdown 読み込み→原本描画 - 原本選択→入力欄への流し込み - 未対応拡張子（.txt）と上限超過（>2MB）のエラー表示を検証 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 描画失敗時に html を空文字で確定し RENDERING 表示の残存を解消 - .markdownBody の word-break: break-word を標準の overflow-wrap へ置換 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.
概要
職務経歴書フォームの取り込み補助（PDF 原本からテキストをドラッグ選択してフォームへ流し込む機能）を Markdown ファイルにも拡張し、ファイル取り込みの導線を右カラムのドロップゾーンに一本化しました。すべてクライアントサイド完結で、ファイルはサーバーに送信しません。
変更内容
機能追加
実装
utils/markdown.ts:marked+DOMPurifyで sanitize 描画するrenderMarkdownを抽出（MarkdownTextareaの重複ロジックも統合）MarkdownDocumentViewを新設。原本ビューはkindで PDF / Markdown のレンダラーを切り替え。選択→流し込みは既存のwindow.getSelection()機構を流用useResumeImportAssist:kind判定・種別別サイズ上限（PDF 20MB / MD 2MB）・ドロップ受け入れ用acceptFileを追加リファクタ（PDF 限定 → 汎用化）
ResumePdfTracePanel→ResumeSourceTracePanelusePdfPanelLayout→useImportPanelLayoutUI_MESSAGESの PDF 限定表現を汎用化セキュリティ
renderMarkdown()（DOMPurify sanitize）の出力のみをdangerouslySetInnerHTMLに渡す既存パターンを踏襲。<script>/onerror除去を unit test で固定テスト
make ci全 pass（backend lint/test + frontend lint/test/build、frontend 205 tests）utils/markdown.test.ts、useResumeImportAssist.test.ts（MD 判定 / 未対応形式 / サイズ超過 /acceptFile）e2e/career-import-assist.spec.ts、全 27 E2E pass）:🤖 Generated with Claude Code