- minor changes

Author: tdonuk

package-lock.json

@@ -58,11 +58,13 @@
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@types/dompurify": "^3.0.5",
+    "@types/marked": "^5.0.2",
     "ace-builds": "^1.36.5",
     "custom-electron-titlebar": "^4.2.8",
     "dompurify": "^3.2.3",
     "electron-squirrel-startup": "^1.0.1",
     "js-beautify": "^1.15.1",
+    "marked": "^15.0.4",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-ace": "^13.0.0",

package.json

@@ -60,6 +60,8 @@ body, html {
     min-width: 50px;
     max-width: 100%;
 
+    display: flex;
+    flex-direction: column;
     align-items: center;
 }
 

src/index.css

@@ -1,6 +1,8 @@
 import {EditorMenuItem, EditorPlugin, ToolbarMenuItem} from "./index";
 import {Ace} from "ace-builds";
 import {LanguageName} from "../../../../domain/SupportedLanguage";
+import DOMPurify from "dompurify";
+import {marked} from "marked";
 
 const previewIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTQ0OCA4MGM4LjggMCAxNiA3LjIgMTYgMTZsMCAzMTkuOC01LTYuNS0xMzYtMTc2Yy00LjUtNS45LTExLjYtOS4zLTE5LTkuM3MtMTQuNCAzLjQtMTkgOS4zTDIwMiAzNDAuN2wtMzAuNS00Mi43QzE2NyAyOTEuNyAxNTkuOCAyODggMTUyIDI4OHMtMTUgMy43LTE5LjUgMTAuMWwtODAgMTEyTDQ4IDQxNi4zbDAtLjNMNDggOTZjMC04LjggNy4yLTE2IDE2LTE2bDM4NCAwek02NCAzMkMyOC43IDMyIDAgNjAuNyAwIDk2TDAgNDE2YzAgMzUuMyAyOC43IDY0IDY0IDY0bDM4NCAwYzM1LjMgMCA2NC0yOC43IDY0LTY0bDAtMzIwYzAtMzUuMy0yOC43LTY0LTY0LTY0TDY0IDMyem04MCAxOTJhNDggNDggMCAxIDAgMC05NiA0OCA0OCAwIDEgMCAwIDk2eiIvPjwvc3ZnPg==";
 const refreshIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTQ2My41IDIyNGw4LjUgMGMxMy4zIDAgMjQtMTAuNyAyNC0yNGwwLTEyOGMwLTkuNy01LjgtMTguNS0xNC44LTIyLjJzLTE5LjMtMS43LTI2LjIgNS4yTDQxMy40IDk2LjZjLTg3LjYtODYuNS0yMjguNy04Ni4yLTMxNS44IDFjLTg3LjUgODcuNS04Ny41IDIyOS4zIDAgMzE2LjhzMjI5LjMgODcuNSAzMTYuOCAwYzEyLjUtMTIuNSAxMi41LTMyLjggMC00NS4zcy0zMi44LTEyLjUtNDUuMyAwYy02Mi41IDYyLjUtMTYzLjggNjIuNS0yMjYuMyAwcy02Mi41LTE2My44IDAtMjI2LjNjNjIuMi02Mi4yIDE2Mi43LTYyLjUgMjI1LjMtMUwzMjcgMTgzYy02LjkgNi45LTguOSAxNy4yLTUuMiAyNi4yczEyLjUgMTQuOCAyMi4yIDE0LjhsMTE5LjUgMHoiLz48L3N2Zz4=";
@@ -64,6 +66,10 @@ export default class PreviewPlugin implements EditorPlugin {
                                 height: 100%;
                                 max-width: 100%;
                                 max-height: 100%;
+                                background-color: white;
+                                color: black;
+                                padding: 5px;
+                                box-sizing: border-box;
                             }
                         </style>
                         <div id="previewButtons" style="display: flex; align-items: center; border-bottom: 1px solid; background-color: #323232;">
@@ -118,6 +124,8 @@ function preview(content?: string, lang?: string) {
 
     if(lang === LanguageName.HTML) {
         return content;
+    } else if(lang === LanguageName.MARKDOWN) {
+        return DOMPurify.sanitize(marked(content, {async: false}));
     } else {
         return content;
     }