ember.js 突出显示文本会在文本的开头和结尾插入重复项

h43kikqp  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(104)

我只是需要你的帮助和见解关于我继承的一个项目。有这个功能,用户可以突出显示一个文本,并从该文本,打开一个评论框。这工作得很好。但我遇到的问题是,当你突出显示文本从右到左,它插入实际的文本在开始和结束突出显示的文本。
给予个例子,这就是发生的事情。
“这是范例文字醒目提示”
当我从右到左突出显示sample text highlight时,它将插入文本开头和结尾突出显示的内容,并显示如下”
“这是示例文本突出显示sample text highlight示例文本突出显示”
我对开发和编码非常陌生,我正试图反向工程,并试图理解语法的含义,但目前为止,卡住了。
从左到右突出显示时,效果很好,没有发现任何问题。
这是函数的注解

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.

Update:
Here's some snippet of where I think the logic is:

```                function calculatePlanMarkup(planText, memberComments, currentCommentBeingEditedIndex) {
                  // "Very-unique" HTML-safe string for the start of the highlight
                  const START_MARKER_TEXT = (id) => `[@@__INSERT_SPAN_START(${id})]`;
                  // A regex that will match `START_MARKER_TEXT` and parse its `id` value
                  const START_MARKER_REGEX = /\[@@__INSERT_SPAN_START\((\d+)\)\]/g;
                  // The HTML to insert in place of START_MARKER
                  const START_MARKER_HTML = (index) => {
                    let commentHighlightId = getCommentHighlightSpanId(index);
                    // If this highlight is for the comment currently being edited, add `is-active` to it, too
                    let isCurrentCommentBeingEdited = index === currentCommentBeingEditedIndex;
                    return `<span class="${selectionClass} ${isCurrentCommentBeingEdited ? 'is-active' : ''}" id="${commentHighlightId}">`;
                  };

                  // "Very-unique" HTML-safe string for the end of the highlight
                  const END_MARKER_TEXT = () => `[@@__INSERT_SPAN_END]`;
                  // A regex that will match `END_MARKER_TEXT`
                  const END_MARKER_REGEX = /\[@@__INSERT_SPAN_END\]/g;
                  // The HTML to insert in place of END_MARKER
                  const END_MARKER_HTML = () => `</span>`;

                  let markup = planText;
                  let totalOffset = 0;

                  _.each(memberComments, (memberComment, index) => {
                    let startMarker = START_MARKER_TEXT(index);
                    let endMarker = END_MARKER_TEXT();

                    let startOffset = totalOffset + parseInt(memberComment.startCharacter);
                    let endOffset = totalOffset + parseInt(memberComment.endCharacter);

                    markup = markup.substring(0, startOffset) + /* Text, from the start, up to the selection region beginning */
                      startMarker + /* "Very Unique" start marker */
                      markup.substring(startOffset, endOffset) +  /* Text within the selection region */
                      endMarker + /* "Very Unique" end marker */
                      markup.substring(endOffset);  /* Text, from the end of the selection region, to the end */

                    totalOffset += startMarker.length + endMarker.length;
                  });

                  markup = htmlEscape(markup);
                  markup = markup.replace(START_MARKER_REGEX, (match, index) => START_MARKER_HTML(Number(index)));
                  markup = markup.replace(END_MARKER_REGEX, END_MARKER_HTML);

                  return htmlSafe(markup);```
cqoc49vn

cqoc49vn1#

这个问题已经解决了。我们对startIndexendIndex进行了交换,这样如果startIndex大于endIndex,它仍然可以正常工作。

相关问题