Feature: Umbraco Flavored Markdown

Author: leekelleher

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;
+}