Shift+Left modifies text selection inconsistently in RadEditor

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 16 Jan 2024 11:46 by ADMIN

Release 2024 Q1

ADMIN

Rumen

Created on: 08 Mar 2018 11:09

Category: Editor

Type: Bug Report

Shift+Left modifies text selection inconsistently in RadEditor

1.       Visit the RadEditor demo at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx (I used Google Chrome.)

2.       In the HTML view, replace the entire demo text with

This <strong>strange</strong> thing

3.       In the Design view, place the cursor at the very end of the line, and press Shift+Left repeatedly.

a.       At first it will highlight the final letter correctly.

b.      Then it will UNHIGHLIGHT the final letter!

c.       Then it will begin highlight more letters again starting from the letter BEFORE the final letter.

d.      Then, after highlighting the “e” in strange, it will being UNHIGHLIGHTING starting from the righthand side of the selection!

e.      Then it will highlight left as far as the “s”.

f.        Then it will start UNHIGHLIGHTING from the right again!

g.       Then highlighting the space to the left

h.      Then UNHIGHLIGHTING the space to the left!

i.         Then highlighting to the left as far as the beginning of the line

j.        Then UNHIGHLIGHTING from the right side of the selection!

Pressing Shift+Left and Shift+Right should always modify only one end of the selection, and the other end should always remain where the selection was started. This is how Windows Notepad and virtually all other applications behave.

2 comments

ADMIN

Rumen

Posted on: 08 Jan 2024 15:24

You can use the following code to fix the problem - please let us know if you experience any side effects.

        <script>
            var $T = Telerik.Web.UI;
            var $E = $T.Editor;
            var utils = $T.Editor.Utils;
            var $ = $telerik.$;

            $E.InlineCommandWithValue.prototype.getValue = function (wnd, range) {

                if (!range || !this.settings.enableToolStateValue) { return; }

                var cssName = this.settings.cssName,
                    node = range.startContainer,
                    offset = range.startOffset,
                    childNodes;

                if (offset == 0 && utils.isEditorContentArea(node)
                    && utils.isTextNode(node.firstChild) && utils.isTextNodeEmpty(node.firstChild)) {
                    var firstTextRange = this.get_editor().domRangeToFirstText();

                    node = firstTextRange.startContainer;
                    offset = firstTextRange.startOffset;
                }

                if (utils.isTextNode(node)) {
                    node = node.parentNode;
                } else if ((childNodes = node.childNodes) && childNodes[offset] && !utils.isTextNode(childNodes[offset])) {
                    node = childNodes[offset];
                }

                return $telerik.getComputedStyle(node, cssName)
                    || $telerik.getComputedStyle(node, this.getAltCssName(cssName));
            }


            $E.InlineCommand.prototype.getStateByRange = function (range, editor) {
                if (!range || range.commonAncestorContainer.nodeType == 9) { return $E.CommandStates.Off; }

                var start = range.startContainer;

                if (!utils.isTextNode(start) && start.childNodes[range.startOffset]) { start = start.childNodes[range.startOffset]; }

                if (!utils.isTextNode(start) && utils.canHaveChildren(start)) {
                    start = this.getFirstTextNodeOrSame(start);
                }

                if (utils.isTextNode(start) && utils.isTextNodeEmpty(start) && !start.previousSibling
                    && editor && start.parentNode === editor.get_contentArea()) {
                    start = this.getNextTextNode(start);
                }

                start = this.findFormattedAncestor(start);

                return start && this.isSameFormatNode(start) ? $E.CommandStates.On : $E.CommandStates.Off;
            }

            $E.RangeIterator.prototype._buildSubTraverser = function (currentNode) {
                
                var duplicate = this.range;

                duplicate.selectNodeContents(currentNode);

                if (utils.isAncestorOrSelf(currentNode, this.range.startContainer)) { duplicate.setStart(this.range.startContainer, this.range.startOffset); }// duplicate.snapToRange($E.DomRange.START_TO_START, this.range);

                if (utils.isAncestorOrSelf(currentNode, this.range.endContainer)) { duplicate.setEnd(this.range.endContainer, this.range.endOffset); }// duplicate.snapToRange($E.DomRange.END_TO_END, this.range);

                return new $E.RangeIterator(duplicate, $.extend({}, this.options));
            }
        </script>

        <telerik:RadEditor runat="server" _ToolsFile="Default-ToolsFile.xml">
            <Content>This <span style="font-size: 22px; font-family: Georgia;"><strong>strange</strong> </span>t</Content>
            <Modules>
                <telerik:EditorModule Enabled="false" />
            </Modules>
        </telerik:RadEditor>

ADMIN

Rumen

Posted on: 21 Jun 2022 22:39

Thank you for reporting this problem!

Until the issue gets fixed, you can use the temporary solution below:

            <script>
                var $T = Telerik.Web.UI;
                var $Editor = $T.Editor;

                $Editor.DefaultToolAdapter.prototype._registerEditorHandlers = function () {
                    var editor = this.get_editor();
                    editor.add_load(this._onEditorLoadDelegate);
                    editor.add_modeChange(this._onEditorModeChangeDelegate);
                }
            </script>
            <telerik:RadEditor ID="Radeditor1" runat="server">
                <Content>some very long long long long long sentence</Content>
            </telerik:RadEditor>