From 015b0be11fb630786116bd5652e97f3c42b7fa96 Mon Sep 17 00:00:00 2001 From: Divlo Date: Wed, 6 May 2020 10:39:22 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20react-markdown=20pour=20l?= =?UTF-8?q?es=20commentaires?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/components/CodeBlock.js | 12 ++ .../FunctionPage/CommentCard/CommentCard.js | 10 +- .../FunctionComments/FunctionComments.js | 2 +- .../components/FunctionPage/FunctionTabs.js | 2 +- website/package-lock.json | 143 +++++++++++++++++- website/package.json | 1 + 6 files changed, 162 insertions(+), 8 deletions(-) create mode 100644 website/components/CodeBlock.js diff --git a/website/components/CodeBlock.js b/website/components/CodeBlock.js new file mode 100644 index 0000000..3d29fca --- /dev/null +++ b/website/components/CodeBlock.js @@ -0,0 +1,12 @@ +import SyntaxHighlighter from "react-syntax-highlighter"; +import { atomOneDark as styles} from "react-syntax-highlighter/dist/cjs/styles/hljs"; + +const CodeBlock = ({ language, value }) => { + return ( + + {value} + + ); +}; + +export default CodeBlock; \ No newline at end of file diff --git a/website/components/FunctionPage/CommentCard/CommentCard.js b/website/components/FunctionPage/CommentCard/CommentCard.js index 5f76d84..ab64825 100644 --- a/website/components/FunctionPage/CommentCard/CommentCard.js +++ b/website/components/FunctionPage/CommentCard/CommentCard.js @@ -4,6 +4,8 @@ import date from 'date-and-time'; import htmlParser from 'html-react-parser'; import { UserContext } from '../../../contexts/UserContext'; import { API_URL } from '../../../utils/config/config'; +import ReactMarkdown from 'react-markdown'; +import CodeBlock from "../../CodeBlock"; import api from '../../../utils/api'; import './CommentCard.css'; @@ -71,9 +73,9 @@ const CommentCard = forwardRef((props, ref) => { { (!isEditing) ? -

- {editInput} -

+
+ +
{(isAuth && user.name === props.user.name) &&

supprimer @@ -86,7 +88,7 @@ const CommentCard = forwardRef((props, ref) => {

- +
diff --git a/website/components/FunctionPage/FunctionComments/FunctionComments.js b/website/components/FunctionPage/FunctionComments/FunctionComments.js index c8e3527..46f8871 100644 --- a/website/components/FunctionPage/FunctionComments/FunctionComments.js +++ b/website/components/FunctionPage/FunctionComments/FunctionComments.js @@ -78,7 +78,7 @@ const FunctionComments = ({ functionId }) => {
- +
diff --git a/website/components/FunctionPage/FunctionTabs.js b/website/components/FunctionPage/FunctionTabs.js index 7548a7a..027a8f9 100644 --- a/website/components/FunctionPage/FunctionTabs.js +++ b/website/components/FunctionPage/FunctionTabs.js @@ -4,7 +4,7 @@ import './FunctionTabs.css'; const FunctionTabs = (props) => { return (
- props.setSlideIndex(index)} index={props.slideIndex} enableMouseEvents> + props.setSlideIndex(index)} index={props.slideIndex}> {props.children}
diff --git a/website/package-lock.json b/website/package-lock.json index 103501d..140817d 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -1,6 +1,6 @@ { - "name": "functionproject-next", - "version": "1.0.0", + "name": "website", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2601,6 +2601,17 @@ "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.2.0.tgz", "integrity": "sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==" }, + "clipboard": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz", + "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==", + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "clone": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", @@ -2648,6 +2659,11 @@ "resolved": "https://registry.npmjs.org/colors/-/colors-1.2.5.tgz", "integrity": "sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==" }, + "comma-separated-tokens": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", + "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==" + }, "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -3420,6 +3436,12 @@ "rimraf": "^2.2.8" } }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "optional": true + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -3960,6 +3982,14 @@ "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==" }, + "fault": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", + "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", + "requires": { + "format": "^0.2.0" + } + }, "figgy-pudding": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", @@ -4115,6 +4145,11 @@ } } }, + "format": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", + "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=" + }, "fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", @@ -4277,6 +4312,15 @@ } } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "graceful-fs": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz", @@ -4394,6 +4438,27 @@ "minimalistic-assert": "^1.0.1" } }, + "hast-util-parse-selector": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz", + "integrity": "sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==" + }, + "hastscript": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-5.1.2.tgz", + "integrity": "sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==", + "requires": { + "comma-separated-tokens": "^1.0.0", + "hast-util-parse-selector": "^2.0.0", + "property-information": "^5.0.0", + "space-separated-tokens": "^1.0.0" + } + }, + "highlight.js": { + "version": "9.15.10", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz", + "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -5198,6 +5263,15 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "lowlight": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.12.1.tgz", + "integrity": "sha512-OqaVxMGIESnawn+TU/QMV5BJLbUghUfjDWPAtFqDYDmDtr4FnB+op8xM+pR7nKlauHNUHXGt0VgWatFB8voS5w==", + "requires": { + "fault": "^1.0.2", + "highlight.js": "~9.15.0" + } + }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -8566,6 +8640,14 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prismjs": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz", + "integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==", + "requires": { + "clipboard": "^2.0.0" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -8614,6 +8696,14 @@ "reflect.ownkeys": "^0.2.0" } }, + "property-information": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.5.0.tgz", + "integrity": "sha512-RgEbCx2HLa1chNgvChcx+rrCWD0ctBmGSE0M7lVm1yyv4UbvbrWoXp/BkVLZefzjrRBGW8/Js6uh/BnlHXFyjA==", + "requires": { + "xtend": "^4.0.0" + } + }, "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -8923,6 +9013,18 @@ } } }, + "react-syntax-highlighter": { + "version": "12.2.1", + "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz", + "integrity": "sha512-CTsp0ZWijwKRYFg9xhkWD4DSpQqE4vb2NKVMdPAkomnILSmsNBHE0n5GuI5zB+PU3ySVvXvdt9jo+ViD9XibCA==", + "requires": { + "@babel/runtime": "^7.3.1", + "highlight.js": "~9.15.1", + "lowlight": "1.12.1", + "prismjs": "^1.8.4", + "refractor": "^2.4.1" + } + }, "reactcss": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", @@ -8975,6 +9077,26 @@ "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz", "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=" }, + "refractor": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.1.tgz", + "integrity": "sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==", + "requires": { + "hastscript": "^5.0.0", + "parse-entities": "^1.1.2", + "prismjs": "~1.17.0" + }, + "dependencies": { + "prismjs": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz", + "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==", + "requires": { + "clipboard": "^2.0.0" + } + } + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -9336,6 +9458,12 @@ "ajv-keywords": "^3.1.0" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "optional": true + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -9620,6 +9748,11 @@ "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=" }, + "space-separated-tokens": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", + "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==" + }, "spdx-correct": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", @@ -10128,6 +10261,12 @@ "setimmediate": "^1.0.4" } }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "optional": true + }, "tinycolor2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", diff --git a/website/package.json b/website/package.json index cf34b86..75a825c 100644 --- a/website/package.json +++ b/website/package.json @@ -32,6 +32,7 @@ "react-markdown": "^4.3.1", "react-swipeable-views": "^0.13.9", "react-swipeable-views-utils": "^0.13.9", + "react-syntax-highlighter": "^12.2.1", "suneditor-react": "^2.8.0", "universal-cookie": "^4.0.3" },