pasting text on input was creating a new paragraph node instead of ad…

[khanakia]

When pasting the text on input was not working it was created a new paragraph node

check reference issue:

#4086

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 1, 2023 8:10am
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 1, 2023 8:10am

[khanakia]

@zurfyx I am unable to understand why integrity check is failed at flow test when i run locally i do not see any error

➜  lexical git:(paste_input) ✗ node ./scripts/check-flow-types.js

Running Flow...
No errors!

[zurfyx]

Thank you, that's a tricky one. Let me come back to you tomorrow, I want to think this through. I think that the approach we want to take here is to handle DecoratorNode separately/or a reusable component that handles the basic events for you automatically. Right now we can work around this by handling the click event manually inside the DecoratorNode, like we do with images, and we could do the same thing with equation but it's not very scalable.

For reference https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/ImageComponent.tsx#L226

[khanakia]

Thank you, that's a tricky one. Let me come back to you tomorrow, I want to think this through. I think that the approach we want to take here is to handle DecoratorNode separately/or a reusable component that handles the basic events for you automatically. Right now we can work around this by handling the click event manually inside the DecoratorNode, like we do with images, and we could do the same thing with equation but it's not very scalable.

For reference https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/ImageComponent.tsx#L226

I do quite understand how to make the paste work inside the INPUTS as I have shown in the video POLL Component in case.

I do not see any way to make the logic work with the CLICK_COMMAND as you suggested

Screen.Recording.2023-03-30.at.8.57.46.PM.mov

[zurfyx]

You're right, my answer yesterday wasn't very accurate. To understand this problem better I believe we have to evaluate the use cases of Decorator + Paste.

1. Paste when the Node is selected
2. Paste when multiple Nodes are selected
3. Paste when you're interacting with the Decorator

The audience who understand the 1 and 2 better is the editor itself that hosts the selection. We can delegate this work to it. This is already done even though it doesn't fully work.

Third is the conflicting case you are trying to solve. The constraint here is that Lexical doesn't understand Decorator Nodes, so that is someting that you the Decorator Node will have to handle itself, either in a generic or non-generic manner.

I'm not sure what the generic solution would look like for now but for we can have something like this to fix polls.

PollComponent.tsx

 editor.registerCommand(
      PASTE_COMMAND,
     () => {
      if (inputIsFocused) {
        return true;
      }
...

That is in a way the same thing that image captions do but the event is handled for you as it's part of the Lexical Rich Text plugin setup.

[khanakia]

Thank i was able to do something like that already.

But is there no way we handle this globally instead of handling every Decorated Component?

I see other editors like slatejs, editorjs also handle it globally, and the same solution i proposed with a pull request.

[zurfyx]

Your solution is correct. My concern is around trying to make the upper layer smart and trying to understand DecoratorNodes which it will never be able to in a good way. For example, if your DecoratorNode was instead a DropZone that handled paste this would never handle it. Should this be handled inside the PlainText plugin too?

[fantactuka]

Can we reuse isSelectionWithinEditor or isSelectionCapturedInDecoratorInput here?

[khanakia]

I do not this is meant for plain text i have studied so many sites using lexical hardly anybody uses plain text with decorated nodes has input.

Plain text is mainly to build the minimal interface.

I am all ears if we have to we can

[zurfyx]

Discussed this PR as a team, happy to merge after @fantactuka's comment is addressed, this would decrease the overall added bundle size. Thank you for working on this!

[khanakia]

I have updated the code

[zurfyx]

Thank you for iterating on this!