fix: react syntax problems

src/app/shared/services/formatter.service.spec.ts

@@ -178,8 +178,6 @@ describe('Service: Formatter', () => {
 				expect(service.toggleDarkModeVariants(str, ThemeVariant.both)).toBe(result);
 			}
 		));
-
-		// class="text-gray-100 dark:text-gray-800 text-gray-800 dark:text-gray-100 hover:text-indigo-400 hover:dark:text-indigo-600 hover:text-indigo-600 hover:dark:text-indigo-400"
 	});
 
 	describe('removeAngularComments()', () => {
@@ -235,6 +233,16 @@ describe('Service: Formatter', () => {
 				expect(service.removeAngularClasses(str)).toBe(result);
 			}
 		));
+
+		it('should not change ring-something classes', inject(
+			[FormatterService],
+			(service: FormatterService) => {
+				const str = '<span class="ring-gray-500 focus:ring focus:ring-opacity-75"></span>';
+				const result =
+					'<span class="ring-gray-500 focus:ring focus:ring-opacity-75"></span>';
+				expect(service.removeAngularCode(str)).toBe(result);
+			}
+		));
 	});
 
 	describe('useReactSyntax()', () => {
@@ -247,6 +255,24 @@ describe('Service: Formatter', () => {
 			}
 		));
 
+		it('should change "novalidate" to "noValidate"', inject(
+			[FormatterService],
+			(service: FormatterService) => {
+				const str = '<form novalidate="" action=""></form>';
+				const result = '<form noValidate="" action=""></form>';
+				expect(service.useReactSyntax(str)).toBe(result);
+			}
+		));
+
+		it('should change "for" to "htmlFor"', inject(
+			[FormatterService],
+			(service: FormatterService) => {
+				const str = '<label for="email">Email</label>';
+				const result = '<label htmlFor="email">Email</label>';
+				expect(service.useReactSyntax(str)).toBe(result);
+			}
+		));
+
 		it('should add a closing slash to <img> and a space before the closing tag', inject(
 			[FormatterService],
 			(service: FormatterService) => {

src/app/shared/services/formatter.service.ts

@@ -152,6 +152,8 @@ export class FormatterService {
 				const parts = prop.split('-');
 				return parts[0] + parts[1].charAt(0).toUpperCase() + parts[1].slice(1);
 			})
+			.replace(/novalidate=/gm, 'noValidate=')
+			.replace(/for=/gm, 'htmlFor=')
 			.replace(/<img ([^<]*[^/\s])[\s]?>/g, '<img $1 />')
 			.replace(/<input ([^<]*[^/\s])[\s]?>/g, '<input $1 />')
 			.replace(/<area([^<]*[^/\s])[\s]?>/g, '<area $1 />')