property editor to show of consumption of context api

src/Umbraco.Web.UI.Client/src/core/stores/data-type.store.ts

@@ -25,6 +25,12 @@ export class UmbDataTypeStore {
         name: 'External Test (DataType)',
         propertyEditorUIAlias: 'External.PropertyEditorUI.Test',
       },
+      {
+        id: 1247,
+        key: 'dt-4',
+        name: 'Context Example (DataType)',
+        propertyEditorUIAlias: 'Umb.PropertyEditorUI.ContextExample',
+      },
     ]);
   }
 

src/Umbraco.Web.UI.Client/src/extensions/property-editors/external-property-editor-test.js

@@ -4,7 +4,7 @@ export default class ExternalPropertyEditorTest extends HTMLElement {
         super();
         this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot'
         const wrapper = document.createElement('span');
-        wrapper.textContent = 'hello world';
+        wrapper.textContent = 'Example of a pure JS Property Editor';
         this.shadowRoot.append(wrapper);
     }
 }

src/Umbraco.Web.UI.Client/src/extensions/property-editors/property-editor-context-example.element.ts

@@ -0,0 +1,31 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../../core/context';
+import { UmbNotificationService } from '../../core/service/notifications.store';
+
+@customElement('umb-property-editor-context-example')
+export default class UmbPropertyEditorContextExample extends UmbContextConsumerMixin(LitElement) {
+  
+  private _notificationService?: UmbNotificationService;
+
+  constructor() {
+    super();
+    // TODO: how to deal with single consumption, or situation where you dont want to store the service..
+    this.consumeContext('umbNotificationService', (service: UmbNotificationService) => {
+      this._notificationService = service;
+    })
+  }
+  private _onClick = () => {
+    this._notificationService?.peek('Hello from property editor');
+  }
+
+  render() {
+    return html`<uui-button look='secondary' label="Click to fire notification" @click=${this._onClick}></uui-button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-property-editor-context-example': UmbPropertyEditorContextExample;
+  }
+}

src/Umbraco.Web.UI.Client/src/index.ts

@@ -128,6 +128,16 @@ const registerInternalManifests = async () => {
         group: 'common',
       },
     },
+    {
+      type: 'propertyEditorUI',
+      alias: 'Umb.PropertyEditorUI.ContextExample',
+      name: 'Context Example',
+      js: () => import('./extensions/property-editors/property-editor-context-example.element'),
+      meta: {
+        icon: 'document',
+        group: 'common',
+      },
+    },
   ];
 
   manifests.forEach((manifest: UmbExtensionManifestCore) =>

src/Umbraco.Web.UI.Client/src/mocks/data/content.data.ts

@@ -48,13 +48,6 @@ export const data: Array<DocumentNode> = [
         dataTypeKey: 'dt-2',
         tempValue: 'Tex areaaaa 1',
       },
-      {
-        alias: 'myExternalEditor',
-        label: 'External label 1',
-        description: 'This is the a external property',
-        dataTypeKey: 'dt-3',
-        tempValue: 'Tex lkasdfkljdfsa 1',
-      },
     ],
     /*
     // Concept for stored values, better approach for variants, separating data from structure/configuration
@@ -109,6 +102,20 @@ export const data: Array<DocumentNode> = [
         dataTypeKey: 'dt-2',
         tempValue: 'Tex areaaaa 2',
       },
+      {
+        alias: 'myExternalEditor',
+        label: 'External label 1',
+        description: 'This is the a external property',
+        dataTypeKey: 'dt-3',
+        tempValue: 'Tex lkasdfkljdfsa 1',
+      },
+      {
+        alias: 'myContextExampleEditor',
+        label: 'Context example label 1',
+        description: 'This is the a example property',
+        dataTypeKey: 'dt-4',
+        tempValue: '',
+      },
     ],
   },
 ];