Commit 5848f283 authored by Jan Beckmann's avatar Jan Beckmann Committed by Phil Hughes

Escape special characters in GFM auto complete highlighting

Fixes #60552
parent 3fe07ce7
...@@ -477,6 +477,16 @@ class GfmAutoComplete { ...@@ -477,6 +477,16 @@ class GfmAutoComplete {
} }
return null; return null;
}, },
highlighter(li, query) {
// override default behaviour to escape dot character
// see https://github.com/ichord/At.js/pull/576
if (!query) {
return li;
}
const escapedQuery = query.replace(/[.+]/, '\\$&');
const regexp = new RegExp(`>\\s*([^<]*?)(${escapedQuery})([^<]*)\\s*<`, 'ig');
return li.replace(regexp, (str, $1, $2, $3) => `> ${$1}<strong>${$2}</strong>${$3} <`);
},
}; };
} }
......
---
title: Fix autocomplete dropdown for usernames starting with period
merge_request: 27533
author: Jan Beckmann
type: fixed
...@@ -209,6 +209,38 @@ describe('GfmAutoComplete', () => { ...@@ -209,6 +209,38 @@ describe('GfmAutoComplete', () => {
}); });
}); });
describe('DefaultOptions.highlighter', () => {
beforeEach(() => {
atwhoInstance = { setting: {} };
});
it('should return li if no query is given', () => {
const liTag = '<li></li>';
const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag);
expect(highlightedTag).toEqual(liTag);
});
it('should highlight search query in li element', () => {
const liTag = '<li><img src="" />string</li>';
const query = 's';
const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag, query);
expect(highlightedTag).toEqual('<li><img src="" /> <strong>s</strong>tring </li>');
});
it('should highlight search query with special char in li element', () => {
const liTag = '<li><img src="" />te.st</li>';
const query = '.';
const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag, query);
expect(highlightedTag).toEqual('<li><img src="" /> te<strong>.</strong>st </li>');
});
});
describe('isLoading', () => { describe('isLoading', () => {
it('should be true with loading data object item', () => { it('should be true with loading data object item', () => {
expect(GfmAutoComplete.isLoading({ name: 'loading' })).toBe(true); expect(GfmAutoComplete.isLoading({ name: 'loading' })).toBe(true);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment