dev

app/components/strapiconvert/StrapiBlocksConvert.vue

@@ -29,6 +29,32 @@
         </template>
       </blockquote>
 
+      <!-- Code -->
+      <pre
+        v-else-if="block.type === 'code'"
+        class="strapi-blocks__code"
+      ><code :class="getCodeLanguageClass(block.language)">{{ getCodeContent(block.children) }}</code></pre>
+
+      <!-- Image -->
+      <figure
+        v-else-if="block.type === 'image' && block.image?.url"
+        class="strapi-blocks__figure"
+      >
+        <img
+          :src="block.image.url"
+          :alt="getImageAlt(block.image)"
+          :width="block.image.width || undefined"
+          :height="block.image.height || undefined"
+          class="strapi-blocks__image"
+        >
+        <figcaption
+          v-if="block.image.caption"
+          class="strapi-blocks__caption"
+        >
+          {{ block.image.caption }}
+        </figcaption>
+      </figure>
+
       <!-- Lists -->
       <ul
         v-else-if="block.type === 'list' && block.format === 'unordered'"
@@ -56,6 +82,9 @@
         </li>
       </ol>
 
+
+
+      
       <!-- Fallback -->
       <div v-else class="strapi-blocks--unknown">
         <!-- debug éventuel -->
@@ -95,6 +124,26 @@
 
     return normalized
   }
+
+  const getImageAlt = (image = {}) => (
+    image.alternativeText
+      || image.caption
+      || image.name
+      || ''
+  )
+
+  const getCodeContent = (children = []) => (
+    Array.isArray(children)
+      ? children
+        .filter((child) => child?.type === 'text')
+        .map((child) => child.text ?? '')
+        .join('')
+      : ''
+  )
+
+  const getCodeLanguageClass = (language) => (
+    language ? `language-${language}` : undefined
+  )
 </script>
 
 <style lang="scss">
@@ -221,11 +270,43 @@
         margin-top: 30px;
     }
 
+    &__figure {
+      margin: 30px 0 30px;
+    }
+
+    &__image {
+      display: block;
+      max-width: 100%;
+      height: auto;
+      border-radius: 6px;
+    }
+
+    &__caption {
+      margin-top: 8px;
+      font-size: 14px;
+      line-height: 18px;
+      color: var(--c-text-muted);
+    }
+
+    &__code {
+      overflow-x: auto;
+      margin: 20px 0 25px;
+      padding: 14px 16px;
+      background: var(--c-bg-muted, #f3f3f3);
+      border-radius: 4px;
+      font-family: monospace;
+      font-size: 15px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+    }
+
     // Espace uniquement avant un titre s'il suit un bloc de contenu
     &--p + &__h,
     ul + &__h,
     ol + &__h,
-    blockquote + &__h {
+    blockquote + &__h,
+    &__code + &__h,
+    &__figure + &__h {
       margin-top: 13px;
     }