aboutsummaryrefslogtreecommitdiffstats
path: root/spring-front
diff options
context:
space:
mode:
Diffstat (limited to 'spring-front')
-rw-r--r--spring-front/Dockerfile2
-rw-r--r--spring-front/nginx.conf2
-rw-r--r--spring-front/package-lock.json179
-rw-r--r--spring-front/package.json5
-rw-r--r--spring-front/public/index.html17
-rw-r--r--spring-front/src/components/Editor.js39
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>
);
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-09 16:52:34 +0000