@node-projects/web-component-designer 0.1.124 → 0.1.125

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

@@ -70,7 +70,11 @@ export declare class DesignItem implements IDesignItem {
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
     removeDesignerAttributesAndStylesFromChildren(): void;
-    updateChildrenFromNodesChildren(): void;
+    _internalUpdateChildrenFromNodesChildren(): any[];
+    _backupWhenEditContent: any;
+    _inEditContent: boolean;
+    editContent(): void;
+    editContentFinish(): void;
     constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
     setView(node: Element): void;
     openGroup(title: string): ChangeGroup;

package/dist/elements/item/DesignItem.js

@@ -339,7 +339,10 @@ export class DesignItem {
             }
             node.draggable = false; //even if it should be true, for better designer exp.
         }
-        designItem.updateChildrenFromNodesChildren();
+        designItem._childArray = designItem._internalUpdateChildrenFromNodesChildren();
+        for (let c of designItem._childArray) {
+            c._parent = designItem;
+        }
         return designItem;
     }
     querySelectorAll(selectors) {
@@ -360,25 +363,44 @@ export class DesignItem {
                 e.style.pointerEvents = '';
         }
     }
-    updateChildrenFromNodesChildren() {
-        this._childArray = [];
+    _internalUpdateChildrenFromNodesChildren() {
+        const newChilds = [];
         if (this.nodeType == NodeType.Element) {
             if (this.element instanceof HTMLTemplateElement) {
                 for (const c of this.element.content.childNodes) {
                     const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
-                    this._childArray.push(di);
-                    di._parent = this;
+                    newChilds.push(di);
                 }
             }
             else {
                 for (const c of this.element.childNodes) {
                     const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
-                    this._childArray.push(di);
-                    di._parent = this;
+                    newChilds.push(di);
                 }
             }
         }
-        this._refreshIfStyleSheet();
+        return newChilds;
+    }
+    _backupWhenEditContent;
+    _inEditContent = false;
+    editContent() {
+        this._inEditContent = true;
+        this._backupWhenEditContent = [...this.element.childNodes];
+        const nn = this.element.innerHTML;
+        this.element.innerHTML = '';
+        this.element.innerHTML = nn;
+        this.element.setAttribute('contenteditable', '');
+    }
+    editContentFinish() {
+        if (this._inEditContent) {
+            this._inEditContent = false;
+            this.element.removeAttribute('contenteditable');
+            this.element.innerHTML = '';
+            for (let n of this._backupWhenEditContent) {
+                this.element.appendChild(n);
+            }
+            this._backupWhenEditContent = null;
+        }
     }
     constructor(node, parsedNode, serviceContainer, instanceServiceContainer) {
         this.node = node;

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

@@ -37,7 +37,8 @@ export interface IDesignItem {
     remove(): any;
     clearChildren(): any;
     removeDesignerAttributesAndStylesFromChildren(): any;
-    updateChildrenFromNodesChildren(): any;
+    editContent(): any;
+    editContentFinish(): any;
     readonly hasContent: boolean;
     content: string;
     innerHTML?: string;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.d.ts

@@ -10,6 +10,7 @@ export declare class EditTextExtension extends AbstractExtension implements hand
     private _foreignObject;
     private _path;
     private _toolbar;
+    private _selectionChangedListener;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -35,6 +35,7 @@ export class EditTextExtension extends AbstractExtension {
     _foreignObject;
     _path;
     _toolbar;
+    _selectionChangedListener;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -44,6 +45,12 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
         this.extendedItem.removeDesignerAttributesAndStylesFromChildren();
         this.extendedItem.element.setAttribute('contenteditable', '');
+        //@ts-ignore
+        this.extendedItem.editContent();
+        this._selectionChangedListener = this.extendedItem.instanceServiceContainer.selectionService.onSelectionChanged.on(() => {
+            this.commitchanges();
+            this.extensionManager.removeExtensionInstance(this.extendedItem, this);
+        });
         this.extendedItem.element.focus();
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         this._toolbar = this.createToolbar(EditTextExtension.template, 300, 24);
@@ -80,14 +87,16 @@ export class EditTextExtension extends AbstractExtension {
         this._path.setAttribute("d", data);
     }
     dispose() {
+        this._selectionChangedListener.dispose();
         this._removeAllOverlays();
-        this.extendedItem.element.removeAttribute('contenteditable');
+        this.extendedItem.editContentFinish();
         this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
     }
     commitchanges() {
         this._removeAllOverlays();
-        this.extendedItem.element.removeAttribute('contenteditable');
-        this.extendedItem.updateChildrenFromNodesChildren();
+        const newHTML = this.extendedItem.element.innerHTML;
+        this.extendedItem.editContentFinish();
+        this.extendedItem.innerHTML = newHTML;
         this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
     }
     handlesPointerEvent(designerCanvas, event, currentElement) {

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js

@@ -2,6 +2,8 @@ import { EditTextExtension } from "./EditTextExtension.js";
 import { css } from '@node-projects/base-custom-webcomponent';
 export class EditTextExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.isRootItem)
+            return false;
         if (designItem.name === 'input')
             return false;
         return true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.124",
+  "version": "0.1.125",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",