@node-projects/web-component-designer 0.0.17 → 0.0.19

package/dist/elements/documentContainer.js

@@ -12,6 +12,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this._tabControl = new DesignerTabControl();
         div.appendChild(this._tabControl);
         this.designerView = new DesignerView();
+        this.designerView.setAttribute('exportparts', 'canvas');
         this.designerView.title = 'Designer';
         this._tabControl.appendChild(this.designerView);
         this.designerView.initialize(this._serviceContainer);

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

@@ -44,6 +44,7 @@ export declare class DesignItem implements IDesignItem {
     get lockAtDesignTime(): boolean;
     set lockAtDesignTime(value: boolean);
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
+    updateChildrenFromNodesChildren(): void;
     constructor(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
     openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
     getOrCreateDesignItem(node: Node): IDesignItem;

package/dist/elements/item/DesignItem.js

@@ -93,6 +93,7 @@ export class DesignItem {
         this._childArray = [];
         DomHelper.removeAllChildnodes(this.element);
     }
+    //abstract text content to own property. so only chnage via designer api will use it.
     get hasContent() {
         return this.nodeType == NodeType.TextNode || (this._childArray.length === 0 && this.content !== null);
     }
@@ -154,37 +155,45 @@ export class DesignItem {
     }
     static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
         let designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
-        for (let a of designItem.element.attributes) {
-            if (a.name !== 'style') {
-                designItem.attributes.set(a.name, a.value);
-                if (a.name === hideAtDesignTimeAttributeName)
-                    designItem._hideAtDesignTime = true;
-                if (a.name === hideAtRunTimeAttributeName)
-                    designItem._hideAtRunTime = true;
-                if (a.name === lockAtDesignTimeAttributeName)
-                    designItem._lockAtDesignTime = true;
+        if (designItem.nodeType == NodeType.Element) {
+            for (let a of designItem.element.attributes) {
+                if (a.name !== 'style') {
+                    designItem.attributes.set(a.name, a.value);
+                    if (a.name === hideAtDesignTimeAttributeName)
+                        designItem._hideAtDesignTime = true;
+                    if (a.name === hideAtRunTimeAttributeName)
+                        designItem._hideAtRunTime = true;
+                    if (a.name === lockAtDesignTimeAttributeName)
+                        designItem._lockAtDesignTime = true;
+                }
+                if (node instanceof HTMLElement || node instanceof SVGElement) {
+                    for (let s of node.style) {
+                        let val = node.style[s];
+                        if (val && typeof val === 'string')
+                            designItem.styles.set(s, node.style[s]);
+                    }
+                    if (!designItem._lockAtDesignTime)
+                        node.style.pointerEvents = 'auto';
+                    else
+                        node.style.pointerEvents = 'none';
+                    //node.style.cursor = 'pointer';
+                }
+                node.draggable = false; //even if it should be true, for better designer exp.
             }
         }
-        if (node instanceof HTMLElement || node instanceof SVGElement) {
-            for (let s of node.style) {
-                let val = node.style[s];
-                if (val && typeof val === 'string')
-                    designItem.styles.set(s, node.style[s]);
+        designItem.updateChildrenFromNodesChildren();
+        return 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));
             }
-            if (!designItem._lockAtDesignTime)
-                node.style.pointerEvents = 'auto';
-            else
-                node.style.pointerEvents = 'none';
-            //node.style.cursor = 'pointer';
         }
-        node.draggable = false; //even if it should be true, for better designer exp.
-        if (designItem.element.children.length === 0)
-            designItem.content = designItem.element.textContent;
-        else {
-            for (const c of designItem.element.children)
-                designItem._childArray.push(DesignItem.createDesignItemFromInstance(c, serviceContainer, instanceServiceContainer));
-        }
-        return designItem;
     }
     openGroup(title, affectedItems) {
         return this.instanceServiceContainer.undoService.openGroup(title, affectedItems);

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

@@ -23,6 +23,7 @@ export interface IDesignItem {
     removeChild(designItem: IDesignItem): any;
     remove(): any;
     clearChildren(): any;
+    updateChildrenFromNodesChildren(): any;
     readonly hasContent: boolean;
     content: string;
     readonly node: Node;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -41,6 +41,9 @@ 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';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -58,6 +61,8 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
     serviceContainer.register("bindingService", new PolymerBindingsService());
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
+    serviceContainer.register("prepareElementsForDesignerService", new PrepareElementsForDesignerService());
+    serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider()
@@ -87,6 +92,9 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
         new AltToEnterContainerExtensionProvider()
     ]);
+    serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [
+        new EditTextExtensionProvider()
+    ]);
     serviceContainer.designerTools.set(NamedTools.Pointer, new PointerTool());
     serviceContainer.designerTools.set(NamedTools.DrawSelection, new RectangleSelectorTool());
     serviceContainer.designerTools.set(NamedTools.DrawPath, new DrawPathTool());

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

@@ -18,6 +18,8 @@ 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';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -30,6 +32,8 @@ interface ServiceNameMap {
     "intializationService": IIntializationService;
     "bindingService": IBindingService;
     "elementAtPointService": IElementAtPointService;
+    "prepareElementsForDesignerService": IPrepareElementsForDesignerService;
+    "dragDropService": IDragDropService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -51,5 +55,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get htmlParserService(): IHtmlParserService;
     get intializationService(): IIntializationService;
     get elementAtPointService(): IElementAtPointService;
+    get prepareElementsForDesignerService(): IPrepareElementsForDesignerService;
+    get dragDropService(): IDragDropService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -46,4 +46,10 @@ 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/dragDropService/DragDropService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignerView } from "../../widgets/designerView/IDesignerView.js";
+import { IDragDropService } from "./IDragDropService.js";
+export declare class DragDropService implements IDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerView: IDesignerView, event: DragEvent): void;
+}

package/dist/elements/services/dragDropService/DragDropService.js

@@ -0,0 +1,28 @@
+import { DesignItem } from '../../item/DesignItem';
+import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
+export class DragDropService {
+    dragOver(event) {
+        if (event.dataTransfer.items[0].type.startsWith('image/'))
+            return 'copy';
+        return 'none';
+    }
+    drop(designerView, event) {
+        if (event.dataTransfer.files[0].type.startsWith('image/')) {
+            let reader = new FileReader();
+            reader.onloadend = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                const di = DesignItem.createDesignItemFromInstance(img, designerView.serviceContainer, designerView.instanceServiceContainer);
+                let grp = di.openGroup("Insert");
+                di.setStyle('position', 'absolute');
+                const targetRect = event.target.getBoundingClientRect();
+                di.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
+                di.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
+                designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, di));
+                grp.commit();
+                requestAnimationFrame(() => designerView.instanceServiceContainer.selectionService.setSelectedElements([di]));
+            };
+            reader.readAsDataURL(event.dataTransfer.files[0]);
+        }
+    }
+}

package/dist/elements/services/dragDropService/IDragDropService.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerView } from "../../widgets/designerView/IDesignerView.js";
+export interface IDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerView: IDesignerView, event: DragEvent): any;
+}

package/dist/elements/services/instanceService/IPrepareElementsForDesignerService.d.ts

@@ -0,0 +1,4 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+export interface IPrepareElementsForDesignerService {
+    prepareElementsForDesigner(designItem: IDesignItem): any;
+}

package/dist/elements/services/instanceService/PrepareElementsForDesignerService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IPrepareElementsForDesignerService } from "./IPrepareElementsForDesignerService.js";
+export declare class PrepareElementsForDesignerService implements IPrepareElementsForDesignerService {
+    prepareElementsForDesigner(designItem: IDesignItem): void;
+    private _prepareElementsForDesigner;
+}

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

@@ -0,0 +1,23 @@
+export class PrepareElementsForDesignerService {
+    prepareElementsForDesigner(designItem) {
+        this._prepareElementsForDesigner([designItem.element]);
+    }
+    _prepareElementsForDesigner(elements) {
+        for (let el of elements) {
+            if (el.shadowRoot) {
+                this._prepareElementsForDesigner((el.shadowRoot).querySelectorAll('*'));
+            }
+            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/placementService/GridPlacementService.js

@@ -4,8 +4,8 @@ export class GridPlacementService {
     leaveContainer(container, items) {
     }
     serviceForContainer(container) {
-        /*if ((<HTMLElement>container.element).style.display == 'grid' || (<HTMLElement>container.element).style.display == 'inline-grid')
-          return true;*/
+        if (container.element.style.display == 'grid' || container.element.style.display == 'inline-grid')
+            return true;
         return false;
     }
     canEnter(container, items) {

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

@@ -13,6 +13,9 @@ export class InsertAction {
     }
     do() {
         this.designItem.insertChild(this.newItem, this.index);
+        const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
+        if (prepService)
+            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));
     }
     mergeWith(other) {
         return false;

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

@@ -20,6 +20,7 @@ export interface IDesignerView extends IPlacementView, IUiCommandHandler {
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;
     readonly alignOnSnap: boolean;
+    eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getDesignerMousepoint(event: MouseEvent, target: Element, startPoint?: IDesignerMousePoint): IDesignerMousePoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;

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

@@ -25,6 +25,7 @@ export declare class DesignerView extends BaseCustomWebComponentLazyAppend imple
     snapLines: Snaplines;
     overlayLayer: OverlayLayerView;
     rootDesignItem: IDesignItem;
+    eatEvents: Element;
     private _zoomFactor;
     private _canvas;
     private _canvasContainer;
@@ -39,6 +40,7 @@ export declare class DesignerView extends BaseCustomWebComponentLazyAppend imple
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
+    private _onDblClickBound;
     constructor();
     get designerWidth(): string;
     set designerWidth(value: string);
@@ -60,14 +62,14 @@ export declare class DesignerView extends BaseCustomWebComponentLazyAppend imple
     parseHTML(html: string): Promise<void>;
     setDesignItems(designItems: IDesignItem[]): void;
     private _addDesignItems;
-    private _removeDraggableOnImages;
-    private _removeDraggableOnImagesInner;
     private _onDragEnter;
+    private _onDragLeave;
     private _onDragOver;
     private _onDrop;
     private _onWheel;
     private _onContextMenu;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
+    private _onDblClick;
     private onKeyUp;
     private onKeyDown;
     getDesignerMousepoint(event: MouseEvent, target: Element, startPoint?: IDesignerMousePoint): IDesignerMousePoint;

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

@@ -56,6 +56,7 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
         this.extensionManager = new ExtensionManager(this);
         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;
@@ -230,10 +231,12 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
             this._outercanvas2.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
             this._outercanvas2.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
             this._canvas.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
+            this._canvas.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
             this._canvas.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
             this._canvas.addEventListener(EventNames.Drop, event => this._onDrop(event));
-            this._canvas.addEventListener('keydown', this._onKeyDownBound, true);
-            this._canvas.addEventListener('keyup', this._onKeyUpBound, true);
+            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.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         }
     }
@@ -279,24 +282,17 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
                 intializationService.init(di);
         }
         this.snapLines.clearSnaplines();
-        requestAnimationFrame(() => this._removeDraggableOnImages());
-    }
-    _removeDraggableOnImages() {
-        this._removeDraggableOnImagesInner(this.rootDesignItem.element.querySelectorAll('*'));
-    }
-    _removeDraggableOnImagesInner(elements) {
-        for (let e of elements) {
-            if (e.shadowRoot) {
-                this._removeDraggableOnImagesInner((e.shadowRoot).querySelectorAll('*'));
-            }
-            if (e.localName == 'img') {
-                e.draggable = false;
-            }
-        }
+        const prepService = this.serviceContainer.prepareElementsForDesignerService;
+        if (prepService)
+            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.rootDesignItem));
     }
     _onDragEnter(event) {
         event.preventDefault();
     }
+    _onDragLeave(event) {
+        event.preventDefault();
+        this._canvas.classList.remove('dragFileActive');
+    }
     _onDragOver(event) {
         event.preventDefault();
         /*if (this.alignOnSnap) {
@@ -306,21 +302,39 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
           let containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.rootDesignItem))
           containerService.finishPlace(this, this.rootDesignItem, this._initialPoint, currentPoint, this.instanceServiceContainer.selectionService.selectedElements);
         }*/
+        if (event.dataTransfer.types.length > 0 && event.dataTransfer.types[0] == 'Files') {
+            const ddService = this.serviceContainer.dragDropService;
+            if (ddService) {
+                const effect = ddService.dragOver(event);
+                event.dataTransfer.dropEffect = effect;
+                if (effect !== 'none')
+                    this._canvas.classList.add('dragFileActive');
+            }
+        }
     }
     async _onDrop(event) {
         event.preventDefault();
-        this._fillCalculationrects();
-        let transferData = event.dataTransfer.getData(dragDropFormatName);
-        let elementDefinition = JSON.parse(transferData);
-        let di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
-        let grp = di.openGroup("Insert");
-        di.setStyle('position', 'absolute');
-        const targetRect = event.target.getBoundingClientRect();
-        di.setStyle('top', event.offsetY + targetRect.top - this.containerBoundingRect.y + 'px');
-        di.setStyle('left', event.offsetX + targetRect.left - this.containerBoundingRect.x + 'px');
-        this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
-        grp.commit();
-        requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
+        this._canvas.classList.remove('dragFileActive');
+        if (event.dataTransfer.files.length > 0) {
+            const ddService = this.serviceContainer.dragDropService;
+            if (ddService) {
+                ddService.drop(this, event);
+            }
+        }
+        else {
+            this._fillCalculationrects();
+            let transferData = event.dataTransfer.getData(dragDropFormatName);
+            let elementDefinition = JSON.parse(transferData);
+            let di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
+            let grp = di.openGroup("Insert");
+            di.setStyle('position', 'absolute');
+            const targetRect = event.target.getBoundingClientRect();
+            di.setStyle('top', event.offsetY + targetRect.top - this.containerBoundingRect.y + 'px');
+            di.setStyle('left', event.offsetX + targetRect.left - this.containerBoundingRect.x + 'px');
+            this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
+            grp.commit();
+            requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
+        }
     }
     _onWheel(event) {
         if (event.ctrlKey) {
@@ -350,7 +364,13 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
         let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
         return ctxMnu;
     }
+    _onDblClick(event) {
+        event.preventDefault();
+        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick);
+    }
     onKeyUp(event) {
+        if (event.composedPath().indexOf(this.eatEvents) >= 0)
+            return;
         switch (event.key) {
             case 'ArrowUp':
                 //this._resetPointerEventsForClickThrough();
@@ -359,6 +379,8 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
         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 });
@@ -473,6 +495,8 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
     }
     _pointerEventHandler(event) {
         var _a, _b;
+        if (event.composedPath().indexOf(this.eatEvents) >= 0)
+            return;
         if (event.button == 2)
             return;
         let currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
@@ -540,6 +564,11 @@ DesignerView.style = css `
       transform-origin: 0 0;
     }
 
+    #canvas.dragFileActive {
+      outline: blue 4px solid;
+      outline-offset: -4px;
+    }
+
     node-projects-overlay-layer-view {
       box-sizing: border-box;
       width: 100%;
@@ -618,7 +647,7 @@ DesignerView.template = html `
             <div id="outercanvas2">
               <div id="canvasContainer">
                 <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
-                <div id="canvas" tabindex="0"></div>
+                <div id="canvas" part="canvas" tabindex="0"></div>
               </div>
             </div>
           </div>

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

@@ -0,0 +1,14 @@
+import { IDesignItem } from "../../../../item/IDesignItem.js";
+import { IDesignerView } from "../../IDesignerView.js";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+export declare class EditTextCkEditorExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerView, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+}

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

@@ -0,0 +1,42 @@
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+export class EditTextCkEditorExtension extends AbstractExtension {
+    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.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerView.eatEvents = this.extendedItem.element;
+        //@ts-ignore
+        BalloonEditor
+            .create(this.extendedItem.element)
+            .catch(error => {
+            console.error(error);
+        });
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        //this.designerView.disableKeyboardEvents = false;
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

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

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

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

@@ -0,0 +1,9 @@
+import { EditTextCkEditorExtension } from "./EditTextCkEditorExtension.js";
+export class EditTextCkEditorExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextCkEditorExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -0,0 +1,17 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+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: IDesignerView, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+    _formatSelection(type: string): void;
+}