The Editor is missing some CSS styles when the EditMode is Div. As a result, the table resizers are misplaced and table cell borders are missing.

The workaround is to add those styles explicitly, until the issue is fixed.

@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@ToolCollection"
               EditMode="@EditorEditMode.Div" />

<style>
.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}
div.ProseMirror {
  position: relative;
  min-height: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}
div.ProseMirror:focus {
  outline: none;
}
.ProseMirror pre {
  white-space: pre-wrap;
}
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror li {
  position: relative;
}
li.ProseMirror-selectednode {
  outline: none;
}
li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}
.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}
.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}
.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}
.k-editor-resize-handles-wrapper {
  position: absolute;
  visibility: hidden;
}
.k-editor-resize-handle {
  position: absolute;
  visibility: visible;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 100;
  width: 5px;
  height: 5px;
}
.k-editor-resize-handle.northwest {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nw-resize;
}
.k-editor-resize-handle.north {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: n-resize;
}
.k-editor-resize-handle.northeast {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: ne-resize;
}
.k-editor-resize-handle.southwest {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  cursor: sw-resize;
}
.k-editor-resize-handle.south {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: s-resize;
}
.k-editor-resize-handle.southeast {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  cursor: se-resize;
}
.k-editor-resize-handle.west {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: w-resize;
}
.k-editor-resize-handle.east {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  cursor: e-resize;
}
.ProseMirror .tableWrapper {
  overflow-x: auto;
  margin: 1em 0;
}
.k-editor-resize-wrap-element {
  display: inline-block;
  position: relative;
}
.ProseMirror .row-resize-handle {
  position: absolute;
  right: 0; left: 0; bottom: 0;
  transform: translate(0, 50%);
  height: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor-vertical {
  cursor: sn-resize;
  cursor: row-resize;
}
.k-editor-resize-wrap-element table td p,
.k-editor-resize-wrap-element table th p {
  margin: 0 auto;
}
.ProseMirror table {
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}
.ProseMirror td, .ProseMirror th {
  min-width: 1em;
  border: 1px solid #ddd;
  padding: 3px 5px;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}
.ProseMirror th {
  font-weight: bold;
  text-align: left;
}
.ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px; top: 0; bottom: 0;
  width: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}
/* Give selected cells a blue overlay */
.ProseMirror .selectedCell:after {
  z-index: 2;
  position: absolute;
  content: "";
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(200, 200, 255, 0.4);
  pointer-events: none;
}
</style>

@code {
    string EditorValue { get; set; }

    public List<IEditorTool> ToolCollection { get; set; } = new List<IEditorTool>() {
            new InsertTable()
        };
}

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.

Hello,

If the Edtor content includes <br /> tags, they will be lost if the user copy-pastes them to a plain text environment such as Notepad or a <textarea>.

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

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?

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.

Hi!

When using the Telerik Editor for Blazor, especially the insert HTML function, something seems a little odd.

I reproduced the same behaviour of my application in your demos on your website.

It seems like it is currently not possible to insert a HTML with multiple Lines in it, it only inserts the first line within the given value.

For better understanding, I've attached a video which displays the behaviour.

The HTML i've used:

<p>Test</p><p><br /></p><p>with</p><p><br /></p><p>Line</p><p><br /></p><p>breaks</p><p><br /></p><p><br /></p><p>1</p><p><br /></p><p>2</p><p><br /></p><p>3</p><p><br /></p>

Especially when you are working with HTML-Templates, it is necessary to be able to insert a rich HTML Template with multiple lines, tables, etc..

Thank you for your help in advance!

Best regards,

Stefan

---

ADMIN EDIT

A workaround is to initialize the RemoveAttributes list:

<TelerikEditor @bind-Value="@EditorContent">
    <EditorSettings>
        <EditorPasteSettings 
                             RemoveAttributes="@( new List<string>() )"
                            >
        </EditorPasteSettings>
    </EditorSettings>
</TelerikEditor>

@EditorContent

@code{
    string EditorContent { get; set; }
}

---

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.

---

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.

At the moment, the insertHTML command is a block command - meaning, it will wrap your content in a <p> tag if it is an inline tag (such as an anchor).

I would like to be able to insert inline content as well without it getting wrapped in a block parent.

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

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 ***

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?

Currently, the Insert Image Dialog for the editor labels doesn't look great. the first two seem right-aligned and the second two items seem left-aligned. this screenshot is from the demo site.

Currently, on small devices the Editor tools are wrapped on multiple lines. I'd like to have the tools displayed in a separate menu when they do not fit on a single row.

For example:

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