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

When the Editor is disabled, the user can still focus it by tabbing and edit the content. The issue occurs in both Div and Iframe EditMode.

Click on the textbox and press TAB:

<input type="text" tabindex="0" />

<TelerikEditor Enabled="false"
			  EditMode="@EditorEditMode.Div"
			  Height="200px" />

When you create or paste a table, you cannot move the cursor outside of it if there is no other content in the Editor.

----------ADMIN EDIT----------

Here is a possible workaround when using InsertTable() tool:

@using Telerik.Blazor.Components.Editor

<TelerikButton OnClick="@InsertTable">Insert Table</TelerikButton>

<TelerikEditor @ref="@TheEditor" Value="@TheContent" ValueChanged="@ValueChangedHandler"></TelerikEditor>

@code {
    TelerikEditor TheEditor { get; set; }

    string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";

    void ValueChangedHandler(string value)
    {
        var checkEnd = value.EndsWith("</table>");

        TheContent = checkEnd == true ? value + "<p></p>" : value;
    }

    async Task InsertTable()
    {
        await TheEditor.ExecuteAsync(new TableCommandArgs(4, 4));
    }
}

Steps:

• Use the Editor's ValueChanged event.
• See if the value ends with a closing </table> tag.
• Append an empty paragraph to the Editor value - "<p></p>".

Hello,

after selecting a block of text in your editor and perform some block operation (for instance - change font size, name, ..) the original selection is lost. Would it be possible to keep that selection please?

Very thanks.

Miroslav

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).

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()
    };
}

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.

When adding an icon such as <i class="fa-light fa-envelope"></i> (the format which FontAwesome recommends), the icon's HTML disappears upon saving. We figured this was maybe due to the type of tag used (the i tag), so we tried using a div instead (<div class="fa-light fa-envelope"></div>). This div is not stripped from the HTML but the icon is not rendered.

Please allow inserting icons in the Editor content.

In fashion similar to the following example for the React editor that's done through the onMount ReactJS-specific event: https://www.telerik.com/kendo-react-ui/components/editor/plugins/#popup-tools

More on plugins for ProseMirror: https://prosemirror.net/docs/ref/version/0.20.0.html#state.Plugin_System

Hello,

I expect Shift + Ins to behave like a standard paste (Ctrl + V), but instead, it behaves like a plain text paste (Ctrl + Shift+ V).

===

Telerik edit: This was a ProseMirror issue, which was fixed on their side. Changes took effect in Telerik UI for Blazor 5.0.0.

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>

Hi,

I tried looking through the docs and api reference for the Blazor Editor, but I can't seem to find any resizable property like the one found in the ASP.NET Core component here: ASP.NET Core Editor - Api Reference | Telerik UI for ASP.NET Core

I just wanted to check that this feature is not included in the editor for Blazor before I submitted a feature request. I tried to search the requests as well and I didn't see this request listed. 

If this feature does not exist, do you know if it is being currently considered for a future release or if there is a workaround?

Thank you,

Frank