Prose
Оформлення вмісту, спільне для редактора й публічної сторінки.
Компонент майже порожній — уся цінність у ui-prose.css, який він підключає
своїм класом. UiRichTextEditor ставить рівно той самий клас на корінь
ProseMirror, тож редактор і читалка не можуть роз'їхатись: це WYSIWYG за
побудовою, а не за домовленістю.
Приклад
Оформлення вмісту
Абзац зі жирним, курсивом, підкресленням,
інлайновим кодом та посиланням.
Пресет «lead»: вступний абзац, більший за основний текст.
Іконка малюється через CSS, а не розмітку — інакше серверний санітайзер зніс би її, і варіант виродився б у звичайну цитату.
Попередження.
Помилка або незворотна дія.
Списки
- Перший рівень
- другий — коло
- третій — квадрат
- Ще пункт
Таблиця
| Токен | Роль |
|---|---|
--ink | основний текст |
--ink-muted | другорядний текст |
--line | межі |
const html = editor.getHTML()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 — атрибут, який санітизацію переживає.
Варіанти цитат
П'ять: quote, info, success, warning, danger — рівно стільки
статусних родин токенів у бібліотеці.
В оригіналі їх було вісім, але note, tip і caution лягали на ті самі
кольори, тобто були синонімами, які існували лише щоб їх плутали. Старі назви
лишаються псевдонімами на вході, тож наявний HTML читається без змін.
Специфічність
Селектор подвоєний: .ui-prose.ui-prose, і це не описка.
Демо на цьому сайті рендеряться всередині .docs-prose, чиї правила мають
ту саму вагу. За однакової ваги виграв би той, хто нижче в зібраному CSS —
тобто випадковий порядок імпортів. Подвоєння знімає цю залежність.
Помітили б це лише на власному сайті: у чужому проєкті .docs-prose немає, і
компонент виглядав би правильно. Найгірша форма помилки — та, де бреше саме
еталон.