CompositeDecorator strategies are not working when we are using Emoji Plugin.

I 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)',
  },
};

[mzbac]

if you try the following code, it should make your decorator working with emoji plugins

<Editor
  editorState={this.state.editorState}
  onChange={this.onChange}
  decorators={ [{
        strategy: handleStrategy,
        component: HandleSpan,
    },
    {
         strategy: hashtagStrategy,
         component: HashtagSpan,
    },]}
  plugins={plugins}
/>

[ErangaLakmal]

Thank You very much for your patient @mzbac . I’ll check.