How do I programmatically insert text using the Chrome extension on Slate document?

[rahulbansal16]

So I want to understand how I would be able to insert text on the websites where Slate is used. The current way I'm doing it is by copying the content to the clipboard and then using document.execCommand('insertText', false, content); // Simulate paste
to call the insert text.

The problem is it doesn't work everywhere, especially in Slate editor. It works for the normal text area, Gmail, and others, but on websites where Slate document is used, it doesn't work. It just inserts the text in the location; it doesn't create the string node that is required.

Correct way to insert text

but Simulating Paste insert text like below

Any suggestion on inserting text correctly?

[WindRunnerMax]

Maybe you should try to get the editor instance first, and then perform some operations. For example, in React, you can get the instance like this.

const el = document.querySelector(`[data-slate-editor="true"]`);
const key = Object.keys(el).find(it => it.startsWith("__react"));
const editor = el[key].child.memoizedProps.node;

After that, you can use the editor instance to manipulate the content.

el.focus();
editor.insertText("123");

Of course, you can also try to simulate the beforeinput event to solve this issue. However, I wasn't able to achieve that.

[rahulbansal16]

Thanks I will try it out.