Hotfix: UFM alias prefixes (#2510)

* Adds `alias` to UFM component registrations

* Adds support for `alias` prefix in UFM syntax

e.g. `{(alias:|marker)(text)}` would be `{umbContentName: propertyAlias}` or `{~propertyAlias}`

* UFM Content Name: adds warning for using the `~` prefix marker

The `~` prefix will be deprecated in a future major release.

src/packages/ufm/components/content-name/content-name.component.ts

@@ -7,6 +7,13 @@ export class UmbUfmContentNameComponent extends UmbUfmComponentBase {
 	render(token: UfmToken) {
 		if (!token.text) return;
 
+		if (token.prefix === '~') {
+			/*
+	    * @deprecated since version 15.0-rc3
+	    */
+			console.warn(`Please update your UFM syntax from \`${token.raw}\` to \`{umbContentName:${token.text}}\`.`);
+		}
+
 		const attributes = super.getAttributes(token.text);
 		return `<ufm-content-name ${attributes}></ufm-content-name>`;
 	}

src/packages/ufm/components/manifests.ts

@@ -6,20 +6,20 @@ export const manifests: Array<ManifestUfmComponent> = [
 		alias: 'Umb.Markdown.LabelValue',
 		name: 'Label Value UFM Component',
 		api: () => import('./label-value/label-value.component.js'),
-		meta: { marker: '=' },
+		meta: { alias: 'umbValue', marker: '=' },
 	},
 	{
 		type: 'ufmComponent',
 		alias: 'Umb.Markdown.Localize',
 		name: 'Localize UFM Component',
 		api: () => import('./localize/localize.component.js'),
-		meta: { marker: '#' },
+		meta: { alias: 'umbLocalize', marker: '#' },
 	},
 	{
 		type: 'ufmComponent',
 		alias: 'Umb.Markdown.ContentName',
 		name: 'Content Name UFM Component',
 		api: () => import('./content-name/content-name.component.js'),
-		meta: { marker: '~' },
+		meta: { alias: 'umbContentName', marker: '~' },
 	},
 ];

src/packages/ufm/contexts/ufm.context.ts

@@ -60,7 +60,7 @@ export class UmbUfmContext extends UmbContextBase<UmbUfmContext> {
 							const ctrl = controller as unknown as UmbExtensionApiInitializer<ManifestUfmComponent>;
 							if (!ctrl.manifest || !ctrl.api) return;
 							return {
-								alias: ctrl.manifest.alias,
+								alias: ctrl.manifest.meta.alias || ctrl.manifest.alias,
 								marker: ctrl.manifest.meta.marker,
 								render: ctrl.api.render,
 							};

src/packages/ufm/plugins/marked-ufm.plugin.ts

@@ -2,11 +2,12 @@ import type { MarkedExtension, Tokens } from '@umbraco-cms/backoffice/external/m
 
 export interface UfmPlugin {
 	alias: string;
-	marker: string;
+	marker?: string;
 	render?: (token: UfmToken) => string | undefined;
 }
 
 export interface UfmToken extends Tokens.Generic {
+	prefix: string;
 	text?: string;
 }
 
@@ -18,21 +19,23 @@ export interface UfmToken extends Tokens.Generic {
 export function ufm(plugins: Array<UfmPlugin> = []): MarkedExtension {
 	return {
 		extensions: plugins.map(({ alias, marker, render }) => {
+			const prefix = `(${alias}:${marker ? `|${marker}` : ''})`;
 			return {
 				name: alias,
 				level: 'inline',
-				start: (src: string) => src.indexOf(`{${marker}`),
+				start: (src: string) => src.search(`{${prefix}`),
 				tokenizer: (src: string) => {
-					const pattern = `^\\{${marker}([^}]*)\\}`;
+					const pattern = `^\\{${prefix}([^}]*)\\}`;
 					const regex = new RegExp(pattern);
 					const match = src.match(regex);
 
 					if (match) {
-						const [raw, content = ''] = match;
+						const [raw, prefix, content = ''] = match;
 						return {
 							type: alias,
 							raw: raw,
 							tokens: [],
+							prefix: prefix,
 							text: content.trim(),
 						};
 					}

src/packages/ufm/plugins/marked-ufm.test.ts

@@ -16,16 +16,22 @@ describe('UmbMarkedUfm', () => {
 				ufm: '{= prop1 | strip-html | truncate:30}',
 				expected: '<ufm-label-value filters="strip-html | truncate:30" alias="prop1"></ufm-label-value>',
 			},
+			{ ufm: '{umbValue:prop1}', expected: '<ufm-label-value alias="prop1"></ufm-label-value>' },
 			{ ufm: '{#general_add}', expected: '<ufm-localize alias="general_add"></ufm-localize>' },
+			{ ufm: '{umbLocalize:general_add}', expected: '<ufm-localize alias="general_add"></ufm-localize>' },
 			{ ufm: '{~contentPicker}', expected: '<ufm-content-name alias="contentPicker"></ufm-content-name>' },
+			{
+				ufm: '{umbContentName: contentPicker}',
+				expected: '<ufm-content-name alias="contentPicker"></ufm-content-name>',
+			},
 		];
 
 		// Manually configuring the UFM components for testing.
 		UmbMarked.use(
 			ufm([
-				{ alias: 'Umb.Markdown.ContentName', marker: '~', render: new UmbUfmContentNameComponent().render },
-				{ alias: 'Umb.Markdown.LabelValue', marker: '=', render: new UmbUfmLabelValueComponent().render },
-				{ alias: 'Umb.Markdown.Localize', marker: '#', render: new UmbUfmLocalizeComponent().render },
+				{ alias: 'umbContentName', marker: '~', render: new UmbUfmContentNameComponent().render },
+				{ alias: 'umbValue', marker: '=', render: new UmbUfmLabelValueComponent().render },
+				{ alias: 'umbLocalize', marker: '#', render: new UmbUfmLocalizeComponent().render },
 			]),
 		);
 

src/packages/ufm/ufm-component.extension.ts

@@ -6,7 +6,8 @@ export interface UmbUfmComponentApi extends UmbApi {
 }
 
 export interface MetaUfmComponent {
-	marker: string;
+	alias: string;
+	marker?: string;
 }
 
 export interface ManifestUfmComponent extends ManifestApi<UmbUfmComponentApi> {