@bycrux/editor 0.4.6 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "exports": {

package/src/carousel/CarouselEditor.tsx

@@ -197,6 +197,24 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
     return () => window.removeEventListener('keydown', onKey)
   }, [state])
 
+  // ── Keyboard shortcut: Delete / Backspace removes the selected element. ──
+  // Guarded against text inputs (so editing an overlay's text or a panel field
+  // never deletes the element) and against crop mode (Backspace there belongs to
+  // the crop UI). Deleting mutates project state, so the canvas + thumbnails
+  // re-render without the element immediately.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (isTypingTarget(e.target)) return
+      if (e.key !== 'Delete' && e.key !== 'Backspace') return
+      if (!selectedSlideId || !selectedElementId || cropElementId) return
+      e.preventDefault()
+      void state.removeElement(selectedSlideId, selectedElementId)
+      setSelectedElementId(null)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [state, selectedSlideId, selectedElementId, cropElementId])
+
   async function handleRender() {
     setRendering(true)
     try {

package/src/carousel/SlideCanvas.tsx

@@ -342,11 +342,12 @@ export default function SlideCanvas({
               data-testid="snap-guide-x"
               style={{
                 position: 'absolute',
-                left: g.at * scale - 0.5,
+                left: g.at * scale - 1,
                 top: 0,
-                width: 1,
+                width: 2,
                 height: displayH,
-                background: '#ec4899',
+                background: '#ff2d88',
+                boxShadow: '0 0 6px 1px rgba(255,45,136,0.9)',
                 pointerEvents: 'none',
                 zIndex: 999,
               }}
@@ -358,10 +359,11 @@ export default function SlideCanvas({
               style={{
                 position: 'absolute',
                 left: 0,
-                top: g.at * scale - 0.5,
+                top: g.at * scale - 1,
                 width: displayW,
-                height: 1,
-                background: '#ec4899',
+                height: 2,
+                background: '#ff2d88',
+                boxShadow: '0 0 6px 1px rgba(255,45,136,0.9)',
                 pointerEvents: 'none',
                 zIndex: 999,
               }}
@@ -437,7 +439,12 @@ export default function SlideCanvas({
                 <img
                   src={resolveSrc(element)}
                   draggable={false}
-                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                  // Uncropped images use `contain` to mirror the renderer
+                  // (render/templates/slide.jsx: no-crop branch → objectFit
+                  // 'contain'). Logos/escudos placed in a fixed box must keep
+                  // their aspect (letterboxed) in BOTH paths; `cover` here would
+                  // crop them in the preview and diverge from the final PNG.
+                  style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
                   alt=""
                 />
               )

package/src/carousel/__tests__/CarouselEditor.test.tsx

@@ -290,4 +290,43 @@ describe('CarouselEditor — editor-core integration', () => {
       expect(lastSelection()).toBeNull()
     })
   })
+
+  // Delete / Backspace removes the selected element and persists the removal.
+  it('deletes the selected element on Delete keypress', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    render(<CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} />)
+
+    const wrapper = await waitFor(() => findInteractiveWrapper('el-img'))
+    await act(async () => { fireEvent.click(wrapper) })
+
+    await act(async () => { fireEvent.keyDown(window, { key: 'Delete' }) })
+
+    // The removal is persisted: the latest saved project has no elements.
+    await waitFor(() => {
+      expect(adapter.saveCalls.length).toBeGreaterThan(0)
+      const saved = adapter.saveCalls[adapter.saveCalls.length - 1].project
+      expect(saved.slides![0].elements.find(e => e.id === 'el-img')).toBeUndefined()
+    })
+  })
+
+  // Guard: Delete/Backspace must not delete while typing (e.g. editing text or a
+  // panel field), or Backspace in a field would wipe the element.
+  it('does not delete the selected element while typing in an input', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    render(<CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} />)
+
+    const wrapper = await waitFor(() => findInteractiveWrapper('el-img'))
+    await act(async () => { fireEvent.click(wrapper) })
+
+    const input = document.createElement('input')
+    document.body.appendChild(input)
+    input.focus()
+
+    const before = adapter.saveCalls.length
+    await act(async () => { fireEvent.keyDown(input, { key: 'Backspace' }) })
+    expect(adapter.saveCalls.length).toBe(before)
+    document.body.removeChild(input)
+  })
 })

package/src/carousel/__tests__/SlideCanvasCrop.test.tsx

@@ -61,7 +61,7 @@ describe('SlideCanvas crop display', () => {
     expect(wrapper.style.overflow).toBe('hidden')
   })
 
-  it('renders plain cover (no crop wrapper) when element.crop is absent', async () => {
+  it('renders plain contain (no crop wrapper) when element.crop is absent', async () => {
     const el: ImageElement = {
       id: 'el-img',
       type: 'image',
@@ -88,7 +88,9 @@ describe('SlideCanvas crop display', () => {
       if (!found) throw new Error('img not rendered')
       return found
     })
-    expect(img.style.objectFit).toBe('cover')
+    // Uncropped images use `contain` to mirror the renderer (no-crop branch in
+    // render/templates/slide.jsx) so logos/escudos keep aspect in both paths.
+    expect(img.style.objectFit).toBe('contain')
     expect(img.style.width).toBe('100%')
     expect(img.style.height).toBe('100%')
   })