mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-27 10:32:58 +02:00
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import { htmlentities } from '@joplin/utils/html';
|
|
const Mark = require('mark.js/dist/mark.min.js');
|
|
const markJsUtils = require('@joplin/lib/markJsUtils');
|
|
const { replaceRegexDiacritics, pregQuote } = require('@joplin/lib/string-utils');
|
|
|
|
const getNoteTitleHtml = (highlightedWords: string[], displayTitle: string) => {
|
|
if (highlightedWords.length) {
|
|
const titleElement = document.createElement('span');
|
|
titleElement.textContent = displayTitle;
|
|
const mark = new Mark(titleElement, {
|
|
exclude: ['img'],
|
|
acrossElements: true,
|
|
});
|
|
|
|
mark.unmark();
|
|
|
|
try {
|
|
for (const wordToBeHighlighted of highlightedWords) {
|
|
markJsUtils.markKeyword(mark, wordToBeHighlighted, {
|
|
pregQuote: pregQuote,
|
|
replaceRegexDiacritics: replaceRegexDiacritics,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
if (error.name !== 'SyntaxError') {
|
|
throw error;
|
|
}
|
|
// An error of 'Regular expression too large' might occour in the markJs library
|
|
// when the input is really big, this catch is here to avoid the application crashing
|
|
// https://github.com/laurent22/joplin/issues/7634
|
|
// console.error('Error while trying to highlight words from search: ', error);
|
|
}
|
|
|
|
// Note: in this case it is safe to use dangerouslySetInnerHTML because titleElement
|
|
// is a span tag that we created and that contains data that's been inserted as plain text
|
|
// with `textContent` so it cannot contain any XSS attacks. We use this feature because
|
|
// mark.js can only deal with DOM elements.
|
|
// https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
|
|
return titleElement.outerHTML;
|
|
} else {
|
|
return htmlentities(displayTitle);
|
|
}
|
|
};
|
|
|
|
export default getNoteTitleHtml;
|