fix: render markdown in gv-promote description

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

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/molecules/gv-promote/gv-promote.js b/src/molecules/gv-promote/gv-promote.js
@@ -141,6 +141,12 @@ export class GvPromote extends ItemResource(LitElement) {
           text-align: justify;
         }
 
+        .description *,
+        .description-large * {
+          display: contents;
+          font-size: var(--gv-theme-font-size-m, 14px);
+        }
+
         .infos {
           display: flex;
           justify-content: flex-end;
@@ -187,14 +193,13 @@ export class GvPromote extends ItemResource(LitElement) {
                       ? html`<div class="owner"><gv-icon shape="general:user" size="8px"></gv-icon>${owner}</div>`
                       : ''}
                     <p
+                      .innerHTML="${truncate(getDescription(this._item), this.limit)}"
                       class=${classMap({
                         skeleton: this._skeleton,
                         description: true,
                         'description-large': getDescription(this._item).split(' ').length > 10,
                       })}
-                    >
-                      ${truncate(getDescription(this._item), this.limit)}
-                    </p>
+                    ></p>
                     <div class=${classMap({ skeleton: this._skeleton, infos: true })}>${this._renderMetricsWithRating()}</div>
                     <div class="labels">${this._renderLabels(true)}</div>
                     <gv-button ?skeleton=${this._skeleton} .href="${this.href}" @click="${this._onClick}"

diff --git a/src/molecules/gv-promote/gv-promote.stories.js b/src/molecules/gv-promote/gv-promote.stories.js
@@ -20,15 +20,15 @@ import { makeStory, storyWait } from '../../../testing/lib/make-story';
 
 const name = 'supernova cloud';
 const description =
-  'Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ' +
+  '<h1>Tempore</h1> quo <h2>primis</h2> auspiciis in <a href="">mundanum fulgorem</a> surgeret victura dum erunt homines Roma, ' +
   'ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque  plerumque dissidentes,';
 const longDescription =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non viverra magna. ' +
+  '<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non viverra magna. ' +
   'Duis justo risus, iaculis vel luctus vel, euismod quis ipsum. Sed pellentesque elit eu enim auctor ullamcorper. ' +
-  'Donec rhoncus, nunc eget tempus viverra, leo libero lobortis nibh, quis vulputate ligula nunc sit amet erat. ' +
+  'Donec rhoncus, nunc eget tempus viverra, leo libero lobortis nibh, </h1><h2>quis vulputate ligula nunc sit amet erat. ' +
   'Suspendisse mi mauris, convallis non lobortis id, elementum eu orci. Fusce mattis aliquam augue eu pharetra. ' +
   'Morbi quam neque, interdum ut ullamcorper lacinia, viverra ut odio. Aliquam porttitor a augue ut dignissim. ' +
-  'Nulla facilisi. Praesent eget varius ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.';
+  'Nulla facilisi. Praesent eget varius ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.</h2>';
 
 const ratingSummary = { average: 3.2, count: 345 };
 const metrics = { hits: '11M+', subscribers: '689', health: '0.95' };