Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Ajit | Adding rich text editor #108

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/webapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,24 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/draftjs-to-html": "^0.8.0",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-draft-wysiwyg": "^1.13.0",
"@types/react-redux": "^7.1.9",
"@types/react-router-dom": "^5.1.5",
"@types/recharts": "^1.8.14",
"@types/socket.io-client": "^1.4.33",
"axios": "^0.19.2",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"jspdf": "^1.5.3",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.5",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
Expand Down
6 changes: 5 additions & 1 deletion packages/webapp/src/components/board/note-form/NoteForm.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.note-body{
position: absolute;
width: 400px;
width: 415px;
background-color: white;
padding: 8px 16px;

Expand All @@ -17,4 +17,8 @@
.close-button{
float: right;
}
}

.demo-editor{
border: 1px solid black;
}
51 changes: 49 additions & 2 deletions packages/webapp/src/components/board/note-form/NoteForm.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import React, { useState } from 'react';
import React, { useState, Component } from 'react';
import Modal from '@material-ui/core/Modal';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import draftToHtml from 'draftjs-to-html';
import Button from '@material-ui/core/Button';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, convertToRaw } from 'draft-js';

import './NoteForm.scss'

Expand All @@ -16,13 +20,55 @@ function getModalStyle() {
};
}

class ControlledEditor extends Component<any> {
constructor(props: any) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
}


onEditorStateChange = (editorState: any) => {
console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));
this.props.handleEditorInput(draftToHtml(convertToRaw(editorState.getCurrentContent())));


this.setState({
editorState,
});
};
// options: [ 'fontSize', 'fontFamily', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],
render() {
const { editorState } = this.state as any;
return (
<Editor
// toolbarOnFocus
toolbar={{
options: ['inline', 'list', 'textAlign', 'link', 'embedded', 'emoji', 'image'],
inline: { inDropdown: true, options: ['bold', 'italic', 'underline', 'strikethrough'] },
list: { inDropdown: true, options: ['unordered', 'ordered'] },
textAlign: { inDropdown: true },
link: { inDropdown: true, defaultTargetOption: '_blank' }
}}
editorState={editorState}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"
onEditorStateChange={this.onEditorStateChange}
/>
)
}
}


const NoteForm = ({ noteForm, setNoteForm }: { noteForm: any, setNoteForm: any }) => {

const [modalStyle] = useState(getModalStyle);
const [textAreaValue, setTextAreaValue] = useState();
const handleClose = () => { setNoteForm({ ...noteForm, open: false }); setTextAreaValue(''); };

const textAreaChangeHandle = (event: any) => setTextAreaValue(event.target.value);
const handleEditorInput = (value: any) => setTextAreaValue(value);

const addHandler = (event: any) => {
const categoryId = noteForm.data.category;
Expand All @@ -42,7 +88,8 @@ const NoteForm = ({ noteForm, setNoteForm }: { noteForm: any, setNoteForm: any }
const body = (
<div style={modalStyle} className='note-body'>
<h2 className="note-form-category">{noteForm.data.categoryTitle}</h2>
<TextareaAutosize defaultValue={noteForm.data.text} onChange={textAreaChangeHandle} draggable='false' rows={5} rowsMax={10} className="note-form-textarea" />
<ControlledEditor handleEditorInput={handleEditorInput} className="note-form-textarea"/>
{/* <TextareaAutosize defaultValue={noteForm.data.text} onChange={textAreaChangeHandle} draggable='false' rows={5} rowsMax={10} className="note-form-textarea" /> */}
<Button className='close-button' color="secondary" onClick={handleClose}>Cancel</Button>
<Button className='add-button' color="primary" disabled={!Boolean(textAreaValue)} onClick={noteForm.state !== 'update' ? addHandler : updateHandler}>{noteForm.state !== 'update' ? 'Add' : 'Update'}</Button>
</div>
Expand Down
22 changes: 10 additions & 12 deletions packages/webapp/src/components/board/note/Note.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,19 @@ const Note = ({ userId, note, setNoteForm, updateNoteHandler, updateVoteHandler,
<Box boxShadow={5} className="card-box">
<Card variant="outlined" >
<CardContent>
<Typography variant="body2" component="p" className='note-content-text'>
{note.text}
</Typography>
<div dangerouslySetInnerHTML={{ __html: note.text }} />
</CardContent>
<Divider variant="middle" />
<div className="card-actions">
<Tooltip title={hasVoted() ? 'DOWN VOTE' : 'UP VOTE'}>
<Button size="small" onClick={voteHandler}>
<Badge badgeContent={note.votes.length} color="secondary" >
{hasVoted() ? <ThumbUp color='primary' /> : <ThumbUpOutlinedIcon />}
</Badge>
</Button>
</Tooltip>
<Button size="small" color='primary' className='edit-button' onClick={editNoteHandler}><EditRoundedIcon/></Button>
<Button size="small" color='primary' className='edit-button' onClick={deleteClickHandler}><DeleteRoundedIcon/></Button>
<Tooltip title={hasVoted() ? 'DOWN VOTE' : 'UP VOTE'}>
<Button size="small" onClick={voteHandler}>
<Badge badgeContent={note.votes.length} color="secondary" >
{hasVoted() ? <ThumbUp color='primary' /> : <ThumbUpOutlinedIcon />}
</Badge>
</Button>
</Tooltip>
<Button size="small" color='primary' className='edit-button' onClick={editNoteHandler}><EditRoundedIcon /></Button>
<Button size="small" color='primary' className='edit-button' onClick={deleteClickHandler}><DeleteRoundedIcon /></Button>
</div>
</Card>
</Box>
Expand Down
123 changes: 118 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2534,6 +2534,21 @@
dependencies:
"@types/d3-path" "*"

"@types/draft-js@*":
version "0.10.44"
resolved "https://registry.yarnpkg.com/@types/draft-js/-/draft-js-0.10.44.tgz#7cd59d1cc335df31a92e86d09429ea22ce2f6a4f"
integrity sha512-6p3FZED91yPf+KQinlzFz1HuqSQ5zRXqU3RUsaP2oQYZTtrm5HDf2kwYnF5IihsleHR3jlQAwdSZt0zlJw3VGQ==
dependencies:
"@types/react" "*"
immutable "~3.7.4"

"@types/draftjs-to-html@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@types/draftjs-to-html/-/draftjs-to-html-0.8.0.tgz#17b1c3f19847710e52367277578a6c50e311c87a"
integrity sha512-XiuzaCE088fhtlDi4GM6w2lzqAe2ZHjc7AqenU3LS6/j0Kmhgx7Gfw9NBVsp9KEG1beBqcFLaRbzjZsF15/rBA==
dependencies:
"@types/draft-js" "*"

"@types/engine.io@*":
version "3.1.4"
resolved "https://registry.yarnpkg.com/@types/engine.io/-/engine.io-3.1.4.tgz#3d9472711d179daa7c95c051e50ad411e18a9bdc"
Expand Down Expand Up @@ -2706,6 +2721,14 @@
dependencies:
"@types/react" "*"

"@types/react-draft-wysiwyg@^1.13.0":
version "1.13.0"
resolved "https://registry.yarnpkg.com/@types/react-draft-wysiwyg/-/react-draft-wysiwyg-1.13.0.tgz#b7090cc96a490228367f845e688a13d8e85cf6bd"
integrity sha512-n6xZtp9jH5/q93SiP60ixeLilEWsHXNneOZ7BLwo9fiAHJWSnB+ZMauVzj4BJwplk4Z8RkkZuxwXYf7U84qDWg==
dependencies:
"@types/draft-js" "*"
"@types/react" "*"

"@types/react-redux@^7.1.9":
version "7.1.9"
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.9.tgz#280c13565c9f13ceb727ec21e767abe0e9b4aec3"
Expand Down Expand Up @@ -3508,7 +3531,7 @@ arrify@^2.0.1:
resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==

asap@^2.0.0, asap@~2.0.6:
asap@^2.0.0, asap@~2.0.3, asap@~2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
Expand Down Expand Up @@ -4482,7 +4505,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"

classnames@^2.2.5:
classnames@^2.2.5, classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
Expand Down Expand Up @@ -4989,7 +5012,7 @@ core-js@^2.4.0, core-js@^2.6.10:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==

core-js@^3.5.0:
core-js@^3.5.0, core-js@^3.6.4:
version "3.6.5"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
Expand Down Expand Up @@ -5059,6 +5082,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
safe-buffer "^5.0.1"
sha.js "^2.4.8"

cross-fetch@^3.0.4:
version "3.0.6"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c"
integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ==
dependencies:
node-fetch "2.6.1"

[email protected]:
version "7.0.1"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
Expand Down Expand Up @@ -5908,6 +5938,25 @@ [email protected]:
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==

draft-js@^0.11.7:
version "0.11.7"
resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.11.7.tgz#be293aaa255c46d8a6647f3860aa4c178484a206"
integrity sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==
dependencies:
fbjs "^2.0.0"
immutable "~3.7.4"
object-assign "^4.1.1"

draftjs-to-html@^0.9.1:
version "0.9.1"
resolved "https://registry.yarnpkg.com/draftjs-to-html/-/draftjs-to-html-0.9.1.tgz#1c870fbb588d2390204cb4d0ee7e04ad0c709969"
integrity sha512-fFstE6+IayaVFBEvaFt/wN8vdj8FsTRzij7dy7LI9QIwf5LgfHFi9zSpvCg+feJ2tbYVqHxUkjcibwpsTpgFVQ==

draftjs-utils@^0.10.2:
version "0.10.2"
resolved "https://registry.yarnpkg.com/draftjs-utils/-/draftjs-utils-0.10.2.tgz#a7f16d2c1c174ac38ba3bbf700c256f176b2699c"
integrity sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==

duplexer3@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
Expand Down Expand Up @@ -6744,6 +6793,25 @@ fb-watchman@^2.0.0:
dependencies:
bser "2.1.1"

fbjs-css-vars@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==

fbjs@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-2.0.0.tgz#01fb812138d7e31831ed3e374afe27b9169ef442"
integrity sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==
dependencies:
core-js "^3.6.4"
cross-fetch "^3.0.4"
fbjs-css-vars "^1.0.0"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"

figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
version "3.5.2"
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
Expand Down Expand Up @@ -7624,6 +7692,11 @@ html-minifier-terser@^5.0.1:
relateurl "^0.2.7"
terser "^4.6.3"

html-to-draftjs@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz#0df0eabf429deaedb63f5c859889e2c983606e86"
integrity sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==

[email protected]:
version "4.0.0-beta.11"
resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz#3059a69144b5aecef97708196ca32f9e68677715"
Expand Down Expand Up @@ -7831,6 +7904,11 @@ [email protected]:
resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==

immutable@~3.7.4:
version "3.7.6"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
integrity sha1-E7TTyxK++hVIKib+Gy665kAHHks=

import-cwd@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
Expand Down Expand Up @@ -9343,6 +9421,13 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=

linkify-it@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
dependencies:
uc.micro "^1.0.1"

load-json-file@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
Expand Down Expand Up @@ -10170,7 +10255,7 @@ node-fetch-npm@^2.0.2:
json-parse-better-errors "^1.0.0"
safe-buffer "^5.1.1"

node-fetch@^2.3.0, node-fetch@^2.5.0:
node-fetch@2.6.1, node-fetch@^2.3.0, node-fetch@^2.5.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
Expand Down Expand Up @@ -11959,6 +12044,13 @@ promise-retry@^1.1.1:
err-code "^1.0.0"
retry "^0.10.0"

promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
dependencies:
asap "~2.0.3"

promise@^8.0.3:
version "8.1.0"
resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
Expand Down Expand Up @@ -12246,6 +12338,17 @@ react-dom@^16.13.1:
prop-types "^15.6.2"
scheduler "^0.19.1"

react-draft-wysiwyg@^1.14.5:
version "1.14.5"
resolved "https://registry.yarnpkg.com/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.5.tgz#82e34ae3472b815b5d9f70615f40e13afcbc2055"
integrity sha512-utbJEs91757QXYoBwKRb/4kB3JdswLlj0heUiAeXs/OxZAUISJXxLMFLBIixRlIcUnNkwxOsMikRshDMtWIS3g==
dependencies:
classnames "^2.2.6"
draftjs-utils "^0.10.2"
html-to-draftjs "^1.5.0"
linkify-it "^2.2.0"
prop-types "^15.7.2"

react-error-overlay@^6.0.7:
version "6.0.7"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
Expand Down Expand Up @@ -13276,7 +13379,7 @@ set-value@^2.0.0, set-value@^2.0.1:
is-plain-object "^2.0.3"
split-string "^3.0.1"

setimmediate@^1.0.4:
setimmediate@^1.0.4, setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
Expand Down Expand Up @@ -14541,6 +14644,16 @@ typescript@~3.7.2:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==

ua-parser-js@^0.7.18:
version "0.7.22"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.22.tgz#960df60a5f911ea8f1c818f3747b99c6e177eae3"
integrity sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==

uc.micro@^1.0.1:
version "1.0.6"
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==

uglify-js@^3.1.4:
version "3.10.0"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.10.0.tgz#397a7e6e31ce820bfd1cb55b804ee140c587a9e7"
Expand Down