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:
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>
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.
Highlight an existing hyperlink and click the Insert Hyperlink button. The update button is empty
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 ***
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.
===========
ADMIN EDIT
Video of the current behavior attached.
===========
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.
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.
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\" />";
}
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.
How do we access this HTML via the TelerikEditor Blazor APIs?
Try running an editor with content like this:
<p>Para 1</p><p><br></p><p>Para 2</p><p><br></p><p>Para 3</p>
Now, open the ViewHtml button from the full toolset and Update the content without modifying anything.
The result is that there are more <br> tags in the the empty paragraphs than what we started with, and they are added every time you repeat this process.
*** Thread created by admin on customer behalf ***
I am passing an HTML table, which, on some elements, has a style attribute. When it renders the style attribute is missing which breaks the layout.
Passed HTML:
<table>
<tr>
<td style="width:100px;background-color:#FF0000;">Test</td>
</tr>
</table>
Rendered HTML from the Editor (missing style attribute):
<table class="k-table"><tbody><tr><td><p>Test</p></td></tr></tbody></table>
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
Here is a scenario that produces an exception.