Conversation
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
WalkthroughTipTap 에디터를 3.7.2 → 3.20.0으로 업그레이드하고 Changes
Sequence DiagramsequenceDiagram
actor User
participant Editor as "TipTap Editor"
participant Selection as "CellSelection"
participant BubbleMenu as "TableBubbleMenu"
participant TableHandles as "TableHandles"
participant Utilities as "tableUtils"
User->>Editor: 셀 선택 / 커서 이동
Editor->>Selection: CellSelection 활성화
alt 버블 메뉴 흐름
Selection->>BubbleMenu: 활성화 조건 충족
BubbleMenu->>User: 병합/분할/행·열 조작 UI 표시
User->>BubbleMenu: 액션 클릭 (예: 행 추가)
BubbleMenu->>Editor: editor.chain() 호출
Editor->>Utilities: 테이블 수정 요청 (addRow/deleteCol 등)
Utilities->>Editor: 트랜잭션 적용
Editor->>User: 변경 반영
end
alt 핸들 드래그 흐름
User->>TableHandles: 행/열 핸들 드래그 시작
TableHandles->>TableHandles: 드래그 상태/하이라이트 업데이트
User->>TableHandles: 드랍
TableHandles->>Utilities: moveTableRow / moveTableCol 호출
Utilities->>Editor: 재배열 트랜잭션 적용
Editor->>User: 변경 반영
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 265-268: The background-color use of rgb(var(--color-primary-100)
/ 0.3) can be invalid if --color-primary-100 holds a hex value; update the
.table-drag-highlight rule so the variable supplies RGB components or use a CSS
function that accepts hex; e.g., either change the source of --color-primary-100
to an "R G B" value and keep background-color: rgb(var(--color-primary-100) /
0.3), or replace the usage with a color-mix expression (e.g. color-mix(in srgb,
var(--color-primary-100) 30%, transparent)) so the highlight alpha is applied
reliably; refer to the .table-drag-highlight selector and the
--color-primary-100 variable when making the change.
- Around line 307-312: Replace the deprecated CSS declaration by removing
"word-break: break-word" in the rules targeting ".ProseMirror table td" and
".ProseMirror table th" and add "overflow-wrap: anywhere" instead; update the
styles in the rule that currently contains "word-break: break-word" so the table
cell rules use the standard "overflow-wrap: anywhere" property to satisfy
linting and follow current CSS specs.
In `@src/components/recruit/editor/table/TableHandleMenu.tsx`:
- Around line 30-35: The button in TableHandleMenu.tsx currently only wires the
action to onMouseDown which prevents keyboard activation; replace or supplement
that with a proper onClick handler (and/or an onKeyDown that triggers on
Enter/Space) so the passed onClick prop is invoked for keyboard users as well;
update the button that currently uses onMouseDown to call onClick via onClick
(and add an onKeyDown check for 'Enter'/' ' if you keep onMouseDown) so keyboard
activation works correctly.
In `@src/components/recruit/editor/table/TableHandles.tsx`:
- Around line 44-54: computeHandles currently always uses the first <table> in
editor.view.dom which causes overlays/handles to mismatch when multiple tables
exist; change computeHandles to locate the DOM table that corresponds to the
current editor selection instead of dom.querySelectorAll('table')[0]. Use the
editor view/selection (editor.view.state.selection or
editor.view.domAtPos(selection.from)) to find the DOM node at the selection
position, walk up to the nearest HTMLTableElement (e.g., node.closest('table'))
and compute tableRect/handles from that table, then call setHandles; update any
other places that mirror this logic (the code around computeHandles, and
references at the points noted) to use the selected-table lookup rather than
always the first table.
- Around line 39-40: The longPressTimer stored in longPressTimer ref can survive
component unmount and keep firing; add a cleanup that clears it on unmount:
inside the TableHandles component add a useEffect with a cleanup function that
checks longPressTimer.current, calls clearTimeout(longPressTimer.current) and
sets longPressTimer.current = null (and optionally isDragging.current = false)
to ensure no delayed callbacks run after unmount; apply the same cleanup pattern
for any other long-press timers referenced around the longPressTimer usage
(e.g., the handlers tied to the mouseup/mouseleave logic).
In `@src/components/recruit/editor/table/tableUtils.ts`:
- Line 36: The forEach callback currently returns the result of rowNodes.push
implicitly (tableNode.forEach((row) => rowNodes.push(row))), triggering the lint
rule; change the callback to a block-bodied function to avoid implicit return
(e.g., tableNode.forEach((row) => { rowNodes.push(row); })) or replace with an
explicit loop, ensuring you reference tableNode.forEach and rowNodes.push so the
callback does not return the push value.
In `@src/components/recruit/editor/Toolbar.tsx`:
- Around line 189-196: The code currently queries all tables via
querySelectorAll('table colgroup col') inside the requestAnimationFrame
callback, which changes every table's col widths; instead scope the DOM lookup
to the newly inserted table by locating the table element for the current
selection/insert position (e.g., use
editor.view.domAtPos(editor.state.selection.from).node or the selection's DOM
node and call .closest('table') to get the specific table element), then run
querySelectorAll('colgroup col') on that table element and apply the width only
if that table exists; update the code in the requestAnimationFrame callback
(referencing editor.view.dom, editor.state.selection, and the cols variable)
accordingly and early-return if no scoped table/cols found.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/icons/editor/table-selected.svgis excluded by!**/*.svgpublic/icons/editor/table.svgis excluded by!**/*.svg
📒 Files selected for processing (9)
package.jsonsrc/app/globals.csssrc/components/recruit/editor/TextContent.tsxsrc/components/recruit/editor/Toolbar.tsxsrc/components/recruit/editor/editorExtensions.tssrc/components/recruit/editor/table/TableBubbleMenu.tsxsrc/components/recruit/editor/table/TableHandleMenu.tsxsrc/components/recruit/editor/table/TableHandles.tsxsrc/components/recruit/editor/table/tableUtils.ts
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/app/globals.css (1)
265-268:⚠️ Potential issue | 🟠 Major
.table-drag-highlight배경색 선언이 현재 토큰 구조에서 무효가 될 수 있습니다.Line 267의
rgb(var(--color-primary-100) / 0.3)는--color-primary-100이 hex 값으로 해석되면 유효하지 않은 색상식이 되어 하이라이트가 적용되지 않을 수 있습니다.제안 코드
.table-drag-highlight { opacity: 0.4; - background-color: rgb(var(--color-primary-100) / 0.3); + background-color: color-mix(in srgb, var(--color-primary-100) 30%, transparent); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 265 - 268, The .table-drag-highlight rule uses background-color: rgb(var(--color-primary-100) / 0.3) which fails if --color-primary-100 is a hex string; fix by referencing an RGB-formatted token or using rgba() with a token that contains comma-separated RGB components: update the CSS for .table-drag-highlight to use a var that stores "R, G, B" and call background-color: rgba(var(--color-primary-100-rgb), 0.3) (or create a new --color-primary-100-rgb token from the hex token and use that) so the alpha is applied reliably regardless of original token format.
🧹 Nitpick comments (1)
src/components/recruit/editor/Toolbar.tsx (1)
176-207: 표 내부에서는 버튼을disabled로 노출해 의도를 명확히 해주세요.현재는 Line 180에서 no-op 처리만 하고 있어 클릭 가능한 UI처럼 보입니다.
disabled/aria-disabled를 같이 주면 사용자 의도와 동작이 일치합니다.제안 코드
<button type="button" + disabled={editor.isActive('table')} + aria-disabled={editor.isActive('table')} onClick={() => { // 표 안에 있으면 삽입 막기 if (editor.isActive('table')) return; @@ - className="cursor-pointer transition-opacity hover:opacity-80" + className="cursor-pointer transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-40" >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/recruit/editor/Toolbar.tsx` around lines 176 - 207, The button currently only no-ops when inside a table (checked via editor.isActive('table')), but remains visually interactive; update the Toolbar button render so it receives a disabled={editor.isActive('table')} prop and aria-disabled={editor.isActive('table')} (or a single const isTable = editor.isActive('table') reused) and adjust the className to reflect a disabled state when isTable is true; keep the existing onClick logic but still guard at the start with if (isTable) return to avoid running the insertion flow. This uses the existing editor.isActive check and the same button element in Toolbar.tsx to make the UI state match behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 302-303: 빈 CSS 규칙 ".ProseMirror table colgroup col { }"가
Stylelint의 block-no-empty 오류를 발생시키므로 해당 빈 블록을 삭제하거나 실제로 필요한 스타일이 있다면 적절한 속성(예:
width, background 등)을 추가하여 비어있지 않도록 변경하세요; 대상 식별자는 ".ProseMirror table colgroup
col"이며 파일의 해당 선택자를 찾아 블록을 제거하거나 내용을 채우면 됩니다.
---
Duplicate comments:
In `@src/app/globals.css`:
- Around line 265-268: The .table-drag-highlight rule uses background-color:
rgb(var(--color-primary-100) / 0.3) which fails if --color-primary-100 is a hex
string; fix by referencing an RGB-formatted token or using rgba() with a token
that contains comma-separated RGB components: update the CSS for
.table-drag-highlight to use a var that stores "R, G, B" and call
background-color: rgba(var(--color-primary-100-rgb), 0.3) (or create a new
--color-primary-100-rgb token from the hex token and use that) so the alpha is
applied reliably regardless of original token format.
---
Nitpick comments:
In `@src/components/recruit/editor/Toolbar.tsx`:
- Around line 176-207: The button currently only no-ops when inside a table
(checked via editor.isActive('table')), but remains visually interactive; update
the Toolbar button render so it receives a disabled={editor.isActive('table')}
prop and aria-disabled={editor.isActive('table')} (or a single const isTable =
editor.isActive('table') reused) and adjust the className to reflect a disabled
state when isTable is true; keep the existing onClick logic but still guard at
the start with if (isTable) return to avoid running the insertion flow. This
uses the existing editor.isActive check and the same button element in
Toolbar.tsx to make the UI state match behavior.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/app/globals.csssrc/components/recruit/editor/TextContent.tsxsrc/components/recruit/editor/Toolbar.tsxsrc/components/recruit/editor/editorExtensions.tssrc/components/recruit/editor/table/TableHandles.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/recruit/editor/TextContent.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.
✅ PR 유형
어떤 변경 사항이 있었나요?
📌 관련 이슈번호
✅ Key Changes
📸 스크린샷 or 실행영상
🎸 기타 사항 or 추가 코멘트
Summary by CodeRabbit
새로운 기능
스타일/UX
업데이트
소소한 변경