@node-projects/web-component-designer 0.0.112 → 0.0.115

package/README.md

@@ -1,20 +1,15 @@
 # web-component-designer
 
-## Caution - this is a preview Version, a RC1 is now planed for May 2022 - it's already usable but big Refactoring could still happen
+```This is a preview version. It's already useable but big refactorings could still happen.```
 
-
-A HTML WebComponent for Designing Webcomponents and HTML Pages.
-
-Based on PolymerLabs Wizzywid (but it does not use Polymer any more.)
-
-This is a Designer Framework wich could easily be included in your own Software..
+A HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software.
+Meanwhile polymer is not used anymore.
 
 ![image](https://user-images.githubusercontent.com/364896/117482820-358e2d80-af65-11eb-97fd-9d15ebf1966f.png)
 
 ## NPM Package
 
-At the moment there is no NPM Package.
-But there will be one when project is in Release Candidate state.
+At the moment there is no npm package available, but there will be one as soon as the software has reached RC status.
 
 ## Demo
 
@@ -35,9 +30,7 @@ repository: https://github.com/node-projects/web-component-designer-simple-demo
 
 ## Features we are workin on
 
- - CSS Grid Positioning (planed)
- - look at the issues
- - Much, much more ...
+https://github.com/node-projects/web-component-designer/issues
 
 ## Developing
 
@@ -46,38 +39,39 @@ repository: https://github.com/node-projects/web-component-designer-simple-demo
   $ npm install
 ```
 
-  * Compile Typescript after doing changes
+  * Compile typescript after doing changes
 ```
-  $ npm run build
+  $ npm run build (if you use Visual Studio Code, you can also run the build task via Ctrl + Shift + B > tsc:build - tsconfig.json)
 ```
 
-## Using
-
-at first you have to setup a service container, providing services for History, Properties, Elements, ....
+  * *Link node module*<br/>
+```
+  $ npm link 
+```
 
-## Configuring
+## Using
 
-## For some Widgets the Designer needs Additional Dependencies
+At first you have to setup a service container providing services for history, properties, elements, ...
 
 ## Code Editor
 
-You can select to use on of 3 Code Editors Available (ACE, CodeMirrow, Monaco).
-If you use one of the Widgets, you need to include the JS lib in you index.html and then use the specific widget.
+You can select to use one of 3 code editors available (ACE, CodeMirrow, Monaco).
+If you use one of the widgets, you need to include the JS lib in your index.html and then use the specific widget.
 
 ## TreeView
 
-We have 2 Tree Components. One Dependend Less and one Feature Rich wich uses FancyTree (and cause of this it needs JQuery and JqueryUI)
+We have 2 tree components. One independent and one feature rich which uses FancyTree (and cause of this it needs JQuery and JqueryUI).
 
 ## DragDrop
 
-If you'd like to use the Designer on Mobile, you need the mobile-drag-drop npm Library and include our polyfill.
-Your addition to your index.html should look like this:
+If you'd like to use the designer on mobile, you need the mobile-drag-drop npm library and include our polyfill.
+Your index.html should be extended as follows:
 
     <link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
     <script src="/node_modules/mobile-drag-drop/index.js"></script>
     <script src="/node_modules/@node-projects/web-component-designer/dist/polyfill/mobileDragDrop.js"></script>
 
-## Copyright notice:
+## Copyright notice
 
 The Library uses Images from the Chrome Dev Tools, see
 https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src

package/dist/elements/controls/DesignerTabControl.js

@@ -136,8 +136,13 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         let w = 0;
         DomHelper.removeAllChildnodes(this._moreContainer);
         DomHelper.removeAllChildnodes(this._headerDiv);
+        let reloadOnce = true;
         for (let item of this.children) {
             let htmlItem = item;
+            if (!this._elementMap.has(htmlItem) && reloadOnce) {
+                this.refreshItems();
+                reloadOnce = false;
+            }
             const tabHeaderDiv = this._elementMap.get(htmlItem);
             this._moreContainer.appendChild(tabHeaderDiv);
             if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {

package/dist/elements/item/DesignItem.d.ts

@@ -53,7 +53,7 @@ export declare class DesignItem implements IDesignItem {
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     updateChildrenFromNodesChildren(): void;
     constructor(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
-    openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
+    openGroup(title: string): ChangeGroup;
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
     static GetDesignItem(node: Node): IDesignItem;

package/dist/elements/item/DesignItem.js

@@ -74,18 +74,20 @@ export class DesignItem {
         return this._childArray.indexOf(designItem);
     }
     insertAdjacentElement(designItem, where) {
+        let action;
         if (where == 'afterbegin') {
-            this._insertChildInternal(designItem, 0);
+            action = new InsertChildAction(designItem, this, 0);
         }
         else if (where == 'beforeend') {
-            this._insertChildInternal(designItem);
+            action = new InsertChildAction(designItem, this, this._childArray.length);
         }
         else if (where == 'beforebegin') {
-            this.parent._insertChildInternal(designItem, this.parent.indexOf(this));
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
         }
         else if (where == 'afterend') {
-            this.parent._insertChildInternal(designItem, this.parent.indexOf(this) + 1);
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
         }
+        this.instanceServiceContainer.undoService.execute(action);
     }
     insertChild(designItem, index) {
         const action = new InsertChildAction(designItem, this, index);
@@ -96,7 +98,8 @@ export class DesignItem {
         this.instanceServiceContainer.undoService.execute(action);
     }
     remove() {
-        this.parent._removeChildInternal(this);
+        const action = new DeleteAction([this]);
+        this.instanceServiceContainer.undoService.execute(action);
     }
     clearChildren() {
         for (let i = this._childArray.length - 1; i >= 0; i--) {
@@ -210,12 +213,8 @@ export class DesignItem {
     updateChildrenFromNodesChildren() {
         this._childArray = [];
         if (this.nodeType == NodeType.Element) {
-            if (this.element.children && this.element.children.length === 0 && this.element.childNodes.length <= 1)
-                this.content = this.element.textContent; //was soll das bringen???
-            else {
-                for (const c of this.element.childNodes)
-                    this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
-            }
+            for (const c of this.element.childNodes)
+                this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
         }
     }
     constructor(node, serviceContainer, instanceServiceContainer) {
@@ -226,8 +225,8 @@ export class DesignItem {
         this.styles = new Map();
         DesignItem._designItemMap.set(node, this);
     }
-    openGroup(title, affectedItems) {
-        return this.instanceServiceContainer.undoService.openGroup(title, affectedItems);
+    openGroup(title) {
+        return this.instanceServiceContainer.undoService.openGroup(title);
     }
     getOrCreateDesignItem(node) {
         return DesignItem.GetOrCreateDesignItem(node, this.serviceContainer, this.instanceServiceContainer);

package/dist/elements/item/IDesignItem.d.ts

@@ -39,7 +39,7 @@ export interface IDesignItem {
     instanceServiceContainer: InstanceServiceContainer;
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
     getOrCreateDesignItem(node: Node): any;
-    openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
+    openGroup(title: string): ChangeGroup;
     setStyle(name: string, value?: string | null): any;
     removeStyle(name: string): any;
     setAttribute(name: string, value?: string | null): any;

package/dist/elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js

@@ -1,9 +1,11 @@
-import { BaseCustomWebComponentLazyAppend, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, BaseCustomWebComponentConstructorAppend, BaseCustomWebComponentConstructorAppendLazyReady } from '@node-projects/base-custom-webcomponent';
 import { AbstractBasePropertiesService } from './AbstractBasePropertiesService';
 export class BaseCustomWebComponentPropertiesService extends AbstractBasePropertiesService {
     name = "baseCustomWebComponent";
     isHandledElement(designItem) {
-        return designItem.element instanceof BaseCustomWebComponentLazyAppend || designItem.element instanceof BaseCustomWebComponentConstructorAppend;
+        return designItem.element instanceof BaseCustomWebComponentLazyAppend ||
+            designItem.element instanceof BaseCustomWebComponentConstructorAppendLazyReady ||
+            designItem.element instanceof BaseCustomWebComponentConstructorAppend;
     }
     _notifyChangedProperty(designItem, property, value) {
         //@ts-ignore

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -259,7 +259,7 @@ export class CssPropertiesService {
         return this[this.name];
     }
     setValue(designItems, property, value) {
-        const cg = designItems[0].openGroup("properties changed", designItems);
+        const cg = designItems[0].openGroup("properties changed");
         for (let d of designItems) {
             d.styles.set(property.name, value);
             d.element.style[property.name] = value;

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.js

@@ -16,7 +16,7 @@ export class UnkownElementPropertiesService {
     }
     setValue(designItems, property, value) {
         const attributeName = PropertiesHelper.camelToDashCase(property.name);
-        const cg = designItems[0].openGroup("properties changed", designItems);
+        const cg = designItems[0].openGroup("properties changed");
         try {
             for (let d of designItems) {
                 if (property.type === 'object') {

package/dist/elements/services/undoService/ChangeGroup.d.ts

@@ -2,10 +2,10 @@ import { ITransactionItem } from './ITransactionItem';
 import { IDesignItem } from '../../item/IDesignItem';
 export declare class ChangeGroup implements ITransactionItem {
     title: string;
-    affectedItems: IDesignItem[];
+    get affectedItems(): IDesignItem[];
     private commitHandler;
     private abortHandler;
-    constructor(title: string, affectedItems: IDesignItem[], commitHandler: (transactionItem: ITransactionItem) => void, abortHandler: (transactionItem: ITransactionItem) => void);
+    constructor(title: string, commitHandler: (transactionItem: ITransactionItem) => void, abortHandler: (transactionItem: ITransactionItem) => void);
     do(): void;
     undo(): void;
     commit(): void;

package/dist/elements/services/undoService/ChangeGroup.js

@@ -1,11 +1,19 @@
 export class ChangeGroup {
     title;
-    affectedItems;
+    get affectedItems() {
+        let s = new Set();
+        for (let u of this.undoStack)
+            for (let i of u.affectedItems)
+                s.add(i);
+        for (let u of this.redoStack)
+            for (let i of u.affectedItems)
+                s.add(i);
+        return [...s.values()];
+    }
     commitHandler;
     abortHandler;
-    constructor(title, affectedItems, commitHandler, abortHandler) {
+    constructor(title, commitHandler, abortHandler) {
         this.title = title;
-        this.affectedItems = affectedItems;
         this.commitHandler = commitHandler;
         this.abortHandler = abortHandler;
     }

package/dist/elements/services/undoService/IUndoService.d.ts

@@ -1,9 +1,8 @@
 import { IService } from '../IService';
 import { ChangeGroup } from './ChangeGroup';
 import { ITransactionItem } from './ITransactionItem';
-import { IDesignItem } from '../../item/IDesignItem';
 export interface IUndoService extends IService {
-    openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
+    openGroup(title: string): ChangeGroup;
     execute(item: ITransactionItem): void;
     canUndo(): boolean;
     canRedo(): boolean;

package/dist/elements/services/undoService/UndoService.d.ts

@@ -1,7 +1,6 @@
 import { ITransactionItem } from './ITransactionItem.js';
 import { ChangeGroup } from "./ChangeGroup.js";
 import { IUndoService } from './IUndoService.js';
-import { IDesignItem } from '../../item/IDesignItem';
 import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class UndoService implements IUndoService {
     private _undoStack;
@@ -9,7 +8,7 @@ export declare class UndoService implements IUndoService {
     private _transactionStack;
     private _designerCanvas;
     constructor(designerCanvas?: IDesignerCanvas);
-    openGroup(title: string, affectedItems: IDesignItem[]): ChangeGroup;
+    openGroup(title: string): ChangeGroup;
     private commitTransactionItem;
     private abortTransactionItem;
     execute(item: ITransactionItem): void;

package/dist/elements/services/undoService/UndoService.js

@@ -10,8 +10,8 @@ export class UndoService {
     constructor(designerCanvas) {
         this._designerCanvas = designerCanvas;
     }
-    openGroup(title, affectedItems) {
-        let t = new ChangeGroup(title, affectedItems, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
+    openGroup(title) {
+        let t = new ChangeGroup(title, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
         this._transactionStack.push(t);
         return t;
     }

package/dist/elements/services/undoService/transactionItems/DeleteAction.js

@@ -22,7 +22,7 @@ export class DeleteAction {
             this._parentIndexes.push(DomHelper.nodeIndex(this.deletedItems[n].element));
         }
         for (let n = 0; n < this.deletedItems.length; n++) {
-            this.deletedItems[n].remove();
+            this.deletedItems[n].parent._removeChildInternal(this.deletedItems[n]);
         }
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this.deletedItems });
     }

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -7,10 +7,10 @@ export class InsertAction {
     }
     title;
     get affectedItems() {
-        return [this.designItem];
+        return [this.designItem, this.newItem];
     }
     undo() {
-        this.newItem.element.remove();
+        this.newItem.parent._removeChildInternal(this.newItem);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
     }
     do() {

package/dist/elements/services/undoService/transactionItems/InsertChildAction.js

@@ -1,21 +1,27 @@
 export class InsertChildAction {
     constructor(designItem, newParent, newIndex) {
-        this.title = "Move Item";
+        this.title = "Move or Insert Item";
         this.designItem = designItem;
         this.newParent = newParent;
         this.newIndex = newIndex;
     }
     title;
     get affectedItems() {
-        return [this.designItem, this.newParent, this.oldParent];
+        if (this.oldParent)
+            return [this.designItem, this.newParent, this.oldParent];
+        return [this.designItem, this.newParent];
     }
     undo() {
-        this.oldParent._insertChildInternal(this.designItem, this.newIndex);
+        if (this.oldParent)
+            this.oldParent._insertChildInternal(this.designItem, this.oldIndex);
+        else
+            this.designItem.parent._removeChildInternal(this.designItem);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
     }
     do() {
         this.oldParent = this.designItem.parent;
-        this.oldIndex = this.designItem.parent.indexOf(this.designItem);
+        if (this.oldParent)
+            this.oldIndex = this.designItem.parent.indexOf(this.designItem);
         this.newParent._insertChildInternal(this.designItem, this.newIndex);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
     }

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -31,7 +31,12 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
         super();
         this._restoreCachedInititalValues();
         //@ts-ignore
-        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        if (importShim)
+            //@ts-ignore
+            importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        else
+            //@ts-ignore
+            import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._treeDiv = document.createElement('div');
         this._treeDiv.style.height = '100%';
         this._treeDiv.style.overflow = 'auto';

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -20,7 +20,12 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         //@ts-ignore
-        import("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        if (importShim)
+            //@ts-ignore
+            importShim("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        else
+            //@ts-ignore
+            import("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -53,8 +53,14 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
         return false;
     }
     async ready() {
+        let style;
         //@ts-ignore
-        const style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
+        if (importShim)
+            //@ts-ignore
+            style = await importShim("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
+        else
+            //@ts-ignore
+            style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
         this.shadowRoot.adoptedStyleSheets = [style.default, this.constructor.style];
         this._editor = this._getDomElement('container');
         //@ts-ignore

package/dist/elements/widgets/designerView/extensions/ResizeExtension.js

@@ -138,7 +138,7 @@ export class ResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                let cg = this.extendedItem.openGroup("Resize Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                let cg = this.extendedItem.openGroup("Resize Elements");
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
                 if (this.resizeAllSelected) {

package/dist/elements/widgets/designerView/extensions/RotateExtension.js

@@ -51,7 +51,7 @@ export class RotateExtension extends AbstractExtension {
                 this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 break;
             case EventNames.PointerUp:
-                let cg = this.extendedItem.openGroup("Rotate Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                let cg = this.extendedItem.openGroup("Rotate Elements");
                 /*for (const designItem of this.instanceServiceContainer.selectionService.selectedElements) {
                   designItem.setStyle('width', (<HTMLElement>designItem.element).style.width);
                   designItem.setStyle('height', (<HTMLElement>designItem.element).style.height);

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -243,7 +243,7 @@ export class PointerTool {
                         let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
                         const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                         if (containerService) {
-                            let cg = designerCanvas.rootDesignItem.openGroup("Move Elements", designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                            let cg = designerCanvas.rootDesignItem.openGroup("Move Elements");
                             containerService.finishPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                             cg.commit();
                         }

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -57,7 +57,12 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
         super();
         this._restoreCachedInititalValues();
         //@ts-ignore
-        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        if (importShim)
+            //@ts-ignore
+            importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        else
+            //@ts-ignore
+            import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
             let match = this._filter.value;

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.d.ts

@@ -6,6 +6,7 @@ export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAp
     static readonly template: HTMLTemplateElement;
     private _type;
     private _id;
+    private _content;
     private _pg;
     private _selectionChangedHandler;
     private _instanceServiceContainer;

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -1,5 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { sleep } from '../../helper/Helper.js';
+import { DesignItem } from '../../item/DesignItem';
 export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
@@ -43,11 +44,13 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
   <div>
     <span class="desc">Type:</span><span id="type"></span>
     <span class="desc">Id:</span><input type="text" id="id">
+    <span class="desc">Content:</span><input type="text" id="content">
   </div>
   <node-projects-property-grid id="pg"></node-projects-property-grid>
   `;
     _type;
     _id;
+    _content;
     _pg;
     _selectionChangedHandler;
     _instanceServiceContainer;
@@ -56,6 +59,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._restoreCachedInititalValues();
         this._type = this._getDomElement('type');
         this._id = this._getDomElement('id');
+        this._content = this._getDomElement('content');
         this._pg = this._getDomElement('pg');
         this._id.onkeydown = e => {
             if (e.key == 'Enter')
@@ -66,6 +70,21 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
                 e.stopPropagation();
             }
         };
+        this._content.onkeydown = e => {
+            if (e.key == 'Enter') {
+                const grp = this._instanceServiceContainer.selectionService.primarySelection.openGroup('set content');
+                this._instanceServiceContainer.selectionService.primarySelection.clearChildren();
+                let t = document.createTextNode(this._content.value);
+                let di = DesignItem.GetOrCreateDesignItem(t, this._instanceServiceContainer.selectionService.primarySelection.serviceContainer, this._instanceServiceContainer);
+                this._instanceServiceContainer.selectionService.primarySelection.insertAdjacentElement(di, 'afterbegin');
+                grp.commit();
+            }
+            else if (e.key == 'Escape') {
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
         let pSel;
         this._id.onfocus = e => {
             pSel = this._instanceServiceContainer.selectionService.primarySelection;
@@ -85,6 +104,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
             this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
             this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+            this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
         });
     }
 }

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -96,7 +96,12 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         super();
         this._restoreCachedInititalValues();
         //@ts-ignore
-        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        if (importShim)
+            //@ts-ignore
+            importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        else
+            //@ts-ignore
+            import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
             this._filterNodes();

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.112",
+  "version": "0.0.115",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",