diff --git a/catalog-rest-service/src/main/resources/ui/package-lock.json b/catalog-rest-service/src/main/resources/ui/package-lock.json
index efc9f2b92e8..b1ca14def5b 100644
--- a/catalog-rest-service/src/main/resources/ui/package-lock.json
+++ b/catalog-rest-service/src/main/resources/ui/package-lock.json
@@ -3548,6 +3548,14 @@
         "@types/node": "*"
       }
     },
+    "@types/hast": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.2.tgz",
+      "integrity": "sha512-Op5W7jYgZI7AWKY5wQ0/QNMzQM7dGQPyW1rXKNiymVCy5iTfdPuGu4HhYNOM2sIv8gUfIuIdcYlXmAepwaowow==",
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/history": {
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
@@ -3687,6 +3695,14 @@
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.170.tgz",
       "integrity": "sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q=="
     },
+    "@types/mdast": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.7.tgz",
+      "integrity": "sha512-YwR7OK8aPmaBvMMUi+pZXBNoW2unbVbfok4YRqGMJBe1dpDlzpRkJrYEYmvjxgs5JhuQmKfDexrN98u941Zasg==",
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
@@ -3727,9 +3743,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "17.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.14.tgz",
-      "integrity": "sha512-0WwKHUbWuQWOce61UexYuWTGuGY/8JvtUe/dtQ6lR4sZ3UiylHotJeWpf3ArP9+DSGUoLY3wbU59VyMrJps5VQ==",
+      "version": "17.0.16",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.16.tgz",
+      "integrity": "sha512-3kCUiOOlQTwUUvjNFkbBTWMTxdTGybz/PfjCw9JmaRGcEDBQh+nGMg7/E9P2rklhJuYVd25IYLNcvqgSPCPksg==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3955,6 +3971,11 @@
         "source-map": "^0.6.1"
       }
     },
+    "@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
+    },
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
@@ -4582,6 +4603,11 @@
       "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -4658,6 +4684,21 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "autolinker": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.14.3.tgz",
+      "integrity": "sha512-t81i2bCpS+s+5FIhatoww9DmpjhbdiimuU9ATEuLxtZMQ7jLv9fyFn7SWNG8IkEfD4AmYyirL1ss9k1aqVWRvg==",
+      "requires": {
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "autoprefixer": {
       "version": "9.8.6",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
@@ -4940,6 +4981,11 @@
         "babel-plugin-jest-hoist": "^24.9.0"
       }
     },
+    "bail": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ=="
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5319,6 +5365,11 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
+    "ccount": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz",
+      "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg=="
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -5335,6 +5386,21 @@
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
       "dev": true
     },
+    "character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
+    },
+    "character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
+    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -5543,17 +5609,6 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
     },
-    "clipboard": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-      "optional": true,
-      "requires": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
     "cliui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -5699,6 +5754,11 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
+    },
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -5982,6 +6042,14 @@
         }
       }
     },
+    "cross-fetch": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz",
+      "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==",
+      "requires": {
+        "node-fetch": "2.6.1"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6470,12 +6538,6 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
-    "delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
-      "optional": true
-    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -6683,6 +6745,28 @@
         "tslib": "^2.0.3"
       }
     },
+    "draft-js": {
+      "version": "0.11.7",
+      "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
+      "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
+      "requires": {
+        "fbjs": "^2.0.0",
+        "immutable": "~3.7.4",
+        "object-assign": "^4.1.1"
+      },
+      "dependencies": {
+        "immutable": {
+          "version": "3.7.6",
+          "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+          "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks="
+        }
+      }
+    },
+    "draftjs-utils": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
+      "integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg=="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -7954,8 +8038,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -8157,6 +8240,14 @@
         "reusify": "^1.0.4"
       }
     },
+    "fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "requires": {
+        "format": "^0.2.0"
+      }
+    },
     "faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -8175,6 +8266,26 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
+      "integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
+      "requires": {
+        "core-js": "^3.6.4",
+        "cross-fetch": "^3.0.4",
+        "fbjs-css-vars": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
+    "fbjs-css-vars": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
+    },
     "figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -8496,6 +8607,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
+    },
     "format-util": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/format-util/-/format-util-1.0.5.tgz",
@@ -8726,15 +8842,6 @@
         }
       }
     },
-    "good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "optional": true,
-      "requires": {
-        "delegate": "^3.1.2"
-      }
-    },
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -8838,12 +8945,34 @@
         }
       }
     },
+    "hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="
+    },
+    "hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
+    },
     "history": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@@ -9032,6 +9161,11 @@
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
       "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg=="
     },
+    "html-to-draftjs": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz",
+      "integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ=="
+    },
     "html-webpack-plugin": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.2.tgz",
@@ -9419,6 +9553,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-5.3.6.tgz",
       "integrity": "sha512-pqWQ6ozVfNOUDjrLfm4Pt7q4Q12cGw2HUZgry4Q5+Myxu9nmHRkWBpI0J4+MK0AxbdFtdMTwEGVl7Vd+vEiK+A=="
     },
+    "immutable": {
+      "version": "4.0.0-rc.14",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.14.tgz",
+      "integrity": "sha512-pfkvmRKJSoW7JFx0QeYlAmT+kNYvn5j0u7bnpNq4N2RCvHSTlLT208G8jgaquNe+Q8kCPHKOSpxJkyvLDpYq0w=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -9650,6 +9789,20 @@
         }
       }
     },
+    "is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
+    },
+    "is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
     "is-arguments": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
@@ -9738,6 +9891,11 @@
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.4.tgz",
       "integrity": "sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A=="
     },
+    "is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
+    },
     "is-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -9799,6 +9957,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
+    },
     "is-hotkey": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz",
@@ -14428,6 +14591,14 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "lint-staged": {
       "version": "10.5.4",
       "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.5.4.tgz",
@@ -14955,6 +15126,11 @@
       "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
       "dev": true
     },
+    "longest-streak": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz",
+      "integrity": "sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -14972,6 +15148,15 @@
         "tslib": "^2.0.3"
       }
     },
+    "lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "requires": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -15052,6 +15237,22 @@
       "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
       "integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U="
     },
+    "markdown-draft-js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/markdown-draft-js/-/markdown-draft-js-2.3.0.tgz",
+      "integrity": "sha512-18T5AiQkp10lkPLJeNe90gbC268vAe/5tCtoSz/w2xM5PlbMSl7eX1XFd4AKJXvpM27hbW/O8C06Jin2mL32jQ==",
+      "requires": {
+        "remarkable": "^2.0.1"
+      }
+    },
+    "markdown-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",
+      "integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==",
+      "requires": {
+        "repeat-string": "^1.0.0"
+      }
+    },
     "marked": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
@@ -15062,12 +15263,134 @@
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.3.7.tgz",
       "integrity": "sha512-nrbaifCl42w37hYd6oRLvoymFK42tWB+WQTMFtksDGQMi5GvlJwnz/CsS30FFAISFLtX+A0csJ0xLiuuyyec7w=="
     },
+    "mdast-util-definitions": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz",
+      "integrity": "sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==",
+      "requires": {
+        "unist-util-visit": "^2.0.0"
+      }
+    },
+    "mdast-util-find-and-replace": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-1.1.1.tgz",
+      "integrity": "sha512-9cKl33Y21lyckGzpSmEQnIDjEfeeWelN5s1kUW1LwdB0Fkuq2u+4GdqcGEygYxJE8GVqCl0741bYXHgamfWAZA==",
+      "requires": {
+        "escape-string-regexp": "^4.0.0",
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit-parents": "^3.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "mdast-util-from-markdown": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
+      "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "micromark": "~2.11.0",
+        "parse-entities": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
+    "mdast-util-gfm": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-0.1.2.tgz",
+      "integrity": "sha512-NNkhDx/qYcuOWB7xHUGWZYVXvjPFFd6afg6/e2g+SV4r9q5XUcCbV4Wfa3DLYIiD+xAEZc6K4MGaE/m0KDcPwQ==",
+      "requires": {
+        "mdast-util-gfm-autolink-literal": "^0.1.0",
+        "mdast-util-gfm-strikethrough": "^0.2.0",
+        "mdast-util-gfm-table": "^0.1.0",
+        "mdast-util-gfm-task-list-item": "^0.1.0",
+        "mdast-util-to-markdown": "^0.6.1"
+      }
+    },
+    "mdast-util-gfm-autolink-literal": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-0.1.3.tgz",
+      "integrity": "sha512-GjmLjWrXg1wqMIO9+ZsRik/s7PLwTaeCHVB7vRxUwLntZc8mzmTsLVr6HW1yLokcnhfURsn5zmSVdi3/xWWu1A==",
+      "requires": {
+        "ccount": "^1.0.0",
+        "mdast-util-find-and-replace": "^1.1.0",
+        "micromark": "^2.11.3"
+      }
+    },
+    "mdast-util-gfm-strikethrough": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-0.2.3.tgz",
+      "integrity": "sha512-5OQLXpt6qdbttcDG/UxYY7Yjj3e8P7X16LzvpX8pIQPYJ/C2Z1qFGMmcw+1PZMUM3Z8wt8NRfYTvCni93mgsgA==",
+      "requires": {
+        "mdast-util-to-markdown": "^0.6.0"
+      }
+    },
+    "mdast-util-gfm-table": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-0.1.6.tgz",
+      "integrity": "sha512-j4yDxQ66AJSBwGkbpFEp9uG/LS1tZV3P33fN1gkyRB2LoRL+RR3f76m0HPHaby6F4Z5xr9Fv1URmATlRRUIpRQ==",
+      "requires": {
+        "markdown-table": "^2.0.0",
+        "mdast-util-to-markdown": "~0.6.0"
+      }
+    },
+    "mdast-util-gfm-task-list-item": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-0.1.6.tgz",
+      "integrity": "sha512-/d51FFIfPsSmCIRNp7E6pozM9z1GYPIkSy1urQ8s/o4TC22BZ7DqfHFWiqBD23bc7J3vV1Fc9O4QIHBlfuit8A==",
+      "requires": {
+        "mdast-util-to-markdown": "~0.6.0"
+      }
+    },
+    "mdast-util-to-hast": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-10.2.0.tgz",
+      "integrity": "sha512-JoPBfJ3gBnHZ18icCwHR50orC9kNH81tiR1gs01D8Q5YpV6adHNO9nKNuFBCJQ941/32PT1a63UF/DitmS3amQ==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "@types/unist": "^2.0.0",
+        "mdast-util-definitions": "^4.0.0",
+        "mdurl": "^1.0.0",
+        "unist-builder": "^2.0.0",
+        "unist-util-generated": "^1.0.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
+    "mdast-util-to-markdown": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz",
+      "integrity": "sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "longest-streak": "^2.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "parse-entities": "^2.0.0",
+        "repeat-string": "^1.0.0",
+        "zwitch": "^1.0.0"
+      }
+    },
+    "mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w=="
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
       "dev": true
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -15131,6 +15454,65 @@
       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
       "dev": true
     },
+    "micromark": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+      "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+      "requires": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
+    "micromark-extension-gfm": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-0.3.3.tgz",
+      "integrity": "sha512-oVN4zv5/tAIA+l3GbMi7lWeYpJ14oQyJ3uEim20ktYFAcfX1x3LNlFGGlmrZHt7u9YlKExmyJdDGaTt6cMSR/A==",
+      "requires": {
+        "micromark": "~2.11.0",
+        "micromark-extension-gfm-autolink-literal": "~0.5.0",
+        "micromark-extension-gfm-strikethrough": "~0.6.5",
+        "micromark-extension-gfm-table": "~0.4.0",
+        "micromark-extension-gfm-tagfilter": "~0.3.0",
+        "micromark-extension-gfm-task-list-item": "~0.3.0"
+      }
+    },
+    "micromark-extension-gfm-autolink-literal": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-0.5.7.tgz",
+      "integrity": "sha512-ePiDGH0/lhcngCe8FtH4ARFoxKTUelMp4L7Gg2pujYD5CSMb9PbblnyL+AAMud/SNMyusbS2XDSiPIRcQoNFAw==",
+      "requires": {
+        "micromark": "~2.11.3"
+      }
+    },
+    "micromark-extension-gfm-strikethrough": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-0.6.5.tgz",
+      "integrity": "sha512-PpOKlgokpQRwUesRwWEp+fHjGGkZEejj83k9gU5iXCbDG+XBA92BqnRKYJdfqfkrRcZRgGuPuXb7DaK/DmxOhw==",
+      "requires": {
+        "micromark": "~2.11.0"
+      }
+    },
+    "micromark-extension-gfm-table": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-0.4.3.tgz",
+      "integrity": "sha512-hVGvESPq0fk6ALWtomcwmgLvH8ZSVpcPjzi0AjPclB9FsVRgMtGZkUcpE0zgjOCFAznKepF4z3hX8z6e3HODdA==",
+      "requires": {
+        "micromark": "~2.11.0"
+      }
+    },
+    "micromark-extension-gfm-tagfilter": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-0.3.0.tgz",
+      "integrity": "sha512-9GU0xBatryXifL//FJH+tAZ6i240xQuFrSL7mYi8f4oZSbc+NvXjkrHemeYP0+L4ZUT+Ptz3b95zhUZnMtoi/Q=="
+    },
+    "micromark-extension-gfm-task-list-item": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-0.3.3.tgz",
+      "integrity": "sha512-0zvM5iSLKrc/NQl84pZSjGo66aTGd57C1idmlWmE87lkMcXrTxg1uXa/nXomxJytoje9trP0NDLvw4bZ/Z/XCQ==",
+      "requires": {
+        "micromark": "~2.11.0"
+      }
+    },
     "micromatch": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -15409,6 +15791,11 @@
         "lodash.toarray": "^4.4.0"
       }
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
     "node-fetch-h2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/node-fetch-h2/-/node-fetch-h2-2.3.0.tgz",
@@ -16130,6 +16517,19 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
     "parse-glob": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
@@ -16194,6 +16594,11 @@
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
       "dev": true
     },
+    "path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -16802,12 +17207,9 @@
       "dev": true
     },
     "prismjs": {
-      "version": "1.23.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
-      "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
-      "requires": {
-        "clipboard": "^2.0.0"
-      }
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.24.1.tgz",
+      "integrity": "sha512-mNPsedLuk90RVJioIky8ANZEwYm5w9LcvCXrxHlwf4fNVSn8jEipMybMkWUyyF0JhnC+C4VcOVSBuHRKs1L5Ow=="
     },
     "process": {
       "version": "0.11.10",
@@ -16825,6 +17227,14 @@
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "prompts": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.1.tgz",
@@ -16854,6 +17264,14 @@
         "warning": "^4.0.0"
       }
     },
+    "property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "requires": {
+        "xtend": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -17059,6 +17477,18 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-draft-wysiwyg": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz",
+      "integrity": "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "draftjs-utils": "^0.10.2",
+        "html-to-draftjs": "^1.5.0",
+        "linkify-it": "^2.2.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-dropdown": {
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.9.2.tgz",
@@ -17107,6 +17537,33 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-markdown": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-6.0.3.tgz",
+      "integrity": "sha512-kQbpWiMoBHnj9myLlmZG9T1JdoT/OEyHK7hqM6CqFT14MAkgWiWBUYijLyBmxbntaN6dCDicPcUhWhci1QYodg==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.3",
+        "comma-separated-tokens": "^1.0.0",
+        "prop-types": "^15.7.2",
+        "property-information": "^5.3.0",
+        "react-is": "^17.0.0",
+        "remark-parse": "^9.0.0",
+        "remark-rehype": "^8.0.0",
+        "space-separated-tokens": "^1.1.0",
+        "style-to-object": "^0.3.0",
+        "unified": "^9.0.0",
+        "unist-util-visit": "^2.0.0",
+        "vfile": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
     "react-oidc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/react-oidc/-/react-oidc-1.0.3.tgz",
@@ -17240,6 +17697,18 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-syntax-highlighter": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
+      "integrity": "sha512-PsOFHNTzkb3OroXdoR897eKN5EZ6grht1iM+f1lJSq7/L0YVnkJaNVwC3wEUYPOAmeyl5xyer1DjL6MrumO6Zw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.22.0",
+        "refractor": "^3.2.0"
+      }
+    },
     "react-tabs": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.2.2.tgz",
@@ -17472,6 +17941,16 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "refractor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.4.0.tgz",
+      "integrity": "sha512-dBeD02lC5eytm9Gld2Mx0cMcnR+zhSnsTfPpWqFaMgUMJfC9A6bcN3Br/NaXrnBJcuxnLFR90k1jrkaSyV8umg==",
+      "requires": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.24.0"
+      }
+    },
     "reftools": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/reftools/-/reftools-1.1.8.tgz",
@@ -17578,6 +18057,40 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "remark-gfm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-1.0.0.tgz",
+      "integrity": "sha512-KfexHJCiqvrdBZVbQ6RopMZGwaXz6wFJEfByIuEwGf0arvITHjiKKZ1dpXujjH9KZdm1//XJQwgfnJ3lmXaDPA==",
+      "requires": {
+        "mdast-util-gfm": "^0.1.0",
+        "micromark-extension-gfm": "^0.3.0"
+      }
+    },
+    "remark-parse": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz",
+      "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==",
+      "requires": {
+        "mdast-util-from-markdown": "^0.8.0"
+      }
+    },
+    "remark-rehype": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-8.1.0.tgz",
+      "integrity": "sha512-EbCu9kHgAxKmW1yEYjx3QafMyGY3q8noUbNUI5xyKbaFP89wbhDrKxyIQNukNYthzjNHZu6J7hwFg7hRm1svYA==",
+      "requires": {
+        "mdast-util-to-hast": "^10.2.0"
+      }
+    },
+    "remarkable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-2.0.1.tgz",
+      "integrity": "sha512-YJyMcOH5lrR+kZdmB0aJJ4+93bEojRZ1HGDn9Eagu6ibg7aVZhc3OWbbShRid+Q5eAfsEqWxpe+g5W5nYNfNiA==",
+      "requires": {
+        "argparse": "^1.0.10",
+        "autolinker": "^3.11.0"
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -17679,8 +18192,7 @@
     "repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
     "request": {
       "version": "2.88.2",
@@ -18019,12 +18531,6 @@
         "compute-scroll-into-view": "^1.0.17"
       }
     },
-    "select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
-      "optional": true
-    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -18216,6 +18722,11 @@
         }
       }
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+    },
     "setprototypeof": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
@@ -18672,6 +19183,11 @@
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
     },
+    "space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA=="
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -19629,12 +20145,6 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
-    "tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
-      "optional": true
-    },
     "tiny-invariant": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
@@ -19742,6 +20252,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "trough": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
+    },
     "ts-jest": {
       "version": "26.5.6",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-26.5.6.tgz",
@@ -20145,6 +20660,16 @@
       "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==",
       "dev": true
     },
+    "ua-parser-js": {
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
+    },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -20201,6 +20726,31 @@
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
       "dev": true
     },
+    "unified": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz",
+      "integrity": "sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==",
+      "requires": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-buffer": "^2.0.0",
+        "is-plain-obj": "^2.0.0",
+        "trough": "^1.0.0",
+        "vfile": "^4.0.0"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
+        },
+        "is-plain-obj": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+          "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA=="
+        }
+      }
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -20213,6 +20763,53 @@
         "set-value": "^2.0.1"
       }
     },
+    "unist-builder": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-2.0.3.tgz",
+      "integrity": "sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw=="
+    },
+    "unist-util-generated": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz",
+      "integrity": "sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg=="
+    },
+    "unist-util-is": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+      "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg=="
+    },
+    "unist-util-position": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.1.0.tgz",
+      "integrity": "sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA=="
+    },
+    "unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "requires": {
+        "@types/unist": "^2.0.2"
+      }
+    },
+    "unist-util-visit": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+      "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit-parents": "^3.0.0"
+      }
+    },
+    "unist-util-visit-parents": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+      "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0"
+      }
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -20450,6 +21047,33 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vfile": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-message": "^2.0.0"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
+        }
+      }
+    },
+    "vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -21385,6 +22009,11 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zwitch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
+      "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
     }
   }
 }
diff --git a/catalog-rest-service/src/main/resources/ui/package.json b/catalog-rest-service/src/main/resources/ui/package.json
index 0267aac98d3..502c32f20a2 100644
--- a/catalog-rest-service/src/main/resources/ui/package.json
+++ b/catalog-rest-service/src/main/resources/ui/package.json
@@ -20,6 +20,7 @@
     "builtin-status-codes": "^3.0.0",
     "cookie-storage": "^6.1.0",
     "core-js": "^3.10.1",
+    "draft-js": "^0.11.7",
     "eslint": "^6.6.0",
     "eslint-config-react-app": "^5.2.1",
     "eslint-loader": "3.0.3",
@@ -34,10 +35,13 @@
     "html-react-parser": "^1.2.6",
     "https-browserify": "^1.0.0",
     "ieee754": "^1.2.1",
+    "immutable": "^4.0.0-rc.14",
     "jquery": "^3.5.0",
+    "markdown-draft-js": "^2.3.0",
     "mobx": "6.0.1",
     "mobx-react": "6.1.4",
     "oidc-client": "^1.11.5",
+    "path-browserify": "^1.0.1",
     "popper.js": "1.16.1",
     "postcss": "^8.3.2",
     "process": "^0.11.10",
@@ -45,13 +49,17 @@
     "react": "^16.14.0",
     "react-bootstrap": "^1.6.0",
     "react-dom": "^16.14.0",
+    "react-draft-wysiwyg": "^1.14.7",
     "react-js-pagination": "^3.0.3",
+    "react-markdown": "^6.0.3",
     "react-oidc": "^1.0.3",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.1",
+    "react-syntax-highlighter": "^15.4.4",
     "react-tippy": "^1.4.0",
     "recharts": "^1.8.5",
     "redoc": "https://github.com/deuex-solutions/redoc/tarball/master",
+    "remark-gfm": "^1.0.0",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.1",
     "slate": "^0.59.0",
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor.tsx
index 23a384d5575..3e6c5896c88 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor.tsx
@@ -17,12 +17,12 @@
 
 import classnames from 'classnames';
 import React, { FunctionComponent, useRef, useState } from 'react';
-import { stringToDOMElement } from '../../../utils/StringsUtils';
+// import { stringToDOMElement } from '../../../utils/StringsUtils';
 import { Button } from '../../buttons/Button/Button';
-import { MarkdownWithPreview } from '../../common/editor/MarkdownWithPreview';
+import MarkdownWithPreview from '../../common/editor/MarkdownWithPreview';
 
-type MarkdownRef = {
-  fetchUpdatedHTML: () => string;
+type EditorContentRef = {
+  getEditorContent: () => string;
 };
 
 type Props = {
@@ -38,7 +38,7 @@ type Props = {
 export const ModalWithMarkdownEditor: FunctionComponent<Props> = ({
   isExpandable = false,
   header,
-  placeholder,
+  // placeholder,
   value,
   onSave,
   // onSuggest,
@@ -46,7 +46,7 @@ export const ModalWithMarkdownEditor: FunctionComponent<Props> = ({
 }: Props) => {
   const [expanded, setExpanded] = useState<boolean>(false);
 
-  const markdownRef = useRef<MarkdownRef>();
+  const markdownRef = useRef<EditorContentRef>();
 
   const getContainerClasses = () => {
     return classnames(
@@ -57,8 +57,7 @@ export const ModalWithMarkdownEditor: FunctionComponent<Props> = ({
 
   const handleSaveData = () => {
     if (markdownRef.current) {
-      const updatedHTML = markdownRef.current.fetchUpdatedHTML();
-      onSave(stringToDOMElement(updatedHTML).textContent ? updatedHTML : '');
+      onSave(markdownRef.current?.getEditorContent() ?? '');
     }
   };
 
@@ -99,11 +98,7 @@ export const ModalWithMarkdownEditor: FunctionComponent<Props> = ({
           )}
         </div>
         <div className="tw-modal-body tw-pt-0 tw-pb-1">
-          <MarkdownWithPreview
-            editorRef={(Ref: MarkdownRef) => (markdownRef.current = Ref)}
-            placeholder={placeholder}
-            value={value}
-          />
+          <MarkdownWithPreview ref={markdownRef} value={value} />
         </div>
         <div className="tw-modal-footer">
           <Button
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/editor/MarkdownWithPreview.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/editor/MarkdownWithPreview.tsx
index cf194a6861b..96296eac77f 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/editor/MarkdownWithPreview.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/editor/MarkdownWithPreview.tsx
@@ -16,126 +16,109 @@
 */
 
 import React, {
-  FunctionComponent,
-  useCallback,
+  forwardRef,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
 } from 'react';
-import { deserializeData } from '../../../utils/EditorUtils';
-import { stringToDOMElement, stringToHTML } from '../../../utils/StringsUtils';
-import MarkdownEditor from './Editor';
+import { isValidJSONString } from '../../../utils/StringsUtils';
+import RichTextEditor from '../rich-text-editor/RichTextEditor';
+import { editorRef } from '../rich-text-editor/RichTextEditor.interface';
+import RichTextEditorPreviewer from '../rich-text-editor/RichTextEditorPreviewer';
 
-type MarkdownWithPreview = {
-  fetchUpdatedHTML: () => string;
+type EditorContentRef = {
+  getEditorContent: (value: string) => string;
 };
 
 type Props = {
   value: string;
-  placeholder: string;
-  editorRef: Function;
 };
 
-const getDeserializedNodes = (strElm: string): Array<Node> => {
-  const domElm = stringToDOMElement(`<div>${strElm}</div>`);
+const MarkdownWithPreview = forwardRef<editorRef, Props>(
+  ({ value }: Props, ref) => {
+    const [activeTab, setActiveTab] = useState<number>(1);
+    const [preview, setPreview] = useState<string>('');
+    const [initValue, setInitValue] = useState<string>(value ?? '');
 
-  return deserializeData(domElm.childNodes[0]);
-};
-
-export const MarkdownWithPreview: FunctionComponent<Props> = ({
-  editorRef,
-  placeholder,
-  value,
-}: Props) => {
-  const [activeTab, setActiveTab] = useState<number>(1);
-  const [preview, setPreview] = useState<string>('');
-  const [initValue, setInitValue] = useState<Array<Node>>(
-    getDeserializedNodes(value || ' ')
-  );
-  const markdownRef = useRef<MarkdownWithPreview>();
-
-  const getTabClasses = (tab: number, activeTab: number) => {
-    return (
-      'tw-gh-tabs tw-cursor-pointer' + (activeTab === tab ? ' active' : '')
-    );
-  };
-
-  const getPreviewHTML = useCallback(() => {
-    return stringToHTML(preview);
-  }, [preview]);
-
-  const updateInternalValue = () => {
-    if (markdownRef.current) {
-      const updatedHTML = markdownRef.current.fetchUpdatedHTML();
-      setInitValue(
-        getDeserializedNodes(
-          stringToDOMElement(updatedHTML).textContent ? updatedHTML : ''
-        )
+    const editorRef = useRef<EditorContentRef>();
+    const getTabClasses = (tab: number, activeTab: number) => {
+      return (
+        'tw-gh-tabs tw-cursor-pointer' + (activeTab === tab ? ' active' : '')
       );
-      setPreview(updatedHTML);
-    }
-  };
+    };
 
-  const handleSaveData = () => {
-    if (markdownRef.current) {
-      const updatedHTML = markdownRef.current.fetchUpdatedHTML();
+    const updateInternalValue = () => {
+      if (editorRef.current) {
+        setInitValue(editorRef.current?.getEditorContent('markdown'));
+        setPreview(editorRef.current?.getEditorContent('markdown'));
+      }
+    };
 
-      return stringToDOMElement(updatedHTML).textContent ? updatedHTML : '';
-    } else {
-      return '';
-    }
-  };
-  useEffect(() => {
-    if (typeof editorRef === 'function') {
-      editorRef({
-        fetchUpdatedHTML: () => {
-          return handleSaveData();
-        },
-      });
-    }
-  }, []);
+    const getPreview = () => {
+      if (preview.length < 1) {
+        return 'Nothing to preview';
+      }
 
-  return (
-    <>
-      <div className="tw-bg-transparent">
-        <nav className="tw-flex tw-flex-row tw-gh-tabs-container tw-px-6">
-          <p
-            className={getTabClasses(1, activeTab)}
-            data-testid="tab"
-            onClick={(e) => {
-              e.stopPropagation();
-              setActiveTab(1);
-            }}>
-            {'Write '}
-          </p>
-          <p
-            className={getTabClasses(2, activeTab)}
-            data-testid="tab"
-            onClick={(e) => {
-              e.stopPropagation();
-              setActiveTab(2);
-              updateInternalValue();
-            }}>
-            {'View '}
-          </p>
-        </nav>
+      return <RichTextEditorPreviewer markdown={preview} />;
+    };
+
+    useImperativeHandle(ref, () => ({
+      getEditorContent() {
+        return activeTab === 2
+          ? initValue
+          : editorRef.current?.getEditorContent('markdown');
+      },
+    }));
+
+    useEffect(() => {
+      setInitValue(value ?? '');
+    }, [value]);
+
+    return (
+      <div>
+        <div className="tw-bg-transparent">
+          <nav className="tw-flex tw-flex-row tw-gh-tabs-container tw-px-6">
+            <p
+              className={getTabClasses(1, activeTab)}
+              data-testid="tab"
+              onClick={(e) => {
+                e.stopPropagation();
+                setActiveTab(1);
+              }}>
+              {'Write '}
+            </p>
+            <p
+              className={getTabClasses(2, activeTab)}
+              data-testid="tab"
+              onClick={(e) => {
+                e.stopPropagation();
+                setActiveTab(2);
+                updateInternalValue();
+              }}>
+              {'View '}
+            </p>
+          </nav>
+        </div>
+        <div className="tw-py-5">
+          {activeTab === 1 && (
+            <RichTextEditor
+              format={isValidJSONString(initValue) ? 'json' : 'markdown'}
+              initvalue={initValue}
+              ref={editorRef}
+            />
+          )}
+          {activeTab === 2 && (
+            <div className="editor-wrapper tw-flex tw-flex-col tw-flex-1 tw-overflow-y-auto tw-p-3 tw-pl-6 tw-min-h-32 tw-border tw-border-gray-300 tw-rounded tw-max-h-none">
+              {getPreview()}
+            </div>
+          )}
+        </div>
       </div>
-      <div className="tw-py-5">
-        {activeTab === 1 && (
-          <MarkdownEditor
-            className=""
-            contentListClasses="tw-z-9999"
-            editorRef={(ref) => (markdownRef.current = ref)}
-            initValue={initValue}
-            placeholder={placeholder}
-          />
-        )}
-        {activeTab === 2 && (
-          <div className="editor-wrapper tw-flex tw-flex-col tw-flex-1 tw-overflow-y-auto tw-p-3 tw-min-h-32 tw-border tw-border-gray-300 tw-rounded tw-max-h-none">
-            {getPreviewHTML()}
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
+    );
+  }
+);
+
+MarkdownWithPreview.displayName = 'MarkdownWithPreview';
+
+export default MarkdownWithPreview;
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.interface.ts b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.interface.ts
new file mode 100644
index 00000000000..49d22fbf53a
--- /dev/null
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.interface.ts
@@ -0,0 +1,32 @@
+/*
+  * Licensed to the Apache Software Foundation (ASF) under one or more
+  * contributor license agreements. See the NOTICE file distributed with
+  * this work for additional information regarding copyright ownership.
+  * The ASF licenses this file to You under the Apache License, Version 2.0
+  * (the "License"); you may not use this file except in compliance with
+  * the License. You may obtain a copy of the License at
+
+  * http://www.apache.org/licenses/LICENSE-2.0
+
+  * Unless required by applicable law or agreed to in writing, software
+  * distributed under the License is distributed on an "AS IS" BASIS,
+  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  * See the License for the specific language governing permissions and
+  * limitations under the License.
+*/
+
+import { ReactNode } from 'react';
+
+export type editorRef = ReactNode | HTMLElement | string;
+export enum Format {
+  JSON = 'json',
+  MARKDOWN = 'markdown',
+}
+export type EditorProp = {
+  format: 'json' | 'markdown';
+  initvalue?: string;
+  suggestionList?: { text: string; value: string; url: string }[];
+  mentionTrigger?: string;
+  readonly?: boolean;
+  customOptions?: ReactNode[];
+};
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx
new file mode 100644
index 00000000000..0d1b8ba36f9
--- /dev/null
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx
@@ -0,0 +1,142 @@
+/*
+  * Licensed to the Apache Software Foundation (ASF) under one or more
+  * contributor license agreements. See the NOTICE file distributed with
+  * this work for additional information regarding copyright ownership.
+  * The ASF licenses this file to You under the Apache License, Version 2.0
+  * (the "License"); you may not use this file except in compliance with
+  * the License. You may obtain a copy of the License at
+
+  * http://www.apache.org/licenses/LICENSE-2.0
+
+  * Unless required by applicable law or agreed to in writing, software
+  * distributed under the License is distributed on an "AS IS" BASIS,
+  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  * See the License for the specific language governing permissions and
+  * limitations under the License.
+*/
+
+import { convertFromRaw, convertToRaw, EditorState } from 'draft-js';
+import { draftToMarkdown, markdownToDraft } from 'markdown-draft-js';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { EditorProp, editorRef, Format } from './RichTextEditor.interface';
+import { Bold, Italic, Link, ULLIST } from './ToolBarOptions';
+
+const getIntialContent = (format: string, content?: string) => {
+  /*eslint-disable  */
+
+  if (content) {
+    switch (format) {
+      case Format.MARKDOWN:
+        const rawData = markdownToDraft(content, {
+          remarkablePreset: 'commonmark',
+          remarkableOptions: {
+            disable: {
+              inline: ['links', 'emphasis'],
+              block: ['heading', 'code', 'list'],
+            },
+            enable: {
+              block: 'table',
+              core: ['abbr'],
+            },
+          },
+          preserveNewlines: true,
+        });
+        const modifiedBlock = rawData.blocks.filter((data: any) => {
+          if (data.text) {
+            return data;
+          }
+        });
+
+        const state = convertFromRaw({ ...rawData, blocks: modifiedBlock });
+
+        return EditorState.createWithContent(state);
+
+      case Format.JSON:
+        const jsonData = convertFromRaw(JSON.parse(content));
+
+        return EditorState.createWithContent(jsonData);
+
+      default:
+        return EditorState.createEmpty();
+    }
+  } else {
+    return EditorState.createEmpty();
+  }
+};
+
+const RichTextEditor = forwardRef<editorRef, EditorProp>(
+  (
+    {
+      format = 'markdown',
+      initvalue,
+      readonly = false,
+      customOptions,
+    }: EditorProp,
+    ref
+  ) => {
+    const [editorState, setEditorState] = useState(
+      getIntialContent(format, initvalue)
+    );
+    const onEditorStateChange = (newState: typeof editorState) => {
+      setEditorState(newState);
+    };
+
+    useImperativeHandle(ref, () => ({
+      getEditorContent(format: 'json' | 'markdown') {
+        switch (format) {
+          case Format.MARKDOWN:
+            return draftToMarkdown(
+              convertToRaw(editorState.getCurrentContent())
+            );
+
+          case Format.JSON:
+          default:
+            return convertToRaw(editorState.getCurrentContent());
+        }
+      },
+    }));
+
+    useEffect(() => {
+      setEditorState(getIntialContent(format, initvalue));
+    }, [initvalue, format]);
+
+    return (
+      <>
+        <div className="tw-min-h-32 tw-border tw-border-gray-300 tw-rounded tw-overflow-y-auto">
+          <Editor
+            editorClassName="tw-px-1 tw-min-h-32"
+            editorState={editorState}
+            readOnly={readonly}
+            toolbar={{
+              options: [],
+            }}
+            toolbarClassName="tw-py-2 tw-border tw-border-gray-300"
+            toolbarCustomButtons={
+              customOptions ?? [
+                <Bold key="bold" />,
+                <Italic key="italic" />,
+                <Link key="link" />,
+                <ULLIST key="ulList" />,
+              ]
+            }
+            toolbarHidden={readonly}
+            wrapperClassName="editor-wrapper"
+            onEditorStateChange={onEditorStateChange}
+          />
+        </div>
+        <p className="tw-pt-2">Using headings in markdown is not allowed</p>
+      </>
+    );
+  }
+);
+
+RichTextEditor.displayName = 'RichTextEditor';
+
+export default RichTextEditor;
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx
new file mode 100644
index 00000000000..39edaa551ea
--- /dev/null
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx
@@ -0,0 +1,49 @@
+/*
+  * Licensed to the Apache Software Foundation (ASF) under one or more
+  * contributor license agreements. See the NOTICE file distributed with
+  * this work for additional information regarding copyright ownership.
+  * The ASF licenses this file to You under the Apache License, Version 2.0
+  * (the "License"); you may not use this file except in compliance with
+  * the License. You may obtain a copy of the License at
+
+  * http://www.apache.org/licenses/LICENSE-2.0
+
+  * Unless required by applicable law or agreed to in writing, software
+  * distributed under the License is distributed on an "AS IS" BASIS,
+  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  * See the License for the specific language governing permissions and
+  * limitations under the License.
+*/
+
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import gfm from 'remark-gfm';
+
+/*eslint-disable  */
+const RichTextEditorPreviewer = ({ markdown }: { markdown: string }) => {
+  const [content, setContent] = useState<string>('');
+  useEffect(() => {
+    setContent(markdown);
+  }, [markdown]);
+  return (
+    <div className="content-container">
+      <ReactMarkdown
+        children={content
+          .replaceAll(/&lt;/g, '<')
+          .replaceAll(/&gt;/g, '>')
+          .replaceAll('\\', '')}
+        components={{
+          h1: 'p',
+          h2: 'p',
+          h3: 'p',
+          h4: 'p',
+          h5: 'p',
+          h6: 'p',
+        }}
+        remarkPlugins={[gfm]}
+      />
+    </div>
+  );
+};
+
+export default RichTextEditorPreviewer;
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/ToolBarOptions.jsx b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/ToolBarOptions.jsx
new file mode 100644
index 00000000000..1c1f8421b6c
--- /dev/null
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/ToolBarOptions.jsx
@@ -0,0 +1,333 @@
+/*
+  * Licensed to the Apache Software Foundation (ASF) under one or more
+  * contributor license agreements. See the NOTICE file distributed with
+  * this work for additional information regarding copyright ownership.
+  * The ASF licenses this file to You under the Apache License, Version 2.0
+  * (the "License"); you may not use this file except in compliance with
+  * the License. You may obtain a copy of the License at
+
+  * http://www.apache.org/licenses/LICENSE-2.0
+
+  * Unless required by applicable law or agreed to in writing, software
+  * distributed under the License is distributed on an "AS IS" BASIS,
+  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  * See the License for the specific language governing permissions and
+  * limitations under the License.
+*/
+
+import { EditorState, Modifier, SelectionState } from 'draft-js';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import PopOver from '../popover/PopOver';
+
+/*eslint-disable  */
+
+const getSelectedText = (editorState) => {
+  const selection = editorState.getSelection();
+  const anchorKey = selection.getAnchorKey();
+  const currentContent = editorState.getCurrentContent();
+  const currentBlock = currentContent.getBlockForKey(anchorKey);
+
+  const start = selection.getStartOffset();
+  const end = selection.getEndOffset();
+  const selectedText = currentBlock.getText().slice(start, end);
+
+  return selectedText;
+};
+
+const updateEditorSelection = (eState, offsetDiff) => {
+  const selection = eState.getSelection();
+  const newFocusOffset = selection.focusOffset + offsetDiff;
+
+  const newSelection = new SelectionState({
+    anchorKey: selection.anchorKey,
+    anchorOffset: newFocusOffset,
+    focusKey: selection.focusKey,
+    focusOffset: newFocusOffset,
+  });
+  const newEditorState = EditorState.forceSelection(eState, newSelection);
+
+  return EditorState.push(newEditorState, newEditorState.getCurrentContent());
+};
+
+export class Bold extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    editorState: PropTypes.object,
+  };
+
+  makeBold = () => {
+    const { editorState, onChange } = this.props;
+    const selectedText = getSelectedText(editorState);
+
+    const contentState = Modifier.replaceText(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      `${
+        selectedText.startsWith('**') && selectedText.endsWith('**')
+          ? selectedText.replaceAll('**', '')
+          : `**${selectedText}**`
+      }`,
+      editorState.getCurrentInlineStyle()
+    );
+
+    const eState = EditorState.push(
+      editorState,
+      contentState,
+      'insert-characters'
+    );
+
+    onChange(updateEditorSelection(eState, -2));
+  };
+
+  render() {
+    return (
+      <div className="rdw-option-wrapper tw-font-bold" onClick={this.makeBold}>
+        <PopOver
+          position="bottom"
+          size="small"
+          title="Add bold text"
+          trigger="mouseenter">
+          <p>B</p>
+        </PopOver>
+      </div>
+    );
+  }
+}
+
+export class Link extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    editorState: PropTypes.object,
+  };
+
+  makeLink = () => {
+    const { editorState, onChange } = this.props;
+
+    const selectedText = getSelectedText(editorState);
+
+    const contentState = Modifier.replaceText(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      `${
+        selectedText.startsWith('[') && selectedText.endsWith(')')
+          ? selectedText.replace(/ *\([^)]*\) */g, '').replace(/[\])}[{(]/g, '')
+          : `[${selectedText}](url)`
+      }`,
+      editorState.getCurrentInlineStyle()
+    );
+    const eState = EditorState.push(
+      editorState,
+      contentState,
+      'insert-characters'
+    );
+    onChange(updateEditorSelection(eState, -6));
+  };
+
+  render() {
+    return (
+      <div className="rdw-option-wrapper " onClick={this.makeLink}>
+        <PopOver
+          position="bottom"
+          size="small"
+          title="Add link"
+          trigger="mouseenter">
+          <i className="fas fa-link" />
+        </PopOver>
+      </div>
+    );
+  }
+}
+
+export class Italic extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    editorState: PropTypes.object,
+  };
+
+  makeItalic = () => {
+    const { editorState, onChange } = this.props;
+    const selectedText = getSelectedText(editorState);
+
+    const contentState = Modifier.replaceText(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      `${
+        selectedText.startsWith('_') && selectedText.endsWith('_')
+          ? selectedText.replaceAll('_', '')
+          : `_${selectedText}_`
+      }`,
+      editorState.getCurrentInlineStyle()
+    );
+    const eState = EditorState.push(
+      editorState,
+      contentState,
+      'insert-characters'
+    );
+
+    onChange(updateEditorSelection(eState, -1));
+  };
+
+  render() {
+    return (
+      <div className="rdw-option-wrapper " onClick={this.makeItalic}>
+        <PopOver
+          position="bottom"
+          size="small"
+          title="Add italic text"
+          trigger="mouseenter">
+          <i className="fas fa-italic" />
+        </PopOver>
+      </div>
+    );
+  }
+}
+export class Heading extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    editorState: PropTypes.object,
+  };
+
+  makeHeading = () => {
+    const { editorState, onChange } = this.props;
+    const selectedText = getSelectedText(editorState);
+
+    const contentState = Modifier.replaceText(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      `${
+        selectedText.startsWith('### ')
+          ? selectedText.replaceAll('### ', '')
+          : `### ${selectedText}`
+      }`,
+      editorState.getCurrentInlineStyle()
+    );
+    const eState = EditorState.push(
+      editorState,
+      contentState,
+      'insert-characters'
+    );
+    onChange(updateEditorSelection(eState, 0));
+  };
+
+  render() {
+    return (
+      <div className="rdw-option-wrapper" onClick={this.makeHeading}>
+        <PopOver
+          position="bottom"
+          size="small"
+          title="Add header text"
+          trigger="mouseenter">
+          <p>H</p>
+        </PopOver>
+      </div>
+    );
+  }
+}
+
+export class ULLIST extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    editorState: PropTypes.object,
+  };
+
+  makeLIST = () => {
+    const { editorState, onChange } = this.props;
+    const selectedText = getSelectedText(editorState);
+    const selection = editorState.getSelection();
+    const currentKey = selection.getStartKey();
+    const currentBlock = editorState
+      .getCurrentContent()
+      .getBlockForKey(currentKey);
+    const text = selectedText.startsWith('- ')
+      ? selectedText.replaceAll('- ', '')
+      : `${
+          selection.anchorOffset > 0 && selectedText.length <= 0
+            ? `\n\n- ${selectedText}`
+            : `- ${selectedText}`
+        }`;
+    const contentState = Modifier.replaceText(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      text,
+      editorState.getCurrentInlineStyle()
+    );
+    onChange(EditorState.push(editorState, contentState, 'insert-characters'));
+  };
+
+  render() {
+    return (
+      <div className="rdw-option-wrapper " onClick={this.makeLIST}>
+        <PopOver
+          position="bottom"
+          size="small"
+          title="Add unordered list"
+          trigger="mouseenter">
+          <i className="fas fa-list-ul" />
+        </PopOver>
+      </div>
+    );
+  }
+}
+export class OLLIST extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    editorState: PropTypes.object,
+  };
+
+  makeLIST = () => {
+    const { editorState, onChange } = this.props;
+    const selectedText = getSelectedText(editorState);
+    const selection = editorState.getSelection();
+    const currentKey = selection.getStartKey();
+    const currentBlock = editorState
+      .getCurrentContent()
+      .getBlockForKey(currentKey);
+    const textArr = currentBlock.getText().split('\n') || [];
+    const lastText = textArr[textArr.length - 1];
+    const match = lastText.match(/(\d+)/)?.[0];
+    let len = 0;
+    for (const txt of textArr) {
+      len += txt.length;
+      if (len >= selection.focusOffset) {
+        const index = textArr.indexOf(txt);
+        break;
+      }
+      len++;
+    }
+
+    const newSelection = new SelectionState({
+      anchorKey: selection.anchorKey,
+      anchorOffset: textArr.join(',').length,
+      focusKey: selection.focusKey,
+      focusOffset: textArr.join(',').length,
+    });
+
+    const contentState = Modifier.replaceText(
+      editorState.getCurrentContent(),
+      newSelection,
+      `${
+        selection.anchorOffset > 0
+          ? `\n${match ? parseInt(match) + 1 : 1}. `
+          : `${match ? parseInt(match) + 1 : 1}. `
+      }`,
+      editorState.getCurrentInlineStyle()
+    );
+
+    onChange(EditorState.push(editorState, contentState, 'insert-characters'));
+  };
+
+  render() {
+    return (
+      <div className="rdw-option-wrapper " onClick={this.makeLIST}>
+        <PopOver
+          position="bottom"
+          size="small"
+          title="Add unordered list"
+          trigger="mouseenter">
+          <i className="fas fa-list-ol" />
+        </PopOver>
+      </div>
+    );
+  }
+}
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx
index 021fcd138c1..9f4fcc82132 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx
@@ -17,8 +17,8 @@
 
 import { isNil } from 'lodash';
 import React, { FunctionComponent } from 'react';
-import { stringToHTML } from '../../../utils/StringsUtils';
 import Tag from '../../tags/tags';
+import RichTextEditorPreviewer from '../rich-text-editor/RichTextEditorPreviewer';
 
 type Props = {
   description: string;
@@ -37,7 +37,7 @@ const TableDataCardBody: FunctionComponent<Props> = ({
   return (
     <>
       <div className="tw-mb-1 description-text">
-        {stringToHTML(description)}
+        <RichTextEditorPreviewer markdown={description} />
       </div>
       <p className="tw-py-1">
         {extraInfo.map(({ key, value }, i) =>
@@ -63,7 +63,7 @@ const TableDataCardBody: FunctionComponent<Props> = ({
             <Tag
               className="tw-border-none tw-bg-gray-200"
               key={index}
-              tag={`#${tag}`}
+              tag={`#${tag.startsWith('Tier.Tier') ? tag.split('.')[1] : tag}`}
               type="contained"
             />
           ))}
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx
index 077dda0f58b..766dd2ac8f0 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx
@@ -32,10 +32,10 @@ import {
   getTableFQNFromColumnFQN,
   isEven,
 } from '../../utils/CommonUtils';
-import { stringToHTML } from '../../utils/StringsUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { getConstraintIcon } from '../../utils/TableUtils';
 import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
+import RichTextEditorPreviewer from '../common/rich-text-editor/RichTextEditorPreviewer';
 // import { EditSchemaColumnModal } from '../Modals/EditSchemaColumnModal/EditSchemaColumnModal';
 import { ModalWithMarkdownEditor } from '../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
 import TagsContainer from '../tags-container/tags-container';
@@ -197,6 +197,9 @@ const SchemaTable: FunctionComponent<Props> = ({
         ...columns.slice(editColumn.index + 1),
       ];
       onUpdate(updatedColumns);
+      setEditColumn(undefined);
+    } else {
+      setEditColumn(undefined);
     }
   };
   useEffect(() => {
@@ -262,11 +265,15 @@ const SchemaTable: FunctionComponent<Props> = ({
                 <td className="tw-group tableBody-cell tw-relative">
                   <div>
                     <div
-                      className="child-inline tw-cursor-pointer hover:tw-underline"
+                      className="tw-cursor-pointer hover:tw-underline"
                       data-testid="description"
                       id={`column-description-${index}`}
                       onClick={() => handleEditColumn(column, index)}>
-                      {stringToHTML(column.description) || (
+                      {column.description ? (
+                        <RichTextEditorPreviewer
+                          markdown={column.description}
+                        />
+                      ) : (
                         <span className="tw-no-description">
                           No description added
                         </span>
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/database-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/database-details/index.tsx
index ff21626fba7..80e98e049ad 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/database-details/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/database-details/index.tsx
@@ -32,6 +32,7 @@ import { getServiceById } from '../../axiosAPIs/serviceAPI';
 import { getDatabaseTables } from '../../axiosAPIs/tableAPI';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import PopOver from '../../components/common/popover/PopOver';
+import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainer from '../../components/containers/PageContainer';
@@ -47,7 +48,6 @@ import {
 import useToastContext from '../../hooks/useToastContext';
 import { getCurrentUserId, isEven } from '../../utils/CommonUtils';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
-import { stringToHTML } from '../../utils/StringsUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { getUsagePercentile } from '../../utils/TableUtils';
 import { getTableTags } from '../../utils/TagsUtils';
@@ -242,9 +242,11 @@ const DatabaseDetails: FunctionComponent = () => {
                       </button>
                     </div>
                   </div>
-                  <div className="tw-px-3 tw-py-2 tw-overflow-y-auto">
+                  <div className="tw-px-3 tw-pl-5 tw-py-2 tw-overflow-y-auto">
                     <div data-testid="description" id="description" />
-                    {stringToHTML(description.trim()) || (
+                    {description.trim() ? (
+                      <RichTextEditorPreviewer markdown={description} />
+                    ) : (
                       <span className="tw-no-description">
                         No description added
                       </span>
@@ -295,7 +297,11 @@ const DatabaseDetails: FunctionComponent = () => {
                           </Link>
                         </td>
                         <td className="tableBody-cell">
-                          {stringToHTML(table.description) || (
+                          {table.description ? (
+                            <RichTextEditorPreviewer
+                              markdown={table.description}
+                            />
+                          ) : (
                             <span className="tw-no-description">
                               No description added
                             </span>
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx
index 9518360cd2f..445e90971ea 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx
@@ -31,6 +31,7 @@ import {
   removeFollower,
 } from '../../axiosAPIs/tableAPI';
 import PopOver from '../../components/common/popover/PopOver';
+import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainer from '../../components/containers/PageContainer';
@@ -53,7 +54,6 @@ import {
   getTableFQNFromColumnFQN,
 } from '../../utils/CommonUtils';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
-import { stringToHTML } from '../../utils/StringsUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import {
   getTagsWithoutTier,
@@ -201,6 +201,8 @@ const MyDataDetailsPage = () => {
         setDescription(updatedHTML);
         setIsEdit(false);
       });
+    } else {
+      setIsEdit(false);
     }
   };
 
@@ -442,12 +444,18 @@ const MyDataDetailsPage = () => {
                       </div>
                     </div>
                     <div className="tw-px-3 tw-py-2 tw-overflow-y-auto">
-                      <div data-testid="description" id="description" />
-                      {stringToHTML(description?.trim()) || (
-                        <span className="tw-no-description">
-                          No description added
-                        </span>
-                      )}
+                      <div
+                        className="tw-pl-3"
+                        data-testid="description"
+                        id="description">
+                        {description?.trim() ? (
+                          <RichTextEditorPreviewer markdown={description} />
+                        ) : (
+                          <span className="tw-no-description">
+                            No description added
+                          </span>
+                        )}
+                      </div>
                       {isEdit && (
                         <ModalWithMarkdownEditor
                           header={`Edit description for ${name}`}
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx
index 64007e27f77..f485ec2df27 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx
@@ -24,6 +24,7 @@ import { Link, useParams } from 'react-router-dom';
 import { getDatabases } from '../../axiosAPIs/databaseAPI';
 import { getServiceByFQN, updateService } from '../../axiosAPIs/serviceAPI';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
+import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainer from '../../components/containers/PageContainer';
@@ -33,7 +34,6 @@ import { pagingObject } from '../../constants/constants';
 import useToastContext from '../../hooks/useToastContext';
 import { isEven } from '../../utils/CommonUtils';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
-import { stringToHTML } from '../../utils/StringsUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { getUsagePercentile } from '../../utils/TableUtils';
 
@@ -156,9 +156,11 @@ const ServicePage: FunctionComponent = () => {
                       </button>
                     </div>
                   </div>
-                  <div className="tw-px-3 tw-py-2 tw-overflow-y-auto">
+                  <div className="tw-px-3 tw-pl-5 tw-py-2 tw-overflow-y-auto">
                     <div data-testid="description" id="description" />
-                    {stringToHTML(description.trim()) || (
+                    {description.trim() ? (
+                      <RichTextEditorPreviewer markdown={description} />
+                    ) : (
                       <span className="tw-no-description">
                         No description added
                       </span>
@@ -207,7 +209,11 @@ const ServicePage: FunctionComponent = () => {
                             </Link>
                           </td>
                           <td className="tableBody-cell">
-                            {stringToHTML(database.description?.trim()) || (
+                            {database.description?.trim() ? (
+                              <RichTextEditorPreviewer
+                                markdown={database.description}
+                              />
+                            ) : (
                               <span className="tw-no-description">
                                 No description added
                               </span>
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/tags/Form.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/tags/Form.tsx
index fb6cf7b895c..94c3bc837a8 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/tags/Form.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/tags/Form.tsx
@@ -23,14 +23,14 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { MarkdownWithPreview } from '../../components/common/editor/MarkdownWithPreview';
+import MarkdownWithPreview from '../../components/common/editor/MarkdownWithPreview';
 import { TagsCategory } from './tagsTypes';
 type FormProp = {
   saveData: (value: {}) => void;
   initialData: TagsCategory;
 };
-type MarkdownRef = {
-  fetchUpdatedHTML: () => string;
+type EditorContentRef = {
+  getEditorContent: () => string;
 };
 const Form: React.FC<FormProp> = forwardRef(
   ({ saveData, initialData }, ref): JSX.Element => {
@@ -39,7 +39,7 @@ const Form: React.FC<FormProp> = forwardRef(
       description: initialData.description,
       categoryType: initialData.categoryType,
     });
-    const markdownRef = useRef<MarkdownRef>();
+    const markdownRef = useRef<EditorContentRef>();
     const onChangeHadler = (
       e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
     ) => {
@@ -54,7 +54,7 @@ const Form: React.FC<FormProp> = forwardRef(
 
     useImperativeHandle(ref, () => ({
       fetchMarkDownData() {
-        return markdownRef.current?.fetchUpdatedHTML();
+        return markdownRef.current?.getEditorContent();
       },
     }));
 
@@ -81,8 +81,8 @@ const Form: React.FC<FormProp> = forwardRef(
                   name="categoryType"
                   value={data.categoryType}
                   onChange={onChangeHadler}>
-                  <option value="DESCRIPTIVE">Descriptive </option>
-                  <option value="CLASSIFICATION">Classification</option>
+                  <option value="Descriptive">Descriptive </option>
+                  <option value="Classification">Classification</option>
                 </select>
               </div>
             )}
@@ -105,11 +105,7 @@ const Form: React.FC<FormProp> = forwardRef(
               <label className="tw-form-label required-field">
                 Description
               </label>
-              <MarkdownWithPreview
-                editorRef={(Ref: MarkdownRef) => (markdownRef.current = Ref)}
-                placeholder="Description"
-                value={data.description}
-              />
+              <MarkdownWithPreview ref={markdownRef} value={data.description} />
             </div>
           </div>
         </div>
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx
index 1a9ceafbfe2..9958bf493fb 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx
@@ -27,6 +27,7 @@ import {
   updateTagCategory,
 } from '../../axiosAPIs/tagAPI';
 import { Button } from '../../components/buttons/Button/Button';
+import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainer from '../../components/containers/PageContainer';
 import Loader from '../../components/Loader/Loader';
 import FormModal from '../../components/Modals/FormModal';
@@ -34,7 +35,6 @@ import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdo
 import TagsContainer from '../../components/tags-container/tags-container';
 import Tags from '../../components/tags/tags';
 import { isEven } from '../../utils/CommonUtils';
-import { stringToDOMElement } from '../../utils/StringsUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 import Form from './Form';
@@ -154,12 +154,6 @@ const TagsPage = () => {
     setEditTag(undefined);
   };
 
-  const getDescription = (description: string) => {
-    const desc = stringToDOMElement(description).textContent;
-
-    return desc && desc.length > 1 ? desc : 'No description added';
-  };
-
   useEffect(() => {
     fetchCategories();
   }, []);
@@ -237,10 +231,18 @@ const TagsPage = () => {
                     </button>
                   </div>
                 </div>
-                <div className="tw-px-3 tw-py-2 tw-overflow-y-auto">
+                <div className="tw-px-3 tw-pl-5 tw-py-2 tw-overflow-y-auto">
                   {currentCategory && (
                     <div data-testid="description" id="description">
-                      {getDescription(currentCategory.description)}
+                      {currentCategory.description.trim() ? (
+                        <RichTextEditorPreviewer
+                          markdown={currentCategory.description}
+                        />
+                      ) : (
+                        <span className="tw-no-description">
+                          No description added
+                        </span>
+                      )}
                       {isEditCategory && (
                         <ModalWithMarkdownEditor
                           header={`Edit description for ${currentCategory.name}`}
@@ -286,8 +288,16 @@ const TagsPage = () => {
                                 setIsEditTag(true);
                                 setEditTag(tag);
                               }}>
-                              <div className="child-inline tw-cursor-pointer hover:tw-underline">
-                                {getDescription(tag.description)}
+                              <div className="tw-cursor-pointer hover:tw-underline">
+                                {tag.description ? (
+                                  <RichTextEditorPreviewer
+                                    markdown={tag.description}
+                                  />
+                                ) : (
+                                  <span className="tw-no-description">
+                                    No description added
+                                  </span>
+                                )}
                                 <button className="tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none">
                                   <SVGIcons
                                     alt="edit"
@@ -375,7 +385,7 @@ const TagsPage = () => {
                   initialData={{
                     name: '',
                     description: '',
-                    categoryType: 'DESCRIPTIVE',
+                    categoryType: 'Descriptive',
                   }}
                   onCancel={() => setIsAddingCategory(false)}
                   onSave={(data) => createCategory(data)}
diff --git a/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts b/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts
index cccb6e5d66c..e16151721d0 100644
--- a/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts
+++ b/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts
@@ -19,3 +19,7 @@
 /// <reference types="react-scripts" />
 declare module 'classnames';
 declare module 'react-js-pagination';
+declare module 'draft-js';
+declare module 'react-draft-wysiwyg';
+declare module 'markdown-draft-js';
+declare module 'react-syntax-highlighter';
diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
index 007464f5e1a..9d923b8981b 100644
--- a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
+++ b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
@@ -219,4 +219,13 @@
   .tw-form-label {
     @apply tw-block tw-text-body tw-font-normal tw-text-grey-body tw-mb-2;
   }
+  body .content-container h1,
+  body .content-container h2 {
+    @apply tw-text-h3;
+  }
+  body .editor-wrapper ul,
+  body #description ul,
+  body .content-container ul {
+    @apply tw-list-disc;
+  }
 }
diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/temp.css b/catalog-rest-service/src/main/resources/ui/src/styles/temp.css
index 1f89b5f0ad5..eb8bfc2fd18 100644
--- a/catalog-rest-service/src/main/resources/ui/src/styles/temp.css
+++ b/catalog-rest-service/src/main/resources/ui/src/styles/temp.css
@@ -680,3 +680,15 @@
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
+
+blockquote {
+  border-left: 5px solid #f1f1f1;
+  padding-left: 5px;
+}
+
+strong {
+  font-weight: bold;
+}
+body .rdw-editor-main pre {
+  background: none;
+}
diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/StringsUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/StringsUtils.ts
index adec1a85458..bb98153e401 100644
--- a/catalog-rest-service/src/main/resources/ui/src/utils/StringsUtils.ts
+++ b/catalog-rest-service/src/main/resources/ui/src/utils/StringsUtils.ts
@@ -45,3 +45,21 @@ export const ordinalize = (num: number): string => {
 
   return num + ordinalSuffix;
 };
+
+export const getJSONFromString = (data: string): string | null => {
+  try {
+    // Format string if possible and return valid JSON
+    return JSON.parse(data);
+  } catch (e) {
+    // Invalid JSON, return null
+    return null;
+  }
+};
+
+export const isValidJSONString = (data?: string): boolean => {
+  if (data) {
+    return Boolean(getJSONFromString(data));
+  }
+
+  return false;
+};
diff --git a/catalog-rest-service/src/main/resources/ui/tsconfig.json b/catalog-rest-service/src/main/resources/ui/tsconfig.json
index 53a9c7145a8..44b8ad7f154 100644
--- a/catalog-rest-service/src/main/resources/ui/tsconfig.json
+++ b/catalog-rest-service/src/main/resources/ui/tsconfig.json
@@ -6,7 +6,7 @@
     "incremental": true,
     "target": "ES5",
     "module": "esnext",
-    "lib": ["dom", "dom.iterable", "ES2020.Promise"],
+    "lib": ["dom", "dom.iterable", "ES2020.Promise", "es2021"],
     "allowJs": true,
     "jsx": "react",
     "declaration": true,
diff --git a/catalog-rest-service/src/main/resources/ui/webpack.config.dev.js b/catalog-rest-service/src/main/resources/ui/webpack.config.dev.js
index 6e544c304c2..fc5d87da844 100644
--- a/catalog-rest-service/src/main/resources/ui/webpack.config.dev.js
+++ b/catalog-rest-service/src/main/resources/ui/webpack.config.dev.js
@@ -115,6 +115,7 @@ module.exports = {
     fallback: {
       http: require.resolve('stream-http'),
       https: require.resolve('https-browserify'),
+      path: require.resolve('path-browserify'),
     },
   },
 
diff --git a/catalog-rest-service/src/main/resources/ui/webpack.config.prod.js b/catalog-rest-service/src/main/resources/ui/webpack.config.prod.js
index e73048d6282..0e0710dce66 100644
--- a/catalog-rest-service/src/main/resources/ui/webpack.config.prod.js
+++ b/catalog-rest-service/src/main/resources/ui/webpack.config.prod.js
@@ -116,6 +116,7 @@ module.exports = {
     fallback: {
       http: require.resolve('stream-http'),
       https: require.resolve('https-browserify'),
+      path: require.resolve('path-browserify'),
     },
   },