wip

6 files changed, 229 insertions, 15 deletions

diff --git a/spring-front/Dockerfile b/spring-front/Dockerfile
index 18b6b57..5e236e6 100644
--- a/spring-front/Dockerfile
+++ b/spring-front/Dockerfile
@@ -8,7 +8,7 @@ WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 COPY package.json ./
 COPY package-lock.json ./
-RUN npm ci
+RUN npm ci --production
 RUN npm install react-scripts -g
 COPY ./public/ ./public/
 COPY ./src/ ./src/
diff --git a/spring-front/nginx.conf b/spring-front/nginx.conf
index 84f1937..10e2785 100644
--- a/spring-front/nginx.conf
+++ b/spring-front/nginx.conf
@@ -21,7 +21,7 @@ http {
     tcp_nopush on;
     add_header X-Content-Type-Options "nosniff" always;
     add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
-    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' unpkg.com; style-src 'self' 'unsafe-inline' unpkg.com";
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' unpkg.com cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' unpkg.com cdnjs.cloudflare.com";
     add_header X-Frame-Options SAMEORIGIN always;
     add_header X-XSS-Protection "1; mode=block" always;
     add_header Permissions-Policy "geolocation=(self),midi=(self),sync-xhr=(self),microphone=(self),camera=(self),magnetometer=(self),gyroscope=(self),fullscreen=(self),payment=(self),usb=(self)";
diff --git a/spring-front/package-lock.json b/spring-front/package-lock.json
index 6f0a3df..3b50f3a 100644
--- a/spring-front/package-lock.json
+++ b/spring-front/package-lock.json
@@ -12,6 +12,11 @@
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
         "highlight.js": "^11.5.0",
+        "katex": "^0.15.3",
+        "markdown-it": "^12.3.2",
+        "markdown-it-highlightjs": "^3.6.0",
+        "markdown-it-multimd-table": "^4.1.3",
+        "markdown-it-texmath": "^0.9.7",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "^2.1.3",
@@ -11795,6 +11800,29 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/katex": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.15.3.tgz",
+      "integrity": "sha512-Al6V7RJsmjklT9QItyHWGaQCt+NYTle1bZwB1e9MR/tLoIT1MXaHy9UpfGSB7eaqDgjjqqRxQOaQGrALCrEyBQ==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.0.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -11874,6 +11902,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -12035,6 +12071,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "node_modules/lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12166,6 +12207,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it-highlightjs": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-3.6.0.tgz",
+      "integrity": "sha512-ex+Lq3cVkprh0GpGwFyc53A/rqY6GGzopPCG1xMsf8Ya3XtGC8Uw9tChN1rWbpyDae7tBBhVHVcMM29h4Btamw==",
+      "dependencies": {
+        "highlight.js": "^11.3.1",
+        "lodash.flow": "^3.5.0"
+      }
+    },
+    "node_modules/markdown-it-multimd-table": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-multimd-table/-/markdown-it-multimd-table-4.1.3.tgz",
+      "integrity": "sha512-cXvJ+l8dMRmUZLrn34W/8tfLYjC40R7S0wRwcb95emuvQ3uiWNf9vB/IyeRh6XqEq95eXh70+UDNZ29qcOI+Dg=="
+    },
+    "node_modules/markdown-it-texmath": {
+      "version": "0.9.7",
+      "resolved": "https://registry.npmjs.org/markdown-it-texmath/-/markdown-it-texmath-0.9.7.tgz",
+      "integrity": "sha512-2oZ7WO+xQCvQpfCwxUsCzDpz5jRjiY+FbSJSVz+66+Z9NoPR7ljzUNaOp1CDHYj0JWx+drQLxO0XUjuSsuqc0A=="
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -12186,6 +12274,11 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
     },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -19401,6 +19494,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "node_modules/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=="
+    },
     "node_modules/uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -30309,6 +30407,21 @@
         "object.assign": "^4.1.0"
       }
     },
+    "katex": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.15.3.tgz",
+      "integrity": "sha512-Al6V7RJsmjklT9QItyHWGaQCt+NYTle1bZwB1e9MR/tLoIT1MXaHy9UpfGSB7eaqDgjjqqRxQOaQGrALCrEyBQ==",
+      "requires": {
+        "commander": "^8.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "8.3.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+        }
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -30368,6 +30481,14 @@
         "type-check": "~0.3.2"
       }
     },
+    "linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -30499,6 +30620,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -30605,6 +30731,49 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "entities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+          "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
+        }
+      }
+    },
+    "markdown-it-highlightjs": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-3.6.0.tgz",
+      "integrity": "sha512-ex+Lq3cVkprh0GpGwFyc53A/rqY6GGzopPCG1xMsf8Ya3XtGC8Uw9tChN1rWbpyDae7tBBhVHVcMM29h4Btamw==",
+      "requires": {
+        "highlight.js": "^11.3.1",
+        "lodash.flow": "^3.5.0"
+      }
+    },
+    "markdown-it-multimd-table": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-multimd-table/-/markdown-it-multimd-table-4.1.3.tgz",
+      "integrity": "sha512-cXvJ+l8dMRmUZLrn34W/8tfLYjC40R7S0wRwcb95emuvQ3uiWNf9vB/IyeRh6XqEq95eXh70+UDNZ29qcOI+Dg=="
+    },
+    "markdown-it-texmath": {
+      "version": "0.9.7",
+      "resolved": "https://registry.npmjs.org/markdown-it-texmath/-/markdown-it-texmath-0.9.7.tgz",
+      "integrity": "sha512-2oZ7WO+xQCvQpfCwxUsCzDpz5jRjiY+FbSJSVz+66+Z9NoPR7ljzUNaOp1CDHYj0JWx+drQLxO0XUjuSsuqc0A=="
+    },
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -30625,6 +30794,11 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
     },
+    "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",
@@ -36375,6 +36549,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "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=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
diff --git a/spring-front/package.json b/spring-front/package.json
index 45ad237..4ede371 100644
--- a/spring-front/package.json
+++ b/spring-front/package.json
@@ -7,6 +7,11 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "highlight.js": "^11.5.0",
+    "katex": "^0.15.3",
+    "markdown-it": "^12.3.2",
+    "markdown-it-highlightjs": "^3.6.0",
+    "markdown-it-multimd-table": "^4.1.3",
+    "markdown-it-texmath": "^0.9.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^2.1.3",
diff --git a/spring-front/public/index.html b/spring-front/public/index.html
index 00b5bc5..85c7871 100644
--- a/spring-front/public/index.html
+++ b/spring-front/public/index.html
@@ -16,17 +16,22 @@
       rel="stylesheet"
       href="https://unpkg.com/@highlightjs/cdn-assets@11.5.0/styles/default.min.css"
     />
-    <script type="module">
-      import hljs from "https://unpkg.com/@highlightjs/cdn-assets@11.5.0/es/highlight.min.js";
-      import markdown from "https://unpkg.com/@highlightjs/cdn-assets@11.5.0/es/languages/markdown.min.js";
-      hljs.registerLanguage("markdown", markdown);
-    </script>
+    <!-- <script type="module"> -->
+    <!--   import hljs from "https://unpkg.com/@highlightjs/cdn-assets@11.5.0/es/highlight.min.js"; -->
+    <!--   import markdown from "https://unpkg.com/@highlightjs/cdn-assets@11.5.0/es/languages/markdown.min.js"; -->
+    <!--   hljs.registerLanguage("markdown", markdown); -->
+    <!-- </script> -->
+    <!-- <script -->
+    <!--   src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js" -->
+    <!--   integrity="sha512-TIDbN32lXOg2Mw1VcnKrQLZgfALryJogWCu/NHWtlMCR1jget+mOwMtdehBBZz2f9PKeK2AQPwVxkbl4u/1H5g==" -->
+    <!--   crossorigin="anonymous" -->
+    <!--   referrerpolicy="no-referrer" -->
+    <!-- ></script> -->
     <meta name="viewport" content="width=device-width" />
     <title>RTLMD</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <div id="root2"></div>
   </body>
 </html>
diff --git a/spring-front/src/components/Editor.js b/spring-front/src/components/Editor.js
index 330f15c..932cc06 100644
--- a/spring-front/src/components/Editor.js
+++ b/spring-front/src/components/Editor.js
@@ -4,8 +4,23 @@ import hljs from "highlight.js/lib/core";
 import "highlight.js/styles/devibeans.css";
 import markdown from "highlight.js/lib/languages/markdown.js";
 import "../index.css";
+import mit from "markdown-it";
 
 hljs.registerLanguage("markdown", markdown);
+// const mit = require("markdown-it")({ html: true })
+//   .enable(["table"])
+//   .disable(["strikethrough"])
+//   .use(require("markdown-it-texmath"), {
+//     engine: require("katex"),
+//     delimiters: "gitlab",
+//     katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
+//   })
+//   .use(require("markdown-it-multimd-table"))
+//   .use(require("markdown-it-highlightjs"), {
+//     inline: true,
+//     auto: true,
+//     code: true,
+//   });
 
 export default class Editor extends React.Component {
   constructor(props) {
@@ -16,26 +31,36 @@ export default class Editor extends React.Component {
     this.updateCodeSyntaxHighlighting =
       this.updateCodeSyntaxHighlighting.bind(this);
     this.handleChange = this.handleChange.bind(this);
+    this.parseMarkdown = this.parseMarkdown.bind(this);
     this.state = { value: "" };
   }
 
+  // TODO-we should highlight through a web worker
   updateCodeSyntaxHighlighting() {
     document.querySelectorAll("pre code").forEach((block) => {
-      console.log("block:", block);
-      console.log("blockt text:", block.textContent);
       hljs.highlightElement(block);
     });
   }
 
+  parseMarkdown() {
+    let element = document.getElementById("markdown-placeholder");
+    let md = new mit();
+    let htm = md.render(this.state.value);
+    element.innerHTML = htm;
+    console.log(htm);
+    console.log(md.render("# markdown-it rulezz!"));
+  }
+
   handleChange(event) {
     this.setState({ value: event.target.value });
   }
 
   handleInput(event) {
-    let text = this.state.value;
+    // let text = this.state.value;
     let result_element = document.getElementById("highlight-content");
-    result_element.textContent = text;
+    result_element.textContent = this.state.value;
     this.updateCodeSyntaxHighlighting();
+    this.parseMarkdown();
     let result_element_2 = document.querySelector("#highlight");
     result_element_2.scrollTop = event.currentTarget.scrollTop;
     result_element_2.scrollLeft = event.currentTarget.scrollLeft;
@@ -69,7 +94,7 @@ export default class Editor extends React.Component {
           <pre id="highlight" aria-hidden="true" direction="rtl">
             <code
               id="highlight-content"
-              class="language-markdown"
+              className="language-markdown"
               direction="rtl"
             ></code>
           </pre>
@@ -86,8 +111,8 @@ export default class Editor extends React.Component {
             direction="rtl"
           ></textarea>
         </div>
-        <div class="split right">
-          <p class="markdown-placeholder">Parsed Markdown goes here!!!</p>
+        <div className="split right">
+          <p direction="rtl" id="markdown-placeholder"></p>
         </div>
       </div>
     );