Skip to content
Merged
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
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@
"draft-js-image-plugin": "^2.0.0-rc2",
"draft-js-link-plugin": "^1.2.2",
"draft-js-plugins-editor": "^2.0.0-rc2",
"draft-js-mention-plugin": "^2.0.0-rc2",
"draft-js-utils": "^0.1.7",
"fbemitter": "^2.1.1",
"fbjs": "^0.8.12",
Expand Down
4 changes: 1 addition & 3 deletions src/components/Feed/NewPost.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class NewPost extends React.Component {
}

render() {
const {currentUser, allMembers, titlePlaceholder, isCreating, hasError} = this.props
const {currentUser, titlePlaceholder, isCreating, hasError} = this.props
let authorName = currentUser.firstName
if (authorName && currentUser.lastName) {
authorName += ' ' + currentUser.lastName
Expand All @@ -33,7 +33,6 @@ class NewPost extends React.Component {
hasError={hasError}
avatarUrl={currentUser.photoURL}
authorName={authorName}
allMembers={allMembers}
/>
)
}
Expand All @@ -42,7 +41,6 @@ class NewPost extends React.Component {

NewPost.propTypes = {
currentUser: PropTypes.object.isRequired,
allMembers: PropTypes.object.isRequired,
onPost: PropTypes.func.isRequired,
onNewPostChange: PropTypes.func.isRequired,
hasError: PropTypes.bool,
Expand Down
94 changes: 13 additions & 81 deletions src/components/RichTextArea/RichTextArea.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,14 @@ import stateToMarkdown from '../../helpers/stateToMarkdown'
import 'draft-js-link-plugin/lib/plugin.css'
import EditorIcons from './EditorIcons'
import './RichTextArea.scss'
import 'draft-js-mention-plugin/lib/plugin.css'
import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin'
import _ from 'lodash'

const linkPlugin = createLinkPlugin()
const blockDndPlugin = createBlockDndPlugin()
const mentionPlugin = createMentionPlugin({mentionPrefix: '@'})

const decorator = composeDecorators(
blockDndPlugin.decorator
)
const allowImages = false
const plugins = [linkPlugin, blockDndPlugin, mentionPlugin]
const plugins = [linkPlugin, blockDndPlugin]
if (allowImages){
const imagePlugin = createImagePlugin({ decorator })
plugins.push(handleDropPlugin)
Expand All @@ -56,8 +51,7 @@ const blocks = [
class RichTextArea extends React.Component {
constructor(props) {
super(props)
this.mentions = _.map(_.values(this.props.allMembers), (e) => { return {name: e.firstName + ' ' + e.lastName, handle: e.handle, userId: e.userId} })
this.state = {editorExpanded: false, editorState: EditorState.createEmpty(), titleValue: '', suggestions: this.mentions, mentions: []}
this.state = {editorExpanded: false, editorState: EditorState.createEmpty(), titleValue: ''}
this.onTitleChange = this.onTitleChange.bind(this)
this.onEditorChange = this.onEditorChange.bind(this)
this.handleKeyCommand = this.handleKeyCommand.bind(this)
Expand Down Expand Up @@ -207,42 +201,12 @@ class RichTextArea extends React.Component {
return
}
const title = this.state.titleValue

var that = this
const replaceMentionWithUserID = (content) =>
{
const encodeContent = (text) => {
return text.replace(/[*_`]/g, '\\$&')
}

const userIdMap = _.reduce(that.mentions, (obj, item) => {
obj[encodeContent(item.name)] = encodeContent(item.handle)
return obj
}, {})

for (var item in userIdMap)
{
content = content.replace('@' + item, '@' + userIdMap[item])
}
return content
}

const content = replaceMentionWithUserID(this.state.currentMDContent)

const content = this.state.currentMDContent
if ((this.props.disableTitle || title) && content) {
this.props.onPost({title, content})
}
}

onSearchChange = ({ value }) => {
this.setState({
suggestions: defaultSuggestionsFilter(value, this.mentions),
});
};

onAddMention = (mention) => {
}

cancelEdit() {
this.props.cancelEdit()
}
Expand All @@ -256,7 +220,6 @@ class RichTextArea extends React.Component {
this.setState({uploading})
}
render() {
const {MentionSuggestions} = mentionPlugin
const {className, avatarUrl, authorName, titlePlaceholder, contentPlaceholder, editMode, isCreating, isGettingComment, disableTitle} = this.props
const {editorExpanded, editorState, titleValue, oldMDContent, currentMDContent, uploading} = this.state
let canSubmit = (disableTitle || titleValue.trim())
Expand All @@ -269,28 +232,6 @@ class RichTextArea extends React.Component {
const currentEntity = getCurrentEntity(editorState)
const disableForCodeBlock = blockType === 'code-block'

const Entry = (props) => {
const {
mention,
theme,
searchValue, // eslint-disable-line no-unused-vars
isFocused, // eslint-disable-line no-unused-vars
...parentProps
} = props;

return (
<div {...parentProps}>
<div className={theme.mentionSuggestionsEntryContainer}>
<div className={theme.mentionSuggestionsEntryContainerRight}>
<div className={theme.mentionSuggestionsEntryText}>
{mention.get('handle')}
</div>
</div>
</div>
</div>
);
};

return (
<div className={cn(className, 'rich-editor', {expanded: editorExpanded || editMode})} ref="richEditor">
{(isCreating || isGettingComment) &&
Expand All @@ -317,23 +258,15 @@ class RichTextArea extends React.Component {
/>
<div className="draftjs-editor tc-textarea">
{!isGettingComment &&
<div>
<Editor
ref="editor"
placeholder={contentPlaceholder}
editorState={editorState}
onChange={this.onEditorChange}
handleKeyCommand={this.handleKeyCommand}
plugins={plugins}
setUploadState={this.setUploadState}
/>
<MentionSuggestions
onSearchChange={this.onSearchChange}
suggestions={this.state.suggestions}
onAddMention={this.onAddMention}
entryComponent={Entry}
/>
</div>
<Editor
ref="editor"
placeholder={contentPlaceholder}
editorState={editorState}
onChange={this.onEditorChange}
handleKeyCommand={this.handleKeyCommand}
plugins={plugins}
setUploadState={this.setUploadState}
/>
}
<div className="textarea-footer">
<div className="textarea-buttons">
Expand Down Expand Up @@ -425,8 +358,7 @@ RichTextArea.propTypes = {
oldTitle: PropTypes.string,
oldContent: PropTypes.string,
title: PropTypes.string,
content: PropTypes.string,
allMembers: PropTypes.object
content: PropTypes.string
}

export default RichTextArea
3 changes: 1 addition & 2 deletions src/projects/detail/containers/FeedContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ class FeedView extends React.Component {
}

render () {
const {currentUser, project, currentMemberRole, isCreatingFeed, error, allMembers} = this.props
const {currentUser, project, currentMemberRole, isCreatingFeed, error } = this.props
const { feeds } = this.state
const showDraftSpec = project.status === PROJECT_STATUS_DRAFT && currentMemberRole === PROJECT_ROLE_CUSTOMER
const onLeaveMessage = this.onLeave() || ''
Expand Down Expand Up @@ -383,7 +383,6 @@ class FeedView extends React.Component {
/>
<NewPost
currentUser={currentUser}
allMembers={allMembers}
onPost={this.onNewPost}
isCreating={isCreatingFeed}
hasError={error}
Expand Down