onDocumentChange and onSelectionChange

[delijah]

Problem
We have some plugins on our slate js editor implementation, that rely on the editors selections. Depending on the selection they need to change their position. Currently the onChange event of slate is fired for changes on the document structure but also for changes on the selection. Since the value does not really change on selection changes, the component that contains the slate editor will not get rerendered. Which is fine in normal cases, but in our use case it blocks our plugin from being rendered correctly.

Solution
If we would have a onDocumentChange and a onSelectionChange event, i guess we could just force update/rerender the component inside onSelectionChange. Then we would only have to call the onChange handler from the parent component onDocumentChange.

Alternatives
We need a rerender after a selection change. Not sure how to achieve this otherwise. At the moment we are checking if 100ms after the last onChange call, a render happened, if yes, fine, if no, we force update/rerender. Not very nice, but it works.

What do you think about that? Would it make sense? Or is there a strong reason why those props where not implemented?

[schnuderl]

you can distinguish in the onChange event like:

if (editor.operations.every(op => op.type === "set_selection")) ....

[delijah]

Oh wow, thank you, that helps 👍

[Halanson]

I have added a listener to myEditor.onChange = () => { ... }, but even without any expression in the curly brackets, I can not type anything in my editor. If I move the cursor with the up/down arrow key or use the mouse the typed symbols immediately pop up. So what I'm doing wrong?

[hieumau]

I have added a listener to myEditor.onChange = () => { ... }, but even without any expression in the curly brackets, I can not type anything in my editor. If I move the cursor with the up/down arrow key or use the mouse the typed symbols immediately pop up. So what I'm doing wrong?

I face with same problem. The reason is that you override onChange event of editor but not have default function for the fallback case that you not handle correctly. Here is my code fix

     const {onChange} = editor
     editor.onChange = () => {
            if (editor.operations.every(op => op.type === "set_selection")) {
                console.log(...editor.operations)
            }
            return onChange()
        }