From 152bb09572dfbd4b7cfe1ad0f2cab66560056bbd Mon Sep 17 00:00:00 2001
From: Antoine CORDIER <antoine.cordier@graviteesource.com>
Date: Tue, 27 Feb 2024 09:24:54 +0000
Subject: [PATCH] feat: render markdown in gv-card-full description

see https://gravitee.atlassian.net/browse/APIM-3892
---
 src/lib/item.js                               |  2 +-
 src/molecules/gv-card-full/gv-card-full.js    | 28 +++++++++++++------
 .../gv-card-full/gv-card-full.stories.js      |  2 +-
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/lib/item.js b/src/lib/item.js
index 94cf3855..363fe1a2 100644
--- a/src/lib/item.js
+++ b/src/lib/item.js
@@ -86,7 +86,7 @@ export function getEntrypoints(item) {
 }
 
 export function getDescription(item) {
-  if (item) {
+  if (item && item.description) {
     return item.description;
   }
   return '';
diff --git a/src/molecules/gv-card-full/gv-card-full.js b/src/molecules/gv-card-full/gv-card-full.js
index 3e60ebff..702a78c7 100644
--- a/src/molecules/gv-card-full/gv-card-full.js
+++ b/src/molecules/gv-card-full/gv-card-full.js
@@ -134,13 +134,17 @@ export class GvCardFull extends ItemResource(LitElement) {
         .description {
           padding: 0 16px;
           margin: 6px 0;
-          flex: 1;
-          flex-grow: 1;
           max-height: 150px;
+          flex: 1;
           overflow: hidden;
           text-overflow: ellipsis;
         }
 
+        .description * {
+          display: contents;
+          font-size: var(--gv-theme-font-size-m, 14px);
+        }
+
         .infos {
           display: flex;
           border-bottom: 1px solid var(--gv-theme-neutral-color-dark, #d9d9d9);
@@ -184,6 +188,16 @@ export class GvCardFull extends ItemResource(LitElement) {
     }
   }
 
+  _getDescription() {
+    if (this._error) {
+      return i18n('gv-card-full.error');
+    }
+    if (this._empty) {
+      return i18n('gv-card-full.empty');
+    }
+    return getDescription(this._item);
+  }
+
   render() {
     const title = getTitle(this._item);
     const owner = getOwner(this._item);
@@ -200,12 +214,10 @@ export class GvCardFull extends ItemResource(LitElement) {
         </div>
         <div class="version"><span class="${classMap({ skeleton: this._skeleton })}">${getVersion(this._item)}</span></div>
       </div>
-      <div class="${classMap({ skeleton: this._skeleton, description: true })}">
-        ${truncate(
-          this._error ? i18n('gv-card-full.error') : this._empty ? i18n('gv-card-full.empty') : getDescription(this._item),
-          this.limit,
-        )}
-      </div>
+      <div
+        class="${classMap({ skeleton: this._skeleton, description: true })}"
+        .innerHTML="${truncate(this._getDescription(), this.limit)}"
+      ></div>
       <span class="${classMap({ skeleton: this._skeleton })}">
         <div class="infos">${this._renderMetricsWithRating()}</div>
 
diff --git a/src/molecules/gv-card-full/gv-card-full.stories.js b/src/molecules/gv-card-full/gv-card-full.stories.js
index c9b1e2e3..fbabc47c 100644
--- a/src/molecules/gv-card-full/gv-card-full.stories.js
+++ b/src/molecules/gv-card-full/gv-card-full.stories.js
@@ -19,7 +19,7 @@ import { makeStory, storyWait } from '../../../testing/lib/make-story';
 
 const name = 'Supernova';
 const description =
-  'Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ' +
+  '<h1>Tempore</h1> <h2>quo primis</h2> <h3>auspiciis</h3> <h4>in</h4> mundanum <a href="">fulgorem surgeret</a> victura dum erunt homines Roma, ' +
   'ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque  plerumque dissidentes,';
 
 const version = 'v.1.1';