Is it possible to pass the selected text from plate to another component in my application?

[wenyongqd]

I'm looking to customize a plugin that allows me to pass selected text from plate component to another component from my component. Do you think this is feasible, or do you have any suggestions?

[12joan]

Can you explain in more detail what you're trying to achieve?

[wenyongqd]

This is the scenario I want to achieve:
When I select the text in plate, the text could automatically pass to the input textarea which comes from my application.

[12joan]

Here's how I would do that:

// This component should be rendered inside a PlateProvider,
// or else `editor` should be accessed another way
export default () => {
  const editor = usePlateEditorState();

  const selectionValue = useMemo(() => selection
    ? getEditorString(editor, editor.selection)
    : 'No selection'
  ), [editor, editor.selection]);

  return <textarea value={selectionValue} readOnly />;
};

You'll need to wrap the relevant parts of your application inside a PlateProvider in order for usePlateEditorState to work. If wrapping in a PlateProvider isn't practical, you can try one of the other ways of getting access to the editor described here.

Alternatively, you could access the selected text through the DOM using window.getSelection().toString(), which would probably be more efficient but risks producing unexpected results if the memo callback is called while the editor isn't focused.

[wenyongqd]

That's very helpful, thanks! @12joan