It would be great in a future release if we could paste in images from the clipboard.

*** Thread created by admin on customer behalf ***

Please expose the ability to allow additional HTML attributes in the Editor content.

===ADMIN EDIT===

Provide support for:

• custom attributes for the Editor elements
• custom tags

When I add table to Editor, dispose the component and initialize it again with the same content, the table cells appear taller. It looks like an additional <br class="ProseMirror-trailingBreak"> appears in every cell.

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

Steps to reproduce:

1. Add a table
2. Toggle the Editor
3. Cells appear taller

At the moment, commands are available both for color and background color, you can find them in the built-in tools list article - see the Back Color and Fore Color tools: https://docs.telerik.com/blazor-ui/components/editor/built-in-tools. You can use them as custom tools right now: https://docs.telerik.com/blazor-ui/components/editor/custom-tool - basic examples are also available in the demo: https://demos.telerik.com/blazor-ui/editor/custom-tools.

I would like to have them as built-in tools with predefined color pickers.

*** Thread created by admin on customer behalf ***

When selecting an image, I expect drag handles to show me that an image selection has occurred and that let me resize the image.

*** Thread created by admin on customer behalf ***

I cannot clear the content area of the TelerikEditor when the component is placed in the Form Item Template.

<AdminEdit>

Below, you can find a workaround solution:

@using System.ComponentModel.DataAnnotations;
@using Telerik.Blazor.Components.Editor

<TelerikForm Model="@Model" OnSubmit="@OnSubmitHandler">
    <FormValidation>
        <DataAnnotationsValidator />
        <ValidationSummary />
    </FormValidation>
    <FormItems>
        <FormItem>
            <Template>
                <TelerikEditor @bind-Value="@Model.Name" @ref="@EditorRef" />
            </Template>
        </FormItem>
    </FormItems>
</TelerikForm>

@code {
    public SampleData Model { get; set; } = new SampleData();
    public TelerikEditor EditorRef { get; set; }

    private async Task OnSubmitHandler(EditContext editContext)
    {
        bool isFormValid = editContext.Validate();

        if (isFormValid)
        {
            //some logic here
        }
        else
        {
            await EditorRef.ExecuteAsync(new HtmlCommandArgs("setHtml", "")); //workaround

            //clear the content of the editor to let the user type anew
            Model.Name = String.Empty;
        }
    }

    public class SampleData
    {
        [Required]
        [MinLength(30, ErrorMessage = "The content should be minimum 30 characters long.")]
        public string Name { get; set; }
    }
}

</AdminEdit>

• Wizard for inserting new tables
• Drag to resize tables and columns

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

When you paste a table in the Editor or insert one through the InsertHTML tool, the Editor adds two  <tbody> tags making this invalid HTML.

If you include a table in the initially rendered content (not pasting it afterwards), two <tbody> tags appear as well.

If you create table using the Create Table tool this behavior is not present, only one <tbody> tag is added as expected.

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

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>

Highlight an existing hyperlink and click the Insert Hyperlink button. The update button is empty

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?

When you paste a table in the Editor or insert one through the InsertHTML tool, most of the Editor Table tools don't work on the pasted table. Only Delete Table tool can be used. The rest of the Table tools do not seem to invoke any action with the table.

If you create table using the Create Table tool this behavior is not present, you can accordingly apply the built-in Table tools.

If I click accidentally click on one of the alignment options, I cannot then unselect it.

===========

ADMIN EDIT

Video of the current behavior attached.

===========

Please review your demo at https://demos.telerik.com/blazor-ui/editor/overview in Safari on MacOS and you'll see that the HTML Editor's height is not showing correctly.

Clicking the image, and selecting the image button brings up a popup. The "Update" button is not appearing properly (does not occur on other editor popups):

*** Thread created by admin on customer behalf ***

At the moment bullet lists are lost.

---

ADMIN EDIT

Short version: The editor must implement content filters that transform the HTML MS Word provides into actual HTML (e.g., bullets from Word come as paragraphs, not <ul>).

Long version:

By default, pasting content from an application to another application goes through the OS and the applications can choose what flavor of the content to provide. In the case of pasting to a browser, the browser informs MS Word to provide an HTML version of the content. What Word provides is often pretty bad HTML where a lot of the formatting is gone.

For example, bullet lists become paragraphs that have a span with a dot in it, but this is not a real bullet list.

You can compare that behavior between the Telerik editor and the naked behavior of the browser with markup like this:

<div contenteditable="true" style="min-height: 200px; border: 1px solid red;"></div>

<TelerikEditor></TelerikEditor>

An editor component will do some processing that tries to ensure valid HTML and so some content changes are inevitable. The key thing is that we preserve the main HTML structure that Word provides.

---