@node-projects/web-component-designer 0.0.77 → 0.0.81

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

@@ -1,12 +1,8 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter';
-import { CssCombiner } from '../../helper/CssCombiner';
-import { NodeType } from '../../item/NodeType';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { NodeType } from '../../item/NodeType.js';
 import { isEmptyTextNode, isInline } from '../../helper/ElementHelper.js';
-export class HtmlWriterService {
-    canWrite(designItem) {
-        return true;
-    }
+import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
+export class HtmlWriterService extends AbstractHtmlWriterService {
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
             (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
@@ -18,7 +14,12 @@ export class HtmlWriterService {
             (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
             indentedTextWriter.writeNewline();
     }
-    write(indentedTextWriter, designItem, options, designItemsAssignmentList) {
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+        for (const d of designItems) {
+            this.internalWrite(indentedTextWriter, d, options, designItemsAssignmentList);
+        }
+    }
+    internalWrite(indentedTextWriter, designItem, options, designItemsAssignmentList) {
         let start = indentedTextWriter.position;
         if (designItem.nodeType == NodeType.TextNode) {
             if (isEmptyTextNode(designItem.element) &&
@@ -36,34 +37,8 @@ export class HtmlWriterService {
         else {
             this._conditionalyWriteIndent(indentedTextWriter, designItem);
             indentedTextWriter.write('<' + designItem.name);
-            if (designItem.hasAttributes) {
-                for (const a of designItem.attributes) {
-                    indentedTextWriter.write(' ');
-                    if (typeof a[1] === 'string') {
-                        if (a[1] === "")
-                            indentedTextWriter.write(a[0]);
-                        else
-                            indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
-                    }
-                    else if (!a[1])
-                        indentedTextWriter.write(a[0]);
-                    else {
-                        //TODO: writing of bindings
-                    }
-                }
-            }
-            if (designItem.hasStyles) {
-                indentedTextWriter.write(' style="');
-                let styles = designItem.styles;
-                if (options.compressCssToShorthandProperties)
-                    styles = CssCombiner.combine(styles);
-                for (const s of styles) {
-                    if (s[0]) {
-                        indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
-                    }
-                }
-                indentedTextWriter.write('"');
-            }
+            this.writeAttributes(indentedTextWriter, designItem, options);
+            this.writeStyles(indentedTextWriter, designItem, options);
             indentedTextWriter.write('>');
             let contentSingleTextNode = false;
             if (designItem.hasChildren) {
@@ -78,11 +53,7 @@ export class HtmlWriterService {
                         indentedTextWriter.levelRaise();
                     }
                     for (const c of children) {
-                        c.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
-                            if (s.canWrite(c)) {
-                                s.write(indentedTextWriter, c, options, designItemsAssignmentList);
-                            }
-                        });
+                        this.internalWrite(indentedTextWriter, c, options, designItemsAssignmentList);
                         let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
                         if (childSingleTextNode)
                             indentedTextWriter.writeNewline();

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

@@ -2,4 +2,6 @@ export declare class IHtmlWriterOptions {
     beautifyOutput: boolean;
     compressCssToShorthandProperties: boolean;
     writeDesignerProperties: boolean;
+    parseJsonInAttributes: boolean;
+    jsonWriteMode: 'min' | 'beauty';
 }

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

@@ -1,5 +1,7 @@
 export class IHtmlWriterOptions {
-    beautifyOutput;
-    compressCssToShorthandProperties;
-    writeDesignerProperties;
+    beautifyOutput = true;
+    compressCssToShorthandProperties = true;
+    writeDesignerProperties = true;
+    parseJsonInAttributes = true;
+    jsonWriteMode = 'min';
 }

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

@@ -1,8 +1,7 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
-import { IStringPosition } from './IStringPosition';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
 export interface IHtmlWriterService {
-    canWrite(designItem: IDesignItem): boolean;
-    write(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
 }

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

@@ -0,0 +1,9 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+export declare class LitTsElementWriterService implements IHtmlWriterService {
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+    static head: string;
+}

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

@@ -0,0 +1,43 @@
+//needs InternalBindinsgStorrageService -> keeps bindings
+export class LitTsElementWriterService {
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+        throw new Error('Method not implemented.');
+    }
+    static head = `import { html, css, LitElement, CSSResultArray } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+@customElement('$$elementName')
+class $$className extends LitElement {
+  static get styles(): CSSResultArray {
+    return [
+      css\`
+$$css
+      \`,
+    ];
+  }
+
+  //@property({ type: String }) btnStyle: QingButtonStyle = '';
+  //@property({ type: Boolean, reflect: true }) selected = false;
+
+  //private buttonElement: HTMLButtonElement | null = null;
+
+  /*firstUpdated() {
+    if (!this.shadowRoot) {
+      throw new Error('Unexpected undefined shadowRoot');
+    }
+    this.buttonElement = this.shadowRoot.querySelector('button');
+  }*/
+
+  render() {
+    return html\`$$html\`;
+  }
+}
+
+export default $$className;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '$$elementName': $$className;
+  }
+}`;
+}

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

@@ -0,0 +1,27 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+import { ElementDisplayType } from '../../helper/ElementHelper.js';
+export declare enum ElementContainerType {
+    block = 0,
+    complex = 1
+}
+export interface IWriteContext {
+    options: IHtmlWriterOptions;
+    indentedTextWriter: IndentedTextWriter;
+    lastElementDisplayType: ElementDisplayType | null;
+    containerDisplayType: ElementContainerType;
+    designItemsAssignmentList?: Map<IDesignItem, IStringPosition>;
+}
+export declare class SimpleHtmlWriterService implements IHtmlWriterService {
+    protected writeAttributes(writeContext: IWriteContext, designItem: IDesignItem): void;
+    protected writeStyles(writeContext: IWriteContext, designItem: IDesignItem): void;
+    private _writeTextNode;
+    private _writeCommentNode;
+    private _writeElementNode;
+    private _writeDesignItemList;
+    private _writeInternal;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+}

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

@@ -0,0 +1,93 @@
+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';
+export var ElementContainerType;
+(function (ElementContainerType) {
+    ElementContainerType[ElementContainerType["block"] = 0] = "block";
+    ElementContainerType[ElementContainerType["complex"] = 1] = "complex";
+})(ElementContainerType || (ElementContainerType = {}));
+export class SimpleHtmlWriterService {
+    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);
+        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();
+            this._writeDesignItemList(currentElementDisplayType, writeContext, children);
+        }
+        else if (designItem.hasContent) {
+            writeContext.indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+        }
+        if (!DomConverter.IsSelfClosingElement(designItem.name)) {
+            writeContext.indentedTextWriter.write('</' + designItem.name + '>');
+            if (currentElementDisplayType !== ElementDisplayType.none) {
+                writeContext.lastElementDisplayType = currentElementDisplayType;
+            }
+        }
+    }
+    _writeDesignItemList(currentElementDisplayType, writeContext, children) {
+        for (const c of children) {
+            this._writeInternal(writeContext, c);
+        }
+    }
+    _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 });
+        }
+    }
+    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/initializationService/DefaultIntializationService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IIntializationService } from './IIntializationService';
+export declare class DefaultIntializationService implements IIntializationService {
+    init(designItem: IDesignItem): void;
+    initializeIframe(iframe: HTMLIFrameElement): void;
+}

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

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

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.d.ts

@@ -13,7 +13,9 @@ export declare class WebcomponentManifestParserService extends UnkownElementProp
     private _propertiesList;
     private _resolveStored;
     private _rejectStored;
-    constructor(name: string, file: string);
+    private _importPrefix;
+    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
+    private _parseManifest;
     private manifestClassPropertyTypeToEditorPropertyType;
     getElements(): Promise<IElementDefinition[]>;
     isHandledElement(designItem: IDesignItem): boolean;

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -9,43 +9,55 @@ export class WebcomponentManifestParserService extends UnkownElementPropertiesSe
     _propertiesList;
     _resolveStored;
     _rejectStored;
-    constructor(name, file) {
+    _importPrefix = '';
+    constructor(name, fileOrObject, importPrefix = '') {
         super();
         this._name = name;
-        let path = file.split('/').slice(0, -1).join('/');
-        import(file, { assert: { type: 'json' } }).then(module => {
-            this._packageData = module.default;
-            this._elementList = [];
-            this._propertiesList = {};
-            for (let m of this._packageData.modules) {
-                for (let e of m.exports) {
-                    if (e.kind == 'custom-element-definition') {
-                        this._elementList.push({ tag: e.name, import: path + '/' + e.declaration.module });
-                        let properties = [];
-                        let declaration = m.declarations.find(x => x.name == e.declaration.name);
-                        for (let d of declaration.members) {
-                            if (d.kind == 'field') {
-                                let pType = PropertyType.property;
+        this._importPrefix = importPrefix;
+        if (typeof fileOrObject === 'string') {
+            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
+            import(fileOrObject, { assert: { type: 'json' } }).then(module => {
+                this._packageData = module.default;
+                this._parseManifest();
+            }).catch(err => {
+                if (this._rejectStored) {
+                    this._rejectStored.forEach(x => x(err));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            });
+        }
+        else {
+            this._packageData = fileOrObject;
+            this._parseManifest();
+        }
+    }
+    _parseManifest() {
+        this._elementList = [];
+        this._propertiesList = {};
+        for (let m of this._packageData.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module });
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    for (let d of declaration.members) {
+                        if (d.kind == 'field') {
+                            let pType = PropertyType.property;
+                            if (declaration.attributes)
                                 pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
-                                properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
-                            }
+                            properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
                         }
-                        this._propertiesList[e.name] = properties;
                     }
-                }
-                if (this._resolveStored) {
-                    this._resolveStored.forEach(x => x(this._elementList));
-                    this._resolveStored = null;
-                    this._rejectStored = null;
+                    this._propertiesList[e.name] = properties;
                 }
             }
-        }).catch(err => {
-            if (this._rejectStored) {
-                this._rejectStored.forEach(x => x(err));
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
                 this._resolveStored = null;
                 this._rejectStored = null;
             }
-        });
+        }
     }
     manifestClassPropertyTypeToEditorPropertyType(type) {
         if (type) {
@@ -66,7 +78,9 @@ export class WebcomponentManifestParserService extends UnkownElementPropertiesSe
         return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
     }
     isHandledElement(designItem) {
-        return this._elementList.find(x => x.tag == designItem.name) != null;
+        if (this._elementList)
+            return this._elementList.find(x => x.tag == designItem.name) != null;
+        return false;
     }
     getProperties(designItem) {
         return this._propertiesList[designItem.name];

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

@@ -95,7 +95,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
         this._aceEditor = ace.edit(this._editor, {
             theme: "ace/theme/chrome",
             mode: "ace/mode/html",
-            value: "test",
+            value: "",
             autoScrollEditorIntoView: true,
             fontSize: "14px",
             showPrintMargin: false,

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

@@ -20,7 +20,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         //@ts-ignore
-        import("codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        import("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

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

@@ -1,5 +1,5 @@
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
 import { ServiceContainer } from '../../services/ServiceContainer';
 export interface IDemoView {
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
 }

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): Promise<void>;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
 }

package/dist/elements/widgets/demoView/demoView.js

@@ -29,9 +29,9 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
     }
-    async display(serviceContainer, instanceServiceContainer, code) {
+    async display(serviceContainer, instanceServiceContainer, code, style) {
         this._loading.hidden = false;
-        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code);
+        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code, style);
         this._loading.hidden = true;
     }
 }

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

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IStringPosition } from "../../services/htmlWriterService/IStringPosition.js";
 export declare class DomConverter {
-    static normalizeAttributeValue(value: string | number): string;
+    static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
     static normalizeContentValue(value: string): string;
     static IsSelfClosingElement(tag: string): boolean;
     static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;

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

@@ -1,10 +1,13 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
+import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js";
 export class DomConverter {
-    static normalizeAttributeValue(value) {
+    static normalizeAttributeValue(value, useSingleQuotes = false) {
         if (typeof value === 'number')
             value = value.toString();
-        if (value)
+        if (value) {
+            if (useSingleQuotes)
+                return value.replaceAll('\'', ''');
             return value.replaceAll('"', '"');
+        }
         return value;
     }
     static normalizeContentValue(value) {
@@ -19,7 +22,6 @@ export class DomConverter {
             tag === 'col' ||
             tag === 'embed' ||
             tag === 'hr' ||
-            tag === 'iframe' ||
             tag === 'img' ||
             tag === 'input' ||
             tag === 'keygen' ||
@@ -32,13 +34,8 @@ export class DomConverter {
     }
     static ConvertToString(designItems, designItemsAssignmentList) {
         let itw = new IndentedTextWriter();
-        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true };
-        for (let d of designItems) {
-            d.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
-                if (s.canWrite(d))
-                    s.write(itw, d, options, designItemsAssignmentList);
-            });
-        }
+        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
+        designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
         return itw.getString();
     }
 }

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

@@ -14,7 +14,6 @@ export declare class PathExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
-    _drawPath(path: PathData[], index: number): void;
     _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
     _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
     refresh(): void;