Bug report

If you have several Inline Editors and a Slider, switching focus from Slider and typing in the Editors result in an error in the console.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/EhiKaJAw/2
2. Change the Slider value
3. Go to the Editor right below the slider and type some text - it appears that the focus is stolen here as the text cursor is not shown
4. Go to the second Editor and type some text
5. Repeat steps 2-4 several times

Current behavior

An error is thrown in the console

Expected/desired behavior

No error should be thrown on the console

Environment

• Kendo UI version: 2024.1.319
• Browser: [all]

Hello,

I have an issue when I use the drag and drop of a picture in the kendo Editor inline.

Let me explain it :

1) Go to : https://runner.telerik.io/fullscreen/uWosAbib (It's the standard example on your site) on chrome 123

2) Select the last editor "Rich UI Widgets for..."

3) Take a file of a picture on your computer and drop it on the first editor "Comprehensive HTML5/..."

Two things :

* The file open on a new tab browser instead of to be added to the html of the first editor

* There is a message in the debug tools (The stack trace is added in the Attach Files)

Uncaught TypeError: Cannot read properties of null (reading 'nodeType')
    at init.index (kendo.all.js:135127:1)

Another element, if you don't select and just drag and drop it's work.

Thank you for your awesome framework and good luck with the correction !

Bug report

If the ColorPicker tools in the Editor are configured to render a gradient, you cannot type in the HEX/RGB inputs.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/AWEmUSOS/7
2. Open one of the Color tools.
3. Try to type in the inputs.

Current behavior

The inputs are not selectable and you cannot type in them.

Expected/desired behavior

The inputs should be selectable so that you can type in them.

Environment

• Kendo UI version: 2023.2.829
• Browser: [all]

Bug report

The Editor doesn't allow multiple separators through the tools configuration.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/eSESEheW/19

Current behavior

Only the first separator is rendered.

Expected/desired behavior

All the separators should be rendered

Environment

• Kendo UI version: 2024.1.319
• Browser: [all]

Bug report

Inline Editor does not close if you drag it to another position. Additionally, while dragging, occasionally the Editor will disappear, or it will have a padding from the cursor.

Regression introduced with 2023.2.606

Video - http://somup.com/cZeOQ5CYa8

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/OvumAcaH/7
2. Open and drag the inline Editors to observe the behaviour.

Current behavior

The inline Editor remains open when it loses focus

Expected/desired behavior

Thе inline Editor should close when it loses focus

Environment

• Kendo UI version: 2024.1.319
• Browser: [all]

Dear support team,

when using the gradient color selection for font color and/or background color the textbox for the HEX value seems to be "disabled".
It can not be selected by using the mouse but it works using keyboard navigation, so the TAB key.

This can be reproduced easily with the samples in the API documentation (https://docs.telerik.com/kendo-ui/api/javascript/ui/editor/configuration/tools.palette) of the editor or the main demo by changing the "foreColor" or "backColor" tools to 

{
   name: "backColor",
   palette: null
}

or see the following dojo containing the default : https://dojo.telerik.com/IbaFaGIz

This is annoying in case you have an exact color that should be used as it is awkward to select it in the "color area".
The textbox should be fully useable by the users.

PS:
Same when switching from HEX to RGB input.

1. use safari browser

2. Go to https://demos.telerik.com/kendo-ui/editor/index

3.  copy a long text over 25 characters

4. paste the copied text in the editor

5. notice that the scroll takes you to the bottom of the page, The same is not noticed in any other browser.

6. This is very inconvenient. 

Hi Team,

Create table popup inside the editor does not announce the table cells selected by user to screen reader.

https://dojo.telerik.com/enAFIvab

any help is appreciated.

Thanks,

Ashutosh

Bug report

In an Editor with custom fontName items configured, the selection in the tool is not preserved when specific items are selected.

Reproduction of the problem

1. Open this Dojo - https://dojo.telerik.com/oGavoViC/28
2. Select the text and choose "Andale Mono"
3. Open the fontName dropdown.

Current behavior

The "Andane Mono" does not appear as selected in the list

Expected/desired behavior

The "Andane Mono" should be selected in the list

Environment

• Kendo UI version: 2024.1.130
• Browser: [all]

I've configured a Kendo-UI editor so that it supports two tools ("foreColor" and "formatting") (see this DOJO). When the input area is focused, the toolbar can be reached by pressing SHIFT+TAB.

Expected behavior according to the docs: The last-used toolbar item is focused (default: the first item). By pressing SPACE or ENTER, the tool can be activated and used.

Actual behavior (only if the "formatting" tool is present): The "formatting" tool is focused and already activated. Arrow buttons swicth between the different formatting styles instead of selecting the next/previous toolbar item.

Note: When using F10 to focus the toolbar, everything works as expected as long as you don't use TAB afterwards to move the focus back to the input area. The issue seems to be that some container of the formatting tool has its "tabindex" is initially set to "0".

Bug report

When the serialization.semantic is set to false and the user uses the viewHtml tool and press 'Update' then after chaning the font-size, the style attribute is added to the element instead of the font attribute.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/@NeliKondova/iVICefOb
2. Add some text and change its font. If you inspect the content at this stage, the font size will be applied using the font attribute: <font size="4">хххх</font>
3. Press 'Update' button in the viewHtml dialog.
4. Press 'Enter' to add paragraph.
5. Change the font size and enter some text.
6. Inspect the content or open the ViewHtml.

Current behavior

The font-size after pressing the 'Update' button is applied using the style attribute

    <p>aaaaaa</p>
    <p><font size="1">bbbbbbb</font></p>
    <p><font style="font-size: small;">ccccccc</font></p>

screencast - https://screenpal.com/watch/cZVvQtVJ8oz

Expected/desired behavior

When the semantic mode is set to false and the 'Update' button in the viewHtml tool is clicked the font size should be applied as initially - using the font attribute.

Environment

• Kendo UI version: 2023.3.1114
• Browser: [all ]

Bug report

The resize handlers in Editor are visible after an image has been deleted

Reproduction of the problem

1. Open the Demo - https://demos.telerik.com/kendo-ui/editor/index
2. Select the image and delete it using 'Delete' button
3. Press Ctrl+Z and then delete the image again

Current behavior

The image disappears, but the resize handlers remain visible

Expected/desired behavior

The resize handlers should be hidden when an image is deleted.

Workaround

<script>
var editor = $('#editor').kendoEditor().data('kendoEditor');

$(editor.body).keydown(function(e){
     if(e.key === "Delete"){    
          $(editor.body).find('.k-element-resize-handle-wrapper').hide()
     }
})
</script>

Dojo

Environment

• Kendo UI version: 2022.1.301
• Browser: [all ]

Bug report

The Editor table wizard does not apply styling to all cells

Reproduction of the problem

1. Open this demo
2. Select February Actual cell
3. Open table wizard
4. Select the Cell tab
5. Create a border - for example, 6px double red border, click OK

Current behavior

The specified border is not applied. Selecting the February header instead and repeating the steps above applies the border styling

Expected/desired behavior

The styling applied through the wizard should be applied to the table cell

Environment

• Kendo UI version: 2020.1.406
• Browser: [all]

Hi, steps to reproduce problem:

1. Crete editor with content:

<p>hello&nbsp;
<strong contenteditable="false">OMG</strong>
&nbsp;world</p><p>&#65279;</p>

2. Put cursor at the end

3. Hit backspace

Strong tag disappears but it shouldn't.

Attached html file with the case.

Bug report

Reproduction of the problem

Reproducible in demos in Chrome.

1. Click on the "Print" tool in the toolbar.

Current behavior

The Editor's content is focused and the caret is printed.

Expected/desired behavior

The caret is not printed.

Environment

• Kendo UI version: 2020.3.1021
• jQuery version: x.y
• Browser: [Chrome 86]

Bug report

When you resize an image in the Editor, the image occasionally flickers. Also, if you decrease the size of the image, you cannot smoothly increase it back

Reproduction of the problem

Flickering issue:

1. Open this Dojo example - https://dojo.telerik.com/EMeTaBOw/5
2. Grab the top right resize handle
3. Decrease the size of the image several times

Increase width issue

1. Open this Dojo example - https://dojo.telerik.com/EMeTaBOw/5
2. Grab the top right resize handle
3. Decrease the size of the image and let go of the resize handler
4. Grab the top right handler again and try to increase its width.

Current behavior

The image flickers upon resizing, and you cannot increase its width

Expected/desired behavior

The image shouldn't be flickering, and you should be able to smoothly increase its width

Environment

• Kendo UI version: 2023.3.1114
• Browser: [all]

Bug report

Immutable content is incorrectly removed when you delete line in the Editor textarea.

Reproduction of the problem

1. Open this demo - https://demos.telerik.com/kendo-ui/editor/immutable-elements
2. Place your mouse cursor after Dear Your Name,
3. Hit Enter
4. Hit Backspace

Current behavior

The immutable "Dear" part of the text is removed instead of the empty line

Expected/desired behavior

The immutable content should not be removed

Environment

• Kendo UI version: 2022.3.913
• Browser: [all]

Bug report

The <source> tag in the Editor gets closed incorrectly. It's a void element, so it should either close itself or not have a closing tag at all. To quote MDN:

The element is a void element, which means that it not only has no content but also has no closing tag. That is, you never use "</source>" in your HTML.

--- <source>: The Media or Image Source element

Reproduction of the problem

Follow these steps:

• Create an editor with "viewHtml" enabled in the toolbar, e.g.:

$("#editor").kendoEditor({ tools: ["viewHtml"] });

• Click the </> button to open the "view HTML" modal;
• Update the HTML with this snippet:

<picture>
    <source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.webp" type="image/webp" />
    <source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.png" type="image/png" />
    <source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.jpg" type="image/jpg" />
    <img src="https://picsum.photos/id/0/300/200.jpg" width="300" height="200" />
</picture>

• Click the "Update" button in the HTML modal;
• Now click the </> button again to view the HTML, and you'll notice that all <source> tags now have a </source> closing tag added.

Current behavior

All the <source> get closing tags (</source>), which makes the HTML invalid as it's a void element. Above snippet would get turned into this (indented for readability):

<picture>
    <source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.webp" type="image/webp"></source>
    <source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.png" type="image/png"></source>
    <source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.jpg" type="image/jpg"></source>
    <img src="https://picsum.photos/id/0/300/200.jpg" width="300" height="200" />
</picture>

Expected/desired behavior

The <source> should not get a closing tag, but should either close themselves, or not be closed at all.

Environment

• Kendo UI version: 2023.2.829
• jQuery version: 3.4.1
• Browser: [all]

Bug report

When using an Editor in Inline mode and dragging an image a JavaScript error is thrown: Uncaught TypeError: Cannot read properties of null (reading 'nodeType')

Reproduction of the problem

1. Open the Inline Editor Demo
2. Drag and drop an image on an Editor

Current behavior

A JavaScript error is thrown: "Uncaught TypeError: Cannot read properties of null (reading 'nodeType')"
screencast

Expected/desired behavior

An error should not be thrown

Environment

• Kendo UI version: 2021.3.914
• Browser: [all]

Bug report

Reproduction of the problem

Reproducible in the demos.

1. Shrink the browser window so that some of the Editor tools go under the overflow button.
2. Click the overflow button and then click a tool in the dropdown that opens a dialog ("Insert Image" or "Insert hyperlink").

Current behavior

A new dialog opens, but the overflow dropdown does not close and remains visible below the newly opened dialog.

In the inline Editor the overflow dropdown is shown above the newly opened dialog.

Expected/desired behavior

The overflow dropdown closes.

Environment

• Kendo UI version: 2019.2.619
• jQuery version: x.y
• Browser: [all ]