devexpress-richedit 24.2.6 → 25.1.1-alpha

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/layout/change-zoom-level-command.d.ts

@@ -0,0 +1,10 @@
+import { CommandBase, CommandSimpleOptions } from '../command-base';
+import { SimpleCommandState } from '../command-states';
+export declare class ChangeZoomLevelCommand extends CommandBase<SimpleCommandState> {
+    getState(): SimpleCommandState;
+    executeCore(_state: SimpleCommandState, options: CommandSimpleOptions<number>): boolean;
+    isEnabledInReadOnlyMode(): boolean;
+    isEnabled(): boolean;
+    DEPRECATEDConvertOptionsParameter(parameter: any): number;
+    private isZoomLevelValueCorrect;
+}

package/lib/common/commands/layout/change-zoom-level-command.js

@@ -0,0 +1,30 @@
+import { isNumber } from '@devexpress/utils/lib/utils/common';
+import { CommandBase } from '../command-base';
+import { SimpleCommandState } from '../command-states';
+import { RichUtils } from '../../model/rich-utils';
+export class ChangeZoomLevelCommand extends CommandBase {
+    getState() {
+        const state = new SimpleCommandState(this.isEnabled(), this.control.viewManager.zoomLevel);
+        state.visible = this.control.viewManager.allowZoom;
+        return state;
+    }
+    executeCore(_state, options) {
+        if (options.param == this.control.viewManager.zoomLevel)
+            return false;
+        this.control.viewManager.zoomLevel = options.param;
+        return true;
+    }
+    isEnabledInReadOnlyMode() {
+        return true;
+    }
+    isEnabled() {
+        return this.control.viewManager.allowZoom;
+    }
+    DEPRECATEDConvertOptionsParameter(parameter) {
+        const res = typeof parameter == "string" ? parseFloat(parameter) : parameter;
+        return this.isZoomLevelValueCorrect(res) ? res : this.control.viewManager.zoomLevel;
+    }
+    isZoomLevelValueCorrect(size) {
+        return isNumber(size) && !isNaN(size) && size >= RichUtils.minZoomLevel && size <= RichUtils.maxZoomLevel;
+    }
+}

package/lib/common/commands/layout/toggle-allow-zoom-command.d.ts

@@ -0,0 +1,7 @@
+import { CommandBase, CommandSimpleOptions } from '../command-base';
+import { SimpleCommandState } from '../command-states';
+export declare class ToggleAllowZoomCommand extends CommandBase<SimpleCommandState> {
+    getState(): SimpleCommandState;
+    executeCore(_state: SimpleCommandState, options: CommandSimpleOptions<boolean>): boolean;
+    isEnabledInReadOnlyMode(): boolean;
+}

package/lib/common/commands/layout/toggle-allow-zoom-command.js

@@ -0,0 +1,17 @@
+import { CommandBase } from '../command-base';
+import { SimpleCommandState } from '../command-states';
+export class ToggleAllowZoomCommand extends CommandBase {
+    getState() {
+        return new SimpleCommandState(this.isEnabled(), this.control.viewManager.allowZoom);
+    }
+    executeCore(_state, options) {
+        const allowZoom = this.control.viewManager.allowZoom;
+        if (options.param === allowZoom)
+            return false;
+        this.control.viewManager.allowZoom = !allowZoom;
+        return true;
+    }
+    isEnabledInReadOnlyMode() {
+        return true;
+    }
+}

package/lib/common/commands/ruler/ruler-table-column-separators-command.d.ts

@@ -1,6 +1,8 @@
 import { CommandBase, CommandOptions, ICommandOptions } from '../command-base';
 import { SimpleCommandState } from '../command-states';
+import { IZoomLevelHolder } from '../../interfaces/i-zoom-level-holder';
 export declare class TableColumnSeparatorStruct {
+    zoomLevelHolder: IZoomLevelHolder;
     index: number;
     tableIndex: number;
     cellSpacing: number;
@@ -9,14 +11,19 @@ export declare class TableColumnSeparatorStruct {
     items: TableColumnSeparatorItem[];
     get currItem(): TableColumnSeparatorItem;
     get hasItems(): boolean;
+    constructor(zoomLevelHolder: IZoomLevelHolder);
     createItem(position: number, marginLeft: number, marginRight: number): void;
     clone(): TableColumnSeparatorStruct;
 }
 export declare class TableColumnSeparatorItem {
-    position: number;
+    zoomLevelHolder: IZoomLevelHolder;
+    private zoomablePosition;
+    get position(): number;
+    get originalPosition(): number;
+    set position(value: number);
     leftMargin: number;
     rightMargin: number;
-    constructor(position: number, leftMargin: number, rightMargin: number);
+    constructor(position: number, leftMargin: number, rightMargin: number, zoomLevelHolder: IZoomLevelHolder);
     clone(): TableColumnSeparatorItem;
 }
 export declare class RulerTableColumnSeparatorsCommand extends CommandBase<SimpleCommandState> {

package/lib/common/commands/ruler/ruler-table-column-separators-command.js

@@ -8,8 +8,16 @@ import { ListUtils } from '@devexpress/utils/lib/utils/list';
 import { SearchUtils } from '@devexpress/utils/lib/utils/search';
 import { CommandBase } from '../command-base';
 import { SimpleCommandState } from '../command-states';
+import { RulerValue } from '../../ui/ruler/controls/zoomable-value';
 export class TableColumnSeparatorStruct {
-    constructor() {
+    get currItem() {
+        return this.items[this.index];
+    }
+    get hasItems() {
+        return this.items.length > 0;
+    }
+    constructor(zoomLevelHolder) {
+        this.zoomLevelHolder = zoomLevelHolder;
         this.index = 0;
         this.tableIndex = 0;
         this.cellSpacing = 0;
@@ -17,17 +25,11 @@ export class TableColumnSeparatorStruct {
         this.maxValue = -1;
         this.items = [];
     }
-    get currItem() {
-        return this.items[this.index];
-    }
-    get hasItems() {
-        return this.items.length > 0;
-    }
     createItem(position, marginLeft, marginRight) {
-        this.items.push(new TableColumnSeparatorItem(position, marginLeft, marginRight));
+        this.items.push(new TableColumnSeparatorItem(position, marginLeft, marginRight, this.zoomLevelHolder));
     }
     clone() {
-        const result = new TableColumnSeparatorStruct();
+        const result = new TableColumnSeparatorStruct(this.zoomLevelHolder);
         result.index = this.index;
         result.tableIndex = this.tableIndex;
         result.minValue = this.minValue;
@@ -37,13 +39,20 @@ export class TableColumnSeparatorStruct {
     }
 }
 export class TableColumnSeparatorItem {
-    constructor(position, leftMargin, rightMargin) {
-        this.position = position;
+    get position() { return this.zoomablePosition.value; }
+    ;
+    get originalPosition() { return this.zoomablePosition.originalValue; }
+    ;
+    set position(value) { this.zoomablePosition.value = value; }
+    ;
+    constructor(position, leftMargin, rightMargin, zoomLevelHolder) {
+        this.zoomLevelHolder = zoomLevelHolder;
+        this.zoomablePosition = new RulerValue(position, this.zoomLevelHolder);
         this.leftMargin = leftMargin;
         this.rightMargin = rightMargin;
     }
     clone() {
-        return new TableColumnSeparatorItem(this.position, this.leftMargin, this.rightMargin);
+        return new TableColumnSeparatorItem(this.originalPosition, this.leftMargin, this.rightMargin, this.zoomLevelHolder);
     }
 }
 export class RulerTableColumnSeparatorsCommand extends CommandBase {
@@ -83,7 +92,7 @@ export class RulerTableColumnSeparatorsCommand extends CommandBase {
             }
             return sellSpacing;
         };
-        let struct = new TableColumnSeparatorStruct();
+        let struct = new TableColumnSeparatorStruct(this.control.viewManager);
         if (this.selection.tableInfo.extendedData.numRows) {
             let layoutPosition = (subDocument.isMain()
                 ? new LayoutPositionMainSubDocumentCreator(this.control.layout, subDocument, position, DocumentLayoutDetailsLevel.Character)
@@ -126,8 +135,8 @@ export class RulerTableColumnSeparatorsCommand extends CommandBase {
                         struct.createItem(lastLayoutCell.right, 0, 0);
                     }
                     struct.tableIndex = currLogicGrid.table.index;
-                    struct.items = struct.items.sort((a, b) => a.position - b.position);
-                    struct.index = SearchUtils.normedInterpolationIndexOf(struct.items, (item) => item.position, layoutCell.x);
+                    struct.items = struct.items.sort((a, b) => a.originalPosition - b.originalPosition);
+                    struct.index = SearchUtils.normedInterpolationIndexOf(struct.items, (item) => item.originalPosition, layoutCell.x);
                     if (currLayoutGrid.parentCell) {
                         struct.minValue = currLayoutGrid.parentCell.x;
                         struct.maxValue = currLayoutGrid.parentCell.right;

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/interfaces/i-zoom-level-holder.d.ts

@@ -0,0 +1,3 @@
+export interface IZoomLevelHolder {
+    zoomLevel: number;
+}

package/lib/common/interfaces/i-zoom-level-holder.js

@@ -0,0 +1 @@
+export {};

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 {
     get hasEffectToPageHeight() { return this.boxes.length != 1 || !this.boxes[0].isSectionBreakBox; }
@@ -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/formatter/base-formatter.js

@@ -233,7 +233,8 @@ export class BaseFormatter {
             const minPageContentHeight = bottomPosition + margins.bottom;
             const minVisibleAreaHeight = minPageContentHeight +
                 pageInfo.topMargin + pageInfo.topPageBorderWidth + pageInfo.bottomPageBorderWidth + pageInfo.bottomMargin;
-            const diff = Math.floor(Math.max(0, this.manager.controlHeightProvider.getVisibleAreaHeight(false) - minVisibleAreaHeight));
+            const zoomLevel = this.manager.innerClientProperties.viewsSettings.zoomLevel;
+            const diff = Math.floor(Math.max(0, this.manager.controlHeightProvider.getVisibleAreaHeight(false) / zoomLevel - minVisibleAreaHeight));
             const finalPageHeight = minPageContentHeight + diff;
             const columnHeight = finalPageHeight - margins.vertical;
             this.layoutPosition.column.height = columnHeight;

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';
@@ -85,9 +86,10 @@ export class RowTabInfo {
         if (tabXPosRelativePage > lastInterval.end) {
             if (lastInterval.end < this.rowFormatter.paragraphHorizontalBounds.end) {
                 if (this.rowFormatter.manager.model.compatibilitySettings.compatibilityMode < CompatibilityMode.Word2013) {
+                    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/json/enums/json-control-enums.d.ts

@@ -65,5 +65,6 @@ export declare enum JSONControlOptionsProperty {
     PageBreakInsertMode = 31,
     AcceptsTab = 32,
     Download = 33,
-    RaiseClientEventsOnModificationsViaAPI = 34
+    RaiseClientEventsOnModificationsViaAPI = 34,
+    AllowZoom = 35
 }

package/lib/common/model/json/enums/json-control-enums.js

@@ -68,4 +68,5 @@ export var JSONControlOptionsProperty;
     JSONControlOptionsProperty[JSONControlOptionsProperty["AcceptsTab"] = 32] = "AcceptsTab";
     JSONControlOptionsProperty[JSONControlOptionsProperty["Download"] = 33] = "Download";
     JSONControlOptionsProperty[JSONControlOptionsProperty["RaiseClientEventsOnModificationsViaAPI"] = 34] = "RaiseClientEventsOnModificationsViaAPI";
+    JSONControlOptionsProperty[JSONControlOptionsProperty["AllowZoom"] = 35] = "AllowZoom";
 })(JSONControlOptionsProperty || (JSONControlOptionsProperty = {}));

package/lib/common/model/json/exporters/json-control-options-converter.js

@@ -74,6 +74,8 @@ export class JSONControlOptionsConverter {
             result.acceptsTab = obj[JSONControlOptionsProperty.AcceptsTab];
         if (obj[JSONControlOptionsProperty.Download] !== undefined)
             result.download = obj[JSONControlOptionsProperty.Download];
+        if (obj[JSONControlOptionsProperty.AllowZoom] !== undefined)
+            result.allowZoom = obj[JSONControlOptionsProperty.AllowZoom];
         result.raiseClientEventsOnModificationsViaAPI = !!obj[JSONControlOptionsProperty.RaiseClientEventsOnModificationsViaAPI];
         return result;
     }

package/lib/common/model/json/importers/json-importer.js

@@ -124,6 +124,8 @@ export class JSONImporter {
             controlOptions.acceptsTab = !!json[JSONControlOptionsProperty.AcceptsTab];
         if (json[JSONControlOptionsProperty.Download] !== undefined)
             controlOptions.download = json[JSONControlOptionsProperty.Download];
+        if (json[JSONControlOptionsProperty.AllowZoom] !== undefined)
+            controlOptions.allowZoom = json[JSONControlOptionsProperty.AllowZoom];
         controlOptions.raiseClientEventsOnModificationsViaAPI = !!json[JSONControlOptionsProperty.RaiseClientEventsOnModificationsViaAPI];
     }
 }

package/lib/common/model/options/control.d.ts

@@ -33,6 +33,7 @@ export declare class ControlOptions {
     tables: DocumentCapability;
     tableStyle: DocumentCapability;
     floatingObjects: DocumentCapability;
+    allowZoom: DocumentCapability;
     acceptsTab: boolean;
     raiseClientEventsOnModificationsViaAPI: boolean;
     static isEnabled(capability: DocumentCapability): boolean;

package/lib/common/model/options/control.js

@@ -35,6 +35,7 @@ export class ControlOptions {
         this.tables = DocumentCapability.Default;
         this.tableStyle = DocumentCapability.Default;
         this.floatingObjects = DocumentCapability.Default;
+        this.allowZoom = DocumentCapability.Default;
         this.acceptsTab = true;
         this.raiseClientEventsOnModificationsViaAPI = true;
     }

package/lib/common/model/paragraph/paragraph-style.d.ts

@@ -42,13 +42,18 @@ export declare class TabProperties implements IEquatable<TabProperties>, IClonea
     setTabs(tabProp: TabProperties): void;
     merge(tabProperties: TabProperties): void;
 }
-export declare class TabInfo implements IEquatable<TabInfo>, ICloneable<TabInfo> {
+export declare abstract class TabInfoBase<T extends TabInfoBase<T>> implements IEquatable<T>, ICloneable<T> {
     alignment: TabAlign;
     leader: TabLeaderType;
-    position: number;
-    isDefault: boolean;
     deleted: boolean;
+    isDefault: boolean;
+    constructor(alignment: TabAlign, leader: TabLeaderType, deleted: boolean, isDefault: boolean);
+    equals(obj: T): boolean;
+    abstract clone(): T;
+}
+export declare class TabInfo extends TabInfoBase<TabInfo> {
+    position: number;
     constructor(position: number, alignment: TabAlign, leader: TabLeaderType, deleted: boolean, isDefault: boolean);
-    clone(): TabInfo;
     equals(obj: TabInfo): boolean;
+    clone(): TabInfo;
 }

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() {
@@ -106,24 +106,31 @@ export class TabProperties {
         this.sort();
     }
 }
-export class TabInfo {
-    constructor(position, alignment, leader, deleted, isDefault) {
-        this.position = position;
+export class TabInfoBase {
+    constructor(alignment, leader, deleted, isDefault) {
         this.alignment = alignment;
         this.leader = leader;
-        this.isDefault = isDefault;
         this.deleted = deleted;
-    }
-    clone() {
-        return new TabInfo(this.position, this.alignment, this.leader, this.deleted, this.isDefault);
+        this.isDefault = isDefault;
     }
     equals(obj) {
         if (!obj)
             return false;
-        return this.alignment == obj.alignment &&
-            this.leader == obj.leader &&
-            this.position == obj.position &&
-            this.deleted == obj.deleted &&
-            this.isDefault == obj.isDefault;
+        return this.alignment === obj.alignment &&
+            this.leader === obj.leader &&
+            this.deleted === obj.deleted &&
+            this.isDefault === obj.isDefault;
+    }
+}
+export class TabInfo extends TabInfoBase {
+    constructor(position, alignment, leader, deleted, isDefault) {
+        super(alignment, leader, deleted, isDefault);
+        this.position = position;
+    }
+    equals(obj) {
+        return super.equals(obj) && this.position == obj.position;
+    }
+    clone() {
+        return new TabInfo(this.position, this.alignment, this.leader, this.deleted, this.isDefault);
     }
 }

package/lib/common/model/rich-utils.d.ts

@@ -9,6 +9,8 @@ export declare class RichUtils {
     static predefinedFontSizes: number[];
     static minFontSize: number;
     static maxFontSize: number;
+    static minZoomLevel: number;
+    static maxZoomLevel: number;
     static specialCharacters: SpecialCharacters;
     static getSelectedParagraphs(intervals: FixedInterval[], subDocument: SubDocument): {
         paragraphs: Paragraph[];

package/lib/common/model/rich-utils.js

@@ -63,4 +63,6 @@ RichUtils.isAlphanumeric = /^[\u00C0-\u1FFF\u2C00-\uD7FF\w]+$/;
 RichUtils.predefinedFontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
 RichUtils.minFontSize = 1;
 RichUtils.maxFontSize = 600;
+RichUtils.minZoomLevel = 0.5;
+RichUtils.maxZoomLevel = 2.0;
 RichUtils.specialCharacters = new SpecialCharacters();

package/lib/common/mouse-handler/resize-box-helper.js

@@ -64,8 +64,8 @@ export class ResizeBoxHelper {
         }
     }
     getSize(evt) {
-        var absDeltaX = evt.absolutePoint.x - (this.startScrollLeft - evt.scroll.x) - this.startX;
-        var absDeltaY = evt.absolutePoint.y - (this.startScrollTop - evt.scroll.y) - this.startY;
+        var absDeltaX = (evt.absolutePoint.x - (this.startScrollLeft - evt.scroll.x) - this.startX) / this.control.viewManager.zoomLevel;
+        var absDeltaY = (evt.absolutePoint.y - (this.startScrollTop - evt.scroll.y) - this.startY) / this.control.viewManager.zoomLevel;
         var deltaX = absDeltaX * Math.cos(this.rotation) - (-absDeltaY) * Math.sin(this.rotation);
         var deltaY = -(absDeltaX * Math.sin(this.rotation) + (-absDeltaY) * Math.cos(this.rotation));
         var newWidth, newHeight;