How to select the Editor data and get it in console log

[manojrampur-tiger]

Description

I have an issue here:

When I select a text in the editor whatever the text that I have selected should be console logged. Which component I need to modify and what changes I need to modify to make the text selection and get in console log.

Reproduction URL

No response

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Plate version

44.0.1

Slate React version

0.102.0

Screenshots

Logs

Browsers

No response

[dosubot[bot]]

To log the currently selected text in Plate, add the onSelectionChange prop to your component. In your PlateEditor (for example, in apps/www/src/registry/blocks/editor-basic/components/editor/plate-editor.tsx), update it like this:

import { Plate } from 'platejs/react';
import { Editor } from 'slate';

export function PlateEditor() {
  // ...your editor setup

  return (
    <Plate
      editor={editor}
      onSelectionChange={({ editor, selection }) => {
        if (selection) {
          const selectedText = Editor.string(editor, selection);
          console.log(selectedText);
        }
      }}
    >
      {/* ...your editor UI */}
    </Plate>
  );
}

Now, whenever you select text in the editor, the selected text will be logged to the console. The key is using the onSelectionChange prop and Slate's Editor.string method to extract the text from the current selection.
Reference | Slate Editor.string docs

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[manojrampur-tiger]

@dosu
I implemented the above code.

The issue right now is, when I select the respective text it's selecting complete text instead of selecting the text which I have selected.

Example:

1. Data in the Editor:

The iPhone 12 features a 6.1-inch Super Retina XDR display, A14 Bionic chip, dual 12MP cameras (wide and ultra-wide), 5G connectivity, MagSafe support, and runs iOS. It offers improved performance and camera capabilities compared to previous models.

The iPhone 13 features a 6.1-inch Super Retina XDR display, A15 Bionic chip, dual 12MP camera system with sensor-shift optical image stabilization, improved battery life, and supports 5G connectivity. It runs on iOS and comes in various colors like Pink, Blue, Midnight, Starlight, and (PRODUCT)RED.

2. Selected Text in Editor:

iPhone 12 features

3. Expected Output in Console:

selectedText: iPhone 12 features

4. Actual Output in Console:

selectedText: The iPhone 12 features a 6.1-inch Super Retina XDR display, A14 Bionic chip, dual 12MP cameras (wide and ultra-wide), 5G connectivity, MagSafe support, and runs iOS. It offers improved performance and camera capabilities compared to previous models.The iPhone 13 features a 6.1-inch Super Retina XDR display, A15 Bionic chip, dual 12MP camera system with sensor-shift optical image stabilization, improved battery life, and supports 5G connectivity. It runs on iOS and comes in various colors like Pink, Blue, Midnight, Starlight, and (PRODUCT)RED

Please help me to get only the selected text in the Editor ASAP!!

Thanks in Advance!!

[felixfeng33]

@claude Can you help