Updating decorator on fly doesn't change.

[arminsalcin]

Hello to all,

I have a problem with decorators if i try yp update decorator on fly decorator doesn;t change here is example...

const EditorComponent = () => {
 const { allKeywords } = useSelector(selectEditor); //we get this from redux store which is response from api 
  const [decor, setDecor] = useState([
    {
      strategy: (contentBlock, callback) => {
        return findWithRegex(
          getRegex(allKeywords, keywordName),
          contentBlock,
          callback
        );
      },
      component: Selection,
    },
  ]); // we put strategy as direct function cause we want to check if this make changes

  useEffect(() => {
    setDecor([
      {
        strategy: (contentBlock, callback) => {
          return findWithRegex(
            getRegex(allKeywords, keywordName),
            contentBlock,
            callback
          );
        },
        component: Selection,
      },
    ]);
  }, [allKeywords]); // we do this on change of allKeywords ( we have function that execute this api and put new value in redux)

  return (
        <Editor
          placeholder="Write something!"
          editorState={editorState}
          onEditorStateChange={onChange}
          wrapperClassName="wrapper-class"
          editorClassName="editor-class"
          toolbarClassName="toolbar-class"
          customDecorators={decor} // here we use our state
          spellCheck
          toolbar={toolbarOptions}
        />
  );



}

So what happens we have some api call we get some words, and we put that in regex and put in decorator all works perfect, but when we change some words on the fly (we have example button that change words) and it trigger the api again we get new words via selector from store but new words doesnt apply in decorator only old decorator remains. I can approve that runing code

 console.log(newEditorState.getDecorator());

which always have only first state decorator...

[Sotatek-TiepLe]

Yep I also had the same problem. Do you have a solution yet?

[jrohlandt]

Anybody know how to work around this?

I'm currently manually triggering a re-render of my component. But for a another usecase it is not a valid solution (reload takes too long and has to be done too often).