devexpress-richedit 24.1.11 → 24.1.12-build-25107-0103

package/index.d.ts

@@ -1,6 +1,6 @@
 /**
 * DevExpress WebRichEdit (index.d.ts)
-* Version: 24.1.11
+* Version: 24.1.12
 * 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: 24.1.11
+* Version: 24.1.12
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs
 */

package/lib/client/bars/ribbon.d.ts

@@ -13,6 +13,7 @@ export declare class ClientRibbonBar extends RibbonBarBase implements IRibbonBar
     private _toolbarItemsCache;
     private ownerElement;
     private activeItem;
+    private focusHandler;
     constructor(ownerControl: IControlOwner, ownerElement: HTMLElement, apiRibbon: ApiRibbon, fonts: FontsSettings);
     protected updateContextItem(_commandKey: RichEditClientCommand): void;
     onCanvasMouseDown(): void;

package/lib/client/bars/ribbon.js

@@ -6,6 +6,7 @@ import { ListUtils } from '@devexpress/utils/lib/utils/list';
 import { StringMapUtils } from '@devexpress/utils/lib/utils/map/string';
 import { createInnerTab } from '../public/ribbon/creator';
 import { SizeUtils } from '../../common/utils/size-utils';
+import { FocusHelper } from '../utils/focus-helper';
 export class ClientRibbonBar extends RibbonBarBase {
     constructor(ownerControl, ownerElement, apiRibbon, fonts) {
         var _a;
@@ -14,6 +15,7 @@ export class ClientRibbonBar extends RibbonBarBase {
         this.ownerElement = ownerElement;
         this.init(apiRibbon, fonts);
         this.createControl((_a = apiRibbon.activeTabIndex) !== null && _a !== void 0 ? _a : 1);
+        this.focusHandler = FocusHelper.preventFocusOnClick(this.ribbon.element);
     }
     updateContextItem(_commandKey) {
     }
@@ -39,13 +41,13 @@ export class ClientRibbonBar extends RibbonBarBase {
     }
     dispose() {
         this.ribbon.dispose();
+        this.focusHandler.dispose();
     }
     checkActivateHeaderFooter(_selection) {
         return false;
     }
     createControl(activeTabIndex) {
         const element = document.createElement('div');
-        element.tabIndex = 0;
         const firstChild = this.ownerElement.firstChild;
         if (firstChild)
             this.ownerElement.insertBefore(element, firstChild);

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

@@ -158,11 +158,11 @@ class RichEditPublic {
         command.execute(true, type);
     }
     get readOnly() {
-        return this._native.core.readOnly == ReadOnlyMode.Persistent;
+        return this._native.core.readOnly === ReadOnlyMode.Persistent;
     }
     set readOnly(value) {
         if (this.readOnly != value) {
-            this._native.core.readOnly = value ? ReadOnlyMode.Persistent : ReadOnlyMode.None;
+            this._native.core.setPersistentReadOnly(value);
             this._native.core.barHolder.updateItemsState();
             this._native.core.horizontalRulerControl.update();
             this._native.core.beginUpdate();

package/lib/client/utils/focus-helper.d.ts

@@ -0,0 +1,4 @@
+import { IDisposable } from "@devexpress/utils/lib/types";
+export declare class FocusHelper {
+    static preventFocusOnClick(element: HTMLElement): IDisposable;
+}

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

@@ -0,0 +1,36 @@
+export class FocusHelper {
+    static preventFocusOnClick(element) {
+        return new FocusBlocker(element);
+    }
+}
+class FocusBlocker {
+    constructor(target) {
+        this.target = target;
+        this.onPointerDownBinded = this.onPointerDown.bind(this);
+        this.addEventListeners(target);
+    }
+    addEventListeners(element) {
+        element.addEventListener("pointerdown", this.onPointerDownBinded);
+    }
+    removeEventListeners(element) {
+        element.removeEventListener("pointerdown", 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)
+                break;
+        }
+    }
+    dispose() {
+        if (this.target) {
+            this.removeEventListeners(this.target);
+            this.target = null;
+        }
+    }
+}

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

@@ -318,17 +318,23 @@ export class CanvasManager extends BatchUpdatableObject {
     onScrollIntervalTick() {
         const evtX = this.lastMousePosition.x;
         const evtY = this.lastMousePosition.y;
-        const inHorizontalArea = evtX >= this.canvasPosition.x && evtX <= this.canvasPosition.x + this.sizes.getVisibleAreaWidth(true);
-        const inVerticalArea = evtY >= this.canvasPosition.y && evtY <= this.canvasPosition.y + this.sizes.getVisibleAreaHeight(true);
+        const inHorizontalArea = evtX >= this.canvasPosition.x && evtX <= this.canvasPosition.x + this.sizes.getVisibleAreaWidth(false);
+        const inVerticalArea = evtY >= this.canvasPosition.y && evtY <= this.canvasPosition.y + this.sizes.getVisibleAreaHeight(false);
         if (!inHorizontalArea && !inVerticalArea)
             return;
+        const yOffsetWithoutScrollbar = this.canvasPosition.y + this.sizes.getVisibleAreaHeight(false) - evtY;
+        const yOffsetWithScrollbar = this.canvasPosition.y + this.sizes.getVisibleAreaHeight(true) - evtY;
+        const outsideHorizontalScrollbar = yOffsetWithoutScrollbar > 0 || yOffsetWithScrollbar < 0;
         if (inHorizontalArea && evtY - this.canvasPosition.y <= AUTOSCROLL_AREA_SIZE)
             this.viewManager.canvas.scrollTop -= AUTOSCROLL_STEP;
-        else if (inHorizontalArea && this.canvasPosition.y + this.sizes.getVisibleAreaHeight(true) - evtY <= AUTOSCROLL_AREA_SIZE)
+        else if (inHorizontalArea && yOffsetWithoutScrollbar <= AUTOSCROLL_AREA_SIZE && outsideHorizontalScrollbar)
             this.viewManager.canvas.scrollTop += AUTOSCROLL_STEP;
+        const xOffsetWithoutScrollbar = this.canvasPosition.x + this.sizes.getVisibleAreaWidth(false) - evtX;
+        const xOffsetWithScrollbar = this.canvasPosition.x + this.sizes.getVisibleAreaWidth(true) - evtX;
+        const outsideVerticalScrollbar = xOffsetWithoutScrollbar > 0 || xOffsetWithScrollbar < 0;
         if (inVerticalArea && evtX - this.canvasPosition.x <= AUTOSCROLL_AREA_SIZE)
             this.viewManager.canvas.scrollLeft -= AUTOSCROLL_STEP;
-        else if (inVerticalArea && this.canvasPosition.x + this.sizes.getVisibleAreaWidth(true) - evtX <= AUTOSCROLL_AREA_SIZE)
+        else if (inVerticalArea && xOffsetWithoutScrollbar <= AUTOSCROLL_AREA_SIZE && outsideVerticalScrollbar)
             this.viewManager.canvas.scrollLeft += AUTOSCROLL_STEP;
     }
     static getCursorClassName(pointer) {

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

@@ -77,18 +77,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 +270,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/commands/layout/apply-style-command.d.ts

@@ -1,18 +1,23 @@
 import { CharacterStyle } from '../../model/character/character-style';
 import { ParagraphStyle } from '../../model/paragraph/paragraph-style';
-import { SubDocument } from '../../model/sub-document';
+import { SubDocumentInterval } from '../../model/sub-document';
 import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { CommandBase, CommandSimpleOptions } from '../command-base';
 import { ApplyStyleCommandState } from '../command-states';
+export interface IApplyStyleCommandParams {
+    styleName: string;
+    keepDirectFormatting?: boolean;
+}
 export declare class ApplyStyleCommand extends CommandBase<ApplyStyleCommandState> {
     getState(): ApplyStyleCommandState;
     private getStyleName;
-    executeCore(state: ApplyStyleCommandState, options: CommandSimpleOptions<string>): boolean;
-    applyCharacterStyle(interval: FixedInterval, style: CharacterStyle, isPresetStyle: boolean, subDocument: SubDocument): void;
-    applyParagraphStyle(interval: FixedInterval, style: ParagraphStyle, isPresetStyle: boolean, subDocument: SubDocument): void;
-    applyParagraphLinkedStyle(interval: FixedInterval, style: ParagraphStyle, isPresetStyle: boolean, subDocument: SubDocument): void;
-    private createCharacterStyle;
-    calculateAffectedParagraphCount(interval: FixedInterval, subDocument: SubDocument): number;
+    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;
+    applyParagraphLinkedStyle(subDocumentInterval: SubDocumentInterval, style: ParagraphStyle, isPresetStyle: boolean): void;
+    private addLinkedCharacterStyle;
+    calculateAffectedParagraphCount(subDocumentInterval: SubDocumentInterval): number;
     isEnabled(): boolean;
     protected canModify(): boolean;
     protected getIntervalsForModifying(): FixedInterval[];

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

@@ -9,7 +9,6 @@ import { ControlOptions } from '../../model/options/control';
 import { RichUtils } from '../../model/rich-utils';
 import { StylesManager } from '../../model/styles-manager';
 import { SubDocumentInterval } from '../../model/sub-document';
-import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { SearchUtils } from '@devexpress/utils/lib/utils/search';
 import { CommandBase } from '../command-base';
 import { StringUtils } from '@devexpress/utils/lib/utils/string';
@@ -50,16 +49,19 @@ export class ApplyStyleCommand extends CommandBase {
     getStyleName(style) {
         return style.styleName;
     }
+    DEPRECATEDConvertOptionsParameter(parameter) {
+        return typeof parameter === 'string' ? { styleName: parameter } : parameter;
+    }
     executeCore(state, options) {
         const parameter = options.param;
-        if (StringUtils.isNullOrEmpty(parameter))
+        if (StringUtils.isNullOrEmpty(parameter.styleName))
             return false;
-        let interval = state.interval.clone();
+        const subDocumentInterval = new SubDocumentInterval(options.subDocument, state.interval.clone());
         let executed = true;
         let isPresetStyle = false;
         this.history.beginTransaction();
-        if (StylesManager.isParagraphStyle(parameter) && state.paragraphStyleChangeEnabled) {
-            const styleName = StylesManager.getStyleNameWithoutPrefix(parameter);
+        if (StylesManager.isParagraphStyle(parameter.styleName) && state.paragraphStyleChangeEnabled) {
+            const styleName = StylesManager.getStyleNameWithoutPrefix(parameter.styleName);
             let paragraphStyle = this.control.modelManager.model.getParagraphStyleByName(styleName);
             if (!paragraphStyle) {
                 const presetStyle = StylesManager.getPresetParagraphStyleByName(styleName);
@@ -68,12 +70,12 @@ export class ApplyStyleCommand extends CommandBase {
                 paragraphStyle = StylesManager.getPresetParagraphStyleByName(styleName).clone();
                 isPresetStyle = true;
             }
-            this.applyParagraphStyle(interval, paragraphStyle, isPresetStyle, options.subDocument);
+            this.applyParagraphStyle(subDocumentInterval, paragraphStyle, isPresetStyle, parameter.keepDirectFormatting);
         }
-        else if (!StylesManager.isParagraphStyle(parameter) && state.characterStyleChangeEnabled) {
-            const styleName = StylesManager.getStyleNameWithoutPrefix(parameter);
-            if (interval.length == 0)
-                interval = options.subDocument.getWholeWordInterval(interval.start);
+        else if (!StylesManager.isParagraphStyle(parameter.styleName) && state.characterStyleChangeEnabled) {
+            const styleName = StylesManager.getStyleNameWithoutPrefix(parameter.styleName);
+            if (subDocumentInterval.interval.length == 0)
+                subDocumentInterval.interval = options.subDocument.getWholeWordInterval(subDocumentInterval.interval.start);
             let characterStyle = this.control.modelManager.model.getCharacterStyleByName(styleName);
             if (!characterStyle) {
                 const presetStyle = StylesManager.getPresetCharacterStyleByName(styleName);
@@ -82,9 +84,9 @@ export class ApplyStyleCommand extends CommandBase {
                 characterStyle = presetStyle.clone();
                 isPresetStyle = true;
             }
-            if (interval.length == 0) {
+            if (subDocumentInterval.interval.length == 0) {
                 if (isPresetStyle) {
-                    let fontInfo = characterStyle.maskedCharacterProperties.fontInfo;
+                    const fontInfo = characterStyle.maskedCharacterProperties.fontInfo;
                     if (fontInfo && fontInfo.measurer === undefined)
                         characterStyle.maskedCharacterProperties.fontInfo = this.control.modelManager.model.cache.fontInfoCache.getItemByName(fontInfo.name);
                 }
@@ -92,50 +94,56 @@ export class ApplyStyleCommand extends CommandBase {
                 executed = false;
             }
             else
-                this.applyCharacterStyle(interval, characterStyle, isPresetStyle, options.subDocument);
+                this.applyCharacterStyle(subDocumentInterval, characterStyle, isPresetStyle);
         }
         this.history.endTransaction();
         return executed;
     }
-    applyCharacterStyle(interval, style, isPresetStyle, subDocument) {
+    applyCharacterStyle(subDocumentInterval, style, isPresetStyle) {
         if (ControlOptions.isEnabled(this.control.modelManager.richOptions.control.characterStyle)) {
-            this.modelManipulator.style.applyCharacterStyle(new SubDocumentInterval(subDocument, interval), isPresetStyle ? this.control.modelManager.model.stylesManager.addCharacterStyle(style) : style, false);
+            const characterStyle = isPresetStyle ? this.control.modelManager.model.stylesManager.addCharacterStyle(style) : style;
+            this.modelManipulator.style.applyCharacterStyle(subDocumentInterval, characterStyle, false);
         }
     }
-    applyParagraphStyle(interval, style, isPresetStyle, subDocument) {
-        var count = this.calculateAffectedParagraphCount(interval, subDocument);
+    applyParagraphStyle(subDocumentInterval, style, isPresetStyle, keepDirectFormatting = false) {
+        const count = this.calculateAffectedParagraphCount(subDocumentInterval);
         if (count > 0 && ControlOptions.isEnabled(this.control.modelManager.richOptions.control.paragraphStyle)) {
-            var paragraphIndex = SearchUtils.normedInterpolationIndexOf(subDocument.paragraphs, p => p.startLogPosition.value, interval.start);
-            for (var i = 0; i < count; i++) {
-                var paragraph = subDocument.paragraphs[paragraphIndex + i];
-                var paragraphInterval = new FixedInterval(paragraph.startLogPosition.value, paragraph.length);
-                var modelManipulator = this.modelManipulator;
-                this.history.addAndRedo(new ApplyParagraphStyleHistoryItem(modelManipulator, new SubDocumentInterval(subDocument, paragraphInterval), isPresetStyle ? modelManipulator.model.stylesManager.addParagraphStyle(style) : style));
-                this.history.addAndRedo(new ParagraphUseValueHistoryItem(modelManipulator, new SubDocumentInterval(subDocument, paragraphInterval), 0));
-                this.history.addAndRedo(new FontUseValueHistoryItem(modelManipulator, new SubDocumentInterval(subDocument, paragraphInterval), 0));
-                this.history.addAndRedo(new AddParagraphToListHistoryItem(this.modelManipulator, subDocument, paragraphIndex, NumberingList.NumberingListNotSettedIndex, -1));
+            const { interval, subDocument } = subDocumentInterval;
+            const paragraphs = subDocument.paragraphs;
+            const paragraphIndex = SearchUtils.normedInterpolationIndexOf(paragraphs, p => p.startLogPosition.value, interval.start);
+            for (let i = 0; i < count; i++) {
+                const paragraph = paragraphs[paragraphIndex + i];
+                const modelManipulator = this.modelManipulator;
+                const paragraphSubDocumentInterval = new SubDocumentInterval(subDocument, paragraph.interval);
+                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 AddParagraphToListHistoryItem(modelManipulator, subDocument, paragraphIndex, NumberingList.NumberingListNotSettedIndex, -1));
             }
         }
         else
-            this.applyParagraphLinkedStyle(interval, style, isPresetStyle, subDocument);
+            this.applyParagraphLinkedStyle(subDocumentInterval, style, isPresetStyle);
     }
-    applyParagraphLinkedStyle(interval, style, isPresetStyle, subDocument) {
+    applyParagraphLinkedStyle(subDocumentInterval, style, isPresetStyle) {
         if (ControlOptions.isEnabled(this.control.modelManager.richOptions.control.characterStyle)) {
             if (!style.linkedStyle)
-                this.createCharacterStyle(style);
-            this.applyCharacterStyle(interval, style.linkedStyle, isPresetStyle, subDocument);
+                this.addLinkedCharacterStyle(style);
+            this.applyCharacterStyle(subDocumentInterval, style.linkedStyle, isPresetStyle);
         }
     }
-    createCharacterStyle(paragraphStyle) {
-        var style = new CharacterStyle(paragraphStyle.styleName + " Char", paragraphStyle.localizedName + " Char", false, false, false, false, paragraphStyle.maskedCharacterProperties);
+    addLinkedCharacterStyle(paragraphStyle) {
+        const style = new CharacterStyle(paragraphStyle.styleName + " Char", paragraphStyle.localizedName + " Char", false, false, false, false, paragraphStyle.maskedCharacterProperties);
         this.history.addAndRedo(new CreateStyleLinkHistoryItem(this.modelManipulator, style, paragraphStyle));
     }
-    calculateAffectedParagraphCount(interval, subDocument) {
-        var paragraphs = subDocument.getParagraphsByInterval(interval);
+    calculateAffectedParagraphCount(subDocumentInterval) {
+        const { interval, subDocument } = subDocumentInterval;
+        const paragraphs = subDocument.getParagraphsByInterval(interval);
         if (paragraphs.length > 1)
             return paragraphs.length;
-        var paragraph = paragraphs[0];
-        var lastParagraphCharSelected = interval.length >= paragraph.length - 1;
+        const paragraph = paragraphs[0];
+        const lastParagraphCharSelected = interval.length >= paragraph.length - 1;
         if (interval.start === paragraph.startLogPosition.value && lastParagraphCharSelected || interval.length === 0)
             return 1;
         return 0;

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

@@ -1,6 +1,8 @@
 import { CommandBase, CommandSimpleOptions } from '../command-base';
 import { SimpleCommandState } from '../command-states';
 export declare abstract class SetParagraphLevelCommandBase extends CommandBase<SimpleCommandState> {
+    private get commandManager();
+    private get modelManager();
     isEnabled(): boolean;
     getState(): SimpleCommandState;
     executeCore(_state: SimpleCommandState, options: CommandSimpleOptions<number>): boolean;

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

@@ -5,24 +5,30 @@ import { RichEditClientCommand } from '../client-command';
 import { CommandBase, CommandSimpleOptions } from '../command-base';
 import { SimpleCommandState } from '../command-states';
 export class SetParagraphLevelCommandBase extends CommandBase {
+    get commandManager() { return this.control.commandManager; }
+    get modelManager() { return this.control.modelManager; }
     isEnabled() {
-        return super.isEnabled() && ControlOptions.isEnabled(this.control.modelManager.richOptions.control.paragraphFormatting);
+        return super.isEnabled() && ControlOptions.isEnabled(this.modelManager.richOptions.control.paragraphFormatting);
     }
     getState() {
         const state = new SimpleCommandState(this.isEnabled());
-        state.value = this.control.commandManager.getCommand(RichEditClientCommand.ChangeHeadingLevel).getState().value == this.getLevel(null);
+        state.value = this.commandManager.getCommand(RichEditClientCommand.ChangeHeadingLevel).getState().value == this.getLevel(null);
         return state;
     }
     executeCore(_state, options) {
         const level = this.getLevel(options.param);
         const styleName = level > 0 ? `${ParagraphStyle.headingStyleName} ${level}` : ParagraphStyle.normalStyleName;
-        let paragraphStyle = this.control.modelManager.model.getParagraphStyleByName(styleName);
+        let paragraphStyle = this.modelManager.model.getParagraphStyleByName(styleName);
         if (!paragraphStyle)
             paragraphStyle = StylesManager.getPresetParagraphStyleByName(styleName);
-        if (paragraphStyle)
-            this.control.commandManager.getCommand(RichEditClientCommand.ChangeStyle).execute(this.control.commandManager.isPublicApiCall, new CommandSimpleOptions(this.control, StylesManager.paragraphPrefix + styleName));
-        else
-            this.control.commandManager.getCommand(RichEditClientCommand.ChangeHeadingLevel).execute(this.control.commandManager.isPublicApiCall, new CommandSimpleOptions(this.control, level));
+        if (paragraphStyle) {
+            const commandOptions = new CommandSimpleOptions(this.control, { styleName: StylesManager.paragraphPrefix + styleName, keepDirectFormatting: true });
+            this.commandManager.getCommand(RichEditClientCommand.ChangeStyle).execute(this.commandManager.isPublicApiCall, commandOptions);
+        }
+        else {
+            const commandOptions = new CommandSimpleOptions(this.control, level);
+            this.commandManager.getCommand(RichEditClientCommand.ChangeHeadingLevel).execute(this.commandManager.isPublicApiCall, commandOptions);
+        }
         return true;
     }
     getRelatedCommands() {

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

@@ -17,7 +17,7 @@ export declare abstract class InputEditorBase<TInpElement extends HTMLElement> {
     previousText: string;
     canInsertTextOnInputEvent: boolean;
     needProcessShortcut: boolean;
-    initializedIfNotReadOnly: boolean;
+    editableStateInitialized: boolean;
     prevKeyCode: number;
     IMEState: IMEState;
     private inputWithAlt;
@@ -31,8 +31,8 @@ export declare abstract class InputEditorBase<TInpElement extends HTMLElement> {
     constructor(control: IRichEditControl, eventManager: IEventManager, parent: HTMLElement);
     dispose(): void;
     initialize(): void;
-    initializeIfNotReadOnly(): void;
-    initializeIfNotReadOnlyCore(): void;
+    initializeEditableState(): void;
+    initializeEditableStateCore(): void;
     initEvents(): void;
     createHierarchy(parent: HTMLElement): void;
     createHierarchyCore(): void;
@@ -78,7 +78,7 @@ export declare class DivInputEditor extends InputEditorBase<HTMLElement> {
     private onTextInputTimerId;
     constructor(control: IRichEditControl, eventManager: IEventManager, parent: HTMLElement);
     dispose(): void;
-    initializeIfNotReadOnlyCore(): void;
+    initializeEditableStateCore(): void;
     setPosition(left: number, top: number): void;
     createInputElement(): HTMLElement;
     initEvents(): void;
@@ -114,7 +114,7 @@ export declare class IFrameInputEditor extends InputEditorBase<HTMLIFrameElement
     constructor(control: IRichEditControl, eventManager: IEventManager, parent: HTMLElement);
     dispose(): void;
     createHierarchyCore(): void;
-    initializeIfNotReadOnlyCore(): void;
+    initializeEditableStateCore(): void;
     createInputElement(): HTMLIFrameElement;
     initEvents(): void;
     private isModifyEnabled;

package/lib/common/input-controller.js

@@ -51,17 +51,17 @@ export class InputEditorBase {
         clearTimeout(this.onKeyUpTimerId);
     }
     initialize() {
-        this.initializeIfNotReadOnly();
+        this.initializeEditableState();
         this.initEvents();
         this.prevKeyCode = EMPTY_KEYCODE;
     }
-    initializeIfNotReadOnly() {
-        if ((this.control.readOnly !== ReadOnlyMode.Persistent || this.control.modelManager.clientMode) && !this.initializedIfNotReadOnly) {
-            this.initializedIfNotReadOnly = true;
-            this.initializeIfNotReadOnlyCore();
+    initializeEditableState() {
+        if (!this.editableStateInitialized) {
+            this.editableStateInitialized = true;
+            this.initializeEditableStateCore();
         }
     }
-    initializeIfNotReadOnlyCore() {
+    initializeEditableStateCore() {
     }
     initEvents() {
         this.evtHandlersHolder.addListener(this.getEditableDocument(), "keydown", this.onKeyDown.bind(this));
@@ -281,8 +281,8 @@ export class DivInputEditor extends InputEditorBase {
         clearTimeout(this.composEndTimerId);
         clearTimeout(this.onTextInputTimerId);
     }
-    initializeIfNotReadOnlyCore() {
-        this.inputElement.contentEditable = "true";
+    initializeEditableStateCore() {
+        this.inputElement.contentEditable = String(!this.control.isReadOnlyPersistent);
         this.clearInputElement();
     }
     setPosition(left, top) {
@@ -530,11 +530,11 @@ export class IFrameInputEditor extends InputEditorBase {
         body.style.margin = "0px";
         body.style.overflow = "hidden";
     }
-    initializeIfNotReadOnlyCore() {
+    initializeEditableStateCore() {
         if (Browser.WebKitFamily)
-            this.editableDocument.body.setAttribute("contenteditable", "true");
+            this.editableDocument.body.setAttribute("contenteditable", String(!this.control.isReadOnlyPersistent));
         else
-            this.editableDocument.designMode = "on";
+            this.editableDocument.designMode = this.control.isReadOnlyPersistent ? "off" : "on";
     }
     createInputElement() {
         const element = document.createElement("IFRAME");
@@ -673,7 +673,7 @@ export class IFrameInputEditor extends InputEditorBase {
     recreateIfNeeded() {
         const iframeDocument = this.inputElement.contentDocument || this.inputElement.contentWindow.document;
         if (!iframeDocument.body.hasAttribute("loaded")) {
-            this.initializedIfNotReadOnly = false;
+            this.editableStateInitialized = false;
             this.createHierarchyCore();
             this.initialize();
         }

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

@@ -13,7 +13,8 @@ export declare enum LayoutRowStateFlags {
     SectionEnd = 8,
     DocumentEnd = 16,
     CellTableEnd = 64,
-    PageBreakBefore = 128
+    PageBreakBefore = 128,
+    InfinityWidth = 256
 }
 export declare class LayoutRow extends Rectangle {
     boxes: LayoutBox[];

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

@@ -2,6 +2,7 @@ import { Flag } from '@devexpress/utils/lib/class/flag';
 import { UnitConverter } from '@devexpress/utils/lib/class/unit-converter';
 import { Rectangle } from '@devexpress/utils/lib/geometry/rectangle';
 import { ListUtils } from '@devexpress/utils/lib/utils/list';
+import { LayoutBoxType } from './layout-boxes/layout-box';
 export var LayoutRowStateFlags;
 (function (LayoutRowStateFlags) {
     LayoutRowStateFlags[LayoutRowStateFlags["NormallyEnd"] = 0] = "NormallyEnd";
@@ -12,6 +13,7 @@ export var LayoutRowStateFlags;
     LayoutRowStateFlags[LayoutRowStateFlags["DocumentEnd"] = 16] = "DocumentEnd";
     LayoutRowStateFlags[LayoutRowStateFlags["CellTableEnd"] = 64] = "CellTableEnd";
     LayoutRowStateFlags[LayoutRowStateFlags["PageBreakBefore"] = 128] = "PageBreakBefore";
+    LayoutRowStateFlags[LayoutRowStateFlags["InfinityWidth"] = 256] = "InfinityWidth";
 })(LayoutRowStateFlags || (LayoutRowStateFlags = {}));
 export class LayoutRow extends Rectangle {
     constructor(minY = Number.MAX_SAFE_INTEGER) {
@@ -127,7 +129,7 @@ export class LayoutRow extends Rectangle {
         return lastBoxIndexWhatCanStrikeoutAndUnderline;
     }
     containsSpacesOnly() {
-        return this.boxes.length > 0 && ListUtils.allOf(this.boxes, val => val.isWhitespace());
+        return this.boxes.length > 0 && ListUtils.allOf(this.boxes, val => val.isWhitespace() || val.getType() === LayoutBoxType.ParagraphMark);
     }
 }
 export class LayoutRowWithIndex extends LayoutRow {

package/lib/common/layout-formatter/row/result.js

@@ -42,7 +42,8 @@ export class RowFormatterResult {
             return;
         this.rowFormatter.tabInfo.shiftBoxesAfterLastTab();
         const dontJustifyLinesEndingInSoftLineBreak = this.rowFormatter.manager.model.compatibilitySettings.dontJustifyLinesEndingInSoftLineBreak;
-        BoxAligner.align(this.row, this.rowFormatter.paragraphProps.alignment, currLogicRowEndPos, this.rowBoxIndexStart, dontJustifyLinesEndingInSoftLineBreak);
+        if (!this.row.flags.get(LayoutRowStateFlags.InfinityWidth))
+            BoxAligner.align(this.row, this.rowFormatter.paragraphProps.alignment, currLogicRowEndPos, this.rowBoxIndexStart, dontJustifyLinesEndingInSoftLineBreak);
         this.rowBoxIndexStart = this.row.boxes.length;
     }
     deleteSomeAnchorObjects(index, posToRestart) {

package/lib/common/layout-formatter/row/tab-info.js

@@ -7,6 +7,7 @@ import { SearchUtils } from '@devexpress/utils/lib/utils/search';
 import { StringUtils } from '@devexpress/utils/lib/utils/string';
 import { LayoutBoxType } from '../../layout/main-structures/layout-boxes/layout-box';
 import { TabLeaderType } from '../../layout/main-structures/layout-boxes/layout-tab-space-box';
+import { LayoutRowStateFlags } from '../../layout/main-structures/layout-row';
 import { TabAlign } from '../../model/paragraph/paragraph';
 import { ParagraphFirstLineIndent } from '../../model/paragraph/paragraph-properties';
 import { TabInfo } from '../../model/paragraph/paragraph-style';
@@ -84,10 +85,11 @@ export class RowTabInfo {
         const lastInterval = ListUtils.last(this.rowFormatter.rowSizesManager.rowFormattingInfo.intervals);
         if (tabXPosRelativePage > lastInterval.end) {
             if (lastInterval.end < this.rowFormatter.paragraphHorizontalBounds.end) {
-                if (this.rowFormatter.manager.model.compatibilitySettings.compatibilityMode < CompatibilityMode.Word2013) {
+                if (this.rowFormatter.manager.model.compatibilitySettings.compatibilityMode < CompatibilityMode.Word2013 && tabPosition !== null) {
+                    this.currInterval.avaliableWidth = Number.MAX_SAFE_INTEGER - this.currInterval.busyWidth;
                     this.currInterval.length = Number.MAX_SAFE_INTEGER;
-                    this.currInterval.avaliableWidth = Number.MAX_SAFE_INTEGER;
                     this.row.width = Number.MAX_SAFE_INTEGER;
+                    this.row.flags.set(LayoutRowStateFlags.InfinityWidth, true);
                     return this.addTabBox();
                 }
                 else if (tabBox.right < this.rowFormatter.paragraphHorizontalBounds.end) {

package/lib/common/model/paragraph/paragraph-style.js

@@ -61,7 +61,7 @@ export class ParagraphStyle extends StyleBase {
     }
 }
 ParagraphStyle.normalStyleName = "Normal";
-ParagraphStyle.headingStyleName = "heading";
+ParagraphStyle.headingStyleName = "Heading";
 ParagraphStyle.tocStyleName = "toc";
 export class TabProperties {
     constructor() {

package/lib/common/mouse-handler/mouse-handler/mouse-handler-default-state.d.ts

@@ -32,7 +32,7 @@ export declare class MouseHandlerDefaultState extends MouseHandlerStateBase {
     private shouldBeginDragExistingSelection;
     private selectImage;
     private beginDragExistingSelection;
-    selectFloatingObject(box: LayoutAnchoredObjectBox): void;
+    selectFloatingObject(box: LayoutAnchoredObjectBox): boolean;
 }
 export declare class MouseHandlerHelper {
     static selectParentsTextBox(control: IRichEditControl): void;