Slate: Slate component handlers should not be required to be pure

[steida]

From a code, I write, it looks like Slate component handlers are required to be pure. Yep, my code is 💯 React Hooks. When I create a new Slate handler with properly updated closure context, Slate is still using the previous reference. Slate component is not resilient. https://overreacted.io/writing-resilient-components/

This could be solved easily only with refactoring to Hooks and eslint-plugin-react-hooks.

[steida]

In other words, Slate should allow dynamic event handlers. Workaround:

// Workaround for https://github.com/ianstormtaylor/slate/issues/2927
const historyIndexRef = useRef<number | null>(state.history.index);
historyIndexRef.current = state.history.index;

const handleEditorKeyDown = useCallback<
  (event: KeyboardEvent, editor: Controller, next: () => any) => any
>((event, _editor, next) => {
  // Disable writing in history mode.
  // TODO: We should also prevent pasting.
  if (historyIndexRef.current != null) {
    const isKeyNavigation =
      event.key === 'Tab' ||
      event.key === 'ArrowRight' ||
      event.key === 'ArrowDown' ||
      event.key === 'ArrowLeft' ||
      event.key === 'ArrowUp';
    if (!isKeyNavigation) event.preventDefault();
    return;
  }
  return next();
}, []); // Must be empty. https://github.com/ianstormtaylor/slate/issues/2927

[josephluck]

I have come across the same issue in my hooks app as well - it's bad because it means that callbacks passed in to slate (like handleEditorKeyDown) must be memoised, which means that they cannot use any dependencies like state or props.

Would be amazing if this was fixed soon - I'm not too familiar with the Slate internals, but happy to help if I can!

[josephluck]

In my project, I've used the same technique of using React refs to hold mutable versions of any dependencies that my callback relies on. Less than ideal, but works as a hacky temporary solution.

[ianstormtaylor]

Open to ideas for this. The reason that handlers are memoized is because the handlers actually are combined to create their own "plugin", which affects the schema. And re-computing the plugins stack on every render seemed like a high cost. I can't remember the exact details.

But I'd love to have this restriction removed if possible, if someone wants to look into it.

[newdelop]

I have a problem that's unrelated and I am brand new at this, so bear with me. I am having lots of issues with third parties or hackers getting in my phone and installing apps to watch listen steal or copy things from my phone, and they are to control my phone at times what do i do??

[ianstormtaylor]

I believe that this may be fixed by https://github.com/ianstormtaylor/slate/pull/3093, which has changed a lot of the logic in Slate and slate-react especially. I'm going to close this out, but as always, feel free to open a new issue if it persists for you. Thanks for understanding.