Usage with React Hook API

[thomaseizinger]

I am toying around with this template and noticed that it is using React class components.

For anyone interested, I've come up with the following, minimal hook that can be used like useState:

export function useNote(): [string, (newText: string) => void] {
  let [note, setNote] = useState('');
  let editorKitReference = useRef<EditorKit>();

  useEffect(() => {
    editorKitReference.current = new EditorKit(
      {
        setEditorRawText: (text: string) => setNote(text),
      },
      {
        mode: 'plaintext',
      }
    );
  }, []);

  return [
    note,
    (newText: string) => {
      editorKitReference.current?.onEditorValueChanged(newText);
      setNote(newText);
    },
  ];
}

[thomaseizinger]

Unfortunately, I can't get it to work reliably and I am struggling to see where the error is.

I've debugged through the EditorKit and one bizarre thing I noticed is that EditorKit thinks that my note supports filesafe despite me explicitly passing false. (Not in the above but in the code I debugged).

The code I am working on is here: https://github.com/thomaseizinger/sn-timesheet-editor

[thomaseizinger]

cc @johnny243 @TheodoreChu Can you spot an obvious mistake in how I am using EditorKit in the above?

[moughxyz]

You'd have to better describe what exactly the issue you're having is..

[thomaseizinger]

Of course, sorry.

The issue I have is that initial loading of the note's content works but updating doesn't.

[thomaseizinger]

I am yet to confirm that this is the same as with the class component although I'd still consider there to be a bug somewhere if EditorKit doesn't work with hooks.

[moughxyz]

I would first confirm the behavior with a class component just to reduce the surface area of examination.

[thomaseizinger]

I would first confirm the behavior with a class component just to reduce the surface area of examination.

I should be able to get to that in a few hours, will report back.

[thomaseizinger]

The hook does in fact work but only if the entire app is bundled into release mode! When using the dev build from yarn start, the behaviour is buggy.