{"action":"created","issue":{"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/538","repository_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins","labels_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/538/labels{/name}","comments_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/538/comments","events_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/538/events","html_url":"https://github.com/draft-js-plugins/draft-js-plugins/issues/538","id":189025444,"number":538,"title":"CompositeDecorator strategies are not working when we are using Emoji Plugin.","user":{"login":"ErangaLakmal","id":22886170,"avatar_url":"https://avatars.githubusercontent.com/u/22886170?v=3","gravatar_id":"","url":"https://api.github.com/users/ErangaLakmal","html_url":"https://github.com/ErangaLakmal","followers_url":"https://api.github.com/users/ErangaLakmal/followers","following_url":"https://api.github.com/users/ErangaLakmal/following{/other_user}","gists_url":"https://api.github.com/users/ErangaLakmal/gists{/gist_id}","starred_url":"https://api.github.com/users/ErangaLakmal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ErangaLakmal/subscriptions","organizations_url":"https://api.github.com/users/ErangaLakmal/orgs","repos_url":"https://api.github.com/users/ErangaLakmal/repos","events_url":"https://api.github.com/users/ErangaLakmal/events{/privacy}","received_events_url":"https://api.github.com/users/ErangaLakmal/received_events","type":"User","site_admin":false},"labels":[{"id":332340771,"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/labels/question","name":"question","color":"cc317c","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-11-14T04:15:12Z","updated_at":"2016-11-16T05:57:19Z","closed_at":null,"body":"I am using following two strategies coming from tweet example.\r\n``` \r\nconst compositeDecorator = new CompositeDecorator([\r\n    {\r\n        strategy: handleStrategy,\r\n        component: HandleSpan,\r\n    },\r\n    {\r\n         strategy: hashtagStrategy,\r\n         component: HashtagSpan,\r\n    },\r\n]);\r\n```\r\n\r\nThese 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.\r\n\r\n```\r\nimport { CompositeDecorator, EditorState, RichUtils, convertFromRaw, convertToRaw} from 'draft-js';\r\nimport Editor, { createEditorStateWithText } from 'draft-js-plugins-editor'; \r\n\r\nimport createEmojiPlugin from 'draft-js-emoji-plugin'; \r\nimport editorStyles from './editorStyles.css';\r\n\r\nconst emojiPlugin = createEmojiPlugin();\r\nconst { EmojiSuggestions } = emojiPlugin;\r\nconst plugins = [emojiPlugin];\r\n\r\nexport default class DayView extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        const compositeDecorator = new CompositeDecorator([\r\n            {\r\n              strategy: handleStrategy,\r\n              component: HandleSpan,\r\n            },\r\n            {\r\n              strategy: hashtagStrategy,\r\n              component: HashtagSpan,\r\n            },\r\n        ]);\r\n       \r\n        this.state = {\r\n            editorState : EditorState.createEmpty(compositeDecorator),\r\n        };\r\n\r\n        this.focus = () => this.refs.editor.focus();\r\n        this.onChange = (editorState) => this.setState({editorState});\r\n        this.logState = () => console.log(this.state.editorState.toJS());\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div>\r\n                <Editor\r\n                    editorState={this.state.editorState}\r\n                    onChange={this.onChange}\r\n                    placeholder=\"Write a tweet...\"\r\n                    ref=\"editor\"\r\n                    spellCheck={true}\r\n                    plugins={plugins}\r\n                />\r\n               <EmojiSuggestions />\r\n           </div>        \r\n        )\r\n    }\r\n}\r\n\r\nconst HANDLE_REGEX = /\\@[\\w]+/g;\r\nconst HASHTAG_REGEX = /\\#[\\w\\u0590-\\u05ff]+/g;\r\n\r\nfunction handleStrategy(contentBlock, callback) {\r\n  findWithRegex(HANDLE_REGEX, contentBlock, callback);\r\n}\r\n\r\nfunction hashtagStrategy(contentBlock, callback) {\r\n  findWithRegex(HASHTAG_REGEX, contentBlock, callback);\r\n}\r\n\r\nfunction findWithRegex(regex, contentBlock, callback) {\r\n  const text = contentBlock.getText();\r\n  let matchArr, start;\r\n  while ((matchArr = regex.exec(text)) !== null) {\r\n    start = matchArr.index;\r\n    callback(start, start + matchArr[0].length);\r\n  }\r\n}\r\n\r\nconst HandleSpan = (props) => {\r\n  return <span {...props} style={styles.handle}>{props.children}</span>;\r\n};\r\n\r\nconst HashtagSpan = (props) => {\r\n  return <span {...props} style={styles.hashtag}>{props.children}</span>;\r\n};\r\n\r\nconst styles = {\r\n  root: {\r\n    fontFamily: '\\'Helvetica\\', sans-serif',\r\n    padding: 20,\r\n    width: 600,\r\n  },\r\n  editor: {\r\n    border: '1px solid #ddd',\r\n    cursor: 'text',\r\n    fontSize: 16,\r\n    minHeight: 40,\r\n    padding: 10,\r\n  },\r\n  button: {\r\n    marginTop: 10,\r\n    textAlign: 'center',\r\n  },\r\n  handle: {\r\n    color: 'rgba(98, 177, 254, 1.0)',\r\n    direction: 'ltr',\r\n    unicodeBidi: 'bidi-override',\r\n  },\r\n  hashtag: {\r\n    color: 'rgba(95, 184, 138, 1.0)',\r\n  },\r\n};\r\n```"},"comment":{"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/comments/260861290","html_url":"https://github.com/draft-js-plugins/draft-js-plugins/issues/538#issuecomment-260861290","issue_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/538","id":260861290,"user":{"login":"ErangaLakmal","id":22886170,"avatar_url":"https://avatars.githubusercontent.com/u/22886170?v=3","gravatar_id":"","url":"https://api.github.com/users/ErangaLakmal","html_url":"https://github.com/ErangaLakmal","followers_url":"https://api.github.com/users/ErangaLakmal/followers","following_url":"https://api.github.com/users/ErangaLakmal/following{/other_user}","gists_url":"https://api.github.com/users/ErangaLakmal/gists{/gist_id}","starred_url":"https://api.github.com/users/ErangaLakmal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ErangaLakmal/subscriptions","organizations_url":"https://api.github.com/users/ErangaLakmal/orgs","repos_url":"https://api.github.com/users/ErangaLakmal/repos","events_url":"https://api.github.com/users/ErangaLakmal/events{/privacy}","received_events_url":"https://api.github.com/users/ErangaLakmal/received_events","type":"User","site_admin":false},"created_at":"2016-11-16T05:57:19Z","updated_at":"2016-11-16T05:57:19Z","body":"Correct. I tried this method. The contentBlock variable which is in the following line is not properly set. \r\n```\r\n      function findWithRegex(regex, contentBlock, callback) {\r\n           const text = contentBlock.getText();\r\n```\r\nBecase of that, it indicates the following error. \r\n\r\n`EditorField.js:145 Uncaught TypeError: contentBlock.getText is not a function`\r\n\r\nThen I logged the contentBlock by putting a `consol.log()` there. This is what it indicated.\r\n\r\n```\r\n( /*number*/start, /*number*/end) {\r\n        // Find out if any of our matching range is already occupied\r\n        // by another decorator. If so, discard the match. Otherwise, store\r\n        //…\r\n```\r\n\r\n\r\nWhat I understood is, This message prompts because I am using \"#\" and \"@\" tags which are already taken by my `mentions plugin`. Is this possible. Based on that assumption I changed my regex to `const HANDLE_REGEX = /\\$[\\w]+/g;`. Unfortunately the issue continues.  "}}
{"actor":{"display_login":"ErangaLakmal"}}