feat(text-tool): implement Photoshop-style on-canvas text editor

- Replaced modal dialog with inline on-canvas text editor
- Text objects stored as editable entities (non-rasterized)
- Live preview with transparent textarea overlay
- Click on existing text to re-edit
- Drag transform handles to move text
- Auto-commit on click outside (via overlay)
- Text selection with visible highlight
- Hidden original text during editing to prevent double vision
- Position alignment fixes for editing existing text
- Keyboard shortcuts: Ctrl+Enter to commit, Escape to cancel

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-21 14:31:47 +01:00
parent 4e6dc6cb14
commit 69a468141c
7 changed files with 628 additions and 23 deletions

View File

@@ -330,3 +330,16 @@
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
}
/* Text editor - make text visible when selected */
@layer components {
.text-editor-input::selection {
background-color: var(--primary);
color: var(--primary-foreground);
}
.text-editor-input::-moz-selection {
background-color: var(--primary);
color: var(--primary-foreground);
}
}