Prose

Оформлення вмісту, спільне для редактора й публічної сторінки.

Компонент майже порожній — уся цінність у ui-prose.css, який він підключає своїм класом. UiRichTextEditor ставить рівно той самий клас на корінь ProseMirror, тож редактор і читалка не можуть роз'їхатись: це WYSIWYG за побудовою, а не за домовленістю.

Приклад

API

Props

Назва	Тип	Типово	Опис
`as`	divarticlesection	`"div"`	Кореневий тег. `article` для самостійного матеріалу, `div` для фрагмента.
`html`	`string`	—	HTML як рядок — типовий випадок для вмісту з бази чи редактора. Вставляється через `v-html` і НЕ санітизується: компонент не має власного санітайзера і не вдає, що має. Джерело HTML — ваша відповідальність, і чистити його треба на сервері.

Слоти

Назва	Опис
`default`	Вміст як розмітка Vue — альтернатива пропу `html`.

Коли використовувати

Для будь-якого HTML, який написала людина: стаття з бази, опис товару, результат роботи редактора.

Коли НЕ використовувати

Не для інтерфейсу. Тут навмисно перевизначено ul, table, a, code — усередині форми чи картки це заважатиме.

Не як заміну санітайзеру. Компонент вставляє HTML через v-html і не чистить його. Джерело HTML — ваша відповідальність, і чистити треба на сервері.

Чому окремий компонент, а не стилі всередині редактора

Бо публічна сторінка редактора не має. Якби оформлення жило в scoped-стилях UiRichTextEditor, читалці довелося б мати власну копію — і копії розійшлися б за перший же тиждень.

Цей клас багів уже коштував продакшену. Іконки варіантів цитат колись малювалися як <div> усередині renderHTML — вони існували лише в редакторі: серверний санітайзер зносив їх на публічних сторінках (ні div, ні mask-image не входять до allowlist), і всі вісім варіантів вироджувались у звичайну цитату. Тому іконка тут іде з CSS через ::before, а ключем слугує data-blockquote-type — атрибут, який санітизацію переживає.

HTML із пропа html вставляється прямо в корінь із класом ui-prose, без обгортки. Зайвий <div> між класом і блоками вмісту вимикав правила з > — останній блок лишався з нижнім відступом, і той самий HTML виглядав інакше, ніж у редакторі. Той самий клас багів, що й .docs-prose на обгортці навколо ContentRenderer.

Варіанти цитат

П'ять: quote, info, success, warning, danger — рівно стільки статусних родин токенів у бібліотеці.

В оригіналі їх було вісім, але note, tip і caution лягали на ті самі кольори, тобто були синонімами, які існували лише щоб їх плутали. Старі назви лишаються псевдонімами на вході, тож наявний HTML читається без змін.

Специфічність

Селектор подвоєний: .ui-prose.ui-prose, і це не описка.

Демо на цьому сайті рендеряться всередині .docs-prose, чиї правила мають ту саму вагу. За однакової ваги виграв би той, хто нижче в зібраному CSS — тобто випадковий порядок імпортів. Подвоєння знімає цю залежність.

Помітили б це лише на власному сайті: у чужому проєкті .docs-prose немає, і компонент виглядав би правильно. Найгірша форма помилки — та, де бреше саме еталон.