Merge branch 'main' into v14/chore/check-paths-in-dist-cms

Author: iOvergaard

.github/README.md

@@ -2,7 +2,9 @@
 
 This is the working repository of the upcoming new Backoffice to Umbraco CMS.
 
+[![Build and test](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/build_test.yml/badge.svg)](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/build_test.yml)
 [![Storybook](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/azure-static-web-apps-ambitious-stone-0033b3603.yml/badge.svg)](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/azure-static-web-apps-ambitious-stone-0033b3603.yml)
+[![SonarCloud](https://sonarcloud.io/api/project_badges/measure?project=umbraco_Umbraco.CMS.Backoffice&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=umbraco_Umbraco.CMS.Backoffice)
 
 ## Installation instructions
 

sonar-project.properties

@@ -0,0 +1,9 @@
+# Define the same root directory for sources and tests
+sonar.sources = src/
+sonar.tests = src/
+
+# Include test files in the test scope
+sonar.test.inclusions = src/**/*.test.ts
+
+# Exclude test and stories files from the source scope
+sonar.exclusions = src/**/*.test.ts, src/**/*.stories.ts

src/packages/core/components/table/table.element.ts

@@ -279,7 +279,7 @@ export class UmbTableElement extends LitElement {
 			const element = document.createElement('umb-ufm-render') as UmbUfmRenderElement;
 			element.inline = true;
 			element.markdown = column.labelTemplate;
-			element.value = value;
+			element.value = { value };
 			return element;
 		}
 

src/packages/core/extension-registry/models/ufm-component.model.ts

@@ -1,8 +1,8 @@
 import type { ManifestApi, UmbApi } from '@umbraco-cms/backoffice/extension-api';
-import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
+import type { UfmToken } from '@umbraco-cms/backoffice/ufm';
 
 export interface UmbUfmComponentApi extends UmbApi {
-	render(token: Tokens.Generic): string | undefined;
+	render(token: UfmToken): string | undefined;
 }
 
 export interface MetaUfmComponent {

src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts

@@ -172,26 +172,26 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 				${repeat(
 					this._userDefinedProperties,
 					(column) => column.alias,
-					(column) => html`
-						<li>
-							<span>${column.header}:</span>
-							${when(
-								column.nameTemplate,
-								() => html`
-									<umb-ufm-render
-										inline
-										.markdown=${column.nameTemplate}
-										.value=${getPropertyValueByAlias(item, column.alias)}></umb-ufm-render>
-								`,
-								() => html`${getPropertyValueByAlias(item, column.alias)}`,
-							)}
-						</li>
-					`,
+					(column) => this.#renderProperty(item, column),
 				)}
 			</ul>
 		`;
 	}
 
+	#renderProperty(item: UmbDocumentCollectionItemModel, column: UmbCollectionColumnConfiguration) {
+		const value = getPropertyValueByAlias(item, column.alias);
+		return html`
+			<li>
+				<span>${column.header}:</span>
+				${when(
+					column.nameTemplate,
+					() => html`<umb-ufm-render inline .markdown=${column.nameTemplate} .value=${{ value }}></umb-ufm-render>`,
+					() => html`${value}`,
+				)}
+			</li>
+		`;
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`

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

@@ -28,7 +28,7 @@ UmbDomPurify.addHook('afterSanitizeAttributes', function (node) {
 	}
 });
 
-const UmbMarked = new Marked({
+export const UmbMarked = new Marked({
 	async: true,
 	gfm: true,
 	breaks: true,

src/packages/ufm/manifests.ts

@@ -4,19 +4,15 @@ export const manifests: Array<ManifestUfmComponent> = [
 	{
 		type: 'ufmComponent',
 		alias: 'Umb.Markdown.LabelValue',
-		name: 'Label Value Markdown Component',
+		name: 'Label Value UFM Component',
 		api: () => import('./ufm-components/label-value.component.js'),
-		meta: {
-			marker: '=',
-		},
+		meta: { marker: '=' },
 	},
 	{
 		type: 'ufmComponent',
 		alias: 'Umb.Markdown.Localize',
-		name: 'Localize Markdown Component',
+		name: 'Localize UFM Component',
 		api: () => import('./ufm-components/localize.component.js'),
-		meta: {
-			marker: '#',
-		},
+		meta: { marker: '#' },
 	},
 ];

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

@@ -3,7 +3,11 @@ import type { MarkedExtension, Tokens } from '@umbraco-cms/backoffice/external/m
 export interface UfmPlugin {
 	alias: string;
 	marker: string;
-	render?: (token: Tokens.Generic) => string | undefined;
+	render?: (token: UfmToken) => string | undefined;
+}
+
+export interface UfmToken extends Tokens.Generic {
+	text?: string;
 }
 
 export function ufm(plugins: Array<UfmPlugin> = []): MarkedExtension {
@@ -12,13 +16,9 @@ export function ufm(plugins: Array<UfmPlugin> = []): MarkedExtension {
 			return {
 				name: alias,
 				level: 'inline',
-				start: (src: string) => {
-					const regex = new RegExp(`\\{${marker}`);
-					const match = src.match(regex);
-					return match ? match.index : -1;
-				},
-				tokenizer(src: string): Tokens.Generic | undefined {
-					const pattern = `^(?<!\\\\){{?${marker}((?:[a-zA-Z][\\w-]*|[\\{].*?[\\}]+|[\\[].*?[\\]])+)(?<!\\\\)}}?`;
+				start: (src: string) => src.indexOf(`{${marker}`),
+				tokenizer: (src: string) => {
+					const pattern = `^\\{${marker}([^}]*)\\}`;
 					const regex = new RegExp(pattern);
 					const match = src.match(regex);
 

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

@@ -0,0 +1,32 @@
+import { expect } from '@open-wc/testing';
+import { ufm } from './marked-ufm.plugin.js';
+import { UmbMarked } from '../index.js';
+import { UmbUfmLabelValueComponent } from '../ufm-components/label-value.component.js';
+import { UmbUfmLocalizeComponent } from '../ufm-components/localize.component.js';
+
+describe('UmbMarkedUfm', () => {
+	describe('UFM parsing', () => {
+		const runs = [
+			{ ufm: '{=prop1}', expected: '<ufm-label-value alias="prop1"></ufm-label-value>' },
+			{ ufm: '{= prop1}', expected: '<ufm-label-value alias="prop1"></ufm-label-value>' },
+			{ ufm: '{= prop1 }', expected: '<ufm-label-value alias="prop1"></ufm-label-value>' },
+			{ ufm: '{{=prop1}}', expected: '{<ufm-label-value alias="prop1"></ufm-label-value>}' },
+			{ ufm: '{#general_add}', expected: '<umb-localize key="general_add"></umb-localize>' },
+		];
+
+		// Manually configuring the UFM components for testing.
+		UmbMarked.use(
+			ufm([
+				{ alias: 'Umb.Markdown.LabelValue', marker: '=', render: new UmbUfmLabelValueComponent().render },
+				{ alias: 'Umb.Markdown.Localize', marker: '#', render: new UmbUfmLocalizeComponent().render },
+			]),
+		);
+
+		runs.forEach((run) => {
+			it(`Parsing "${run.ufm}"`, async () => {
+				const markup = await UmbMarked.parseInline(run.ufm);
+				expect(markup).to.equal(run.expected);
+			});
+		});
+	});
+});

src/packages/ufm/ufm-components/label-value.component.ts

@@ -1,10 +1,11 @@
+import type { UfmToken } from '../plugins/marked-ufm.plugin.js';
 import { UmbUfmComponentBase } from './ufm-component-base.js';
-import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
 
 import './label-value.element.js';
 
 export class UmbUfmLabelValueComponent extends UmbUfmComponentBase {
-	render(token: Tokens.Generic) {
+	render(token: UfmToken) {
+		if (!token.text) return;
 		return `<ufm-label-value alias="${token.text}"></ufm-label-value>`;
 	}
 }