我只需要你对我继承的项目的帮助和见解。有一个功能，用户可以突出显示一个文本，然后从该文本中打开一个评论框。这很有效。但我遇到的问题是，当你从右到左突出显示文本时，它会在突出显示的文本的开头和结尾插入实际文本。
举个例子，就是这样。
"这是一个示例文本突出显示"；
当我从右到左突出显示sample text highlight时，它将插入在文本的开头和结尾突出显示的内容，并且它将显示如下"；
"这是示例文本高亮CCD_ 2示例文本高亮"；
我对开发和编码非常陌生，我正在尝试对其进行逆向工程，并试图理解语法的含义，但目前还处于困境。
从左到右突出显示时，效果很好，不会发现任何问题。
这是功能的注释
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 `<` 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);```
此问题已解决。我们对startIndex和endIndex进行了交换，这样，如果startIndex大于endIndex，它仍然可以正常工作。