When a table row does not have any cells, there might be lots of script errors when hovering the empty row with the mouse.

The error is the following:
Uncaught RangeError: Not a table node: doc

Sometimes we even have a server error:
Microsoft.JSInterop.JSException: Not a table node: table_wrapper
RangeError: Not a table node: table_wrapper
    at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1557112
    at pl.get (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1558816)
    at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1638148
    at Be.decorations (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1638538)
    at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1529498
    at Wa.someProp (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1548718)
    at Fa (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1529464)
    at Wa.updateStateInner (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1545305)
    at Wa.update (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1544591)
    at Wa.setProps (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1544734)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikEditor.SetOptions()
   at Telerik.Blazor.Components.TelerikEditor.OnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

The server error is really hard to recreate, but it seems like users that has a slow computer and hovers the editor directly when loading gets this error sometimes...

Here is the source code (hovering the empty row will generate scripting errors):

<TelerikEditor Height="300px" @bind-Value="@Value" EditMode="Telerik.Blazor.EditorEditMode.Iframe" ReadOnly="true">
</TelerikEditor>

@code {
    public string Value { get; set; } =
            @"
<table>
    <tbody>
        <tr>
            <td>
               Some text
            </td>
        </tr>
        <tr style=""height: 24px"">
        </tr>
        <tr>
            <td>
                Some text
            </td>
        </tr>
    </tbody>
</table>
    ";
}

Even if setting ReadOnly="true", tables in the Editor can be resized...

This only happens in Iframe mode!

<TelerikEditor Height="300px" @bind-Value="@Value" EditMode="Telerik.Blazor.EditorEditMode.Iframe" ReadOnly="true">
</TelerikEditor>

@code {
    public string Value { get; set; } =
            @"
<table>
    <tbody>
        <tr>
            <td>
               Some text
            </td>
        </tr>
        <tr style=""height: 24px"">
        </tr>
        <tr>
            <td>
                Some text
            </td>
        </tr>
    </tbody>
</table>
    ";
}

Description

Regression introduced in v9.0.0.

Initial binding to a property works, but when either the RemoveAttributes or the StripTags parameter is set, on changing the Editor value, two-way binding does not work and the new Editor value is not reflected in the property value.

Potentially related to #3887

Steps To Reproduce

1. Run the following example:

<p role="status">Current Editor value: @CurrentEditorText</p>

<TelerikEditor @bind-Value="@CurrentEditorText">
    <EditorSettings>
        <EditorPasteSettings ConvertMsLists="@true"
                             RemoveAllAttributes="@true"
                             RemoveAttributes="@(new List<string> { "lang" })"
                             RemoveHtmlComments="@true"
                             RemoveMsClasses="@true"
                             RemoveMsStyles="@true"
                             StripTags="@( new List<string> { "h1" })">
        </EditorPasteSettings>
    </EditorSettings>
</TelerikEditor>


@code {
    private string CurrentEditorText { get; set; } = @"<strong>initial</strong><span>value</span>";

    public List<string> RemoveAttributes { get; set; } = new List<string>() { "data-id" };

    public List<string> StripTags { get; set; } = new List<string>() { "font" };
}

2. Type in the Editor's content area

Actual Behavior

The CurrentEditorText property value is not updated.

Expected Behavior

The CurrentEditorText property value is updated.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

8.1.1

Description

After the user selects a color in the color tools, the popup does not close automatically. The user has to click on the Editor's toolbar for the popup to close.

Steps To Reproduce

1. Run this example: https://blazorrepl.telerik.com/GTYXPsFv59loxN7v37
2. Highlight a word in the Editor's content and use the color tools. Change either the text color or the background color.

Actual Behavior

After selecting a color, the color tool's popup remains open.

Expected Behavior

The color tool's popup closes.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

The Editor converts new lines in the HTML content to empty paragraphs if the Value is set after the component is initialized and rendered.

Here is a test page with the possible workarounds. The app can either display the Editor after its Value becomes available, or strip the new lines before setting the component Value.

https://blazorrepl.telerik.com/QzuXOPPE06y6JCR942

Description

Entering/Removing spaces in between words does not trigger the ValueChanged event.

Steps To Reproduce

Run this example: https://blazorrepl.telerik.com/wzELPuOs30WSuvzv33

1. Click between the "Lorem" and "ipsum" words.
2. Press the Spacebar key a few times
3. Press the Backspace key a few times

Actual Behavior

The ValueChanged event does not fire when you enter/remove spaces in between words. It fires correctly if you break a word with a space of if you remove all the spaces in between 2 words.

Expected Behavior

ValueChanged should fire on every entered/removed space.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

The problem is that the ValueChanged fires without an actual change in the Editor content - just click in it. I reproduce this issue in the following scenario:

• The value contains a self-closing tag.
• I click in the Editor the first time. Consecutive clicks in the Editor do not cause ValueChanged to fire.

Reproduction: https://blazorrepl.telerik.com/wfaxnvPv19jUCGhd15.

When copying from the Editor and pasting in Word (keep source formatting), basic stuff like font and font size are not kept.

The text will always become Times New Roman, and the font sizes are not the same, for example 14pt becomes 13.5pt...

Using IFrame-mode and injecting css to set default fonts since that is not supported in a proper way...

From what I can see you need to intercept the copy-event and fix the html like your competitors do (for example syncfusion)...

I'm using the Editor in a form along with several other inputs (e.g. TextBox, NumericTextBox).

If the user enters an invalid value for the other inputs, they get a red border. The Editor, however, does not have such a border when its value is invalid and thus the form elements are not consistent. Please add a red border for the invalid state of the Editor, too.

===

ADMIN EDIT

===

At this stage, the Editor is not treated as a standard input and it does not support all of the input's capabilities - such as invalid state, disabled state, sizing, fill and more.

The current request may potentially be part of a bigger design story that strives to align the Editor's functionalities with the rest of the inputs ( TextBox, NumericTextBox and more).

The Font Size and Font Family tools display the currently applied style value in the user selection only if the selection is inside one HTML element. This prevents the user from resetting (removing) the current font style.

Test scenario:

1. Select all the Editor content and apply a custom font size or font family.
2. Select content, which has the same styles applied (for example, the 2nd and 3rd "foo" on line 1).
3. Select content, which has different styles applies (for example, the 1st and 2nd "foo" on line 1).
4. Select content in multiple paragraphs (for example, the last "foo" and the first "bar").

@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@EditorToolSets.All" />

<h2>Raw Editor Value</h2>

<TelerikTextArea @bind-Value="@EditorValue"
                 Rows="5" />

@code {
    private string EditorValue { get; set; } = @"<p><strong>Foo</strong> foo foo.</p><p>Bar <strong>bar</strong> bar.</p><p>Baz baz <strong>baz</strong>.</p>";
}

The possible workarounds are:

• Reset (remove) the font styles separately for each HTML element.
• Set another font style instead of resetting it.

Hello,

the Color Tool Customization in the Telerik Editor is not working correctly. Colors are only generate HTML in Rgb.

The documentation says: "ValueFormat":  The format, which the Color tool will set in the generated HTML markup. Use Rgb or Hex.

Thanks in advance.

For example: https://docs.telerik.com/blazor-ui/components/editor/built-in-tools#color-tool-customization

@using Telerik.Blazor.Components.Editor

<TelerikEditor Tools="@EditorTools"
               @bind-Value="@EditorValue">
</TelerikEditor>

@code {
    private string EditorValue { get; set; }

    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>()
    {
        new ForeColor()
        {
            Title = "Text Color",
            Colors = new List<string> { "#f00", "#ff9900", "rgb(0, 128, 0)", "rgba(0, 0, 255, .8)" },
            ValueFormat = ColorFormat.Hex
        },
        new ViewHtml()
    };
}

If the editor's HTML markup contains inline CSS styles, and a CSS attribute value includes a semicolon (;), it breaks the applied styles and throws an exception.

For example:

<p style= "" ....background-image: url('data:image/png;base64...;""</p>

The exception is:

Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

=== ADMIN EDIT ===

The issue can also occur when there is an invalid inline style with two semicolons without a complete style-value pair in-between.

For example:

<p style=""color:red; b ;"">sdf</p>

Please allow the user to copy an image from the file system (for example, Windows Explorer) and paste it in the Editor without opening the image first.

Currently this works in the Kendo UI jQuery Editor.