How to highlight selected text without affecting the document structure.

[wenyongqd]

I want to add a note feature similar to comments, but without affecting the data structure when selecting text. Any thoughts on how to implement it?

[12joan]

You can use Slate decorations to add mark-like wrappers around ranges of content without mutating the editor value. Be sure to use Slate's range refs to keep these ranges in sync with the editor value, though. You can check Slate's documentation and source code for more information about how to use decorations and range refs. In Plate, you can use the decorate plugin option as the entrypoint for implementing decorations.

[wenyongqd]

@12joan
I use this decorate to highlight the below text:

const decorate = useCallback(([node, path]) => {
        return [
            {
                anchor: {
                    path: [
                        0,
                        0
                    ],
                    offset: 0
                },
                focus: {
                    path: [
                        0,
                        0
                    ],
                    offset: 5
                },
                note: true
            }
        ]
    }, []);

As my understanding it should only render the first 5 characters in 'Overview', however the result is not what I expected, do I missed something?

[12joan]

I'm not sure why that's happening. Can you create a minimal reproduction in a code sandbox?

[wenyongqd]

@12joan I believe the issue lies in the structure of the previous screenshot. Currently, it is set up to display the first 5 characters of each paragraph when decorated. Is this the intended behavior? If so, how can we limit this decoration to only apply to the first paragraph or a specific place?

[12joan]

Oh, I think it's because you're returning something for every node. Try only returning a value for the paths that need decorating.

const decorate = useCallback(([node, path]) => {

[wenyongqd]

@12joan Thanks
I use node Id as the filter in decorate method, it works now.