How to change Editor state from outside of react with DOM manipulation?

[PhilBookst]

Hey Slate Team,

I'm trying to build a tool similar to the Grammarly/LanguageTool browser extension. I'm using the keystone.js CMS, which encapsulates the Slate instance completely, so I don't have any access to the editor methods provided.

I tried the languageTool extension and it works correctly with the editor, so there must be a way to change the editor state with just js on the client, but I'm struggling to replicate its functionality.

Simply modifying the textContent of a text node doesn't trigger any changes in the editor state, which can be seen in the video below. When I start typing after changing the textContent with js, the editor switches back to the old state and the cursor position is off aswell.

keystone-cursor-jump.mp4

As you can see when I replace the text, the "Save changes" button is still disabled, since the editor state hasn't changed internally. Any idea on how I can achieve the behaviour of the browser extension?

I also made a post in the slack space https://slate-js.slack.com/archives/C1RH7AXSS/p1653213424239959 and tried dispatching an InputEvent as someone suggested, but sadly with no success... (also tried playing around with the possible props for the InputEvent, but same result)

const event = new InputEvent("beforeinput", {
    bubbles: true,
    composed: true,
    cancelable: true,
    inputType: "insertText",
    data: value,
    detail: 0,
})

trigger.dispatchEvent(event)

where value is some text and trigger is the closest node with data-slate-leaf='true'

Any help is deeply appreciated, I have no idea how to go on from here nor what to search for.

[PhilBookst]

Follow up:

I just saw this thread on stackoverflow, suggesting to use the InputEvent with textInput as type:

// textInput instead of beforeinput seems to work
const event = new InputEvent("textInput", {  
    bubbles: true,
    inputType: "blablabla",    // apparently it doesn't matter what value this is set to? 
    data: "hello",
})

editor.dispatchEvent(event)

this seems to work as you can see in the video below, but it's not exactly what I need

input-event.mp4

Unfortunately, I cannot find any info on the "textInput" type of the InputEvent() constructor and where this person got it from. The MDN docs just mention the input and beforeinput type, which both don't work for me

[ryanharding]

Hi,

Did you ever manage to find an answer PhilBookst?

[kajol-comprehendpt]

Hi,

Were you able to find an answer @PhilBookst?