@vigilkids/section-renderer-vue 0.0.1 → 0.1.1

package/dist/sections/article/vigilkids/ArticleQuestion.vue

@@ -25,34 +25,22 @@ const s = computed(() => props.settings)
 const title = computed(() => (s.value.title as string) || 'Question:')
 const renderedContent = computed(() => renderContent(s.value.content))
 
-const { blockEditableAttrs } = useInlineEdit({
+const { editableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
-<!-- Visiva: blocks Q&A 列表模式 -->
-  <div v-if="blockOrder.length > 0" class="qa-card">
-    <template v-for="blockId in blockOrder" :key="blockId">
-      <div v-if="blocks[blockId]" class="qa-card__item">
-        <h3 class="qa-card__question" v-bind="blockEditableAttrs(blockId, 'question')">{{ blocks[blockId]!.settings.question }}</h3>
-        <p class="qa-card__answer">{{ blocks[blockId]!.settings.answer }}</p>
-      </div>
-    </template>
-  </div>
-
-  <!-- VigilKids: 单条 richtext 问答 -->
-  <div v-else class="article-question">
-    <p class="article-question-title">{{ title }}</p>
-    <div class="article-question-content" v-html="renderedContent" />
+  <div class="article-question">
+    <p class="article-question-title" v-bind="editableAttrs('title')">
+      {{ title }}
+    </p>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p v-html="renderedContent" />
   </div>
 </template>
-
-<style scoped>
-.article-question{background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:var(--article-text,#3a4259);margin:30px 0;padding:30px 30px 30px 82px}.article-question-title{font-size:20px;font-weight:700;line-height:38px;margin-bottom:20px;margin-top:0;position:relative}.article-question-title:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' fill='none' viewBox='0 0 38 38'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23f1981c' d='M19 38C8.506 38 0 29.492 0 19 0 8.506 8.506 0 19 0s19 8.506 19 19c0 10.492-8.506 19-19 19m0-35.078C10.121 2.922 2.923 10.12 2.923 19S10.121 35.077 19 35.077 35.077 27.879 35.077 19 27.879 2.922 19 2.922m5.117 14.064q-.564.72-1.213 1.277-.65.558-1.213 1.114a6.2 6.2 0 0 0-.936 1.156 2.47 2.47 0 0 0-.37 1.327q0 .614.157 1.114a7 7 0 0 0 .314.842h-3.012a5.6 5.6 0 0 1-.228-.928q-.1-.57-.1-1.127 0-.871.35-1.577.349-.708.87-1.321.52-.614 1.128-1.184.606-.573 1.127-1.114t.87-1.141.35-1.314q0-.642-.257-1.12a2.3 2.3 0 0 0-.706-.8 3.1 3.1 0 0 0-1.028-.477 4.7 4.7 0 0 0-1.235-.158q-2.126 0-4.052 1.899v-3.298q2.339-1.37 4.852-1.37 1.157 0 2.183.3a5.5 5.5 0 0 1 1.8.885q.769.585 1.213 1.455.442.873.442 2.027 0 1.1-.37 1.956a7.2 7.2 0 0 1-.936 1.577m-4.646 9.056q.813 0 1.427.571.6.529.6 1.342 0 .8-.6 1.342-.628.556-1.427.556a2.1 2.1 0 0 1-1.442-.556q-.6-.542-.599-1.342 0-.814.6-1.342.614-.57 1.44-.571'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h38v38H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat 50%;background-size:cover;content:"";height:38px;left:-52px;position:absolute;top:0;width:38px}.article-question-content :deep(p){color:var(--article-text,#3a4259);margin-top:10px}.article-question-content :deep(p:first-child){margin-top:0}.article-question-content :deep(p:last-child){margin-bottom:0}.qa-card{background:var(--article-bg-light,#f3f4f6);border-radius:10px;display:flex;flex-direction:column;font-size:14px;gap:24px;margin:40px 0;padding:20px 16px}.qa-card__question{color:var(--article-text,#1f2937);font-size:14px;font-weight:600;margin:0 0 8px}.qa-card__answer{color:var(--article-text-muted,#6b7280);line-height:1.6;margin:0}@media (min-width:769px){.qa-card{border-radius:20px;padding:24px 20px}.qa-card,.qa-card__question{font-size:16px}}@media (max-width:768px){.article-question{padding:20px}.article-question-title{padding-left:52px}.article-question-title:before{left:0}}
-</style>

package/dist/sections/article/vigilkids/ArticleQuote.vue

@@ -28,23 +28,21 @@ const { editableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
-<div class="article-info">
-    <p v-if="s.title" class="article-info-title" v-bind="editableAttrs('title')">{{ s.title }}</p>
-    <div class="article-info-content" v-html="renderedContent" />
-    <cite v-if="s.attribution" class="article-info-attribution">
-      <span class="article-info-divider"></span>
-      <span v-bind="editableAttrs('attribution')">by {{ s.attribution }}</span>
-    </cite>
+  <div class="article-info">
+    <p v-if="s.title" class="article-info-title" v-bind="editableAttrs('title')">
+      {{ s.title }}
+    </p>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p class="article-info-content" v-html="renderedContent" />
+    <p v-if="s.attribution" v-bind="editableAttrs('attribution')">
+      —— {{ s.attribution }}
+    </p>
   </div>
 </template>
-
-<style scoped>
-.article-info{background:var(--article-quote-bg,#f7f7f7);border:var(--article-quote-border,none);color:var(--article-text,#3a4259);font-size:16px;line-height:24px;margin:30px 0 14px;padding:30px;position:relative}.article-info:before{background:var(--article-quote-bar,#24c790);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-info-title{font-size:20px;font-weight:700;line-height:23px;margin-top:0}.article-info-content,.article-info-title{color:var(--article-text,#3a4259);margin-bottom:14px}.article-info-content{font-size:16px;font-style:italic;line-height:24px}.article-info-content :deep(p){margin-top:10px}.article-info-content :deep(p:first-child){margin-top:0}.article-info-attribution{align-items:center;display:flex;font-style:normal;margin-bottom:0;margin-top:10px}.article-info-divider{background:var(--article-text-muted,#6b7280);display:inline-block;height:1px;margin-right:8px;vertical-align:middle;width:48px}@media (max-width:768px){.article-info{font-size:14px;padding:20px 16px}.article-info:before{height:100%;width:4px}.article-info-title{font-size:18px;line-height:21px;margin-bottom:10px}.article-info-content{font-size:14px;line-height:21px}.article-info-attribution{text-align:right}}
-</style>

package/dist/sections/article/vigilkids/ArticleStepList.vue

@@ -27,23 +27,23 @@ const { blockEditableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
-<ul class="step-list">
+  <ul class="step-list">
     <template v-for="blockId in blockOrder" :key="blockId">
       <li v-if="blocks[blockId]">
-        <span class="primary-color" v-bind="blockEditableAttrs(blockId, 'label')">{{ blocks[blockId]!.settings.label }}</span>
-        {{ blocks[blockId]!.settings.description }}
+        <span class="primary-color" v-bind="blockEditableAttrs(blockId, 'label')">{{
+          blocks[blockId]!.settings.label
+        }}</span>
+        <span v-bind="blockEditableAttrs(blockId, 'description')">{{
+          blocks[blockId]!.settings.description
+        }}</span>
       </li>
     </template>
   </ul>
 </template>
-
-<style scoped>
-.step-list{list-style:none;margin-bottom:30px;margin-top:20px;padding:0}.step-list li:not(:last-child){margin-bottom:24px}.step-list li{color:var(--article-text,#3a4259);font-size:16px;line-height:24px}.step-list li span{font-weight:700}.step-list .primary-color{color:var(--article-primary-hover,#1ba97a)}@media (max-width:768px){.step-list li{font-size:14px;line-height:21px}.step-list li:not(:last-child){margin-bottom:21px}}
-</style>

package/dist/sections/article/vigilkids/ArticleSubheading.vue

@@ -27,30 +27,21 @@ const { editableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
-<h3 :class="['article-subheading', `article-subheading--${variant}`]">
-    <!-- numbered: 实心绿色圆形+白色数字 (VigilKids) -->
-    <span v-if="variant === 'numbered' && s.number" class="article-subheading__number" v-bind="editableAttrs('number')">
-      {{ s.number }}
-    </span>
-    <!-- pill: 绿色药丸标签 (Visiva) -->
-    <span v-else-if="variant === 'pill' && s.label" class="article-subheading__pill" v-bind="editableAttrs('label')">
-      {{ s.label }}
-    </span>
-    <!-- icon: 浅色圆形+深色数字 (Visiva) -->
-    <span v-else-if="variant === 'icon' && s.number" class="article-subheading__icon" v-bind="editableAttrs('number')">
+  <h3 :class="{ 'black-h3': variant === 'numbered' }">
+    <span
+      v-if="variant === 'numbered' && s.number"
+      class="green-text"
+      v-bind="editableAttrs('number')"
+    >
       {{ s.number }}
     </span>
     <span v-bind="editableAttrs('title')">{{ s.title }}</span>
   </h3>
 </template>
-
-<style scoped>
-.article-subheading{align-items:center;color:var(--article-primary-hover,#1ba97a);display:flex;font-size:20px;font-weight:700;line-height:23px;margin-top:30px}.article-subheading--numbered{color:var(--article-text,#3a4259)}.article-subheading__number{align-items:center;background:var(--article-sub-number-bg,var(--article-primary,#24c790));border:var(--article-sub-number-border,none);border-radius:50%;color:var(--article-sub-number-color,#fff);display:flex;height:36px;justify-content:center;margin-right:14px;min-width:36px;width:36px}.article-subheading__pill{background:var(--article-primary,#24c790);border-radius:20px;color:#fff;display:inline-flex;height:22px;padding:0 8px}.article-subheading__icon,.article-subheading__pill{align-items:center;flex-shrink:0;font-size:14px;font-weight:600;justify-content:center;margin-right:8px}.article-subheading__icon{background:var(--article-highlight,#ecfdf5);border-radius:50%;color:var(--article-text,#3a4259);display:flex;height:24px;min-width:24px;width:24px}.article-subheading--icon,.article-subheading--pill{color:var(--article-text,#3a4259);font-weight:700}@media (max-width:768px){.article-subheading{font-size:18px}}
-</style>

package/dist/sections/article/vigilkids/ArticleTable.vue

@@ -18,12 +18,15 @@ interface ColumnDef {
 }
 
 function parseJsonOrArray<T>(value: unknown): T[] {
-  if (Array.isArray(value)) return value as T[]
+  if (Array.isArray(value))
+    return value as T[]
   if (typeof value === 'string') {
     try {
       const parsed = JSON.parse(value)
-      if (Array.isArray(parsed)) return parsed as T[]
-    } catch {
+      if (Array.isArray(parsed))
+        return parsed as T[]
+    }
+    catch {
       /* JSON 解析失败，返回空数组 */
     }
   }
@@ -32,13 +35,11 @@ function parseJsonOrArray<T>(value: unknown): T[] {
 
 const isSticky = computed(() => String(s.value.variant) === 'sticky')
 
-const columns = computed<ColumnDef[]>(() =>
-  parseJsonOrArray<ColumnDef>(s.value.columns),
-)
+const columns = computed<ColumnDef[]>(() => parseJsonOrArray<ColumnDef>(s.value.columns))
 
 const rows = computed(() =>
   props.blockOrder
-    .filter((id) => props.blocks[id]?.type === 'table-row')
+    .filter(id => props.blocks[id]?.type === 'table-row')
     .map((id) => {
       const block = props.blocks[id]!
       return parseJsonOrArray<string>(block.settings.cells)
@@ -47,8 +48,8 @@ const rows = computed(() =>
 </script>
 
 <template>
-<div :class="['contrast-table', { 'sticky-table': isSticky }]">
-    <table>
+  <div class="contrast-table" :class="[{ 'sticky-table': isSticky }]">
+    <table cellspacing="0">
       <thead align="left">
         <tr>
           <th
@@ -69,7 +70,3 @@ const rows = computed(() =>
     </table>
   </div>
 </template>
-
-<style scoped>
-.contrast-table{background:#fff;border:1px solid var(--article-border,#e5e7eb);margin:30px 0;overflow-x:auto}.contrast-table table{border-spacing:0;color:var(--article-text,#3a4259);text-align:center;width:100%}.contrast-table td,.contrast-table th{border-bottom:1px solid var(--article-border,#e5e7eb);border-right:1px solid var(--article-border,#e5e7eb);padding:18px 20px;width:25%}.contrast-table td:last-child,.contrast-table th:last-child{border-right:none}.contrast-table thead{font-size:16px}.contrast-table tbody tr:last-child td{border-bottom:none}.contrast-table tr td,.contrast-table tr th{background-color:#fff}.contrast-table tbody tr:nth-child(2n) td{background-color:var(--article-bg-light,#f5f9fc)}.contrast-table thead tr th{background-color:var(--article-table-header,#374151);color:var(--article-table-header-text,#fff)}.contrast-table.sticky-table tr td:first-child,.contrast-table.sticky-table tr th:first-child{font-weight:700;left:0;position:sticky;z-index:2}.contrast-table.sticky-table tr td:first-child:after,.contrast-table.sticky-table tr th:first-child:after{background-image:linear-gradient(270deg,rgba(49,49,49,0),rgba(0,0,0,.04));bottom:0;content:"";position:absolute;right:-16px;top:0;width:16px;z-index:1}.contrast-table tr td :deep(a){color:var(--article-primary-hover,#1ba97a);font-weight:400}@media (max-width:768px){.contrast-table:not(.sticky-table) tr th{min-width:200px!important}.contrast-table tbody{font-size:14px}}
-</style>

package/dist/sections/article/vigilkids/ArticleToc.vue

@@ -10,7 +10,7 @@ interface TocGroup {
   text: string
   anchor: string
   hot: boolean
-  children: { id: string; text: string; anchor: string }[]
+  children: { id: string, text: string, anchor: string }[]
 }
 
 const props = defineProps<{
@@ -36,7 +36,8 @@ const tocGroups = computed<TocGroup[]>(() => {
 
   for (const blockId of props.blockOrder) {
     const block = props.blocks[blockId]
-    if (!block) continue
+    if (!block)
+      continue
 
     if (block.type === 'toc-h2') {
       groups.push({
@@ -46,7 +47,8 @@ const tocGroups = computed<TocGroup[]>(() => {
         hot: Boolean(block.settings.hot),
         children: [],
       })
-    } else if (block.type === 'toc-h3' && groups.length > 0) {
+    }
+    else if (block.type === 'toc-h3' && groups.length > 0) {
       groups[groups.length - 1]!.children.push({
         id: blockId,
         text: String(block.settings.text || ''),
@@ -58,22 +60,24 @@ const tocGroups = computed<TocGroup[]>(() => {
   return groups
 })
 
-const hotIconSrc =
-  "data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5479 11.9702C10.0966 11.9702 9.71456 12.5389 9.71456 13.2188C9.71456 13.8948 10.0966 14.4668 10.5479 14.4668C10.9992 14.4668 11.3819 13.8968 11.3819 13.2175C11.3819 12.5389 10.9999 11.9689 10.5485 11.9689L10.5479 11.9702ZM15.3977 3.54841C15.3258 3.46817 15.2338 3.40848 15.1312 3.37545C15.0286 3.34242 14.919 3.33723 14.8138 3.36042C14.6018 3.41108 14.4271 3.57374 14.3471 3.79507C14.1688 4.31816 14.0036 4.84565 13.8518 5.37704C13.6385 4.93438 13.3985 4.50972 13.1318 4.10374C12.1478 2.60444 10.7985 1.3318 8.88657 0.0985037C8.7956 0.0391916 8.69032 0.00547728 8.58182 0.000902909C8.47331 -0.00367146 8.36558 0.021063 8.26993 0.0725076C8.17116 0.129583 8.08767 0.209723 8.02661 0.306079C7.96554 0.402435 7.92871 0.512143 7.91927 0.625828C7.65327 3.22973 7.16395 5.86901 5.492 7.72696L5.27001 7.25364C5.0747 6.84432 4.89202 6.45901 4.7747 6.12901C4.64802 5.76569 4.27671 5.5837 3.94538 5.72237C3.7931 5.78848 3.67093 5.90898 3.60272 6.06034L3.46806 6.347C2.64741 8.08696 1.52544 10.4736 1.3561 12.4915C1.00477 16.7687 4.55669 19.4567 8.25059 19.9033C9.06192 20.0013 9.87722 20.0233 10.6919 19.9733C13.5965 19.784 17.125 18.1554 18.3143 14.1468C19.0843 11.5449 18.7837 7.21032 15.3977 3.54708V3.54774V3.54841ZM7.82794 15.1521C7.82794 15.4901 7.57528 15.7655 7.26462 15.7655C6.95464 15.7668 6.70329 15.4921 6.70196 15.1521V13.7588L5.542 13.7788V15.1861C5.542 15.5234 5.28934 15.7994 4.97868 15.7994C4.66936 15.8008 4.41669 15.5261 4.41536 15.1861V11.4189C4.41536 11.0802 4.66735 10.8056 4.97868 10.8056C5.28934 10.8056 5.54134 11.0802 5.54134 11.4189V12.5515L6.70196 12.5322V11.3855C6.70196 11.0469 6.95395 10.7716 7.26462 10.7716C7.57528 10.7716 7.82727 11.0469 7.82727 11.3849V15.1515H7.82794V15.1521ZM10.5479 15.6908C9.4679 15.6908 8.59059 14.5801 8.59059 13.2155C8.59059 11.8509 9.4679 10.7402 10.5479 10.7402C11.6278 10.7402 12.5078 11.8509 12.5078 13.2155C12.5065 14.5801 11.6278 15.6908 10.5479 15.6908V15.6908ZM15.6504 12.1022H14.9351V15.1188C14.9351 15.4568 14.6838 15.7321 14.3731 15.7321C14.0631 15.7334 13.8111 15.4588 13.8091 15.1188V12.1022H13.0951C13.0202 12.1022 12.9461 12.0862 12.8778 12.0553C12.8095 12.0244 12.7486 11.9792 12.6991 11.9229C12.5931 11.8023 12.5339 11.6475 12.5325 11.4869C12.5325 11.1482 12.7845 10.8736 13.0951 10.8736H15.6484C15.9591 10.8736 16.2104 11.1482 16.2104 11.4869C16.2099 11.6477 16.1506 11.8028 16.0437 11.9229C15.9951 11.9796 15.9348 12.0251 15.8669 12.0562C15.799 12.0872 15.7251 12.1032 15.6504 12.1029V12.1022Z' fill='%23F74343'/%3E%3C/svg%3E"
+const hotIconSrc
+  = 'data:image/svg+xml,%3Csvg viewBox=\'0 0 20 20\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M10.5479 11.9702C10.0966 11.9702 9.71456 12.5389 9.71456 13.2188C9.71456 13.8948 10.0966 14.4668 10.5479 14.4668C10.9992 14.4668 11.3819 13.8968 11.3819 13.2175C11.3819 12.5389 10.9999 11.9689 10.5485 11.9689L10.5479 11.9702ZM15.3977 3.54841C15.3258 3.46817 15.2338 3.40848 15.1312 3.37545C15.0286 3.34242 14.919 3.33723 14.8138 3.36042C14.6018 3.41108 14.4271 3.57374 14.3471 3.79507C14.1688 4.31816 14.0036 4.84565 13.8518 5.37704C13.6385 4.93438 13.3985 4.50972 13.1318 4.10374C12.1478 2.60444 10.7985 1.3318 8.88657 0.0985037C8.7956 0.0391916 8.69032 0.00547728 8.58182 0.000902909C8.47331 -0.00367146 8.36558 0.021063 8.26993 0.0725076C8.17116 0.129583 8.08767 0.209723 8.02661 0.306079C7.96554 0.402435 7.92871 0.512143 7.91927 0.625828C7.65327 3.22973 7.16395 5.86901 5.492 7.72696L5.27001 7.25364C5.0747 6.84432 4.89202 6.45901 4.7747 6.12901C4.64802 5.76569 4.27671 5.5837 3.94538 5.72237C3.7931 5.78848 3.67093 5.90898 3.60272 6.06034L3.46806 6.347C2.64741 8.08696 1.52544 10.4736 1.3561 12.4915C1.00477 16.7687 4.55669 19.4567 8.25059 19.9033C9.06192 20.0013 9.87722 20.0233 10.6919 19.9733C13.5965 19.784 17.125 18.1554 18.3143 14.1468C19.0843 11.5449 18.7837 7.21032 15.3977 3.54708V3.54774V3.54841ZM7.82794 15.1521C7.82794 15.4901 7.57528 15.7655 7.26462 15.7655C6.95464 15.7668 6.70329 15.4921 6.70196 15.1521V13.7588L5.542 13.7788V15.1861C5.542 15.5234 5.28934 15.7994 4.97868 15.7994C4.66936 15.8008 4.41669 15.5261 4.41536 15.1861V11.4189C4.41536 11.0802 4.66735 10.8056 4.97868 10.8056C5.28934 10.8056 5.54134 11.0802 5.54134 11.4189V12.5515L6.70196 12.5322V11.3855C6.70196 11.0469 6.95395 10.7716 7.26462 10.7716C7.57528 10.7716 7.82727 11.0469 7.82727 11.3849V15.1515H7.82794V15.1521ZM10.5479 15.6908C9.4679 15.6908 8.59059 14.5801 8.59059 13.2155C8.59059 11.8509 9.4679 10.7402 10.5479 10.7402C11.6278 10.7402 12.5078 11.8509 12.5078 13.2155C12.5065 14.5801 11.6278 15.6908 10.5479 15.6908V15.6908ZM15.6504 12.1022H14.9351V15.1188C14.9351 15.4568 14.6838 15.7321 14.3731 15.7321C14.0631 15.7334 13.8111 15.4588 13.8091 15.1188V12.1022H13.0951C13.0202 12.1022 12.9461 12.0862 12.8778 12.0553C12.8095 12.0244 12.7486 11.9792 12.6991 11.9229C12.5931 11.8023 12.5339 11.6475 12.5325 11.4869C12.5325 11.1482 12.7845 10.8736 13.0951 10.8736H15.6484C15.9591 10.8736 16.2104 11.1482 16.2104 11.4869C16.2099 11.6477 16.1506 11.8028 16.0437 11.9229C15.9951 11.9796 15.9348 12.0251 15.8669 12.0562C15.799 12.0872 15.7251 12.1032 15.6504 12.1029V12.1022Z\' fill=\'%23F74343\'/%3E%3C/svg%3E'
 
 const { editableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
-<ul class="level-1">
-    <li class="table-of-contents" v-bind="editableAttrs('title')">{{ title }}</li>
+  <ul class="level-1">
+    <li class="table-of-contents" v-bind="editableAttrs('title')">
+      {{ title }}
+    </li>
     <template v-for="group in tocGroups" :key="group.id">
       <li :class="{ 'hot-link': group.hot }">
         <a :href="`#${group.anchor}`">
@@ -85,7 +89,7 @@ const { editableAttrs } = useInlineEdit({
             width="20"
             height="20"
             alt="hot"
-          />
+          >
         </a>
       </li>
       <ul v-if="group.children.length > 0" class="level-2">
@@ -96,7 +100,3 @@ const { editableAttrs } = useInlineEdit({
     </template>
   </ul>
 </template>
-
-<style scoped>
-.level-1{background:#f5f9fc;border-radius:10px;display:flex;flex-direction:column;font-weight:700;gap:10px;line-height:19px;list-style:none;margin-bottom:20px;margin-top:30px;padding:28px 28px 28px 74px}.level-1 li,.level-2 li{align-items:center;display:flex;position:relative;width:-moz-fit-content;width:fit-content}.level-1 li:not(.table-of-contents):before,.level-2 li:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='12' fill='none' viewBox='0 0 21 12'%3E%3Cpath fill='%2324c790' d='M20.53 6.53a.75.75 0 0 0 0-1.06L15.757.697a.75.75 0 0 0-1.06 1.06L18.939 6l-4.242 4.243a.75.75 0 0 0 1.06 1.06zM0 6v.75h20v-1.5H0z'/%3E%3C/svg%3E") no-repeat 50%;background-size:cover;content:"";height:12px;left:-34px;position:absolute;top:3.5px;width:21px}.level-1 li.table-of-contents{font-size:18px;margin-left:-37px}.level-2{display:flex;flex-direction:column;gap:10px;list-style:none;margin-left:35px;padding:0}.level-1 a,.level-2 a{align-items:center;color:inherit;display:flex;text-decoration:none}.hot-icon{flex-shrink:0;margin-left:4px}@media (max-width:768px){.level-1 li.table-of-contents{font-size:16px}.level-1{font-size:14px;line-height:16px;margin-top:20px;padding:24px 20px 24px 54px}}
-</style>

package/dist/sections/article/visiva/ArticleBulletList.vue

@@ -27,18 +27,17 @@ const { blockEditableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
 <ul class="blog-h3-style1-list">
     <template v-for="blockId in blockOrder" :key="blockId">
-      <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
-        {{ blocks[blockId]!.settings.text }}
-      </li>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
     </template>
   </ul>
 </template>

package/dist/sections/article/visiva/ArticleCta.vue

@@ -31,9 +31,9 @@ const { editableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
@@ -46,10 +46,21 @@ const { editableAttrs } = useInlineEdit({
       :class="{ 'blog-button-single--disabled': editorMode }"
     >
       <!-- #living-beauty -->
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z" fill="currentColor"/>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z"
+          fill="currentColor"
+        />
       </svg>
-      <span class="blog-button-single-text" v-bind="editableAttrs('button_text')">{{ s.button_text }}</span>
+      <span class="blog-button-single-text" v-bind="editableAttrs('button_text')">{{
+        s.button_text
+      }}</span>
     </a>
   </div>
 
@@ -62,14 +73,27 @@ const { editableAttrs } = useInlineEdit({
         :class="{ 'blog-button-group--disabled': editorMode }"
       >
         <!-- #living-beauty2 -->
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z" fill="currentColor"/>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z"
+            fill="currentColor"
+          />
         </svg>
-        <span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{ s.button_text }}</span>
+        <span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{
+          s.button_text
+        }}</span>
       </a>
       <p v-if="s.button_caption" class="blog-button-group-note">
         <img src="https://cdn.visiva.ai/blog/coupon.svg" alt="Coupon" class="blog-icon-17">
-        <span class="blog-button-group-note-text" v-bind="editableAttrs('button_caption')">{{ s.button_caption }}</span>
+        <span class="blog-button-group-note-text" v-bind="editableAttrs('button_caption')">{{
+          s.button_caption
+        }}</span>
       </p>
     </div>
 
@@ -80,25 +104,62 @@ const { editableAttrs } = useInlineEdit({
         :class="{ 'blog-button-group--disabled': editorMode }"
       >
         <!-- #market -->
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <mask id="market-mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-            <rect width="16" height="16" fill="#D9D9D9"/>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <mask
+            id="market-mask0"
+            style="mask-type: alpha"
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="0"
+            width="16"
+            height="16"
+          >
+            <rect width="16" height="16" fill="#D9D9D9" />
           </mask>
           <g mask="url(#market-mask0)">
-            <path d="M5.14284 13.7144C4.50998 13.7144 4 14.2243 4 14.8572C4 15.4901 4.50998 16 5.14284 16C5.77571 16 6.28569 15.4901 6.28569 14.8572C6.28569 14.2243 5.77571 13.7144 5.14284 13.7144Z" fill="black"/>
-            <path d="M13.1463 13.7144C12.5134 13.7144 12.0034 14.2243 12.0034 14.8572C12.0034 15.4901 12.5134 16 13.1463 16C13.7791 16 14.2891 15.4901 14.2891 14.8572C14.2891 14.2243 13.7761 13.7144 13.1463 13.7144Z" fill="black"/>
-            <path d="M15.5789 2.22449C15.2871 1.8927 14.8846 1.71451 14.4484 1.71451H2.99843L2.95849 1.48103C2.85711 0.648471 2.12594 0.000244141 1.29338 0.000244141H0.571422C0.25499 0.000244141 0 0.255234 0 0.571666C0 0.888099 0.25499 1.14309 0.571422 1.14309H1.29031C1.53915 1.14309 1.79414 1.37043 1.82486 1.64692L2.37785 4.83583L3.34866 11.6591C3.45004 12.4917 4.172 13.143 4.99841 13.143H14.2886C14.6051 13.143 14.8601 12.888 14.8601 12.5715C14.8601 12.2551 14.6051 12.0001 14.2886 12.0001H4.99534C4.75264 12.0001 4.51301 11.7758 4.47921 11.5086L4.38398 10.8419L13.4499 10.2828C14.2733 10.2828 14.9983 9.63147 15.0935 8.82964L15.9998 3.6807C16.0643 3.13078 15.9138 2.59929 15.5789 2.22449Z" fill="black"/>
+            <path
+              d="M5.14284 13.7144C4.50998 13.7144 4 14.2243 4 14.8572C4 15.4901 4.50998 16 5.14284 16C5.77571 16 6.28569 15.4901 6.28569 14.8572C6.28569 14.2243 5.77571 13.7144 5.14284 13.7144Z"
+              fill="black"
+            />
+            <path
+              d="M13.1463 13.7144C12.5134 13.7144 12.0034 14.2243 12.0034 14.8572C12.0034 15.4901 12.5134 16 13.1463 16C13.7791 16 14.2891 15.4901 14.2891 14.8572C14.2891 14.2243 13.7761 13.7144 13.1463 13.7144Z"
+              fill="black"
+            />
+            <path
+              d="M15.5789 2.22449C15.2871 1.8927 14.8846 1.71451 14.4484 1.71451H2.99843L2.95849 1.48103C2.85711 0.648471 2.12594 0.000244141 1.29338 0.000244141H0.571422C0.25499 0.000244141 0 0.255234 0 0.571666C0 0.888099 0.25499 1.14309 0.571422 1.14309H1.29031C1.53915 1.14309 1.79414 1.37043 1.82486 1.64692L2.37785 4.83583L3.34866 11.6591C3.45004 12.4917 4.172 13.143 4.99841 13.143H14.2886C14.6051 13.143 14.8601 12.888 14.8601 12.5715C14.8601 12.2551 14.6051 12.0001 14.2886 12.0001H4.99534C4.75264 12.0001 4.51301 11.7758 4.47921 11.5086L4.38398 10.8419L13.4499 10.2828C14.2733 10.2828 14.9983 9.63147 15.0935 8.82964L15.9998 3.6807C16.0643 3.13078 15.9138 2.59929 15.5789 2.22449Z"
+              fill="black"
+            />
           </g>
         </svg>
-        <span class="blog-button-group-text" v-bind="editableAttrs('secondary_button_text')">{{ s.secondary_button_text }}</span>
+        <span class="blog-button-group-text" v-bind="editableAttrs('secondary_button_text')">{{
+          s.secondary_button_text
+        }}</span>
       </a>
       <p v-if="s.secondary_button_caption" class="blog-button-group-note">
         <!-- #star -->
-        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M8.5 0L10.4084 5.87336L16.584 5.87336L11.5878 9.50329L13.4962 15.3766L8.5 11.7467L3.50383 15.3766L5.41219 9.50329L0.416019 5.87336L6.59163 5.87336L8.5 0Z" fill="#00B67A"/>
-          <path d="M8.5 12L11.5 9.5L12 11L8.5 12Z" fill="#005128"/>
+        <svg
+          width="17"
+          height="17"
+          viewBox="0 0 17 17"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.5 0L10.4084 5.87336L16.584 5.87336L11.5878 9.50329L13.4962 15.3766L8.5 11.7467L3.50383 15.3766L5.41219 9.50329L0.416019 5.87336L6.59163 5.87336L8.5 0Z"
+            fill="#00B67A"
+          />
+          <path d="M8.5 12L11.5 9.5L12 11L8.5 12Z" fill="#005128" />
         </svg>
-        <span class="blog-button-group-note-text" v-bind="editableAttrs('secondary_button_caption')">{{ s.secondary_button_caption }}</span>
+        <span
+          class="blog-button-group-note-text"
+          v-bind="editableAttrs('secondary_button_caption')"
+        >{{ s.secondary_button_caption }}</span>
       </p>
     </div>
   </div>
@@ -113,10 +174,21 @@ const { editableAttrs } = useInlineEdit({
           :class="{ 'blog-button-group--disabled': editorMode }"
         >
           <!-- #living-beauty2 -->
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z" fill="currentColor"/>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z"
+              fill="currentColor"
+            />
           </svg>
-          <span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{ s.button_text }}</span>
+          <span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{
+            s.button_text
+          }}</span>
         </a>
       </div>
       <div>
@@ -126,17 +198,42 @@ const { editableAttrs } = useInlineEdit({
           :class="{ 'blog-button-group--disabled': editorMode }"
         >
           <!-- #market -->
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <mask id="market-mask1" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-              <rect width="16" height="16" fill="#D9D9D9"/>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <mask
+              id="market-mask1"
+              style="mask-type: alpha"
+              maskUnits="userSpaceOnUse"
+              x="0"
+              y="0"
+              width="16"
+              height="16"
+            >
+              <rect width="16" height="16" fill="#D9D9D9" />
             </mask>
             <g mask="url(#market-mask1)">
-              <path d="M5.14284 13.7144C4.50998 13.7144 4 14.2243 4 14.8572C4 15.4901 4.50998 16 5.14284 16C5.77571 16 6.28569 15.4901 6.28569 14.8572C6.28569 14.2243 5.77571 13.7144 5.14284 13.7144Z" fill="black"/>
-              <path d="M13.1463 13.7144C12.5134 13.7144 12.0034 14.2243 12.0034 14.8572C12.0034 15.4901 12.5134 16 13.1463 16C13.7791 16 14.2891 15.4901 14.2891 14.8572C14.2891 14.2243 13.7761 13.7144 13.1463 13.7144Z" fill="black"/>
-              <path d="M15.5789 2.22449C15.2871 1.8927 14.8846 1.71451 14.4484 1.71451H2.99843L2.95849 1.48103C2.85711 0.648471 2.12594 0.000244141 1.29338 0.000244141H0.571422C0.25499 0.000244141 0 0.255234 0 0.571666C0 0.888099 0.25499 1.14309 0.571422 1.14309H1.29031C1.53915 1.14309 1.79414 1.37043 1.82486 1.64692L2.37785 4.83583L3.34866 11.6591C3.45004 12.4917 4.172 13.143 4.99841 13.143H14.2886C14.6051 13.143 14.8601 12.888 14.8601 12.5715C14.8601 12.2551 14.6051 12.0001 14.2886 12.0001H4.99534C4.75264 12.0001 4.51301 11.7758 4.47921 11.5086L4.38398 10.8419L13.4499 10.2828C14.2733 10.2828 14.9983 9.63147 15.0935 8.82964L15.9998 3.6807C16.0643 3.13078 15.9138 2.59929 15.5789 2.22449Z" fill="black"/>
+              <path
+                d="M5.14284 13.7144C4.50998 13.7144 4 14.2243 4 14.8572C4 15.4901 4.50998 16 5.14284 16C5.77571 16 6.28569 15.4901 6.28569 14.8572C6.28569 14.2243 5.77571 13.7144 5.14284 13.7144Z"
+                fill="black"
+              />
+              <path
+                d="M13.1463 13.7144C12.5134 13.7144 12.0034 14.2243 12.0034 14.8572C12.0034 15.4901 12.5134 16 13.1463 16C13.7791 16 14.2891 15.4901 14.2891 14.8572C14.2891 14.2243 13.7761 13.7144 13.1463 13.7144Z"
+                fill="black"
+              />
+              <path
+                d="M15.5789 2.22449C15.2871 1.8927 14.8846 1.71451 14.4484 1.71451H2.99843L2.95849 1.48103C2.85711 0.648471 2.12594 0.000244141 1.29338 0.000244141H0.571422C0.25499 0.000244141 0 0.255234 0 0.571666C0 0.888099 0.25499 1.14309 0.571422 1.14309H1.29031C1.53915 1.14309 1.79414 1.37043 1.82486 1.64692L2.37785 4.83583L3.34866 11.6591C3.45004 12.4917 4.172 13.143 4.99841 13.143H14.2886C14.6051 13.143 14.8601 12.888 14.8601 12.5715C14.8601 12.2551 14.6051 12.0001 14.2886 12.0001H4.99534C4.75264 12.0001 4.51301 11.7758 4.47921 11.5086L4.38398 10.8419L13.4499 10.2828C14.2733 10.2828 14.9983 9.63147 15.0935 8.82964L15.9998 3.6807C16.0643 3.13078 15.9138 2.59929 15.5789 2.22449Z"
+                fill="black"
+              />
             </g>
           </svg>
-          <span class="blog-button-group-text" v-bind="editableAttrs('secondary_button_text')">{{ s.secondary_button_text }}</span>
+          <span class="blog-button-group-text" v-bind="editableAttrs('secondary_button_text')">{{
+            s.secondary_button_text
+          }}</span>
         </a>
       </div>
     </div>