devexpress-richedit 25.1.2-beta → 25.1.3

package/index.d.ts

@@ -1,6 +1,6 @@
 /**
 * DevExpress WebRichEdit (index.d.ts)
-* Version: 25.1.2
+* Version: 25.1.3
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs
 */

package/index.js

@@ -1,6 +1,6 @@
 /**
 * DevExpress WebRichEdit (index.js)
-* Version: 25.1.2
+* Version: 25.1.3
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs
 */

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

@@ -62,8 +62,8 @@ export class ClientRichEdit {
         this.rawDataSource = settings.rawDataSource;
         this.contextMenuSettings = settings.contextMenuSettings;
         this.fullScreenHelper = new FullScreenHelper(element);
-        if ("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVJWTTBSVlk0YmxKaVpYVk9OVGRWVEdSbFlVeHhZeUlLZlE9PS5MN1o0YXlNMTRnUWtScExSaEt6MGZSMDU5d1E5cWhhMi9ESThnRG83SEJxbFM2L1BMNVRtTmRrTVRzMmdUL3oyUFVQZDgyZGRMM0dsbjZiQUM0aXB4cUI0Y1ozT1FkZjhVc1pmMm9TOCs5SnliZGdCS1diYnFseXdEMUVFbkwwNmV0eWdtQT09In0=")
-            config(JSON.parse(atob("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVJWTTBSVlk0YmxKaVpYVk9OVGRWVEdSbFlVeHhZeUlLZlE9PS5MN1o0YXlNMTRnUWtScExSaEt6MGZSMDU5d1E5cWhhMi9ESThnRG83SEJxbFM2L1BMNVRtTmRrTVRzMmdUL3oyUFVQZDgyZGRMM0dsbjZiQUM0aXB4cUI0Y1ozT1FkZjhVc1pmMm9TOCs5SnliZGdCS1diYnFseXdEMUVFbkwwNmV0eWdtQT09In0=")));
+        if ("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVZqSlJjRkZ0U2xaWVYzazJUbVY0YTNFNVdHczVieUlLZlE9PS5EMTNKeDFkWmJlWFE0bGVWQ05XZnk5U2FLeWFHbmxMOE1xYkF2YzloQ3FVZTlBajJWYzJUS2RaU01RR05xVkVkSjMrTWZQKzQrQTBqMFhCSGxEczdEV2xpWFlNK01EMEVCaEJVQ0JTVzVmeWRGSzhyOGpEMDRzV2ZKYS9CTDRFTGdLOWZpZz09In0=")
+            config(JSON.parse(atob("eyJsaWNlbnNlS2V5IjoiZXdvZ0lDSm1iM0p0WVhRaU9pQXhMQW9nSUNKcGJuUmxjbTVoYkZWellXZGxTV1FpT2lBaVZqSlJjRkZ0U2xaWVYzazJUbVY0YTNFNVdHczVieUlLZlE9PS5EMTNKeDFkWmJlWFE0bGVWQ05XZnk5U2FLeWFHbmxMOE1xYkF2YzloQ3FVZTlBajJWYzJUS2RaU01RR05xVkVkSjMrTWZQKzQrQTBqMFhCSGxEczdEV2xpWFlNK01EMEVCaEJVQ0JTVzVmeWRGSzhyOGpEMDRzV2ZKYS9CTDRFTGdLOWZpZz09In0=")));
         this.prepareElement(element, settings);
         this.initDefaultFontsAndStyles();
         this.initBars(settings.ribbon, settings.fonts);

package/lib/client/commands/commands.js

@@ -441,9 +441,6 @@ export function executeApiCommandCore(commandManager, commandId, parameter) {
                 break;
             }
             ;
-        case ViewTabCommandId.ToggleAllowZoom:
-            parameter = undefined;
-            break;
         case HeaderAndFooterTabCommandId.GoToPageHeader:
             parameter = undefined;
             break;

package/lib/client/model-api/character-properties.js

@@ -40,7 +40,7 @@ export function convertToCharacterPropertiesApi(properties, colorProvider) {
     return value;
 }
 export function convertFromCharacterPropertiesApi(properties, fontInfoCache, parameterIndex, setRestAsUndefined, propsCoreTemplate) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     properties = ApiParametersChecker.check(properties, parameterIndex, false, [
         ApiParametersChecker.objectDescriptor('properties', 'CharacterProperties', (val) => val)
     ]);
@@ -60,31 +60,27 @@ export function convertFromCharacterPropertiesApi(properties, fontInfoCache, par
     propsCoreTemplate.fontItalic = (_d = ApiParametersChecker.check(properties.italic, parameterIndex, true, [
         ApiParametersChecker.booleanDescriptor('properties.italic', (val) => val)
     ])) !== null && _d !== void 0 ? _d : propsCoreTemplate.fontItalic;
-    propsCoreTemplate.fontInfo = (_e = ApiParametersChecker.check(properties.fontName, parameterIndex, true, [
-        ApiParametersChecker.stringDescriptor('properties.fontName', (val) => {
-            const fontInfo = fontInfoCache.getItemByName(val);
-            if (!fontInfo)
-                throw Error('Unknown font name');
-            return fontInfo;
-        }, false)
-    ])) !== null && _e !== void 0 ? _e : propsCoreTemplate.fontInfo;
-    propsCoreTemplate.fontSize = (_f = ApiParametersChecker.check(properties.size, parameterIndex, true, [
+    const fontInfo = ApiParametersChecker.check(properties.fontName, parameterIndex, true, [
+        ApiParametersChecker.stringDescriptor('properties.fontName', (value) => fontInfoCache.getItemByName(value), false)
+    ]);
+    propsCoreTemplate.fontInfo = fontInfo === undefined ? propsCoreTemplate.fontInfo : fontInfo !== null && fontInfo !== void 0 ? fontInfo : fontInfoCache.addFont(properties.fontName, properties.fontName);
+    propsCoreTemplate.fontSize = (_e = ApiParametersChecker.check(properties.size, parameterIndex, true, [
         ApiParametersChecker.numberDescriptor('properties.size', (val) => val, 0, 601)
-    ])) !== null && _f !== void 0 ? _f : propsCoreTemplate.fontSize;
-    propsCoreTemplate.hidden = (_g = ApiParametersChecker.check(properties.hidden, parameterIndex, true, [
+    ])) !== null && _e !== void 0 ? _e : propsCoreTemplate.fontSize;
+    propsCoreTemplate.hidden = (_f = ApiParametersChecker.check(properties.hidden, parameterIndex, true, [
         ApiParametersChecker.booleanDescriptor('properties.hidden', (val) => val)
-    ])) !== null && _g !== void 0 ? _g : propsCoreTemplate.hidden;
+    ])) !== null && _f !== void 0 ? _f : propsCoreTemplate.hidden;
     const shadigInfoColor = ApiParametersChecker.check(properties.backColor, parameterIndex, true, ModelParametersChecker.colorDescriptors('properties.backColor'));
     propsCoreTemplate.shadingInfo = shadigInfoColor === undefined ? propsCoreTemplate.shadingInfo :
         ShadingInfo.createByColor(ColorModelInfo.makeByColor(shadigInfoColor));
-    propsCoreTemplate.script = (_h = ApiParametersChecker.check(properties.script, parameterIndex, true, [
+    propsCoreTemplate.script = (_g = ApiParametersChecker.check(properties.script, parameterIndex, true, [
         ApiParametersChecker.enumDescriptor('properties.script', (val) => val, CharacterPropertiesScriptApi, 'CharacterPropertiesScript')
-    ])) !== null && _h !== void 0 ? _h : propsCoreTemplate.script;
+    ])) !== null && _g !== void 0 ? _g : propsCoreTemplate.script;
     const underlineColor = ApiParametersChecker.check(properties.underlineColor, parameterIndex, true, ModelParametersChecker.colorDescriptors('properties.underlineColor'));
     propsCoreTemplate.underlineColor = underlineColor === undefined ? propsCoreTemplate.underlineColor : ColorModelInfo.makeByColor(underlineColor);
-    propsCoreTemplate.underlineWordsOnly = (_j = ApiParametersChecker.check(properties.underlineWordsOnly, parameterIndex, true, [
+    propsCoreTemplate.underlineWordsOnly = (_h = ApiParametersChecker.check(properties.underlineWordsOnly, parameterIndex, true, [
         ApiParametersChecker.booleanDescriptor('properties.underlineWordsOnly', (val) => val)
-    ])) !== null && _j !== void 0 ? _j : propsCoreTemplate.underlineWordsOnly;
+    ])) !== null && _h !== void 0 ? _h : propsCoreTemplate.underlineWordsOnly;
     const strikeout = ApiParametersChecker.check(properties.strikeout, parameterIndex, true, [
         ApiParametersChecker.booleanDescriptor('properties.strikeout', (val) => val)
     ]);

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

@@ -7,6 +7,7 @@ import { HyperlinkCollection } from './collections/hyperlink-collection';
 import { ListCollection } from './collections/numbered-list-collection';
 import { SectionCollection } from './collections/section-collection';
 import { SubDocumentCollection as SubDocumentCollection } from './collections/sub-documents-collection';
+import { FontCorrector } from '../../common/model/creator/font-corrector';
 export class RichEditDocumentApi {
     constructor(processor) {
         this._processor = processor;
@@ -105,6 +106,7 @@ export class RichEditDocumentApi {
         this._processor.modelManager.model.defaultCharacterProperties =
             this._processor.modelManager.model.cache.maskedCharacterPropertiesCache.getItem(propertiesCore);
         NumberMapUtils.forEach(this._processor.modelManager.model.subDocuments, (sd) => sd.resetMergedFormattingCache(ResetFormattingCacheType.All));
+        new FontCorrector(this._processor.modelManager.modelManipulator, this._processor.modelManager.model, this._processor.modelManager.richOptions.fonts).correct();
         this._processor.layoutFormatterManager.restartManager.restartAllLayout();
         this._processor.endUpdate();
     }

package/lib/client/model-api/images/images.js

@@ -197,7 +197,7 @@ export class ImagesApi {
             applyVerticalPosition(verticalPosition, anchorInfo);
         const anchorPictureInfo = new AnchorPictureInfo(new PictureSize(true, 0, cacheInfo, new Size(100, 100)), shape, anchorInfo, new NonVisualDrawingObjectInfo(), new NonVisualDrawingObjectInfo());
         anchorPictureInfo.containerProperties.description = options.description;
-        this._processor.modelManager.modelManipulator.picture.insertAnchoredPictureViaHistory(new SubDocumentPosition(this._subDocument, position), inputPos.charPropsBundle, anchorPictureInfo, new ImageLoadingOptions(false, size ? new Size(size.width, size.height) : undefined, (_picInterval, _cacheInfo) => setTimeout(() => {
+        this._processor.modelManager.modelManipulator.picture.insertAnchoredPictureViaHistory(new SubDocumentPosition(this._subDocument, position), inputPos.charPropsBundle, anchorPictureInfo, ImageLoadingOptions.initByActualSize(size ? new Size(size.width, size.height) : undefined, (_picInterval, _cacheInfo) => setTimeout(() => {
             callback(getFloatingImageApiFromRun(this._processor, this._subDocument, this._subDocument.getRunAndIndexesByPosition(position)));
         }, 0)));
         this._processor.endUpdate();

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

@@ -150,8 +150,7 @@ export declare enum ViewTabCommandId {
     SwitchToPrintLayout = 406,
     ToggleShowHorizontalRuler = 94,
     ToggleFullScreen = 98,
-    ChangeZoomLevel = 460,
-    ToggleAllowZoom = 461
+    ChangeZoomLevel = 460
 }
 export declare enum HeaderAndFooterTabCommandId {
     GoToPageHeader = 227,

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

@@ -158,7 +158,6 @@ export var ViewTabCommandId;
     ViewTabCommandId[ViewTabCommandId["ToggleShowHorizontalRuler"] = 94] = "ToggleShowHorizontalRuler";
     ViewTabCommandId[ViewTabCommandId["ToggleFullScreen"] = 98] = "ToggleFullScreen";
     ViewTabCommandId[ViewTabCommandId["ChangeZoomLevel"] = 460] = "ChangeZoomLevel";
-    ViewTabCommandId[ViewTabCommandId["ToggleAllowZoom"] = 461] = "ToggleAllowZoom";
 })(ViewTabCommandId || (ViewTabCommandId = {}));
 export var HeaderAndFooterTabCommandId;
 (function (HeaderAndFooterTabCommandId) {

package/lib/client/public/options.d.ts

@@ -158,6 +158,7 @@ export interface IRichEditFontsSettings {
 export interface IFontSettings {
     name: string;
     fontFamily: string;
+    useGoogleFonts?: boolean;
     italicFontUri?: string;
     boldFontUri?: string;
     boldItalicFontUri?: string;

package/lib/client/utils/focus-helper.js

@@ -1,3 +1,4 @@
+var _a;
 export class FocusHelper {
     static preventFocusOnClick(element) {
         return new FocusBlocker(element);
@@ -10,23 +11,24 @@ class FocusBlocker {
         this.addEventListeners(target);
     }
     addEventListeners(element) {
-        element.addEventListener("pointerdown", this.onPointerDownBinded);
+        element.addEventListener("mousedown", this.onPointerDownBinded);
     }
     removeEventListeners(element) {
-        element.removeEventListener("pointerdown", this.onPointerDownBinded);
+        element.removeEventListener("mousedown", this.onPointerDownBinded);
     }
     onPointerDown(event) {
         for (const element of event.composedPath()) {
-            if (!(element instanceof HTMLElement))
-                continue;
             if (element === this.target) {
                 event.preventDefault();
                 break;
             }
-            if (!this.target.contains(element) || element.tabIndex > -1)
+            if (element instanceof Element && this.isFocusableElement(element))
                 break;
         }
     }
+    isFocusableElement(element) {
+        return element.matches(FocusBlocker.focusableSelector);
+    }
     dispose() {
         if (this.target) {
             this.removeEventListeners(this.target);
@@ -34,3 +36,18 @@ class FocusBlocker {
         }
     }
 }
+_a = FocusBlocker;
+FocusBlocker.focusableSelectors = [
+    'a[href]',
+    'area[href]',
+    'input',
+    'select',
+    'textarea',
+    'button',
+    'iframe',
+    'object',
+    'embed',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable]:not([contenteditable="false"])'
+];
+FocusBlocker.focusableSelector = _a.focusableSelectors.join(',');

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

@@ -254,7 +254,7 @@ export class CanvasManager extends BatchUpdatableObject {
         const canvasX = MixedSize.fromUI(DomUtils.getAbsolutePositionX(canvas));
         const canvasY = MixedSize.fromUI(DomUtils.getAbsolutePositionY(canvas));
         const offsetY = MixedSize.fromUI(canvas.scrollTop).addSize(clientY).subtractSize(canvasY).useScale(scaleY);
-        const pageIndex = this.viewManager.layout.findPageIndexByOffsetY(offsetY.LayoutSize, this.sizes);
+        const pageIndex = this.viewManager.layout.findPageIndexByOffsetY(offsetY.LayoutSize * scaleY, this.sizes);
         const visibleAreaWidth = MixedSize.fromUI(this.sizes.getVisibleAreaWidth(false));
         const visibleAreaHeight = MixedSize.fromUI(this.sizes.getVisibleAreaHeight(false));
         if (checkScroll) {

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

@@ -15,6 +15,7 @@ export declare class CanvasSizeInfo implements IControlHeightProvider {
     isInitialized(): boolean;
     initialize(page: HTMLElement, canvas: HTMLDivElement): void;
     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

@@ -22,9 +22,9 @@ export class CanvasSizeInfo {
         this.setVisibleAreaSize(SizeUtils.getClientWidth(canvas), SizeUtils.getClientHeight(canvas));
     }
     getPageOffsetY(layoutPage) {
-        const pageOffsetY = layoutPage.y + (this.topSpacing + layoutPage.index * this.betweenPageSpacing);
-        return pageOffsetY * this.zoomLevelHolder.zoomLevel;
+        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/view-manager.js

@@ -28,6 +28,7 @@ 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]; }
@@ -113,9 +114,9 @@ export class ViewManager {
             const pageInfo = layoutSelection.selectionInfo.pageInfos[pageIndex];
             const item = pageInfo.oldItems[0];
             const layoutPage = this.layout.pages[pageIndex];
-            const x = layoutPage.x + this.cache[pageIndex].page.offsetLeft + item.x;
-            const y = this.sizes.getPageOffsetY(layoutPage) + item.y;
-            this.inputController.setPosition(x, 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() {

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/input-controller.js

@@ -722,7 +722,7 @@ export class IFrameInputEditor extends InputEditorBase {
         const propChar = HtmlConverter.getSizeSignificantRules(this.control.inputPosition.getMergedCharacterPropertiesRaw()).join(";");
         this.editableDocument.body.style.cssText = "padding: 0px; margin: 0px; overflow: hidden; color: transparent; " + propChar;
         this.editableDocument.body.style.textIndent = currentTextIndent;
-        if (Browser.Firefox) {
+        if (Browser.Firefox && Browser.Version <= 137) {
             this.editableDocument.body.style.zoom = this.control.viewManager.zoomLevel;
         }
         let layoutX = layoutPosition.getLayoutX(this.control.measurer, DocumentLayoutDetailsLevel.Row);

package/lib/common/layout/document-layout.js

@@ -1,6 +1,7 @@
 import { NumberMapUtils } from '@devexpress/utils/lib/utils/map/number';
 import { ColorHelper } from '../model/color/color';
 import { SearchUtils } from '@devexpress/utils/lib/utils/search';
+import { MixedSize } from '../utils/mixed-size';
 export class ModelPositionHolder {
     constructor(pos, posManager) {
         this.pos = posManager.registerPosition(pos);
@@ -66,6 +67,8 @@ export class DocumentLayout {
         return this.pages.find((page) => !!page.mainSubDocumentPageAreas[subDocumentId] || !!page.otherPageAreas[subDocumentId]);
     }
     findPageIndexByOffsetY(offsetY, sizeInfo) {
-        return Math.max(0, SearchUtils.normedInterpolationIndexOf(this.pages, (p) => sizeInfo.getPageOffsetY(p), offsetY));
+        const getPageOffsetY = (p) => MixedSize.fromLayout(sizeInfo.getPageOffsetY(p)).useScale(sizeInfo.zoomLevel).UISize;
+        const normedInterpolationIndex = SearchUtils.normedInterpolationIndexOf(this.pages, getPageOffsetY, offsetY);
+        return Math.max(0, normedInterpolationIndex);
     }
 }

package/lib/common/layout-formatter/row/word-holder.js

@@ -25,7 +25,7 @@ export class WordHolderInfo {
         }
         if (res == null)
             return false;
-        if (this.rowFormatter.row.isEmpty()) {
+        if (this.rowFormatter.row.isEmpty() || this.rowFormatter.row.containsSpacesOnly()) {
             if (this.rowFormatter.rowSizesManager.rowFormattingInfo.isFloatingIntersectRow) {
                 this.rowFormatter.rowSizesManager.rowFormattingInfo.findNextYPosWhatHasNeededSpace(res.requiredWidth);
                 return this.pushBoxes();

package/lib/common/model/borders/border-info.js

@@ -5,7 +5,7 @@ import { BorderLineStyle } from './enums';
 import { LayoutBorder } from './layout-border';
 export class BorderInfo {
     constructor() {
-        this.style = BorderLineStyle.None;
+        this.style = BorderLineStyle.Nil;
         this.color = ColorModelInfoCache.defaultItem;
         this.width = 0;
         this.offset = 0;

package/lib/common/model/caches/images.d.ts

@@ -8,12 +8,15 @@ export declare class CacheImageInfo {
     private _convertedBase64?;
     private _size?;
     private _isLoaded;
+    private _isSizeDefined;
     tmpId?: number;
     actualId?: number;
     imageUrl?: string;
     file?: File;
     get isLoaded(): boolean;
     set isLoaded(val: boolean);
+    get isSizeDefined(): boolean;
+    set isSizeDefined(val: boolean);
     get size(): Size;
     set size(val: Size);
     get currId(): number;
@@ -22,7 +25,7 @@ export declare class CacheImageInfo {
     get pdfCompatibleBase64(): string | undefined;
     get referenceInfo(): CacheImageInfo | undefined;
     set referenceInfo(val: CacheImageInfo | undefined);
-    constructor(base64?: string, actualId?: number, tmpId?: number, imageUrl?: string, file?: File, referenceInfo?: CacheImageInfo, size?: Size, isLoaded?: boolean);
+    constructor(base64?: string, actualId?: number, tmpId?: number, imageUrl?: string, file?: File, referenceInfo?: CacheImageInfo, size?: Size, isLoaded?: boolean, isActualSize?: boolean);
     equals(obj: CacheImageInfo): boolean;
     clone(): CacheImageInfo;
     shouldMakeImagePdfCompatible(): boolean;

package/lib/common/model/caches/images.js

@@ -7,6 +7,8 @@ export class CacheImageInfo {
     static get emptyPictureSize() { return new Size(CacheImageInfo.emptyPicDimension, CacheImageInfo.emptyPicDimension); }
     get isLoaded() { return this._referenceInfo ? this._referenceInfo._isLoaded : this._isLoaded; }
     set isLoaded(val) { this._isLoaded = val; }
+    get isSizeDefined() { return this._referenceInfo ? this._referenceInfo._isSizeDefined : this._isSizeDefined; }
+    set isSizeDefined(val) { this._isSizeDefined = val; }
     get size() { return this._referenceInfo ? this._referenceInfo._size : this._size; }
     set size(val) { this._size = val; }
     get currId() { return this.actualId !== undefined ? this.actualId : this.tmpId; }
@@ -19,15 +21,17 @@ export class CacheImageInfo {
         this._base64 = undefined;
         this._size = undefined;
         this._isLoaded = undefined;
+        this._isSizeDefined = undefined;
         this.file = undefined;
     }
-    constructor(base64, actualId, tmpId, imageUrl, file, referenceInfo, size, isLoaded) {
+    constructor(base64, actualId, tmpId, imageUrl, file, referenceInfo, size, isLoaded, isActualSize) {
         this._base64 = base64 !== undefined ? Base64Utils.normalizeToDataUrl(base64, "image/png") : undefined;
         this.actualId = actualId;
         this.tmpId = tmpId;
         this._referenceInfo = referenceInfo;
         this._size = size ? size : CacheImageInfo.emptyPictureSize;
         this._isLoaded = isLoaded !== undefined ? isLoaded : false;
+        this._isSizeDefined = isActualSize ? isActualSize : !!size;
         this.imageUrl = imageUrl;
         this.file = file;
     }
@@ -41,7 +45,7 @@ export class CacheImageInfo {
                 this.size.equals(obj.size);
     }
     clone() {
-        return new CacheImageInfo(this._base64, this.actualId, this.tmpId, this.imageUrl, this.file, this._referenceInfo, this._size, this._isLoaded);
+        return new CacheImageInfo(this._base64, this.actualId, this.tmpId, this.imageUrl, this.file, this._referenceInfo, this._size, this._isLoaded, this._isSizeDefined);
     }
     shouldMakeImagePdfCompatible() {
         if (isDefined(this._convertedBase64))

package/lib/common/model/character/character-properties.d.ts

@@ -54,7 +54,7 @@ export declare class MaskedCharacterProperties extends CharacterProperties imple
     protected calculateHash(): number;
     getUseValue(value: CharacterPropertiesMask): boolean;
     setUseValue(mask: CharacterPropertiesMask, value: boolean): void;
-    setUseValueFull(value: number): void;
+    setUseValueFull(value: number, onlyForDefault?: boolean): void;
     getLowPartUseValue(value: number): number;
     getHighPartUseValue(value: number): number;
     getUseValueFull(): number;

package/lib/common/model/character/character-properties.js

@@ -5,6 +5,7 @@ import { ColorHelper } from '../color/color';
 import { ColorModelInfo } from '../color/color-model-info';
 import { ShadingInfo } from '../shadings/shading-info';
 import { ShadingPattern } from '../shadings/shading-pattern';
+import { CharacterPropertyDescriptor } from './character-property-descriptor';
 import { CompositeFontInfo } from './composite-font-info';
 import { CharacterFormattingScript, CharacterPropertiesMask, StrikeoutType, UnderlineType } from './enums';
 import { LangInfo } from './lang-info';
@@ -143,8 +144,19 @@ export class MaskedCharacterProperties extends CharacterProperties {
             this.useValueExt &= ~this.getHighPartUseValue(mask);
         }
     }
-    setUseValueFull(value) {
-        this.useValue = this.getLowPartUseValue(value);
+    setUseValueFull(value, onlyForDefault = false) {
+        const lowPartUseValue = this.getLowPartUseValue(value);
+        if (onlyForDefault) {
+            CharacterPropertyDescriptor.ALL_FIELDS.forEach((desc) => {
+                const prop = desc.getProp(this);
+                const mask = desc.maskValue();
+                if (desc.binaryEquals(prop, desc.defaultValue))
+                    this.setUseValue(mask, !!(mask & lowPartUseValue));
+            });
+        }
+        else {
+            this.useValue = lowPartUseValue;
+        }
         this.useValueExt = this.getHighPartUseValue(value);
     }
     getLowPartUseValue(value) {

package/lib/common/model/fields/field.d.ts

@@ -99,7 +99,7 @@ export declare class Field {
     static correctIntervalDueToFieldsWithoutUiChecks(subDocument: SubDocument, newInterval: FixedInterval): FixedInterval;
     private static correctIntervalDueToFieldsCaseSelectionCollapsed;
     static correctIntervalDueToFields(subDocument: SubDocument, newInterval: FixedInterval): number;
-    private static isFloatingObjectSelected;
+    private static isResizableObjectSelected;
     static correctWhenPositionInStartCode(fields: Field[], position: number): number;
     clone(subDocument: SubDocument): Field;
 }