Handling beforeGetValueFromEditor in Jodit-React?

I have the exact same issue as this: https://github.com/xdan/jodit/issues/54

However, i can't figure out how to get this solution working using jodit-react

I've tried:

const handleEditorRef = (editorInstance) => {

    if (!editorInstance) {
      return;
    }

    editorInstance.events.on('beforeGetValueFromEditor', function () {
      return editorInstance?.value?.replace(/\{%[^\}]+%\}/g, function (match) {
        return match.replace(/&gt;/g, '>').replace(/&lt;/g, '<');
      });
    });

    editorRef.current = editorInstance;

  };

// in this case config has not events

  return (
    <JoditEditor
      editorRef={handleEditorRef}
      value={value}
      config={config}
      tabIndex={1} // tabIndex of textarea
      onBlur={onBlurOverride} // preferred to use only this option to update the content for performance reasons
      onChange={onChangeCallback ? onBlurOverride : undefined}
    />
  );

This gives the error maximum call stack exceeded.

Then i tried using the events in config:

const config = {
    events: {
        beforeGetValueFromEditor: () => {

          const editorInstance = editorRef.current;

          if (!editorInstance) {
            return '';
          }

          try {
            return editorInstance?.getNativeEditorValue()?.replace(/\{%[^\}]+%\}/g, function (match) {
              return match
                .replace(/&gt;/g, '>')
                .replace(/&lt;/g, '<');
            });
          }
          catch (e) {
            console.error("error in beforeGetValueFrom Editor " + e);
          }

        }
      },
}

const handleEditorRef = (editorInstance) => {

    if (!editorInstance) {
      return;
    }

    editorRef.current = editorInstance;
  };

  return (
    <JoditEditor
      editorRef={handleEditorRef}
      value={value}
      config={config}
      tabIndex={1} // tabIndex of textarea
      onBlur={onBlurOverride} // preferred to use only this option to update the content for performance reasons
      onChange={onChangeCallback ? onBlurOverride : undefined}
    />
  );
};

This gives the error Cannot read properties of undefined (reading 'addEventListener')

Note, im using the handleEditorRef function to get the ref because whenever i set the ref using the ref prop to JoditEditor it never seemed to actually be defined for me, so i couldn't figure out how to access the editor in the event config beforeGetValueFromEditor.

Am i doing something wrong here? There is 0 documentation I could find on accessing the editor from the events in config where the editor is not passed as a param. I found the editorRef looking at the source of Jodit-react.

I'm about to give up on this and go with TinyMCE but would prefer to stick with Jodit if this worked. We need to support liquid and the automatic override of <> characters is a dealbreaker. This is time sensitive so any help is appreciated. Thank you.

xdan / jodit

Handling beforeGetValueFromEditor in Jodit-React? #1102