🎨 [Frontend] Prettify markdown's outcome (#6369)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/editor/MarkdownEditor.js

@@ -42,7 +42,6 @@ qx.Class.define("osparc.editor.MarkdownEditor", {
         case "preview-markdown": {
           control = new osparc.ui.markdown.Markdown().set({
             padding: 3,
-            noMargin: true
           });
           const textArea = this.getChildControl("text-area");
           textArea.bind("value", control, "value");

services/static-webserver/client/source/class/osparc/info/CommentUI.js

@@ -90,9 +90,7 @@ qx.Class.define("osparc.info.CommentUI", {
           });
           break;
         case "comment-content":
-          control = new osparc.ui.markdown.Markdown().set({
-            noMargin: true
-          });
+          control = new osparc.ui.markdown.Markdown();
           control.getContentElement().setStyles({
             "text-align": this.__isMyComment() ? "right" : "left"
           });

services/static-webserver/client/source/class/osparc/info/ServiceUtils.js

@@ -182,9 +182,7 @@ qx.Class.define("osparc.info.ServiceUtils", {
       });
       descriptionLayout.add(label);
 
-      const description = new osparc.ui.markdown.Markdown().set({
-        noMargin: true,
-      });
+      const description = new osparc.ui.markdown.Markdown();
       // display markdown link content if that's the case
       if (
         osparc.utils.Utils.isValidHttpUrl(serviceData["description"]) &&

services/static-webserver/client/source/class/osparc/info/StudyUtils.js

@@ -166,9 +166,7 @@ qx.Class.define("osparc.info.StudyUtils", {
       * @param maxHeight {Number} description's maxHeight
       */
     createDescriptionMD: function(study, maxHeight) {
-      const description = new osparc.ui.markdown.Markdown().set({
-        noMargin: true
-      });
+      const description = new osparc.ui.markdown.Markdown();
       study.bind("description", description, "value", {
         converter: desc => desc ? desc : "Add description"
       });

services/static-webserver/client/source/class/osparc/metadata/QualityEditor.js

@@ -177,7 +177,9 @@ qx.Class.define("osparc.metadata.QualityEditor", {
       box.setLayout(new qx.ui.layout.VBox(10));
 
       const helpText = "[10 Simple Rules with Conformance Rubric](https://www.imagwiki.nibib.nih.gov/content/10-simple-rules-conformance-rubric)";
-      const helpTextMD = new osparc.ui.markdown.Markdown(helpText);
+      const helpTextMD = new osparc.ui.markdown.Markdown(helpText).set({
+        noMargin: true,
+      });
       box.add(helpTextMD);
 
       const grid = new qx.ui.layout.Grid(10, 6);
@@ -374,7 +376,9 @@ qx.Class.define("osparc.metadata.QualityEditor", {
 
         // reference
         if (currentRule.references !== undefined) {
-          const referenceMD = new osparc.ui.markdown.Markdown(currentRule.references);
+          const referenceMD = new osparc.ui.markdown.Markdown(currentRule.references).set({
+            noMargin: true,
+          });
           this.__tsrGrid.add(referenceMD, {
             row,
             column: this.self().GridPos.reference

services/static-webserver/client/source/class/osparc/node/slideshow/BaseNodeView.js

@@ -238,7 +238,6 @@ qx.Class.define("osparc.node.slideshow.BaseNodeView", {
         const descView = new osparc.ui.markdown.Markdown().set({
           value: desc,
           padding: 3,
-          noMargin: true,
           font: "text-14"
         });
         const scrollContainer = new qx.ui.container.Scroll();

services/static-webserver/client/source/class/osparc/ui/markdown/Markdown.js

@@ -67,7 +67,7 @@ qx.Class.define("osparc.ui.markdown.Markdown", {
 
     noMargin: {
       check: "Boolean",
-      init: true
+      init: false
     }
   },
 
@@ -79,40 +79,23 @@ qx.Class.define("osparc.ui.markdown.Markdown", {
      */
     __applyMarkdown: function(value = "") {
       this.__loadMarked.then(() => {
-        // trying to prettify:
-        // - links: color with own colors
-        // - headers: add margins
-        // - line height: increase to 1.5
-        /*
-        const walkTokens = token => {
-          // Check if the token is a link
-          if (token.type === 'link' && token.tokens.length > 0) {
-            // Check if the link contains an image token
-            const containsImage = token.tokens.some(t => t.type === "image");
-            // If the link does not contain an image, modify the text to include color styling
-            if (!containsImage) {
-              const linkColor = qx.theme.manager.Color.getInstance().resolve("link");
-              token.text = `<span style="color: ${linkColor};">${token.text}</span>`;
+        const renderer = {
+          link(link) {
+            const linkColor = qx.theme.manager.Color.getInstance().resolve("link");
+            let linkHtml = `<a href="${link.href}" title="${link.title || ""}" style="color: ${linkColor};">`
+            if (link.tokens && link.tokens.length) {
+              const linkRepresentation = link.tokens[0];
+              if (linkRepresentation.type === "text") {
+                linkHtml += linkRepresentation.text;
+              } else if (linkRepresentation.type === "image") {
+                linkHtml += `<img src="${linkRepresentation.href}" tile alt="${linkRepresentation.text}"></img>`;
+              }
             }
+            linkHtml += `</a>`;
+            return linkHtml;
           }
         };
-        marked.use({ walkTokens });
-        */
-        /*
-        const renderer = new marked.Renderer();
-        renderer.link = ({href, title, tokens}) => {
-          // Check if the tokens array contains an image token
-          const hasImageToken = tokens.some(token => token.type === "image");
-          if (hasImageToken) {
-            // Return the link HTML as is for image links (badges)
-            return `<a href="${href}" title="${title || ''}">${tokens.map(token => token.text || '').join('')}</a>`;
-          }
-          // text links
-          const linkColor = qx.theme.manager.Color.getInstance().resolve("link");
-          return `<a href="${href}" title="${title || ''}" style="color: ${linkColor};>${tokens.map(token => token.text || '').join('')}</a>`;
-        };
         marked.use({ renderer });
-        */
 
         const html = marked.parse(value);
 
@@ -148,9 +131,6 @@ qx.Class.define("osparc.ui.markdown.Markdown", {
       if (domElement === null) {
         return;
       }
-      this.getContentElement().setStyle({
-        "line-height": 1.5
-      });
       if (domElement && domElement.children) {
         const elemHeight = this.__getChildrenElementHeight(domElement.children);
         if (this.getMaxHeight() && elemHeight > this.getMaxHeight()) {