feat(editor): Node IO filter (#7503)

Co-authored-by: Omar Ajoue <krynble@gmail.com>

packages/editor-ui/src/utils/__tests__/htmlUtils.test.ts

@@ -0,0 +1,41 @@
+import { highlightText } from '@/utils';
+
+describe('highlightText', () => {
+	it('should return original text if search parameter is an empty string', () => {
+		const text = 'some text';
+		const result = highlightText(text);
+		expect(result).toBe(text);
+	});
+
+	it('should return original text if it is an empty string', () => {
+		const text = '';
+		const result = highlightText(text, 'search');
+		expect(result).toBe(text);
+	});
+
+	it('should escape special characters in the search string', () => {
+		const text = 'some text [example]';
+		const result = highlightText(text, '[example]');
+		expect(result).toBe('some text <mark class="highlight">[example]</mark>');
+	});
+
+	it('should escape other special characters in the search string', () => {
+		const text = 'phone number: +123-456-7890';
+		const result = highlightText(text, '+123-456-7890');
+		expect(result).toBe('phone number: <mark class="highlight">+123-456-7890</mark>');
+	});
+
+	it('should highlight occurrences of the search string in text', () => {
+		const text = 'example text example';
+		const result = highlightText(text, 'example');
+		expect(result).toBe(
+			'<mark class="highlight">example</mark> text <mark class="highlight">example</mark>',
+		);
+	});
+
+	it('should return original text if the search string is not found', () => {
+		const text = 'some text';
+		const result = highlightText(text, 'notfound');
+		expect(result).toBe(text);
+	});
+});

packages/editor-ui/src/utils/htmlUtils.ts

@@ -63,3 +63,9 @@ export const getBannerRowHeight = async (): Promise<number> => {
 		}, 0);
 	});
 };
+
+export const highlightText = (text: string, search = ''): string => {
+	const pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+	const regex = new RegExp(`(${pattern})`, 'gi');
+	return search ? text?.replace(regex, '<mark class="highlight">$1</mark>') : text;
+};

packages/editor-ui/src/utils/objectUtils.ts

@@ -16,5 +16,5 @@ export const searchInObject = (obj: ObjectOrArray, searchString: string): boolea
 	(Array.isArray(obj) ? obj : Object.entries(obj)).some((entry) =>
 		isObjectOrArray(entry)
 			? searchInObject(entry, searchString)
-			: entry?.toString().includes(searchString),
+			: entry?.toString().toLowerCase().includes(searchString.toLowerCase()),
 	);