Integrating react-markdown with miq-structured-list

app/helpers/catalog_helper.rb

@@ -45,7 +45,7 @@ def service_catalog_summary(record, sb_data)
       {:cells => image},
       row_data(_('Name'), record.name),
       row_data(_('Description'), record.description),
-      row_data(_('Long Description'), record.long_description),
+      row_data(_('Long Description'), {:input => 'markdown', :props => {:content => record.long_description}}),
       row_data(_('Dialog'), sb_data[:dialog_label]),
     ]
     if record.currency && record.price
@@ -175,7 +175,7 @@ def catalog_custom_image(record)
 
   def catalog_details(record)
     data = {:title => _('Details'), :mode => "miq_catalog_details"}
-    data[:rows] = [row_data(_('Long Description'), record.long_description)]
+    data[:rows] = [row_data(_('Long Description'), {:input => 'markdown', :props => {:content => record.long_description}})]
     miq_structured_list(data)
   end
 

app/javascript/components/miq-structured-list/helpers.js

@@ -9,6 +9,7 @@ export const InputTypes = {
   COMPONENT: 'component',
   DROPDOWN: 'dropdown',
   CODEMIRROR: 'code_mirror',
+  MARKDOWN: 'markdown',
 };
 
 export const DynamicReactComponents = {

app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-inputs.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Checkbox, TextArea, Dropdown } from 'carbon-components-react';
 import { Controlled as CodeMirror } from 'react-codemirror2';
+import ReactMarkdown from 'react-markdown';
 import { DynamicReactComponents, InputTypes } from '../../helpers';
 
 /** Component to render textarea / checkbox / react components */
@@ -50,6 +51,15 @@ const MiqStructuredListInputs = ({ value, action }) => {
       value={payload}
     />
   );
+  /** Function to render the MarkDown component.
+   * eg: Service / Catalogs / Catalog Items / [Item] / Details tab.
+  */
+  const renderMarkdown = ({ props: { content } }) => (
+    <ReactMarkdown className="miq-react-markdown">
+      {content}
+    </ReactMarkdown>
+  );
+
   switch (value.input) {
     case InputTypes.TEXTAREA:
       return renderTextArea(value);
@@ -61,6 +71,8 @@ const MiqStructuredListInputs = ({ value, action }) => {
       return renderDropDownComponent(value);
     case InputTypes.CODEMIRROR:
       return renderCodeMirrorComponent(value);
+    case InputTypes.MARKDOWN:
+      return renderMarkdown(value);
     default:
       return null;
   }

app/javascript/oldjs/miq_application.js

@@ -1199,6 +1199,7 @@ window.miqInitCodemirror = function(options) {
   });
 
   ManageIQ.editor.on('change', () => {
+    console.log('onchange event...', $(textarea).val())
     if (options.angular) {
       ManageIQ.editor.save();
       $(textarea).trigger('change');

package.json

@@ -88,6 +88,7 @@
     "react-bootstrap": "~0.33.0",
     "react-codemirror2": "^6.0.0",
     "react-dom": "~16.9.0",
+    "react-markdown": "8.0.0",
     "react-redux": "^7.1.1",
     "react-router": "~5.1.2",
     "react-router-dom": "~5.1.2",
@@ -174,6 +175,12 @@
     "node": ">= 18.0.0",
     "npm": ">= 8.6.0"
   },
+  "overrides": {
+    "react-markdown": {
+      "react": "17.0.2",
+      "react-dom": "17.0.2"
+    }
+  },
   "packageManager": "[email protected]",
   "resolutions": {
     "array-includes": "3.1.6",