feat(builder): modern grouped rich-text toolbar with icons and tooltips

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

P0 user feedback: unstyled B/I/U/H2/List/1,2,3 buttons were not understandable for non-technical users.

- Toolbar buttons grouped by intent (text style | headings | lists | insert | advanced) with visual separators, hover states, consistent 30px hit targets
- Icons (PrimeIcons) for list/link/image/table/divider/code/embed; B/I/U keep their conventional letters but rendered in their own style (bold/italic/underline) as every mainstream editor does; every button gets a translated tooltip and aria-label (en/ru/hy)
- Code view toggle moved to the right edge, visually de-emphasized - it is the expert path, not a primary action
- Toolbar visually attaches to the editing surface (shared border, joined radius) so it reads as one control
This commit is contained in:
sdarbinyan
2026-07-19 08:48:22 +04:00
parent afaf79d327
commit 9eacd00136
7 changed files with 153 additions and 18 deletions

View File

@@ -687,6 +687,19 @@ export const en: Translations = {
linkVisibleDesc: 'Whether this navigation link is shown to shoppers.',
appName: 'Marketplace Builder',
backToDashboard: 'Back to dashboard',
htmlToolBold: 'Bold',
htmlToolItalic: 'Italic',
htmlToolUnderline: 'Underline',
htmlToolHeading: 'Heading',
htmlToolSubheading: 'Subheading',
htmlToolBulletList: 'Bulleted list',
htmlToolNumberedList: 'Numbered list',
htmlToolLink: 'Insert link',
htmlToolImage: 'Insert image',
htmlToolTable: 'Insert table',
htmlToolDivider: 'Divider line',
htmlToolCodeBlock: 'Code block',
htmlToolEmbed: 'Embed video',
breadcrumbRoot: 'Marketplace Builder',
statusComplete: 'Complete',
statusInProgress: 'In progress',