extension slot component

src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts

@@ -0,0 +1,80 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { map } from 'rxjs';
+import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
+import { UmbObserverMixin } from '@umbraco-cms/observable-api';
+import { createExtensionElement } from '@umbraco-cms/extensions-api';
+
+/**
+ * @element umb-extension-slot
+ * @description
+ * @slot default - slot for inserting additional things into this slot.
+ * @export
+ * @class UmbExtensionSlot
+ * @extends {UmbObserverMixin(LitElement)}
+ */
+@customElement('umb-extension-slot')
+export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) {
+
+
+    private _extensions = new Map<ManifestTypes, HTMLElement>()
+
+    @property({ type: String })
+    public type= "";
+
+	@property({ type: Object, attribute: false })
+    public filter: (manifest:ManifestTypes) => boolean = () => true;
+
+    constructor() {
+        super();
+
+
+		/*
+		this.extensionManager = new ExtensionManager(this, (x) => {x.meta.entityType === this.entityType}, (extensionManifests) => {
+			this._createElement(extensionManifests[0]);
+		});
+		*/
+	}
+
+    connectedCallback(): void {
+        super.connectedCallback();
+		this._observeExtensions();
+    }
+
+    private _observeExtensions() {
+
+        console.log("_observeExtensions", this.type, this.filter)
+		this.observe(
+			umbExtensionsRegistry
+				?.extensionsOfType(this.type)
+				.pipe(map((extensions) => extensions.filter(this.filter))),
+			async (extensions: ManifestTypes[]) => {
+
+                extensions.forEach(async (extension: ManifestTypes) => {
+                    const component = await createExtensionElement(extension);
+                    if(component) {
+                        this._extensions.set(extension, component);
+                    } else {
+                        this._extensions.delete(extension);
+                    }
+                });
+
+			}
+		);
+	}
+
+    render() {
+
+        const elements = [];
+        for (const value of this._extensions.values()) {
+            elements.push(value);
+        }
+        return html`${elements}`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-extension-slot': UmbExtensionSlotElement;
+    }
+}

src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts

@@ -8,9 +8,10 @@ import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { createExtensionElement } from '@umbraco-cms/extensions-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
-import type { ManifestEditorAction, ManifestEditorView } from '@umbraco-cms/models';
+import type { ManifestEditorView } from '@umbraco-cms/models';
 
 import '../../../components/body-layout/body-layout.element';
+import '../../../components/extension-slot/extension-slot.element';
 import '../editor-action-extension/editor-action-extension.element';
 
 /**
@@ -94,9 +95,6 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
 	@state()
 	private _editorViews: Array<ManifestEditorView> = [];
 
-	@state()
-	private _editorActions: Array<ManifestEditorAction> = [];
-
 	@state()
 	private _currentView = '';
 
@@ -109,7 +107,6 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
 		super.connectedCallback();
 
 		this._observeEditorViews();
-		this._observeEditorActions();
 
 		/* TODO: find a way to construct absolute urls */
 		this._routerFolder = window.location.pathname.split('/view')[0];
@@ -127,17 +124,6 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
 		);
 	}
 
-	private _observeEditorActions() {
-		this.observe(
-			umbExtensionsRegistry
-				?.extensionsOfType('editorAction')
-				.pipe(map((extensions) => extensions.filter((extension) => extension.meta.editors.includes(this.alias)))),
-			(editorActions) => {
-				this._editorActions = editorActions;
-			}
-		);
-	}
-
 	private async _createRoutes() {
 		if (this._editorViews.length > 0) {
 			this._routes = [];
@@ -212,9 +198,7 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
 				<div id="footer" slot="footer">
 					<slot name="footer"></slot>
 					<div id="actions">
-						${this._editorActions.map(
-							(action) => html`<umb-editor-action-extension .editorAction=${action}></umb-editor-action-extension>`
-						)}
+						<umb-extension-slot type="editorAction" .filter=${(extension: any) => extension.meta.editors.includes(this.alias)}></umb-extension-slot>
 						<slot name="actions"></slot>
 					</div>
 				</div>