From 7f6179040c61214c58b77eca1a16f8258db20063 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Sun, 31 May 2026 09:15:02 -0400
Subject: [PATCH] feat: add delete button to image toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Trash icon (🗑) appears in the per-image controls when an image is
selected, after the alignment buttons. Calls TipTap's deleteNode()
to remove the node from the document. Turns red on hover.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ImageView.jsx | 8 +++++++-
 frontend/src/styles/index.css         | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ImageView.jsx b/frontend/src/components/ImageView.jsx
index 977a334..689935f 100644
--- a/frontend/src/components/ImageView.jsx
+++ b/frontend/src/components/ImageView.jsx
@@ -2,7 +2,7 @@ import { NodeViewWrapper } from '@tiptap/react'
 
 const SIZES = ['25%', '50%', '75%', '100%']
 
-export default function ImageView({ node, updateAttributes, selected }) {
+export default function ImageView({ node, updateAttributes, deleteNode, selected }) {
   const { src, alt, width = '100%', align = 'center' } = node.attrs
 
   const imgStyle = {
@@ -36,6 +36,12 @@ export default function ImageView({ node, updateAttributes, selected }) {
               >{label}</button>
             ))}
           </div>
+          <span className="image-ctrl-sep" />
+          <button
+            className="img-ctrl-btn img-ctrl-delete"
+            onMouseDown={e => { e.preventDefault(); deleteNode() }}
+            title="Remove image"
+          >🗑</button>
         </div>
       )}
     </NodeViewWrapper>
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 19e09f2..9873365 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -1053,6 +1053,7 @@ button { cursor: pointer; font-family: inherit; }
 }
 .img-ctrl-btn:hover { color: var(--text); background: var(--bg-surface); border-color: var(--border); }
 .img-ctrl-btn.active { color: var(--accent-hi); border-color: var(--accent); }
+.img-ctrl-delete:hover { color: var(--danger); border-color: var(--danger); background: transparent; }
 
 .editor-body .ProseMirror ul,
 .editor-body .ProseMirror ol {