Injecting content from another component into the editor

[FedericoCampe8]

Hello, I'm looking at ways to inject data (text for now) into Plate editor from another react component (e.g., a textbox). The user would be able to type some text into a textbox, click on a button and the text gets "injected" into Plate possibly rendered with a given specified color.

I'm currently using editor.insertData() with 'text/plain' and my question is: is this the recommended way? Do I need a plugin on plate side to fetch this data and create specific nodes with the proper text color?
If so, how do I ensure that I'm not changing behavior to the existing plugins dealing with insertion? For example, I don't want the text to be colored when I drag and drop text (that also triggers insertData I believe).

Thanks!

[12joan]

Plate's insertText (or insertNodes for use with marks) would be a far simpler way of inserting text into the editor.

[FedericoCampe8]

I thought about that but the problem is that insertText seems to be a straight copy of the text in a text leaf. If I type, let's say markdown, click on the button, and use insertText, this would not be converted to Plate - the deserializeMdPlugin won't run because this is not an 'insertData' operation. Unless I'm missing something...

[12joan]

Oh, if you want to deserialize a markdown value and insert the result into the editor, you can use the deserializeMd function (the same as the deserialize markdown plugin uses internally) and insertNodes.

[FedericoCampe8]

Almost, I would also need to mark some nodes (text nodes) to then render them in some color (injected text should have another color, e.g., purple).

So the process would be

const nodes = deserializeMd<Value>(
    editor as unknown as PlateEditor<Value>,
    text
)

// Add mark here ?
insertNodes(editor, nodes)

editor.move()

I would try to avoid recursively going down the list of nodes and manually adding a mark. It seems a hacky solution. Is there a better way?

[12joan]

All of Slate and Plate's utilities for adding marks to text assume that the text is already in the editor, and the range of text that should be marked is known. Since that is not the case here, manually traversing the nodes Slate fragment to add marks would be the least hacky solution, I think.

You can use isText and isElement as part of your recursive function to determine which nodes to add marks to and which to descend into. These functions, and marks themselves, are stable interfaces, so you can safely depend on them. I wouldn't consider this solution hacky at all.

[FedericoCampe8]

Thanks, that is what I ended up implementing, and works.