📦 NEW: react-markdown pour les commentaires

2020-05-06 10:39:22 +02:00
parent e52847171d
commit 015b0be11f
6 changed files with 162 additions and 8 deletions
--- a/website/components/CodeBlock.js
+++ 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 (
+        <SyntaxHighlighter language={language} style={styles}>
+            {value}
+        </SyntaxHighlighter>
+    );
+};
+
+export default CodeBlock;
--- 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) ?
                                <Fragment>
-                                    <p className="CommentCard__message">
-                                        {editInput}
-                                    </p>
+                                    <div className="CommentCard__message">
+                                        <ReactMarkdown source={editInput} renderers={{ code: CodeBlock }} />
+                                    </div>
                                    {(isAuth && user.name === props.user.name) && 
                                        <p style={{ fontSize: '15px', margin: '15px 0 0 0', fontStyle: 'italic' }}>
                                            <a onClick={deleteCommentById} href="#">supprimer</a>
@@ -86,7 +88,7 @@ const CommentCard = forwardRef((props, ref) => {
                                <form onSubmit={handleSubmit}>
                                    <div className="form-group FunctionComments__post-group">
                                        <label className="form-label" htmlFor="commentEdit">Modifier le commentaire :</label>   
-                                        <textarea style={{ height: 'auto' }} value={editInput} onChange={handleChange} name="commentEdit" id="commentEdit" className="form-control" rows="5" placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ..."></textarea>
+                                        <textarea style={{ height: 'auto' }} value={editInput} onChange={handleChange} name="commentEdit" id="commentEdit" className="form-control" rows="5" placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"></textarea>
                                    </div>
                                    <div className="form-group" style={{ marginTop: '0.7em' }}>
                                        <button type="submit" className="btn btn-dark">Envoyer</button>
--- a/website/components/FunctionPage/FunctionComments/FunctionComments.js
+++ b/website/components/FunctionPage/FunctionComments/FunctionComments.js
@@ -78,7 +78,7 @@ const FunctionComments = ({ functionId }) => {
                                <form onSubmit={handleSubmit}>
                                    <div className="form-group FunctionComments__post-group">
                                        <label className="form-label" htmlFor="commentPost">Ajouter un commentaire :</label>   
-                                        <textarea className="FunctionComments__textarea form-control" value={inputState.commentPost} onChange={handleChange} name="commentPost" id="commentPost" placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ..."></textarea>
+                                        <textarea className="FunctionComments__textarea form-control" value={inputState.commentPost} onChange={handleChange} name="commentPost" id="commentPost" placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"></textarea>
                                    </div>
                                    <div className="form-group" style={{ marginTop: '0.7em' }}>
                                        <button type="submit" className="btn btn-dark">Envoyer</button>
--- a/website/components/FunctionPage/FunctionTabs.js
+++ b/website/components/FunctionPage/FunctionTabs.js
@@ -4,7 +4,7 @@ import './FunctionTabs.css';
 const FunctionTabs = (props) => {
    return (
        <div className="container-fluid">
-            <SwipeableViews onChangeIndex={(index) => props.setSlideIndex(index)} index={props.slideIndex} enableMouseEvents>
+            <SwipeableViews onChangeIndex={(index) => props.setSlideIndex(index)} index={props.slideIndex}>
                {props.children}
            </SwipeableViews>
        </div>
--- 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",
--- 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"
  },