Merge pull request #2045 from umbraco/v14/feature/dynamic-label-api

Feature: Umbraco Flavored Markdown

package.json

@@ -86,6 +86,7 @@
 		"./themes": "./dist-cms/packages/core/themes/index.js",
 		"./tiny-mce": "./dist-cms/packages/tiny-mce/index.js",
 		"./tree": "./dist-cms/packages/core/tree/index.js",
+		"./ufm": "./dist-cms/packages/ufm/index.js",
 		"./user-group": "./dist-cms/packages/user/user-group/index.js",
 		"./user-permission": "./dist-cms/packages/user/user-permission/index.js",
 		"./user": "./dist-cms/packages/user/user/index.js",

src/apps/backoffice/backoffice.element.ts

@@ -33,6 +33,7 @@ const CORE_PACKAGES = [
 	import('../../packages/tags/umbraco-package.js'),
 	import('../../packages/templating/umbraco-package.js'),
 	import('../../packages/tiny-mce/umbraco-package.js'),
+	import('../../packages/ufm/umbraco-package.js'),
 	import('../../packages/umbraco-news/umbraco-package.js'),
 	import('../../packages/user/umbraco-package.js'),
 	import('../../packages/webhook/umbraco-package.js'),

src/libs/context-api/consume/context-consumer.test.ts

@@ -39,7 +39,7 @@ describe('UmbContextConsumer', () => {
 
 		describe('events', () => {
 			it('dispatches context request event when constructed', async () => {
-				const listener = oneEvent(window, UMB_CONTENT_REQUEST_EVENT_TYPE, false);
+				const listener = oneEvent(window, UMB_CONTENT_REQUEST_EVENT_TYPE);
 
 				consumer.hostConnected();
 

src/libs/formatting-api/formatting.controller.ts

@@ -16,12 +16,14 @@ UmbDomPurify.addHook('afterSanitizeAttributes', function (node) {
 
 /**
  * @description - Controller for formatting text.
+ * @deprecated - Use the `<umb-ufm-render>` component instead. This method will be removed in Umbraco 15.
  */
 export class UmbFormattingController extends UmbControllerBase {
 	#localize = new UmbLocalizationController(this._host);
 
 	/**
 	 * A method to localize the string input then transform any markdown to santized HTML.
+	 * @deprecated - Use the `<umb-ufm-render>` component instead. This method will be removed in Umbraco 15.
 	 */
 	public transform(input?: string): string {
 		if (!input) return '';

src/libs/formatting-api/localizeAndTransform.function.ts

@@ -1,6 +1,9 @@
 import { UmbFormattingController } from './formatting.controller.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
+/**
+ * @deprecated - Use the `<umb-ufm-render>` component instead. This method will be removed in Umbraco 15.
+ */
 export function localizeAndTransform(host: UmbControllerHost, input: string): string {
 	return new UmbFormattingController(host).transform(input);
 }

src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts

@@ -1,8 +1,11 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.context-token.js';
+import type { UmbBlockDataType, UmbBlockViewUrlsPropType } from '@umbraco-cms/backoffice/block';
+
+import '@umbraco-cms/backoffice/ufm';
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
-import type { UmbBlockViewUrlsPropType } from '@umbraco-cms/backoffice/block';
 
 /**
  * @element umb-block-grid-block
@@ -16,8 +19,26 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	urls?: UmbBlockViewUrlsPropType;
 
+	@state()
+	_content?: UmbBlockDataType;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_BLOCK_GRID_ENTRY_CONTEXT, (context) => {
+			this.observe(
+				context.content,
+				(content) => {
+					this._content = content;
+				},
+				'observeContent',
+			);
+		});
+	}
+
 	override render() {
-		return html`<umb-ref-grid-block standalone .name=${this.label ?? ''} href=${this.urls?.editContent ?? ''}>
+		return html`<umb-ref-grid-block standalone href=${this.urls?.editContent ?? ''}>
+			<umb-ufm-render inline .markdown=${this.label} .value=${this._content}></umb-ufm-render>
 			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 		</umb-ref-grid-block>`;
 	}

src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts

@@ -1,6 +1,9 @@
-import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
 import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
+
+import '@umbraco-cms/backoffice/ufm';
 
 /**
  * @element umb-ref-list-block
@@ -11,6 +14,9 @@ export class UmbRefListBlockElement extends UmbLitElement {
 	@property({ type: String })
 	label?: string;
 
+	@state()
+	_content?: UmbBlockDataType;
+
 	@state()
 	_workspaceEditPath?: string;
 
@@ -19,6 +25,14 @@ export class UmbRefListBlockElement extends UmbLitElement {
 
 		// UMB_BLOCK_LIST_ENTRY_CONTEXT
 		this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
+			this.observe(
+				context.content,
+				(content) => {
+					this._content = content;
+				},
+				'observeContent',
+			);
+
 			this.observe(
 				context.workspaceEditContentPath,
 				(workspaceEditPath) => {
@@ -30,10 +44,11 @@ export class UmbRefListBlockElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<uui-ref-node
-			standalone
-			.name=${this.label ?? ''}
-			href=${this._workspaceEditPath ?? '#'}></uui-ref-node>`;
+		return html`
+			<uui-ref-node standalone href=${this._workspaceEditPath ?? '#'}>
+				<umb-ufm-render inline .markdown=${this.label} .value=${this._content}></umb-ufm-render>
+			</uui-ref-node>
+		`;
 	}
 
 	static override styles = [

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

@@ -1,14 +1,15 @@
+import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	css,
+	customElement,
 	html,
-	LitElement,
 	ifDefined,
-	when,
-	customElement,
 	property,
-	state,
 	repeat,
+	state,
+	when,
+	LitElement,
 } from '@umbraco-cms/backoffice/external/lit';
 
 // TODO: move to UI Library - entity actions should NOT be moved to UI Library but stay in an UmbTable element
@@ -31,6 +32,7 @@ export interface UmbTableColumn {
 	width?: string;
 	allowSorting?: boolean;
 	align?: 'left' | 'center' | 'right';
+	labelTemplate?: string;
 }
 
 export interface UmbTableColumnLayoutElement extends HTMLElement {
@@ -263,6 +265,15 @@ export class UmbTableElement extends LitElement {
 			return element;
 		}
 
+		if (column.labelTemplate) {
+			import('@umbraco-cms/backoffice/ufm');
+			const element = document.createElement('umb-ufm-render') as UmbUfmRenderElement;
+			element.inline = true;
+			element.markdown = column.labelTemplate;
+			element.value = value;
+			return element;
+		}
+
 		return value;
 	}
 

src/packages/core/extension-registry/models/index.ts

@@ -45,6 +45,7 @@ import type { ManifestTheme } from './theme.model.js';
 import type { ManifestTinyMcePlugin } from './tinymce-plugin.model.js';
 import type { ManifestTree } from './tree.model.js';
 import type { ManifestTreeItem } from './tree-item.model.js';
+import type { ManifestUfmComponent } from './ufm-component.model.js';
 import type { ManifestUserProfileApp } from './user-profile-app.model.js';
 import type { ManifestWorkspace, ManifestWorkspaceRoutableKind } from './workspace.model.js';
 import type { ManifestWorkspaceAction, ManifestWorkspaceActionDefaultKind } from './workspace-action.model.js';
@@ -113,6 +114,7 @@ export type * from './theme.model.js';
 export type * from './tinymce-plugin.model.js';
 export type * from './tree-item.model.js';
 export type * from './tree.model.js';
+export type * from './ufm-component.model.js';
 export type * from './user-granular-permission.model.js';
 export type * from './user-profile-app.model.js';
 export type * from './workspace-action-menu-item.model.js';
@@ -204,6 +206,7 @@ export type ManifestTypes =
 	| ManifestTree
 	| ManifestTreeItem
 	| ManifestTreeStore
+	| ManifestUfmComponent
 	| ManifestUserProfileApp
 	| ManifestWorkspaceActionMenuItem
 	| ManifestWorkspaceActions

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

@@ -0,0 +1,15 @@
+import type { ManifestApi, UmbApi } from '@umbraco-cms/backoffice/extension-api';
+import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
+
+export interface UmbUfmComponentApi extends UmbApi {
+	render(token: Tokens.Generic): string | undefined;
+}
+
+export interface MetaUfmComponent {
+	marker: string;
+}
+
+export interface ManifestUfmComponent extends ManifestApi<UmbUfmComponentApi> {
+	type: 'ufmComponent';
+	meta: MetaUfmComponent;
+}

src/packages/core/localization/localize.element.ts

@@ -22,16 +22,14 @@ export class UmbLocalizeElement extends UmbLitElement {
 	 * @example args="[1,2,3]"
 	 * @type {any[] | undefined}
 	 */
-	@property({
-		type: Array,
-	})
+	@property({ type: Array })
 	args?: unknown[];
 
 	/**
 	 * If true, the key will be rendered instead of the localized value if the key is not found.
 	 * @attr
 	 */
-	@property()
+	@property({ type: Boolean })
 	debug = false;
 
 	@state()

src/packages/core/property/property-dataset/property-dataset.element.test.ts

@@ -133,7 +133,7 @@ describe('UmbBasicVariantElement', () => {
 		});
 
 		it('fires change event', async () => {
-			const listener = oneEvent(datasetElement, UmbChangeEvent.TYPE, false);
+			const listener = oneEvent(datasetElement, UmbChangeEvent.TYPE);
 
 			expect(propertyEditor.alias).to.eq('testAlias');
 			propertyEditor.setValue('testValue3');
@@ -153,7 +153,7 @@ describe('UmbBasicVariantElement', () => {
 			adapterPropertyEditor.alias = 'testAdapterAlias';
 			datasetElement.appendChild(adapterPropertyEditor);
 
-			const listener = oneEvent(datasetElement, UmbChangeEvent.TYPE, false);
+			const listener = oneEvent(datasetElement, UmbChangeEvent.TYPE);
 
 			// The alias of the original property editor must be 'testAlias' for the adapter to set the value of it.
 			expect(propertyEditor.alias).to.eq('testAlias');

src/packages/core/property/property-layout/property-layout.element.ts

@@ -1,8 +1,9 @@
-import { localizeAndTransform } from '@umbraco-cms/backoffice/formatting-api';
-import { css, customElement, html, property, unsafeHTML, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
+import '@umbraco-cms/backoffice/ufm';
+
 /**
  *  @element umb-property-layout
  *  @description - Element for displaying a property in an workspace.
@@ -67,9 +68,7 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 					${when(this.invalid, () => html`<uui-badge color="danger" attention>!</uui-badge>`)}
 				</uui-label>
 				<slot name="action-menu"></slot>
-				<uui-scroll-container id="description">
-					${unsafeHTML(localizeAndTransform(this, this.description))}
-				</uui-scroll-container>
+				${this.#renderDescription()}
 				<slot name="description"></slot>
 			</div>
 			<div id="editorColumn">
@@ -80,6 +79,12 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 		`;
 	}
 
+	#renderDescription() {
+		if (!this.description) return;
+		const ufmValue = { alias: this.alias, label: this.label, description: this.description };
+		return html`<umb-ufm-render id="description" .markdown=${this.description} .value=${ufmValue}></umb-ufm-render>`;
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`
@@ -130,14 +135,6 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 				color: var(--uui-color-text-alt);
 			}
 
-			#description * {
-				max-width: 100%;
-			}
-
-			#description pre {
-				overflow: auto;
-			}
-
 			#editorColumn {
 				margin-top: var(--uui-size-space-3);
 			}

src/packages/core/utils/pagination-manager/pagination.manager.test.ts

@@ -141,7 +141,7 @@ describe('UmbPaginationManager', () => {
 		});
 
 		it('dispatches a change event', async () => {
-			const listener = oneEvent(manager, UmbChangeEvent.TYPE, false);
+			const listener = oneEvent(manager, UmbChangeEvent.TYPE);
 			manager.setCurrentPageNumber(2);
 			const event = (await listener) as unknown as UmbChangeEvent;
 			const target = event.target as UmbPaginationManager;

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

@@ -1,15 +1,17 @@
-import { getPropertyValueByAlias } from '../index.js';
-import { UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN } from '../../../paths.js';
-import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from '../../types.js';
-import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../document-collection.context-token.js';
 import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
-import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import type { UmbDefaultCollectionContext, UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection';
 import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui';
+import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../document-collection.context-token.js';
+import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from '../../types.js';
+import { UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN } from '../../../paths.js';
+import { getPropertyValueByAlias } from '../index.js';
+
+import '@umbraco-cms/backoffice/ufm';
 
 @customElement('umb-document-grid-collection-view')
 export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
@@ -170,7 +172,21 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 				${repeat(
 					this._userDefinedProperties,
 					(column) => column.alias,
-					(column) => html`<li><span>${column.header}:</span> ${getPropertyValueByAlias(item, column.alias)}</li>`,
+					(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>
+					`,
 				)}
 			</ul>
 		`;

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

@@ -136,6 +136,7 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 					name: item.header,
 					alias: item.alias,
 					elementName: item.elementName,
+					labelTemplate: item.nameTemplate,
 					allowSorting: true,
 				};
 			});