fix(plugin): sanitize markdown and prevent horizontal overflow (#1782)

Author: bajrangCoder

src/pages/plugin/plugin.scss

@@ -268,6 +268,26 @@
       display: block;
     }
 
+    .content-section.md {
+      overflow-x: hidden;
+      overflow-wrap: break-word;
+
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+
+      pre {
+        overflow-x: auto;
+        max-width: 100%;
+      }
+
+      * {
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+    }
+
     .contributor {
       display: flex;
       align-items: center;

src/pages/plugin/plugin.view.js

@@ -186,7 +186,7 @@ export default (props) => {
 					<div
 						id="overview"
 						className="content-section active md"
-						innerHTML={DOMPurify.sanitize(body)}
+						innerHTML={DOMPurify.sanitize(body, { FORBID_TAGS: ["style"] })}
 					></div>
 					<div id="contributors" className="content-section">
 						{(() => {
@@ -223,7 +223,7 @@ export default (props) => {
 						id="changelog"
 						className="content-section md"
 						innerHTML={
-							DOMPurify.sanitize(changelogs) ||
+							DOMPurify.sanitize(changelogs, { FORBID_TAGS: ["style"] }) ||
 							`
 							<div class="no-changelog">
 								<i class="icon historyrestore"></i>

src/styles/markdown.scss

@@ -119,11 +119,10 @@
 
   hr {
     display: block;
-    height: 2px;
+    height: 0;
     border: 0;
-    border-top: 1px solid #aaa;
-    border-bottom: 1px solid #eee;
-    margin: 1em 0;
+    border-top: 1px solid var(--border-color, #3d444d);
+    margin: 1.5em 0;
     padding: 0;
   }
 
@@ -253,6 +252,30 @@
   table {
     border-collapse: collapse;
     border-spacing: 0;
+    width: 100%;
+    margin: 1em 0;
+    display: block;
+    overflow-x: auto;
+
+    th,
+    td {
+      padding: 8px 12px;
+      border: 1px solid var(--border-color, #3d444d);
+      text-align: left;
+    }
+
+    th {
+      background-color: rgba(255, 255, 255, 0.05);
+      font-weight: 600;
+    }
+
+    tr:nth-child(even) {
+      background-color: rgba(255, 255, 255, 0.02);
+    }
+
+    tr:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
   }
 
   td {
@@ -344,18 +367,19 @@
       page-break-after: avoid;
     }
   }
+
   .markdown-alert {
     padding: 0.5rem 1rem;
     margin-bottom: 16px;
     color: inherit;
     border-left: 0.25em solid #888;
   }
 
-  .markdown-alert > :first-child {
+  .markdown-alert> :first-child {
     margin-top: 0;
   }
 
-  .markdown-alert > :last-child {
+  .markdown-alert> :last-child {
     margin-bottom: 0;
   }
 
@@ -413,6 +437,7 @@
   .markdown-alert.markdown-alert-caution .markdown-alert-title {
     color: var(--color-caution);
   }
+
   .task-list-item {
     list-style-type: none;
 
@@ -424,7 +449,7 @@
       cursor: pointer;
     }
 
-    & + .task-list-item {
+    &+.task-list-item {
       margin-top: 0.25rem;
     }
 
@@ -446,6 +471,7 @@
   }
 
   .contains-task-list {
+
     &:hover .task-list-item-convert-container,
     &:focus-within .task-list-item-convert-container {
       display: block;
@@ -455,4 +481,4 @@
       clip: auto;
     }
   }
-}
+}