diff options
| -rw-r--r-- | spring-front/Dockerfile | 2 | ||||
| -rw-r--r-- | spring-front/nginx.conf | 2 | ||||
| -rw-r--r-- | spring-front/package-lock.json | 179 | ||||
| -rw-r--r-- | spring-front/package.json | 5 | ||||
| -rw-r--r-- | spring-front/public/index.html | 17 | ||||
| -rw-r--r-- | spring-front/src/components/Editor.js | 39 |
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> ); |