@syncfusion/ej2-richtexteditor 23.2.5 → 23.2.6

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.5
+*  version : 23.2.6
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@23.2.4",
+  "_id": "@syncfusion/ej2-richtexteditor@23.2.5",
   "_inBundle": false,
-  "_integrity": "sha512-gQoJXBFkuekaa+gB0U2JpQldeFdkRz6T+N7qkqYNBpSDw0+zF71ScmwYy42dxjGVEJRdZT/HHRwtV5KgLEAhAQ==",
+  "_integrity": "sha512-LDSabG1NiIxMf92vUcISlwF+vT/mAsvve1XDfHd1nOik3PCWxJk1nYnhkWYlDvBLE2nTJGLZ3yTU9cWvQXSgFw==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-23.2.4.tgz",
-  "_shasum": "53e152500eb6b7a1c1215748894fb8de196fec14",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-23.2.5.tgz",
+  "_shasum": "3197d4da512b1f6bebfda2e43c93a35204c6f6a5",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -37,9 +37,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
+    "@syncfusion/ej2-base": "~23.2.6",
     "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-filemanager": "~23.2.4",
+    "@syncfusion/ej2-filemanager": "~23.2.6",
     "@syncfusion/ej2-inputs": "~23.2.4",
     "@syncfusion/ej2-navigations": "~23.2.5",
     "@syncfusion/ej2-popups": "~23.2.4",
@@ -69,6 +69,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.5",
+  "version": "23.2.6",
   "sideEffects": false
 }

package/src/editor-manager/base/interface.d.ts

@@ -124,6 +124,7 @@ export interface IHtmlItemArgs {
     captionClass?: string;
     action?: string;
     formatPainterAction?: IFormatPainterActionValue;
+    ariaLabel?: string;
 }
 /**
 

package/src/editor-manager/plugin/link.js

@@ -58,9 +58,11 @@ var LinkCommand = /** @class */ (function () {
             }
             if (!isNOU(e.item.target)) {
                 anchorEle.setAttribute('target', e.item.target);
+                anchorEle.setAttribute('aria-label', e.item.ariaLabel);
             }
             else {
                 anchorEle.removeAttribute('target');
+                anchorEle.removeAttribute('aria-label');
             }
             if (linkText === e.item.text) {
                 e.item.selection.setSelectionText(this.parent.currentDocument, anchorEle, anchorEle, 1, 1);

package/src/rich-text-editor/actions/html-editor.js

@@ -800,6 +800,9 @@ var HtmlEditor = /** @class */ (function () {
      */
     HtmlEditor.prototype.onPropertyChanged = function (e) {
         // On property code change here
+        if (!isNOU(e) && !isNOU(e.newProp.toolbarSettings) && !isNOU(e.newProp.toolbarSettings.enable)) {
+            this.toolbarUpdate = new HtmlToolbarStatus(this.parent);
+        }
         if (!isNullOrUndefined(e.newProp.formatter)) {
             var editElement = this.contentRenderer.getEditPanel();
             var option = { undoRedoSteps: this.parent.undoRedoSteps,

package/src/rich-text-editor/actions/quick-toolbar.js

@@ -149,7 +149,7 @@ var QuickToolbar = /** @class */ (function () {
 
      */
     QuickToolbar.prototype.showInlineQTBar = function (x, y, target) {
-        if (this.parent.readonly || target.tagName.toLowerCase() === 'img') {
+        if (isNOU(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img') {
             return;
         }
         this.inlineQTBar.showPopup(x, y, target);
@@ -519,6 +519,9 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.off(events.rtlMode, this.setRtl);
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.hidePopup, this.hideQuickToolbars);
+        if (this.deBouncer) {
+            clearTimeout(this.deBouncer);
+        }
     };
     /**
      * Called internally if any of the property value changed.

package/src/rich-text-editor/actions/toolbar.d.ts

@@ -156,7 +156,6 @@ export declare class Toolbar {
     private focusChangeHandler;
     private dropDownBeforeOpenHandler;
     private tbFocusHandler;
-    private tbKeydownHandler;
     private toolbarClickHandler;
     protected wireEvents(): void;
     protected unWireEvents(): void;

package/src/rich-text-editor/actions/toolbar.js

@@ -557,12 +557,6 @@ var Toolbar = /** @class */ (function () {
             }
         }
     };
-    Toolbar.prototype.tbKeydownHandler = function (e) {
-        if (e.target.classList.contains('e-dropdown-btn') ||
-            e.target.getAttribute('id') === this.parent.getID() + '_toolbar_CreateTable') {
-            e.target.setAttribute('tabindex', '0');
-        }
-    };
     Toolbar.prototype.toolbarClickHandler = function (e) {
         var trg = closest(e.originalEvent.target, '.e-hor-nav');
         if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNOU(trg)) {
@@ -592,11 +586,9 @@ var Toolbar = /** @class */ (function () {
             return;
         }
         EventHandler.add(this.tbElement, 'focusin', this.tbFocusHandler, this);
-        EventHandler.add(this.tbElement, 'keydown', this.tbKeydownHandler, this);
     };
     Toolbar.prototype.unWireEvents = function () {
         EventHandler.remove(this.tbElement, 'focusin', this.tbFocusHandler);
-        EventHandler.remove(this.tbElement, 'keydown', this.tbKeydownHandler);
     };
     Toolbar.prototype.addEventListener = function () {
         if (this.parent.isDestroyed) {

package/src/rich-text-editor/base/classes.d.ts

@@ -601,3 +601,8 @@ export declare const CLS_RTE_TB_ENABLED: string;
 
  */
 export declare const CLS_RTE_RES_WEST: string;
+/**
+ * @hidden
+
+ */
+export declare const CLS_RTE_SOURCE_CODE_TXTAREA: string;

package/src/rich-text-editor/base/classes.js

@@ -601,3 +601,8 @@ export var CLS_RTE_TB_ENABLED = 'e-rte-toolbar-enabled';
 
  */
 export var CLS_RTE_RES_WEST = 'e-south-west';
+/**
+ * @hidden
+
+ */
+export var CLS_RTE_SOURCE_CODE_TXTAREA = 'e-rte-srctextarea';

package/src/rich-text-editor/base/interface.d.ts

@@ -258,6 +258,7 @@ export interface NotifyArgs {
     allowedStylePropertiesArray?: string[];
     formatPainterSettings?: FormatPainterSettingsModel;
     emojiPickerSettings?: EmojiSettingsModel;
+    ariaLabel?: string;
 }
 /**
  * Provides information about the current and previous cssClass property .

package/src/rich-text-editor/base/rich-text-editor.d.ts

@@ -1585,4 +1585,16 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     private editorKeyDown;
     private unWireEvents;
     private unbindEvents;
+    /**
+     *
+     * @param e Focus event
+     * @returns string Returns the current focus either `editArea` or `toolbar` or `textArea` or `sourceCode` or `outside` of the RichTextEditor.
+     * @hidden
+     */
+    private getCurrentFocus;
+    /**
+     * @param {FocusEvent} e - specifies the event.
+     * @hidden
+     */
+    private resetToolbarTabIndex;
 }

package/src/rich-text-editor/base/rich-text-editor.js

@@ -762,10 +762,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
             switch (e.action) {
                 case 'toolbar-focus':
-                    if (this.toolbarSettings.enable) {
-                        // eslint-disable-next-line
-                        var selector = '.e-toolbar-item[title] [tabindex]';
-                        this.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();
+                    if (this.toolbarSettings.enable && this.getToolbarElement()) {
+                        var firstActiveItem = this.getToolbarElement().querySelector('.e-toolbar-item:not(.e-overlay)[title]');
+                        firstActiveItem.firstElementChild.removeAttribute('tabindex');
+                        firstActiveItem.firstElementChild.focus();
                     }
                     break;
                 case 'escape':
@@ -2128,15 +2128,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
             EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
         }
-        if (!isNOU(this.getToolbarElement())) {
-            var toolbarItem = this.getToolbarElement().querySelectorAll('input,select,button,a,[tabindex]');
-            for (var i = 0; i < toolbarItem.length; i++) {
-                if ((!toolbarItem[i].classList.contains('e-rte-dropdown-btn') &&
-                    !toolbarItem[i].classList.contains('e-insert-table-btn')) &&
-                    (!toolbarItem[i].hasAttribute('tabindex') ||
-                        toolbarItem[i].getAttribute('tabindex') !== '-1')) {
-                    toolbarItem[i].setAttribute('tabindex', '-1');
-                }
+        if (!this.readonly) {
+            var currentFocus = this.getCurrentFocus(e);
+            if (currentFocus === 'editArea' || currentFocus === 'textArea' || currentFocus === 'sourceCode') {
+                this.resetToolbarTabIndex();
             }
         }
     };
@@ -2253,6 +2248,9 @@ var RichTextEditor = /** @class */ (function (_super) {
         else {
             this.isRTE = true;
         }
+        if (!this.readonly && this.getCurrentFocus(e) === 'outside') {
+            this.resetToolbarTabIndex();
+        }
     };
     /**
      * invokeChangeEvent method
@@ -2507,6 +2505,44 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         this.unWireScrollElementsEvents();
     };
+    /**
+     *
+     * @param e Focus event
+     * @returns string Returns the current focus either `editArea` or `toolbar` or `textArea` or `sourceCode` or `outside` of the RichTextEditor.
+     * @hidden
+     */
+    RichTextEditor.prototype.getCurrentFocus = function (e) {
+        if (e.target === this.inputElement && document.activeElement === this.inputElement) {
+            return 'editArea';
+        }
+        else if (e.target === this.getToolbarElement() || (!isNOU(e.relatedTarget) && closest(e.relatedTarget, '.e-rte-toolbar') === this.getToolbarElement())) {
+            return 'toolbar';
+        }
+        else if (e.target === this.valueContainer && document.activeElement === this.valueContainer) {
+            return 'textArea';
+        }
+        else if (!isNOU(e.target) && e.target.classList.contains(classes.CLS_RTE_SOURCE_CODE_TXTAREA) && document.activeElement === e.target) {
+            return 'sourceCode';
+        }
+        return 'outside';
+    };
+    /**
+     * @param {FocusEvent} e - specifies the event.
+     * @hidden
+     */
+    RichTextEditor.prototype.resetToolbarTabIndex = function () {
+        if (this.getToolbarElement()) {
+            var toolbarItem = this.getToolbarElement().querySelectorAll('input,select,button,a,[tabindex]');
+            for (var i = 0; i < toolbarItem.length; i++) {
+                if ((!toolbarItem[i].classList.contains('e-rte-dropdown-btn') &&
+                    !toolbarItem[i].classList.contains('e-insert-table-btn')) &&
+                    (!toolbarItem[i].hasAttribute('tabindex') ||
+                        toolbarItem[i].getAttribute('tabindex') !== '-1')) {
+                    toolbarItem[i].setAttribute('tabindex', '-1');
+                }
+            }
+        }
+    };
     __decorate([
         Complex({}, ToolbarSettings)
     ], RichTextEditor.prototype, "toolbarSettings", void 0);

package/src/rich-text-editor/models/default-locale.js

@@ -198,6 +198,7 @@ export var defaultLocale = {
     'emojiPickerTypeToFind': 'Type to find',
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',
+    'linkAriaLabel': 'Open in new window',
 };
 export var toolsLocale = {
     'alignments': 'alignments',

package/src/rich-text-editor/renderer/link-module.js

@@ -365,6 +365,7 @@ var Link = /** @class */ (function () {
             linkTitle = linkEle.querySelector('.e-rte-linkTitle').value;
         }
         var target = (this.selfLink.checkBoxObj.checked) ? '_blank' : null;
+        var linkLabel = (this.selfLink.checkBoxObj.checked) ? this.selfLink.i10n.getConstant('linkAriaLabel') : null;
         if (linkUrl === '') {
             this.selfLink.checkUrl(true);
             return;
@@ -395,7 +396,7 @@ var Link = /** @class */ (function () {
             this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
         }
         var value = {
-            url: linkUrl, text: linkText, title: linkTitle, target: target,
+            url: linkUrl, text: linkText, title: linkTitle, target: target, ariaLabel: linkLabel,
             selection: this.selection, selectParent: this.selectParent
         };
         if (document.body.contains(proxy.dialogObj.element)) {

package/src/rich-text-editor/renderer/table-module.js

@@ -1351,7 +1351,7 @@ var Table = /** @class */ (function () {
             value: 3,
             placeholder: tableRow,
             floatLabelType: 'Auto',
-            max: 50,
+            max: 1000,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale,
             cssClass: this.parent.cssClass
         });

package/src/rich-text-editor/renderer/view-source.js

@@ -1,6 +1,6 @@
 import { removeClass, selectAll, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
-import { CLS_EXPAND_OPEN, CLS_TB_ITEM, CLS_ACTIVE } from '../base/classes';
+import { CLS_EXPAND_OPEN, CLS_TB_ITEM, CLS_ACTIVE, CLS_RTE_SOURCE_CODE_TXTAREA } from '../base/classes';
 import * as CONSTANT from '../../common/constant';
 import { RenderType } from '../base/enum';
 import { KeyboardEvents } from '../actions/keyboard';
@@ -44,7 +44,7 @@ var ViewSource = /** @class */ (function () {
         this.parent.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.onKeyDown);
     };
     ViewSource.prototype.getSourceCode = function () {
-        return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' + ' ' + this.parent.cssClass });
+        return this.parent.createElement('textarea', { className: CLS_RTE_SOURCE_CODE_TXTAREA + ' ' + this.parent.cssClass });
     };
     ViewSource.prototype.wireEvent = function (element) {
         this.keyboardModule = new KeyboardEvents(element, {
@@ -78,9 +78,10 @@ var ViewSource = /** @class */ (function () {
                 event.preventDefault();
                 break;
             case 'toolbar-focus':
-                if (this.parent.toolbarSettings.enable) {
-                    var selector = '.e-toolbar-item[title] [tabindex]';
-                    this.parent.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();
+                if (this.parent.toolbarSettings.enable && this.parent.getToolbarElement()) {
+                    var firstActiveItem = this.parent.getToolbarElement().querySelector('.e-toolbar-item:not(.e-overlay)[title]');
+                    firstActiveItem.firstElementChild.removeAttribute('tabindex');
+                    firstActiveItem.firstElementChild.focus();
                 }
                 break;
         }