Adding Umbraco Flavored Markdown to handle block grid expression in a block list/grid and extract expressions from data source

src/packages/ufm/components/block-list-content-expression/block-list-content-expression.component.ts

@@ -0,0 +1,13 @@
+import type { UfmToken } from '../../plugins/marked-ufm.plugin.js';
+import { UmbUfmComponentBase } from '../ufm-component-base.js';
+
+import './block-list-content-expression.element.js';
+
+export class UmbBlockListContentExpressionComponent extends UmbUfmComponentBase {
+	render(token: UfmToken) {
+		if (!token.text) return;
+		const attributes = super.getAttributes(token.text);
+		return `<ufm-url-picker-in-list ${attributes}></ufm-url-picker-in-list>`;
+	}
+}
+export { UmbBlockListContentExpressionComponent as api };

src/packages/ufm/components/block-list-content-expression/block-list-content-expression.element.ts

@@ -0,0 +1,37 @@
+import { UmbUfmElementBase } from '../ufm-element-base.js';
+import { customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
+
+const elementName = 'ufm-url-picker-in-list';
+@customElement(elementName)
+export class UmbBlockListContentExpressionElement extends UmbUfmElementBase {
+	@property()
+	alias?: string;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, async (context) => {
+			const content = await context.contentValues();
+			this.observe(
+				content,
+				(value) => {
+					const exprestionValue = this.getValueFromExpression(value, this.alias!);
+					if (exprestionValue === undefined) {
+						this.observe(context.contentElementTypeName, (value) => {
+							this.value = this.localize.term(value!);
+						});
+					} else {
+						this.value = exprestionValue;
+					}
+				},
+				'observeValue',
+			);
+		});
+	}
+}
+export { UmbBlockListContentExpressionElement as element };
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbBlockListContentExpressionElement;
+	}
+}

src/packages/ufm/components/manifests.ts

@@ -22,4 +22,11 @@ export const manifests: Array<ManifestUfmComponent> = [
 		api: () => import('./content-name/content-name.component.js'),
 		meta: { marker: '~' },
 	},
+	{
+		type: 'ufmComponent',
+		alias: 'Umb.Markdown.BlockListExpressionEvaluater',
+		name: 'Block List Expression Evaluater',
+		api: () => import('./block-list-content-expression/block-list-content-expression.component.js'),
+		meta: { marker: '@' },
+	},
 ];

src/packages/ufm/components/ufm-element-base.ts

@@ -6,6 +6,26 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export abstract class UmbUfmElementBase extends UmbLitElement {
 	#filterFuncArgs?: Array<{ alias: string; args: Array<string> }>;
 
+	getValueFromExpression(dataSource: any, expression: string) {
+		const keys = [];
+		const regex = /([a-zA-Z_$][\w$]*)|\[(\d+)\]/g;
+
+		let match;
+		while ((match = regex.exec(expression)) !== null) {
+			if (match[1]) {
+				keys.push(match[1]);
+			} else if (match[2]) {
+				keys.push(parseInt(match[2], 10));
+			}
+		}
+		let target = dataSource;
+		for (const key of keys) {
+			if(target[key] === undefined) return undefined;
+			target = target[key];
+		}
+		return target;
+	}
+
 	@property()
 	public set filters(value: string | undefined) {
 		this.#filters = value;