[{"data":1,"prerenderedAt":252},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fprose":3,"component-meta:UiProse":217},{"id":4,"title":5,"body":6,"component":203,"dependsOn":204,"description":206,"emitDescriptions":207,"extension":208,"meta":209,"navigation":210,"order":211,"path":212,"seo":213,"status":214,"stem":215,"__hash__":216},"docs\u002Fdocs\u002Fcomponents\u002Fprose.md","Prose",{"type":7,"value":8,"toc":192},"minimark",[9,27,32,38,42,45,49,52,56,72,83,87,93,124,128,147,164,168,175,186],[10,11,12,13,17,18,21,22,26],"p",{},"Компонент майже порожній — уся цінність у ",[14,15,16],"code",{},"ui-prose.css",", який він підключає\nсвоїм класом. ",[14,19,20],{},"UiRichTextEditor"," ставить ",[23,24,25],"strong",{},"рівно той самий"," клас на корінь\nProseMirror, тож редактор і читалка не можуть роз'їхатись: це WYSIWYG за\nпобудовою, а не за домовленістю.",[28,29,31],"h2",{"id":30},"приклад","Приклад",[33,34],"component-preview",{":bare":35,"name":36,"stage":37},"true","prose-basic","min-h-96",[28,39,41],{"id":40},"api","API",[43,44],"component-api",{},[28,46,48],{"id":47},"коли-використовувати","Коли використовувати",[10,50,51],{},"Для будь-якого HTML, який написала людина: стаття з бази, опис товару,\nрезультат роботи редактора.",[28,53,55],{"id":54},"коли-не-використовувати","Коли НЕ використовувати",[10,57,58,59,62,63,62,66,62,69,71],{},"Не для інтерфейсу. Тут навмисно перевизначено ",[14,60,61],{},"ul",", ",[14,64,65],{},"table",[14,67,68],{},"a",[14,70,14],{}," —\nусередині форми чи картки це заважатиме.",[10,73,74,75,78,79,82],{},"Не як заміну санітайзеру. Компонент вставляє HTML через ",[14,76,77],{},"v-html"," і ",[23,80,81],{},"не\nчистить його",". Джерело HTML — ваша відповідальність, і чистити треба на\nсервері.",[28,84,86],{"id":85},"чому-окремий-компонент-а-не-стилі-всередині-редактора","Чому окремий компонент, а не стилі всередині редактора",[10,88,89,90,92],{},"Бо публічна сторінка редактора не має. Якби оформлення жило в scoped-стилях\n",[14,91,20],{},", читалці довелося б мати власну копію — і копії розійшлися\nб за перший же тиждень.",[10,94,95,96,99,100,103,104,107,108,111,112,115,116,119,120,123],{},"Цей клас багів уже коштував продакшену. Іконки варіантів цитат колись малювалися як ",[14,97,98],{},"\u003Cdiv>","\nусередині ",[14,101,102],{},"renderHTML"," — вони існували ",[23,105,106],{},"лише в редакторі",": серверний\nсанітайзер зносив їх на публічних сторінках (ні ",[14,109,110],{},"div",", ні ",[14,113,114],{},"mask-image"," не\nвходять до allowlist), і всі вісім варіантів вироджувались у звичайну цитату.\nТому іконка тут іде з CSS через ",[14,117,118],{},"::before",", а ключем слугує\n",[14,121,122],{},"data-blockquote-type"," — атрибут, який санітизацію переживає.",[28,125,127],{"id":126},"варіанти-цитат","Варіанти цитат",[10,129,130,131,62,134,62,137,62,140,62,143,146],{},"П'ять: ",[14,132,133],{},"quote",[14,135,136],{},"info",[14,138,139],{},"success",[14,141,142],{},"warning",[14,144,145],{},"danger"," — рівно стільки\nстатусних родин токенів у бібліотеці.",[10,148,149,150,62,153,78,156,159,160,163],{},"В оригіналі їх було вісім, але ",[14,151,152],{},"note",[14,154,155],{},"tip",[14,157,158],{},"caution"," лягали на ті самі\nкольори, тобто були синонімами, які існували лише щоб їх плутали. Старі назви\nлишаються псевдонімами ",[23,161,162],{},"на вході",", тож наявний HTML читається без змін.",[28,165,167],{"id":166},"специфічність","Специфічність",[10,169,170,171,174],{},"Селектор подвоєний: ",[14,172,173],{},".ui-prose.ui-prose",", і це не описка.",[10,176,177,178,181,182,185],{},"Демо на цьому сайті рендеряться ",[23,179,180],{},"всередині"," ",[14,183,184],{},".docs-prose",", чиї правила мають\nту саму вагу. За однакової ваги виграв би той, хто нижче в зібраному CSS —\nтобто випадковий порядок імпортів. Подвоєння знімає цю залежність.",[10,187,188,189,191],{},"Помітили б це лише на власному сайті: у чужому проєкті ",[14,190,184],{}," немає, і\nкомпонент виглядав би правильно. Найгірша форма помилки — та, де бреше саме\nеталон.",{"title":193,"searchDepth":194,"depth":194,"links":195},"",2,[196,197,198,199,200,201,202],{"id":30,"depth":194,"text":31},{"id":40,"depth":194,"text":41},{"id":47,"depth":194,"text":48},{"id":54,"depth":194,"text":55},{"id":85,"depth":194,"text":86},{"id":126,"depth":194,"text":127},{"id":166,"depth":194,"text":167},"UiProse",[205],"app\u002Fassets\u002Fcss\u002Fui-prose.css","Оформлення вмісту, спільне для редактора й публічної сторінки.",{},"md",{},true,19,"\u002Fdocs\u002Fcomponents\u002Fprose",{"title":5,"description":206},"stable","docs\u002Fcomponents\u002Fprose","GoKow80aTwGdJU5xG_-Bz62DhU5Z1fu4Yj2OqH8yi0g",{"mode":218,"prefetch":219,"preload":219,"filePath":220,"declarationPath":221,"pascalName":203,"kebabName":222,"chunkName":223,"priority":224,"_scanned":210,"meta":225},"all",false,"app\u002Fcomponents\u002Fui\u002FUiProse.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiProse.vue","ui-prose","components\u002Fui-prose",1,{"type":224,"props":226,"slots":243,"events":249,"exposed":250,"hash":251},[227,238],{"name":228,"global":219,"default":229,"description":230,"tags":231,"required":219,"type":232,"schema":233},"as","\"div\"","Кореневий тег. `article` для самостійного матеріалу, `div` для фрагмента.",[],"\"div\" | \"article\" | \"section\"",{"kind":234,"type":232,"schema":235},"enum",{"0":229,"1":236,"2":237},"\"article\"","\"section\"",{"name":239,"global":219,"description":240,"tags":241,"required":219,"type":242,"schema":242},"html","HTML як рядок — типовий випадок для вмісту з бази чи редактора.\r\n\r\nВставляється через `v-html` і НЕ санітизується: компонент не має\r\nвласного санітайзера і не вдає, що має. Джерело HTML — ваша\r\nвідповідальність, і чистити його треба на сервері.",[],"string",[244],{"name":245,"type":246,"description":247,"tags":248,"schema":246},"default","any","Вміст як розмітка Vue — альтернатива пропу `html`.",[],[],[],"l1TfqEx8om09HHNYmOybi6JQBl4Xe8DVWjYeG_GYghk",1788072639725]