Bug report

Reproduction of the problem

(bug report only)

1. Run this example: https://blazorrepl.telerik.com/mUOqQflm56D4xScx54
2. Select a font in the FontFamily dropdown.
3. Click the UnorderedList tool in the Editor’s toolbar.
4. A bullet is added and the FontFamily tool loses its value.
5. Click right after the added bullet.
6. Once again select a font in the FontFamily drodown.
7. Click the UnorderedList tool in the Editor’s toolbar to remove the bullet.
8. The FontFamily tool loses its value.

Current behavior

(optional)
Provide additional information if the steps for reproducing the faulty behavior are not sufficient to describe the issue.

Expected/desired behavior

The FontFamily tool should keep its value when an unordered list is added/removed.

Environment

• Kendo/Telerik version: 14.0.0
• Browser: [all]

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

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.

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>

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.

It would be nice to have an ability to group CustomTool / icons much like we can do EditorButtonGroup(s) - e.g.

new CustomToolGroup (new CustomTool("Save"),  new CustomTool("Import"), new CustomTool("Export"))

The TelerikEditor demos all show bind-Value being used to marshal HTML in and out of the editor:

<TelerikEditor @bind-Value="@TheEditorValue" Width="650px" Height="400px"></TelerikEditor>

However, this causes problems - the underlying ProseMirror component emits it's own HTML (e.g. for image drag handles), which is visible in the bound Value property.

We need to be able to export "clean" HTML from the viewer, otherwise we end up saving this superflous HTML as part of our document.

Code

This REPL shows the issue:

https://blazorrepl.telerik.com/mHODmObJ36vZ7ivR09

@page "/editor/tools"

@using Telerik.Blazor.Components.Editor 

<TelerikEditor Tools="@EditorToolSets.All"
               Height="300px"
               @bind-Value="@Value"
               EditMode="EditorEditMode.Div"
               ></TelerikEditor>

<pre style="white-space: pre-wrap;">@Value</pre>

@code {
    public string Value { get; set; } =
        "<img src=\"img/toolbar-assets/repl-logo.svg\" />";
}

Steps to Reproduce

1. Open the REPL and click "Run" - observe that the bound HTML is simply

<img src="img/toolbar-assets/repl-logo.svg" />

2. Click on the Telerik logo image inside the editor - observe that the bound HTML is now

<p><img src="img/toolbar-assets/repl-logo.svg" contenteditable="false" draggable="true" class="ProseMirror-selectednode"><div class="k-editor-resize-handles-wrapper ProseMirror-widget" style="width: 857px; height: 78px; top: 8px; left: 8px;" contenteditable="false"><div class="k-editor-resize-handle southeast" data-dir-image-resize="southeast"></div><div class="k-editor-resize-handle east" data-dir-image-resize="east"></div><div class="k-editor-resize-handle south" data-dir-image-resize="south"></div><div class="k-editor-resize-handle north" data-dir-image-resize="north"></div><div class="k-editor-resize-handle west" data-dir-image-resize="west"></div><div class="k-editor-resize-handle southwest" data-dir-image-resize="southwest"></div><div class="k-editor-resize-handle northwest" data-dir-image-resize="northwest"></div><div class="k-editor-resize-handle northeast" data-dir-image-resize="northeast"></div></div><br class="ProseMirror-trailingBreak"></p>

3. Deselect the image - observe that the bound HTML no longer contains the image handles etc, but is still more verbose than when we started

<p><img src="img/toolbar-assets/repl-logo.svg" contenteditable="false" draggable="true" class=""><br class="ProseMirror-trailingBreak"></p>

4. At any point during the above steps, click the "View HTML" button in the Editor toolbar - observe that it is able to present a "clean" structure which contains no ProseMirror markup etc.

Requirements

How do we access this HTML via the TelerikEditor Blazor APIs?

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

Hello,

We've come across a bug. It seems as whatever tool button(s) that should be selected is not shown correctly. It appears to show the previously selected.

Repro steps:

1. Write two different formatted texts on separate lines in your Editor component.
2. Move the cursor to the first line
3. Move the cursor to the second line that has a different formatted text. Note that the tool button for the formatted text on the first line is shown as selected.
   
   This should happen:
   

Is this an intended behaviour? Our users are confused :)

/Patrik

Here is a scenario that produces an exception.

1. Go to https://demos.telerik.com/blazor-ui/editor/overview
2. Select the image in the Editor and resize it using the border / resize handles.
3. Keep the image selected and then click the "Insert image" button in the toolbar of the editor. Now the page will crash.

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.