@syncfusion/ej2-documenteditor/src/document-editor/implementation/writer/html-export.js

Feature-rich document editor control with built-in support for context menu, options pane and dialogs.

/* eslint-disable */
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { HelperMethods } from '../editor/editor-helper';
import { sectionsProperty, characterFormatProperty, paragraphFormatProperty, listsProperty, abstractListsProperty, nameProperty, boldProperty, italicProperty, underlineProperty, baselineAlignmentProperty, strikethroughProperty, highlightColorProperty, fontSizeProperty, fontColorProperty, fontFamilyProperty, styleNameProperty, allCapsProperty, listIdProperty, listLevelNumberProperty, leftIndentProperty, rightIndentProperty, firstLineIndentProperty, textAlignmentProperty, afterSpacingProperty, beforeSpacingProperty, lineSpacingProperty, lineSpacingTypeProperty, listFormatProperty, bordersProperty, leftMarginProperty, rightMarginProperty, topMarginProperty, bottomMarginProperty, cellWidthProperty, columnSpanProperty, rowSpanProperty, verticalAlignmentProperty, isHeaderProperty, cellSpacingProperty, shadingProperty, tableAlignmentProperty, preferredWidthProperty, preferredWidthTypeProperty, backgroundColorProperty, hasNoneStyleProperty, lineStyleProperty, lineWidthProperty, textProperty, widthProperty, heightProperty, colorProperty, imageStringProperty, topProperty, bottomProperty, rightProperty, leftProperty, fieldTypeProperty, inlinesProperty, cellFormatProperty, rowFormatProperty, cellsProperty, rowsProperty, tableFormatProperty, blocksProperty, listLevelPatternProperty, abstractListIdProperty, levelsProperty, bookmarkTypeProperty, inlineFormatProperty, startAtProperty, characterSpacingProperty, scalingProperty, imagesProperty, Dictionary, isMetaFileProperty, titleProperty, descriptionProperty, tabsProperty, tabJustificationProperty, tabLeaderProperty, positionProperty, contentControlPropertiesProperty, alternativeTextProperty } from '../../index';
/**
 * @private
 */
var HtmlExport = /** @class */ (function () {
    function HtmlExport() {
        this.document = undefined;
        this.keywordIndex = undefined;
        this.isSkipStyle = false;
        this.isInlineOnlySelected = false;
        /**
         * @private
         */
        this.listInfoDetails = [];
        /**
         * @private
         */
        this.fieldCheck = 0;
        /* eslint:enable:no-any */
    }
    HtmlExport.prototype.writeHtml = function (document, isOptimizeSfdt, skipStyle, isInlineOnlySelected) {
        this.keywordIndex = isOptimizeSfdt ? 1 : 0;
        this.isSkipStyle = skipStyle;
        this.isInlineOnlySelected = isInlineOnlySelected;
        this.document = document;
        var html = '';
        if (document.hasOwnProperty(imagesProperty[this.keywordIndex])) {
            this.serializeImages(document[imagesProperty[this.keywordIndex]]);
        }
        for (var i = 0; i < document[sectionsProperty[this.keywordIndex]].length; i++) {
            html += this.serializeSection(document[sectionsProperty[this.keywordIndex]][i]);
        }
        this.isSkipStyle = false;
        this.isInlineOnlySelected = false;
        return html;
    };
    HtmlExport.prototype.serializeImages = function (data) {
        this.images = new Dictionary();
        for (var img in data) {
            if (Array.isArray(data["" + img])) {
                this.images.add(parseInt(img), data["" + img]);
            }
            else {
                var images = [];
                images.push(data["" + img]);
                this.images.add(parseInt(img), images);
            }
        }
    };
    HtmlExport.prototype.serializeSection = function (section) {
        var string = '';
        for (var i = 0; i < section[blocksProperty[this.keywordIndex]].length; i++) {
            var block = section[blocksProperty[this.keywordIndex]][i];
            if (block.hasOwnProperty(inlinesProperty[this.keywordIndex])) {
                string += this.serializeParagraph(block, i, section);
            }
            else if (block.hasOwnProperty(blocksProperty[this.keywordIndex])) {
                string += this.serializeSection(block);
            }
            else {
                string += this.closeList();
                string += this.serializeTable(block);
            }
        }
        string += this.closeList();
        return string;
    };
    // Serialize Paragraph
    HtmlExport.prototype.serializeParagraph = function (paragraph, currentIndex, section) {
        var blockStyle = '';
        var isList = false;
        var tagAttributes = [];
        var listLevel = undefined;
        if (!isNullOrUndefined(paragraph[paragraphFormatProperty[this.keywordIndex]][listFormatProperty[this.keywordIndex]])) {
            listLevel = this.getListLevel(paragraph);
            if (!isNullOrUndefined(listLevel)) {
                isList = true;
                blockStyle += this.handleNestedList(paragraph[paragraphFormatProperty[this.keywordIndex]][listFormatProperty[this.keywordIndex]][listIdProperty[this.keywordIndex]], paragraph[paragraphFormatProperty[this.keywordIndex]][listFormatProperty[this.keywordIndex]][listLevelNumberProperty[this.keywordIndex]], listLevel);
            }
        }
        else {
            blockStyle += this.closeList();
        }
        if (!this.isSkipStyle) {
            tagAttributes.push('style="' + this.serializeParagraphStyle(paragraph, '', isList) + ';' + 'white-space:pre' + '"');
        }
        if (isList) {
            blockStyle += this.createAttributesTag('li', tagAttributes);
            // Mark this level as having an open list item
            this.listInfoDetails[this.listInfoDetails.length - 1].isTagClosed = true;
        }
        else {
            if (!this.isInlineOnlySelected) {
                blockStyle += this.createAttributesTag(this.getStyleName(paragraph[paragraphFormatProperty[this.keywordIndex]][styleNameProperty[this.keywordIndex]]), tagAttributes);
            }
        }
        if (paragraph[inlinesProperty[this.keywordIndex]].length === 0) {
            //Handled to preserve non breaking space for empty paragraphs similar to MS Word behavior.
            if (!isNullOrUndefined(section) && section[blocksProperty[this.keywordIndex]] && section[blocksProperty[this.keywordIndex]].length > 0 &&
                section[blocksProperty[this.keywordIndex]][section[blocksProperty[this.keywordIndex]].length - 1] === paragraph) {
                blockStyle += '<span />';
            }
            else {
                blockStyle += '&nbsp;';
            }
        }
        else {
            blockStyle = this.serializeInlines(paragraph, blockStyle);
        }
        if (isList) {
            var isNextParagraphNested = this.checkNextParagraphNested(currentIndex, section);
            if (!isNextParagraphNested) {
                blockStyle += this.endTag('li');
                // Mark this level as no longer having an open list item 
                this.listInfoDetails[this.listInfoDetails.length - 1].isTagClosed = false;
            }
        }
        else if (!this.isInlineOnlySelected) {
            blockStyle += this.endTag(this.getStyleName(paragraph[paragraphFormatProperty[this.keywordIndex]][styleNameProperty[this.keywordIndex]]));
        }
        return blockStyle;
    };
    HtmlExport.prototype.checkNextParagraphNested = function (currentIndex, section) {
        if (isNullOrUndefined(currentIndex) || !section || currentIndex >= section[blocksProperty[this.keywordIndex]].length - 1) {
            return false;
        }
        var nextBlock = section[blocksProperty[this.keywordIndex]][currentIndex + 1];
        if (!nextBlock || !nextBlock.hasOwnProperty(inlinesProperty[this.keywordIndex])) {
            return false;
        }
        // Check if next paragraph is a list item
        if (!isNullOrUndefined(nextBlock[paragraphFormatProperty[this.keywordIndex]][listFormatProperty[this.keywordIndex]])) {
            var nextLevelNumber = nextBlock[paragraphFormatProperty[this.keywordIndex]][listFormatProperty[this.keywordIndex]][listLevelNumberProperty[this.keywordIndex]];
            var nextListId = nextBlock[paragraphFormatProperty[this.keywordIndex]][listFormatProperty[this.keywordIndex]][listIdProperty[this.keywordIndex]];
            // If next paragraph has a higher level number, it will be nested
            return nextLevelNumber > this.listInfoDetails[this.listInfoDetails.length - 1].listLevelNumber && nextListId === this.listInfoDetails[this.listInfoDetails.length - 1].listId;
        }
        return false;
    };
    HtmlExport.prototype.handleNestedList = function (listId, currentLevelNumber, listLevel) {
        var html = '';
        if (this.listInfoDetails.length === 0) {
            html += this.getHtmlList(listLevel, currentLevelNumber);
            this.listInfoDetails.push({
                listId: listId,
                listLevelNumber: currentLevelNumber,
                listLevel: listLevel,
                isTagClosed: false
            });
        }
        else {
            if (currentLevelNumber > this.listInfoDetails[this.listInfoDetails.length - 1].listLevelNumber) {
                html += this.getHtmlList(listLevel, currentLevelNumber);
                this.listInfoDetails.push({
                    listId: listId,
                    listLevelNumber: currentLevelNumber,
                    listLevel: listLevel,
                    isTagClosed: false
                });
            }
            else if (currentLevelNumber < this.listInfoDetails[this.listInfoDetails.length - 1].listLevelNumber) {
                html += this.closeListLevelTag(currentLevelNumber);
                // Check if we need to open a new list at this level
                var stackItemAtLevel = this.findStackItemAtLevel(currentLevelNumber);
                if (!stackItemAtLevel || this.isListPatternChanged(stackItemAtLevel.listLevel, listLevel)) {
                    html += this.closeList();
                    html += this.getHtmlList(listLevel, currentLevelNumber);
                    this.listInfoDetails.push({
                        listId: listId,
                        listLevelNumber: currentLevelNumber,
                        listLevel: listLevel,
                        isTagClosed: false
                    });
                }
            }
            else {
                // Same level - check if list type changed (ul to ol or vice versa)
                var lastStackItem = this.listInfoDetails[this.listInfoDetails.length - 1];
                if (lastStackItem && this.isListPatternChanged(lastStackItem.listLevel, listLevel)) {
                    // Close current list and open new one
                    var isOrderedList = lastStackItem.listLevel[listLevelPatternProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 10 : 'Bullet');
                    html += this.endTag(isOrderedList ? 'ol' : 'ul');
                    html += this.getHtmlList(listLevel, currentLevelNumber);
                    this.listInfoDetails[this.listInfoDetails.length - 1] = {
                        listId: listId,
                        listLevelNumber: currentLevelNumber,
                        listLevel: listLevel,
                        isTagClosed: false
                    };
                }
            }
        }
        return html;
    };
    HtmlExport.prototype.findStackItemAtLevel = function (level) {
        for (var i = this.listInfoDetails.length - 1; i >= 0; i--) {
            if (this.listInfoDetails[i].listLevelNumber === level) {
                return this.listInfoDetails[i];
            }
        }
        return undefined;
    };
    HtmlExport.prototype.isListPatternChanged = function (previousListLevel, currentListLevel) {
        var isPreviousListOrdered = previousListLevel[listLevelPatternProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 10 : 'Bullet');
        var isCurrentListOrdered = currentListLevel[listLevelPatternProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 10 : 'Bullet');
        return isPreviousListOrdered !== isCurrentListOrdered;
    };
    HtmlExport.prototype.closeListLevelTag = function (targetLevel) {
        var html = '';
        while (this.listInfoDetails.length > 0 && this.listInfoDetails[this.listInfoDetails.length - 1].listLevelNumber > targetLevel) {
            var stackItem = this.listInfoDetails.pop();
            if (stackItem) {
                if (stackItem.isTagClosed) {
                    html += this.endTag('li');
                }
                var isOrderedList = stackItem.listLevel[listLevelPatternProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 10 : 'Bullet');
                html += this.endTag(isOrderedList ? 'ol' : 'ul');
            }
        }
        return html;
    };
    HtmlExport.prototype.closeList = function () {
        var blockStyle = '';
        while (this.listInfoDetails.length > 0) {
            var stackItem = this.listInfoDetails.pop();
            if (stackItem) {
                if (stackItem.isTagClosed) {
                    blockStyle += this.endTag('li');
                }
                var isOrderedList = stackItem.listLevel[listLevelPatternProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 10 : 'Bullet');
                blockStyle += isOrderedList ? this.endTag('ol') : this.endTag('ul');
            }
        }
        return blockStyle;
    };
    HtmlExport.prototype.getListLevel = function (paragraph) {
        var listLevel = undefined;
        var list = undefined;
        for (var i = 0; i < this.document[listsProperty[this.keywordIndex]].length; i++) {
            if (this.document[listsProperty[this.keywordIndex]][i][listIdProperty[this.keywordIndex]] === paragraph[paragraphFormatProperty[this.keywordIndex]][listFormatProperty[this.keywordIndex]][listIdProperty[this.keywordIndex]]) {
                list = this.document[listsProperty[this.keywordIndex]][i];
                break;
            }
        }
        if (list) {
            for (var j = 0; j < this.document[abstractListsProperty[this.keywordIndex]].length; j++) {
                if (this.document[abstractListsProperty[this.keywordIndex]][j][abstractListIdProperty[this.keywordIndex]] === list[abstractListIdProperty[this.keywordIndex]]) {
                    var levelNumber = paragraph[paragraphFormatProperty[this.keywordIndex]][listFormatProperty[this.keywordIndex]][listLevelNumberProperty[this.keywordIndex]];
                    listLevel = this.document[abstractListsProperty[this.keywordIndex]][j][levelsProperty[this.keywordIndex]][levelNumber];
                    break;
                }
            }
        }
        return listLevel;
    };
    HtmlExport.prototype.getHtmlList = function (listLevel, levelNumer) {
        //if (start == null || (start != null && start.Paragraph != this)) {
        //    let block: BlockAdv = this.GetPreviousBlock();
        //    if (block instanceof ParagraphAdv) {
        //        let previousListLevel: ListLevelAdv = (block as ParagraphAdv).ParagraphFormat.ListFormat.ListLevel;
        //        if (previousListLevel == listLevel)
        //            return "";
        //    }
        //}
        var html = '';
        if (listLevel[listLevelPatternProperty[this.keywordIndex]] === (this.keywordIndex == 1 ? 10 : 'Bullet')) {
            html += '<ul type="';
            switch (levelNumer % 3) {
                case 0:
                    html += 'disc';
                    listLevel[characterFormatProperty[this.keywordIndex]][fontFamilyProperty[this.keywordIndex]] = 'Symbol';
                    break;
                case 1:
                    html += 'circle';
                    listLevel[characterFormatProperty[this.keywordIndex]][fontFamilyProperty[this.keywordIndex]] = 'Symbol';
                    break;
                case 2:
                    html += 'square';
                    listLevel[characterFormatProperty[this.keywordIndex]][fontFamilyProperty[this.keywordIndex]] = 'Wingdings';
                    break;
                default:
                    html += 'disc';
                    listLevel[characterFormatProperty[this.keywordIndex]][fontFamilyProperty[this.keywordIndex]] = 'Symbol';
                    break;
            }
            html += '">';
        }
        else {
            html += '<ol type="';
            switch (listLevel[listLevelPatternProperty[this.keywordIndex]]) {
                case 'UpRoman':
                case 2:
                    html += 'I';
                    break;
                case 'LowRoman':
                case 3:
                    html += 'i';
                    break;
                case 'UpLetter':
                case 4:
                    html += 'A';
                    break;
                case 'LowLetter':
                case 5:
                    html += 'a';
                    break;
                default:
                    html += '1';
                    break;
            }
            html += '" start="' + listLevel[startAtProperty[this.keywordIndex]].toString() + '">';
        }
        return html;
    };
    //SerializeInlines
    HtmlExport.prototype.serializeInlines = function (paragraph, blockStyle) {
        var inline = undefined;
        var i = 0;
        var tabCount = 0;
        while (paragraph[inlinesProperty[this.keywordIndex]].length > i) {
            inline = paragraph[inlinesProperty[this.keywordIndex]][i];
            if ((inline.hasOwnProperty(textProperty[this.keywordIndex])
                && inline[textProperty[this.keywordIndex]] === '\t')) {
                tabCount++;
                i++;
                continue;
            }
            else if (tabCount > 0) {
                var tagAttributes = [];
                if (!this.isSkipStyle) {
                    tagAttributes.push('style="mso-tab-count:' + tabCount.toString() + '"');
                }
                blockStyle += this.createAttributesTag('span', tagAttributes) + this.endTag('span');
                tabCount = 0;
            }
            if (inline.hasOwnProperty(imageStringProperty[this.keywordIndex])) {
                blockStyle += this.serializeImageContainer(inline);
            }
            else if (inline.hasOwnProperty(fieldTypeProperty[this.keywordIndex])) {
                if (inline[fieldTypeProperty[this.keywordIndex]] === 0) {
                    var fieldCode = paragraph[inlinesProperty[this.keywordIndex]][i + 1];
                    if (isNullOrUndefined(fieldCode[textProperty[this.keywordIndex]])) {
                        fieldCode = paragraph[inlinesProperty[this.keywordIndex]][i + 2];
                    }
                    if (!isNullOrUndefined(fieldCode) && !isNullOrUndefined(fieldCode[textProperty[this.keywordIndex]]) &&
                        (fieldCode[textProperty[this.keywordIndex]].indexOf('TOC') >= 0 || fieldCode[textProperty[this.keywordIndex]].indexOf('HYPERLINK') >= 0)) {
                        this.fieldCheck = 1;
                        var tagAttributes = [];
                        if (!this.isSkipStyle) {
                            tagAttributes.push('style="' + this.serializeInlineStyle(inline[characterFormatProperty[this.keywordIndex]]) + '"');
                        }
                        blockStyle += this.createAttributesTag('a', tagAttributes);
                    }
                    else {
                        this.fieldCheck = undefined;
                    }
                }
                else if (inline[fieldTypeProperty[this.keywordIndex]] === 2) {
                    if (!isNullOrUndefined(this.fieldCheck)) {
                        this.fieldCheck = 2;
                    }
                    else {
                        this.fieldCheck = 0;
                    }
                }
                else {
                    if (!isNullOrUndefined(this.fieldCheck) && this.fieldCheck !== 0) {
                        blockStyle += this.endTag('a');
                    }
                    this.fieldCheck = 0;
                }
            }
            else if (inline.hasOwnProperty(contentControlPropertiesProperty[this.keywordIndex])) {
                blockStyle += this.serializeContentInlines(inline, blockStyle);
            }
            else {
                var text = isNullOrUndefined(inline[textProperty[this.keywordIndex]]) ? '' : inline[textProperty[this.keywordIndex]];
                if (inline.hasOwnProperty(bookmarkTypeProperty[this.keywordIndex])) {
                    switch (inline[bookmarkTypeProperty[this.keywordIndex]]) {
                        case 0:
                            blockStyle += '<a name=' + inline[nameProperty[this.keywordIndex]] + '>';
                            break;
                        case 1:
                            blockStyle += '</a>';
                            break;
                    }
                }
                if (this.fieldCheck === 0) {
                    blockStyle += this.serializeSpan(text, inline[characterFormatProperty[this.keywordIndex]]);
                }
                if (this.fieldCheck === 1) {
                    var hyperLink = text.replace(/"/g, '');
                    blockStyle += ' href= \"' + hyperLink.replace('HYPERLINK', '').trim();
                    blockStyle += '\"';
                    blockStyle += '>';
                }
                if (this.fieldCheck === 2) {
                    blockStyle += this.serializeSpan(text, inline[characterFormatProperty[this.keywordIndex]]);
                }
            }
            i++;
        }
        return blockStyle;
    };
    HtmlExport.prototype.serializeContentInlines = function (inline, inlineStyle) {
        inlineStyle = this.serializeInlines(inline, inlineStyle);
        return inlineStyle;
    };
    // Serialize Span
    HtmlExport.prototype.serializeSpan = function (spanText, characterFormat) {
        var spanClass = '';
        if (spanText.indexOf('\v') !== -1) {
            spanClass += '<br>';
            return spanClass.toString();
        }
        else if (spanText.indexOf('\f') !== -1) {
            if (!this.isSkipStyle) {
                spanClass += '<br style = "page-break-after:always;"/>';
            }
            return spanClass.toString();
        }
        var tagAttributes = [];
        this.serializeInlineStyle(characterFormat);
        if (!this.isSkipStyle) {
            tagAttributes.push('style="' + this.serializeInlineStyle(characterFormat) + '"');
        }
        spanClass += this.createAttributesTag('span', tagAttributes);
        // Todo: Need to handle it.
        // If the text starts with white-space, need to check whether it is a continuous space.
        // if (characterFormat.ownerBase instanceof WInline) {
        //     let inline: WInline = (characterFormat.ownerBase as WInline);
        //     if (inline instanceof WSpan && !isNullOrUndefined(inline.text) && inline.text !== '' && (inline as WSpan).text[0] === ' ') {
        //         Check previous inline until, it has valid rendered text.
        //         do {
        //             inline = WInline.getPreviousTextInline((inline as WSpan));
        //         } while (inline instanceof WSpan && !isNullOrUndefined(inline.text));
        //     } else {
        //         inline = undefined;
        //     }
        //     If current white-space is a continuation of consecutive spaces, this will be set true.
        //     ignoreFirstSpace = inline instanceof WSpan && !isNullOrUndefined(inline.text)
        //         && (inline as WSpan).text[(inline as WSpan).text.length - 1] === ' ';
        // }
        var text = this.decodeHtmlNames(spanText.toString());
        // if (text.length === 0) {
        //     text = '&nbsp';
        // }
        spanClass += text;
        spanClass += this.endTag('span');
        return spanClass.toString();
    };
    /**
     * @private
     * @param {string} style - style name.
     * @returns {string} - return heading tag.
     */
    HtmlExport.prototype.getStyleName = function (style) {
        switch (style) {
            case 'Heading 1':
                return 'h1';
            case 'Heading 2':
                return 'h2';
            case 'Heading 3':
                return 'h3';
            case 'Heading 4':
                return 'h4';
            case 'Heading 5':
                return 'h5';
            default:
                return 'p';
        }
    };
    //Serialize Image
    HtmlExport.prototype.serializeImageContainer = function (image) {
        var imageStyle = '';
        var tagAttributes = [];
        this.serializeInlineStyle(image[characterFormatProperty[this.keywordIndex]]);
        var imageSource = '';
        if (!isNullOrUndefined(image[imageStringProperty[this.keywordIndex]])) {
            var base64ImageString = this.images.get(parseInt(image[imageStringProperty[this.keywordIndex]]));
            imageSource = base64ImageString[HelperMethods.parseBoolValue(image[isMetaFileProperty[this.keywordIndex]]) ? 1 : 0];
        }
        var width = HelperMethods.convertPointToPixel(image[widthProperty[this.keywordIndex]]);
        var height = HelperMethods.convertPointToPixel(image[heightProperty[this.keywordIndex]]);
        tagAttributes.push('width="' + width.toString() + '"');
        tagAttributes.push('height="' + height.toString() + '"');
        tagAttributes.push('src="' + imageSource + '"');
        if (image[alternativeTextProperty[this.keywordIndex]] !== "") {
            tagAttributes.push('alt="' + image[alternativeTextProperty[this.keywordIndex]] + '"');
        }
        imageStyle += this.createAttributesTag('img', tagAttributes);
        imageStyle += (this.endTag('img'));
        return imageStyle.toString();
    };
    // Serialize Table Cell
    HtmlExport.prototype.serializeCell = function (cell, row) {
        var blockStyle = '';
        var tagAttributes = [];
        var cellHtml = '';
        tagAttributes = [];
        if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]])) {
            //if (cell.cellFormat.shading.backgroundColor !== Color.FromArgb(0, 0, 0, 0)) {
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][shadingProperty[this.keywordIndex]][backgroundColorProperty[this.keywordIndex]]) && cell[cellFormatProperty[this.keywordIndex]][shadingProperty[this.keywordIndex]][backgroundColorProperty[this.keywordIndex]] !== 'empty') {
                tagAttributes.push('bgcolor="' + HelperMethods.getColor(cell[cellFormatProperty[this.keywordIndex]][shadingProperty[this.keywordIndex]][backgroundColorProperty[this.keywordIndex]]) + '"');
            }
            // }
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][columnSpanProperty[this.keywordIndex]]) && cell[cellFormatProperty[this.keywordIndex]][columnSpanProperty[this.keywordIndex]] > 1) {
                tagAttributes.push('colspan="' + cell[cellFormatProperty[this.keywordIndex]][columnSpanProperty[this.keywordIndex]].toString() + '"');
            }
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][rowSpanProperty[this.keywordIndex]]) && cell[cellFormatProperty[this.keywordIndex]][rowSpanProperty[this.keywordIndex]] > 1) {
                tagAttributes.push('rowspan="' + cell[cellFormatProperty[this.keywordIndex]][rowSpanProperty[this.keywordIndex]].toString() + '"');
            }
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][cellWidthProperty[this.keywordIndex]]) && cell[cellFormatProperty[this.keywordIndex]][cellWidthProperty[this.keywordIndex]] !== 0) {
                var cellWidth = HelperMethods.convertPointToPixel(cell[cellFormatProperty[this.keywordIndex]][cellWidthProperty[this.keywordIndex]]);
                tagAttributes.push('width="' + cellWidth.toString() + '"');
            }
            var cellAlignment = isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][verticalAlignmentProperty[this.keywordIndex]]) ? 'top' :
                this.convertVerticalAlignment(cell[cellFormatProperty[this.keywordIndex]][verticalAlignmentProperty[this.keywordIndex]]);
            tagAttributes.push('valign="' + cellAlignment + '"');
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][leftMarginProperty[this.keywordIndex]]) && cell[cellFormatProperty[this.keywordIndex]][leftMarginProperty[this.keywordIndex]] !== 0) {
                cellHtml += ('padding-left:' + cell[cellFormatProperty[this.keywordIndex]][leftMarginProperty[this.keywordIndex]].toString() + 'pt;');
            }
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][rightMarginProperty[this.keywordIndex]]) && cell[cellFormatProperty[this.keywordIndex]][rightMarginProperty[this.keywordIndex]] !== 0) {
                cellHtml += ('padding-right:' + cell[cellFormatProperty[this.keywordIndex]][rightMarginProperty[this.keywordIndex]].toString() + 'pt;');
            }
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][topMarginProperty[this.keywordIndex]]) && cell[cellFormatProperty[this.keywordIndex]][topMarginProperty[this.keywordIndex]] !== 0) {
                cellHtml += ('padding-top:' + cell[cellFormatProperty[this.keywordIndex]][topMarginProperty[this.keywordIndex]].toString() + 'pt;');
            }
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][bottomMarginProperty[this.keywordIndex]]) && cell[cellFormatProperty[this.keywordIndex]][bottomMarginProperty[this.keywordIndex]] !== 0) {
                cellHtml += ('padding-bottom:' + cell[cellFormatProperty[this.keywordIndex]][bottomMarginProperty[this.keywordIndex]].toString() + 'pt;');
            }
            if (!isNullOrUndefined(cell[cellFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]])) {
                cellHtml += this.serializeCellBordersStyle(cell[cellFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]], row);
            }
        }
        if (cellHtml.length !== 0) {
            if (!this.isSkipStyle) {
                tagAttributes.push('style="' + cellHtml + '"');
            }
        }
        blockStyle += (this.createAttributesTag('td', tagAttributes));
        for (var k = 0; k < cell[blocksProperty[this.keywordIndex]].length; k++) {
            var block = cell[blocksProperty[this.keywordIndex]][k];
            if (block.hasOwnProperty(rowsProperty[this.keywordIndex])) {
                blockStyle += this.serializeTable(block);
            }
            else if (block.hasOwnProperty(blocksProperty[this.keywordIndex])) {
                blockStyle += this.serializeSection(block);
            }
            else {
                blockStyle += this.serializeParagraph(block);
            }
        }
        blockStyle += (this.endTag('td'));
        return blockStyle;
    };
    HtmlExport.prototype.convertVerticalAlignment = function (cellVerticalAlignment) {
        switch (cellVerticalAlignment) {
            case 'Center':
            case 1:
                return 'middle';
            case 'Bottom':
            case 2:
                return 'bottom';
            default:
                return 'top';
        }
    };
    // Serialize Table
    HtmlExport.prototype.serializeTable = function (table) {
        var html = '';
        html += this.createTableStartTag(table);
        for (var j = 0; j < table[rowsProperty[this.keywordIndex]].length; j++) {
            html += this.serializeRow(table[rowsProperty[this.keywordIndex]][j]);
        }
        html += this.createTableEndTag();
        return html;
    };
    // Serialize Row
    HtmlExport.prototype.serializeRow = function (row) {
        var html = '';
        html += this.createRowStartTag(row);
        for (var k = 0; k < row[cellsProperty[this.keywordIndex]].length; k++) {
            html += this.serializeCell(row[cellsProperty[this.keywordIndex]][k], row);
        }
        return html;
    };
    // Serialize Styles
    HtmlExport.prototype.serializeParagraphStyle = function (paragraph, className, isList, keywordIndex) {
        var paragraphClass = '';
        var editor;
        if (isNullOrUndefined(this.keywordIndex)) {
            this.keywordIndex = keywordIndex;
        }
        if (paragraph[inlinesProperty[this.keywordIndex]].length > 0) {
            paragraphClass += this.serializeCharacterFormat(paragraph[characterFormatProperty[this.keywordIndex]]);
        }
        var isEmptyLine = false;
        if (paragraph[inlinesProperty[this.keywordIndex]].length == 0) {
            isEmptyLine = true;
        }
        paragraphClass += this.serializeCharacterFormat(paragraph[characterFormatProperty[this.keywordIndex]], isEmptyLine);
        paragraphClass += this.serializeParagraphFormat(paragraph[paragraphFormatProperty[this.keywordIndex]], isList);
        return paragraphClass;
    };
    HtmlExport.prototype.serializeInlineStyle = function (characterFormat) {
        return this.serializeCharacterFormat(characterFormat);
    };
    HtmlExport.prototype.serializeTableBorderStyle = function (borders) {
        var borderStyle = '';
        var border = {};
        //LeftBorder
        border = borders[leftProperty[this.keywordIndex]];
        if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
            border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
            border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
            borderStyle += this.serializeBorderStyle(border, 'left');
        }
        else if (!isNullOrUndefined(border) && HelperMethods.parseBoolValue(border[hasNoneStyleProperty[this.keywordIndex]])) {
            borderStyle += ('border-left-style:none;');
        }
        //TopBorder
        border = borders[topProperty[this.keywordIndex]];
        if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
            border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
            border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
            borderStyle += this.serializeBorderStyle(border, 'top');
        }
        else if (!isNullOrUndefined(border) && HelperMethods.parseBoolValue(border[hasNoneStyleProperty[this.keywordIndex]])) {
            borderStyle += ('border-top-style:none;');
        }
        //RightBorder
        border = borders[rightProperty[this.keywordIndex]];
        if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
            border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
            border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
            borderStyle += this.serializeBorderStyle(border, 'right');
        }
        else if (!isNullOrUndefined(border) && HelperMethods.parseBoolValue(border[hasNoneStyleProperty[this.keywordIndex]])) {
            borderStyle += ('border-right-style:none;');
        }
        //BottomBorder
        border = borders[bottomProperty[this.keywordIndex]];
        if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
            border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
            border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
            borderStyle += this.serializeBorderStyle(border, 'bottom');
        }
        else if (!isNullOrUndefined(border) && HelperMethods.parseBoolValue(border[hasNoneStyleProperty[this.keywordIndex]])) {
            borderStyle += ('border-bottom-style:none;');
        }
        return borderStyle;
    };
    HtmlExport.prototype.serializeCellBordersStyle = function (borders, row) {
        var borderStyle = '';
        //borderStyle = 'border:solid 1px;';
        // if (borders.left.color) {
        //     borderStyle += ('border-left-color:' + HelperMethods.getColor(borders.left.color));
        //     borderStyle += ';';
        // }
        // borderStyle += this.serializeBorderStyle(borders.left, 'left');
        // if (!isNullOrUndefined(borders.right.color)) {
        //     borderStyle += ('border-right-color:' + HelperMethods.getColor(borders.right.color));
        //     borderStyle += ';';
        // }
        // borderStyle += this.serializeBorderStyle(borders.right, 'right');
        // if (!isNullOrUndefined(borders.top.color)) {
        //     borderStyle += ('border-top-color:' + HelperMethods.getColor(borders.top.color));
        //     borderStyle += ';';
        // }
        // borderStyle += this.serializeBorderStyle(borders.top, 'top');
        // if (!isNullOrUndefined(borders.bottom.color)) {
        //     borderStyle += ('border-bottom-color:' + HelperMethods.getColor(borders.bottom.color));
        //     borderStyle += ';';
        // }
        // borderStyle += this.serializeBorderStyle(borders.bottom, 'bottom');
        var border = {};
        //LeftBorder
        border = borders[leftProperty[this.keywordIndex]];
        if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
            border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
            border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
            borderStyle += this.serializeBorderStyle(border, 'left');
        }
        else if (!isNullOrUndefined(border) && HelperMethods.parseBoolValue(border[hasNoneStyleProperty[this.keywordIndex]])) {
            borderStyle += ('border-left-style:none;');
        }
        else if (!isNullOrUndefined(row[rowFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]][leftProperty[this.keywordIndex]])) {
            border = row[rowFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]][leftProperty[this.keywordIndex]];
            if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
                border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
                border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
                borderStyle += this.serializeBorderStyle(border, 'left');
            }
        }
        //TopBorder
        border = borders[topProperty[this.keywordIndex]];
        if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
            border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
            border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
            borderStyle += this.serializeBorderStyle(border, 'top');
        }
        else if (!isNullOrUndefined(border) && HelperMethods.parseBoolValue(border[hasNoneStyleProperty[this.keywordIndex]])) {
            borderStyle += ('border-top-style:none;');
        }
        else if (!isNullOrUndefined(row[rowFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]][topProperty[this.keywordIndex]])) {
            border = row[rowFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]][topProperty[this.keywordIndex]];
            if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
                border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
                border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
                borderStyle += this.serializeBorderStyle(border, 'top');
            }
        }
        //RightBorder
        border = borders[rightProperty[this.keywordIndex]];
        if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
            border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
            border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
            borderStyle += this.serializeBorderStyle(border, 'right');
        }
        else if (!isNullOrUndefined(border) && HelperMethods.parseBoolValue(border[hasNoneStyleProperty[this.keywordIndex]])) {
            borderStyle += ('border-right-style:none;');
        }
        else if (!isNullOrUndefined(row[rowFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]][rightProperty[this.keywordIndex]])) {
            border = row[rowFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]][rightProperty[this.keywordIndex]];
            if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
                border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
                border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
                borderStyle += this.serializeBorderStyle(border, 'right');
            }
        }
        //BottomBorder
        border = borders[bottomProperty[this.keywordIndex]];
        if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
            border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
            border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
            borderStyle += this.serializeBorderStyle(border, 'bottom');
        }
        else if (!isNullOrUndefined(border) && HelperMethods.parseBoolValue(border[hasNoneStyleProperty[this.keywordIndex]])) {
            borderStyle += ('border-bottom-style:none;');
        }
        else if (!isNullOrUndefined(row[rowFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]][bottomProperty[this.keywordIndex]])) {
            border = row[rowFormatProperty[this.keywordIndex]][bordersProperty[this.keywordIndex]][bottomProperty[this.keywordIndex]];
            if (!isNullOrUndefined(border) && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 1 : 'None') && border[lineStyleProperty[this.keywordIndex]] !== (this.keywordIndex == 1 ? 26 : 'Cleared')) {
                border[colorProperty[this.keywordIndex]] = isNullOrUndefined(border[colorProperty[this.keywordIndex]]) ? "#000000" : border[colorProperty[this.keywordIndex]];
                border[lineWidthProperty[this.keywordIndex]] = isNullOrUndefined(border[lineWidthProperty[this.keywordIndex]]) ? 0.5 : border[lineWidthProperty[this.keywordIndex]];
                borderStyle += this.serializeBorderStyle(border, 'bottom');
            }
        }
        return borderStyle;
    };
    HtmlExport.prototype.serializeBorderStyle = function (border, borderPosition) {
        var borderStyle = '';
        borderStyle += ('border-' + borderPosition + '-style:' + this.convertBorderLineStyle(border[lineStyleProperty[this.keywordIndex]]));
        borderStyle += ';';
        if (border[lineWidthProperty[this.keywordIndex]] > 0) {
            borderStyle += ('border-' + borderPosition + '-width:' + border[lineWidthProperty[this.keywordIndex]].toString() + 'pt;');
        }
        //if (border.color !== Color.FromArgb(0, 0, 0, 0))
        if (!isNullOrUndefined(border[colorProperty[this.keywordIndex]])) {
            borderStyle += ('border-' + borderPosition + '-color:' + HelperMethods.getColor(border[colorProperty[this.keywordIndex]]) + ';');
        }
        return borderStyle;
    };
    HtmlExport.prototype.convertBorderLineStyle = function (lineStyle) {
        switch (lineStyle) {
            case 'Single':
            case 0:
                return 'solid';
            case 'None':
            case 1:
                return 'none';
            case 'Dot':
            case 2:
                return 'dotted';
            case 'DashSmallGap':
            case 'DashLargeGap':
            case 'DashDot':
            case 'DashDotDot':
            case 3:
            case 4:
            case 5:
            case 6:
                return 'dashed';
            case 'Double':
            case 'Triple':
            case 'ThinThickSmallGap':
            case 'ThickThinSmallGap':
            case 'ThinThickThinSmallGap':
            case 'ThinThickMediumGap':
            case 'ThickThinMediumGap':
            case 'ThinThickThinMediumGap':
            case 'ThinThickLargeGap':
            case 'ThickThinLargeGap':
            case 'ThinThickThinLargeGap':
            case 7:
            case 8:
            case 9:
            case 10:
            case 11:
            case 12:
            case 13:
            case 14:
            case 15:
            case 16:
            case 17:
                return 'double';
            case 'SingleWavy':
            case 18:
                return 'solid';
            case 'DoubleWavy':
            case 19:
                return 'double';
            case 'DashDotStroked':
            case 20:
                return 'solid';
            case 'Emboss3D':
            case 21:
                return 'ridge';
            case 'Engrave3D':
            case 22:
                return 'groove';
            case 'Outset':
            case 23:
                return 'outset';
            case 'Inset':
            case 24:
                return 'inset';
            default:
                return 'solid';
        }
    };
    // Serialize Format
    HtmlExport.prototype.serializeCharacterFormat = function (characterFormat, isEmptyLine) {
        if (!isNullOrUndefined(characterFormat[inlineFormatProperty[this.keywordIndex]])) {
            return this.serializeCharacterFormat(characterFormat[inlineFormatProperty[this.keywordIndex]], isEmptyLine);
        }
        var propertyValue;
        var charStyle = '';
        charStyle += 'font-weight';
        charStyle += ':';
        charStyle += HelperMethods.parseBoolValue(characterFormat[boldProperty[this.keywordIndex]]) ? 'bold' : 'normal';
        charStyle += ';';
        charStyle += 'font-style';
        charStyle += ':';
        if (HelperMethods.parseBoolValue(characterFormat[italicProperty[this.keywordIndex]])) {
            charStyle += 'italic';
        }
        else {
            charStyle += 'normal';
        }
        charStyle += ';';
        charStyle += this.serializeTextDecoration(characterFormat);
        //Text Baseline Alignment
        if (characterFormat[baselineAlignmentProperty[this.keywordIndex]] === (this.keywordIndex == 1 ? 1 : 'Superscript') || characterFormat[baselineAlignmentProperty[this.keywordIndex]] === (this.keywordIndex == 1 ? 2 : 'Subscript')) {
            charStyle += 'vertical-align';
            charStyle += ':';
            charStyle += characterFormat[baselineAlignmentProperty[this.keywordIndex]] === (this.keywordIndex == 1 ? 1 :