@node-projects/web-component-designer 0.0.216 → 0.0.218

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

@@ -1,87 +1,87 @@
-import { DesignItem } from '../../item/DesignItem.js';
-import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
-import { newElementFromString } from '../../helper/ElementHelper.js';
-// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
-// attributes from their DOM, so you loose Data
-export class NodeHtmlParserService {
-    _parserUrl;
-    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
-        this._parserUrl = parserUrl;
-    }
-    async parse(html, serviceContainer, instanceServiceContainer) {
-        //@ts-ignore
-        let parser = await import(this._parserUrl);
-        const parsed = parser.parse(html, { comment: true });
-        let designItems = [];
-        for (let p of parsed.childNodes) {
-            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
-            if (di != null)
-                designItems.push(di);
-            else
-                console.warn("NodeHtmlParserService - could not parse element", p);
-        }
-        return designItems;
-    }
-    _parseDiv = document.createElement("div");
-    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
-        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) {
-                if (namespace)
-                    element = document.createElementNS(namespace, item.rawTagName);
-                else
-                    element = document.createElement(item.rawTagName);
-                manualCreatedElement = true;
-            }
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
-            if (instanceServiceContainer.designItemDocumentPositionService)
-                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
-            let style = '';
-            let attr = item.attributes;
-            for (let a in attr) {
-                if (a !== 'style') {
-                    designItem._withoutUndoSetAttribute(a, attr[a]);
-                    if (manualCreatedElement) {
-                        element.setAttribute(a, attr[a]);
-                    }
-                }
-                else {
-                    style = attr[a];
-                }
-            }
-            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
-                let styleParser = new CssAttributeParser();
-                styleParser.parse(style);
-                for (let s of styleParser.entries) {
-                    designItem._withoutUndoSetStyle(s.name, s.value);
-                    if (manualCreatedElement) {
-                        element.style[s.name] = s.value;
-                    }
-                }
-            }
-            element.draggable = false; //even if it should be true, for better designer exp.
-            for (let c of item.childNodes) {
-                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
-                designItem._insertChildInternal(di);
-            }
-        }
-        else if (item.nodeType == 3) {
-            this._parseDiv.innerHTML = item.rawText;
-            let element = this._parseDiv.childNodes[0];
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
-            if (instanceServiceContainer.designItemDocumentPositionService)
-                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
-        }
-        else if (item.nodeType == 8) {
-            let element = document.createComment(item.rawText);
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
-            if (instanceServiceContainer.designItemDocumentPositionService)
-                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
-        }
-        return designItem;
-    }
-}
+import { DesignItem } from '../../item/DesignItem.js';
+import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
+import { newElementFromString } from '../../helper/ElementHelper.js';
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class NodeHtmlParserService {
+    _parserUrl;
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
+        this._parserUrl = parserUrl;
+    }
+    async parse(html, serviceContainer, instanceServiceContainer, parseSnippet) {
+        //@ts-ignore
+        let parser = await import(this._parserUrl);
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null, parseSnippet);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _parseDiv = document.createElement("div");
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace, snippet) {
+        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) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+                manualCreatedElement = true;
+            }
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            if (!snippet && instanceServiceContainer.designItemDocumentPositionService)
+                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem._withoutUndoSetAttribute(a, attr[a]);
+                    if (manualCreatedElement) {
+                        element.setAttribute(a, attr[a]);
+                    }
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem._withoutUndoSetStyle(s.name, s.value);
+                    if (manualCreatedElement) {
+                        element.style[s.name] = s.value;
+                    }
+                }
+            }
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null, snippet);
+                designItem._insertChildInternal(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            if (!snippet && instanceServiceContainer.designItemDocumentPositionService)
+                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            if (!snippet && instanceServiceContainer.designItemDocumentPositionService)
+                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
+        }
+        return designItem;
+    }
+}

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

@@ -1,10 +1,9 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IHtmlWriterService } from './IHtmlWriterService.js';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
-import { IStringPosition } from './IStringPosition.js';
-import { ITextWriter } from '../../helper/ITextWriter.js';
-export declare abstract class AbstractHtmlWriterService implements IHtmlWriterService {
-    abstract write(indentedTextWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
-    writeAttributes(indentedTextWriter: ITextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
-    writeStyles(indentedTextWriter: ITextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
-}
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { ITextWriter } from '../../helper/ITextWriter.js';
+export declare abstract class AbstractHtmlWriterService implements IHtmlWriterService {
+    abstract write(indentedTextWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, updatePositions?: boolean): any;
+    writeAttributes(indentedTextWriter: ITextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+    writeStyles(indentedTextWriter: ITextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+}

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

@@ -1,62 +1,62 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { CssCombiner } from '../../helper/CssCombiner.js';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
-export class AbstractHtmlWriterService {
-    writeAttributes(indentedTextWriter, designItem, options) {
-        if (designItem.hasAttributes) {
-            for (const a of designItem.attributes()) {
-                indentedTextWriter.write(' ');
-                if (typeof a[1] === 'string') {
-                    if (a[1] === "")
-                        indentedTextWriter.write(a[0]);
-                    else {
-                        if (options.parseJsonInAttributes &&
-                            ((a[1].startsWith('{') && !a[1].startsWith('{{') && a[1].endsWith('}')) ||
-                                (a[1].startsWith('[') && !a[1].startsWith('[[') && a[1].endsWith(']')))) {
-                            try {
-                                let j = JSON.parse(a[1]);
-                                let txt;
-                                if (options.jsonWriteMode == 'beauty')
-                                    txt = JSON.stringify(j, null, 2);
-                                else
-                                    txt = JSON.stringify(j);
-                                indentedTextWriter.write(a[0] + '=\'' + DomConverter.normalizeAttributeValue(txt, true) + '\'');
-                                continue;
-                            }
-                            catch { }
-                        }
-                        const content = DomConverter.normalizeAttributeValue(a[1]);
-                        if (content.indexOf('"')) {
-                            const contentSingle = DomConverter.normalizeAttributeValue(a[1], true);
-                            if (contentSingle.length < content.length)
-                                indentedTextWriter.write(a[0] + '=\'' + contentSingle + '\'');
-                            else
-                                indentedTextWriter.write(a[0] + '="' + content + '"');
-                        }
-                        else
-                            indentedTextWriter.write(a[0] + '="' + content + '"');
-                    }
-                }
-                else if (!a[1])
-                    indentedTextWriter.write(a[0]);
-                else {
-                    //TODO: writing of bindings, really ???
-                }
-            }
-        }
-    }
-    writeStyles(indentedTextWriter, designItem, options) {
-        if (designItem.hasStyles) {
-            indentedTextWriter.write(' style="');
-            let styles = designItem.styles();
-            if (options.compressCssToShorthandProperties)
-                styles = CssCombiner.combine(new Map(styles));
-            for (const s of styles) {
-                if (s[0]) {
-                    indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
-                }
-            }
-            indentedTextWriter.write('"');
-        }
-    }
-}
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+export class AbstractHtmlWriterService {
+    writeAttributes(indentedTextWriter, designItem, options) {
+        if (designItem.hasAttributes) {
+            for (const a of designItem.attributes()) {
+                indentedTextWriter.write(' ');
+                if (typeof a[1] === 'string') {
+                    if (a[1] === "")
+                        indentedTextWriter.write(a[0]);
+                    else {
+                        if (options.parseJsonInAttributes &&
+                            ((a[1].startsWith('{') && !a[1].startsWith('{{') && a[1].endsWith('}')) ||
+                                (a[1].startsWith('[') && !a[1].startsWith('[[') && a[1].endsWith(']')))) {
+                            try {
+                                let j = JSON.parse(a[1]);
+                                let txt;
+                                if (options.jsonWriteMode == 'beauty')
+                                    txt = JSON.stringify(j, null, 2);
+                                else
+                                    txt = JSON.stringify(j);
+                                indentedTextWriter.write(a[0] + '=\'' + DomConverter.normalizeAttributeValue(txt, true) + '\'');
+                                continue;
+                            }
+                            catch { }
+                        }
+                        const content = DomConverter.normalizeAttributeValue(a[1]);
+                        if (content.indexOf('&quot;')) {
+                            const contentSingle = DomConverter.normalizeAttributeValue(a[1], true);
+                            if (contentSingle.length < content.length)
+                                indentedTextWriter.write(a[0] + '=\'' + contentSingle + '\'');
+                            else
+                                indentedTextWriter.write(a[0] + '="' + content + '"');
+                        }
+                        else
+                            indentedTextWriter.write(a[0] + '="' + content + '"');
+                    }
+                }
+                else if (!a[1])
+                    indentedTextWriter.write(a[0]);
+                else {
+                    //TODO: writing of bindings, really ???
+                }
+            }
+        }
+    }
+    writeStyles(indentedTextWriter, designItem, options) {
+        if (designItem.hasStyles) {
+            indentedTextWriter.write(' style="');
+            let styles = designItem.styles();
+            if (options.compressCssToShorthandProperties)
+                styles = CssCombiner.combine(new Map(styles));
+            for (const s of styles) {
+                if (s[0]) {
+                    indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                }
+            }
+            indentedTextWriter.write('"');
+        }
+    }
+}

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

@@ -1,22 +1,21 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IHtmlWriterService } from './IHtmlWriterService.js';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
-import { IStringPosition } from './IStringPosition.js';
-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 {};
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+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): void;
+}
+export {};

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

@@ -1,133 +1,133 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { CssCombiner } from '../../helper/CssCombiner.js';
-import { NodeType } from '../../item/NodeType.js';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
-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(new Map(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);
-    }
-}
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { NodeType } from '../../item/NodeType.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+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(new Map(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) {
+        const context = { indentedTextWriter, options, lastElementDisplayType: null, containerDisplayType: ElementContainerType.block };
+        this._writeDesignItemList(ElementDisplayType.inline, context, designItems);
+    }
+}