matsandClaude Sonnet 5.5
1af9ec3172
Injectable React editor that is side-loaded onto the statically rendered page and edits through the CMS HTTP API (POST /api/edit). - Shadow-root UI over server HTML; patches morphed in, undo/redo from server inverses (reuses @k6n/cms-editor EditClient/morph/markdown editor) - Sign-in via go-auth device grant as the CMS client (aud matches), token refresh + 401 retry; live preview swapped in on load and on tab focus - Schema-driven property form (arrays, maps, variants, $ref, validation) - Every string property editable where it is rendered (value-bound inline fields and attribute chips), markdown WYSIWYG for marked fields - Block palette + drag & drop with ghost drop targets, insertion slots, sort snapping between siblings (Alt to nest) - x-style annotations: on-page padding/margin/gap handles, Style panel, wrap-in-layout; x-graph label/group for titles and grouping - Dev workflow: Vite proxy to the live site (token injected server-side) or an offline in-memory mock CMS; jsdom test suite Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
39 lines
2.0 KiB
TypeScript
39 lines
2.0 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
import { dropTarget } from '../src/page/dnd'
|
|
import type { DndBlock } from '../src/page/dnd'
|
|
|
|
const r = (y: number, h = 100, x = 0, w = 600) => ({ x, y, w, h })
|
|
// page: A (container: a1, a2) , B (container, empty), C (leaf)
|
|
const blocks: DndBlock[] = [
|
|
{ id: 'A', container: true, depth: 0, rect: r(0, 300) },
|
|
{ id: 'a1', parentId: 'A', container: false, depth: 1, rect: r(10, 100, 10, 580) },
|
|
{ id: 'a2', parentId: 'A', container: false, depth: 1, rect: r(120, 100, 10, 580) },
|
|
{ id: 'B', container: true, depth: 0, rect: r(310, 100) },
|
|
{ id: 'C', container: false, depth: 0, rect: r(420, 100) },
|
|
]
|
|
|
|
describe('dropTarget', () => {
|
|
it('picks the index from the pointer relative to sibling midpoints', () => {
|
|
expect(dropTarget(blocks, { x: 50, y: 20 }, 'C')).toMatchObject({ parentId: 'A', index: 0 })
|
|
expect(dropTarget(blocks, { x: 50, y: 100 }, 'C')).toMatchObject({ parentId: 'A', index: 1 })
|
|
expect(dropTarget(blocks, { x: 50, y: 250 }, 'C')).toMatchObject({ parentId: 'A', index: 2 })
|
|
})
|
|
it('excludes the dragged block from the index maths', () => {
|
|
// dragging a1 within A: pointer below a2's midpoint -> after a2 = index 1 among [a2]
|
|
expect(dropTarget(blocks, { x: 50, y: 200 }, 'a1')).toMatchObject({ parentId: 'A', index: 1 })
|
|
})
|
|
it('drops into an empty container', () => {
|
|
const t = dropTarget(blocks, { x: 50, y: 350 }, 'C')!
|
|
expect(t).toMatchObject({ parentId: 'B', index: 0 })
|
|
expect(t.line.y).toBeGreaterThanOrEqual(310)
|
|
})
|
|
it('never targets the dragged block or its descendants', () => {
|
|
expect(dropTarget(blocks, { x: 50, y: 20 }, 'A')?.parentId).toBe('') // A is not a drop target for itself -> page level
|
|
})
|
|
it('page level uses the root sentinel and refuses far-away points', () => {
|
|
expect(dropTarget(blocks, { x: 50, y: 460 }, 'a1')).toMatchObject({ parentId: '', index: 2 })
|
|
expect(dropTarget(blocks, { x: 50, y: 500 }, 'a1')).toMatchObject({ parentId: '', index: 3 })
|
|
expect(dropTarget(blocks, { x: 50, y: 900 }, 'a1')).toBeNull()
|
|
})
|
|
})
|