feat: implement TextSettings with reactive CSS editing

Implements functional text settings panel with real-time CSS updates:
- Text styling: italic, weight, alignment applied to body selector
- Typography: font-size applied to paragraph selector
- Colors: text color and background with Coloris picker
- Margins/padding: simple and detailed modes for paragraphs
- Smart sync between simple and detailed margin fields
- Automatic CSS property cleanup (removes conflicting properties)
- Parses existing stylesheet values including 4-value shorthand
- Default margins: 0mm top/left/right, 24mm bottom for paragraphs

Technical details:
- Uses Pinia store extractBlock() for CSS manipulation
- Implements isSyncingFromSimple flag to prevent watcher conflicts
- Syncs detailed fields when modifying simple field (even when expanded)
- Removes shorthand properties when using detailed, and vice versa
- Fixed background color alpha channel (0 → 1) for Coloris visibility

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-05 16:18:31 +01:00
parent ca95546180
commit 628f666d6a
2 changed files with 424 additions and 44 deletions

View file

@ -1,7 +1,7 @@
@page {
size: A4;
margin: 20mm 15mm 26mm 15mm;
background: rgba(255, 255, 255, 0);
background: rgba(255, 255, 255, 1);
}
@page {
@ -24,4 +24,5 @@ h2 {
p {
font-size: 1rem;
margin: 0mm 0mm 24mm 0mm;
}