chris/write
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add delete button to image toolbar

Browse Source 
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>
This commit is contained in:
chris 2026-05-31 09:15:02 -04:00
parent 4db65151c8
commit 7f6179040c
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/ImageView.jsx
View File

@ -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>

1
frontend/src/styles/index.css
View File

@ -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 {