UFM: Adds markedExtension extension-type (#19684)

leekelleher · web-flow · commit 1f84fe4701c6 · 2025-07-08T10:10:22.000+02:00
* Adds `markedExtension` extension-type

* Relocates the Component and Filter extension-type interface code files

to under "extensions"

* Moves `UfmPlugin` type to its own referencable file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/content-name/content-name.component.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/content-name/content-name.component.ts
@@ -1,4 +1,4 @@
-import type { UfmToken } from '../../plugins/marked-ufm.plugin.js';
+import type { UfmToken } from '../../plugins/types.js';
 import { UmbUfmComponentBase } from '../ufm-component-base.js';
 
 import './content-name.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/label-value/label-value.component.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/label-value/label-value.component.ts
@@ -1,4 +1,4 @@
-import type { UfmToken } from '../../plugins/marked-ufm.plugin.js';
+import type { UfmToken } from '../../plugins/types.js';
 import { UmbUfmComponentBase } from '../ufm-component-base.js';
 
 import './label-value.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/link/link.component.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/link/link.component.ts
@@ -1,4 +1,4 @@
-import type { UfmToken } from '../../plugins/marked-ufm.plugin.js';
+import type { UfmToken } from '../../plugins/types.js';
 import { UmbUfmComponentBase } from '../ufm-component-base.js';
 
 import './link.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/localize/localize.component.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/localize/localize.component.ts
@@ -1,4 +1,4 @@
-import type { UfmToken } from '../../plugins/marked-ufm.plugin.js';
+import type { UfmToken } from '../../plugins/types.js';
 import { UmbUfmComponentBase } from '../ufm-component-base.js';
 
 import './localize.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/manifests.ts
@@ -1,4 +1,4 @@
-import type { ManifestUfmComponent } from '../ufm-component.extension.js';
+import type { ManifestUfmComponent } from '../extensions/ufm-component.extension.js';
 
 export const manifests: Array<ManifestUfmComponent> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-component-base.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-component-base.ts
@@ -1,5 +1,5 @@
-import type { UfmToken } from '../plugins/marked-ufm.plugin.js';
-import type { UmbUfmComponentApi } from '../ufm-component.extension.js';
+import type { UfmToken } from '../plugins/types.js';
+import type { UmbUfmComponentApi } from '../extensions/ufm-component.extension.js';
 
 export abstract class UmbUfmComponentBase implements UmbUfmComponentApi {
 	protected getAttributes(text: string): string | null {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/contexts/ufm.context.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/contexts/ufm.context.ts
@@ -1,19 +1,17 @@
-import { ufm } from '../plugins/marked-ufm.plugin.js';
-import type { UfmPlugin } from '../plugins/marked-ufm.plugin.js';
-import type { ManifestUfmComponent } from '../ufm-component.extension.js';
-import type { ManifestUfmFilter } from '../ufm-filter.extension.js';
-import { DOMPurify, type Config } from '@umbraco-cms/backoffice/external/dompurify';
+import type { ManifestUfmFilter } from '../extensions/ufm-filter.extension.js';
+import { DOMPurify } from '@umbraco-cms/backoffice/external/dompurify';
 import { Marked } from '@umbraco-cms/backoffice/external/marked';
 import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import type { Config as DOMPurifyConfig } from '@umbraco-cms/backoffice/external/dompurify';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 
 const UmbDomPurify = DOMPurify(window);
-const UmbDomPurifyConfig: Config = {
+const UmbDomPurifyConfig: DOMPurifyConfig = {
 	USE_PROFILES: { html: true },
 	CUSTOM_ELEMENT_HANDLING: {
 		tagNameCheck: /^(?:ufm|umb|uui)-.*$/,
@@ -52,23 +50,7 @@ export class UmbUfmContext extends UmbContextBase {
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_UFM_CONTEXT);
 
-		new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'ufmComponent', [], undefined, (controllers) => {
-			UmbMarked.use(
-				ufm(
-					controllers
-						.map((controller) => {
-							const ctrl = controller as unknown as UmbExtensionApiInitializer<ManifestUfmComponent>;
-							if (!ctrl.manifest || !ctrl.api) return;
-							return {
-								alias: ctrl.manifest.meta.alias || ctrl.manifest.alias,
-								marker: ctrl.manifest.meta.marker,
-								render: ctrl.api.render,
-							};
-						})
-						.filter((x) => x) as Array<UfmPlugin>,
-				),
-			);
-		});
+		new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'markedExtension', [UmbMarked]);
 
 		new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'ufmFilter', [], undefined, (controllers) => {
 			const filters = controllers
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/manifests.ts
@@ -0,0 +1,13 @@
+import type { ManifestMarkedExtension } from './marked-extension.extension.js';
+
+export const manifests: Array<ManifestMarkedExtension> = [
+	{
+		type: 'markedExtension',
+		alias: 'Umb.MarkedExtension.Ufm',
+		name: 'UFM Marked Extension',
+		api: () => import('./ufm-marked-extension.api.js'),
+		meta: {
+			alias: 'ufm',
+		},
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/marked-extension.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/marked-extension.extension.ts
@@ -0,0 +1,25 @@
+import type { ManifestApi, UmbApi } from '@umbraco-cms/backoffice/extension-api';
+
+/** @internal */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbMarkedExtensionApi extends UmbApi {}
+
+/** @internal */
+export interface MetaMarkedExtension {
+	alias: string;
+}
+
+/**
+ * @internal
+ * @description The `markedExtension` extension-type is currently for internal use and should be considered experimental.
+ */
+export interface ManifestMarkedExtension extends ManifestApi<UmbMarkedExtensionApi> {
+	type: 'markedExtension';
+	meta: MetaMarkedExtension;
+}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbMarkedExtension: ManifestMarkedExtension;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/types.ts
@@ -0,0 +1,5 @@
+export type * from './marked-extension.extension.js';
+export type * from './ufm-filter.extension.js';
+export type * from './ufm-component.extension.js';
+
+export type { UmbUfmMarkedExtensionApi } from './ufm-marked-extension.api.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/ufm-component.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/ufm-component.extension.ts
@@ -1,4 +1,4 @@
-import type { UfmToken } from './plugins/index.js';
+import type { UfmToken } from '../plugins/types.js';
 import type { ManifestApi, UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
 export interface UmbUfmComponentApi extends UmbApi {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/ufm-filter.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/ufm-filter.extension.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/ufm-marked-extension.api.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/ufm-marked-extension.api.ts
@@ -0,0 +1,35 @@
+import { ufm } from '../plugins/marked-ufm.plugin.js';
+import type { UfmPlugin } from '../plugins/types.js';
+import type { ManifestUfmComponent } from './ufm-component.extension.js';
+import type { UmbMarkedExtensionApi } from './marked-extension.extension.js';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import type { Marked } from '@umbraco-cms/backoffice/external/marked';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+
+export class UmbUfmMarkedExtensionApi implements UmbMarkedExtensionApi {
+	constructor(host: UmbControllerHost, marked: Marked) {
+		new UmbExtensionsApiInitializer(host, umbExtensionsRegistry, 'ufmComponent', [], undefined, (controllers) => {
+			marked.use(
+				ufm(
+					controllers
+						.map((controller) => {
+							const ctrl = controller as unknown as UmbExtensionApiInitializer<ManifestUfmComponent>;
+							if (!ctrl.manifest || !ctrl.api) return;
+							return {
+								alias: ctrl.manifest.meta.alias || ctrl.manifest.alias,
+								marker: ctrl.manifest.meta.marker,
+								render: ctrl.api.render,
+							};
+						})
+						.filter((x) => x) as Array<UfmPlugin>,
+				),
+			);
+		});
+	}
+
+	destroy() {}
+}
+
+export default UmbUfmMarkedExtensionApi;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/base.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/base.filter.ts
@@ -1,4 +1,4 @@
-import type { UmbUfmFilterApi } from '../ufm-filter.extension.js';
+import type { UmbUfmFilterApi } from '../extensions/ufm-filter.extension.js';
 
 export abstract class UmbUfmFilterBase implements UmbUfmFilterApi {
 	abstract filter(...args: Array<unknown>): string | undefined | null;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts
@@ -1,4 +1,4 @@
-import type { ManifestUfmFilter } from '../ufm-filter.extension.js';
+import type { ManifestUfmFilter } from '../extensions/ufm-filter.extension.js';
 
 export const manifests: Array<ManifestUfmFilter> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/manifests.ts
@@ -1,5 +1,11 @@
 import { manifest as ufmContext } from './contexts/manifest.js';
+import { manifests as markedExtensions } from './extensions/manifests.js';
 import { manifests as ufmComponents } from './components/manifests.js';
 import { manifests as ufmFilters } from './filters/manifests.js';
 
-export const manifests: Array<UmbExtensionManifest> = [ufmContext, ...ufmComponents, ...ufmFilters];
+export const manifests: Array<UmbExtensionManifest> = [
+	ufmContext,
+	...markedExtensions,
+	...ufmComponents,
+	...ufmFilters,
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/index.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/index.ts
@@ -1,2 +1 @@
 export { ufm } from './marked-ufm.plugin.js';
-export type { UfmPlugin, UfmToken } from './marked-ufm.plugin.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.plugin.ts
@@ -1,18 +1,7 @@
-import type { MarkedExtension, Tokens } from '@umbraco-cms/backoffice/external/marked';
-
-export interface UfmPlugin {
-	alias: string;
-	marker?: string;
-	render?: (token: UfmToken) => string | undefined;
-}
-
-export interface UfmToken extends Tokens.Generic {
-	prefix: string;
-	text?: string;
-}
+import type { UfmPlugin } from './types.js';
+import type { MarkedExtension } from '@umbraco-cms/backoffice/external/marked';
 
 /**
- *
  * @param {Array<UfmPlugin>} plugins - An array of UFM plugins.
  * @returns {MarkedExtension} A Marked extension object.
  */
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/types.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/types.ts
@@ -0,0 +1,12 @@
+import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
+
+export interface UfmPlugin {
+	alias: string;
+	marker?: string;
+	render?: (token: UfmToken) => string | undefined;
+}
+
+export interface UfmToken extends Tokens.Generic {
+	prefix: string;
+	text?: string;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/types.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/types.ts
@@ -1,2 +1,2 @@
-export type * from './ufm-filter.extension.js';
-export type * from './ufm-component.extension.js';
+export type * from './extensions/types.js';
+export type * from './plugins/types.js';

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { UfmToken } from '../../plugins/marked-ufm.plugin.js';`
	`1`	`+import type { UfmToken } from '../../plugins/types.js';`
`2`	`2`	`import { UmbUfmComponentBase } from '../ufm-component-base.js';`
`3`	`3`
`4`	`4`	`import './content-name.element.js';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { ManifestUfmComponent } from '../ufm-component.extension.js';`
	`1`	`+import type { ManifestUfmComponent } from '../extensions/ufm-component.extension.js';`
`2`	`2`
`3`	`3`	`export const manifests: Array<ManifestUfmComponent> = [`
`4`	`4`	`{`