Задача

Необходимо разработать блок инструментов (тулбар) для форматирования текста и управления версткой внутри HTML-контейнера с атрибутом contenteditable. Textarea использовать запрещено. Данные должны передаваться наружу единой функцией обратного вызова (callback), без сохранения в базу данных.

Общая структура компонента

Создать один корневой Vue-компонент, который делегирует события наверх через вызов функции. Внутри корневого компонента должны находиться два дочерних компонента:

• Верхняя панель (тулбар): содержит все кнопки форматирования текста (жирный, курсив, список, заголовки и т.д., согласно референсу на скриншоте).
• Рабочая область: контейнер с атрибутом contenteditable.

Требования к контейнеру для текста

• Область ввода должна быть "живым" редактором (не textarea), управляемым через contenteditable.
• Альтернативные варианты реализации рабочей области (iframe, чистый document designMode и т.д.) также допускаются, главное - избегать использования фреймворков для рендера текста и стандартной textarea.

Функционал панели инструментов

• Стандартные опции форматирования текста (HTML SWH), как указано на скриншоте (выравнивание, списки, заголовки, цвета, размеры, жирность).
• Особое внимание рheбрам (линейкам): они должны держать отступы абзацев (например, изменение margin у блока). Желательно сделать их перетаскиваемыми для возможности динамической настройки отступов переноса текста (номер строки эмуляции вертикального ритма).

Взаимодействие:

• При любом изменении текста или переключении инструмента корневой компонент вызывает одну переданную из родительского компонента функцию (emit/callback), которая передает актуальное содержимое контейнера и/или состояние модификации (type-строку).

Технологический стек

• Vue.js 3 (опционально Options / Composition, ТЗ склоняется к Options API).
• Отсутствие сторонних «canvas-» и сложных Hоковских фреймворков text-mate/код-mirror. Только голые браузерные API и стандартные Browser-Snapshots (execCommand или полифилы. Допускается библиотека скрин-снятия приставок от сторон если соприкасается с "древовидностью ами. не текстлв")). точная информация уточняется.