Skip to content

Commit ace827a

Browse files
vaibhavdarenvaibhavdaren
authored
Merge pull request #513 from AuraOfDivinity/markdown-post
Implements markdown and priview functionality
2 parents 58f2df0 + ebdd505 commit ace827a

File tree

3 files changed

+143
-42
lines changed

3 files changed

+143
-42
lines changed

‎src/css/components/_modals.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
border-radius: 20px;
33
.modal-content {
44
border-radius: 10px;
5-
max-height: 70vh;
5+
66
// width: 66%;
77
border: 0px;
88
// overflow-y: scroll;
@@ -37,7 +37,7 @@
3737
width: 6vw;
3838
height: 5vh;
3939
background: rgb(250, 251, 252);
40-
// border-radius: 100px;
40+
border-radius: 100px;
4141
color: #1A73E8;
4242
padding: 0.3em;
4343
margin-left: 1em;
@@ -199,7 +199,7 @@
199199

200200
color: #1a73e8;
201201
}
202-
.modal__unFollowText {
202+
.modal__unFollowText {
203203
font-family: $font-family-Inter;
204204
font-style: normal;
205205
font-weight: $font-weight-normal;

‎src/user/dashboard/news-feed/news-feed.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { upVotePost } from '../../../actions/postAction'
2929
import profileImg from '../../../svgs/evt-creator.svg';
3030
import eventImg from "../../../svgs/event-img-1.svg";
3131
import eventImg2 from "../../../svgs/event-img-2.svg";
32+
import parse from "html-react-parser";
3233
import { withRouter } from 'react-router-dom'
3334
import { rsvpYes } from '../../../actions/eventAction'
3435

@@ -182,7 +183,7 @@ function NewsFeed(props) {
182183
<small>{post?.createdAt}</small>
183184
</ListItemText>
184185
</ListItem>
185-
<div className="post-details2">{post?.content}</div>
186+
<div className="post-details2">{parse(post?.content)}</div>
186187
<ListItem>
187188
<IconButton
188189
className={classes.vote}

‎src/user/dashboard/news-feed/popups/AddPostModal.js‎

Lines changed: 138 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,166 @@
11
import React, { useState } from "react";
2-
import { Button, Modal, Form, Col } from "react-bootstrap";
2+
import { Button, Modal, Form, Col, Tabs, Tab } from "react-bootstrap";
33
import PropTypes from "prop-types";
4-
import { connect } from 'react-redux';
5-
import { createPost } from '../../../../actions/dashboardAction'
4+
import { connect } from "react-redux";
5+
import { createPost } from "../../../../actions/dashboardAction";
6+
import { Editor } from "@tinymce/tinymce-react";
7+
import showdown from "showdown";
8+
import { CREATE_PROPOSAL } from "../../../../actions/types";
69

710
const AddPostModal = (props) => {
811
const [content, setContent] = useState("");
12+
const [editorText, setText] = useState("");
913

1014
const onChange = (event) => {
1115
setContent(event.target.value);
1216
};
1317

18+
let converter = new showdown.Converter();
19+
1420
const createPostClick = async (content) => {
1521
console.log("Creating the post ", content);
1622
const obj = {
17-
content: content
18-
}
19-
props.createPost(obj)
20-
props.onHide()
23+
content: content,
24+
};
25+
props.createPost(obj);
26+
props.onHide();
27+
};
28+
29+
const handleEditorChange = (content, editor) => {
30+
setContent(content);
31+
};
32+
33+
const handleEditorClose = () => {
34+
setContent("");
35+
props.onHide();
2136
};
2237

2338
return (
2439
<Modal
2540
show={props.show}
26-
onHide={props.onHide}
41+
onHide={handleEditorClose}
2742
animation={true}
2843
className="modal"
2944
centered
45+
size="lg"
3046
>
31-
<Modal.Header
32-
closeButton
33-
className="modal__header"
34-
style={props.borderStyle}
35-
>
47+
<Modal.Header closeButton className="modal__header">
3648
<Modal.Title className="modal__title" style={props.borderStyle}>
3749
<div className="modal__main-title">New Post</div>
3850
<div className="modal__mini-title">POST DETAILS</div>
3951
</Modal.Title>
4052
</Modal.Header>
41-
<Modal.Body className="modal__body" style={props.borderStyle}>
42-
<Form className="modal__form" style={props.borderStyle}>
43-
<Form.Row className="modal__row">
44-
<Form.Group
45-
as={Col}
46-
controlId="formGridEmail"
47-
className="modal__group"
48-
>
49-
<Form.Label className="modal__label">Post Description</Form.Label>
50-
<Form.Control
51-
as="textarea"
52-
className="modal__post"
53-
placeholder="What do you want to tell people about?"
54-
rows={5}
55-
defaultValue={content}
56-
onChange={onChange}
57-
/>
58-
</Form.Group>
59-
</Form.Row>
60-
</Form>
61-
</Modal.Body>
53+
<Tabs defaultActiveKey="write" style={{ marginTop: "10px" }}>
54+
<Tab eventKey="write" title="Write">
55+
<Modal.Body className="modal__body" style={props.borderStyle}>
56+
<Form className="modal__form" style={props.borderStyle}>
57+
<Form.Row className="modal__row">
58+
<Form.Group
59+
as={Col}
60+
controlId="formGridEmail"
61+
className="modal__group"
62+
>
63+
<Editor
64+
apiKey="lvp9xf6bvvm3nkaupm67ffzf50ve8femuaztgg7rkgkmsws3"
65+
initialValue="Write a post..."
66+
init={{
67+
height: 300,
68+
width: "100%",
69+
menubar: false,
70+
plugins: [
71+
"advlist autolink lists link image charmap print preview anchor",
72+
"searchreplace visualblocks code fullscreen",
73+
"insertdatetime media table paste code help wordcount",
74+
"textpattern",
75+
],
76+
textpattern_patterns: [
77+
{ start: "#", format: "h1" },
78+
{ start: "##", format: "h2" },
79+
{ start: "###", format: "h3" },
80+
{ start: "####", format: "h4" },
81+
{ start: "#####", format: "h5" },
82+
{ start: "######", format: "h6" },
83+
{ start: "* ", cmd: "InsertUnorderedList" },
84+
{ start: "- ", cmd: "InsertUnorderedList" },
85+
{
86+
start: "1. ",
87+
cmd: "InsertOrderedList",
88+
value: { "list-style-type": "decimal" },
89+
},
90+
{
91+
start: "1) ",
92+
cmd: "InsertOrderedList",
93+
value: { "list-style-type": "decimal" },
94+
},
95+
{
96+
start: "a. ",
97+
cmd: "InsertOrderedList",
98+
value: { "list-style-type": "lower-alpha" },
99+
},
100+
{
101+
start: "a) ",
102+
cmd: "InsertOrderedList",
103+
value: { "list-style-type": "lower-alpha" },
104+
},
105+
{
106+
start: "i. ",
107+
cmd: "InsertOrderedList",
108+
value: { "list-style-type": "lower-roman" },
109+
},
110+
{
111+
start: "i) ",
112+
cmd: "InsertOrderedList",
113+
value: { "list-style-type": "lower-roman" },
114+
},
115+
],
116+
toolbar:
117+
"undo redo | formatselect | bold italic backcolor | \
118+
alignleft aligncenter alignright alignjustify | \
119+
bullist numlist outdent indent | removeformat | help",
120+
}}
121+
onEditorChange={handleEditorChange}
122+
/>
123+
</Form.Group>
124+
</Form.Row>
125+
</Form>
126+
</Modal.Body>
127+
</Tab>
128+
<Tab eventKey="preview" title="Preview">
129+
<Modal.Body className="modal__body" style={props.borderStyle}>
130+
<Form className="modal__form" style={props.borderStyle}>
131+
<Form.Row className="modal__row">
132+
<Form.Group
133+
as={Col}
134+
controlId="formGridEmail"
135+
className="modal__group"
136+
>
137+
<Editor
138+
disabled={true}
139+
value={converter.makeHtml(content)}
140+
apiKey="lvp9xf6bvvm3nkaupm67ffzf50ve8femuaztgg7rkgkmsws3"
141+
init={{
142+
height: 300,
143+
width: "100%",
144+
menubar: false,
145+
plugins: [
146+
"advlist autolink lists link image charmap print preview anchor",
147+
"searchreplace visualblocks code fullscreen",
148+
"insertdatetime media table paste code help wordcount",
149+
],
150+
toolbar: false,
151+
}}
152+
/>
153+
</Form.Group>
154+
</Form.Row>
155+
</Form>
156+
</Modal.Body>
157+
</Tab>
158+
</Tabs>
62159
<div className="modal__buttons">
63-
<Button onClick = {createPostClick.bind(this, content)} className = "modal__save" >
160+
<Button
161+
onClick={createPostClick.bind(this, content)}
162+
className="modal__save"
163+
>
64164
<span className="modal__buttontext">Post</span>
65165
</Button>
66166
<Button onClick={props.onHide} className="modal__cancel">
@@ -77,11 +177,11 @@ AddPostModal.propTypes = {
77177
style: PropTypes.object,
78178
};
79179

80-
// map state to props
180+
// map state to props
81181
const mapStateToProps = (state) => ({
82182
auth: state.auth,
83183
error: state.error,
84-
dashboard: state.dashboard
85-
})
184+
dashboard: state.dashboard,
185+
});
86186

87187
export default connect(mapStateToProps, { createPost })(AddPostModal);

0 commit comments

Comments
 (0)