@node-projects/web-component-designer 0.0.86 → 0.0.87

package/dist/elements/helper/ElementHelper.d.ts

@@ -7,3 +7,4 @@ export declare enum ElementDisplayType {
 export declare function isInline(element: HTMLElement): boolean;
 export declare function getElementDisplaytype(element: HTMLElement): ElementDisplayType;
 export declare function isEmptyTextNode(node: Node): boolean;
+export declare function getActiveElement(): Element;

package/dist/elements/helper/ElementHelper.js

@@ -20,3 +20,13 @@ export function getElementDisplaytype(element) {
 export function isEmptyTextNode(node) {
     return node.textContent.trim() == '' && node.textContent.indexOf('\xa0' /* &nbsp; */) < 0;
 }
+export function getActiveElement() {
+    let activeElement = document.activeElement;
+    let lastActive = null;
+    while (activeElement != lastActive) {
+        lastActive = activeElement;
+        if (activeElement.shadowRoot != null && activeElement.shadowRoot.activeElement)
+            activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement;
+}

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

@@ -39,6 +39,8 @@ export declare class DesignItem implements IDesignItem {
     get hasContent(): boolean;
     get content(): string;
     set content(value: string);
+    get innerHTML(): string;
+    set innerHTML(value: string);
     private _hideAtDesignTime;
     get hideAtDesignTime(): boolean;
     set hideAtDesignTime(value: boolean);

package/dist/elements/item/DesignItem.js

@@ -114,6 +114,13 @@ export class DesignItem {
     set content(value) {
         this.node.textContent = value;
     }
+    get innerHTML() {
+        return this.element.innerHTML;
+    }
+    set innerHTML(value) {
+        this.element.innerHTML = value;
+        this.updateChildrenFromNodesChildren();
+    }
     _hideAtDesignTime;
     get hideAtDesignTime() {
         return this._hideAtDesignTime;

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

@@ -32,6 +32,7 @@ export interface IDesignItem {
     updateChildrenFromNodesChildren(): any;
     readonly hasContent: boolean;
     content: string;
+    innerHTML?: string;
     readonly node: Node;
     readonly element: Element;
     serviceContainer: ServiceContainer;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -39,7 +39,6 @@ import { GridPlacementService } from './placementService/GridPlacementService.js
 import { ElementAtPointService } from './elementAtPointService/ElementAtPointService';
 import { FlexBoxPlacementService } from './placementService/FlexBoxPlacementService';
 import { SnaplinesProviderService } from './placementService/SnaplinesProviderService';
-import { PrepareElementsForDesignerService } from './instanceService/PrepareElementsForDesignerService';
 import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService';
@@ -54,7 +53,6 @@ import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
 import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js';
 import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/RectContextMenu.js';
 import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js';
-import { IframeExtensionProvider } from '../widgets/designerView/extensions/IframeExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -71,7 +69,6 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
     serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
-    serviceContainer.register("prepareElementsForDesignerService", new PrepareElementsForDesignerService());
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
@@ -79,7 +76,6 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         // new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider(),
-        new IframeExtensionProvider(),
         // new ElementDragTitleExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [

package/dist/elements/services/ServiceContainer.d.ts

@@ -18,7 +18,6 @@ import { GlobalContext } from './GlobalContext';
 import { IBindingService } from "./bindingsService/IBindingService";
 import { IElementAtPointService } from './elementAtPointService/IElementAtPointService';
 import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js";
-import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
 import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
@@ -41,7 +40,6 @@ interface ServiceNameMap {
     "bindableObjectsService": IBindableObjectsService;
     "bindableObjectDragDropService": IBindableObjectDragDropService;
     "elementAtPointService": IElementAtPointService;
-    "prepareElementsForDesignerService": IPrepareElementsForDesignerService;
     "dragDropService": IDragDropService;
     "copyPasteService": ICopyPasteService;
     "modelCommandService": IModelCommandService;
@@ -53,6 +51,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    removeDesignerExtensionOfType(container: (ExtensionType | string), lambda: new (...args: any[]) => IDesignerExtensionProvider): void;
     readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
@@ -71,7 +70,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get htmlParserService(): IHtmlParserService;
     get intializationService(): IIntializationService;
     get elementAtPointService(): IElementAtPointService;
-    get prepareElementsForDesignerService(): IPrepareElementsForDesignerService;
     get dragDropService(): IDragDropService;
     get copyPasteService(): ICopyPasteService;
     get modelCommandService(): IModelCommandService;

package/dist/elements/services/ServiceContainer.js

@@ -8,6 +8,14 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    removeDesignerExtensionOfType(container, lambda) {
+        const extContainer = this.designerExtensions.get(container);
+        for (let i = 0; i < extContainer.length; i++) {
+            if (extContainer[i].constructor === lambda) {
+                extContainer.splice(i, 1);
+            }
+        }
+    }
     designViewConfigButtons = [];
     designerPointerExtensions = [];
     designerContextMenuExtensions;
@@ -52,9 +60,6 @@ export class ServiceContainer extends BaseServiceContainer {
     get elementAtPointService() {
         return this.getLastService('elementAtPointService');
     }
-    get prepareElementsForDesignerService() {
-        return this.getLastService('prepareElementsForDesignerService');
-    }
     get dragDropService() {
         return this.getLastService('dragDropService');
     }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -27,6 +27,7 @@ export class NodeHtmlParserService {
         let designItem = null;
         if (item.nodeType == 1) {
             let element;
+            let manualCreatedElement = false;
             if (!namespace)
                 element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
             if (!element) {
@@ -34,6 +35,7 @@ export class NodeHtmlParserService {
                     element = document.createElementNS(namespace, item.rawTagName);
                 else
                     element = document.createElement(item.rawTagName);
+                manualCreatedElement = true;
             }
             designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
             let hideAtDesignTime = false;
@@ -44,6 +46,9 @@ export class NodeHtmlParserService {
             for (let a in attr) {
                 if (a !== 'style') {
                     designItem.attributes.set(a, attr[a]);
+                    if (manualCreatedElement) {
+                        element.setAttribute(a, attr[a]);
+                    }
                     if (a === 'node-projects-hide-at-design-time')
                         hideAtDesignTime = true;
                     else if (a === 'node-projects-hide-at-run-time')
@@ -60,6 +65,9 @@ export class NodeHtmlParserService {
                 styleParser.parse(style);
                 for (let s of styleParser.entries) {
                     designItem.styles.set(s.name, s.value);
+                    if (manualCreatedElement) {
+                        element.style[s.name] = s.value;
+                    }
                 }
             }
             if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {

package/dist/elements/services/initializationService/DefaultIntializationService.js

@@ -1,22 +1,22 @@
 export class DefaultIntializationService {
     init(designItem) {
-        if (designItem.name == 'iframe') {
-            this.initializeIframe(designItem.element);
-        }
+        /*if (designItem.name == 'iframe') {
+          this.initializeIframe(<HTMLIFrameElement>designItem.element);
+        }*/
     }
     initializeIframe(iframe) {
-        iframe.contentDocument.body.style.pointerEvents = 'none';
-        function cloneIframeEvent(event) {
-            var clRect = iframe.getBoundingClientRect();
-            let data = { ...event };
-            data.clientX = event.clientX + clRect.left;
-            data.clientY = event.clientY + clRect.top;
-            var evt = new PointerEvent(event.type, data); //new CustomEvent('pointerdown', {bubbles: true, cancelable: false});
-            iframe.dispatchEvent(evt);
+        /*iframe.contentDocument.body.style.pointerEvents = 'none';
+        function cloneIframeEvent(event: PointerEvent) {
+          var clRect = iframe.getBoundingClientRect();
+          let data = { ...event };
+          data.clientX = event.clientX + clRect.left;
+          data.clientY = event.clientY + clRect.top;
+          var evt = new PointerEvent(event.type, data) //new CustomEvent('pointerdown', {bubbles: true, cancelable: false});
+          iframe.dispatchEvent(evt);
         }
         iframe.contentWindow.addEventListener('pointerdown', cloneIframeEvent);
         iframe.contentWindow.addEventListener('pointermove', cloneIframeEvent);
-        iframe.contentWindow.addEventListener('pointerup', cloneIframeEvent);
+        iframe.contentWindow.addEventListener('pointerup', cloneIframeEvent);*/
     }
     ;
 }

package/dist/elements/services/instanceService/PrepareElementsForDesignerService.js

@@ -5,28 +5,28 @@ export class PrepareElementsForDesignerService {
         this._prepareElementsForDesigner(designItem.element.querySelectorAll('*'), true);
     }
     _prepareElementsForDesigner(elements, rootElements) {
-        for (let el of elements) {
-            if (el.shadowRoot) {
-                this._prepareElementsForDesigner((el.shadowRoot).querySelectorAll('*'), false);
-            }
-            if (el instanceof HTMLElement) {
-                el.onclick = null;
-                el.onmousedown = null;
-                el.onmouseup = null;
-                if (!rootElements)
-                    el.style.pointerEvents = 'none';
-            }
-            if (el instanceof HTMLImageElement) {
-                el.draggable = false;
-            }
-            else if (el instanceof HTMLInputElement) {
-                el.onmousedown = (e) => e.preventDefault();
-                //const ip = el;
-                //el.onclick = (e) => { if (ip.type == 'checkbox') ip.checked = !ip.checked };
-            }
-            else if (el instanceof HTMLSelectElement) {
-                el.onmousedown = (e) => e.preventDefault();
-            }
-        }
+        /*for (let el of elements) {
+          if ((<HTMLElement>el).shadowRoot) {
+            this._prepareElementsForDesigner(((<HTMLElement>el).shadowRoot).querySelectorAll('*'), false);
+          }
+          if (el instanceof HTMLElement) {
+            el.onclick = null;
+            el.onmousedown = null;
+            el.onmouseup = null;
+            if (!rootElements)
+              el.style.pointerEvents = 'none';
+          }
+          if (el instanceof HTMLImageElement) {
+            el.draggable = false;
+          }
+          else if (el instanceof HTMLInputElement) {
+            el.onmousedown = (e) => e.preventDefault();
+            //const ip = el;
+            //el.onclick = (e) => { if (ip.type == 'checkbox') ip.checked = !ip.checked };
+          }
+          else if (el instanceof HTMLSelectElement) {
+            el.onmousedown = (e) => e.preventDefault();
+          }
+        }*/
     }
 }

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

@@ -23,6 +23,7 @@ export class UndoService {
         }
         if (itm.undoStack.length)
             this._undoStack.push(itm);
+        this._redoStack = [];
     }
     abortTransactionItem(transactionItem) {
         let itm = this._transactionStack.pop();

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

@@ -15,9 +15,6 @@ export class InsertAction {
     }
     do() {
         this.designItem._insertChildInternal(this.newItem, this.index);
-        const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
-        if (prepService)
-            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: [this.newItem] });
     }
     designItem;

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -16,6 +16,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly rootDesignItem: IDesignItem;
     readonly overlayLayer: OverlayLayerView;
     readonly extensionManager: IExtensionManager;
+    readonly clickOverlay: HTMLDivElement;
     readonly snapLines: Snaplines;
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -18,6 +18,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     instanceServiceContainer: InstanceServiceContainer;
     containerBoundingRect: DOMRect;
     outerRect: DOMRect;
+    clickOverlay: HTMLDivElement;
     gridSize: number;
     alignOnGrid: boolean;
     alignOnSnap: boolean;

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -26,6 +26,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     instanceServiceContainer;
     containerBoundingRect;
     outerRect;
+    clickOverlay;
     // IPlacementView
     gridSize = 10;
     alignOnGrid = false;
@@ -119,8 +120,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       user-select: none;
       -webkit-user-select: none;
     }
+
+    #node-projects-designer-canvas-clickOverlay {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
     
-    #transformHelper {
+    #node-projects-designer-canvas-transformHelper {
       height: 0;
       width: 0;
     }`;
@@ -130,12 +138,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         <div id="node-projects-designer-canvas-outercanvas2"
           style="width:100%;height:100%;position:relative;">
           <div id="node-projects-designer-canvas-canvasContainer"
-            style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
-            <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
+            style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;left: 0;user-select: none;">
+            <div id="node-projects-designer-canvas-canvas" part="canvas"></div>
           </div>
         </div>
+        <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;"></div>
       </div>
-      <div id="transformHelper"></div>
+      <div id="node-projects-designer-canvas-transformHelper"></div>
     </div>`;
     extensionManager;
     _pointerextensions;
@@ -145,13 +154,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
-        this.transformHelperElement = this._getDomElement('transformHelper');
+        this.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay');
+        this.transformHelperElement = this._getDomElement('node-projects-designer-canvas-transformHelper');
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
         this._onContextMenuBound = this._onContextMenu.bind(this);
         this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
-        this._canvas.oncontextmenu = this._onContextMenuBound;
+        this.clickOverlay.oncontextmenu = this._onContextMenuBound;
     }
     get designerWidth() {
         return this._canvasContainer.style.width;
@@ -338,22 +348,27 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     elementFromPoint(x, y) {
+        this.clickOverlay.style.pointerEvents = 'none';
         //@ts-ignore
-        return this.shadowRoot.elementFromPoint(x, y);
+        let element = this.shadowRoot.elementFromPoint(x, y);
+        if (element === this.clickOverlay)
+            element = this._canvas;
+        this.clickOverlay.style.pointerEvents = 'auto';
+        return element;
     }
     connectedCallback() {
         if (!this._firstConnect) {
             this._firstConnect = true;
-            this._outercanvas2.addEventListener(EventNames.PointerDown, this._pointerEventHandlerBound);
-            this._outercanvas2.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
-            this._outercanvas2.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
-            this._outercanvas2.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
-            this._outercanvas2.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
-            this._outercanvas2.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
-            this._outercanvas2.addEventListener(EventNames.Drop, event => this._onDrop(event));
-            this._canvas.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
-            this._canvas.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
-            this._canvas.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
+            this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandlerBound);
+            this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
+            this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
+            this.clickOverlay.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
+            this.clickOverlay.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
+            this.clickOverlay.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
+            this.clickOverlay.addEventListener(EventNames.Drop, event => this._onDrop(event));
+            this.clickOverlay.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
+            this.clickOverlay.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
+            this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
         }
     }
     zoomFactorChanged() {
@@ -392,9 +407,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 intializationService.init(di);
         }
         this.snapLines.clearSnaplines();
-        const prepService = this.serviceContainer.prepareElementsForDesignerService;
-        if (prepService)
-            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.rootDesignItem));
     }
     _onDragEnter(event) {
         this._fillCalculationrects();
@@ -517,17 +529,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     onKeyUp(event) {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        switch (event.key) {
-            case 'ArrowUp':
-                //this._resetPointerEventsForClickThrough();
-                break;
-        }
         event.preventDefault();
     }
     onKeyDown(event) {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        //TODO: keyboard events maybe should also be handeled by tools 
         if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
             this.executeCommand({ type: CommandType.undo });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)
@@ -605,6 +611,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     getElementAtPoint(point, ignoreElementCallback) {
         let backupPEventsMap = new Map();
         let currentElement = this.elementFromPoint(point.x, point.y);
+        this.clickOverlay.style.pointerEvents = 'none';
         let lastElement = null;
         try {
             while (currentElement != null) {
@@ -641,6 +648,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             for (let e of backupPEventsMap.entries()) {
                 e[0].style.pointerEvents = e[1];
             }
+            this.clickOverlay.style.pointerEvents = 'auto';
         }
         return currentElement;
     }
@@ -667,6 +675,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
           if (!DesignerCanvas.hasOrIsParent(currentElement, this._canvas))
             return;
         }*/
+        if (currentElement instanceof SVGGraphicsElement && currentElement?.ownerSVGElement?.parentNode?.host == this.overlayLayer) {
+            this.clickOverlay.style.cursor = getComputedStyle(currentElement).cursor;
+            //@ts-ignore
+            currentElement.dispatchEvent(new event.constructor(event.type, event));
+            return;
+        }
+        this.clickOverlay.style.cursor = this._canvas.style.cursor;
         //TODO: remove duplication when tool refactoring starts
         //this._fillCalculationrects();
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
@@ -702,12 +717,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         //search for containers below mouse cursor.
         //to do this, we need to disable pointer events for each in a loop and search wich element is there
         let backupPEventsMap = new Map();
+        this.clickOverlay.style.pointerEvents = 'none';
         try {
             let el = this.elementFromPoint(event.x, event.y);
             backupPEventsMap.set(el, el.style.pointerEvents);
             el.style.pointerEvents = 'none';
             if (el !== this.rootDesignItem.element) {
-                el = this.elementFromPoint(event.x, event.y);
                 while (el != null) {
                     if (el === this.rootDesignItem.element)
                         break;
@@ -727,6 +742,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             for (let e of backupPEventsMap.entries()) {
                 e[0].style.pointerEvents = e[1];
             }
+            this.clickOverlay.style.pointerEvents = 'auto';
         }
         return lstEl;
     }

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

@@ -0,0 +1,17 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    private static template;
+    private _blurTimeout;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+    _formatSelection(type: string): void;
+}

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

@@ -0,0 +1,80 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditTextExtension extends AbstractExtension {
+    _contentEditedBound;
+    _blurBound;
+    static template = html `
+    <div style="height: 24px; display: flex;">
+      <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
+      <button data-command="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
+      <button data-command="strikeThrough" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+    </div>
+  `;
+    _blurTimeout;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.setAttribute('contenteditable', '');
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerCanvas.eatEvents = this.extendedItem.element;
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const elements = EditTextExtension.template.content.cloneNode(true);
+        elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
+        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
+        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
+        foreignObject.setAttribute('width', '96');
+        foreignObject.setAttribute('height', '24');
+        foreignObject.appendChild(elements);
+        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.overlays.push(foreignObject);
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        this.designerCanvas.eatEvents = null;
+        this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        if (!this._blurTimeout) {
+            this._blurTimeout = setTimeout(() => {
+                //todo, don't remove doubleclick extension (another type could be used), remove extension itself
+                //maybe also configureable when when to remove the extension
+                this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+            }, 150);
+        }
+    }
+    _formatSelection(type) {
+        if (this._blurTimeout)
+            clearTimeout(this._blurTimeout);
+        this._blurTimeout = null;
+        //const selection = <Selection>(<any>this.designerView.shadowRoot).getSelection()
+        document.execCommand(type, false, null);
+        this.extendedItem.element.focus();
+    }
+}

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

@@ -34,13 +34,14 @@ export class EditTextExtension extends AbstractExtension {
         const elements = EditTextExtension.template.content.cloneNode(true);
         elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
         let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x));
-        foreignObject.setAttribute('y', '' + (itemRect.y - this.designerCanvas.containerBoundingRect.y - 30));
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
+        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
         foreignObject.setAttribute('width', '96');
         foreignObject.setAttribute('height', '24');
         foreignObject.appendChild(elements);
         this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
         this.overlays.push(foreignObject);
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
     }
     refresh() {
         this.dispose();
@@ -52,6 +53,7 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.removeEventListener('blur', this._blurBound);
         this.designerCanvas.eatEvents = null;
         this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
     }
     _contentEdited() {
         //todo -> save???

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider copy.d.ts

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

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

@@ -0,0 +1,11 @@
+import { EditTextExtension } from "./EditTextExtension.js";
+export class EditTextExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.name === 'button' || designItem.name === 'input')
+            return false;
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -0,0 +1,20 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextWithStyloExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    private static template;
+    private _resizeObserver;
+    private _rect1;
+    private _rect2;
+    private _rect3;
+    private _rect4;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    private _drawClickOverlayRects;
+    refresh(): void;
+    dispose(): void;
+    _clickOutside(e: any): void;
+}

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

@@ -0,0 +1,83 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditTextWithStyloExtension extends AbstractExtension {
+    _contentEditedBound;
+    _blurBound;
+    static template = html `
+    <stylo-editor></stylo-editor>
+  `;
+    _resizeObserver;
+    _rect1;
+    _rect2;
+    _rect3;
+    _rect4;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        import('@papyrs/stylo/dist/esm/loader.js').then(d => d.defineCustomElements());
+    }
+    extend() {
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        this.extendedItem.element.setAttribute('contenteditable', 'true');
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerCanvas.eatEvents = this.extendedItem.element;
+        const elements = EditTextWithStyloExtension.template.content.cloneNode(true);
+        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        foreignObject.setAttribute('x', '0');
+        foreignObject.setAttribute('y', '0');
+        foreignObject.setAttribute('width', '100%');
+        foreignObject.setAttribute('height', '100%');
+        foreignObject.appendChild(elements);
+        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.overlays.push(foreignObject);
+        this._drawClickOverlayRects();
+        this._rect1.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect1.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect2.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect2.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect3.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect3.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect4.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect4.addEventListener('pointerup', (e) => this._clickOutside(e));
+        requestAnimationFrame(() => {
+            const stylo = foreignObject.querySelector('stylo-editor');
+            //@ts-ignore
+            stylo.containerRef = this.extendedItem.element;
+            //@ts-ignore
+            stylo.config = {
+                dontInjectHeadCss: true
+            };
+        });
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+        this._resizeObserver = new ResizeObserver(() => this._drawClickOverlayRects());
+        this._resizeObserver.observe(this.extendedItem.element);
+    }
+    _drawClickOverlayRects() {
+        const normalized = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._rect1 = this._drawRect(0, 0, this.designerCanvas.containerBoundingRect.width, normalized.y, 'svg-transparent', this._rect1, OverlayLayer.Normal);
+        this._rect2 = this._drawRect(0, 0, normalized.x, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect2, OverlayLayer.Normal);
+        this._rect3 = this._drawRect(normalized.x + normalized.width, 0, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect3, OverlayLayer.Normal);
+        this._rect4 = this._drawRect(0, normalized.y + normalized.height, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect4, OverlayLayer.Normal);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this._resizeObserver.disconnect();
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.designerCanvas.eatEvents = null;
+        this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    _clickOutside(e) {
+        this.extendedItem.innerHTML = this.extendedItem.element.innerHTML;
+        //TODO: the extension should remove itself, not the doubleclick extensions
+        //      cause the extension could be applied in another way
+        //maybe also the removal is maybe not desired (for example if it's permanet extension)
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextWithStyloExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,15 @@
+import { EditTextWithStyloExtension } from "./EditTextWithStyloExtension.js";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class EditTextWithStyloExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.name === 'button' || designItem.name === 'input')
+            return false;
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextWithStyloExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+  .svg-transparent { stroke: none; fill: transparent; pointer-events: all; }
+`;
+}

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

@@ -4,8 +4,6 @@ import { EventNames } from "../../../../enums/EventNames";
 import { createPathD } from "../../../helper/PathDataPolyfill";
 import { ContextMenuHelper } from "../../../helper/contextMenu/ContextMenuHelper";
 export class PathExtension extends AbstractExtension {
-    //private _itemRect: DOMRect;
-    //private _svgRect: DOMRect;
     _lastPos;
     _parentRect;
     _startPos;
@@ -16,8 +14,6 @@ export class PathExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        //this._itemRect = this.extendedItem.element.getBoundingClientRect();
-        //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
         for (let p of this._pathdata) {
@@ -125,7 +121,7 @@ export class PathExtension extends AbstractExtension {
         }
     }
     _drawPathCircle(x, y, p, index) {
-        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 5, 'svg-path');
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5, 'svg-path');
         let circlePos = { x: x, y: y };
         const items = [];
         const pidx = this._pathdata.indexOf(p);

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

@@ -109,6 +109,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         this._treeDiv = document.createElement('div');
+        this._treeDiv.style.userSelect = 'none';
         this.shadowRoot.appendChild(this._treeDiv);
         this._treeDiv.addEventListener('click', this._clickElement.bind(this));
     }

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

@@ -53,15 +53,19 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         display: flex;
         position: sticky;
         right: 0;
-        padding-right: 4px;
+        padding-right: 2px;
         align-items: center;
         gap: 2px;
         background: #ffffffc9;
-        width: 70px;
+        width: 42px;
         justify-content: flex-end;
         background: white;
       }
 
+      .cmd > img {
+        width: 10px;
+      }
+
       table.fancytree-ext-table tbody tr.fancytree-selected {
         background-color: #bebebe;
       }
@@ -168,16 +172,16 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                         node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
                         let d = document.createElement("div");
                         d.className = "cmd";
-                        let img = document.createElement('img');
-                        this._showHideAtDesignTimeState(img, designItem);
-                        img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
-                        img.title = 'hide in designer';
-                        d.appendChild(img);
                         let imgL = document.createElement('img');
                         this._showLockAtDesignTimeState(imgL, designItem);
                         imgL.onclick = () => this._switchLockAtDesignTimeState(imgL, designItem);
                         imgL.title = 'lock';
                         d.appendChild(imgL);
+                        let img = document.createElement('img');
+                        this._showHideAtDesignTimeState(img, designItem);
+                        img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
+                        img.title = 'hide in designer';
+                        d.appendChild(img);
                         let imgH = document.createElement('img');
                         this._showHideAtRunTimeState(imgH, designItem);
                         imgH.onclick = () => this._switchHideAtRunTimeState(imgH, designItem);

package/dist/index.d.ts

@@ -55,8 +55,6 @@ export type { IHtmlParserService } from "./elements/services/htmlParserService/I
 export type { IIntializationService } from "./elements/services/initializationService/IIntializationService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
-export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
-export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export type { IModelCommandService } from "./elements/services/modelCommandService/IModelCommandService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
@@ -132,8 +130,6 @@ export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/IframeExtension.js";
-export * from "./elements/widgets/designerView/extensions/IframeExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
@@ -152,6 +148,10 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.js";
 export type { IContextMenuExtension, ContextmenuInitiator } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";

package/dist/index.js

@@ -33,7 +33,6 @@ export * from "./elements/services/htmlWriterService/LitTsElementWriterService.j
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
-export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
@@ -92,8 +91,6 @@ export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/IframeExtension.js";
-export * from "./elements/widgets/designerView/extensions/IframeExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
@@ -112,6 +109,10 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,12 +13,13 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.5.0",
+    "@node-projects/base-custom-webcomponent": "^0.5.3",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@papyrs/stylo": "^0.0.8",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.13",
     "@types/jquery.fancytree": "0.0.7",
@@ -26,10 +27,10 @@
     "codemirror": "^5.65.1",
     "esprima-next": "^5.8.1",
     "html2canvas": "*",
-    "jest": "^27.4.7",
+    "jest": "^27.5.1",
     "jquery": "^3.6.0",
     "jquery.fancytree": "^2.38.1",
-    "monaco-editor": "^0.31.1",
+    "monaco-editor": "^0.32.1",
     "ts-jest": "^27.1.3",
     "typescript": "^4.5.5",
     "typescript-lit-html-plugin": "^0.9.0"