Add same possibilities to example description #241

geppetto-showcase/components/showcase/ShowcaseUtils.js

@@ -109,8 +109,8 @@ function getExample(start) {
   let elements = getElementsUntil('pre', start, true);
   let example = {
     name: start.innerHTML,
-    description: '',
   };
+  let description = [];
 
   for (let elem of elements) {
     if (elem.matches('pre')) {
@@ -124,10 +124,12 @@ function getExample(start) {
         path +
         '.js');
     } else {
-      example['description'] += elem.innerHTML;
+      let innerElements = parseInnerHTML(elem.innerHTML);
+      description.push(...innerElements);
     }
   }
-
+  const container = React.createElement('div', {}, description);
+  example['description'] = container;
   return example;
 }
 
@@ -173,18 +175,8 @@ function getContentUntil(selector, start) {
   const content = getElementsUntil(selector, start);
   for (let element of content) {
     let innerHTML = element.innerHTML;
-    let breaks = innerHTML.split('\n');
-    for (let i = 0; i < breaks.length; i++) {
-      const b = breaks[i];
-      const src = isImageTag(b);
-      if (src) {
-        const img = React.createElement('img', { src: src });
-        elements.push(img);
-      } else {
-        const p = React.createElement('p', { key: `${i}${b[0]}` }, b);
-        elements.push(p);
-      }
-    }
+    let innerElements = parseInnerHTML(innerHTML);
+    elements.push(...innerElements);
     const br = React.createElement('br');
     elements.push(br);
   }
@@ -193,6 +185,23 @@ function getContentUntil(selector, start) {
   return container;
 }
 
+function parseInnerHTML(innerHTML) {
+  let breaks = innerHTML.split('\n');
+  let elements = [];
+  for (let i = 0; i < breaks.length; i++) {
+    const b = breaks[i];
+    const src = isImageTag(b);
+    if (src) {
+      const img = React.createElement('img', { src: src });
+      elements.push(img);
+    } else {
+      const p = React.createElement('p', { key: `${i}${b[0]}` }, b);
+      elements.push(p);
+    }
+  }
+  return elements;
+}
+
 function isImageTag(text) {
   let re = new RegExp('<img.*?src="(.*?)"');
   let matches = text.match(re);

geppetto-ui/src/components/connectivity-viewer/README.md

@@ -19,6 +19,10 @@ connectivity-viewer/ConnectivityComponent
 
 Draws a square matrix, where each row [column] correspond to a source [target] node. Therefore, filled squares at i,j denote a directed edge from node i to node j. The rows/columns can be sorted by node name, number of incoming connections, and number of outgoing connections. Circles above each row/column indicate the type of nodes in that row/column.
 
+Paragraph
+
+![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 1')
+
 ```
 connectivity-viewer/showcase/examples/ConnectivityShowcaseMatrix
 ```