Unlayer2html

lib/src/design/html2Unlayer.js

@@ -26,9 +26,10 @@ class Html2Unlayer {
         });
         this.getContents = (column) => Array.from(column.children).map((content, i) => {
             var _a;
+            const type = this.getContentType(content);
             return {
-                type: this.getContentType(content),
-                values: Object.assign(Object.assign({}, this.getStyle(content.style, content.outerHTML, `u_content_${this.getContentType(content)}_${i + 1}`)), {
+                type: type,
+                values: Object.assign(Object.assign({}, this.getStyle(type === "button" ? content.style._values : content.style, type === "button" ? content === null || content === void 0 ? void 0 : content.lastElementChild.innerHTML : content.outerHTML, `u_content_${type}_${i + 1}`)), {
                     src: {
                         url: (_a = content === null || content === void 0 ? void 0 : content.querySelector("img")) === null || _a === void 0 ? void 0 : _a.src,
                         width: "auto",
@@ -105,6 +106,9 @@ class Html2Unlayer {
             if (content.querySelector("img")) {
                 return "image";
             }
+            if (/(button|btn)/gi.test(content.outerHTML)) {
+                return "button";
+            }
             return "text";
         };
     }

lib/src/utils/htmlParser.js

@@ -4,10 +4,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlParser = void 0;
 const jsdom_1 = require("jsdom");
 class HtmlParser {
+    static parseInlineStyle(element) {
+        let style = {};
+        const style_ = element.getAttribute("style");
+        style_ === null || style_ === void 0 ? void 0 : style_.split(";").forEach(x => {
+            const key = x.split(":")[0];
+            const value = x.split(":")[1];
+            Object.assign(style, { [key]: value });
+        });
+        return style;
+    }
 }
 exports.HtmlParser = HtmlParser;
 _a = HtmlParser;
-HtmlParser.parseBody = (html) => _a.document = new jsdom_1.JSDOM(html).window.document;
+HtmlParser.parseBody = (html) => {
+    _a.window = new jsdom_1.JSDOM(html).window;
+    return _a.document = _a.window.document;
+};
 HtmlParser.parseRows = (body) => {
     var _b;
     const children = Array.from((_b = body === null || body === void 0 ? void 0 : body.children) !== null && _b !== void 0 ? _b : []).filter(x => x.tagName.toUpperCase() != "SCRIPT" && x.tagName.toUpperCase() != "STYLE");

src/design/html2Unlayer.ts

@@ -1,3 +1,4 @@
+import { JSDOM } from "jsdom";
 import { UnlayerDesign } from "../model/unlayer.model";
 import { HtmlParser } from "../utils/htmlParser";
 
@@ -7,11 +8,11 @@ export class Html2Unlayer {
 
         let design = {} as UnlayerDesign;
         const body = HtmlParser.parseBody(data).querySelector("body");
-
+    
         design.body = {
 
             rows: HtmlParser.parseRows(body).map((row: any, i) => {
-                const hasMultipleCells = this.hasMultipleCell(Array.from(row.children[0]?.children??[]));
+                const hasMultipleCells = this.hasMultipleCell(Array.from(row.children[0]?.children ?? []));
                 return {
                     cells: this.getCells(Array.from(hasMultipleCells ? row.children[0].children : row.children)),
                     columns: this.getColumns(HtmlParser.parseColumns(row, hasMultipleCells)),
@@ -50,11 +51,11 @@ export class Html2Unlayer {
     });
 
     getContents = (column: any) => Array.from(column.children).map((content: any, i) => {
-
+        const type=this.getContentType(content);
         return {
-            type: this.getContentType(content),
+            type: type,
             values: {
-                ...this.getStyle(content.style, content.outerHTML, `u_content_${this.getContentType(content)}_${i + 1}`) as any,
+                ...this.getStyle(type==="button"?content.style._values:content.style, type==="button"?content?.lastElementChild.innerHTML:content.outerHTML, `u_content_${type}_${i + 1}`) as any,
                 ...{
                     src: {
                         url: content?.querySelector("img")?.src,
@@ -138,6 +139,10 @@ export class Html2Unlayer {
             return "image";
         }
 
+        if (/(button|btn)/gi.test(content.outerHTML)) {
+            return "button";
+        }
+
         return "text";
     }
 }

src/utils/htmlParser.ts

@@ -1,13 +1,16 @@
-import { JSDOM } from "jsdom";
+import { DOMWindow, JSDOM } from "jsdom";
 
 export class HtmlParser {
 
+    static window: DOMWindow;
     static document: Document;
 
-    static parseBody = (html: string) => this.document = new JSDOM(html).window.document;
+    static parseBody = (html: string) => {
+        this.window = new JSDOM(html).window;
+        return this.document = this.window.document;
+    }
 
     static parseRows = (body: HTMLBodyElement | null) => {
-
         const children = Array.from(body?.children ?? []).filter(x => x.tagName.toUpperCase() != "SCRIPT" && x.tagName.toUpperCase() != "STYLE");
         if (children.length > 1) return Array.from(children);
         let a = children[0];
@@ -46,4 +49,16 @@ export class HtmlParser {
     static parseColumns = (row: Element, hasMultipleCells: boolean) =>
         Array.from(hasMultipleCells ? row.children[0]?.children[0]?.children ?? row.children[0]?.children : row.children);
 
+    static parseInlineStyle(element: Element) {
+
+        let style = {};
+        const style_ = element.getAttribute("style");
+        style_?.split(";").forEach(x => {
+            const key = x.split(":")[0];
+            const value = x.split(":")[1];
+            Object.assign(style, { [key]:value});
+        });
+
+        return style;
+    }
 }