feat: render markdown in gv-card-full description

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

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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';