Skip to content

Commit 48659f0

Browse files
AuraOfDivinityAuraOfDivinity
committed
Implements markdown and priview functionality
1 parent 7d8ea62 commit 48659f0

File tree

2 files changed

+141
-41
lines changed

2 files changed

+141
-41
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;
@@ -35,7 +35,7 @@
3535
height: 5vh;
3636
background: rgb(250, 251, 252);
3737
border-radius: 100px;
38-
color: #1A73E8;
38+
color: #1a73e8;
3939
padding: 0.3em;
4040
margin-left: 1em;
4141
}
@@ -195,7 +195,7 @@
195195

196196
color: #1a73e8;
197197
}
198-
.modal__unFollowText {
198+
.modal__unFollowText {
199199
font-family: $font-family-Inter;
200200
font-style: normal;
201201
font-weight: $font-weight-normal;

‎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)