devexpress-richedit 25.1.1-alpha → 25.1.3

package/lib/common/canvas/canvas-scroll-manager.d.ts

@@ -2,7 +2,9 @@ import { IScrollLayoutChangesListener } from '../interfaces/i-selection-layout-c
 import { ICanvasState } from '../scroll/canvas-states';
 import { IRulerControl } from '../ui/ruler/ruler';
 import { ViewManager } from './renderes/view-manager';
-export declare class CanvasScrollManager implements IScrollLayoutChangesListener {
+import { IModelChangesListener } from '../interfaces/model-changes-listener';
+import { ModelChange } from '../model/changes/change';
+export declare class CanvasScrollManager implements IScrollLayoutChangesListener, IModelChangesListener {
     private updateScrollTimeoutId;
     private waitForDblClickTimeoutId;
     private horizontalRuler;
@@ -11,6 +13,7 @@ export declare class CanvasScrollManager implements IScrollLayoutChangesListener
     private get sizes();
     constructor(viewManager: ViewManager, horizontalRuler: IRulerControl);
     dispose(): void;
+    modelChanged(change: ModelChange): void;
     get scrollTop(): number;
     set scrollTop(val: number);
     setScrollEnabled(enabled: boolean): void;

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

@@ -1,6 +1,8 @@
 import { DocumentLayoutDetailsLevel } from '../layout/document-layout-details-level';
 import { MouseHandler } from '../mouse-handler/mouse-handler/mouse-handler';
 import { RelativePosition } from '../scroll/model-states';
+import { MixedSize } from '../utils/mixed-size';
+import { ModelChangeType } from '../model/changes/enums';
 export class CanvasScrollManager {
     get canvas() { return this.viewManager.canvas; }
     get sizes() { return this.viewManager.sizes; }
@@ -14,6 +16,10 @@ export class CanvasScrollManager {
         clearTimeout(this.updateScrollTimeoutId);
         clearTimeout(this.waitForDblClickTimeoutId);
     }
+    modelChanged(change) {
+        if (change.type == ModelChangeType.ZoomLevelChanged)
+            this.updateScrollVisibility();
+    }
     get scrollTop() { return this.canvas.scrollTop; }
     set scrollTop(val) { this.canvas.scrollTop = val; }
     setScrollEnabled(enabled) {
@@ -32,46 +38,48 @@ export class CanvasScrollManager {
     scrollToX(canvasState) {
         const position = canvasState.lp;
         const relativePosition = canvasState.relativePosition;
-        let y = this.sizes.getPageOffsetY(this.viewManager.layout.pages[position.pageIndex]);
-        let height = 0;
+        const zoomLevel = this.viewManager.zoomLevel;
+        const page = this.viewManager.layout.pages[position.pageIndex];
+        let y = MixedSize.fromLayout(this.sizes.getPageOffsetY(page)).useScale(zoomLevel);
+        let height = new MixedSize().useScale(zoomLevel);
         if (position.detailsLevel >= DocumentLayoutDetailsLevel.PageArea) {
-            y += position.pageArea.y;
+            y.addLayoutSize(position.pageArea.y);
             if (position.detailsLevel >= DocumentLayoutDetailsLevel.Column) {
-                y += position.column.y;
+                y.addLayoutSize(position.column.y);
                 if (position.detailsLevel >= DocumentLayoutDetailsLevel.Row) {
-                    y += position.row.y;
+                    y.addLayoutSize(position.row.y);
                     if (relativePosition === RelativePosition.Bottom)
-                        y += position.row.height;
+                        y.addLayoutSize(position.row.height);
                     else if (relativePosition === RelativePosition.Inside)
-                        height = position.row.height;
+                        height.clear().addLayoutSize(position.row.height);
                 }
                 else if (relativePosition === RelativePosition.Bottom)
-                    y += position.column.height;
+                    y.addLayoutSize(position.column.height);
                 else if (relativePosition === RelativePosition.Inside)
-                    height = position.column.height;
+                    height.clear().addLayoutSize(position.column.height);
             }
             else if (relativePosition === RelativePosition.Bottom)
-                y += position.pageArea.height;
+                y.addLayoutSize(position.pageArea.height);
             else if (relativePosition === RelativePosition.Inside)
-                height = position.pageArea.height;
+                height.clear().addLayoutSize(position.pageArea.height);
         }
         else if (relativePosition === RelativePosition.Bottom)
-            y += position.page.height;
+            y.addLayoutSize(position.page.height);
         else if (relativePosition === RelativePosition.Inside)
-            height = position.page.height;
+            height.clear().addLayoutSize(position.page.height);
         if (relativePosition === RelativePosition.Bottom)
-            y -= this.sizes.getVisibleAreaHeight(false);
-        y += canvasState.getVerticalOffset(this.sizes);
+            y.subtractUISize(this.sizes.getVisibleAreaHeight(false));
+        y.addUISize(canvasState.getVerticalOffset(this.sizes));
         if (relativePosition === RelativePosition.Inside) {
             let scrollTop = this.canvas.scrollTop;
             const scrollVisibleAreaHeight = this.sizes.getVisibleAreaHeight(false);
-            if (y < scrollTop)
-                this.canvas.scrollTop = y;
-            else if (y + height > scrollVisibleAreaHeight + scrollTop)
-                this.canvas.scrollTop = y + height - scrollVisibleAreaHeight;
+            if (y.UISize < scrollTop)
+                this.canvas.scrollTop = y.UISize;
+            else if (y.UISize + height.UISize > scrollVisibleAreaHeight + scrollTop)
+                this.canvas.scrollTop = y.UISize + height.UISize - scrollVisibleAreaHeight;
         }
         else
-            this.canvas.scrollTop = y;
+            this.canvas.scrollTop = y.UISize;
     }
     NotifyScrollPositionChanged(canvasState) {
         if (this.updateScrollTimeoutId) {

package/lib/common/canvas/canvas-size-info.d.ts

@@ -1,6 +1,7 @@
 import { IControlHeightProvider } from './i-control-height-provider';
 import { LayoutPage } from '../layout/main-structures/layout-page';
 import { RenderPageVertivalInfo } from '../view-settings/views-settings';
+import { IZoomLevelHolder } from '../interfaces/i-zoom-level-holder';
 export declare class CanvasSizeInfo implements IControlHeightProvider {
     topSpacing: number;
     betweenPageSpacing: number;
@@ -8,12 +9,13 @@ export declare class CanvasSizeInfo implements IControlHeightProvider {
     scrollYVisible: boolean;
     private visibleAreaSize;
     private scrollWidth;
+    private zoomLevelHolder;
     pageVerticalInfo: RenderPageVertivalInfo;
-    constructor();
+    constructor(zoomLevelHolder: IZoomLevelHolder);
     isInitialized(): boolean;
     initialize(page: HTMLElement, canvas: HTMLDivElement): void;
-    findPageIndexByOffsetY(pages: LayoutPage[], offsetY: number): number;
     getPageOffsetY(layoutPage: LayoutPage): number;
+    get zoomLevel(): number;
     private setVisibleAreaSize;
     getVisibleAreaWidth(includeScrollBars: boolean): number;
     getVisibleAreaHeight(includeScrollBars: boolean): number;

package/lib/common/canvas/canvas-size-info.js

@@ -1,15 +1,15 @@
 import { RenderPageVertivalInfo } from '../view-settings/views-settings';
 import { Size } from '@devexpress/utils/lib/geometry/size';
-import { SearchUtils } from '@devexpress/utils/lib/utils/search';
 import { DomUtils } from '@devexpress/utils/lib/utils/dom';
 import { SizeUtils } from '../utils/size-utils';
 export class CanvasSizeInfo {
-    constructor() {
+    constructor(zoomLevelHolder) {
         this.topSpacing = -1;
         this.betweenPageSpacing = 1;
         this.visibleAreaSize = new Size(-1, -1);
         this.scrollWidth = -1;
         this.pageVerticalInfo = new RenderPageVertivalInfo();
+        this.zoomLevelHolder = zoomLevelHolder;
         this.scrollWidth = DomUtils.getVerticalScrollBarWidth();
     }
     isInitialized() {
@@ -21,12 +21,10 @@ export class CanvasSizeInfo {
         this.betweenPageSpacing = this.pageVerticalInfo.betweenPageSpacing;
         this.setVisibleAreaSize(SizeUtils.getClientWidth(canvas), SizeUtils.getClientHeight(canvas));
     }
-    findPageIndexByOffsetY(pages, offsetY) {
-        return Math.max(0, SearchUtils.normedInterpolationIndexOf(pages, (p) => this.getPageOffsetY(p), offsetY));
-    }
     getPageOffsetY(layoutPage) {
         return layoutPage.y + (this.topSpacing + layoutPage.index * this.betweenPageSpacing);
     }
+    get zoomLevel() { return this.zoomLevelHolder.zoomLevel; }
     setVisibleAreaSize(width, height) {
         this.visibleAreaSize.width = width;
         this.visibleAreaSize.height = height;

package/lib/common/canvas/renderes/canvas-listener/print-layout-view-canvas-listener.js

@@ -74,9 +74,9 @@ export class PrintLayoutViewCanvasListener extends CanvasListener {
             Log.paramsHolder.visualizerManager.show(DebugVisualizerType.LayoutBounds, this.layout, p.index); }));
     }
     updateVisiblePages() {
-        const pages = this.layout.pages;
-        this.viewManager.scroll.updatePageIndexesInfo(pages);
+        this.viewManager.scroll.updatePageIndexesInfo(this.layout);
         const renderInterval = this.viewManager.scroll.renderPageIndexInterval();
+        const pages = this.layout.pages;
         for (let pageIndex of this.handledPageIndexes)
             if (!renderInterval.contains(pageIndex)) {
                 const page = pages[pageIndex];

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

@@ -25,8 +25,10 @@ import { Size } from '@devexpress/utils/lib/geometry/size';
 import { CanvasManager } from '../../canvas-manager';
 import { ViewManager } from '../view-manager';
 import { IRichEditControl } from '../../../interfaces/i-rich-edit-core';
+import { IModelChangesListener } from '../../../interfaces/model-changes-listener';
+import { ModelChange } from '../../../model/changes/change';
 export type GetSomeCanvasElementContainer = (node: Node) => Node;
-export declare class SimpleViewCanvasSizeManager {
+export declare class SimpleViewCanvasSizeManager implements IModelChangesListener {
     protected canvasManager: CanvasManager;
     protected size: Size;
     private control;
@@ -36,6 +38,7 @@ export declare class SimpleViewCanvasSizeManager {
     private resizeFrameId;
     constructor(canvasManager: CanvasManager, control: IRichEditControl);
     dispose(): void;
+    modelChanged(change: ModelChange): void;
     changeSize(force: boolean): void;
     setViewMode(val: boolean): void;
     private changeSizeCore;

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

@@ -28,6 +28,7 @@ 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';
+import { ModelChangeType } from '../../../model/changes/enums';
 export class SimpleViewCanvasSizeManager {
     constructor(canvasManager, control) {
         this.size = new Size(0, 0);
@@ -52,6 +53,10 @@ export class SimpleViewCanvasSizeManager {
         this.resizeFrameId = null;
         this.resizeObserver.disconnect();
     }
+    modelChanged(change) {
+        if (change.type == ModelChangeType.ZoomLevelChanged && this.control.innerClientProperties.viewsSettings.isSimpleView)
+            this.changeSize(true);
+    }
     changeSize(force) {
         const curr = new Size(this.canvasManager.getCanvasWidth(), this.canvasManager.controlHeightProvider.getVisibleAreaHeight(false));
         if (force || !curr.equals(this.size)) {
@@ -77,18 +82,16 @@ export class SimpleViewCanvasSizeManager {
         this.sizeUpdated = true;
     }
     changeSizeCore() {
-        {
-            ListUtils.forEach(this.control.viewManager.cache, (_val) => this.control.viewManager.renderer.removePage(1), 1);
-            this.control.viewManager.ensureFirstPageIsRendered();
-            this.control.innerClientProperties.viewsSettings.widthOfPage = this.canvasManager.getCanvasWidth();
-            if (this.control.layoutFormatterManager) {
-                this.control.layoutFormatterManager.invalidator.onChangedAllLayout();
-                this.control.selection.scrollManager.setScroll(new ScrollState().byModelPosition(this.control.selection)
-                    .setModelPosition(this.control.selection.lastSelectedInterval.start).useStdRelativePosition().useStdOffset());
-            }
-            this.control.owner.adjustControl();
-            this.control.horizontalRulerControl.update();
+        ListUtils.forEach(this.control.viewManager.cache, (_val) => this.control.viewManager.renderer.removePage(1), 1);
+        this.control.viewManager.ensureFirstPageIsRendered();
+        this.control.innerClientProperties.viewsSettings.widthOfPage = this.canvasManager.getCanvasWidth();
+        if (this.control.layoutFormatterManager) {
+            this.control.layoutFormatterManager.invalidator.onChangedAllLayout();
+            this.control.selection.scrollManager.setScroll(new ScrollState().byModelPosition(this.control.selection)
+                .setModelPosition(this.control.selection.lastSelectedInterval.start).useStdRelativePosition().useStdOffset());
         }
+        this.control.owner.adjustControl();
+        this.control.horizontalRulerControl.update();
     }
 }
 export class DocumentRenderer {
@@ -272,7 +275,7 @@ export class DocumentRenderer {
         }
     }
     updatePageSize(page, pageElement) {
-        if (pageElement.offsetHeight != page.height || pageElement.offsetWidth != page.width)
+        if (pageElement.offsetHeight != Math.round(page.height) || pageElement.offsetWidth != Math.round(page.width))
             DomUtils.setStyleSize(pageElement.style, page);
     }
     updatePageClasses(pageElement) {

package/lib/common/canvas/renderes/view-manager.d.ts

@@ -24,7 +24,10 @@ 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';
-export declare class ViewManager implements ILayoutChangesListener {
+import { IZoomLevelHolder } from '../../interfaces/i-zoom-level-holder';
+import { IModelChangesListener } from '../../interfaces/model-changes-listener';
+import { ModelChange } from '../../model/changes/change';
+export declare class ViewManager implements ILayoutChangesListener, IZoomLevelHolder, IModelChangesListener {
     private renderers;
     get renderer(): DocumentRenderer;
     get printLayoutRenderer(): DocumentRenderer;
@@ -56,6 +59,7 @@ export declare class ViewManager implements ILayoutChangesListener {
     readonly control: IRichEditControl;
     constructor(control: IRichEditControl, canvas: HTMLDivElement, eventManager: IEventManager, stringResources: StringResources, horizontalRuler: IRulerControl, inputController: InputController, innerClientProperties: InnerClientProperties, readOnlyPropertyHolder: IReadOnlyPropertyHolder, layoutFormatterManagerHolder: ILayoutFormatterManagerHolder, internalApi: IInternalApi, fieldOptions: FieldsSettings);
     dispose(): void;
+    modelChanged(change: ModelChange): void;
     adjust(force: boolean): void;
     NotifyPagesReady(pageChanges: PageChange[]): void;
     NotifyFullyFormatted(_pageCount: number): void;

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

@@ -26,13 +26,16 @@ import { SearchSelectionRenderer } from './selection-renderers/search-selection-
 import { SelectionRenderer } from './selection-renderers/selection-renderer';
 import { ControlOptions, DocumentCapability } from '../../model/options/control';
 import { RichEditClientCommand } from '../../commands/client-command';
+import { ZoomLevelChange } from '../../model/changes/model/zoom-level';
+import { ModelChangeType } from '../../model/changes/enums';
+import { MixedSize } from '../../../common/utils/mixed-size';
 export class ViewManager {
     get renderer() { return this.renderers[this.innerClientProperties.viewsSettings.viewType]; }
     get printLayoutRenderer() { return this.renderers[ViewType.PrintLayout]; }
     get canvasListener() { return this.canvasListeners[this.innerClientProperties.viewsSettings.viewType]; }
     constructor(control, canvas, eventManager, stringResources, horizontalRuler, inputController, innerClientProperties, readOnlyPropertyHolder, layoutFormatterManagerHolder, internalApi, fieldOptions) {
         this.cache = [];
-        this.sizes = new CanvasSizeInfo();
+        this.sizes = new CanvasSizeInfo(this);
         this.control = control;
         this.readOnlyPropertyHolder = readOnlyPropertyHolder;
         this.layoutFormatterManagerHolder = layoutFormatterManagerHolder;
@@ -67,6 +70,13 @@ export class ViewManager {
         this.selection.dispose();
         this.pagesContainer = null;
     }
+    modelChanged(change) {
+        if (change.type == ModelChangeType.ZoomLevelChanged) {
+            this.canvas.scrollTop = this.canvas.scrollTop / change.prevZoomLevel * change.zoomLevel;
+            this.pagesContainer.style.zoom = change.zoomLevel.toString();
+            this.sizes.updateSize(this.canvas);
+        }
+    }
     adjust(force) {
         if ((force || !this.sizes.isInitialized()) && this.cache.length > 0) {
             const firstRenderedPageIndex = Math.min(this.cache.length, Math.max(0, ListUtils.indexBy(this.layout.pages, (page) => page.flags.get(LayoutPageFlags.ContentRendered))));
@@ -104,7 +114,9 @@ export class ViewManager {
             const pageInfo = layoutSelection.selectionInfo.pageInfos[pageIndex];
             const item = pageInfo.oldItems[0];
             const layoutPage = this.layout.pages[pageIndex];
-            this.inputController.setPosition(layoutPage.x + this.cache[pageIndex].page.offsetLeft + item.x, this.sizes.getPageOffsetY(layoutPage) + item.y);
+            const x = MixedSize.fromLayout(layoutPage.x + this.cache[pageIndex].page.offsetLeft + item.x).useScale(this.zoomLevel);
+            const y = MixedSize.fromLayout(this.sizes.getPageOffsetY(layoutPage) + item.y).useScale(this.zoomLevel);
+            this.inputController.setPosition(x.UISize, y.UISize);
         }
     }
     NotifySearchSelectionLayoutChanged() {
@@ -169,12 +181,9 @@ export class ViewManager {
     }
     get zoomLevel() { return this.innerClientProperties.viewsSettings.zoomLevel; }
     set zoomLevel(value) {
-        this.pagesContainer.style.zoom = value.toString();
+        const prevZoomLevel = this.zoomLevel;
         this.innerClientProperties.viewsSettings.zoomLevel = value;
-        if (this.control.innerClientProperties.viewsSettings.isSimpleView) {
-            this.canvasManager.simpleViewCanvasSizeManager.changeSize(true);
-        }
-        this.control.horizontalRulerControl.update();
+        this.control.modelManager.modelManipulator.notifyModelChanged(new ZoomLevelChange(this.zoomLevel, prevZoomLevel));
     }
     get allowZoom() { return ControlOptions.isEnabled(this.control.modelManager.richOptions.control.allowZoom); }
     set allowZoom(value) {

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

@@ -420,6 +420,5 @@ export declare enum RichEditClientCommand {
     NoSpellingSuggestions = 457,
     GetHtml = 458,
     CreateEmptyIfField = 459,
-    ChangeZoomLevel = 460,
-    ToggleAllowZoom = 461
+    ChangeZoomLevel = 460
 }

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

@@ -422,5 +422,4 @@ export var RichEditClientCommand;
     RichEditClientCommand[RichEditClientCommand["GetHtml"] = 458] = "GetHtml";
     RichEditClientCommand[RichEditClientCommand["CreateEmptyIfField"] = 459] = "CreateEmptyIfField";
     RichEditClientCommand[RichEditClientCommand["ChangeZoomLevel"] = 460] = "ChangeZoomLevel";
-    RichEditClientCommand[RichEditClientCommand["ToggleAllowZoom"] = 461] = "ToggleAllowZoom";
 })(RichEditClientCommand || (RichEditClientCommand = {}));

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

@@ -67,7 +67,6 @@ import { GoToNextHeaderFooterCommand, GoToPreviousHeaderFooterCommand } from './
 import { InsertFooterCommand, InsertHeaderCommand } from './header-footer/insert-header-footer-commands';
 import { LinkHeaderFooterToPreviousCommand } from './header-footer/link-header-footer-commands';
 import { ApplyStyleCommand } from './layout/apply-style-command';
-import { ToggleAllowZoomCommand } from './layout/toggle-allow-zoom-command';
 import { ChangeZoomLevelCommand } from './layout/change-zoom-level-command';
 import { ClearFormattingCommand } from './layout/clear-formatting-command';
 import { ChangeViewTypeCommand, SwitchToPrintLayoutViewCommand, SwitchToSimpleViewCommand } from './layout/switch-view-command';
@@ -558,7 +557,6 @@ export class CommandManager {
         this.createCommand(control, RichEditClientCommand.SwitchToSimpleView, SwitchToSimpleViewCommand);
         this.createCommand(control, RichEditClientCommand.SwitchToPrintLayoutView, SwitchToPrintLayoutViewCommand);
         this.createCommand(control, RichEditClientCommand.ChangeZoomLevel, ChangeZoomLevelCommand);
-        this.createCommand(control, RichEditClientCommand.ToggleAllowZoom, ToggleAllowZoomCommand);
         this.createCommand(control, RichEditClientCommand.ShowErrorLoadPictureMessage, ShowLoadPictureErrorDialogCommand);
         this.assingCommand(RichEditClientCommand.PrintDocumentOnClient, new PrintDocumentOnClient(control, printNonce));
     }

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

@@ -13,6 +13,8 @@ export declare class PrintDocumentOnClient extends CommandBase<SimpleCommandStat
     executeCore(_state: SimpleCommandState, options: CommandSimpleOptions<PrintMode | PrintingSettings | undefined>): boolean;
     private printCore;
     private generatePrintDocument;
+    private getGoogleFonts;
+    private createGoogleFontStyleLink;
     private generatePrintContent;
     private createZIndexStyles;
 }

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

@@ -80,8 +80,18 @@ export class PrintDocumentOnClient extends CommandBase {
         return true;
     }
     printCore(htmlPrinting, printWindow, closePrintDialogWithHtmlPreview, needSwitchViewType, needToggleHiddenSymbols) {
-        if (htmlPrinting)
-            this.generatePrintDocument(printWindow, closePrintDialogWithHtmlPreview);
+        if (htmlPrinting) {
+            this.generatePrintDocument(printWindow.document);
+            printWindow.focus();
+            const interval = setInterval(() => {
+                if (printWindow.document.readyState == 'complete') {
+                    printWindow.print();
+                    if (closePrintDialogWithHtmlPreview && !Browser.AndroidMobilePlatform)
+                        printWindow.close();
+                    clearInterval(interval);
+                }
+            }, 100);
+        }
         else {
             pdfExport(this.control, (blob, _stream) => {
                 if (window.navigator.msSaveOrOpenBlob && !Browser.Edge)
@@ -96,12 +106,27 @@ export class PrintDocumentOnClient extends CommandBase {
             this.control.commandManager.getCommand(RichEditClientCommand.ToggleShowWhitespace).execute(this.control.commandManager.isPublicApiCall);
         this.control.commandManager.isPrintingProcessing = false;
     }
-    generatePrintDocument(printWindow, closePrintDialogWithHtmlPreview) {
+    generatePrintDocument(document) {
         const height = this.control.layout.pages[0].height;
         const width = this.control.layout.pages[0].width;
-        let printWindowContent = `<!DOCTYPE html>
-                <html moznomarginboxes mozdisallowselectionprint>
+        let fontLink = "";
+        let divsToLoadFonts = "";
+        const googleFonts = this.getGoogleFonts();
+        if (googleFonts.length > 0) {
+            fontLink = this.createGoogleFontStyleLink(googleFonts);
+            divsToLoadFonts = googleFonts.reduce((prev, curr) => {
+                const fontStyles = [`font-family:${curr}`, 'font-weight:bold', 'font-style:italic'];
+                const result = [];
+                for (let i = 1; i <= fontStyles.length; i++)
+                    result.push(`<div style="font-size:1pt;position:absolute;top:-1000px;${fontStyles.slice(0, i).join(';')}">${curr}</div>`);
+                return prev ? [prev, ...result].join('\n') : result.join('\n');
+            }, null);
+        }
+        document.documentElement.innerHTML =
+            `<!DOCTYPE html>
+            <html moznomarginboxes mozdisallowselectionprint>
                 <head>
+                    ${fontLink}
                     <style ${this._nonce ? `nonce="${this._nonce}"` : ''}>
                         html, body {
                             margin: 0;
@@ -120,22 +145,25 @@ export class PrintDocumentOnClient extends CommandBase {
                     </style>
                 </head>
                 <body>
+                    ${divsToLoadFonts}
                 </body>
-                </html>`;
-        printWindow.document.write(printWindowContent);
-        printWindow.document.close();
+            </html>`;
         this.generatePrintContent().forEach((child) => {
-            printWindow.document.body.appendChild(child);
+            document.body.appendChild(child);
         });
-        printWindow.focus();
-        const interval = setInterval(() => {
-            if (printWindow.document.readyState == 'complete') {
-                printWindow.print();
-                if (closePrintDialogWithHtmlPreview && !Browser.AndroidMobilePlatform)
-                    printWindow.close();
-                clearInterval(interval);
-            }
-        }, 100);
+    }
+    getGoogleFonts() {
+        return this.control.modelManager.richOptions.fonts.fonts.reduce((res, f) => {
+            if (f.useGoogleFonts)
+                res.push(f.fontFamily);
+            return res;
+        }, []);
+    }
+    createGoogleFontStyleLink(fontFamilies) {
+        const url = new URL('https://fonts.googleapis.com/css');
+        url.searchParams.append('family', fontFamilies.join('|'));
+        url.searchParams.append('display', 'auto');
+        return `<link href="${url.toString()}" rel="stylesheet" />`;
     }
     generatePrintContent() {
         const layout = this.control.layout;

package/lib/common/commands/layout/apply-style-command.d.ts

@@ -6,7 +6,7 @@ import { CommandBase, CommandSimpleOptions } from '../command-base';
 import { ApplyStyleCommandState } from '../command-states';
 export interface IApplyStyleCommandParams {
     styleName: string;
-    keepDirectFormatting?: boolean;
+    keepCustomFormatting?: boolean;
 }
 export declare class ApplyStyleCommand extends CommandBase<ApplyStyleCommandState> {
     getState(): ApplyStyleCommandState;
@@ -14,7 +14,7 @@ export declare class ApplyStyleCommand extends CommandBase<ApplyStyleCommandStat
     DEPRECATEDConvertOptionsParameter(parameter: string | IApplyStyleCommandParams): IApplyStyleCommandParams;
     executeCore(state: ApplyStyleCommandState, options: CommandSimpleOptions<IApplyStyleCommandParams>): boolean;
     applyCharacterStyle(subDocumentInterval: SubDocumentInterval, style: CharacterStyle, isPresetStyle: boolean): void;
-    applyParagraphStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean, keepDirectFormatting?: boolean): void;
+    applyParagraphStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean, keepCustomFormatting?: boolean): void;
     applyParagraphLinkedStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean): void;
     private addLinkedCharacterStyle;
     calculateAffectedParagraphCount(subDocumentInterval: SubDocumentInterval): number;

package/lib/common/commands/layout/apply-style-command.js

@@ -70,7 +70,7 @@ export class ApplyStyleCommand extends CommandBase {
                 paragraphStyle = StylesManager.getPresetParagraphStyleByName(styleName).clone();
                 isPresetStyle = true;
             }
-            this.applyParagraphStyle(subDocumentInterval, paragraphStyle, isPresetStyle, parameter.keepDirectFormatting);
+            this.applyParagraphStyle(subDocumentInterval, paragraphStyle, isPresetStyle, parameter.keepCustomFormatting);
         }
         else if (!StylesManager.isParagraphStyle(parameter.styleName) && state.characterStyleChangeEnabled) {
             const styleName = StylesManager.getStyleNameWithoutPrefix(parameter.styleName);
@@ -105,7 +105,7 @@ export class ApplyStyleCommand extends CommandBase {
             this.modelManipulator.style.applyCharacterStyle(subDocumentInterval, characterStyle, false);
         }
     }
-    applyParagraphStyle(subDocumentInterval, style, isPresetStyle, keepDirectFormatting = false) {
+    applyParagraphStyle(subDocumentInterval, style, isPresetStyle, keepCustomFormatting = false) {
         const count = this.calculateAffectedParagraphCount(subDocumentInterval);
         if (count > 0 && ControlOptions.isEnabled(this.control.modelManager.richOptions.control.paragraphStyle)) {
             const { interval, subDocument } = subDocumentInterval;
@@ -118,8 +118,7 @@ export class ApplyStyleCommand extends CommandBase {
                 style = isPresetStyle ? modelManipulator.model.stylesManager.addParagraphStyle(style) : style;
                 this.history.addAndRedo(new ApplyParagraphStyleHistoryItem(modelManipulator, paragraphSubDocumentInterval, style));
                 this.history.addAndRedo(new ParagraphUseValueHistoryItem(modelManipulator, paragraphSubDocumentInterval, 0));
-                if (!keepDirectFormatting)
-                    this.history.addAndRedo(new FontUseValueHistoryItem(modelManipulator, paragraphSubDocumentInterval, 0));
+                this.history.addAndRedo(new FontUseValueHistoryItem(modelManipulator, paragraphSubDocumentInterval, 0, keepCustomFormatting));
                 this.history.addAndRedo(new AddParagraphToListHistoryItem(modelManipulator, subDocument, paragraphIndex, NumberingList.NumberingListNotSettedIndex, -1));
             }
         }

package/lib/common/commands/toc/set-paragraph-level-command.js

@@ -22,7 +22,7 @@ export class SetParagraphLevelCommandBase extends CommandBase {
         if (!paragraphStyle)
             paragraphStyle = StylesManager.getPresetParagraphStyleByName(styleName);
         if (paragraphStyle) {
-            const commandOptions = new CommandSimpleOptions(this.control, { styleName: StylesManager.paragraphPrefix + styleName, keepDirectFormatting: true });
+            const commandOptions = new CommandSimpleOptions(this.control, { styleName: StylesManager.paragraphPrefix + styleName, keepCustomFormatting: true });
             this.commandManager.getCommand(RichEditClientCommand.ChangeStyle).execute(this.commandManager.isPublicApiCall, commandOptions);
         }
         else {

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

@@ -1,6 +1,8 @@
 import { IPictureRenderer } from "../canvas/picture-renderer";
 import { DocumentFormat } from "../document-format";
+import { Grid } from "../layout-formatter/table/grid-engine/grid";
 import { IModelManager } from "../model-manager";
+import { Table } from "../model/tables/main-structures/table";
 import { IRichEditUnitConverter } from "../utils/unit-converter";
 export interface IDocumentExporter {
     exportToBlob(callback: (blob: Blob) => void): any;
@@ -14,5 +16,6 @@ export interface IExportModelOptions {
     sessionGuid: string;
     clientGuid: string;
     lastMaxNumPages?: number;
+    grids?: Map<Table, Grid>;
     pageIndex?: number;
 }

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

@@ -1,7 +1,6 @@
-import { IDocumentExporter } from '../../i-document-exporter';
+import { IDocumentExporter, IExportModelOptions } from '../../i-document-exporter';
 import { ColorModelInfo } from '../../../model/color/color-model-info';
 import { DocumentModel } from '../../../model/document-model';
-import { ModelManipulator } from '../../../model/manipulators/model-manipulator';
 import { RtfContentExporter } from './exporters/rtf-content-exporter';
 import { RtfExportHelper } from './helpers/rtf-export-helper';
 import { RtfBuilder } from './rtf-builder';
@@ -13,7 +12,7 @@ export declare class RtfExporter implements IDocumentExporter {
     contentExporter: RtfContentExporter;
     private modelManipulator;
     get documentModel(): DocumentModel;
-    constructor(modelManipulator: ModelManipulator, options: RtfDocumentExporterOptions);
+    constructor(exportModelOptions: IExportModelOptions, options: RtfDocumentExporterOptions);
     exportToBlob(callback: (blob: Blob) => void): void;
     exportToBase64(callback: (base64: string) => void): void;
     exportAsString(): string;

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

@@ -11,11 +11,11 @@ import { RtfContentExporter } from './exporters/rtf-content-exporter';
 import { RtfExportHelper } from './helpers/rtf-export-helper';
 export class RtfExporter {
     get documentModel() { return this.modelManipulator.model; }
-    constructor(modelManipulator, options) {
-        this.modelManipulator = modelManipulator;
+    constructor(exportModelOptions, options) {
+        this.modelManipulator = exportModelOptions.modelManager.modelManipulator;
         this.options = options;
         this.rtfExportHelper = new RtfExportHelper();
-        this.contentExporter = new RtfContentExporter(this.documentModel, options, this.rtfExportHelper);
+        this.contentExporter = new RtfContentExporter(exportModelOptions, options, this.rtfExportHelper);
         this.rtfBuilder = this.contentExporter.createRtfBuilder();
     }
     exportToBlob(callback) {

package/lib/common/formats/rtf/export/exporters/rtf-content-exporter.d.ts

@@ -8,6 +8,7 @@ import { Section } from '../../../../model/section/section';
 import { SubDocument } from '../../../../model/sub-document';
 import { FooterSubDocumentInfo, HeaderSubDocumentInfo } from '../../../../model/sub-document-infos';
 import { ConditionalTableStyleFormatting } from '../../../../model/tables/secondary-structures/table-base-structures';
+import { IExportModelOptions } from '../../../../formats/i-document-exporter';
 import { RtfExportHelper } from '../helpers/rtf-export-helper';
 import { PieceTableNumberingListCountersManager } from '../piece-table-numbering-list-counters-manager';
 import { RtfBuilder } from '../rtf-builder';
@@ -17,7 +18,7 @@ import { RtfParagraphPropertiesExporter } from './rtf-paragraph-properties-expor
 import { RtfSectionPropertiesExporter } from './rtf-section-properties-exporter';
 export type RunHandler = (run: RunBase, runText: string, absolutePosition: number) => void;
 export declare class RtfContentExporter {
-    documentModel: DocumentModel;
+    exportModelOptions: IExportModelOptions;
     subDocument: SubDocument;
     currentSection: Section;
     static readonly verticalAlignmentTypes: Record<number, string>;
@@ -44,9 +45,10 @@ export declare class RtfContentExporter {
     private bookmarksIterator;
     private permissionsIterator;
     tableIterator: TableIterator;
+    get documentModel(): DocumentModel;
     private startSectionParagraphIndex;
     private shouldFourceUpdateIterators;
-    constructor(documentModel: DocumentModel, options: RtfDocumentExporterOptions, rtfExportHelper: RtfExportHelper);
+    constructor(exportModelOptions: IExportModelOptions, options: RtfDocumentExporterOptions, rtfExportHelper: RtfExportHelper);
     createRtfBuilder(): RtfBuilder;
     export(): void;
     shouldSplitRuns(): boolean;