CompositeDecorator strategies are not working when we are using Emoji Plugin.
See original GitHub issueI am using following two strategies coming from tweet example.
const compositeDecorator = new CompositeDecorator([
{
strategy: handleStrategy,
component: HandleSpan,
},
{
strategy: hashtagStrategy,
component: HashtagSpan,
},
]);
These two strategies are working fine and we can find them in the console log of editorState.( As same as Tweet example). Then I integrated Emoji Plugin into my editor. After that, only the Emoji Plugin decorator and Emoji Suggestions decorator are coming under the decorators array of editorState. My Hash tag and Handler stategies are gone from the decorators. Any particulate reason to this. My code is as follow. Please refer. ank you in advance.
import { CompositeDecorator, EditorState, RichUtils, convertFromRaw, convertToRaw} from 'draft-js';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createEmojiPlugin from 'draft-js-emoji-plugin';
import editorStyles from './editorStyles.css';
const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions } = emojiPlugin;
const plugins = [emojiPlugin];
export default class DayView extends Component {
constructor(props) {
super(props);
const compositeDecorator = new CompositeDecorator([
{
strategy: handleStrategy,
component: HandleSpan,
},
{
strategy: hashtagStrategy,
component: HashtagSpan,
},
]);
this.state = {
editorState : EditorState.createEmpty(compositeDecorator),
};
this.focus = () => this.refs.editor.focus();
this.onChange = (editorState) => this.setState({editorState});
this.logState = () => console.log(this.state.editorState.toJS());
}
render() {
return (
<div>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
placeholder="Write a tweet..."
ref="editor"
spellCheck={true}
plugins={plugins}
/>
<EmojiSuggestions />
</div>
)
}
}
const HANDLE_REGEX = /\@[\w]+/g;
const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g;
function handleStrategy(contentBlock, callback) {
findWithRegex(HANDLE_REGEX, contentBlock, callback);
}
function hashtagStrategy(contentBlock, callback) {
findWithRegex(HASHTAG_REGEX, contentBlock, callback);
}
function findWithRegex(regex, contentBlock, callback) {
const text = contentBlock.getText();
let matchArr, start;
while ((matchArr = regex.exec(text)) !== null) {
start = matchArr.index;
callback(start, start + matchArr[0].length);
}
}
const HandleSpan = (props) => {
return <span {...props} style={styles.handle}>{props.children}</span>;
};
const HashtagSpan = (props) => {
return <span {...props} style={styles.hashtag}>{props.children}</span>;
};
const styles = {
root: {
fontFamily: '\'Helvetica\', sans-serif',
padding: 20,
width: 600,
},
editor: {
border: '1px solid #ddd',
cursor: 'text',
fontSize: 16,
minHeight: 40,
padding: 10,
},
button: {
marginTop: 10,
textAlign: 'center',
},
handle: {
color: 'rgba(98, 177, 254, 1.0)',
direction: 'ltr',
unicodeBidi: 'bidi-override',
},
hashtag: {
color: 'rgba(95, 184, 138, 1.0)',
},
};
Issue Analytics
- State:
- Created 7 years ago
- Comments:12 (6 by maintainers)
Top Results From Across the Web
Draft js decorator not working with plugins - Gaurav Sobti
When I use CompositeDecorator with draft js plugins like mention, linkify, my decorator gets overridden and it doesn't work. const compositeDecorator = new ......
Read more >Building an editor with Draft.js and React - Big Bite Creative
This plugin enables editors to post updates right from the front-end of their site. To do this, you need an editor. The previous...
Read more >How to use the draft-js.CompositeDecorator function in ... - Snyk
To help you get started, we've selected a few draft-js. ... Use Snyk Code to scan source code in minutes - no build...
Read more >Microsoft Teams Emojis: When, How, And Why To Use Them 🤔
Hold up – my Microsoft Teams emojis are not working. How do you add emojis to Microsoft Teams? To add emojis to a...
Read more >Web Developer Playbook: Draft.js Rich Text Editor - codeburst
We are going to use the <Editor /> and a few plugins created for ... like in Twitter to adding stickers and emojis...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
if you try the following code, it should make your decorator working with emoji plugins
Thank You very much for your patient @mzbac . I’ll check.