UFM: Add camelCase aliases for UFM filters to support UFMJS expressions (closes #20500) (#20501)

* Initial plan

* Add camelCase aliases for UFM filters with hyphens (stripHtml, titleCase, wordLimit)

Co-authored-by: iOvergaard <752371+iOvergaard@users.noreply.github.com>

* Add manifest tests for camelCase filter aliases

Co-authored-by: iOvergaard <752371+iOvergaard@users.noreply.github.com>

* discards tests that are not useful

* test: updates imports for stripHtml api

* Exports `UmbUfmStripHtmlFilterApi` class

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: iOvergaard <752371+iOvergaard@users.noreply.github.com>
Co-authored-by: leekelleher <leekelleher@gmail.com>

src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts

@@ -29,6 +29,14 @@ export const manifests: Array<ManifestUfmFilter> = [
 		api: () => import('./strip-html.filter.js'),
 		meta: { alias: 'strip-html' },
 	},
+	// TODO: Remove in V18 - replaced by camelCase alias below for UFMJS compatibility
+	{
+		type: 'ufmFilter',
+		alias: 'Umb.Filter.StripHtmlCamelCase',
+		name: 'Strip HTML UFM Filter (camelCase)',
+		api: () => import('./strip-html.filter.js'),
+		meta: { alias: 'stripHtml' },
+	},
 	{
 		type: 'ufmFilter',
 		alias: 'Umb.Filter.TitleCase',
@@ -36,6 +44,14 @@ export const manifests: Array<ManifestUfmFilter> = [
 		api: () => import('./title-case.filter.js'),
 		meta: { alias: 'title-case' },
 	},
+	// TODO: Remove in V18 - replaced by camelCase alias below for UFMJS compatibility
+	{
+		type: 'ufmFilter',
+		alias: 'Umb.Filter.TitleCaseCamelCase',
+		name: 'Title Case UFM Filter (camelCase)',
+		api: () => import('./title-case.filter.js'),
+		meta: { alias: 'titleCase' },
+	},
 	{
 		type: 'ufmFilter',
 		alias: 'Umb.Filter.Truncate',
@@ -57,4 +73,12 @@ export const manifests: Array<ManifestUfmFilter> = [
 		api: () => import('./word-limit.filter.js'),
 		meta: { alias: 'word-limit' },
 	},
+	// TODO: Remove in V18 - replaced by camelCase alias below for UFMJS compatibility
+	{
+		type: 'ufmFilter',
+		alias: 'Umb.Filter.WordLimitCamelCase',
+		name: 'Word Limit UFM Filter (camelCase)',
+		api: () => import('./word-limit.filter.js'),
+		meta: { alias: 'wordLimit' },
+	},
 ];

src/Umbraco.Web.UI.Client/src/packages/ufm/filters/strip-html.filter.test.ts

@@ -0,0 +1,47 @@
+import { expect } from '@open-wc/testing';
+import { UmbUfmStripHtmlFilterApi } from './strip-html.filter.js';
+
+describe('UmbUfmStripHtmlFilter', () => {
+	let filter: UmbUfmStripHtmlFilterApi;
+
+	beforeEach(() => {
+		filter = new UmbUfmStripHtmlFilterApi();
+	});
+
+	describe('filter', () => {
+		it('should strip HTML tags from string', () => {
+			const result = filter.filter('<p>Hello <strong>World</strong></p>');
+			expect(result).to.equal('Hello World');
+		});
+
+		it('should handle empty string', () => {
+			const result = filter.filter('');
+			expect(result).to.equal('');
+		});
+
+		it('should handle null input', () => {
+			const result = filter.filter(null);
+			expect(result).to.equal('');
+		});
+
+		it('should handle undefined input', () => {
+			const result = filter.filter(undefined);
+			expect(result).to.equal('');
+		});
+
+		it('should handle markup object', () => {
+			const result = filter.filter({ markup: '<p>Test</p>' });
+			expect(result).to.equal('Test');
+		});
+
+		it('should strip complex HTML', () => {
+			const result = filter.filter('<div><h1>Title</h1><p>Paragraph with <a href="#">link</a></p></div>');
+			expect(result).to.equal('TitleParagraph with link');
+		});
+
+		it('should handle plain text without HTML', () => {
+			const result = filter.filter('Plain text');
+			expect(result).to.equal('Plain text');
+		});
+	});
+});

src/Umbraco.Web.UI.Client/src/packages/ufm/filters/strip-html.filter.ts

@@ -13,3 +13,4 @@ class UmbUfmStripHtmlFilterApi extends UmbUfmFilterBase {
 }
 
 export { UmbUfmStripHtmlFilterApi as api };
+export { UmbUfmStripHtmlFilterApi };