SlateJS: slate-core Editor not updating value for simulated onKeyDown events

Question

I'm attempting to simulate onKeyDown events on the Editor from slate-core -- as opposed to slate-react -- to test some plugins I am developing. However, the Editor is not updating its Value whatsoever.

I've extensively looked through the SlateJS 0.47.x documentation and from what I can tell the Editor component should respond to onKeyDown events out-of-the-box.

Here is a small codesandbox example that reproduces my problem.

^ Notice that despite me trying to simulate numerous onKeyDown events -- in the file core-editor-is-not-responding-to-on-key-down-events.js -- the value of the Editor never updates; it remains a blank document.

I am concerned about this difference in the behavior because seems like I would need to re-write functionality of inserting text as it gets typed out when said functionality I believe already exists.

Any help would be incredibly appreciated!

Answer 1

So it turns out to be a bug in Slate-Core, as @devinm mentioned. Without Slate-React, it doesn't react properly to onKeyDown.

---

I don't know how to bundle this up for other people to use, and also this issue affects a number of Slate versions so I think the best thing really is to explain what needs to be done anyway.

Note that your environment will need to support ES6 imports.

1. Go to the Slate codebase for the version you're using which is affected (0.44.x to 0.47.x) and find the slate-react/plugins/DOMPlugin files
2. Copy the contents of the directory into a new folder in your project called slate-react-dom-plugin
3. Copy these directories into the path alongside the slate-react-dom-plugin/index.js file - utils and constants (again, from slate-react)
4. Update the import paths for each module to match their new structure (note that you don't actually need every file in the utils folder, only the ones referenced by the DOMPlugin but it's just easier to copy the entire folder)
5. In your test use import DOMPlugin from './slate-react-dom-plugin'
6. When creating your test-editor, use the following plugin configuration:

  new Editor({
    value: value
    plugins: [DOMPlugin({ plugins: [...ANY_OTHER_PLUGINS] })], // Wrap any plugins you use with the DOMPlugin
  });

7. Run your test, and it should fire onKeyDown events as expected now

---

Let me know if you have any questions!