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

package/lib/client/formats/docx/utils/constants.d.ts

@@ -137,4 +137,6 @@ export declare class ContentType {
     static readonly numbering = "application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml";
     static readonly styles = "application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml";
     static readonly settings = "application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml";
+    static readonly footnotes = "application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml";
+    static readonly endnotes = "application/vnd.openxmlformats-officedocument.wordprocessingml.endnotes+xml";
 }

package/lib/client/formats/docx/utils/constants.js

@@ -191,3 +191,5 @@ ContentType.mainDocument = 'application/vnd.openxmlformats-officedocument.wordpr
 ContentType.numbering = 'application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml';
 ContentType.styles = 'application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml';
 ContentType.settings = 'application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml';
+ContentType.footnotes = 'application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml';
+ContentType.endnotes = 'application/vnd.openxmlformats-officedocument.wordprocessingml.endnotes+xml';

package/lib/client/model-api/formats/enum.d.ts

@@ -1,5 +1,6 @@
 export declare enum DocumentFormatApi {
     PlainText = 1,
     Rtf = 2,
+    Html = 3,
     OpenXml = 4
 }

package/lib/client/model-api/formats/enum.js

@@ -2,5 +2,6 @@ export var DocumentFormatApi;
 (function (DocumentFormatApi) {
     DocumentFormatApi[DocumentFormatApi["PlainText"] = 1] = "PlainText";
     DocumentFormatApi[DocumentFormatApi["Rtf"] = 2] = "Rtf";
+    DocumentFormatApi[DocumentFormatApi["Html"] = 3] = "Html";
     DocumentFormatApi[DocumentFormatApi["OpenXml"] = 4] = "OpenXml";
 })(DocumentFormatApi || (DocumentFormatApi = {}));

package/lib/client/model-api/formats/exporter.d.ts

@@ -1,4 +1,3 @@
-import { DocumentFormat } from '../../../common/document-format';
-import { ModelManipulator } from '../../../common/model/manipulators/model-manipulator';
-export declare function exportModelToBase64(modelManipulator: ModelManipulator, format: DocumentFormat, callback: (base64: string) => void): void;
-export declare function exportModelToBlob(modelManipulator: ModelManipulator, format: DocumentFormat, callback: (blob: Blob) => void): void;
+import { IExportModelOptions } from '../../../common/formats/i-document-exporter';
+export declare function exportModelToBase64(exportModelOptions: IExportModelOptions, callback: (base64: string) => void): void;
+export declare function exportModelToBlob(exportModelOptions: IExportModelOptions, callback: (blob: Blob) => void): void;

package/lib/client/model-api/formats/exporter.js

@@ -5,17 +5,20 @@ import { DocxExporter } from '../../formats/docx/export/exporter';
 import { RtfExporter } from '../../../common/formats/rtf/export/exporter';
 import { RtfDocumentExporterOptions } from '../../../common/formats/rtf/export/rtf-document-exporter-options';
 import { TxtExporter } from '../../../common/formats/txt/txt-exporter';
-export function exportModelToBase64(modelManipulator, format, callback) {
-    getExporter(modelManipulator, format).exportToBase64(callback);
+import { HtmlDocumentExporter } from '../../../common/formats/html/export/html-document-exporter';
+export function exportModelToBase64(exportModelOptions, callback) {
+    getExporter(exportModelOptions).exportToBase64(callback);
 }
-export function exportModelToBlob(modelManipulator, format, callback) {
-    getExporter(modelManipulator, format).exportToBlob(callback);
+export function exportModelToBlob(exportModelOptions, callback) {
+    getExporter(exportModelOptions).exportToBlob(callback);
 }
-function getExporter(modelManipulator, format) {
-    switch (format) {
+function getExporter(exportModelOptions) {
+    const { modelManipulator } = exportModelOptions.modelManager;
+    switch (exportModelOptions.documentFormat) {
         case DocumentFormat.OpenXml: return new DocxExporter(modelManipulator, new DocxExportOptions());
         case DocumentFormat.Rtf: return new RtfExporter(modelManipulator, new RtfDocumentExporterOptions());
         case DocumentFormat.PlainText: return new TxtExporter(modelManipulator, new DocumentExporterOptions());
+        case DocumentFormat.Html: return new HtmlDocumentExporter(exportModelOptions, new DocumentExporterOptions());
         default:
             console.log('Unsupported format');
             return null;

package/lib/client/model-api/formats/importer.js

@@ -8,6 +8,7 @@ import { RtfImporterOptions } from '../../../common/formats/rtf/import/importer-
 import { RtfImporter } from '../../../common/formats/rtf/import/rtf-importer';
 import { TxtImporter } from '../../../common/formats/txt/txt-importer';
 import { getAfterInsertCallback, getAfterInsertReject } from '../../../common/formats/callback-helpers';
+import { HtmlDocumentImporter } from '../../../common/formats/html/import/html-document-importer';
 export function createImporter(format, throwInvalidFile = reason => {
     throw new Error(Errors.InternalException + " " + reason);
 }) {
@@ -15,6 +16,7 @@ export function createImporter(format, throwInvalidFile = reason => {
         case DocumentFormat.OpenXml: return new Importer(new ImporterOptions(throwInvalidFile));
         case DocumentFormat.Rtf: return new RtfImporter(new RtfImporterOptions(throwInvalidFile));
         case DocumentFormat.PlainText: return new TxtImporter();
+        case DocumentFormat.Html: return new HtmlDocumentImporter();
         default:
             console.log('Unsupported format');
             return null;

package/lib/client/model-api/sub-document.d.ts

@@ -18,7 +18,9 @@ export declare enum SubDocumentTypeApi {
     Main = 0,
     Header = 1,
     Footer = 2,
-    TextBox = 3
+    TextBox = 3,
+    FootNote = 4,
+    EndNote = 5
 }
 export declare enum HeaderFooterTypeApi {
     First = 0,
@@ -55,6 +57,8 @@ export declare class SubDocumentApi {
     insertSectionBreak(position: number, type: SectionBreakTypeApi): SectionApi;
     insertPicture(position: number, base64: string, size?: SizeApi, callback?: (interval: IntervalApi) => void): void;
     insertParagraph(position: number): ParagraphApi;
+    insertHtml(position: number, htmlText: string, callback?: (interval: IntervalApi) => void): void;
+    getHtml(interval?: IInterval): string;
     insertRtf(position: number, rtfText: string, callback?: (interval: IntervalApi, isRtfValid: boolean) => void): void;
     getRtf(interval?: IInterval): string;
     insertContent(position: number, content: string | File | Blob | ArrayBuffer, documentFormat: DocumentFormatApi, callback?: (interval: IntervalApi, success: boolean) => void): void;
@@ -62,7 +66,7 @@ export declare class SubDocumentApi {
     getText(interval?: IInterval): string;
     getCharacterProperties(interval: IInterval): CharacterPropertiesApi;
     setCharacterProperties(interval: IInterval, characterProperties: ICharacterProperties): void;
-    private _checkInterval;
     getParagraphProperties(interval: IInterval): ParagraphPropertiesApi;
     setParagraphProperties(interval: IInterval, paragraphProperties: IParagraphProperties): void;
+    private _checkInterval;
 }

package/lib/client/model-api/sub-document.js

@@ -15,6 +15,10 @@ import { Constants } from '@devexpress/utils/lib/constants';
 import { Size } from '@devexpress/utils/lib/geometry/size';
 import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { MathUtils } from '@devexpress/utils/lib/utils/math';
+import { isDefined } from '@devexpress/utils/lib/utils/common';
+import { getRtfFromSubDocumentPublic, insertRtfInSubDocumentPublic } from '../../common/formats/rtf/importer-in-subdocument';
+import { insertHtmlInSubDocument } from '../../common/formats/html/import/insert-html';
+import { getHtmlFromSubDocument } from '../../common/formats/html/export/get-html';
 import { getRestrictedInterval } from './api-utils/api-utils';
 import { ModelParametersChecker } from './api-utils/model-parameter-checker';
 import { getCharacterProperties, setCharacterProperties, } from './character-properties';
@@ -30,14 +34,14 @@ import { convertToIntervalApi, IntervalApi } from './interval';
 import { convertFromParagraphPropertiesApi, convertToParagraphPropertiesApi, ParagraphApi } from './paragraph';
 import { SectionApi } from './section';
 import { insertTextThroughApi } from './api-utils/insert-text';
-import { isDefined } from '@devexpress/utils/lib/utils/common';
-import { getRtfFromSubDocumentPublic, insertRtfInSubDocumentPublic } from '../../common/formats/rtf/importer-in-subdocument';
 export var SubDocumentTypeApi;
 (function (SubDocumentTypeApi) {
     SubDocumentTypeApi[SubDocumentTypeApi["Main"] = 0] = "Main";
     SubDocumentTypeApi[SubDocumentTypeApi["Header"] = 1] = "Header";
     SubDocumentTypeApi[SubDocumentTypeApi["Footer"] = 2] = "Footer";
     SubDocumentTypeApi[SubDocumentTypeApi["TextBox"] = 3] = "TextBox";
+    SubDocumentTypeApi[SubDocumentTypeApi["FootNote"] = 4] = "FootNote";
+    SubDocumentTypeApi[SubDocumentTypeApi["EndNote"] = 5] = "EndNote";
 })(SubDocumentTypeApi || (SubDocumentTypeApi = {}));
 export var HeaderFooterTypeApi;
 (function (HeaderFooterTypeApi) {
@@ -173,6 +177,23 @@ export class SubDocumentApi {
         this._processor.endUpdate();
         return new ParagraphApi(this._processor, this._subDocument.getParagraphByPosition(position));
     }
+    insertHtml(position, htmlText, callback) {
+        const positionDescriptor = ApiParametersChecker.numberDescriptor('position', (val) => val);
+        const htmlTextDescriptor = ApiParametersChecker.stringDescriptor('htmlText', (s) => s, false);
+        const callbackDescriptor = ApiParametersChecker.functionDescriptor('callback', (val) => val);
+        position = ApiParametersChecker.check(position, 1, false, [positionDescriptor]);
+        position = MathUtils.restrictValue(position, 0, this._subDocument.getDocumentEndPosition() - 1);
+        htmlText = ApiParametersChecker.check(htmlText, 2, false, [htmlTextDescriptor]);
+        callback = ApiParametersChecker.check(callback, 3, true, [callbackDescriptor]);
+        if (!callback)
+            callback = () => { };
+        const callBackWrap = (interval) => callback(isDefined(interval) ? convertToIntervalApi(interval) : null);
+        insertHtmlInSubDocument(this._processor, this._subDocument, position, htmlText, callBackWrap);
+    }
+    getHtml(interval) {
+        const coreInterval = this._checkInterval(interval);
+        return getHtmlFromSubDocument(this._processor, this._subDocument, coreInterval);
+    }
     insertRtf(position, rtfText, callback) {
         position = ApiParametersChecker.check(position, 1, false, [
             ApiParametersChecker.numberDescriptor('position', (val) => val)
@@ -189,15 +210,7 @@ export class SubDocumentApi {
         insertRtfInSubDocumentPublic(this._processor, this._subDocument, position, rtfText, (interval, isRtfValid) => callback(isDefined(interval) ? convertToIntervalApi(interval) : null, isRtfValid));
     }
     getRtf(interval) {
-        let coreInterval;
-        if (interval) {
-            coreInterval = ApiParametersChecker.check(interval, 1, true, [
-                ModelParametersChecker.intervalDescriptor("interval", (interval) => getRestrictedInterval(interval, 0, this._subDocument.getDocumentEndPosition()))
-            ]);
-        }
-        else {
-            coreInterval = this._subDocument.interval;
-        }
+        const coreInterval = this._checkInterval(interval);
         return getRtfFromSubDocumentPublic(this._processor.modelManager.richOptions, this._subDocument, coreInterval);
     }
     insertContent(position, content, documentFormat, callback) {
@@ -222,9 +235,7 @@ export class SubDocumentApi {
         insertContentInSubDocumentPublic(this._processor, this._subDocument, position, content, coreDocumentFormat, (interval, isRtfValid) => callback(convertToIntervalApi(interval), isRtfValid));
     }
     deleteText(interval) {
-        const coreInterval = ApiParametersChecker.check(interval, 1, false, [
-            ModelParametersChecker.intervalDescriptor("interval", (interval) => getRestrictedInterval(interval, 0, this._subDocument.getDocumentEndPosition()))
-        ]);
+        const coreInterval = this._checkInterval(interval);
         if (coreInterval.length) {
             this._processor.beginUpdate();
             this._processor.modelManager.modelManipulator.range.removeInterval(new SubDocumentInterval(this._subDocument, coreInterval), true, false);
@@ -232,14 +243,8 @@ export class SubDocumentApi {
         }
     }
     getText(interval) {
-        if (interval) {
-            const coreInterval = ApiParametersChecker.check(interval, 1, false, [
-                ModelParametersChecker.intervalDescriptor("interval", (interval) => getRestrictedInterval(interval, 0, this._subDocument.getDocumentEndPosition()))
-            ]);
-            return this._subDocument.getText(coreInterval);
-        }
-        else
-            return this._subDocument.getText(this._subDocument.interval);
+        const coreInterval = this._checkInterval(interval);
+        return this._subDocument.getText(coreInterval);
     }
     getCharacterProperties(interval) {
         const coreInterval = this._checkInterval(interval);
@@ -249,29 +254,26 @@ export class SubDocumentApi {
         const coreInterval = this._checkInterval(interval);
         setCharacterProperties(this._processor, this._subDocument, coreInterval, characterProperties);
     }
-    _checkInterval(interval) {
-        const getResult = (interval) => getRestrictedInterval(interval, 0, this._subDocument.getDocumentEndPosition());
-        const intervalDescriptor = ModelParametersChecker.intervalDescriptor("interval", getResult);
-        return ApiParametersChecker.check(interval, 1, false, [intervalDescriptor]);
-    }
     getParagraphProperties(interval) {
-        const coreInterval = ApiParametersChecker.check(interval, 1, false, [
-            ModelParametersChecker.intervalDescriptor("interval", (interval) => getRestrictedInterval(interval, 0, this._subDocument.getDocumentEndPosition()))
-        ]);
+        const coreInterval = this._checkInterval(interval);
         const inputPos = new InputPositionBase().setIntervals(new SelectionIntervalsInfo(this._subDocument, [coreInterval]));
         return convertToParagraphPropertiesApi(inputPos.getMergedParagraphPropertiesFull(), this._processor.modelManager.model.colorProvider);
     }
     setParagraphProperties(interval, paragraphProperties) {
-        const coreInterval = ApiParametersChecker.check(interval, 1, false, [
-            ModelParametersChecker.intervalDescriptor("interval", (interval) => getRestrictedInterval(interval, 0, this._subDocument.getDocumentEndPosition()))
-        ]);
+        const coreInterval = this._checkInterval(interval);
         const propertiesCore = convertFromParagraphPropertiesApi(paragraphProperties, 2);
-        const inputPos = new InputPositionBase()
-            .setIntervals(new SelectionIntervalsInfo(this._subDocument, [coreInterval]));
+        const inputPos = new InputPositionBase().setIntervals(new SelectionIntervalsInfo(this._subDocument, [coreInterval]));
         this._processor.beginUpdate();
         new ParagraphPropertiesApplier(this._processor.modelManager, inputPos, propertiesCore, this._subDocument, [coreInterval]).apply();
         this._processor.endUpdate();
     }
+    _checkInterval(value, parameterIndex = 1) {
+        if (!value)
+            return this._subDocument.interval;
+        const getResult = (interval) => getRestrictedInterval(interval, 0, this._subDocument.getDocumentEndPosition());
+        const intervalDescriptor = ModelParametersChecker.intervalDescriptor("interval", getResult);
+        return ApiParametersChecker.check(value, parameterIndex, false, [intervalDescriptor]);
+    }
 }
 function insertSpecialCharacter(position, text, processor, subDocument) {
     position = ApiParametersChecker.check(position, 1, false, [

package/lib/client/model-api/table/table-borders.d.ts

@@ -13,7 +13,7 @@ export interface ITableCellBorders {
     bottom?: TableBorderApi;
     left?: TableBorderApi;
 }
-export declare class TableBordersBaseApi {
+export declare abstract class TableBordersBaseApi {
     top: TableBorderApi;
     right: TableBorderApi;
     bottom: TableBorderApi;

package/lib/client/public/commands/enum.d.ts

@@ -6,6 +6,7 @@ export declare enum FileTabCommandId {
     DownloadDocx = 418,
     DownloadRtf = 419,
     DownloadTxt = 420,
+    DownloadHtml = 421,
     PrintDocument = 416
 }
 export declare enum HomeTabCommandId {

package/lib/client/public/commands/enum.js

@@ -7,6 +7,7 @@ export var FileTabCommandId;
     FileTabCommandId[FileTabCommandId["DownloadDocx"] = 418] = "DownloadDocx";
     FileTabCommandId[FileTabCommandId["DownloadRtf"] = 419] = "DownloadRtf";
     FileTabCommandId[FileTabCommandId["DownloadTxt"] = 420] = "DownloadTxt";
+    FileTabCommandId[FileTabCommandId["DownloadHtml"] = 421] = "DownloadHtml";
     FileTabCommandId[FileTabCommandId["PrintDocument"] = 416] = "PrintDocument";
 })(FileTabCommandId || (FileTabCommandId = {}));
 export var HomeTabCommandId;

package/lib/client/public/document-processor.d.ts

@@ -2,6 +2,8 @@ import { IModelManager } from '../../common/model-manager';
 import { DocumentModel } from '../../common/model/document-model';
 import { FieldRequestManager } from '../../common/model/fields/field-request-manager';
 import { RichOptions } from '../../common/model/options/rich-options';
+import { IRichEditUnitConverter } from '../../common/utils/unit-converter';
+import { DocumentRenderer } from '../../common/canvas/renderes/common/document-renderer';
 import { DocumentProcessorBase } from '../document-processor/processor';
 import { DocumentProcessorBaseApi } from '../document-processor/public/processor';
 export declare class DocumentProcessorClient extends DocumentProcessorBase {
@@ -10,5 +12,5 @@ export declare class DocumentProcessorClient extends DocumentProcessorBase {
 }
 export declare class DocumentProcessorApi extends DocumentProcessorBaseApi {
     protected _processor: DocumentProcessorClient;
-    constructor(options: RichOptions);
+    constructor(options: RichOptions, documentRenderer: DocumentRenderer, uiUnitConverter: IRichEditUnitConverter, sessionGuid: string, clientGuid: string);
 }

package/lib/client/public/document-processor.js

@@ -12,8 +12,8 @@ export class DocumentProcessorClient extends DocumentProcessorBase {
     }
 }
 export class DocumentProcessorApi extends DocumentProcessorBaseApi {
-    constructor(options) {
+    constructor(options, documentRenderer, uiUnitConverter, sessionGuid, clientGuid) {
         super();
-        this._processor = new DocumentProcessorClient(options);
+        this._processor = new DocumentProcessorClient(options, documentRenderer, uiUnitConverter, sessionGuid, clientGuid);
     }
 }

package/lib/client/public/ribbon/item-ids.d.ts

@@ -6,6 +6,7 @@ export declare enum FileTabItemId {
     DownloadDocx = 418,
     DownloadRtf = 419,
     DownloadTxt = 420,
+    DownloadHtml = 421,
     PrintDocument = 416
 }
 export declare enum HomeTabItemId {

package/lib/client/public/ribbon/item-ids.js

@@ -7,6 +7,7 @@ export var FileTabItemId;
     FileTabItemId[FileTabItemId["DownloadDocx"] = 418] = "DownloadDocx";
     FileTabItemId[FileTabItemId["DownloadRtf"] = 419] = "DownloadRtf";
     FileTabItemId[FileTabItemId["DownloadTxt"] = 420] = "DownloadTxt";
+    FileTabItemId[FileTabItemId["DownloadHtml"] = 421] = "DownloadHtml";
     FileTabItemId[FileTabItemId["PrintDocument"] = 416] = "PrintDocument";
 })(FileTabItemId || (FileTabItemId = {}));
 export var HomeTabItemId;

package/lib/client/public/rich-edit.d.ts

@@ -27,6 +27,7 @@ import { NusaSettings } from './nusa/settings';
 import { IPrintingSettings } from './options';
 import { RibbonItemId } from './ribbon/item-ids';
 import { Ribbon } from './ribbon/ribbon';
+import '../../common/utils/_license';
 declare class RichEditPublic {
     readonly document: RichEditDocument;
     readonly layout: RichEditLayout;
@@ -126,7 +127,7 @@ export { BookmarkApi as Bookmark } from '../model-api/bookmark';
 export { BookmarkClientApi as BookmarkBase } from '../api/bookmark';
 export { PaperSizeApi as PaperSize } from '../model-api/section';
 export { TableApi as Table } from '../model-api/table/table';
-export { TableBordersApi as TableBorders, TableCellBordersApi as TableCellBorders, TableBorderApi as TableBorder, ITableBorders, ITableCellBorders, } from '../model-api/table/table-borders';
+export { TableBordersBaseApi as TableBordersBase, TableBordersApi as TableBorders, TableCellBordersApi as TableCellBorders, TableBorderApi as TableBorder, ITableBorders, ITableCellBorders, } from '../model-api/table/table-borders';
 export { TableStyleOptionsApi as TableStyleOptions } from '../model-api/table/table-style-options';
 export { TableWidthTypeApi as TableWidthType, TableContentVerticalAlignmentApi as TableContentVerticalAlignment, TableContentHorizontalAlignmentApi as TableContentHorizontalAlignment, TableRowHeightTypeApi as TableRowHeightType, BorderLineStyleApi as BorderLineStyle, } from '../model-api/table/enums';
 export { SectionApi as Section } from '../model-api/section';

package/lib/client/public/rich-edit.js

@@ -14,7 +14,7 @@ import { Base64Utils } from '@devexpress/utils/lib/utils/base64';
 import { isDefined, isString } from '@devexpress/utils/lib/utils/common';
 import { FileUtils } from '@devexpress/utils/lib/utils/file';
 import { KeyUtils } from '@devexpress/utils/lib/utils/key';
-import { OpenXmlMimeType, PlainTextMimeType, RtfMimeType } from '@devexpress/utils/lib/utils/mime-type';
+import { HtmlMimeType, OpenXmlMimeType, PlainTextMimeType, RtfMimeType, } from '@devexpress/utils/lib/utils/mime-type';
 import { EventArgs } from '../document-processor/docvar-args';
 import { DocumentProcessorBaseApi } from '../document-processor/public/processor';
 import { FieldNameApi } from '../model-api/field';
@@ -41,6 +41,7 @@ import { ContextMenuRuntime } from './context-menu/menu';
 import { DocumentProcessorApi } from './document-processor';
 import { NusaSettings } from './nusa/settings';
 import { Utils } from './utils';
+import '../../common/utils/_license';
 class RichEditPublic {
     constructor(htmlElement, options) {
         this._native = new ClientRichEdit(htmlElement, options, this);
@@ -86,12 +87,12 @@ class RichEditPublic {
     }
     get events() { return this._native.events; }
     exportToBase64(callback, documentFormat) {
-        const format = isDefined(documentFormat) ? documentFormat : this._native.core.getExportDocumentFormat();
-        exportModelToBase64(this._native.core.modelManager.modelManipulator, format, callback);
+        const exportModelOptions = this._native.core.getExportModelOptions({ documentFormat: documentFormat });
+        exportModelToBase64(exportModelOptions, callback);
     }
     exportToBlob(callback, documentFormat) {
-        const format = isDefined(documentFormat) ? documentFormat : this._native.core.getExportDocumentFormat();
-        exportModelToBlob(this._native.core.modelManager.modelManipulator, format, callback);
+        const exportModelOptions = this._native.core.getExportModelOptions({ documentFormat: documentFormat });
+        exportModelToBlob(exportModelOptions, callback);
     }
     exportToArrayBuffer(callback, documentFormat) {
         this.exportToBlob(blob => {
@@ -113,10 +114,14 @@ class RichEditPublic {
             case DocumentFormat.PlainText:
                 mimeType = PlainTextMimeType;
                 break;
+            case DocumentFormat.Html:
+                mimeType = HtmlMimeType;
+                break;
         }
-        const fileName = OpenDocumentCommand.getFileNameWithoutExtension(this.documentName, format);
+        const fileName = OpenDocumentCommand.getFileNameWithoutExtension(this.documentName);
         const extension = Utils.documentFormatToExtension(format);
-        exportModelToBlob(this._native.core.modelManager.modelManipulator, format, blob => callback(FileUtils.createFile([blob], fileName + extension, { type: mimeType })));
+        const exportModelOptions = this._native.core.getExportModelOptions({ documentFormat: format });
+        exportModelToBlob(exportModelOptions, blob => callback(FileUtils.createFile([blob], fileName + extension, { type: mimeType })));
     }
     exportToPdf(documentName, options) {
         const core = this._native.core;
@@ -282,7 +287,9 @@ class RichEditPublic {
         const modelManager = this._native.core.modelManager;
         const procOptions = modelManager.richOptions.clone();
         procOptions.spellChecker.isEnabled = false;
-        const proc = new DocumentProcessorApi(procOptions);
+        const { viewManager, uiUnitConverter } = this._native.core;
+        const { sguid, cguid } = this._native.core.getGuidParams();
+        const proc = new DocumentProcessorApi(procOptions, viewManager.renderer, uiUnitConverter, sguid, cguid);
         if (options.cloneCurrentModel)
             proc._importInnerDocument(modelManager.model.clone());
         else
@@ -334,7 +341,7 @@ export { BookmarkApi as Bookmark } from '../model-api/bookmark';
 export { BookmarkClientApi as BookmarkBase } from '../api/bookmark';
 export { PaperSizeApi as PaperSize } from '../model-api/section';
 export { TableApi as Table } from '../model-api/table/table';
-export { TableBordersApi as TableBorders, TableCellBordersApi as TableCellBorders, TableBorderApi as TableBorder, } from '../model-api/table/table-borders';
+export { TableBordersBaseApi as TableBordersBase, TableBordersApi as TableBorders, TableCellBordersApi as TableCellBorders, TableBorderApi as TableBorder, } from '../model-api/table/table-borders';
 export { TableStyleOptionsApi as TableStyleOptions } from '../model-api/table/table-style-options';
 export { TableWidthTypeApi as TableWidthType, TableContentVerticalAlignmentApi as TableContentVerticalAlignment, TableContentHorizontalAlignmentApi as TableContentHorizontalAlignment, TableRowHeightTypeApi as TableRowHeightType, BorderLineStyleApi as BorderLineStyle, } from '../model-api/table/enums';
 export { SectionApi as Section } from '../model-api/section';

package/lib/common/canvas/canvas-manager.js

@@ -73,7 +73,7 @@ export class CanvasManager extends BatchUpdatableObject {
             DomUtils.removeClassName(this.viewManager.canvas, CSSCLASS_FOCUSED);
     }
     getCanvasWidth() {
-        return SizeUtils.getClientWidth(this.viewManager.canvas);
+        return SizeUtils.getOffsetWidth(this.viewManager.canvas.firstElementChild);
     }
     onCanvasMouseWheel(evt) {
         if (!this.viewManager.layout)
@@ -276,6 +276,7 @@ export class CanvasManager extends BatchUpdatableObject {
     }
     initCommonEvents() {
         this.evtHandlersHolder.addListener(this.viewManager.canvas, "scroll", () => this.viewManager.canvasListener.onCanvasScroll());
+        this.evtHandlersHolder.addListener(this.viewManager.canvas, "focus", () => this.viewManager.control.focusManager.captureFocus());
     }
     initMouseEvents() {
         this.evtHandlersHolder.addListener(this.viewManager.canvas, "mousedown", this.onCanvasMouseDown.bind(this));

package/lib/common/canvas/picture-renderer.d.ts

@@ -1,5 +1,5 @@
 import { Size } from '@devexpress/utils/lib/geometry/size';
 import { CacheImageInfo } from '../model/caches/images';
 export interface IPictureRenderer {
-    renderPictureBoxContent(size: Size, cacheInfo: CacheImageInfo, tip: string): any;
+    renderPictureBoxContent(size: Size, cacheInfo: CacheImageInfo, tip: string, altText: string): any;
 }

package/lib/common/canvas/renderes/common/document-renderer.d.ts

@@ -108,7 +108,7 @@ export declare abstract class DocumentRenderer implements IPictureRenderer {
     protected static replaceFromContainerByObject(id: number, container: Node, cache: Record<number, Node>, newNode: Node): void;
     protected static insertToContainerByObject(id: number, container: Node, cache: Record<number, Node>, newNode: Node): void;
     protected static isPageElementEmpty(pageElement: Node): boolean;
-    renderPictureBoxContent(size: Size, cacheInfo: existingInfo, tip: string): HTMLImageElement;
+    renderPictureBoxContent(size: Size, cacheInfo: existingInfo, tip: string, altText: string): HTMLImageElement;
 }
 export declare class DocumentRendererPageCache {
     page: HTMLElement;

package/lib/common/canvas/renderes/common/document-renderer.js

@@ -26,6 +26,8 @@ import { NumberMapUtils } from '@devexpress/utils/lib/utils/map/number';
 import { MathUtils } from '@devexpress/utils/lib/utils/math';
 import { CanvasUtils } from '../../utils';
 import { ScrollState } from '../../../scroll/model-states';
+import { isDefined } from '@devexpress/utils/lib/utils/common';
+import { StringUtils } from '@devexpress/utils/lib/utils/string';
 export class SimpleViewCanvasSizeManager {
     constructor(canvasManager, control) {
         this.size = new Size(0, 0);
@@ -577,7 +579,7 @@ export class DocumentRenderer {
         return div;
     }
     renderPicture(box) {
-        return this.renderPictureBoxContent(box.createSize(), box.cacheInfo, box.hyperlinkTip);
+        return this.renderPictureBoxContent(box.createSize(), box.cacheInfo, box.hyperlinkTip, box.description);
     }
     renderFloatingPicture(box, renderLevelCalculator) {
         const element = DocumentRenderer.renderContainer(RendererClassNames.ANCHORED_PICTURE + " " + ZIndexHelper.getClassName(renderLevelCalculator.getRenderLevel(box.rendererLevel), zIndexCssClassType.AnchoredPicture));
@@ -822,13 +824,15 @@ export class DocumentRenderer {
     static isPageElementEmpty(pageElement) {
         return pageElement.childNodes.length == 0;
     }
-    renderPictureBoxContent(size, cacheInfo, tip) {
+    renderPictureBoxContent(size, cacheInfo, tip, altText) {
         const tooltip = tip ? CanvasUtils.buildHyperlinkTipString(tip, this.viewManager.stringResources.commonLabels.clickToFollowHyperlink, this.viewManager.fieldOptions) : "";
         const img = document.createElement('img');
         img.setAttribute('src', cacheInfo.base64);
         if (tooltip) {
             img.setAttribute('title', tooltip);
         }
+        if (isDefined(altText) && !StringUtils.isNullOrEmpty(altText))
+            img.alt = altText;
         img.style.cssText = `height: ${MathUtils.round(size.height, 3)}px; width: ${MathUtils.round(size.width, 3)}px; vertical-align: baseline`;
         img.setAttribute('class', RendererClassNames.PICTURE);
         return img;

package/lib/common/canvas/renderes/view-manager.js

@@ -25,6 +25,7 @@ import { MisspelledSelectionRenderer } from './selection-renderers/misspelled-se
 import { RangePermissionRenderer } from './selection-renderers/range-permission-renderer';
 import { SearchSelectionRenderer } from './selection-renderers/search-selection-renderer';
 import { SelectionRenderer } from './selection-renderers/selection-renderer';
+import { SizeUtils } from '../../../common/utils/size-utils';
 export class ViewManager {
     constructor(control, canvas, eventManager, stringResources, horizontalRuler, inputController, innerClientProperties, readOnlyPropertyHolder, layoutFormatterManagerHolder, internalApi, fieldOptions) {
         this.cache = [];
@@ -83,7 +84,8 @@ export class ViewManager {
             }
         }
         else if (this.sizes.isChanged(this.canvas)) {
-            this.sizes.setVisibleAreaSize(this.canvas.offsetWidth, this.canvas.offsetHeight);
+            const size = SizeUtils.getOffsetSize(this.canvas);
+            this.sizes.setVisibleAreaSize(size.width, size.height);
             this.scroll.onCanvasSizeChanged();
         }
     }

package/lib/common/clipboard-content-inserter.js

@@ -4,6 +4,7 @@ import { ImageLoadingOptions } from './model/manipulators/picture-manipulator/lo
 import { EmptyBatchUpdatableObject } from '@devexpress/utils/lib/class/batch-updatable';
 import { DataTransferUtils } from '@devexpress/utils/lib/utils/data-transfer';
 import { EvtUtils } from '@devexpress/utils/lib/utils/evt';
+import { HtmlMimeType } from '@devexpress/utils/lib/utils/mime-type';
 import { RtfImporterOptions } from './formats/rtf/import/importer-options';
 import { RtfImporter } from './formats/rtf/import/rtf-importer';
 import { SubDocumentInterval, SubDocumentPosition } from './model/sub-document';
@@ -17,7 +18,7 @@ export class ClipboardContentInserter {
     insert(evt) {
         const plainTextItem = DataTransferUtils.getPlainTextItem(evt.clipboardData.items);
         const rtfItem = DataTransferUtils.getRtfTextItem(evt.clipboardData.items);
-        const htmlItem = DataTransferUtils.getTransferItemByType(evt.clipboardData.items, 'text/html');
+        const htmlItem = DataTransferUtils.getTransferItemByType(evt.clipboardData.items, HtmlMimeType);
         if (rtfItem) {
             this.loadingPanelManager = this.control.loadingPanelManager.loadingPanel.showPanelDelayed(400);
             EvtUtils.preventEvent(evt);

package/lib/common/commands/client-command.d.ts

@@ -389,6 +389,7 @@ export declare enum RichEditClientCommand {
     DownloadDocx = 418,
     DownloadRtf = 419,
     DownloadTxt = 420,
+    DownloadHtml = 421,
     PdfExported = 430,
     ChangeCaseMenu = 431,
     AlignParagraphMenu = 432,
@@ -416,5 +417,6 @@ export declare enum RichEditClientCommand {
     ChangeFloatingObjectTextWrapTypeMenu = 454,
     FloatingObjectBringForwardMenu = 455,
     FloatingObjectSendBackwardMenu = 456,
-    NoSpellingSuggestions = 457
+    NoSpellingSuggestions = 457,
+    GetHtml = 458
 }

package/lib/common/commands/client-command.js

@@ -390,6 +390,7 @@ export var RichEditClientCommand;
     RichEditClientCommand[RichEditClientCommand["DownloadDocx"] = 418] = "DownloadDocx";
     RichEditClientCommand[RichEditClientCommand["DownloadRtf"] = 419] = "DownloadRtf";
     RichEditClientCommand[RichEditClientCommand["DownloadTxt"] = 420] = "DownloadTxt";
+    RichEditClientCommand[RichEditClientCommand["DownloadHtml"] = 421] = "DownloadHtml";
     RichEditClientCommand[RichEditClientCommand["PdfExported"] = 430] = "PdfExported";
     RichEditClientCommand[RichEditClientCommand["ChangeCaseMenu"] = 431] = "ChangeCaseMenu";
     RichEditClientCommand[RichEditClientCommand["AlignParagraphMenu"] = 432] = "AlignParagraphMenu";
@@ -418,4 +419,5 @@ export var RichEditClientCommand;
     RichEditClientCommand[RichEditClientCommand["FloatingObjectBringForwardMenu"] = 455] = "FloatingObjectBringForwardMenu";
     RichEditClientCommand[RichEditClientCommand["FloatingObjectSendBackwardMenu"] = 456] = "FloatingObjectSendBackwardMenu";
     RichEditClientCommand[RichEditClientCommand["NoSpellingSuggestions"] = 457] = "NoSpellingSuggestions";
+    RichEditClientCommand[RichEditClientCommand["GetHtml"] = 458] = "GetHtml";
 })(RichEditClientCommand || (RichEditClientCommand = {}));

package/lib/common/commands/document/print-document-on-client-command.js

@@ -1,4 +1,4 @@
-import { HtmlBuilder } from '../../html-export';
+import { HtmlBuilder } from '../../formats/html/export/html-builder';
 import { RendererClassNames } from '../../canvas/renderer-class-names';
 import { UpdateFieldsOptions } from '../../model/fields/tree-creator';
 import { ControlOptions } from '../../model/options/control';

package/lib/common/commands/text/clipboard-commands.js

@@ -17,6 +17,7 @@ import { SelectionHistoryItem } from '../../model/history/selection/selection-hi
 import { RichEditClientCommand } from '../client-command';
 import { CommandBase, CommandSimpleOptions } from '../command-base';
 import { SimpleCommandState } from '../command-states';
+import { HtmlMimeType, PlainTextMimeType } from '@devexpress/utils/lib/utils/mime-type';
 export class ClipboardCommand extends CommandBase {
     constructor(control, queryCommandId) {
         super(control);
@@ -303,10 +304,10 @@ export class ClipboardHelper {
     }
     insertClipboardItems(items) {
         for (let item of items) {
-            if (ListUtils.anyOf(item.types, type => type === 'text/html'))
-                return this.insertClipboardItem(item, 'text/html', html => this.insertHtml(html));
-            if (ListUtils.anyOf(item.types, type => type === 'text/plain'))
-                return this.insertClipboardItem(item, 'text/plain', text => this.insertPlainText(text));
+            if (ListUtils.anyOf(item.types, type => type === HtmlMimeType))
+                return this.insertClipboardItem(item, HtmlMimeType, html => this.insertHtml(html));
+            if (ListUtils.anyOf(item.types, type => type === PlainTextMimeType))
+                return this.insertClipboardItem(item, PlainTextMimeType, text => this.insertPlainText(text));
         }
         return Promise.reject(ClipboardHelper.noDataInClipboardMessage);
     }
@@ -348,7 +349,8 @@ export class ClipboardHelper {
     writeToClipboard(clipboardData) {
         ClipboardHelper.lastWritenTextHash = -1;
         return new Promise((resolve, reject) => {
-            const exporter = new TxtExporter(this.createModelManager(clipboardData.model).modelManipulator, new DocumentExporterOptions());
+            const modelManager = this.createModelManager(clipboardData.model);
+            const exporter = new TxtExporter(modelManager.modelManipulator, new DocumentExporterOptions());
             exporter.exportToBlob((blob) => __awaiter(this, void 0, void 0, function* () {
                 const text = yield this.readAsText(blob);
                 if (this.useWithBuildInClipboard)

package/lib/common/document-format.d.ts

@@ -16,9 +16,11 @@ export declare const mimeTypeIntoDocumentFormat: {
     4: DocumentFormat;
     2: DocumentFormat;
     3: DocumentFormat;
+    14: DocumentFormat;
 };
 export declare const documentFormatIntoMimeType: {
     4: DxMimeType;
     2: DxMimeType;
     1: DxMimeType;
+    3: DxMimeType;
 };