我只是需要你的帮助和见解关于我继承的一个项目。有这个功能,用户可以突出显示一个文本,并从该文本,打开一个评论框。这工作得很好。但我遇到的问题是,当你突出显示文本从右到左,它插入实际的文本在开始和结束突出显示的文本。
给予个例子,这就是发生的事情。
“这是范例文字醒目提示”
当我从右到左突出显示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 `<` 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);```
1条答案
按热度按时间cqoc49vn1#
这个问题已经解决了。我们对
startIndex
和endIndex
进行了交换,这样如果startIndex大于endIndex,它仍然可以正常工作。