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',

View File

@@ -687,6 +687,19 @@ export const hy: Translations = {
linkVisibleDesc: 'Արդյո՞ք այս նավիգացիոն հղումը ցուցադրվում է գնորդներին։',
appName: 'Մարկետփլեյսի կոնստրուկտոր',
backToDashboard: 'Վերադառնալ կառավարման վահանակ',
htmlToolBold: 'Թավ',
htmlToolItalic: 'Շեղ',
htmlToolUnderline: 'Ընդգծված',
htmlToolHeading: 'Վերնագիր',
htmlToolSubheading: 'Ենթավերնագիր',
htmlToolBulletList: 'Կետային ցուցակ',
htmlToolNumberedList: 'Համարակալված ցուցակ',
htmlToolLink: 'Տեղադրել հղում',
htmlToolImage: 'Տեղադրել նկար',
htmlToolTable: 'Տեղադրել աղյուսակ',
htmlToolDivider: 'Բաժանարար գիծ',
htmlToolCodeBlock: 'Կոդի բլոկ',
htmlToolEmbed: 'Ներդնել տեսանյութ',
breadcrumbRoot: 'Մարկետփլեյսի կոնստրուկտոր',
statusComplete: 'Ավարտված',
statusInProgress: 'Ընթացքի մեջ',

View File

@@ -687,6 +687,19 @@ export const ru: Translations = {
linkVisibleDesc: 'Показывать ли эту ссылку навигации покупателям.',
appName: 'Конструктор маркетплейса',
backToDashboard: 'Назад в панель управления',
htmlToolBold: 'Жирный',
htmlToolItalic: 'Курсив',
htmlToolUnderline: 'Подчёркнутый',
htmlToolHeading: 'Заголовок',
htmlToolSubheading: 'Подзаголовок',
htmlToolBulletList: 'Маркированный список',
htmlToolNumberedList: 'Нумерованный список',
htmlToolLink: 'Вставить ссылку',
htmlToolImage: 'Вставить изображение',
htmlToolTable: 'Вставить таблицу',
htmlToolDivider: 'Разделительная линия',
htmlToolCodeBlock: 'Блок кода',
htmlToolEmbed: 'Встроить видео',
breadcrumbRoot: 'Конструктор маркетплейса',
statusComplete: 'Готово',
statusInProgress: 'В процессе',

View File

@@ -685,6 +685,20 @@ export interface Translations {
linkVisibleDesc: string;
appName: string;
backToDashboard: string;
htmlToolBold: string;
htmlToolItalic: string;
htmlToolUnderline: string;
htmlToolHeading: string;
htmlToolSubheading: string;
htmlToolBulletList: string;
htmlToolNumberedList: string;
htmlToolLink: string;
htmlToolImage: string;
htmlToolTable: string;
htmlToolDivider: string;
htmlToolCodeBlock: string;
htmlToolEmbed: string;
breadcrumbRoot: string;
statusComplete: string;
statusInProgress: string;