dimanche 16 mai 2021

Highlighting text inserts duplicates in start and end of the text

I just need your help and insights with regards to a project I have inherited. There is this feature that a user can highlight a text and, from that text, open a comment box. this works well. But the issue I have encountered is that when you highlight the text from right to left, it inserts the actual text at the start and the end of the highlighted text.

To give an example, this is what happens.

"This is a sample text highlight"

When I highlight the sample text highlight from right to left, it will insert whatever is highlighted at the start and at the end of the text and it will appear as below"

"This is a sample text highlighsample text highlightsample text highlight"

Im very new to development and coding that I am trying to reverse engineer this and try to understand what the syntax means but as of the moment, getting stuck.

When highlighting the from left to right, this works great and no issues can be found.

This is the note of the function

  Basically, the member comments need to be highlighted from `startCharacter`
    to `endCharacter`. To achieve this we will insert some <span> tags around
    these regions and then render the HTML by marking it as "Safe" with `htmlSafe()`
  HOWEVER. This creates a problem: If the user includes HTML in their plan text,
    it will be rendered/executed.
  NOT WHAT YOU WANT (for Security reasons).
  SO. We need to first escape the user's plan text using `htmlEscape()`. 
  HOWEVER. This creates a SECONDARY problem, because now the indices stored
    in `startCharacter` and `endCharacter` are now incorrect, as we have changed
    the length of the string by changing `<` to `&lt;` etc. 
  SO HERE'S THE FINAL SOLUTION. 
      - FIRST we insert some very-unique strings at the `startCharacter` and
        `endCharacter` positions that are completely html-safe.
      - THEN we `htmlEscape()` the text. ```
      - THEN we find-replace the very-unique strings we inserted with the actual
        HTML we want.
      - THEN finally we mark the string as `htmlSafe()` so that our markup is rendered.




Aucun commentaire:

Enregistrer un commentaire