Problems to create an interactive and selectable node

[pedrocalderon]

Hello everyone,

I explained my problem in details, because I think context may be important in this case, but I also added a TLDR at the end with just my questions.

I'm using Lexical to create a react platform where users can interact with legal documents, we allow users to select and classify parts of the documents, like the image bellow:

The text above is in portuguese, but the important part is the highlighted text with a tag between brackets and the close button at the end.

The requirements of this features are the following:

• The user must be able to select a text (that can be cross nodes or in tables) and click in a button to classify that text
• A given piece of text may have multiple classifications
• The user may click over a piece of classified text to see all the metadata related to that piece of text (in a modal)
• The user may click the close button inside a classified text to remove this classification

I tried two approaches and got stuck in both of them for different reasons. I'll explain both of my approaches and describe my problem with each one of them.

First approach: use a DecoratorNode

Being a React developer my first approach was to use a DecoratorNode that rendered a custom component with all the functionality that I needed. This was fairly straightforward since I had access to the current editor instance in the decorate method.

I end up with something like this:

decorate(editor: LexicalEditor): JSX.Element {
  return (
    <HighlightedText
      ...
      onClick={() =>
        editor.dispatchCommand(ON_TEXT_CLICK_COMMAND, ...)
      }
      onClose={() => {
        editor.dispatchCommand(ON_X_CLICK_COMMAND, ...)
      }}
    />
  )
}

The shortcoming of this solution is the selection interface. Since this is a DecoratorNode when the selection is over it the selection becomes null, and I depend in the selection to be able to create new classifications over an already classified piece of text.

Second approach: extend a TextNode

My second approach was to re-implement the previous node as an extension of a TextNode. I abandoned my react component and implemented the same thing inside the createDOM method of the extended TextNode. This indeed fixed my selection problem, but now I don't know how to dispatch a command from withing my node.

The TextNode does not receive the editor as a second argument of the createDOM method and I did not found any way of accessing the editor from withing the node. Since the node properties must be serializable I cannot pass neither the editor nor a callback on the instantiation of my node.

In this case my doubt would be how to access the editor from withing a TextNode.

TLDR

I would like to know one of two things:

1. How could I implement the RangeSelection functionality in a DecoratorNode
2. Or how could I dispatch commands from withing a node that extends the TextNode

I do accept suggestions of alternative ways of implementing this solution!

[trueadm]

What you want to use is a mutation listener on your given custom node. This will allow you to know when said nodes are created, updated and destroyed. In the creation phase, you can add event listeners to the DOM element using editor.getElementByKey

[pedrocalderon]

@trueadm , thank you very much, this was indeed what I needed.

[tony3918]

@pedrocalderon Hi Pedro I presume you somehow save the user's highlight/tag information in a database and later deserialize it to put back the classifications. I was wondering if you saved the entire (document + classification) serialization together as a whole, or if you can save just the classifications separately from the original document.

I've got a similar use case where users must be able to highlight/memo on selected parts of the document but the original document cannot be modified. I was having trouble trying to separately serialize the user highlight/memos and then put them back on top of the document later on, so any help or suggestions would be greatly appreciated :)

[pedrocalderon]

Hello @tony3918 , we do keep the classifications separated from the document content in our database. For us being able to query the classifications independently from the document content is important, that's why we went through this route.

It has been kind o trick to 'merge' the classifications with the text in Lexical, but I did wrote an internal plugin that is doing the job for now (it is in development, but seams that is going to work in prod as well). For me, the main problem is the state management. Since I'm using react I have a 'source of truth' in my react state (this is the text markup + an array of classifications), lexical also keeps this same data, but in a different format. Synking this two states to guarantee consistency is kind of tricky.

My approach for this problem was:

• Parse the markup text containing the document data (for us this is a custom markup)
• Pass all the classification to the classification plugin
  • For each classification, locate it's stating node (we do this by text index), this will always be a text node or a classification node
  • split the found node at the classification start and create a node until the classification or the node ends
    • If we stopped at the classification end, we are done
    • otherwise the end index of the current node is now the classification start, and we repeat this process

I've had success with this algorithm, but it was indeed tricky to implement and I'm still working on removing bugs.

It is important to say that I've extended the all Lexical nodes I'm using to add the index metadata that allow me to find a node based on the external text index, allowing the above algorithm to work. I have no idea if this is the best way to do it, but it works!

Said that, I don't think we did this whole process optimally. All our systems were already running in production when I started this implementation, so I need to implement Lexical over what we already had. If I had the opportunity to learn Lexical before implementing my back end I would have modified the way we keep the classification in the database. As I said we ralete the classification with the original text by index, but I think the way Lexical selection range works is much better. If I could choose the text format I would add IDs for each text 'node' and keep the annotations as { key, offset } , I think this would make working with my classifications much easier.

If you need to talk this further fell free to contact me.

[tony3918]

Wow thank you so much I deeply appreciate the time and kindness you put in sharing your detailed experience.

I've had success with this algorithm, but it was indeed tricky to implement and I'm still working on removing bugs.

i) If I correctly understood your algorithm, does this mean that for example if the markup text is <p>Hello</p><p>World</p> and the classification goes from text index(assume zero-based) 3~6, your algorithm inserts nodes like <p>Hel<span>lo</span><p><p><span>Wo</span>rld</p>?

If I could choose the text format I would add IDs for each text 'node' and keep the annotations as { key, offset } , I think this would make working with my classifications much easier.

ii) Would this mean that in the example above the markup text was <p id="a">Hello</p><p id="b">World</p>, you would save the annotations from text index 3~6 as an array of starting and ending points [{key: 'a', offset: 3}, {key: 'b', offset: 1}]?

Although I'm not confident whether I can build your algorithm without any bugs, I better try and understand how Lexical works as deep as possible before diving in with an implementation. Thanks a lot once again 👍

[tony3918]

I guess discussions here are quite relevant as well! #1839

[pedrocalderon]

i) If I correctly understood your algorithm, does this mean that for example if the markup text is <p>Hello</p><p>World</p> and the classification goes from text index(assume zero-based) 3~6, your algorithm inserts nodes like <p>Hel<span>lo</span><p><p><span>Wo</span>rld</p>?

Yes, something like that, I do create an ID to identify that multiple nodes belong to the same classification, in your exemple I would end up with the following nodes:

<ParagraphNode>
    <TextNode>Hel</TextNode>
    <ClassificationNode id="foo">lo</ClassificationNode>
<ParagraphNode>
</ParagraphNode>
    <ClassificationNode id="foo">Wo</ClassificationNode>
    <TextNode>rld</TextNode>
</ParagraphNode>

Adding the ID's I can handle the nodes that belong to a same classification with easy.

ii) Would this mean that in the example above the markup text was <p id="a">Hello</p><p id="b">World</p>, you would save the annotations from text index 3~6 as an array of starting and ending points [{key: 'a', offset: 3}, {key: 'b', offset: 1}]?

Yes. But the exact data structure will depend on you specific use case. For my use case I would create an array with a start and end for each node. In the exemple above I would have obtained: [{ start: { key: 'a' , offset: 3 }, end: { key: 'a', offset: 4} }, { start: { key: 'b' , offset: 36}, end: { key: 'b', offset: 6} }], but I would use this because I want to allow fractured classifications.

Although I'm not confident whether I can build your algorithm without any bugs

That is the trick part for sure!!!!!

[tony3918]

That is the trick part for sure!!!!!

I'll try my best thanks again 😂😂😂