add property editor and section plugins

src/Umbraco.Web.UI.Client/.eslintignore

@@ -2,4 +2,5 @@
 types
 dist
 schemas
-temp-schema-generator
+temp-schema-generator
+APP_PLUGINS

src/Umbraco.Web.UI.Client/APP_PLUGINS/property-editor.js

@@ -0,0 +1,13 @@
+const template = document.createElement('template');
+template.innerHTML = `  
+  <span>Example of a vanilla JS Property Editor</span>
+`;
+
+export default class MyPropertyEditorUI extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({mode: 'open'});
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+customElements.define('my-property-editor-ui-custom', MyPropertyEditorUI);

src/Umbraco.Web.UI.Client/APP_PLUGINS/readme.md

@@ -0,0 +1 @@
+// TODO: write description

src/Umbraco.Web.UI.Client/APP_PLUGINS/section.js

@@ -0,0 +1,25 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    :host {
+      padding: 20px;
+      display: block;
+      box-sizing: border-box;
+    }
+  </style>
+  
+  <uui-box>
+    <h1>Custom Section</h1>
+    <p>Example of vanilla JS section</p>
+  </uui-box>
+`;
+
+export default class MySectionCustom extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({mode: 'open'});
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define('my-section-custom', MySectionCustom);

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

@@ -1,11 +0,0 @@
-export default class ExternalPropertyEditorTest extends HTMLElement {
-  
-    constructor() {
-        super();
-        this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot'
-        const wrapper = document.createElement('span');
-        wrapper.textContent = 'Example of a pure JS Property Editor';
-        this.shadowRoot.append(wrapper);
-    }
-}
-customElements.define('external-property-editor-test', ExternalPropertyEditorTest);

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

@@ -22,8 +22,8 @@ export class UmbDataTypeStore {
       {
         id: 1246,
         key: 'dt-3',
-        name: 'External Test (DataType)',
-        propertyEditorUIAlias: 'External.PropertyEditorUI.Test',
+        name: 'My JS Property Editor (DataType)',
+        propertyEditorUIAlias: 'My.PropertyEditorUI.Custom',
       },
       {
         id: 1247,

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

@@ -95,17 +95,6 @@ const registerInternalManifests = async () => {
         group: 'common',
       },
     },
-    {
-      type: 'propertyEditorUI',
-      alias: 'External.PropertyEditorUI.Test',
-      name: 'Text',
-      //elementName: 'external-property-editor-test', //Gets the element name from JS file.
-      js: '/src/backoffice/property-editors/external-property-editor-test.js',
-      meta: {
-        icon: 'document',
-        group: 'common',
-      },
-    },
     /*
     {
       type: 'propertyEditorUI',

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

@@ -104,7 +104,7 @@ export const data: Array<DocumentNode> = [
       },
       {
         alias: 'myExternalEditor',
-        label: 'External label',
+        label: 'My JS Property Editor',
         description: 'This is the a external property',
         dataTypeKey: 'dt-3',
         tempValue: 'Tex lkasdfkljdfsa 1',

src/Umbraco.Web.UI.Client/src/mocks/domains/manifests.handlers.ts

@@ -11,13 +11,23 @@ export const handlers = [
           {
             type: 'section',
             alias: 'My.Section.Custom',
-            name: 'Custom',
-            elementName: 'umb-custom-section',
+            name: 'Custom Section',
+            js: '/APP_PLUGINS/section.js',
             meta: {
               pathname: 'my-custom',
               weight: 1,
             },
           },
+          {
+            type: 'propertyEditorUI',
+            alias: 'My.PropertyEditorUI.Custom',
+            name: 'My Custom Property Editor UI',
+            js: '/APP_PLUGINS/property-editor.js',
+            meta: {
+              icon: 'document',
+              group: 'common',
+            },
+          },
         ],
       })
     );