Repository navigation
feat: dnd-kit + Tiptap spike harness (#268) - #282
Merged
Merged
Conversation
Validate that @dnd-kit/core + @dnd-kit/sortable coexist with @tiptap/react before #271 integrates dnd-kit into production BlockList. The harness lives under resources/js/visual-editor/editor/__dnd-kit-spike__/, reuses the same useTiptap hook production blocks use, and is excluded from the editor bundle via rollupOptions.input (dist/editor/main.js stays 1.20 kB). All four interaction checks from PHASE-0-FINDINGS.md finding #3 pass: drag handles do not interfere with Tiptap text selection, pointer sensor uses an 8px distance threshold to avoid contenteditable conflicts, stable id-keyed reorders preserve Tiptap state in remaining blocks, and the keyboard sensor is scoped to the handle so Tiptap keyboard handling is never hijacked. Findings and carry-forward constraints for #271 are documented in docs/phase-1-dnd-kit-findings.md. Closes #268
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughAdds a dev-only drag-and-drop spike harness integrating Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 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 unit tests (beta)
Comment |
ViewFromTheBox
marked this pull request as ready for review
April 13, 2026 22:28
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
package.json (1)
27-34:⚠️ Potential issue | 🟠 MajorAdd explicit
@dnd-kit/utilitiesdependency
SpikeBlock.tsxdirectly imports@dnd-kit/utilities, but it is not declared independencies. Relying on transitive installs is brittle and can break with strict package manager layouts.🔧 Proposed fix
"dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/sortable": "^10.0.0", + "@dnd-kit/utilities": "^3.2.2", "@tiptap/extension-link": "^3.22.3", "@tiptap/react": "^3.22.3",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` around lines 27 - 34, SpikeBlock.tsx imports symbols from `@dnd-kit/utilities` but package.json lacks that dependency; add an explicit dependency entry for "@dnd-kit/utilities" to package.json (use a version aligned with `@dnd-kit/core`, e.g. "^6.3.1") so the import in SpikeBlock.tsx resolves reliably without relying on transitive installs.
🧹 Nitpick comments (1)
docs/phase-1-dnd-kit-findings.md (1)
29-30: Avoid hard-coded bundle size in findings textThe explicit
1.20 kBvalue will age quickly and can become misleading. Consider wording this as “no spike entry is included inbuild:editoroutput” or timestamping the measurement.Also applies to: 120-121
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/phase-1-dnd-kit-findings.md` around lines 29 - 30, Replace the hard-coded "1.20 kB" bundle-size callout in the findings text (the string "1.20 kB" referencing dist/editor/main.js and the build:editor output) with a non-aging statement such as "no spike entry is included in build:editor output" or include a measurement plus timestamp; update the same wording wherever the size is repeated (also mentioned for lines 120-121) so the doc no longer contains a fixed byte value that will become stale.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@package.json`:
- Around line 27-34: SpikeBlock.tsx imports symbols from `@dnd-kit/utilities` but
package.json lacks that dependency; add an explicit dependency entry for
"@dnd-kit/utilities" to package.json (use a version aligned with `@dnd-kit/core`,
e.g. "^6.3.1") so the import in SpikeBlock.tsx resolves reliably without relying
on transitive installs.
---
Nitpick comments:
In `@docs/phase-1-dnd-kit-findings.md`:
- Around line 29-30: Replace the hard-coded "1.20 kB" bundle-size callout in the
findings text (the string "1.20 kB" referencing dist/editor/main.js and the
build:editor output) with a non-aging statement such as "no spike entry is
included in build:editor output" or include a measurement plus timestamp; update
the same wording wherever the size is repeated (also mentioned for lines
120-121) so the doc no longer contains a fixed byte value that will become
stale.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 618fd494-cee6-4b2f-915c-679c987c7d55
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json,!package-lock.json
📒 Files selected for processing (9)
docs/phase-1-dnd-kit-findings.mdpackage.jsonresources/js/visual-editor/editor/__dnd-kit-spike__/DndKitSpike.tsxresources/js/visual-editor/editor/__dnd-kit-spike__/SpikeBlock.tsxresources/js/visual-editor/editor/__dnd-kit-spike__/__tests__/DndKitSpike.test.tsxresources/js/visual-editor/editor/__dnd-kit-spike__/index.htmlresources/js/visual-editor/editor/__dnd-kit-spike__/main.tsxresources/js/visual-editor/editor/__dnd-kit-spike__/spike.cssvite.editor.config.ts
SpikeBlock.tsx imports CSS from @dnd-kit/utilities, which was previously only available transitively through @dnd-kit/sortable. Pin it explicitly so the import resolves independently of sortable's install tree.
github-project-automation
Bot
moved this from In Review
to Done
in ArtisanPack UI Overview
9 tasks done
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
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.
Description
Phase 1.6 de-risking spike for #237. Validates that
@dnd-kit/core+@dnd-kit/sortablecoexist cleanly with@tiptap/reactbefore #271integrates dnd-kit into the production
BlockList. The harness livesunder
resources/js/visual-editor/editor/__dnd-kit-spike__/, reuses thesame
useTiptaphook production blocks use, and is excluded from theeditor bundle (
dist/editor/main.jsstays 1.20 kB).Closes: #268
Type of Change
Related Issue
Issue: #268
Motivation and Context
PHASE-0-FINDINGS.mdfinding #3 flagged that the Phase 0 spike neverintegrated dnd-kit, so we had no empirical signal on Tiptap + dnd-kit
interactions (sensor conflicts, DOM ownership, drag handles inside
contenteditable regions). #268 is the throwaway harness that answers
those questions before #271 commits production code to a specific
dnd-kit integration shape.
Changes Made
@dnd-kit/coreand@dnd-kit/sortableas depsDndKitSpikeharness with 4 sortable blocks, each backed byuseTiptap— separate handle DOM,PointerSensorwith 8px distancethreshold,
KeyboardSensorwithsortableKeyboardCoordinates/__dnd-kit-spike__/undernpm run dev:editor;excluded from
build:editorviarollupOptions.input@spikealias invite.editor.config.tsto reuse the Phase 0useTiptaphookdocs/phase-1-dnd-kit-findings.mdwith decision, constraints forPhase 1.9: dnd-kit integration in production BlockList (top-level) #271, and known gaps (nested sortables, drop indicators, a11y
announcements)
How Has This Been Tested?
Testing Environment:
npm run dev:editorTests Performed:
npm test— 113 tests across 12 files, all green (4 new tests forthe spike harness)
npm run build:editor— verifieddist/editor/main.jsstays 1.20 kB,confirming the spike is excluded from the editor bundle
/__dnd-kit-spike__/:activation threshold works)
in the dragged block and leaves other blocks' Tiptap state
untouched
inside Tiptap does not trigger the keyboard sensor
Accessibility Tests Run
Details: Keyboard drag through
KeyboardSensorwas exercisedmanually. Accessibility announcements (
DragOverlay+announcementsprop) are out of scope for this spike and explicitly flagged in the
findings doc as a must-land-with-#271 item. The harness is throwaway
dev-only code.
Tests Added
Test details:
DndKitSpike.test.tsxcovers: (1) Tiptap editormounts inside every sortable block, (2) drag handle and Tiptap DOM are
siblings rather than ancestors, (3) editor state stays independent per
block through edits, (4) pointer + keyboard sensors register without
throwing. Full suite: 113 passing.
Documentation
Documentation details:
docs/phase-1-dnd-kit-findings.mddocumentsthe decision (🟢 green light for #271), per-check results, constraints
#271 must carry forward, and known gaps. The harness folder is named
__dnd-kit-spike__to signal throwaway status.Screenshots
n/a — dev-only harness.
Pre-Submission Checklist
Summary by CodeRabbit
Documentation
New Features
Chores