Desktop: Fixed issue with text disappearing within plugin-created zones when searching for text

Ref: https://github.com/joplin/plugin-abc-sheet-music/issues/5

packages/app-desktop/gui/note-viewer/lib.js

@@ -56,6 +56,19 @@ if (typeof module !== 'undefined') {
 
 const markJsUtils = {};
 
+const isInsideContainer = (node, tagName) => {
+	if (!node) return false;
+
+	tagName = tagName.toLowerCase();
+
+	while (node) {
+		if (node.tagName && node.tagName.toLowerCase() === tagName) return true;
+		node = node.parentNode;
+	}
+
+	return false;
+};
+
 markJsUtils.markKeyword = (mark, keyword, stringUtils, extraOptions = null) => {
 	if (typeof keyword === 'string') {
 		keyword = {
@@ -71,12 +84,13 @@ markJsUtils.markKeyword = (mark, keyword, stringUtils, extraOptions = null) => {
 	if (isBasicSearch) accuracy = 'partially';
 	if (keyword.type === 'regex') {
 		accuracy = 'complementary';
-		// Remove the trailing wildcard and "accuracy = complementary" will take care of
+		// Remove the trailing wildcard and "accuracy = complementary" will take
-		// highlighting the relevant keywords.
+		// care of highlighting the relevant keywords.
 
-		// Known bug: it will also highlight word that contain the term as a suffix for example for "ent*", it will highlight "present"
+		// Known bug: it will also highlight word that contain the term as a
-		// which is incorrect (it should only highlight what starts with "ent") but for now will do. Mark.js doesn't have an option
+		// suffix for example for "ent*", it will highlight "present" which is
-		// to tweak this behaviour.
+		// incorrect (it should only highlight what starts with "ent") but for
+		// now will do. Mark.js doesn't have an option to tweak this behaviour.
 		value = keyword.value.substr(0, keyword.value.length - 1);
 	}
 
@@ -86,6 +100,18 @@ markJsUtils.markKeyword = (mark, keyword, stringUtils, extraOptions = null) => {
 			{},
 			{
 				accuracy: accuracy,
+				filter: (node, _term, _totalCounter, _counter) => {
+					// We exclude SVG because it creates a "<mark>" tag inside
+					// the document, which is not a valid SVG tag. As a result
+					// the content within that tag disappears.
+					//
+					// mark.js has an "exclude" parameter, but it doesn't work
+					// so we use "filter" instead.
+					//
+					// https://github.com/joplin/plugin-abc-sheet-music
+					if (isInsideContainer(node, 'SVG')) return false;
+					return true;
+				},
 			},
 			extraOptions
 		)

packages/lib/markJsUtils.js

@@ -1,5 +1,18 @@
 const markJsUtils = {};
 
+const isInsideContainer = (node, tagName) => {
+	if (!node) return false;
+
+	tagName = tagName.toLowerCase();
+
+	while (node) {
+		if (node.tagName && node.tagName.toLowerCase() === tagName) return true;
+		node = node.parentNode;
+	}
+
+	return false;
+};
+
 markJsUtils.markKeyword = (mark, keyword, stringUtils, extraOptions = null) => {
 	if (typeof keyword === 'string') {
 		keyword = {
@@ -15,12 +28,13 @@ markJsUtils.markKeyword = (mark, keyword, stringUtils, extraOptions = null) => {
 	if (isBasicSearch) accuracy = 'partially';
 	if (keyword.type === 'regex') {
 		accuracy = 'complementary';
-		// Remove the trailing wildcard and "accuracy = complementary" will take care of
+		// Remove the trailing wildcard and "accuracy = complementary" will take
-		// highlighting the relevant keywords.
+		// care of highlighting the relevant keywords.
 
-		// Known bug: it will also highlight word that contain the term as a suffix for example for "ent*", it will highlight "present"
+		// Known bug: it will also highlight word that contain the term as a
-		// which is incorrect (it should only highlight what starts with "ent") but for now will do. Mark.js doesn't have an option
+		// suffix for example for "ent*", it will highlight "present" which is
-		// to tweak this behaviour.
+		// incorrect (it should only highlight what starts with "ent") but for
+		// now will do. Mark.js doesn't have an option to tweak this behaviour.
 		value = keyword.value.substr(0, keyword.value.length - 1);
 	}
 
@@ -30,6 +44,18 @@ markJsUtils.markKeyword = (mark, keyword, stringUtils, extraOptions = null) => {
 			{},
 			{
 				accuracy: accuracy,
+				filter: (node, _term, _totalCounter, _counter) => {
+					// We exclude SVG because it creates a "<mark>" tag inside
+					// the document, which is not a valid SVG tag. As a result
+					// the content within that tag disappears.
+					//
+					// mark.js has an "exclude" parameter, but it doesn't work
+					// so we use "filter" instead.
+					//
+					// https://github.com/joplin/plugin-abc-sheet-music
+					if (isInsideContainer(node, 'SVG')) return false;
+					return true;
+				},
 			},
 			extraOptions
 		)