@node-projects/web-component-designer 0.0.57 → 0.0.61

package/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: jogibear9988

package/dist/commandHandling/CommandType.d.ts

@@ -21,5 +21,8 @@ export declare enum CommandType {
     'distributeHorizontal' = "distributeHorizontaly",
     'distributeVertical' = "distributeVertical",
     'setTool' = "setTool",
+    'setStrokeColor' = "setStrokeColor",
+    'setFillBrush' = "setFillBrush",
+    'setStrokeThickness' = "setStrokeThickness",
     'screenshot' = "screenshot"
 }

package/dist/commandHandling/CommandType.js

@@ -22,5 +22,8 @@ export var CommandType;
     CommandType["distributeHorizontal"] = "distributeHorizontaly";
     CommandType["distributeVertical"] = "distributeVertical";
     CommandType["setTool"] = "setTool";
+    CommandType["setStrokeColor"] = "setStrokeColor";
+    CommandType["setFillBrush"] = "setFillBrush";
+    CommandType["setStrokeThickness"] = "setStrokeThickness";
     CommandType["screenshot"] = "screenshot";
 })(CommandType || (CommandType = {}));

package/dist/elements/documentContainer.d.ts

@@ -16,8 +16,13 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     private _content;
     private _tabControl;
     private _selectionPosition;
+    private _splitDiv;
+    private _designerDiv;
+    private _codeDiv;
+    private refreshInSplitViewDebounced;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer, content?: string);
+    refreshInSplitView(): void;
     dispose(): void;
     executeCommand(command: IUiCommand): void;
     canExecuteCommand(command: IUiCommand): boolean;

package/dist/elements/documentContainer.js

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css } from "@node-projects/base-custom-webcomponent";
+import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
 import { DesignerTabControl } from "./controls/DesignerTabControl";
 import { DesignerView } from "./widgets/designerView/designerView";
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
@@ -10,6 +10,10 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     _content = '';
     _tabControl;
     _selectionPosition;
+    _splitDiv;
+    _designerDiv;
+    _codeDiv;
+    refreshInSplitViewDebounced;
     static get style() {
         return css `
       div {
@@ -20,10 +24,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
       node-projects-designer-view {
         height: 100%;
         /*overflow: auto;*/
-      }`;
+      }
+      .split-div {
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+      }
+      `;
     }
     constructor(serviceContainer, content) {
         super();
+        this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
         this._serviceContainer = serviceContainer;
         if (content != null)
             this._content = content;
@@ -32,12 +42,26 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         div.appendChild(this._tabControl);
         this.designerView = new DesignerView();
         this.designerView.setAttribute('exportparts', 'canvas');
-        this.designerView.title = 'Designer';
-        this._tabControl.appendChild(this.designerView);
+        this._designerDiv = document.createElement("div");
+        this._designerDiv.title = 'Designer';
+        this._designerDiv.appendChild(this.designerView);
+        this._tabControl.appendChild(this._designerDiv);
         this.designerView.initialize(this._serviceContainer);
         this.codeView = new serviceContainer.config.codeViewWidget();
-        this.codeView.title = 'Code';
-        this._tabControl.appendChild(this.codeView);
+        this._codeDiv = document.createElement("div");
+        this._codeDiv.title = 'Code';
+        this._codeDiv.appendChild(this.codeView);
+        this.codeView.onTextChanged.on(text => {
+            if (this._tabControl.selectedIndex === 2) {
+                this._content = text;
+                this.refreshInSplitViewDebounced();
+            }
+        });
+        this._tabControl.appendChild(this._codeDiv);
+        this._splitDiv = document.createElement("div");
+        this._splitDiv.title = 'Split';
+        this._splitDiv.className = 'split-div';
+        this._tabControl.appendChild(this._splitDiv);
         this.demoView = new serviceContainer.config.demoViewWidget();
         this.demoView.title = 'Preview';
         this._tabControl.appendChild(this.demoView);
@@ -46,6 +70,9 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this._tabControl.selectedIndex = 0;
         });
     }
+    refreshInSplitView() {
+        this.designerView.parseHTML(this._content);
+    }
     dispose() {
         this.codeView.dispose();
     }
@@ -69,7 +96,9 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this.designerView.parseHTML(this._content);
             else if (this._tabControl.selectedIndex === 1)
                 this.codeView.update(this._content);
-            else if (this._tabControl.selectedIndex === 2)
+            else if (this._tabControl.selectedIndex === 2) {
+            }
+            else if (this._tabControl.selectedIndex === 3)
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
         }
     }
@@ -91,11 +120,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this._content = this.designerView.getHTML(designItemsAssignmentList);
                 this._selectionPosition = designItemsAssignmentList.get(primarySelection);
             }
-            else if (i.oldIndex === 1)
+            else if (i.oldIndex === 1) {
                 this._content = this.codeView.getText();
-            if (i.newIndex === 0)
+            }
+            else if (i.oldIndex === 2) {
+                this._designerDiv.appendChild(this.designerView);
+                this._codeDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 0 || i.newIndex === 2)
                 this.designerView.parseHTML(this._content);
-            else if (i.newIndex === 1) {
+            if (i.newIndex === 1 || i.newIndex === 2) {
                 this.codeView.update(this._content);
                 if (this._selectionPosition) {
                     this.codeView.setSelection(this._selectionPosition);
@@ -105,8 +139,13 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                     this.codeView.focusEditor();
                 }
             }
-            else if (i.newIndex === 2)
+            if (i.newIndex === 2) {
+                this._splitDiv.appendChild(this.designerView);
+                this._splitDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 3) {
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
+            }
         });
         if (this._content)
             this.content = this._content;

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

@@ -5,5 +5,5 @@ export declare class CssEntry {
 }
 export declare class CssAttributeParser {
     entries: CssEntry[];
-    parse(text: string): void;
+    parse(text: string, quoteType?: string): void;
 }

package/dist/elements/helper/CssAttributeParser.js

@@ -14,7 +14,7 @@ export class CssEntry {
 }
 export class CssAttributeParser {
     entries = [];
-    parse(text) {
+    parse(text, quoteType = '\'') {
         this.entries = [];
         let name = '';
         let value = '';
@@ -38,7 +38,7 @@ export class CssAttributeParser {
                     token = Token.Name;
                 }
                 else {
-                    if (c === '\'') {
+                    if (c === quoteType) {
                         token = Token.InQuote;
                     }
                     value += c;
@@ -51,10 +51,13 @@ export class CssAttributeParser {
                     c = text[n];
                     value += c;
                 }
-                if (c === '\'') {
+                else if (c === quoteType) {
                     value += c;
                     token = Token.Value;
                 }
+                else {
+                    value += c;
+                }
             }
         }
         if (name.trim() !== '') {

package/dist/elements/helper/CssCombiner.js

@@ -1,6 +1,6 @@
 export class CssCombiner {
     static _helperElement = document.createElement('div');
-    //todo: inset, 
+    //todo: inset, flex flow, place content...
     static combine(styles, globalStyles) {
         let e = CssCombiner._helperElement;
         e.setAttribute('style', '');

package/dist/elements/helper/GridHelper.js

@@ -1,8 +1,12 @@
 export function CalculateGridInformation(designItem) {
+    //todo:
+    //same name should combine columns/rows
     let itemRect = designItem.element.getBoundingClientRect();
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
+    const paddingLeft = Number.parseFloat(computedStyle.paddingLeft);
+    const paddingTop = Number.parseFloat(computedStyle.paddingTop);
     let y = 0;
     let xGap = 0;
     let yGap = 0;
@@ -81,12 +85,12 @@ export function CalculateGridInformation(designItem) {
         for (let yIdx = 0; yIdx < columns.length; yIdx++) {
             const c = columns[yIdx];
             if (x > 0 && xGap) {
-                retVal.gaps.push({ x: x + xOffset, y: y + yOffset, width: xGap, height: currY });
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY });
                 x += xGap;
             }
             const currX = Number.parseFloat(c.replace('px', ''));
             if (y > 0 && yGap) {
-                retVal.gaps.push({ x: x + xOffset, y: y + yOffset - yGap, width: currX, height: yGap });
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap });
             }
             let name = null;
             if (areas) {
@@ -95,7 +99,7 @@ export function CalculateGridInformation(designItem) {
                     name = nm;
                 }
             }
-            const cell = { x: x + xOffset, y: y + yOffset, width: currX, height: currY, name: name };
+            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name };
             cellList.push(cell);
             x += currX;
             cl++;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -45,6 +45,9 @@ import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService';
+import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider';
+import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons';
+import { DemoProviderService } from './demoProviderService/DemoProviderService';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -65,6 +68,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
+    serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider()
@@ -106,6 +110,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool());
     serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool());
     serviceContainer.designerTools.set(NamedTools.Text, new TextTool());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new ZMoveContextMenu(),

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

@@ -5,6 +5,7 @@ export declare class GlobalContext {
     private _serviceContainer;
     private _tool;
     private _strokeColor;
+    private _strokeThickness;
     private _fillBrush;
     constructor(serviceContainer: ServiceContainer);
     set tool(tool: ITool);
@@ -14,6 +15,9 @@ export declare class GlobalContext {
     set strokeColor(strokeColor: string);
     get strokeColor(): string;
     readonly onStrokeColorChanged: TypedEvent<PropertyChangedArgs<string>>;
+    set strokeThickness(strokeThickness: string);
+    get strokeThickness(): string;
+    readonly onStrokeThicknessChanged: TypedEvent<PropertyChangedArgs<string>>;
     set fillBrush(fillBrush: string);
     get fillBrush(): string;
     readonly onFillBrushChanged: TypedEvent<PropertyChangedArgs<string>>;

package/dist/elements/services/GlobalContext.js

@@ -5,6 +5,7 @@ export class GlobalContext {
     _serviceContainer;
     _tool;
     _strokeColor = 'black';
+    _strokeThickness = '3';
     _fillBrush = 'transparent';
     constructor(serviceContainer) {
         this._serviceContainer = serviceContainer;
@@ -36,6 +37,17 @@ export class GlobalContext {
         return this._strokeColor;
     }
     onStrokeColorChanged = new TypedEvent();
+    set strokeThickness(strokeThickness) {
+        if (this._strokeThickness !== strokeThickness) {
+            const oldStrokeThickness = this._strokeThickness;
+            this._strokeThickness = strokeThickness;
+            this.onStrokeThicknessChanged.emit(new PropertyChangedArgs(strokeThickness, oldStrokeThickness));
+        }
+    }
+    get strokeThickness() {
+        return this._strokeThickness;
+    }
+    onStrokeThicknessChanged = new TypedEvent();
     set fillBrush(fillBrush) {
         this._fillBrush = fillBrush;
         if (this._fillBrush !== fillBrush) {

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

@@ -23,6 +23,8 @@ import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
+import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/IDesignViewConfigButtonsProvider.js";
+import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -39,6 +41,7 @@ interface ServiceNameMap {
     "dragDropService": IDragDropService;
     "copyPasteService": ICopyPasteService;
     "modelCommandService": IModelCommandService;
+    "demoProviderService": IDemoProviderService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -46,6 +49,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
@@ -65,5 +69,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get dragDropService(): IDragDropService;
     get copyPasteService(): ICopyPasteService;
     get modelCommandService(): IModelCommandService;
+    get demoProviderService(): IDemoProviderService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -8,6 +8,7 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    designViewConfigButtons = [];
     designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
@@ -57,4 +58,7 @@ export class ServiceContainer extends BaseServiceContainer {
     get modelCommandService() {
         return this.getLastService('modelCommandService');
     }
+    get demoProviderService() {
+        return this.getLastService('demoProviderService');
+    }
 }

package/dist/elements/services/demoProviderService/DemoProviderService.d.ts

@@ -0,0 +1,6 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class DemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -0,0 +1,28 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
+export class DemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            for (let i of instanceServiceContainer.designContext.imports) {
+                doc.write("import '" + i + "';");
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<body style="display:none">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.d.ts

@@ -0,0 +1,5 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/placementService/GridPlacementService.js

@@ -1,5 +1,6 @@
 import { CalculateGridInformation } from '../../helper/GridHelper.js';
 import { pointInRect } from '../../helper/Helper.js';
+import { DefaultPlacementService } from './DefaultPlacementService';
 export class GridPlacementService {
     enterContainer(container, items) {
         for (let i of items) {
@@ -35,7 +36,8 @@ export class GridPlacementService {
         return container.element.getBoundingClientRect();
     }
     placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        return null;
+        const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService);
+        return defaultPlacementService.placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items);
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         const gridInformation = CalculateGridInformation(container);
@@ -49,14 +51,23 @@ export class GridPlacementService {
                 column = 0;
                 for (let cell of cellRow) {
                     if (pointInRect(pos, cell)) {
-                        items[0].element.style.gridColumn = column + 1;
-                        items[0].element.style.gridRow = row + 1;
+                        if (cell.name) {
+                            items[0].element.style.gridColumn = '';
+                            items[0].element.style.gridRow = '';
+                            items[0].element.style.gridArea = cell.name;
+                        }
+                        else {
+                            items[0].element.style.gridArea = '';
+                            items[0].element.style.gridColumn = column + 1;
+                            items[0].element.style.gridRow = row + 1;
+                        }
                     }
                     column++;
                 }
                 row++;
             }
         }
+        placementView.extensionManager.refreshAllExtensions([container]);
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         const gridInformation = CalculateGridInformation(container);
@@ -68,12 +79,21 @@ export class GridPlacementService {
             column = 0;
             for (let cell of cellRow) {
                 if (pointInRect(pos, cell)) {
-                    items[0].setStyle('grid-column', column + 1);
-                    items[0].setStyle('grid-row', row + 1);
+                    if (cell.name) {
+                        items[0].removeStyle('grid-column');
+                        items[0].removeStyle('grid-row');
+                        items[0].setStyle('grid-area', cell.name);
+                    }
+                    else {
+                        items[0].removeStyle('grid-area');
+                        items[0].setStyle('grid-column', column + 1);
+                        items[0].setStyle('grid-row', row + 1);
+                    }
                 }
                 column++;
             }
             row++;
         }
+        placementView.extensionManager.refreshAllExtensions([container]);
     }
 }

package/dist/elements/widgets/codeView/ICodeView.d.ts

@@ -1,9 +1,11 @@
 import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
 import { IDisposable } from "../../../interfaces/IDisposable";
 import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export interface ICodeView extends IUiCommandHandler, IDisposable {
     update(code: string): any;
     getText(): any;
     setSelection(position: IStringPosition): any;
     focusEditor(): any;
+    onTextChanged: TypedEvent<string>;
 }

package/dist/elements/widgets/codeView/code-view-ace.d.ts

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -7,6 +7,7 @@ export declare class CodeViewAce extends BaseCustomWebComponentLazyAppend implem
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _aceEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

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

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 class CodeViewAceCompleter {
     getCompletions(editor, session, pos, prefix, callback) {
@@ -18,6 +18,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _aceEditor;
     _editor;
     static style = css `
@@ -111,6 +112,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
         });
         let config = { attributes: true, childList: true, characterData: true };
         observer.observe(this.shadowRoot.querySelector('.ace_content'), config);
+        this._aceEditor.on('change', () => this.onTextChanged.emit(this._aceEditor.getValue()));
     }
     update(code) {
         this._aceEditor.setValue(code);

package/dist/elements/widgets/codeView/code-view-code-mirror.d.ts

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -7,6 +7,7 @@ export declare class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _codeMirrorEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

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

@@ -1,9 +1,10 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _codeMirrorEditor;
     _editor;
     static style = css `
@@ -82,6 +83,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
         //@ts-ignore
         this._codeMirrorEditor = CodeMirror(this._editor, config);
         this._codeMirrorEditor.setSize('100%', '100%');
+        this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue()));
     }
     update(code) {
         this._codeMirrorEditor.setValue(code);

package/dist/elements/widgets/codeView/code-view-monaco.d.ts

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IActivateable } from '../../../interfaces/IActivateable';
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
@@ -9,6 +9,7 @@ export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend imp
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _monacoEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

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

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     dispose() {
@@ -7,6 +7,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _monacoEditor;
     _editor;
     static style = css `
@@ -69,6 +70,15 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 }
             });
             this._monacoEditor.layout();
+            let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
+                () => this.onTextChanged.emit(this._monacoEditor.getValue());
+            });
+            this._monacoEditor.onDidChangeModel(e => {
+                changeContentListener.dispose();
+                changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
+                    () => this.onTextChanged.emit(this._monacoEditor.getValue());
+                });
+            });
         });
     }
     focusEditor() {

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

@@ -7,5 +7,5 @@ export declare class DemoView extends BaseCustomWebComponentLazyAppend implement
     private _loading;
     static readonly style: CSSStyleSheet;
     constructor();
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): void;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
 }