Is there a way to update a Slate change after the current change completes?

Question

Basically I want to make inlines that can be updated from the end if the cursor/selection is there. However it seems to be overriding changes like deleting from the end an inline.

I was attempting to do something like this (with guidance from slate-sticky-inline)

JSFiddle or what I think is the relevant code below

const onChange = change => {
    //Not in a inline but at the start of some node
    if (!change.value.focusInline && change.value.selection.focusOffset === 0) {
      //Find the index of the node
      const textNodeIndex = change.value.focusBlock.nodes.findIndex(
        node => node.key === change.value.focusText.key
      );
      //check the node before it to see if its an inline
      const upcomingNode = change.value.focusBlock.nodes.get(textNodeIndex - 1);
      if (Inline.isInline(upcomingNode)) {
        //put me at the end of the inline
        return change.extendToEndOf(upcomingNode);
      }
    }
  };

I was hoping someone could help me understand whats going wrong here and possibly explain what I am misunderstanding. I also created a barebones jsfiddle with my plugin. You'll notice if you attempt to erase the "p" at the end of "@help" it will prevent you from doing so.

score 0 · Answer 1 · answered Jun 20 '18 at 20:15

0

You forgot to this.setState({value: change.value}) in onChange function.

Slate Editor shall be considered as a controlled component.

answered Jun 20 '18 at 20:15

Zhu Jinxuan

406
2
8

I don't have access to this.setState in the plugin where onChange is defined. – Martin Jun 20 '18 at 21:02
you can likely pass a reference to the editor into the plugin via props or some other mechanism. – JuanIsFree Oct 26 '18 at 22:21

Is there a way to update a Slate change after the current change completes?

1 Answers1