devexpress-richedit 24.1.1-alpha-24085-0102 → 24.1.2-beta

package/lib/common/{html-export.js → formats/html/export/html-export.js}

@@ -1,120 +1,49 @@
-import { RichEditUnit } from './utils/unit-converter';
-import { LayoutPictureBox } from './layout/main-structures/layout-boxes/layout-picture-box';
-import { BorderLineStyle } from './model/borders/enums';
-import { CharacterProperties } from './model/character/character-properties';
-import { CharacterFormattingScript, UnderlineType } from './model/character/enums';
-import { ColorHelper } from './model/color/color';
-import { Field } from './model/fields/field';
-import { NumberingFormat } from './model/numbering-lists/list-level-properties';
-import { NumberingType } from './model/numbering-lists/numbering-list';
-import { ParagraphAlignment, ParagraphFirstLineIndent, ParagraphLineSpacingType } from './model/paragraph/paragraph-properties';
-import { RichUtils } from './model/rich-utils';
-import { RunType } from './model/runs/run-type';
-import { Table } from './model/tables/main-structures/table';
-import { TableCellPropertiesMergerShadingInfo, TableCellVerticalAlignmentMerger } from './model/tables/properties-mergers/table-cell-properties-merger';
-import { TablePropertiesMergerBorderHorizontal, TablePropertiesMergerBorderVertical, TablePropertiesMergerCellSpacing, TablePropertiesMergerIndent } from './model/tables/properties-mergers/table-properties-merger';
-import { ConditionalTableStyleFormatting, TableCellMergingState, TableCellVerticalAlignment } from './model/tables/secondary-structures/table-base-structures';
-import { TableWidthUnitType } from './model/tables/secondary-structures/table-units';
-import { HtmlConverter } from './rich-utils/html-converter';
 import { UnitConverter } from '@devexpress/utils/lib/class/unit-converter';
 import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { ColorUtils } from '@devexpress/utils/lib/utils/color';
 import { EncodeUtils } from '@devexpress/utils/lib/utils/encode';
 import { SearchUtils } from '@devexpress/utils/lib/utils/search';
 import { StringUtils } from '@devexpress/utils/lib/utils/string';
-export class HtmlBuilder {
-    constructor() {
-        this.childElements = [];
-        this.callbacks = [];
-    }
-    _getHtmlString() {
-        return this.childElements.map(x => {
-            if (typeof x === 'string')
-                return x;
-            return x.outerHTML;
-        }).join('');
-    }
-    isEmpty() {
-        return this.callbacks.length === 0 && this.childElements.length === 0;
-    }
-    clear() {
-        this._currentElement = null;
-        this.callbacks = [];
-        this.childElements = [];
-        return this;
-    }
-    startChild(tagName, namespaceUri) {
-        const element = (namespaceUri) ? document.createElementNS(namespaceUri, tagName) : document.createElement(tagName);
-        if (this._currentElement)
-            this._currentElement.appendChild(element);
-        else {
-            this.childElements.push(element);
-        }
-        this._currentElement = element;
-        return this;
-    }
-    configure(config) {
-        config(this._currentElement);
-        return this;
-    }
-    addCallback(callback) {
-        this.callbacks.push(callback);
-    }
-    assignFrom(builder) {
-        if (!builder)
-            return this;
-        if (typeof builder === "string") {
-            this.addElement(builder);
-            return this;
-        }
-        builder.callbacks.forEach((callback) => {
-            callback(this);
-        });
-        builder.childElements.forEach((el) => {
-            this.addElement(el);
-        });
-        builder.clear();
-        return this;
-    }
-    addElement(element) {
-        if (!element)
-            return this;
-        if (!this._currentElement) {
-            this.childElements.push(element);
-            return this;
-        }
-        if (typeof element === 'string')
-            this._currentElement.innerHTML += element;
-        else if (this._currentElement)
-            this._currentElement.appendChild(element);
-        else
-            this._currentElement = element;
-        return this;
-    }
-    endChild(tagName) {
-        let currentElement = this._currentElement;
-        while (currentElement.tagName.toLowerCase() !== tagName.toLowerCase()) {
-            currentElement = currentElement.parentElement;
-        }
-        this._currentElement = currentElement.parentElement;
-        return this;
-    }
-}
+import { RichEditUnit } from '../../../utils/unit-converter';
+import { LayoutPictureBox } from '../../../layout/main-structures/layout-boxes/layout-picture-box';
+import { BorderLineStyle } from '../../../model/borders/enums';
+import { CharacterProperties } from '../../../model/character/character-properties';
+import { CharacterFormattingScript, UnderlineType } from '../../../model/character/enums';
+import { ColorHelper } from '../../../model/color/color';
+import { Field } from '../../../model/fields/field';
+import { NumberingFormat } from '../../../model/numbering-lists/list-level-properties';
+import { NumberingType } from '../../../model/numbering-lists/numbering-list';
+import { ParagraphAlignment, ParagraphFirstLineIndent, ParagraphLineSpacingType, } from '../../../model/paragraph/paragraph-properties';
+import { RichUtils } from '../../../model/rich-utils';
+import { RunType } from '../../../model/runs/run-type';
+import { Table } from '../../../model/tables/main-structures/table';
+import { TableCellPropertiesMergerShadingInfo, TableCellVerticalAlignmentMerger, } from '../../../model/tables/properties-mergers/table-cell-properties-merger';
+import { TablePropertiesMergerBorderHorizontal, TablePropertiesMergerBorderVertical, TablePropertiesMergerCellSpacing, TablePropertiesMergerIndent, } from '../../../model/tables/properties-mergers/table-properties-merger';
+import { ConditionalTableStyleFormatting, TableCellMergingState, TableCellVerticalAlignment, } from '../../../model/tables/secondary-structures/table-base-structures';
+import { TableWidthUnitType } from '../../../model/tables/secondary-structures/table-units';
+import { HtmlConverter } from '../../../rich-utils/html-converter';
+import { HtmlBuilder } from './html-builder';
+import { isDefined } from '@devexpress/utils/lib/utils/common';
 export class HtmlExporter {
-    constructor(control) {
+    constructor(exportModelOptions) {
         this.rangeCopy = null;
-        this.control = control;
+        this.exportModelOptions = exportModelOptions;
     }
-    get colorProvider() { return this.control.modelManager.model.colorProvider; }
+    get modelManager() { return this.exportModelOptions.modelManager; }
+    get colorProvider() { return this.modelManager.model.colorProvider; }
+    get unitConverter() { return this.exportModelOptions.uiUnitConverter; }
+    get documentRenderer() { return this.exportModelOptions.pictureRenderer; }
+    get lastMaxNumPages() { return this.exportModelOptions.lastMaxNumPages; }
+    ;
+    get pageIndex() { return this.exportModelOptions.pageIndex; }
+    ;
     getHtmlElementsByInterval(model, subDocument, interval, guidLabel) {
         if (interval.length === 0)
             return;
-        const unitConverter = this.control.uiUnitConverter;
-        const unitTypeToString = unitConverter.getUnits() == RichEditUnit.Centimeter ? "cm" : "in";
+        const unitTypeToString = this.unitConverter.getUnits() == RichEditUnit.Centimeter ? "cm" : "in";
         const iterator = subDocument.getConstRunIterator(interval);
         let remainLength = interval.length;
         let currentPosition = interval.start;
-        const renderer = this.control.viewManager.renderer;
         let resultBuilder = new HtmlBuilder();
         const paragraphsInInterval = subDocument.getParagraphsByInterval(interval);
         const paragraphs = [];
@@ -221,60 +150,27 @@ export class HtmlExporter {
                     const currentParagraph = paragraphs[paragraphToStartIndex];
                     paragraphs.splice(paragraphToStartIndex, 1);
                     if (tableCell) {
-                        let parentRow = tableCell.parentRow;
-                        let parentTable = parentRow.parentTable;
-                        let paragraphStartPosition = currentParagraph.startLogPosition.value;
-                        if (parentTable.getStartPosition() == paragraphStartPosition) {
-                            if (parentTable.parentCell) {
-                                let parentCell = parentTable.parentCell;
-                                while (parentCell) {
-                                    let currentParentRow = parentCell.parentRow;
-                                    let currentParentTable = currentParentRow.parentTable;
-                                    if (currentParentTable.getStartPosition() == paragraphStartPosition)
-                                        resultBuilder
-                                            .startChild('table')
-                                            .configure((e) => e.style.cssText = this.getTableStyle(model, currentParentTable))
-                                            .startChild('tbody');
-                                    if (currentParentRow.getStartPosition() == paragraphStartPosition) {
-                                        resultBuilder.startChild('tr');
-                                        if (currentParentRow.gridBefore > 0)
-                                            resultBuilder
-                                                .startChild('td')
-                                                .configure((el) => {
-                                                el.style.cssText = "mso-cell-special:placeholder";
-                                                el.setAttribute('colspan', currentParentRow.gridBefore.toString());
-                                                el.innerHTML = " ";
-                                            })
-                                                .endChild('td');
-                                    }
-                                    if (parentCell.startParagraphPosition.value == paragraphStartPosition) {
-                                        resultBuilder
-                                            .startChild('td')
-                                            .configure((el) => {
-                                            el.style.cssText = this.getCellStyle(model, parentCell);
-                                            if (parentCell.columnSpan > 1) {
-                                                el.setAttribute('colspan', parentCell.columnSpan.toString());
-                                            }
-                                        });
-                                    }
-                                    parentCell = currentParentTable.parentCell;
-                                }
-                            }
+                        const row = tableCell.parentRow;
+                        const table = row.parentTable;
+                        const paragraphStartPosition = currentParagraph.startLogPosition.value;
+                        if (table.getStartPosition() == paragraphStartPosition) {
+                            if (table.parentCell)
+                                this.addParentTableRecursively(model, resultBuilder, table.parentCell, paragraphStartPosition);
                             resultBuilder
                                 .startChild('table')
                                 .configure((el) => {
-                                el.style.cssText = this.getTableStyle(model, parentTable);
+                                el.style.cssText = this.getTableStyle(model, table);
                             })
                                 .startChild('tbody');
                         }
-                        if (parentRow.getStartPosition() == paragraphStartPosition) {
+                        if (row.getStartPosition() == paragraphStartPosition) {
                             resultBuilder.startChild('tr');
-                            if (parentRow.gridBefore > 0) {
+                            if (row.gridBefore > 0) {
                                 resultBuilder
                                     .startChild('td')
                                     .configure((el) => {
                                     el.style.cssText = "mso-cell-special:placeholder";
-                                    el.setAttribute('colspan', parentRow.gridBefore.toString());
+                                    el.setAttribute('colspan', row.gridBefore.toString());
                                     el.innerHTML = " ";
                                 })
                                     .endChild('td');
@@ -283,18 +179,18 @@ export class HtmlExporter {
                         if (tableCell.startParagraphPosition.value == paragraphStartPosition && !isContinueMergingCell) {
                             let rowSpan = 1;
                             if (tableCell.verticalMerging === TableCellMergingState.Restart) {
-                                let rowIndex = parentTable.rows.indexOf(parentRow);
-                                let cellIndex = parentRow.cells.indexOf(tableCell);
-                                for (let i = rowIndex + 1, row; row = parentTable.rows[i]; i++) {
+                                let rowIndex = table.rows.indexOf(row);
+                                let cellIndex = row.cells.indexOf(tableCell);
+                                for (let i = rowIndex + 1, row; row = table.rows[i]; i++) {
                                     let nextRowCellIndex = cellIndex;
-                                    if (row.cells.length != parentRow.cells.length) {
+                                    if (row.cells.length != row.cells.length) {
                                         let extraCellsCount = 0;
-                                        let isNextRowLonger = row.cells.length > parentRow.cells.length;
-                                        let shorterRow = isNextRowLonger ? parentRow : row;
+                                        let isNextRowLonger = row.cells.length > row.cells.length;
+                                        let shorterRow = isNextRowLonger ? row : row;
                                         for (let j = 0; (j < cellIndex) && (j < shorterRow.cells.length); j++) {
                                             extraCellsCount += shorterRow.cells[j].columnSpan - 1;
                                             if (!isNextRowLonger)
-                                                extraCellsCount -= parentRow.cells[j].columnSpan - 1;
+                                                extraCellsCount -= row.cells[j].columnSpan - 1;
                                         }
                                         nextRowCellIndex += (isNextRowLonger ? 1 : -1) * extraCellsCount;
                                     }
@@ -322,7 +218,7 @@ export class HtmlExporter {
                         const firstLineIndentType = maskedParagraphProperties.firstLineIndentType;
                         if (firstLineIndentType != ParagraphFirstLineIndent.None) {
                             paragraphStyle += "text-indent: " + (firstLineIndentType == ParagraphFirstLineIndent.Hanging ? "-" : "") +
-                                unitConverter.twipsToUI(maskedParagraphProperties.firstLineIndent) + unitTypeToString + ";";
+                                this.unitConverter.twipsToUI(maskedParagraphProperties.firstLineIndent) + unitTypeToString + ";";
                         }
                         if (maskedParagraphProperties.alignment !== undefined) {
                             paragraphStyle += "text-align: ";
@@ -349,7 +245,7 @@ export class HtmlExporter {
                             }
                         }
                         if (maskedParagraphProperties.lineSpacingType != ParagraphLineSpacingType.Single) {
-                            const lineSpacingInUI = unitConverter.twipsToUI(maskedParagraphProperties.lineSpacing) + unitTypeToString + ";";
+                            const lineSpacingInUI = this.unitConverter.twipsToUI(maskedParagraphProperties.lineSpacing) + unitTypeToString + ";";
                             paragraphStyle += "line-height: ";
                             switch (maskedParagraphProperties.lineSpacingType) {
                                 case ParagraphLineSpacingType.AtLeast:
@@ -374,11 +270,11 @@ export class HtmlExporter {
                         if (ColorUtils.getAlpha(maskedParagraphProperties.shadingInfo.getActualColor(this.colorProvider)) > 0)
                             paragraphStyle += "background: " + ColorHelper.getCssStringInternal(maskedParagraphProperties.shadingInfo.getActualColor(this.colorProvider)) + ";";
                         if (maskedParagraphProperties.leftIndent)
-                            paragraphStyle += "margin-left: " + unitConverter.twipsToUI(maskedParagraphProperties.leftIndent) + unitTypeToString + ";";
+                            paragraphStyle += "margin-left: " + this.unitConverter.twipsToUI(maskedParagraphProperties.leftIndent) + unitTypeToString + ";";
                         if (maskedParagraphProperties.rightIndent)
-                            paragraphStyle += "margin-right: " + unitConverter.twipsToUI(maskedParagraphProperties.rightIndent) + unitTypeToString + ";";
-                        paragraphStyle += "margin-top: " + unitConverter.twipsToUI(maskedParagraphProperties.spacingBefore) + unitTypeToString + ";";
-                        paragraphStyle += "margin-bottom: " + unitConverter.twipsToUI(maskedParagraphProperties.spacingAfter) + unitTypeToString + ";";
+                            paragraphStyle += "margin-right: " + this.unitConverter.twipsToUI(maskedParagraphProperties.rightIndent) + unitTypeToString + ";";
+                        paragraphStyle += "margin-top: " + this.unitConverter.twipsToUI(maskedParagraphProperties.spacingBefore) + unitTypeToString + ";";
+                        paragraphStyle += "margin-bottom: " + this.unitConverter.twipsToUI(maskedParagraphProperties.spacingAfter) + unitTypeToString + ";";
                         const topBorderStyle = this.getBorderCssString(maskedParagraphProperties.topBorder);
                         if (topBorderStyle)
                             paragraphStyle += "border-top:" + topBorderStyle + ";";
@@ -453,10 +349,11 @@ export class HtmlExporter {
                 case RunType.AnchoredPictureRun: {
                     const picRun = run;
                     const charMergProps = run.getCharacterMergedProperties();
-                    const pictureBox = new LayoutPictureBox(charMergProps, charMergProps.getLayoutColorInfo(this.colorProvider), picRun.cacheInfo, picRun.getActualSize().applyConverter(UnitConverter.twipsToPixels));
+                    const pictureBox = new LayoutPictureBox(charMergProps, charMergProps.getLayoutColorInfo(this.colorProvider), picRun.cacheInfo, picRun.getActualSize().applyConverter(UnitConverter.twipsToPixels), picRun.info.nonVisualDrawingProperties.description);
+                    const { cacheInfo, hyperlinkTip, description } = pictureBox;
                     innerHtml
                         .clear()
-                        .addElement(renderer.renderPicture(pictureBox));
+                        .addElement(this.documentRenderer.renderPictureBoxContent(pictureBox.createSize(), cacheInfo, hyperlinkTip, description));
                     break;
                 }
                 case RunType.InlineTextBoxRun:
@@ -507,14 +404,14 @@ export class HtmlExporter {
                     let currentField = subDocument.fields[Field.normedBinaryIndexOf(subDocument.fields, currentPosition)];
                     if (currentField) {
                         let codeText = StringUtils.trim(subDocument.getText(currentField.getCodeInterval()).split("\\")[0]).toUpperCase();
-                        if (codeText == "NUMPAGES")
+                        if (codeText == "NUMPAGES" && isDefined(this.lastMaxNumPages))
                             innerHtml
                                 .clear()
-                                .addElement(this.control.layout.lastMaxNumPages.toString());
-                        else if (codeText == "PAGE")
+                                .addElement(this.lastMaxNumPages.toString());
+                        else if (codeText == "PAGE" && isDefined(this.pageIndex))
                             innerHtml
                                 .clear()
-                                .addElement((this.control.selection.pageIndex + 1).toString());
+                                .addElement((this.pageIndex + 1).toString());
                     }
                     break;
                 default:
@@ -540,7 +437,7 @@ export class HtmlExporter {
             }
             if (html.isEmpty() && !innerHtml.isEmpty()) {
                 const characterProperties = run.getCharacterMergedProperties();
-                const boxStyle = "white-space:pre;" + HtmlConverter.getCssRules(characterProperties, characterProperties.textColor.toRgb(this.colorProvider), run.getType() == RunType.TextRun, false, false).
+                const boxStyle = HtmlConverter.getCssRules(characterProperties, characterProperties.textColor.toRgb(this.colorProvider), run.getType() == RunType.TextRun, false, false).
                     join(";");
                 html
                     .startChild('span')
@@ -601,15 +498,15 @@ export class HtmlExporter {
             currentPosition += length;
             remainLength -= length;
         }
-        if (/^<td[^>]*>/gi.test(resultBuilder._getHtmlString())) {
+        if (/^<td[^>]*>/gi.test(resultBuilder.getHtmlString())) {
             const builder = new HtmlBuilder();
             builder.startChild('tr');
             builder.assignFrom(resultBuilder);
             resultBuilder = builder;
         }
-        if (/<\/td>$/gi.test(resultBuilder._getHtmlString()))
+        if (/<\/td>$/gi.test(resultBuilder.getHtmlString()))
             resultBuilder.endChild("tr");
-        if (/^<tr[^>]*>/gi.test(resultBuilder._getHtmlString())) {
+        if (/^<tr[^>]*>/gi.test(resultBuilder.getHtmlString())) {
             const builder = new HtmlBuilder();
             builder
                 .startChild('table')
@@ -620,7 +517,7 @@ export class HtmlExporter {
                 .assignFrom(resultBuilder);
             resultBuilder = builder;
         }
-        if (/<\/tr>$/gi.test(resultBuilder._getHtmlString()))
+        if (/<\/tr>$/gi.test(resultBuilder.getHtmlString()))
             resultBuilder
                 .endChild('tbody')
                 .endChild('table');
@@ -634,32 +531,58 @@ export class HtmlExporter {
                 .endChild('span');
         return resultBuilder;
     }
+    addParentTableRecursively(model, builder, parentCell, paragraphStartPosition) {
+        const parentRow = parentCell.parentRow;
+        const parentTable = parentRow.parentTable;
+        if (parentTable.parentCell)
+            this.addParentTableRecursively(model, builder, parentTable.parentCell, paragraphStartPosition);
+        if (parentTable.getStartPosition() === paragraphStartPosition) {
+            builder
+                .startChild('table')
+                .configure(e => e.style.cssText = this.getTableStyle(model, parentTable))
+                .startChild('tbody');
+        }
+        if (parentRow.getStartPosition() === paragraphStartPosition) {
+            builder.startChild('tr');
+            if (parentRow.gridBefore > 0) {
+                builder
+                    .startChild('td')
+                    .configure(el => {
+                    el.style.cssText = "mso-cell-special:placeholder";
+                    el.setAttribute('colspan', parentRow.gridBefore.toString());
+                    el.innerHTML = "&nbsp;";
+                })
+                    .endChild('td');
+            }
+        }
+        if (parentCell.startParagraphPosition.value === paragraphStartPosition) {
+            builder
+                .startChild('td')
+                .configure((el) => {
+                el.style.cssText = this.getCellStyle(model, parentCell);
+                if (parentCell.columnSpan > 1)
+                    el.setAttribute('colspan', parentCell.columnSpan.toString());
+            });
+        }
+    }
     getHtmlText(text) {
-        let result = new HtmlBuilder();
+        const result = new HtmlBuilder();
         for (let i = 0; i < text.length; i++) {
             const char = text.charAt(i);
-            if (char == RichUtils.specialCharacters.PageBreak)
-                result.addCallback((builder) => {
-                    builder
-                        .startChild('br')
-                        .configure((el) => {
-                        el.style.cssText = "page-break-before:always";
-                    })
-                        .endChild('br');
-                });
-            else if (char == RichUtils.specialCharacters.LineBreak)
-                result.addCallback((builder) => {
-                    builder
-                        .startChild('br')
-                        .endChild('br');
-                });
-            else {
-                result.addCallback((builder) => {
-                    builder.configure((el) => {
-                        el.innerHTML += EncodeUtils.encodeHtml(text.substr(i));
+            switch (char) {
+                case RichUtils.specialCharacters.PageBreak:
+                case RichUtils.specialCharacters.ColumnBreak:
+                case RichUtils.specialCharacters.SectionMark:
+                    result.addCallback((builder) => builder.addBreak("break-before:always"));
+                    break;
+                case RichUtils.specialCharacters.LineBreak:
+                    result.addCallback((builder) => builder.addBreak());
+                    break;
+                default:
+                    result.addCallback((builder) => {
+                        builder.configure((el) => el.innerHTML += EncodeUtils.encodeHtml(text.substring(i)));
                     });
-                });
-                break;
+                    return result;
             }
         }
         return result;
@@ -693,7 +616,7 @@ export class HtmlExporter {
                 default:
                     break;
             }
-            const rgba = this.control.modelManager.model.colorProvider.getRgbaFromModelColor(borderInfo.color);
+            const rgba = this.colorProvider.getRgbaFromModelColor(borderInfo.color);
             if (ColorUtils.getAlpha(rgba) > 0)
                 borderStyle += " " + ColorHelper.getCssStringInternal(rgba);
         }

package/lib/common/formats/html/import/html-document-importer.d.ts

@@ -0,0 +1,15 @@
+import { RichOptions } from "../../../model/options/rich-options";
+import { MaskedCharacterPropertiesBundle } from "../../../rich-utils/properties-bundle";
+import { FormatImportCallback, FormatImportReject, IDocumentImporter } from "../../i-document-importer";
+export declare class HtmlDocumentImporter implements IDocumentImporter {
+    private documentModel;
+    private modelManager;
+    private formatImagesImporter;
+    importFromFile(blob: Blob, modelOptions: RichOptions, callback: FormatImportCallback, reject: FormatImportReject): void;
+    importFromString(text: string, modelOptions: RichOptions, callback: FormatImportCallback, reject: FormatImportReject, charPropsBundle?: MaskedCharacterPropertiesBundle): void;
+    private init;
+    private fillModel;
+    private createMaskedCharacterPropertiesBundle;
+    private createContainer;
+    private removeLastParagraph;
+}

package/lib/common/formats/html/import/html-document-importer.js

@@ -0,0 +1,84 @@
+import { EmptyBatchUpdatableObject } from "@devexpress/utils/lib/class/batch-updatable";
+import { ModelChecker } from "../../../model/model-checks/check-all";
+import { ModelCreatorOptions } from "../../../model/creator/options";
+import { ModelCreator } from "../../../model/creator/creator";
+import { MaskedCharacterProperties } from "../../../model/character/character-properties";
+import { SubDocumentPosition } from "../../../model/sub-document";
+import { ClientModelManager } from "../../../model-manager";
+import { MaskedCharacterPropertiesBundle } from "../../../rich-utils/properties-bundle";
+import { Measurer } from "../../../measurer/measurer";
+import { DocumentImporterErrors } from "../../document-importer-errors";
+import { FormatImagesImporter } from "../../utils/images-import";
+import { HtmlImporter } from "./html-importer";
+export class HtmlDocumentImporter {
+    importFromFile(blob, modelOptions, callback, reject) {
+        this.init(modelOptions);
+        const reader = new FileReader();
+        reader.onload = () => {
+            this.importFromString(reader.result, modelOptions, callback, reject);
+        };
+        reader.onerror = (_ev) => {
+            reject(DocumentImporterErrors.HtmlFileReaderError);
+        };
+        reader.readAsText(blob);
+    }
+    importFromString(text, modelOptions, callback, reject, charPropsBundle) {
+        this.init(modelOptions);
+        try {
+            this.fillModel(text, charPropsBundle);
+            if (!new ModelChecker(this.documentModel).checkAll())
+                throw new Error();
+        }
+        catch (err) {
+            reject(DocumentImporterErrors.HtmlImportError);
+            return;
+        }
+        callback(this.documentModel, this.formatImagesImporter);
+    }
+    init(modelOptions) {
+        const options = new ModelCreatorOptions();
+        options.addSection = true;
+        options.addParagraph = true;
+        this.formatImagesImporter = new FormatImagesImporter();
+        this.documentModel = new ModelCreator(options).createModel(modelOptions).fillModel();
+        this.modelManager = new ClientModelManager(this.documentModel, modelOptions, new EmptyBatchUpdatableObject());
+    }
+    fillModel(text, charPropsBundle) {
+        const container = document.body.appendChild(this.createContainer());
+        try {
+            container.innerHTML = HtmlImporter.convertHtml(text);
+            charPropsBundle = charPropsBundle || this.createMaskedCharacterPropertiesBundle();
+            const measurer = new Measurer('');
+            const position = new SubDocumentPosition(this.documentModel.mainSubDocument, 0);
+            const initElements = container.childNodes;
+            new HtmlImporter(this.modelManager, measurer, position, initElements, charPropsBundle).import();
+            this.removeLastParagraph();
+        }
+        finally {
+            document.body.removeChild(container);
+        }
+    }
+    createMaskedCharacterPropertiesBundle() {
+        const maskedCharacterProperties = MaskedCharacterProperties.createDefault(this.documentModel);
+        const style = this.modelManager.model.stylesManager.getDefaultCharacterStyle();
+        return new MaskedCharacterPropertiesBundle(maskedCharacterProperties, style);
+    }
+    createContainer() {
+        const container = document.createElement('DIV');
+        container.id = 'import-container';
+        container.style.width = '0';
+        container.style.height = '0';
+        container.style.overflow = 'hidden';
+        return container;
+    }
+    removeLastParagraph() {
+        const lastParagraph = this.documentModel.mainSubDocument.getLastParagraph();
+        if (lastParagraph.length > 1)
+            return;
+        const section = this.documentModel.getSectionByPosition(lastParagraph.startLogPosition.value);
+        const lastChunk = this.documentModel.mainSubDocument.getLastChunk();
+        this.documentModel.mainSubDocument.paragraphs.pop();
+        section.setLength(this.documentModel.mainSubDocument, section.getLength() - lastParagraph.length);
+        lastChunk.removeRun(lastChunk.textRuns.length - 1);
+    }
+}

package/lib/common/formats/html/import/html-importer.d.ts

@@ -62,6 +62,7 @@ export declare class HtmlImporter {
     getLastImportedRun(): RunInfo;
     columnSize(): Size;
     static convertHtml(html: string): string;
+    private static extractBodyContent;
     private static MapMissTablePropertiesByTagNames;
     private static MapShorthandProperty;
 }

package/lib/common/formats/html/import/html-importer.js

@@ -289,7 +289,7 @@ export class HtmlImporter {
                 html = html.replace(val, val.replace(/\n/gi, "<p/>"));
             });
         }
-        html = html.replace(/(\n+\s+)|(\s+\n+)/gi, ' ');
+        html = html.replace(/(\r*\n+\s+)|(\s+\r*\n+)/gi, ' ');
         html = html.replace(/\n+/gi, ' ');
         html = html.replace(/\n/gi, RichUtils.specialCharacters.LineBreak);
         html = html.replace(/(<\/(?!(p)+)(\s*[^>]*)?>)<\/td>/gi, '$1<p>&nbsp;</p></td>');
@@ -298,9 +298,21 @@ export class HtmlImporter {
         html = html.replace(/<u>([\s\S]*?)<\/u>/gi, '<span style="text-decoration: underline">$1</span>');
         html = html.replace(/<s>([\s\S]*?)<\/s>/gi, '<span style="text-decoration: line-through">$1</span>');
         html = html.replace(/<\/([^\s>]+)(\s[^>]*)?><br><\/([^\s>]+)(\s[^>]*)?>/gi, '');
+        html = this.extractBodyContent(html);
         Log.print(LogSource.HtmlImporter, "convertHtml", () => html);
         return html;
     }
+    static extractBodyContent(html) {
+        const startTagMatch = /<body[^>]*>\s*/i.exec(html);
+        let startIndex = 0;
+        if (startTagMatch)
+            startIndex = startTagMatch.index + startTagMatch[0].length;
+        const endTagMatch = /\s*<\/body[^>]*>\s*/i.exec(html);
+        let endIndex = html.length;
+        if (endTagMatch)
+            endIndex = endTagMatch.index;
+        return html.substring(startIndex, endIndex);
+    }
 }
 HtmlImporter.importers = null;
 HtmlImporter.MapMissTablePropertiesByTagNames = new MapCreator()

package/lib/common/formats/html/import/insert-html.d.ts

@@ -0,0 +1,4 @@
+import { FixedInterval } from "@devexpress/utils/lib/intervals/fixed";
+import { SubDocument } from "../../../model/sub-document";
+import { IProcessor } from "../../../processor";
+export declare function insertHtmlInSubDocument(processor: IProcessor, subDocument: SubDocument, position: number, htmlText: string, callback: (interval: FixedInterval) => void): void;

package/lib/common/formats/html/import/insert-html.js

@@ -0,0 +1,5 @@
+import { HtmlDocumentImporter } from "./html-document-importer";
+import { getAfterInsertCallback, getAfterInsertReject } from "../../callback-helpers";
+export function insertHtmlInSubDocument(processor, subDocument, position, htmlText, callback) {
+    new HtmlDocumentImporter().importFromString(htmlText, processor.modelManager.richOptions, getAfterInsertCallback(processor, subDocument, position, callback), getAfterInsertReject(callback));
+}

package/lib/common/formats/html/import/utils/paragraph-properties-utils.d.ts

@@ -11,6 +11,7 @@ export declare class HtmlImporterMaskedParagraphProperties {
     private importRightIndent;
     private importSpacingBefore;
     private importSpacingAfter;
+    private importBackColor;
     private importLineSpacing;
     private setSpacingAsMultiple;
     private importTopBorder;