theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

📦 NEW: react-markdown pour les commentaires

Browse Source
This commit is contained in:
Divlo
2020-05-06 10:39:22 +02:00
parent e52847171d
commit 015b0be11f
6 changed files with 162 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
website/components/CodeBlock.js Normal file
View File

@ -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;

10
website/components/FunctionPage/CommentCard/CommentCard.js
View File

@ -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>

2
website/components/FunctionPage/FunctionComments/FunctionComments.js
View File

@ -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>

2
website/components/FunctionPage/FunctionTabs.js
View File

@ -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>