@node-projects/web-component-designer 0.0.75 → 0.0.79

package/README.md

@@ -1,6 +1,6 @@
 # web-component-designer
 
-## Caution - this is a preview Version, a RC is planed for Q3/2021
+## Caution - this is a preview Version, a RC is planed for January 2022
 
 A HTML WebComponent for Designing Webcomponents and HTML Pages.
 
@@ -81,4 +81,4 @@ Your addition to your index.html should look like this:
 The Library uses Images from the Chrome Dev Tools, see
 https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src
 and
-https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE
+https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE

package/dist/elements/documentContainer.d.ts

@@ -13,6 +13,9 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     codeView: ICodeView & HTMLElement;
     demoView: IDemoView & HTMLElement;
     additionalData: any;
+    private _additionalStyle;
+    set additionalStyleString(style: string);
+    get additionalStyleString(): string;
     private _serviceContainer;
     private _content;
     private _tabControl;

package/dist/elements/documentContainer.js

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
+import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce } from "@node-projects/base-custom-webcomponent";
 import { DesignerTabControl } from "./controls/DesignerTabControl";
 import { DesignerView } from "./widgets/designerView/designerView";
 import { SimpleSplitView } from './controls/SimpleSplitView';
@@ -7,6 +7,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     codeView;
     demoView;
     additionalData;
+    _additionalStyle;
+    set additionalStyleString(style) {
+        this._additionalStyle = style;
+        this.designerView.additionalStyle = cssFromString(style);
+    }
+    ;
+    get additionalStyleString() {
+        return this._additionalStyle;
+    }
+    ;
     _serviceContainer;
     _content = '';
     _tabControl;
@@ -136,7 +146,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             else if (this._tabControl.selectedIndex === 2) {
             }
             else if (this._tabControl.selectedIndex === 3)
-                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
+                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
         }
     }
     get content() {
@@ -181,7 +191,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this._splitDiv.appendChild(this.codeView);
             }
             if (i.newIndex === 3) {
-                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
+                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
             }
         });
         if (this._content)

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

@@ -1,2 +1,9 @@
 export declare function newElementFromString(text: any): Element;
+export declare enum ElementDisplayType {
+    none = 0,
+    inline = 1,
+    block = 2
+}
 export declare function isInline(element: HTMLElement): boolean;
+export declare function getElementDisplaytype(element: HTMLElement): ElementDisplayType;
+export declare function isEmptyTextNode(node: Node): boolean;

package/dist/elements/helper/ElementHelper.js

@@ -4,6 +4,19 @@ export function newElementFromString(text) {
     const fragment = range.createContextualFragment(text);
     return fragment.firstChild;
 }
+export var ElementDisplayType;
+(function (ElementDisplayType) {
+    ElementDisplayType[ElementDisplayType["none"] = 0] = "none";
+    ElementDisplayType[ElementDisplayType["inline"] = 1] = "inline";
+    ElementDisplayType[ElementDisplayType["block"] = 2] = "block";
+})(ElementDisplayType || (ElementDisplayType = {}));
 export function isInline(element) {
     return element != null && window.getComputedStyle(element).display.startsWith('inline');
 }
+export function getElementDisplaytype(element) {
+    const display = window.getComputedStyle(element).display;
+    return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;
+}
+export function isEmptyTextNode(node) {
+    return node.textContent.trim() == '' && node.textContent.indexOf('\xa0' /* &nbsp; */) < 0;
+}

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

@@ -3,6 +3,7 @@ export declare class IndentedTextWriter {
     readonly indent: number;
     level: number;
     get position(): number;
+    isLastCharNewline(): boolean;
     levelRaise(): void;
     levelShrink(): void;
     write(text: string): void;

package/dist/elements/helper/IndentedTextWriter.js

@@ -5,6 +5,9 @@ export class IndentedTextWriter {
     get position() {
         return this._textHolder.length;
     }
+    isLastCharNewline() {
+        return this._textHolder[this._textHolder.length - 1] === '\n';
+    }
     levelRaise() {
         this.level++;
     }

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

@@ -4,6 +4,7 @@ export declare class BaseServiceContainer<NameMap> {
     getLastService<K extends keyof NameMap>(service: K): NameMap[K];
     getServices<K extends keyof NameMap>(service: K): NameMap[K][];
     register<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
+    registerMultiple<K extends keyof NameMap>(names: K[], service: NameMap[K]): void;
     forSomeServicesTillResult<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): Y;
     getLastServiceWhere<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): NameMap[K];
 }

package/dist/elements/services/BaseServiceContainer.js

@@ -14,6 +14,13 @@ export class BaseServiceContainer {
             this._services.set(name, []);
         this._services.get(name).push(service);
     }
+    registerMultiple(names, service) {
+        for (const name of names) {
+            if (!this._services.has(name))
+                this._services.set(name, []);
+            this._services.get(name).push(service);
+        }
+    }
     forSomeServicesTillResult(service, callback) {
         let services = this.getServices(service);
         if (services == null) {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -4,7 +4,6 @@ import { LitElementPropertiesService } from './propertiesService/services/LitEle
 import { NativeElementsPropertiesService } from './propertiesService/services/NativeElementsPropertiesService.js';
 import { DefaultInstanceService } from './instanceService/DefaultInstanceService.js';
 import { DefaultEditorTypesService } from './propertiesService/DefaultEditorTypesService.js';
-import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js';
 import { BaseCustomWebComponentPropertiesService } from './propertiesService/services/BaseCustomWebComponentPropertiesService.js';
 import { DefaultPlacementService } from './placementService/DefaultPlacementService.js';
 import { DefaultHtmlParserService } from './htmlParserService/DefaultHtmlParserService.js';
@@ -52,6 +51,7 @@ import { DemoProviderService } from './demoProviderService/DemoProviderService';
 import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
 import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
+import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());

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

@@ -67,7 +67,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get elementsServices(): IElementsService[];
     get instanceServices(): IInstanceService[];
     get editorTypesServices(): IEditorTypesService[];
-    get htmlWriterServices(): IHtmlWriterService[];
+    get htmlWriterService(): IHtmlWriterService;
     get htmlParserService(): IHtmlParserService;
     get intializationService(): IIntializationService;
     get elementAtPointService(): IElementAtPointService;

package/dist/elements/services/ServiceContainer.js

@@ -40,8 +40,8 @@ export class ServiceContainer extends BaseServiceContainer {
     get editorTypesServices() {
         return this.getServices('editorTypesService');
     }
-    get htmlWriterServices() {
-        return this.getServices('htmlWriterService');
+    get htmlWriterService() {
+        return this.getLastService('htmlWriterService');
     }
     get htmlParserService() {
         return this.getLastService('htmlParserService');

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

@@ -2,5 +2,5 @@ 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>;
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
 }

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

@@ -1,6 +1,6 @@
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 export class DemoProviderService {
-    provideDemo(container, serviceContainer, instanceServiceContainer, code) {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code, style) {
         return new Promise(resolve => {
             const iframe = document.createElement('iframe');
             iframe.style.width = '100%';
@@ -21,7 +21,8 @@ export class DemoProviderService {
             }
             doc.write("document.body.style.display='';");
             doc.write('</script>');
-            doc.write('<body style="display:none">' + code + '</body>');
+            doc.write('<style>' + (style ?? '') + '</style>');
+            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
             doc.close();
         });
     }

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

@@ -1,5 +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;
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
 }

package/dist/elements/services/htmlWriterService/FormatingHtmlWriterService copy.d.ts

@@ -0,0 +1,22 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+declare enum ElementContainerType {
+    block = 0,
+    complex = 1
+}
+export declare class FormatingHtmlWriterService implements IHtmlWriterService {
+    private writeAttributes;
+    private writeStyles;
+    private _writeTextNode;
+    private _writeCommentNode;
+    private _writeElementNode;
+    private _writeDesignItemList;
+    private _writeNewlineAndIntend;
+    private _writeInternal;
+    getContainerType(element: HTMLElement): ElementContainerType;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+}
+export {};

package/dist/elements/services/htmlWriterService/FormatingHtmlWriterService copy.js

@@ -0,0 +1,125 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter';
+import { CssCombiner } from '../../helper/CssCombiner';
+import { NodeType } from '../../item/NodeType';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js';
+var ElementContainerType;
+(function (ElementContainerType) {
+    ElementContainerType[ElementContainerType["block"] = 0] = "block";
+    ElementContainerType[ElementContainerType["complex"] = 1] = "complex";
+})(ElementContainerType || (ElementContainerType = {}));
+const defaultDisplayNoneContainerDisplayType = ElementContainerType.complex;
+export class FormatingHtmlWriterService {
+    writeAttributes(writeContext, designItem) {
+        if (designItem.hasAttributes) {
+            for (const a of designItem.attributes) {
+                writeContext.indentedTextWriter.write(' ');
+                if (typeof a[1] === 'string') {
+                    if (a[1] === "")
+                        writeContext.indentedTextWriter.write(a[0]);
+                    else
+                        writeContext.indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
+                }
+                else if (!a[1])
+                    writeContext.indentedTextWriter.write(a[0]);
+                else {
+                }
+            }
+        }
+    }
+    writeStyles(writeContext, designItem) {
+        if (designItem.hasStyles) {
+            writeContext.indentedTextWriter.write(' style="');
+            let styles = designItem.styles;
+            if (writeContext.options.compressCssToShorthandProperties)
+                styles = CssCombiner.combine(styles);
+            for (const s of styles) {
+                if (s[0]) {
+                    writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                }
+            }
+            writeContext.indentedTextWriter.write('"');
+        }
+    }
+    _writeTextNode(writeContext, designItem) {
+        writeContext.lastElementDisplayType = ElementDisplayType.inline;
+        let content = DomConverter.normalizeContentValue(designItem.content).trim();
+        if (content) {
+            writeContext.indentedTextWriter.write(content);
+        }
+    }
+    _writeCommentNode(writeContext, designItem) {
+        writeContext.indentedTextWriter.write('<!--' + designItem.content + '-->');
+    }
+    _writeElementNode(writeContext, designItem) {
+        const currentElementDisplayType = getElementDisplaytype(designItem.element);
+        writeContext.lastElementDisplayType = currentElementDisplayType;
+        writeContext.indentedTextWriter.write('<' + designItem.name);
+        this.writeAttributes(writeContext, designItem);
+        this.writeStyles(writeContext, designItem);
+        writeContext.indentedTextWriter.write('>');
+        if (designItem.hasChildren) {
+            const children = designItem.children();
+            const contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
+            if (contentSingleTextNode) {
+                this._writeInternal(writeContext, designItem.firstChild);
+            }
+            else {
+                let previousContainerDisplayType = writeContext.containerDisplayType;
+                writeContext.containerDisplayType = this.getContainerType(designItem.element);
+                writeContext.indentedTextWriter.levelRaise();
+                this._writeDesignItemList(currentElementDisplayType, writeContext, children);
+                writeContext.indentedTextWriter.levelShrink();
+                writeContext.containerDisplayType = previousContainerDisplayType;
+            }
+        }
+        else if (designItem.hasContent) {
+            writeContext.indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+        }
+        if (!DomConverter.IsSelfClosingElement(designItem.name)) {
+            //write newline & intend ???
+            writeContext.indentedTextWriter.write('</' + designItem.name + '>');
+            if (currentElementDisplayType !== ElementDisplayType.none) {
+                writeContext.lastElementDisplayType = currentElementDisplayType;
+            }
+        }
+    }
+    _writeDesignItemList(currentElementDisplayType, writeContext, children) {
+        for (const c of children) {
+            if (writeContext.lastElementDisplayType == null) {
+                //first entry, do nothing
+            }
+            else if (writeContext.containerDisplayType === ElementContainerType.complex)
+                this._writeNewlineAndIntend(writeContext);
+            else if (writeContext.lastElementDisplayType !== ElementDisplayType.inline || currentElementDisplayType !== ElementDisplayType.inline)
+                this._writeNewlineAndIntend(writeContext);
+            this._writeInternal(writeContext, c);
+        }
+    }
+    _writeNewlineAndIntend(writeContext) {
+        writeContext.indentedTextWriter.writeNewline();
+        writeContext.indentedTextWriter.writeIndent();
+    }
+    _writeInternal(writeContext, designItem) {
+        const start = writeContext.indentedTextWriter.position;
+        if (designItem.nodeType === NodeType.TextNode)
+            this._writeTextNode(writeContext, designItem);
+        else if (designItem.nodeType === NodeType.Comment)
+            this._writeCommentNode(writeContext, designItem);
+        else if (designItem.nodeType === NodeType.Element)
+            this._writeElementNode(writeContext, designItem);
+        if (writeContext.designItemsAssignmentList) {
+            writeContext.designItemsAssignmentList.set(designItem, { start: start, length: writeContext.indentedTextWriter.position - start - 1 });
+        }
+    }
+    getContainerType(element) {
+        const display = window.getComputedStyle(element).display;
+        if (display === 'block' || display === "inline-block" || display == '')
+            return ElementContainerType.block;
+        return ElementContainerType.complex;
+    }
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+        const context = { indentedTextWriter, options, lastElementDisplayType: null, containerDisplayType: ElementContainerType.block, designItemsAssignmentList };
+        this._writeDesignItemList(ElementDisplayType.inline, context, designItems);
+    }
+}

package/dist/elements/services/htmlWriterService/FormatingHtmlWriterService.d.ts

@@ -0,0 +1,22 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+declare enum ElementContainerType {
+    block = 0,
+    complex = 1
+}
+export declare class FormatingHtmlWriterService implements IHtmlWriterService {
+    private writeAttributes;
+    private writeStyles;
+    private _writeTextNode;
+    private _writeCommentNode;
+    private _writeElementNode;
+    private _writeDesignItemList;
+    private _writeNewlineAndIntend;
+    private _writeInternal;
+    getContainerType(element: HTMLElement): ElementContainerType;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+}
+export {};

package/dist/elements/services/htmlWriterService/FormatingHtmlWriterService.js

@@ -0,0 +1,133 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter';
+import { CssCombiner } from '../../helper/CssCombiner';
+import { NodeType } from '../../item/NodeType';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js';
+var ElementContainerType;
+(function (ElementContainerType) {
+    ElementContainerType[ElementContainerType["block"] = 0] = "block";
+    ElementContainerType[ElementContainerType["complex"] = 1] = "complex";
+})(ElementContainerType || (ElementContainerType = {}));
+// const defaultDisplayNoneContainerDisplayType: ElementContainerType = ElementContainerType.complex;
+export class FormatingHtmlWriterService {
+    writeAttributes(writeContext, designItem) {
+        if (designItem.hasAttributes) {
+            for (const a of designItem.attributes) {
+                writeContext.indentedTextWriter.write(' ');
+                if (typeof a[1] === 'string') {
+                    if (a[1] === "")
+                        writeContext.indentedTextWriter.write(a[0]);
+                    else
+                        writeContext.indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
+                }
+                else if (!a[1])
+                    writeContext.indentedTextWriter.write(a[0]);
+                else {
+                }
+            }
+        }
+    }
+    writeStyles(writeContext, designItem) {
+        if (designItem.hasStyles) {
+            writeContext.indentedTextWriter.write(' style="');
+            let styles = designItem.styles;
+            if (writeContext.options.compressCssToShorthandProperties)
+                styles = CssCombiner.combine(styles);
+            for (const s of styles) {
+                if (s[0]) {
+                    writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                }
+            }
+            writeContext.indentedTextWriter.write('"');
+        }
+    }
+    _writeTextNode(writeContext, designItem) {
+        writeContext.lastElementDisplayType = ElementDisplayType.inline;
+        let content = DomConverter.normalizeContentValue(designItem.content).trim();
+        if (content) {
+            writeContext.indentedTextWriter.write(content);
+        }
+    }
+    _writeCommentNode(writeContext, designItem) {
+        writeContext.indentedTextWriter.write('<!--' + designItem.content + '-->');
+    }
+    _writeElementNode(writeContext, designItem) {
+        //    const cs = getComputedStyle(designItem.element);
+        //cs.whiteSpace === 'pre'
+        //isInPre
+        //is in inline?
+        const currentElementDisplayType = getElementDisplaytype(designItem.element);
+        writeContext.lastElementDisplayType = currentElementDisplayType;
+        writeContext.indentedTextWriter.write('<' + designItem.name);
+        this.writeAttributes(writeContext, designItem);
+        this.writeStyles(writeContext, designItem);
+        writeContext.indentedTextWriter.write('>');
+        let contentSingleTextNode = false;
+        if (designItem.hasChildren) {
+            const children = designItem.children();
+            contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
+            if (contentSingleTextNode) {
+                this._writeInternal(writeContext, designItem.firstChild);
+            }
+            else {
+                let previousContainerDisplayType = writeContext.containerDisplayType;
+                writeContext.containerDisplayType = this.getContainerType(designItem.element);
+                writeContext.indentedTextWriter.levelRaise();
+                this._writeDesignItemList(currentElementDisplayType, writeContext, children);
+                writeContext.indentedTextWriter.levelShrink();
+                writeContext.containerDisplayType = previousContainerDisplayType;
+            }
+        }
+        else if (designItem.hasContent) {
+            writeContext.indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+        }
+        if (!DomConverter.IsSelfClosingElement(designItem.name)) {
+            if (currentElementDisplayType === ElementDisplayType.block && designItem.hasChildren && !contentSingleTextNode) {
+                this._writeNewlineAndIntend(writeContext);
+            }
+            //write newline & intend ???
+            writeContext.indentedTextWriter.write('</' + designItem.name + '>');
+            if (currentElementDisplayType !== ElementDisplayType.none) {
+                writeContext.lastElementDisplayType = currentElementDisplayType;
+            }
+        }
+    }
+    _writeDesignItemList(currentElementDisplayType, writeContext, children) {
+        for (const c of children) {
+            if (writeContext.lastElementDisplayType == null) {
+                //first entry, do nothing
+            }
+            else if (writeContext.containerDisplayType === ElementContainerType.complex)
+                this._writeNewlineAndIntend(writeContext);
+            else if (writeContext.lastElementDisplayType !== ElementDisplayType.inline /*|| currentElementDisplayType !== ElementDisplayType.inline*/)
+                this._writeNewlineAndIntend(writeContext);
+            this._writeInternal(writeContext, c);
+        }
+    }
+    _writeNewlineAndIntend(writeContext) {
+        writeContext.indentedTextWriter.writeNewline();
+        writeContext.indentedTextWriter.writeIndent();
+    }
+    _writeInternal(writeContext, designItem) {
+        const start = writeContext.indentedTextWriter.position;
+        if (designItem.nodeType === NodeType.TextNode)
+            this._writeTextNode(writeContext, designItem);
+        else if (designItem.nodeType === NodeType.Comment)
+            this._writeCommentNode(writeContext, designItem);
+        else if (designItem.nodeType === NodeType.Element)
+            this._writeElementNode(writeContext, designItem);
+        if (writeContext.designItemsAssignmentList) {
+            writeContext.designItemsAssignmentList.set(designItem, { start: start, length: writeContext.indentedTextWriter.position - start - 1 });
+        }
+    }
+    getContainerType(element) {
+        const display = window.getComputedStyle(element).display;
+        if (display === 'block' || display === "inline-block" || display == '')
+            return ElementContainerType.block;
+        return ElementContainerType.complex;
+    }
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+        const context = { indentedTextWriter, options, lastElementDisplayType: null, containerDisplayType: ElementContainerType.block, designItemsAssignmentList };
+        this._writeDesignItemList(ElementDisplayType.inline, context, designItems);
+    }
+}

package/dist/elements/services/htmlWriterService/HtmlWriterService copy.d.ts

@@ -0,0 +1,22 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+declare enum ElementContainerType {
+    block = 0,
+    complex = 1
+}
+export declare class HtmlWriterService implements IHtmlWriterService {
+    private writeAttributes;
+    private writeStyles;
+    private _writeTextNode;
+    private _writeCommentNode;
+    private _writeElementNode;
+    private _writeDesignItemList;
+    private _writeNewlineAndIntend;
+    private _writeInternal;
+    getContainerType(element: HTMLElement): ElementContainerType;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+}
+export {};