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

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.

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

The Telerik Blazor Telerik Editor Insert Hyperlink functionality is not consistent with other Telerik Editor components and non Telerik Editors. Usually when dealing with Editors and the Insert Hyperlink feature, you can insert a hyperlink without need to select and convert existing text. You can also usually use the ctrl+k keyboard shortcut instead of clicking on the button. This does not work in the Telerik Blazor Editor.

The differences and lack of functionality has been raised as an issue by end users.

Expected Behaviour

1. Ensure no text is selected. The Insert Hyperlink button should be enabled.
2. Click the Insert Hyperlink button or press ctrl+k.
3. Enter values for web address, text, tooltip and "open link in new window".
4. Click insert. An anchor tag with the given text, link, etc. is created.

This can be reproduced on any of the Kendo UI for jQuery demo pages. It can also be reproduced within the editor on this very form.

Actual Behaviour

1. Ensure no text is selected. The Insert Hyperlink button is not enabled and cannot be clicked.
2. You must select existing text to be able to convert it to a hyperlink.

This can be reproduced on any of the demo pages that has the hyperlink button.

The Editor is not showing its Value in the following scenario:

• Using JSInterop in OnAfterRenderAsync
• Setting the Editor Value in OnAfterRenderAsync and after the JSInterop call
• Blazor Server app (seems to work in WebAssembly)

Possible workarounds are:

• Set the Editor Value and call StateHasChanged() before using JSInterop in OnAfterRenderAsync, or
• Add some small delay (for example, await Task.Delay(100); ) before using JSInterop.

I am using the LinkCommandArgs to programmatically create a link. I am adding all the required parameters (string href, string text, string target, string title) but no link is added to the Editor content.

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

===

ADMIN EDIT

===

For the time being, you may add a link using the HtmlCommandArgs tool and the "insertHtml" command like so: https://blazorrepl.telerik.com/GyuTmMkt56f3YiM754.

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 Editor currently supports only numeric ordered list. I'm looking for an option to add different types of ordered lists - roman and alphabetical.

Please add support for these types of ordered lists similiar to the KendoReact Editor.

When I paste a table from Word or Excel in the Editor, some of the formatting is lost. The Kendo React Editor supports most of the formatting and I would like to see the same behavior for Blazor. 

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

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.

I know the indent option is available.

But it would be great if it would be possible to allow tab presses in the editor control. 

Maybe the option to use @onkeydown or a parameter of AllowTabs.