devexpress-richedit 24.1.12-build-25093-0104 → 24.1.12-build-25107-0103

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/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/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-formatter/row/tab-info.js

@@ -85,7 +85,7 @@ 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.row.width = Number.MAX_SAFE_INTEGER;

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;

package/lib/common/mouse-handler/mouse-handler/mouse-handler-default-state.js

@@ -168,40 +168,31 @@ export class MouseHandlerDefaultState extends MouseHandlerStateBase {
         this.processMouseDownOnMaxDetailsLevel(evt, htr, activeSubDocument);
     }
     processMouseDownOnMaxDetailsLevel(evt, htr, activeSubDocument) {
+        const selection = this.handler.control.selection;
         if (htr.floatingObject) {
-            if (htr.floatingObject.belongsToSubDocId != this.handler.control.selection.activeSubDocument.id)
-                MouseHandlerHelper.changeActiveSubDocumentToParent(this.handler.control);
             const box = htr.floatingObject;
-            this.selectFloatingObject(box);
-            const specRunInfo = this.handler.control.selection.specialRunInfo;
-            if (specRunInfo.isSelectedAnchorObject) {
-                if (box.getType() == LayoutBoxType.AnchorTextBox &&
-                    HitTestManager.isPointInTexBoxArea(evt.layoutPoint, box, activeSubDocument.isTextBox() ? 0 : box.rotationInRadians)) {
+            const rotationAngle = activeSubDocument.isTextBox() ? 0 : box.rotationInRadians;
+            if (box.getType() == LayoutBoxType.AnchorTextBox && HitTestManager.isPointInTexBoxArea(evt.layoutPoint, box, rotationAngle)) {
+                const textbox = box;
+                if (textbox.internalSubDocId !== selection.activeSubDocument.id && this.selectFloatingObject(box)) {
                     this.handler.control.commandManager.getCommand(RichEditClientCommand.ChangeActiveSubDocumentToTextBox).execute(this.handler.control.commandManager.isPublicApiCall);
                     this.handler.boxVisualizerManager.resizeBoxVisualizer.show(htr.pageIndex, null, null, null, box);
-                    htr = this.handler.control.hitTestManager.calculate(evt.layoutPoint, DocumentLayoutDetailsLevel.Max, this.handler.control.selection.activeSubDocument);
-                }
-                else {
-                    if (this.resizeRotationChecker(() => {
-                        const dragFloatingObjectState = new MouseHandlerDragFloatingObjectState(this.handler, evt);
-                        this.handler.switchState(new MouseHandlerBeginDragHelperState(evt.layoutPoint, this.handler, dragFloatingObjectState));
-                    }))
-                        return;
-                    else {
-                        if (specRunInfo.isPictureSelected()) {
-                            this.handler.control.selection.setSelection(new SetSelectionParams()
-                                .setInterval(new FixedInterval(specRunInfo.getPicturePosition(), 1)));
-                            return;
-                        }
-                    }
+                    htr = this.handler.control.hitTestManager.calculate(evt.layoutPoint, DocumentLayoutDetailsLevel.Max, selection.activeSubDocument);
                 }
             }
+            else {
+                if (this.selectFloatingObject(box) && this.resizeRotationChecker(() => {
+                    const dragFloatingObjectState = new MouseHandlerDragFloatingObjectState(this.handler, evt);
+                    this.handler.switchState(new MouseHandlerBeginDragHelperState(evt.layoutPoint, this.handler, dragFloatingObjectState));
+                }))
+                    return;
+            }
         }
         if (Browser.TouchUI && htr.subDocument.isMain() && htr.exactlyDetailLevel < DocumentLayoutDetailsLevel.PageArea) {
             if (htr.deviations[DocumentLayoutDetailsLevel.PageArea] & HitTestDeviation.Top || htr.deviations[DocumentLayoutDetailsLevel.PageArea] & HitTestDeviation.Bottom)
                 this.handler.control.viewManager.canvasScrollManager.waitForDblClick();
         }
-        if (evt.button === MouseButton.Right && this.handler.control.selection.lastSelectedInterval.contains(htr.getPosition()))
+        if (evt.button === MouseButton.Right && selection.lastSelectedInterval.contains(htr.getPosition()))
             return;
         if (this.shouldSelectEntireTableColumn(htr))
             this.beginSelectEntireTableColumn(htr, evt);
@@ -216,7 +207,7 @@ export class MouseHandlerDefaultState extends MouseHandlerStateBase {
                 this.beginSelectEntireTableCell(htr, evt);
         }
         else if (this.isLeftArea(htr, evt)) {
-            if (evt.modifiers & ModifierKey.Ctrl && this.handler.control.selection.isCollapsed())
+            if (evt.modifiers & ModifierKey.Ctrl && selection.isCollapsed())
                 this.handler.control.commandManager.getCommand(RichEditClientCommand.SelectAll).execute(this.handler.control.commandManager.isPublicApiCall, htr.getPosition());
             else if (this.isLeftAreaOffset(htr, evt))
                 this.beginLineSelection(htr, evt);
@@ -424,8 +415,14 @@ export class MouseHandlerDefaultState extends MouseHandlerStateBase {
         this.handler.switchState(state);
     }
     selectFloatingObject(box) {
+        const selection = this.handler.control.selection;
+        if (box.belongsToSubDocId !== selection.activeSubDocument.id)
+            MouseHandlerHelper.changeActiveSubDocumentToParent(this.handler.control);
+        if (box.belongsToSubDocId !== selection.activeSubDocument.id)
+            return false;
         const pos = this.handler.control.layout.anchorObjectsPositionInfo.getPosition(box.objectId);
-        this.handler.control.selection.setSelection(new SetSelectionParams().setInterval(new FixedInterval(pos, 1)));
+        selection.setSelection(new SetSelectionParams().setInterval(new FixedInterval(pos, 1)));
+        return selection.specialRunInfo.isSelectedAnchorObject;
     }
 }
 export class MouseHandlerHelper {

package/lib/common/rich-edit-core.js

@@ -93,7 +93,7 @@ export class RichEditCore {
                 this.invalidateLayoutAfterFontsLoaded();
             });
     }
-    get isReadOnlyPersistent() { return this.readOnly == ReadOnlyMode.Persistent; }
+    get isReadOnlyPersistent() { return this.readOnly === ReadOnlyMode.Persistent; }
     get model() { return this.modelManager.model; }
     get isDisposed() {
         return this._isDisposed;
@@ -257,8 +257,8 @@ export class RichEditCore {
             this.readOnly = ReadOnlyMode.Persistent;
         else if (!readOnly && this.readOnly === ReadOnlyMode.Persistent) {
             this.readOnly = ReadOnlyMode.None;
-            this.inputController.inputEditor.initializeIfNotReadOnly();
         }
+        this.inputController.inputEditor.initializeEditableStateCore();
     }
     setWorkSession(sessionGuid, documentInfo) {
         this.sessionGuid = sessionGuid;

package/lib/common/utils/size-utils.d.ts

@@ -1,11 +1,17 @@
+declare type ScrollbarsWidth = {
+    horizontal: number;
+    vertical: number;
+};
 export declare class SizeUtils {
-    static getWidthInfo(element: Element): DimensionInfo;
-    static getClientWidth(element: Element): number;
-    static getHeightInfo(element: Element): DimensionInfo;
-    static getClientHeight(element: Element): number;
-    static getOffsetSize(element: Element): DOMRect;
-    static getOffsetWidth(element: Element): number;
-    static getOffsetHeight(element: Element): number;
+    private static _scrollbarsWidth;
+    static getScrollbarsWidth(): ScrollbarsWidth;
+    static getWidthInfo(element: HTMLElement): DimensionInfo;
+    static getClientWidth(element: HTMLElement): number;
+    static getHeightInfo(element: HTMLElement): DimensionInfo;
+    static getClientHeight(element: HTMLElement): number;
+    static getOffsetSize(element: HTMLElement): DOMRect;
+    static getOffsetWidth(element: HTMLElement): number;
+    static getOffsetHeight(element: HTMLElement): number;
 }
 export declare class DimensionInfo {
     readonly offsetSize: number;
@@ -13,3 +19,4 @@ export declare class DimensionInfo {
     readonly scrollbarSize: number;
     constructor(offsetSize: number, clientSize: number, scrollbarSize: number);
 }
+export {};

package/lib/common/utils/size-utils.js

@@ -1,28 +1,53 @@
+import { isDefined } from "@devexpress/utils/lib/utils/common";
 export class SizeUtils {
+    static getScrollbarsWidth() {
+        if (!isDefined(this._scrollbarsWidth)) {
+            const scrollDiv = document.createElement('div');
+            scrollDiv.style.visibility = 'hidden';
+            scrollDiv.style.overflow = 'scroll';
+            scrollDiv.style.position = 'absolute';
+            scrollDiv.style.top = '-9999px';
+            scrollDiv.style.width = '100px';
+            scrollDiv.style.height = '100px';
+            document.body.appendChild(scrollDiv);
+            const innerDiv = document.createElement('div');
+            innerDiv.style.width = '100%';
+            innerDiv.style.height = '100%';
+            scrollDiv.appendChild(innerDiv);
+            this._scrollbarsWidth = {
+                horizontal: SizeUtils.getOffsetHeight(scrollDiv) - SizeUtils.getOffsetHeight(innerDiv),
+                vertical: SizeUtils.getOffsetWidth(scrollDiv) - SizeUtils.getOffsetWidth(innerDiv)
+            };
+            scrollDiv.remove();
+        }
+        return this._scrollbarsWidth;
+    }
     static getWidthInfo(element) {
-        const offsetSize = SizeUtils.getOffsetWidth(element);
-        const style = getComputedStyle(element);
-        const inset = parseCssValue(style.borderLeftWidth)
-            + parseCssValue(style.borderRightWidth)
-            + parseCssValue(style.paddingLeft)
-            + parseCssValue(style.paddingRight);
-        const sizeWithScrollBar = offsetSize - inset;
-        const scrollBarSize = Math.round(sizeWithScrollBar) - element.clientWidth;
-        return new DimensionInfo(offsetSize, sizeWithScrollBar - scrollBarSize, scrollBarSize);
+        const computedStyle = getComputedStyle(element);
+        const offsetWidth = this.getOffsetWidth(element);
+        const offsetWidthWithoutBorder = offsetWidth
+            - parseCssValue(computedStyle.borderLeftWidth)
+            - parseCssValue(computedStyle.borderRightWidth);
+        let scrollbarWidth = 0;
+        if (Math.round(offsetWidthWithoutBorder) > element.clientWidth)
+            scrollbarWidth = SizeUtils.getScrollbarsWidth().vertical;
+        const clientWidth = offsetWidthWithoutBorder - scrollbarWidth;
+        return new DimensionInfo(offsetWidth, clientWidth, scrollbarWidth);
     }
     static getClientWidth(element) {
         return this.getWidthInfo(element).clientSize;
     }
     static getHeightInfo(element) {
-        const offsetSize = SizeUtils.getOffsetHeight(element);
-        const style = getComputedStyle(element);
-        const inset = parseCssValue(style.borderTopWidth)
-            + parseCssValue(style.borderBottomWidth)
-            + parseCssValue(style.paddingTop)
-            + parseCssValue(style.paddingBottom);
-        const sizeWithScrollBar = offsetSize - inset;
-        const scrollBarSize = Math.round(sizeWithScrollBar) - element.clientHeight;
-        return new DimensionInfo(offsetSize, sizeWithScrollBar - scrollBarSize, scrollBarSize);
+        const computedStyle = getComputedStyle(element);
+        const offsetHeight = this.getOffsetHeight(element);
+        const offsetHeightWithoutBorder = offsetHeight
+            - parseCssValue(computedStyle.borderTopWidth)
+            - parseCssValue(computedStyle.borderBottomWidth);
+        let scrollbarWidth = 0;
+        if (Math.round(offsetHeightWithoutBorder) > element.clientHeight)
+            scrollbarWidth = SizeUtils.getScrollbarsWidth().horizontal;
+        const clientHeight = offsetHeightWithoutBorder - scrollbarWidth;
+        return new DimensionInfo(offsetHeight, clientHeight, scrollbarWidth);
     }
     static getClientHeight(element) {
         return this.getHeightInfo(element).clientSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devexpress-richedit",
-  "version": "24.1.12-build-25093-0104",
+  "version": "24.1.12-build-25107-0103",
   "homepage": "https://www.devexpress.com/",
   "bugs": "https://www.devexpress.com/support/",
   "author": "Developer Express Inc.",
@@ -14,8 +14,8 @@
     "build-nspell": "webpack --mode production --config=bin/nspell.webpack.config.js"
   },
   "peerDependencies": {
-    "devextreme": "24.1.12-build-25091-1936",
-    "devextreme-dist": "24.1.12-build-25091-1936"
+    "devextreme": "24.1.12-build-25105-1937",
+    "devextreme-dist": "24.1.12-build-25105-1937"
   },
   "dependencies": {
     "jszip": "~3.10.1",