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?

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.

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

It looks like the Iframes now work, but a Video tag with Source tags does not, like the following:

<video class='embed-responsive embed-responsive h-100' controls='controls'>

<source src= '/File/101' type='video/webm' />

<source src='/File/108' type='video/mp4' />

</video>

The View HTML Button will remove the whole video tag. And the 'insertHtml' will throw an Error on the JS Console.

These Tags are necessary because different browsers and OSs may not be able to display certain media types. So usually you provide multiple sources for the different requirements. Is there a way to allow these Tags in the 'insertHtml' Method?

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

Steps to reproduce:

https://demos.telerik.com/blazor-ui/editor/overview

1. Clean content
2. Insert sentence
3. Center it and press Enter
4. Type new sentence and select whole content (Ctrl + A)
5. Align not possible, because is selected

Expected: All paragraphs in the editors receive center alignment

Actual: Align is possible

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.

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.

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

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