From e2a7a422c009d66fd9f2dd518db4fbb72794b13b Mon Sep 17 00:00:00 2001
From: Antoine CORDIER <antoine.cordier@graviteesource.com>
Date: Tue, 27 Feb 2024 16:26:18 +0000
Subject: [PATCH] fix: render markdown in gv-row description

see https://gravitee.atlassian.net/browse/APIM-3892
---
 src/molecules/gv-row/gv-row.js         |  7 ++++++-
 src/molecules/gv-row/gv-row.stories.js | 13 ++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/molecules/gv-row/gv-row.js b/src/molecules/gv-row/gv-row.js
index 205b5e05..61b6abc2 100644
--- a/src/molecules/gv-row/gv-row.js
+++ b/src/molecules/gv-row/gv-row.js
@@ -99,6 +99,11 @@ export class GvRow extends withResizeObserver(ItemResource(LitElement)) {
           text-after-overflow: '...';
         }
 
+        .row .description * {
+          display: contents;
+          font-size: var(--gv-theme-font-size-m, 14px);
+        }
+
         .row .meta {
           display: flex;
           flex-direction: column;
@@ -193,7 +198,7 @@ export class GvRow extends withResizeObserver(ItemResource(LitElement)) {
                   <h3 class="name">${getTitle(this._item)}</h3>
                   <div class="version">${getVersion(this._item)}</div>
                 </div>
-                <div class="description">${getDescription(this._item)}</div>
+                <div class="description" .innerHTML="${getDescription(this._item)}"></div>
               </div>
               <div class="${classMap({ meta: true, skeleton: this._skeleton })}">
                 <div class="meta__owner">
diff --git a/src/molecules/gv-row/gv-row.stories.js b/src/molecules/gv-row/gv-row.stories.js
index 70aa059a..da9caf1c 100644
--- a/src/molecules/gv-row/gv-row.stories.js
+++ b/src/molecules/gv-row/gv-row.stories.js
@@ -25,9 +25,16 @@ const states = [
   { value: 'running', major: true },
 ];
 const owner = { display_name: 'Garry Marshall' };
-const description =
-  'Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ' +
-  'ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque  plerumque dissidentes,';
+const description = `
+<h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+accusantium doloremque laudantium, <a href="">totam rem aperiam</a>,
+eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
+vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
+ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
+ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</h2>
+`;
 const labels = ['brta', 'custom', 'web'];
 const api = {
   name: 'Long Supernova',