devexpress-richedit 24.1.1-alpha-24085-0102 → 24.1.3

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

@@ -177,7 +177,7 @@ export class HtmlImporter {
         const missTag = HtmlImporter.MapMissTablePropertiesByTagNames[ListUtils.last(this.levelInfo).tagImporter.elementTag()];
         ListUtils.forEach(this.currElementChilds, (childElement) => {
             const childElemStyle = this.getStyles(childElement);
-            if (!childElemStyle)
+            if (!Object.keys(childElemStyle).length)
                 return;
             for (var prop in this.getStyles(element)) {
                 if (missTag && /^(border|background|marginLeft)/gi.test(prop))
@@ -189,13 +189,24 @@ export class HtmlImporter {
         });
     }
     getStyles(element) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = element.getAttribute) === null || _a === void 0 ? void 0 : _a.call(element, 'style')) === null || _b === void 0 ? void 0 : _b.split(';')) === null || _c === void 0 ? void 0 : _c.reduce((a, c) => {
-            if (c) {
-                const par = c.trim().split(':');
-                a[par[0].trim()] = par[1].trim();
-            }
-            return a;
+        var _a;
+        const styleStr = (_a = element.getAttribute) === null || _a === void 0 ? void 0 : _a.call(element, 'style');
+        if (!styleStr)
+            return {};
+        const urlRegExp = new RegExp('url\\(.*?\\)', 'gi');
+        const urlKey = '$URL';
+        const urlValues = styleStr.match(urlRegExp);
+        return styleStr
+            .replace(urlRegExp, urlKey)
+            .split(';')
+            .reduceRight((res, style) => {
+            if (!style)
+                return res;
+            const colonIndex = style.indexOf(':');
+            const key = style.substring(0, colonIndex).trim();
+            const value = style.substring(colonIndex + 1).trim();
+            res[key] = value === urlKey ? urlValues.pop() : value;
+            return res;
         }, {});
     }
     addRun(run, forceAdd = false) {
@@ -265,6 +276,8 @@ export class HtmlImporter {
         html = html.replace(/<font[^>]*>([^<>]+)<\/font>/gi, '$1');
         html = html.replace(/<span\s*><span\s*>([^<>]+)<\/span><\/span>/ig, '$1');
         html = html.replace(/<span>([^<>]+)<\/span>/gi, '$1');
+        html = html.replace(/\s*(<li[\S\s]*?>)\s*/gi, '$1');
+        html = html.replace(/\s*(<\/li>)\s*/gi, '$1');
         html = html.replace(/<li([^>]*)>([^<>]+)<\/li>/gi, '<li$1><p>$2</p></li>');
         html = html.replace(/<li([^>]*)>(([^<>]*)<(?!p)[\s\S]*?)<\/li>/gi, '<li$1><p>$2</p></li>');
         html = html.replace(/<caption([^>]*)>[\s\S]*?<\/caption>/gi, '');
@@ -289,7 +302,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 +311,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;

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

@@ -1,11 +1,14 @@
-import { MapCreator } from '../../../../utils/map-creator';
-import { BorderLineStyle } from '../../../../model/borders/enums';
-import { MaskedParagraphProperties, ParagraphAlignment, ParagraphFirstLineIndent, ParagraphLineSpacingType, ParagraphPropertiesMask } from '../../../../model/paragraph/paragraph-properties';
-import { TableWidthUnit, TableWidthUnitType } from '../../../../model/tables/secondary-structures/table-units';
 import { Errors } from '@devexpress/utils/lib/errors';
 import { AttrUtils } from '@devexpress/utils/lib/utils/attr';
 import { DomUtils } from '@devexpress/utils/lib/utils/dom';
 import { MathUtils } from '@devexpress/utils/lib/utils/math';
+import { ColorUtils } from '@devexpress/utils/lib/utils/color';
+import { MapCreator } from '../../../../utils/map-creator';
+import { BorderLineStyle } from '../../../../model/borders/enums';
+import { MaskedParagraphProperties, ParagraphAlignment, ParagraphFirstLineIndent, ParagraphLineSpacingType, ParagraphPropertiesMask } from '../../../../model/paragraph/paragraph-properties';
+import { TableWidthUnit, TableWidthUnitType } from '../../../../model/tables/secondary-structures/table-units';
+import { ShadingInfo } from '../../../../model/shadings/shading-info';
+import { ColorModelInfo } from '../../../../model/color/color-model-info';
 import { HtmlImportUtils } from './utils';
 export class HtmlImporterMaskedParagraphProperties {
     import(colorProvider, element, isTableCellTag) {
@@ -20,6 +23,7 @@ export class HtmlImporterMaskedParagraphProperties {
         this.importLineSpacing();
         this.importSpacingBefore();
         this.importSpacingAfter();
+        this.importBackColor();
         if (!isTableCellTag) {
             this.importTopBorder(colorProvider, calculatedStyle);
             this.importRightBorder(colorProvider, calculatedStyle);
@@ -74,6 +78,15 @@ export class HtmlImporterMaskedParagraphProperties {
             this.result.setUseValue(ParagraphPropertiesMask.UseSpacingAfter, true);
         }
     }
+    importBackColor() {
+        if (this.element.style.backgroundColor !== "") {
+            const backColor = ColorUtils.fromString(this.element.style.backgroundColor);
+            if (backColor) {
+                this.result.shadingInfo = ShadingInfo.createByColor(ColorModelInfo.makeByColor(backColor));
+                this.result.setUseValue(ParagraphPropertiesMask.UseShadingInfoIndex, true);
+            }
+        }
+    }
     importLineSpacing() {
         this.result.setUseValue(ParagraphPropertiesMask.UseLineSpacing, true);
         this.result.setUseValue(ParagraphPropertiesMask.UseBeforeAutoSpacing, true);

package/lib/common/formats/i-document-exporter.d.ts

@@ -1,4 +1,18 @@
+import { IPictureRenderer } from "../canvas/picture-renderer";
+import { DocumentFormat } from "../document-format";
+import { IModelManager } from "../model-manager";
+import { IRichEditUnitConverter } from "../utils/unit-converter";
 export interface IDocumentExporter {
     exportToBlob(callback: (blob: Blob) => void): any;
     exportToBase64(callback: (base64: string) => void): any;
 }
+export interface IExportModelOptions {
+    modelManager: IModelManager;
+    documentFormat: DocumentFormat;
+    pictureRenderer: IPictureRenderer;
+    uiUnitConverter: IRichEditUnitConverter;
+    sessionGuid: string;
+    clientGuid: string;
+    lastMaxNumPages?: number;
+    pageIndex?: number;
+}

package/lib/common/formats/rtf/export/exporter.d.ts

@@ -7,12 +7,12 @@ import { RtfExportHelper } from './helpers/rtf-export-helper';
 import { RtfBuilder } from './rtf-builder';
 import { RtfDocumentExporterOptions } from './rtf-document-exporter-options';
 export declare class RtfExporter implements IDocumentExporter {
-    documentModel: DocumentModel;
     options: RtfDocumentExporterOptions;
     rtfExportHelper: RtfExportHelper;
     rtfBuilder: RtfBuilder;
     contentExporter: RtfContentExporter;
     private modelManipulator;
+    get documentModel(): DocumentModel;
     constructor(modelManipulator: ModelManipulator, options: RtfDocumentExporterOptions);
     exportToBlob(callback: (blob: Blob) => void): void;
     exportToBase64(callback: (base64: string) => void): void;

package/lib/common/formats/rtf/export/exporter.js

@@ -12,12 +12,12 @@ import { RtfExportHelper } from './helpers/rtf-export-helper';
 export class RtfExporter {
     constructor(modelManipulator, options) {
         this.modelManipulator = modelManipulator;
-        this.documentModel = modelManipulator.model;
         this.options = options;
         this.rtfExportHelper = new RtfExportHelper();
         this.contentExporter = new RtfContentExporter(this.documentModel, options, this.rtfExportHelper);
         this.rtfBuilder = this.contentExporter.createRtfBuilder();
     }
+    get documentModel() { return this.modelManipulator.model; }
     exportToBlob(callback) {
         this.modelManipulator.picture.loader.ensureAllPicturesLoaded(this.options.ensurePictureLoadedTimeout, (_loaded) => {
             callback(new Blob([this.exportAsString()], { type: 'application/rtf' }));

package/lib/common/formats/rtf/importer-in-subdocument.d.ts

@@ -1,6 +1,6 @@
+import { FixedInterval } from "@devexpress/utils/lib/intervals/fixed";
 import { RichOptions } from "../../model/options/rich-options";
 import { SubDocument } from "../../model/sub-document";
 import { IProcessor } from "../../processor";
-import { FixedInterval } from "@devexpress/utils/lib/intervals/fixed";
 export declare function getRtfFromSubDocumentPublic(richOptions: RichOptions, subDocument: SubDocument, coreInterval: FixedInterval): string;
 export declare function insertRtfInSubDocumentPublic(processor: IProcessor, subDocument: SubDocument, position: number, rtf: string, callback: (interval: FixedInterval, isRtfValid: boolean) => void): void;

package/lib/common/formats/rtf/importer-in-subdocument.js

@@ -1,7 +1,7 @@
+import { EmptyBatchUpdatableObject } from "@devexpress/utils/lib/class/batch-updatable";
 import { ClientModelManager } from "../../model-manager";
 import { RangeCopy } from "../../model/manipulators/range/create-range-copy-operation";
 import { SubDocumentIntervals } from "../../model/sub-document";
-import { EmptyBatchUpdatableObject } from "@devexpress/utils/lib/class/batch-updatable";
 import { RtfExporter } from "./export/exporter";
 import { RtfDocumentExporterOptions } from "./export/rtf-document-exporter-options";
 import { RtfImporterOptions } from "./import/importer-options";

package/lib/common/formats/txt/txt-exporter.js

@@ -1,5 +1,6 @@
 import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { Base64Utils } from '@devexpress/utils/lib/utils/base64';
+import { PlainTextMimeType } from '@devexpress/utils/lib/utils/mime-type';
 export class TxtExporter {
     constructor(modelManipulator, options) {
         this.modelManipulator = modelManipulator;
@@ -23,7 +24,7 @@ export class TxtExporter {
                     text += '\r\n';
                 text += this.model.mainSubDocument.getSimpleText(new FixedInterval(p.startLogPosition.value, p.length));
             });
-            callback(new Blob([text], { type: 'text/plain' }));
+            callback(new Blob([text], { type: PlainTextMimeType }));
         });
     }
 }

package/lib/common/input-controller.d.ts

@@ -1,8 +1,8 @@
 import { RangeCopy } from './model/manipulators/range/create-range-copy-operation';
 import { DomEventHandlersHolder } from '@devexpress/utils/lib/class/event-handlers-holder';
-import { HtmlBuilder } from './html-export';
 import { IEventManager } from './interfaces/i-event-manager';
 import { IRichEditControl } from './interfaces/i-rich-edit-core';
+import { HtmlBuilder } from './formats/html/export/html-builder';
 export declare const INPUT_CLASS_NAME = "dxreInputTarget";
 export declare abstract class InputEditorBase<TInpElement extends HTMLElement> {
     eventManager: IEventManager;
@@ -130,6 +130,7 @@ export declare class InputController {
     inputEditor: InputEditorBase<HTMLElement>;
     private exporter;
     constructor(control: IRichEditControl, eventManager: IEventManager, parent: HTMLElement);
+    initExporter(): void;
     dispose(): void;
     private createInputEditor;
     getEditableDocument(): HTMLElement | Document;

package/lib/common/input-controller.js

@@ -16,8 +16,9 @@ import { PopupUtils } from '@devexpress/utils/lib/utils/popup';
 import { StringUtils } from '@devexpress/utils/lib/utils/string';
 import { ClipboardContentInserter } from './clipboard-content-inserter';
 import { RichEditClientCommand } from './commands/client-command';
-import { HtmlBuilder, HtmlExporter } from './html-export';
 import { ReadOnlyMode } from './interfaces/i-rich-edit-core';
+import { HtmlExporter } from './formats/html/export/html-export';
+import { HtmlBuilder } from './formats/html/export/html-builder';
 export const INPUT_CLASS_NAME = "dxreInputTarget";
 const EMPTY_KEYCODE = 229;
 const TAB_KEYCODE = 9;
@@ -716,7 +717,9 @@ export class InputController {
     constructor(control, eventManager, parent) {
         this.control = control;
         this.inputEditor = this.createInputEditor(parent, eventManager);
-        this.exporter = new HtmlExporter(this.control);
+    }
+    initExporter() {
+        this.exporter = new HtmlExporter(this.control.getExportModelOptions());
     }
     dispose() {
         this.inputEditor.dispose();

package/lib/common/interfaces/i-rich-edit-core.d.ts

@@ -36,6 +36,7 @@ import { SelectionModelChangesListener } from '../selection/selection-model-chan
 import { IRulerControl } from '../ui/ruler/ruler';
 import { SearchManager } from '../ui/search-manager';
 import { IControlOwner } from './i-control-owner';
+import { IExportModelOptions } from '../formats/i-document-exporter';
 export interface IBarListener extends IEventListener {
     NotifyBarCommandExecuted(commandID: RichEditClientCommand, parameter: any): any;
     NotifyBarUpdateRequested(): any;
@@ -83,6 +84,7 @@ export interface IRichEditControl extends IBatchUpdatableObject, IDisposable, IR
     owner: IControlOwner;
     selectionModelChangesListener: SelectionModelChangesListener;
     pdfHelperFrame: PdfHelperFrame;
+    getExportModelOptions(initOptions?: Partial<IExportModelOptions>): IExportModelOptions;
     isClientMode(): boolean;
     createFieldRequestManager(): FieldRequestManager;
     initialize(sessionGuid: string, documentInfo: DocumentInfo, subDocumentsCounter: number, documentModel: DocumentModel): any;

package/lib/common/layout/main-structures/layout-boxes/layout-anchored-picture-box.d.ts

@@ -10,7 +10,8 @@ import { LayoutBoxType } from './layout-box';
 export declare class LayoutAnchoredPictureBox extends LayoutAnchoredObjectBox implements ICloneable<LayoutAnchoredPictureBox> {
     cacheInfo: CacheImageInfo;
     isLoaded: boolean;
-    constructor(characterProperties: CharacterProperties, colorInfo: LayoutCharacterPropertiesColorInfo, belongsToSubDocId: number, anchorInfo: AnchorInfo, shape: Shape, objectId: number, rotationInRadians: number, cacheInfo: CacheImageInfo);
+    descrtiption: string;
+    constructor(characterProperties: CharacterProperties, colorInfo: LayoutCharacterPropertiesColorInfo, belongsToSubDocId: number, anchorInfo: AnchorInfo, shape: Shape, objectId: number, rotationInRadians: number, cacheInfo: CacheImageInfo, descrtiption: string);
     getType(): LayoutBoxType;
     equals(obj: LayoutAnchoredPictureBox): boolean;
     clone(): LayoutAnchoredPictureBox;

package/lib/common/layout/main-structures/layout-boxes/layout-anchored-picture-box.js

@@ -1,9 +1,10 @@
 import { LayoutAnchoredObjectBox } from './layout-anchored-object-box';
 import { LayoutBoxType } from './layout-box';
 export class LayoutAnchoredPictureBox extends LayoutAnchoredObjectBox {
-    constructor(characterProperties, colorInfo, belongsToSubDocId, anchorInfo, shape, objectId, rotationInRadians, cacheInfo) {
+    constructor(characterProperties, colorInfo, belongsToSubDocId, anchorInfo, shape, objectId, rotationInRadians, cacheInfo, descrtiption) {
         super(characterProperties, colorInfo, belongsToSubDocId, anchorInfo, shape, objectId, rotationInRadians);
         this.cacheInfo = cacheInfo;
+        this.descrtiption = descrtiption;
         this.isLoaded = this.cacheInfo.isLoaded;
     }
     getType() {
@@ -13,11 +14,11 @@ export class LayoutAnchoredPictureBox extends LayoutAnchoredObjectBox {
         return super.equals(obj) && this.cacheInfo.equals(obj.cacheInfo) && this.isLoaded == obj.isLoaded;
     }
     clone() {
-        const newObject = new LayoutAnchoredPictureBox(this.characterProperties, this.colorInfo, this.belongsToSubDocId, this.anchorInfo, this.shape, this.objectId, this.rotationInRadians, this.cacheInfo);
+        const newObject = new LayoutAnchoredPictureBox(this.characterProperties, this.colorInfo, this.belongsToSubDocId, this.anchorInfo, this.shape, this.objectId, this.rotationInRadians, this.cacheInfo, this.descrtiption);
         newObject.copyFrom(this);
         return newObject;
     }
     renderGetContent(renderer) {
-        return renderer.renderPictureBoxContent(this.createSize(), this.cacheInfo, this.hyperlinkTip);
+        return renderer.renderPictureBoxContent(this.createSize(), this.cacheInfo, this.hyperlinkTip, this.descrtiption);
     }
 }

package/lib/common/layout/main-structures/layout-boxes/layout-picture-box.d.ts

@@ -9,7 +9,8 @@ import { LayoutBox, LayoutBoxType } from './layout-box';
 export declare class LayoutPictureBox extends LayoutBox implements ICloneable<LayoutPictureBox>, ISupportCopyFrom<LayoutPictureBox> {
     cacheInfo: CacheImageInfo;
     isLoaded: boolean;
-    constructor(characterProperties: CharacterProperties, colorInfo: LayoutCharacterPropertiesColorInfo, cacheInfo: CacheImageInfo, size: Size);
+    description: string;
+    constructor(characterProperties: CharacterProperties, colorInfo: LayoutCharacterPropertiesColorInfo, cacheInfo: CacheImageInfo, size: Size, description: string);
     equals(obj: LayoutPictureBox): boolean;
     clone(): LayoutPictureBox;
     getType(): LayoutBoxType;

package/lib/common/layout/main-structures/layout-boxes/layout-picture-box.js

@@ -1,17 +1,18 @@
 import { LayoutBox, LayoutBoxType } from './layout-box';
 export class LayoutPictureBox extends LayoutBox {
-    constructor(characterProperties, colorInfo, cacheInfo, size) {
+    constructor(characterProperties, colorInfo, cacheInfo, size, description) {
         super(characterProperties, colorInfo);
         this.cacheInfo = cacheInfo;
         this.width = size.width;
         this.height = size.height;
+        this.description = description;
         this.isLoaded = this.cacheInfo.isLoaded;
     }
     equals(obj) {
-        return super.equals(obj) && this.cacheInfo.equals(obj.cacheInfo) && this.isLoaded == obj.isLoaded;
+        return super.equals(obj) && this.cacheInfo.equals(obj.cacheInfo) && this.isLoaded == obj.isLoaded && this.description === obj.description;
     }
     clone() {
-        const newObj = new LayoutPictureBox(this.characterProperties, this.colorInfo, this.cacheInfo, this.createSize());
+        const newObj = new LayoutPictureBox(this.characterProperties, this.colorInfo, this.cacheInfo, this.createSize(), this.description);
         newObj.copyFrom(this);
         return newObj;
     }
@@ -33,7 +34,7 @@ export class LayoutPictureBox extends LayoutBox {
         return true;
     }
     renderGetContent(renderer) {
-        return renderer.renderPictureBoxContent(this.createSize(), this.cacheInfo, this.hyperlinkTip);
+        return renderer.renderPictureBoxContent(this.createSize(), this.cacheInfo, this.hyperlinkTip, this.description);
     }
     isWhitespace() {
         return false;

package/lib/common/layout/main-structures/layout-page.d.ts

@@ -58,4 +58,5 @@ export declare class LayoutPage extends Rectangle {
     static getLastValidPageInGroup(pages: LayoutPage[], pageIndex: number, validPageCount: number, checkValid: boolean, tryFindPage: boolean): LayoutPage;
     getEndPosition(): number;
     static getPrevPageLastPosition(pages: LayoutPage[], currPageIndex: number): number;
+    removeOtherPageArea(subDocId: number): void;
 }

package/lib/common/layout/main-structures/layout-page.js

@@ -43,7 +43,7 @@ export class LayoutPage extends Rectangle {
         this.mainSubDocumentPageAreas = [];
         this.otherPageAreas = {};
         this.flags = new Flag();
-        this.anchoredObjectHolder = new PageAnchoredObjectHolder();
+        this.anchoredObjectHolder = new PageAnchoredObjectHolder(this);
         this.tableAnchoredObjectsHolder = new TableAnchoredObjectsHolder();
     }
     setRenderLevelCalculator(anchorObjectsPositionInfo, compatibilityMode) {
@@ -78,7 +78,7 @@ export class LayoutPage extends Rectangle {
         obj.index = this.index;
         obj.layoutPageIndex = this.layoutPageIndex;
         obj.pageOrdinal = this.pageOrdinal;
-        obj.anchoredObjectHolder = this.anchoredObjectHolder.shallowCopy();
+        obj.anchoredObjectHolder = this.anchoredObjectHolder.shallowCopy(obj);
         obj.tableAnchoredObjectsHolder = this.tableAnchoredObjectsHolder.shallowCopy();
         obj.contentIntervals = ListUtils.shallowCopy(this.contentIntervals);
         obj.startPageSectionIndex = this.startPageSectionIndex;
@@ -167,6 +167,9 @@ export class LayoutPage extends Rectangle {
         const prevPage = pages[currPageIndex - 1];
         return prevPage ? prevPage.getEndPosition() : 0;
     }
+    removeOtherPageArea(subDocId) {
+        delete this.otherPageAreas[subDocId];
+    }
 }
 class ContentIntervalCollector {
     constructor(mainSubDocumentPageAreas, startPagePos) {

package/lib/common/layout-formatter/box/generator/box-infos-generator.d.ts

@@ -48,6 +48,7 @@ export declare class BoxGenerator {
     private makeDashBox;
     private makeParagraphAndSectionBox;
     private isLastParagraphInCell;
+    private skipCurrentRun;
     private makeInlinePictureBox;
     private makeAnchoredPictureRun;
     static createLayoutAnchoredTextBoxFromRun(anchorTextBox: AnchoredTextBoxRun, subDocumentId: number, colorProvider: ColorProvider): LayoutAnchoredTextBox;

package/lib/common/layout-formatter/box/generator/box-infos-generator.js

@@ -290,6 +290,12 @@ export class BoxGenerator {
             case RunType.LayoutDependentRun:
                 this.makeLayoutDependentRun();
                 break;
+            case RunType.FootNoteRun:
+                this.skipCurrentRun();
+                break;
+            case RunType.EndNoteRun:
+                this.skipCurrentRun();
+                break;
             default: this.makeDefault();
         }
     }
@@ -322,11 +328,15 @@ export class BoxGenerator {
             return false;
         return paragraph.getEndPosition() == tableCell.interval.end;
     }
+    skipCurrentRun() {
+        this.modelIterator.charOffset = this.run.getLength();
+        this.offsetStartWordAtStartRun = this.modelIterator.charOffset;
+    }
     makeInlinePictureBox() {
         const inlinePictureRun = this.run;
         this.modelIterator.charOffset++;
         const charProps = inlinePictureRun.getCharacterMergedProperties();
-        this.addNewBoxInfo(new LayoutPictureBox(charProps, charProps.getLayoutColorInfo(this.colorProvider), inlinePictureRun.cacheInfo, inlinePictureRun.getActualSize().applyConverter(UnitConverter.twipsToPixelsF)));
+        this.addNewBoxInfo(new LayoutPictureBox(charProps, charProps.getLayoutColorInfo(this.colorProvider), inlinePictureRun.cacheInfo, inlinePictureRun.getActualSize().applyConverter(UnitConverter.twipsToPixelsF), inlinePictureRun.info.nonVisualDrawingProperties.description));
         this.offsetStartWordAtStartRun = this.modelIterator.charOffset;
     }
     makeAnchoredPictureRun() {
@@ -335,7 +345,7 @@ export class BoxGenerator {
         if (anchorPictureRun.anchorInfo.hidden)
             return;
         const charProps = anchorPictureRun.getCharacterMergedProperties();
-        this.addNewBoxInfo(new LayoutAnchoredPictureBox(charProps, charProps.getLayoutColorInfo(this.colorProvider), this.subDocument.id, anchorPictureRun.anchorInfo.clone(), anchorPictureRun.shape.clone().applyConverter(UnitConverter.twipsToPixelsF), anchorPictureRun.anchoredObjectID, UnitConverter.twipsToRadians(anchorPictureRun.size.rotation), anchorPictureRun.cacheInfo)
+        this.addNewBoxInfo(new LayoutAnchoredPictureBox(charProps, charProps.getLayoutColorInfo(this.colorProvider), this.subDocument.id, anchorPictureRun.anchorInfo.clone(), anchorPictureRun.shape.clone().applyConverter(UnitConverter.twipsToPixelsF), anchorPictureRun.anchoredObjectID, UnitConverter.twipsToRadians(anchorPictureRun.size.rotation), anchorPictureRun.cacheInfo, anchorPictureRun.info.nonVisualDrawingProperties.description)
             .setPosition(new Point(0, 0))
             .setSize(anchorPictureRun.getActualSize().applyConverter(UnitConverter.twipsToPixelsF)));
         this.offsetStartWordAtStartRun = this.modelIterator.charOffset;

package/lib/common/layout-formatter/floating/page-anchored-object-holder.d.ts

@@ -3,11 +3,13 @@ import { LayoutAnchoredObjectBox } from '../../layout/main-structures/layout-box
 import { LayoutAnchoredTextBox } from '../../layout/main-structures/layout-boxes/layout-anchored-text-box';
 import { BaseFormatter } from '../formatter/base-formatter';
 import { FormatterManager } from '../managers/formatter-manager';
+import { LayoutPage } from '../../../common/layout/main-structures/layout-page';
 export declare class PageAnchoredObjectHolder {
+    private _page;
     objects: Record<number, LayoutAnchoredObjectBox>;
-    constructor();
+    constructor(_page: LayoutPage);
     getObjectByModelPosition(layout: DocumentLayout, position: number, belongsToSubDocId: number): LayoutAnchoredObjectBox;
-    onColumnEnd(activeFormatter: BaseFormatter): void;
+    removeOrphanedObjects(activeFormatter: BaseFormatter): void;
     getObjectsForRenderer(anchorObjectsPositionInfo: AnchorObjectsPositionInfo, objects?: Record<number, LayoutAnchoredObjectBox>): LayoutAnchoredObjectBox[];
     getObjById(id: number): LayoutAnchoredObjectBox;
     getUnapprovedObj(): LayoutAnchoredObjectBox;
@@ -16,5 +18,5 @@ export declare class PageAnchoredObjectHolder {
     addObject(manager: FormatterManager, obj: LayoutAnchoredObjectBox): void;
     removeObject(obj: LayoutAnchoredObjectBox): void;
     private correctPositionDueToOtherBoxes;
-    shallowCopy(): PageAnchoredObjectHolder;
+    shallowCopy(page: LayoutPage): PageAnchoredObjectHolder;
 }

package/lib/common/layout-formatter/floating/page-anchored-object-holder.js

@@ -2,13 +2,14 @@ import { NumberMapUtils } from '@devexpress/utils/lib/utils/map/number';
 import { LayoutBoxType } from '../../layout/main-structures/layout-boxes/layout-box';
 import { getLayoutAnchoredObjectBoxComparer } from '../../model/manipulators/floating-objects/comparers';
 export class PageAnchoredObjectHolder {
-    constructor() {
+    constructor(_page) {
+        this._page = _page;
         this.objects = {};
     }
     getObjectByModelPosition(layout, position, belongsToSubDocId) {
         return NumberMapUtils.elementBy(this.objects, (obj, id) => layout.anchorObjectsPositionInfo.getPosition(id) == position && obj.belongsToSubDocId === belongsToSubDocId);
     }
-    onColumnEnd(activeFormatter) {
+    removeOrphanedObjects(activeFormatter) {
         if (!activeFormatter.subDocument.isMain())
             return;
         const belongsToSubDocId = activeFormatter.subDocument.id;
@@ -19,6 +20,8 @@ export class PageAnchoredObjectHolder {
             if (layout.anchorObjectsPositionInfo.getPosition(id) >= position &&
                 obj.belongsToSubDocId === belongsToSubDocId) {
                 keysToDelete.push(id);
+                if (obj.getType() === LayoutBoxType.AnchorTextBox)
+                    this._page.removeOtherPageArea(obj.internalSubDocId);
                 activeFormatter.layoutRowBoundsCalculator.removeAnchorObjectId(id);
             }
         });
@@ -56,8 +59,8 @@ export class PageAnchoredObjectHolder {
     }
     correctPositionDueToOtherBoxes(_obj) {
     }
-    shallowCopy() {
-        const obj = new PageAnchoredObjectHolder();
+    shallowCopy(page) {
+        const obj = new PageAnchoredObjectHolder(page);
         obj.objects = NumberMapUtils.shallowCopy(this.objects);
         return obj;
     }