devexpress-richedit 24.1.8-build-24316-0102 → 24.2.2-beta

package/lib/common/ui/ruler/controls/base.js

@@ -10,13 +10,13 @@ export class RulerModelState {
     }
 }
 export class RulerBase {
+    get visible() { return this._visible; }
     constructor(modelData, controls) {
         this._visible = true;
         this.modelData = modelData;
         this.controls = controls;
         this.rootElement = DocumentRenderer.renderContainer(this.getRootClassName());
     }
-    get visible() { return this._visible; }
     dispose() {
         DomUtils.hideNode(this.rootElement);
         this.rootElement = null;

package/lib/common/ui/ruler/controls/column.js

@@ -33,12 +33,12 @@ export var ColumnAction;
     ColumnAction[ColumnAction["ColumnWidth"] = 3] = "ColumnWidth";
 })(ColumnAction || (ColumnAction = {}));
 export class RulerColumnModelState {
+    get rightPos() { return this.leftPos + this.width; }
     constructor(leftPos, width, space) {
         this.leftPos = leftPos;
         this.width = width;
         this.space = space;
     }
-    get rightPos() { return this.leftPos + this.width; }
     clone() {
         return new RulerColumnModelState(this.leftPos, this.width, this.space);
     }

package/lib/common/ui/ruler/controls/divisions.js

@@ -13,6 +13,7 @@ export const DIVISION_MINOR_CLASS_NAME = RULER_CLASS_NAME + "Minor" + DIVISION_C
 export const DIVISION_MAJOR_CLASS_NAME = RULER_CLASS_NAME + "Major" + DIVISION_CLASS_NAME;
 export const DIVISION_NUMBER_CLASS_NAME = RULER_CLASS_NAME + "Number" + DIVISION_CLASS_NAME;
 export class RulerDivisionsControl extends RulerBase {
+    getRootClassName() { return DIVISION_CONTAINER_CLASS_NAME; }
     constructor(modelData, controls, divisionInfo, maxPageWidth) {
         super(modelData, controls);
         this.height = 0;
@@ -25,7 +26,6 @@ export class RulerDivisionsControl extends RulerBase {
         createDivisionElements(this.rootElement, unitCount, divisionInfo, this.height);
         this.initialLeft = -(unitCount * divisionInfo.unitSize - RULLER_NUMBER_CORRECTION);
     }
-    getRootClassName() { return DIVISION_CONTAINER_CLASS_NAME; }
     update() {
         this.updateModelState();
         this.updateView();

package/lib/common/ui/ruler/controls/indent/first-line.js

@@ -7,22 +7,22 @@ import { RulerTemplateManager } from '../template-manager';
 import { RulerBaseIndentControl, RulerMinDistanceBetweenIndents } from './base';
 import { SizeUtils } from '../../../../../common/utils/size-utils';
 export class RulerFirstLineIndentDragHandle extends RulerBaseIndentControl {
+    get heightOfProtrudingPart() { return this.modelData.showLeftIndent ? this._heightOfProtrudingPart : 0; }
+    getRootClassName() {
+        return this.modelData.styles.firstLineIndentImage.spriteCssClass + " " +
+            this.modelData.styles.firstLineIndent.className;
+    }
     constructor(modelData, controls) {
         super(modelData, controls);
         const template = RulerTemplateManager.getFirstLineIndentElementTemplate();
         if (template)
             this.rootElement.innerHTML = template;
-        this.rootElement.title = this.modelData.settings.titles.firstLineIndent;
+        this.rootElement.title = this.modelData.titles.firstLineIndent;
         this.controls.ruler.rootElement.appendChild(this.rootElement);
         this.adjustByTop();
         this.leftCorrection = Math.round(SizeUtils.getOffsetWidth(this.rootElement) / 2);
         this._heightOfProtrudingPart = SizeUtils.getOffsetHeight(this.rootElement) - this.controls.divisions.height / 2;
     }
-    get heightOfProtrudingPart() { return this.modelData.settings.showLeftIndent ? this._heightOfProtrudingPart : 0; }
-    getRootClassName() {
-        return this.modelData.settings.styles.firstLineIndentImage.spriteCssClass + " " +
-            this.modelData.settings.styles.firstLineIndent.className;
-    }
     adjustByTop() {
         const mainElementHeight = SizeUtils.getOffsetHeight(this.rootElement);
         const divisionsControlHeight = this.controls.divisions.height;
@@ -36,7 +36,7 @@ export class RulerFirstLineIndentDragHandle extends RulerBaseIndentControl {
         const newViewState = this.controls.paragraphLeftPosition + this.currModelState.modelValue;
         if (newViewState != this.viewState) {
             this.viewState = newViewState;
-            if (this.modelData.settings.showLeftIndent)
+            if (this.modelData.showLeftIndent)
                 this.rootElement.style.left = this.viewState + RULLER_NUMBER_CORRECTION - this.leftCorrection + "px";
             else
                 this.setVisible(false);

package/lib/common/ui/ruler/controls/indent/left.js

@@ -9,10 +9,12 @@ import { RulerBaseIndentControl, RulerMinDistanceBetweenIndents } from './base';
 import { SizeUtils } from '../../../../../common/utils/size-utils';
 const LEFT_INDENT_DRAG_HANDLE_BODY = RICH_EDIT_CLASS_NAME_PREFIX + "leftIndentDragHandleBody";
 export class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
+    get heightOfProtrudingPart() { return this.modelData.showLeftIndent ? this._heightOfProtrudingPart : 0; }
+    getRootClassName() { return this.modelData.styles.leftIndent.className; }
     constructor(modelData, controls) {
         super(modelData, controls);
         this.isActionLeftIndent = false;
-        this.topElement = DocumentRenderer.renderContainer(this.modelData.settings.styles.leftIndentImage.spriteCssClass);
+        this.topElement = DocumentRenderer.renderContainer(this.modelData.styles.leftIndentImage.spriteCssClass);
         this.bodyElement = DocumentRenderer.renderContainer(LEFT_INDENT_DRAG_HANDLE_BODY);
         const topElementTemplate = RulerTemplateManager.getLeftIndentTopElementTemplate();
         if (topElementTemplate)
@@ -30,13 +32,11 @@ export class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
         style.height = SizeUtils.getOffsetHeight(this.topElement) + SizeUtils.getOffsetHeight(this.bodyElement) + "px";
         style.width = mainElementWidth + "px";
         style.marginTop = this.controls.divisions.height / 2 + "px";
-        this.bodyElement.title = this.modelData.settings.titles.leftIndent;
-        this.topElement.title = this.modelData.settings.titles.hangingIndent;
+        this.bodyElement.title = this.modelData.titles.leftIndent;
+        this.topElement.title = this.modelData.titles.hangingIndent;
         this.leftCorrection = Math.round(SizeUtils.getOffsetWidth(this.rootElement) / 2);
         this._heightOfProtrudingPart = SizeUtils.getOffsetHeight(this.rootElement) - this.controls.divisions.height / 2;
     }
-    get heightOfProtrudingPart() { return this.modelData.settings.showLeftIndent ? this._heightOfProtrudingPart : 0; }
-    getRootClassName() { return this.modelData.settings.styles.leftIndent.className; }
     adjustByTop() {
         const mainElementHeight = SizeUtils.getOffsetHeight(this.rootElement);
         const divisionsControlHeight = this.controls.divisions.height;
@@ -50,7 +50,7 @@ export class RulerLeftIndentDragHandle extends RulerBaseIndentControl {
         const newViewState = this.controls.paragraphLeftPosition + this.currModelState.modelValue;
         if (newViewState != this.viewState) {
             this.viewState = newViewState;
-            if (this.modelData.settings.showLeftIndent)
+            if (this.modelData.showLeftIndent)
                 this.rootElement.style.left = this.viewState + RULLER_NUMBER_CORRECTION - this.leftCorrection + "px";
             else
                 this.setVisible(false);

package/lib/common/ui/ruler/controls/indent/right.js

@@ -7,21 +7,21 @@ import { SnapTo } from '../vertical-line';
 import { RulerBaseIndentControl, RulerMinDistanceBetweenIndents } from './base';
 const RulerMinDistanceBetweenIndentsOnView = 5;
 export class RulerRightIndentDragHandle extends RulerBaseIndentControl {
+    get viewStateRelativeLeft() { return this.controls.ruler.pageWidth - this.viewState; }
+    getRootClassName() {
+        return this.modelData.styles.rightIndentImage.spriteCssClass + " " +
+            this.modelData.styles.rightIndent.className;
+    }
     constructor(modelData, controls) {
         super(modelData, controls);
         const template = RulerTemplateManager.getRightIndentElementTemplate();
         if (template)
             this.rootElement.innerHTML = template;
-        this.rootElement.title = this.modelData.settings.titles.rightIndent;
+        this.rootElement.title = this.modelData.titles.rightIndent;
         this.controls.ruler.rootElement.appendChild(this.rootElement);
         this.adjustByTop();
         this.leftCorrection = Math.round(this.rootElement.offsetWidth / 2);
     }
-    get viewStateRelativeLeft() { return this.controls.ruler.pageWidth - this.viewState; }
-    getRootClassName() {
-        return this.modelData.settings.styles.rightIndentImage.spriteCssClass + " " +
-            this.modelData.settings.styles.rightIndent.className;
-    }
     adjustByTop() {
         const divisionsControlHeight = this.controls.divisions.height;
         this.rootElement.style.marginTop = divisionsControlHeight / 2 + "px";
@@ -35,7 +35,7 @@ export class RulerRightIndentDragHandle extends RulerBaseIndentControl {
         const newViewState = this.correctRelativeLeftIndents(this.controls.ruler.pageWidth - this.controls.paragraphRightPosition + this.currModelState.modelValue);
         if (newViewState != this.viewState) {
             this.viewState = newViewState;
-            if (this.modelData.settings.showRightIndent)
+            if (this.modelData.showRightIndent)
                 this.rootElement.style.right = this.viewState + RULLER_NUMBER_CORRECTION - this.leftCorrection + "px";
             else
                 this.setVisible(false);

package/lib/common/ui/ruler/controls/margin/left.js

@@ -8,6 +8,9 @@ export const RulerMinDistanceBetweenMargins = 50;
 const DIVISION_MARGIN_LEFT_CURSOR_CLASS_NAME = RULER_CLASS_NAME + "MarginLeftHandlePanel";
 const DIVISION_MARGIN_LEFT_CLASS_NAME = RULER_CLASS_NAME + "MarginLeftPanel";
 export class RulerLeftMarginDragHandle extends RulerBaseMarginControl {
+    getRootClassName() { return ''; }
+    ;
+    get commandType() { return RichEditClientCommand.RulerSectionMarginLeft; }
     constructor(modelData, controls, maxPageWidth) {
         super(modelData, controls);
         this.initialLeft = -(Math.ceil(maxPageWidth) - RULLER_NUMBER_CORRECTION);
@@ -15,13 +18,10 @@ export class RulerLeftMarginDragHandle extends RulerBaseMarginControl {
         this.handlePanelElement = DocumentRenderer.renderContainer(DIVISION_MARGIN_LEFT_CURSOR_CLASS_NAME);
         this.marginPanelElement.style.width = maxPageWidth + "px";
         this.handlePanelElement.style.width = maxPageWidth + "px";
-        this.handlePanelElement.title = this.modelData.settings.titles.marginLeft;
+        this.handlePanelElement.title = this.modelData.titles.marginLeft;
         this.controls.ruler.rootElement.appendChild(this.marginPanelElement);
         this.controls.ruler.rootElement.appendChild(this.handlePanelElement);
     }
-    getRootClassName() { return ''; }
-    ;
-    get commandType() { return RichEditClientCommand.RulerSectionMarginLeft; }
     setViewStateToElement(element) {
         element.style.left = this.viewState + this.initialLeft + "px";
     }

package/lib/common/ui/ruler/controls/margin/right.js

@@ -19,7 +19,7 @@ export class RulerRightMarginDragHandle extends RulerBaseMarginControl {
         this.handlePanelElement = DocumentRenderer.renderContainer(DIVISION_MARGIN_RIGHT_CURSOR_CLASS_NAME);
         this.marginPanelElement.style.width = maxPageWidth + "px";
         this.handlePanelElement.style.width = maxPageWidth + "px";
-        this.handlePanelElement.title = this.modelData.settings.titles.marginRight;
+        this.handlePanelElement.title = this.modelData.titles.marginRight;
         this.controls.ruler.rootElement.appendChild(this.marginPanelElement);
         this.controls.ruler.rootElement.appendChild(this.handlePanelElement);
     }

package/lib/common/ui/ruler/controls/owner.js

@@ -1,4 +1,5 @@
 export class RulerMultiControl {
+    get activeSubControl() { return this.subControls[this.handleControlIndex]; }
     constructor(modelData, controls) {
         this.subControls = [];
         this.handleControlIndex = -1;
@@ -6,7 +7,6 @@ export class RulerMultiControl {
         this.modelData = modelData;
         this.controls = controls;
     }
-    get activeSubControl() { return this.subControls[this.handleControlIndex]; }
     dispose() {
         for (let elem of this.subControls)
             elem.dispose();

package/lib/common/ui/ruler/controls/ruler.js

@@ -6,21 +6,21 @@ import { RULLER_NUMBER_CORRECTION } from '../settings';
 import { RulerBase } from './base';
 import { DomUtils } from '@devexpress/utils/lib/utils/dom';
 export class RulerControl extends RulerBase {
+    getRootClassName() { return this.modelData.styles.control.className; }
+    ;
+    get pageWidth() { return this.currPageWidth; }
+    ;
     constructor(modelData, controls) {
         super(modelData, controls);
         this.canHandleScroll = false;
         this.initialMarginLeftElement = 0;
         this.currPageWidth = 0;
         this.prevPageWidth = 0;
-        this.rootElement = DocumentRenderer.renderContainer(this.modelData.settings.styles.control.className);
+        this.rootElement = DocumentRenderer.renderContainer(this.modelData.styles.control.className);
         if (Browser.MSTouchUI)
             DomUtils.addClassName(this.rootElement, TouchUtils.msTouchDraggableClassName);
         this.controls.wrapper.rootElement.appendChild(this.rootElement);
     }
-    getRootClassName() { return this.modelData.settings.styles.control.className; }
-    ;
-    get pageWidth() { return this.currPageWidth; }
-    ;
     init() {
         this.rootElement.style.height = this.controls.divisions.height + "px";
         this.setPaddings();

package/lib/common/ui/ruler/controls/tab/tab-type.js

@@ -8,20 +8,20 @@ import { RulerBase } from '../base';
 import { RulerTabUtils } from './utils';
 const TAB_ALIGN_BOX_PART_HANDLE_CLASS_NAME = RICH_EDIT_CLASS_NAME_PREFIX + "rulertabAlignBox";
 export class RulerTabTypeControl extends RulerBase {
+    getRootClassName() { return TAB_ALIGN_BOX_PART_HANDLE_CLASS_NAME; }
+    ;
     constructor(modelData, controls) {
         super(modelData, controls);
         this.evtHandlersHolder = new DomEventHandlersHolder();
         this.align = TabAlign.Left;
         this.innerSquareElement = DocumentRenderer.renderContainer("");
-        this.alignElement = DocumentRenderer.renderContainer(RulerTabUtils.getSpriteClassName(this.align, this.modelData.settings));
+        this.alignElement = DocumentRenderer.renderContainer(RulerTabUtils.getSpriteClassName(this.align, this.modelData.styles));
         this.applyTemplate();
         this.innerSquareElement.appendChild(this.alignElement);
         this.rootElement.appendChild(this.innerSquareElement);
         this.controls.wrapper.rootElement.appendChild(this.rootElement);
         this.evtHandlersHolder.addListener(this.innerSquareElement, TouchUtils.touchMouseDownEventName, this.onMouseDown.bind(this));
     }
-    getRootClassName() { return TAB_ALIGN_BOX_PART_HANDLE_CLASS_NAME; }
-    ;
     init() {
         this.adjust();
     }
@@ -46,14 +46,14 @@ export class RulerTabTypeControl extends RulerBase {
         const size = this.innerSquareElement.offsetWidth;
         this.alignElement.style.top = (size - this.alignElement.offsetHeight) / 2 + "px";
         this.alignElement.style.left = (size - this.alignElement.offsetWidth) / 2 + "px";
-        this.alignElement.title = this.modelData.settings.titles[RulerTabUtils.getTabTitlePropertyName(this.align)];
+        this.alignElement.title = this.modelData.titles[RulerTabUtils.getTabTitlePropertyName(this.align)];
     }
     onMouseDown(evt) {
         if (!this.modelData.isReadOnly) {
             this.align++;
             if (this.align > TabAlign.Decimal)
                 this.align = TabAlign.Left;
-            this.alignElement.className = RulerTabUtils.getSpriteClassName(this.align, this.modelData.settings);
+            this.alignElement.className = RulerTabUtils.getSpriteClassName(this.align, this.modelData.styles);
             this.applyTemplate();
             this.adjustAlignElement();
             EvtUtils.preventEvent(evt);

package/lib/common/ui/ruler/controls/tab/tab.js

@@ -50,8 +50,8 @@ export class RulerTabsControl extends RulerMultiControl {
         this.deleteTab = false;
     }
     getModelState() {
-        this.modelData.settings.showTabs = this.modelData.commandManager.getCommand(RichEditClientCommand.InsertTabRuler).getState().enabled;
-        if (this.modelData.settings.showTabs) {
+        this.modelData.showTabs = this.modelData.commandManager.getCommand(RichEditClientCommand.InsertTabRuler).getState().enabled;
+        if (this.modelData.showTabs) {
             const paragraph = this.modelData.selection.activeSubDocument.getParagraphByPosition(this.modelData.selection.intervalsInfo.interval.start);
             const tabs = ListUtils.map(paragraph.getTabs().positions, tab => {
                 const newTab = tab.clone();
@@ -195,7 +195,7 @@ class RulerTabControl {
         this.shadow = null;
         this.controls = controls;
         this.modelData = modelData;
-        this.rootElement = DocumentRenderer.renderContainer(modelData.settings.styles.tab.className + " " + RulerTabUtils.getSpriteClassName(this.viewState.align, modelData.settings));
+        this.rootElement = DocumentRenderer.renderContainer(modelData.styles.tab.className + " " + RulerTabUtils.getSpriteClassName(this.viewState.align, modelData.styles));
         this.applyTemplate();
         controls.ruler.rootElement.appendChild(this.rootElement);
         this.rootElement.style.marginTop = (controls.divisions.height - this.rootElement.offsetHeight) + "px";
@@ -209,7 +209,7 @@ class RulerTabControl {
     setVisible(visible) {
         this.rootElement.style.display = visible ? 'block' : 'none';
     }
-    canHandle(source) { return source == this.rootElement && this.modelData.settings.showTabs; }
+    canHandle(source) { return source == this.rootElement && this.modelData.showTabs; }
     showShadow() {
         this.shadow = new RulerShadow(this.rootElement);
     }
@@ -244,10 +244,10 @@ class RulerTabControl {
         }
     }
     changeAlign() {
-        this.rootElement.className = this.modelData.settings.styles.tab.className + " " +
-            RulerTabUtils.getSpriteClassName(this.viewState.align, this.modelData.settings);
+        this.rootElement.className = this.modelData.styles.tab.className + " " +
+            RulerTabUtils.getSpriteClassName(this.viewState.align, this.modelData.styles);
         this.applyTemplate();
-        this.rootElement.title = this.modelData.settings.titles[RulerTabUtils.getTabTitlePropertyName(this.viewState.align)];
+        this.rootElement.title = this.modelData.titles[RulerTabUtils.getTabTitlePropertyName(this.viewState.align)];
         this.setCorrection();
     }
     applyTemplate() {

package/lib/common/ui/ruler/controls/tab/utils.d.ts

@@ -1,7 +1,7 @@
 import { TabAlign } from '../../../../model/paragraph/paragraph';
-import { RulerSettings } from '../../settings';
+import { RulerStyles } from '../../settings';
 export declare class RulerTabUtils {
     static getTabTitlePropertyName(align: TabAlign): string;
-    static getSpriteClassName(tabAlign: TabAlign, settings: RulerSettings): string;
+    static getSpriteClassName(tabAlign: TabAlign, styles: RulerStyles): string;
     static getTemplate(tabAlign: TabAlign): string | undefined;
 }

package/lib/common/ui/ruler/controls/tab/utils.js

@@ -19,16 +19,16 @@ export class RulerTabUtils {
         }
         return "tab" + alignString;
     }
-    static getSpriteClassName(tabAlign, settings) {
+    static getSpriteClassName(tabAlign, styles) {
         switch (tabAlign) {
             case TabAlign.Left:
-                return settings.styles.tabImages.left.spriteCssClass;
+                return styles.tabImages.left.spriteCssClass;
             case TabAlign.Right:
-                return settings.styles.tabImages.right.spriteCssClass;
+                return styles.tabImages.right.spriteCssClass;
             case TabAlign.Center:
-                return settings.styles.tabImages.center.spriteCssClass;
+                return styles.tabImages.center.spriteCssClass;
             case TabAlign.Decimal:
-                return settings.styles.tabImages.decimal.spriteCssClass;
+                return styles.tabImages.decimal.spriteCssClass;
         }
         return "";
     }

package/lib/common/ui/ruler/controls/table.js

@@ -95,7 +95,7 @@ class RulerTableColumnState {
     constructor(modelData, controls) {
         this.controls = controls;
         this.rootElement = DocumentRenderer.renderContainer(TABLE_COLUMN_SEPARATOR_HANDLE_CLASS_NAME);
-        this.separatorElement = DocumentRenderer.renderContainer(modelData.settings.styles.columnSeparatorImage.spriteCssClass);
+        this.separatorElement = DocumentRenderer.renderContainer(modelData.styles.columnSeparatorImage.spriteCssClass);
         const template = RulerTemplateManager.getTableColumnDragElementTemplate();
         if (template)
             this.separatorElement.innerHTML = template;

package/lib/common/ui/ruler/controls/vertical-line.d.ts

@@ -1,4 +1,3 @@
-import { RulerSettings } from '../settings';
 export declare const TABLE_COLUMN_SEPARATOR_RULER_LINE_CLASS_NAME: string;
 export declare enum SnapTo {
     LeftSide = 0,
@@ -16,7 +15,7 @@ export declare class RulerVerticalLineControl {
     private rulerControlWidth;
     private viewElementLeft;
     private rulerControlElement;
-    constructor(canvas: HTMLDivElement, settings: RulerSettings, rulerControlElement: HTMLElement);
+    constructor(canvas: HTMLDivElement, className: string, rulerControlElement: HTMLElement);
     dispose(): void;
     show(type: RulerLineDisplayType): void;
     hide(): void;

package/lib/common/ui/ruler/controls/vertical-line.js

@@ -13,14 +13,14 @@ export var RulerLineDisplayType;
     RulerLineDisplayType[RulerLineDisplayType["TableColumn"] = 1] = "TableColumn";
 })(RulerLineDisplayType || (RulerLineDisplayType = {}));
 export class RulerVerticalLineControl {
-    constructor(canvas, settings, rulerControlElement) {
+    constructor(canvas, className, rulerControlElement) {
         this.borderWidth = 0;
         this.rulerControlLeft = 0;
         this.rulerControlWidth = 0;
         this.viewElementLeft = 0;
         this.canvas = canvas;
         this.rulerControlElement = rulerControlElement;
-        this.rootElement = DocumentRenderer.renderContainer(settings.styles.line.className);
+        this.rootElement = DocumentRenderer.renderContainer(className);
         this.rootElement.style.display = "block";
         this.borderWidth = DomUtils.getHorizontalBordersWidth(this.rootElement);
     }

package/lib/common/ui/ruler/controls/wrapper.js

@@ -1,6 +1,6 @@
 import { RulerBase } from './base';
 export class RulerWrapper extends RulerBase {
-    getRootClassName() { return this.modelData.settings.styles.wrapper.className; }
+    getRootClassName() { return this.modelData.styles.wrapper.className; }
     ;
     constructor(modelData, controls) {
         super(modelData, controls);

package/lib/common/ui/ruler/manager.js

@@ -20,6 +20,24 @@ import { RulerMouseEventsManager } from './events/mouse';
 import { RulerViewElementScrollManager } from './events/scroll';
 import { RulerMouseHandler } from './mouse-handler';
 export class RulerControls {
+    get paragraphLeftPosition() {
+        let pos = this.leftMargin.currModelState.modelValue + this.columns.currModelState.activeColumn.leftPos;
+        if (this.tables.currModelState.columnSeparators.hasItems) {
+            const item = this.tables.currModelState.columnSeparators.currItem;
+            pos += this.tables.currModelState.columnSeparators.cellSpacing + item.leftMargin + item.position;
+        }
+        return pos;
+    }
+    get paragraphRightPosition() {
+        const colSeps = this.tables.currModelState.columnSeparators;
+        if (colSeps.hasItems) {
+            const nextSeparatorItem = colSeps.items[colSeps.index + 1];
+            return this.leftMargin.currModelState.modelValue + this.columns.currModelState.activeColumn.leftPos +
+                (nextSeparatorItem.position - colSeps.cellSpacing - colSeps.currItem.rightMargin);
+        }
+        else
+            return this.leftMargin.currModelState.modelValue + this.columns.currModelState.activeColumn.rightPos;
+    }
     constructor(canvas, modelData) {
         this.mouseEventsManager = new RulerMouseEventsManager();
         this.viewElementScrollManager = new RulerViewElementScrollManager();
@@ -41,29 +59,11 @@ export class RulerControls {
         this.tabs = new RulerTabsControl(modelData, this);
         this.ruler.init();
         this.tabTypeBox.init();
-        this.lineControl = new RulerVerticalLineControl(this.canvas, modelData.settings, this.ruler.rootElement);
+        this.lineControl = new RulerVerticalLineControl(this.canvas, modelData.styles.line.className, this.ruler.rootElement);
         this.mouseHandler = new RulerMouseHandler(modelData, this);
         this.mouseEventsManager.addListener(this.mouseHandler);
         this.viewElementScrollManager.addListener(this.ruler, this.canvas);
     }
-    get paragraphLeftPosition() {
-        let pos = this.leftMargin.currModelState.modelValue + this.columns.currModelState.activeColumn.leftPos;
-        if (this.tables.currModelState.columnSeparators.hasItems) {
-            const item = this.tables.currModelState.columnSeparators.currItem;
-            pos += this.tables.currModelState.columnSeparators.cellSpacing + item.leftMargin + item.position;
-        }
-        return pos;
-    }
-    get paragraphRightPosition() {
-        const colSeps = this.tables.currModelState.columnSeparators;
-        if (colSeps.hasItems) {
-            const nextSeparatorItem = colSeps.items[colSeps.index + 1];
-            return this.leftMargin.currModelState.modelValue + this.columns.currModelState.activeColumn.leftPos +
-                (nextSeparatorItem.position - colSeps.cellSpacing - colSeps.currItem.rightMargin);
-        }
-        else
-            return this.leftMargin.currModelState.modelValue + this.columns.currModelState.activeColumn.rightPos;
-    }
     dispose() {
         this.lineControl.dispose();
         this.wrapper.dispose();

package/lib/common/ui/ruler/model-data.d.ts

@@ -4,10 +4,16 @@ import { CommandManager } from '../../commands/command-manager';
 import { RichEditCore } from '../../rich-edit-core';
 import { InputPosition } from '../../selection/input-position';
 import { Selection } from '../../selection/selection';
-import { RulerSettings } from './settings';
+import { RulerSettings, RulerStyles, RulerTitles, RulerVisibility } from './settings';
 export declare class RulerModelData {
     private core;
-    readonly settings: RulerSettings;
+    private readonly settings;
+    visibility: RulerVisibility;
+    showTabs: boolean;
+    get showLeftIndent(): boolean;
+    get showRightIndent(): boolean;
+    get titles(): RulerTitles;
+    get styles(): RulerStyles;
     get inputPosition(): InputPosition;
     get commandManager(): CommandManager;
     get isClosed(): boolean;

package/lib/common/ui/ruler/model-data.js

@@ -1,10 +1,10 @@
 import { ReadOnlyMode } from '../../interfaces/i-rich-edit-core';
 import { RulerStyleInfo } from './settings';
 export class RulerModelData {
-    constructor(core, settings) {
-        this.core = core;
-        this.settings = this.fixSettings(settings);
-    }
+    get showLeftIndent() { return this.settings.showLeftIndent; }
+    get showRightIndent() { return this.settings.showRightIndent; }
+    get titles() { return this.settings.titles; }
+    get styles() { return this.settings.styles; }
     get inputPosition() { return this.core.inputPosition; }
     ;
     get commandManager() { return this.core.commandManager; }
@@ -13,6 +13,12 @@ export class RulerModelData {
     get isReadOnly() { return this.core.readOnly != ReadOnlyMode.None; }
     get unitType() { return this.core.uiUnitConverter.getUnits(); }
     get selection() { return this.core.selection; }
+    constructor(core, settings) {
+        this.core = core;
+        this.settings = this.fixSettings(settings);
+        this.visibility = this.settings.visibility;
+        this.showTabs = this.settings.showTabs;
+    }
     fixSettings(settings) {
         if (!settings.styles.firstLineIndent)
             settings.styles.firstLineIndent = this.getDefaultStyle('dxreFirstLineIndentDragHandle');

package/lib/common/ui/ruler/ruler.js

@@ -12,6 +12,8 @@ var HorizontalRulerEventType;
     HorizontalRulerEventType[HorizontalRulerEventType["CheckSelectionChange"] = 2] = "CheckSelectionChange";
 })(HorizontalRulerEventType || (HorizontalRulerEventType = {}));
 export class HorizontalRulerControl extends BatchUpdatableObject {
+    get initialized() { return !!this.controls; }
+    ;
     constructor(core, settings, canvas) {
         super();
         this.controls = null;
@@ -23,8 +25,6 @@ export class HorizontalRulerControl extends BatchUpdatableObject {
         this.modelData = new RulerModelData(core, settings);
         this.canvas = canvas;
     }
-    get initialized() { return !!this.controls; }
-    ;
     dispose() {
         if (this.initialized)
             this.controls.dispose();
@@ -175,6 +175,7 @@ export class HorizontalRulerControl extends BatchUpdatableObject {
     }
     setVisible(visible) {
         if (visible != this._innerVisible || visible != this._visible) {
+            this.modelData.visibility = visible ? RulerVisibility.Visible : RulerVisibility.Hidden;
             this._visible = visible;
             this.innerSetVisible(visible);
         }
@@ -201,7 +202,7 @@ export class HorizontalRulerControl extends BatchUpdatableObject {
             return;
         if (!this.initialized && this.canvas.offsetWidth)
             this.controls = new RulerControls(this.canvas, this.modelData);
-        this.setVisible(this.modelData.settings.visibility != RulerVisibility.Hidden);
+        this.setVisible(this.modelData.visibility != RulerVisibility.Hidden);
         this.onViewTypeChanged();
     }
 }

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

@@ -1,4 +1,5 @@
 import { Point } from '@devexpress/utils/lib/geometry/point';
+import { IModelManager } from '../model-manager';
 export declare function rotatePoint(point: Point, angle: number, center: Point): Point;
 export declare class SearchTreeItemResult<T> {
     readonly parentList: T[];
@@ -11,8 +12,14 @@ export declare function searchTreeItem<T extends {
 }>(items: T[], comparer: (item: T) => boolean): SearchTreeItemResult<T> | null;
 export declare function convertToFunction(func: any): any | null;
 export declare function splitByLines(text: string): string[];
+export interface IUrlValidationOptions {
+    allowedSchemes?: string[];
+}
+export declare function createUrlValidationOptions(modelManager: IModelManager): IUrlValidationOptions;
 export declare class UrlUtils {
     static EmptyPage: string;
-    static isValid(url: string): boolean;
+    static isValid(url: string, options?: IUrlValidationOptions): boolean;
+    static isRelative(url: string): boolean;
+    static convertToAbsolute(url: string): URL | null;
     static splitUrlByAnchor(url: string): [url: string, anchor: string];
 }

package/lib/common/utils/utils.js

@@ -56,20 +56,51 @@ export function convertToFunction(func) {
 export function splitByLines(text) {
     return text ? text.split(/\r\n|\r|\n/) : [''];
 }
+export function createUrlValidationOptions(modelManager) {
+    const fieldSettings = modelManager.richOptions.fields;
+    return {
+        allowedSchemes: fieldSettings.allowedHyperlinkUriSchemes
+    };
+}
+const defaultAllowedProtocols = [
+    'http',
+    'https',
+    'mailto',
+    'tel'
+];
 const disallowedProtocols = [
-    'data',
-    'javascript'
+    'javascript',
+    'data'
 ];
 export class UrlUtils {
-    static isValid(url) {
+    static isValid(url, options) {
+        var _a;
+        const resultUrl = this.convertToAbsolute(url);
+        if (!resultUrl)
+            return false;
+        const protocol = resultUrl.protocol.slice(0, -1);
+        if (disallowedProtocols.includes(protocol))
+            return false;
+        const allowedProtocols = (_a = options === null || options === void 0 ? void 0 : options.allowedSchemes) !== null && _a !== void 0 ? _a : defaultAllowedProtocols;
+        return allowedProtocols.includes(protocol);
+    }
+    static isRelative(url) {
+        try {
+            new URL(url);
+            return false;
+        }
+        catch (_a) {
+            return true;
+        }
+    }
+    static convertToAbsolute(url) {
         const currentLocation = window.location.href;
         try {
-            const resultUrl = new URL(url, currentLocation);
-            const protocol = resultUrl.protocol.slice(0, -1);
-            return !disallowedProtocols.includes(protocol);
+            return new URL(url, currentLocation);
+        }
+        catch (_a) {
+            return null;
         }
-        catch (_a) { }
-        return false;
     }
     static splitUrlByAnchor(url) {
         const hashTagPosition = url.indexOf("#");