fix: render markdown in gv-row description

see https://gravitee.atlassian.net/browse/APIM-3892
gravitee-io · Feb 27, 2024 · e2a7a42 · e2a7a42
1 parent dc95884
commit e2a7a42
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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',