Like other editors from Telerik (say, Kendo, WebForms).

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

I couldn't find the Preview Tool button in the Editor.

Please help me with that, how can I add that functionality into the Editor?

If a user creates an unordered list and then decides to switch to an ordered list, they can do it simply by clicking on the "Insert Ordered List" button and vice versa.

However, if the list another list nested within it, the action either does not work or exhibits weird behavior. Please have a look at the attached example project containing the editor and a sample nested list string.

1. Placing your cursor within the outer ordered list highlights the "Insert Ordered List" button. Clicking on the "Insert Unordered List" button will either fail, create a weird intermediate level only for the item currently containing the cursor, or only change the item currently under the cursor.

2. Attempting to highlight the entire list will also highlight both the Insert List buttons. Clicking on Insert Ordered List will flatten the whole thing into paragraphs. Clicking on Insert Unordered List will mess up the list.

I expect the editor should more or less work similarly to the form in which I'm typing this message.

I'm using the Editor in a form along with several other inputs (e.g. TextBox, NumericTextBox).

If the user enters an invalid value for the other inputs, they get a red border. The Editor, however, does not have such a border when its value is invalid and thus the form elements are not consistent. Please add a red border for the invalid state of the Editor, too.

===

ADMIN EDIT

===

At this stage, the Editor is not treated as a standard input and it does not support all of the input's capabilities - such as invalid state, disabled state, sizing, fill and more.

The current request may potentially be part of a bigger design story that strives to align the Editor's functionalities with the rest of the inputs ( TextBox, NumericTextBox and more).

---

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; }
}

---

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()
        };
}

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

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.

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.

For example, like the AJAX editor where the field appears only when simple text is selected, but when complex content is selected (e.g., other html tags like <strong>, <p>, <img>) the field is not available.

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

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.

In Editors that use the ProseMirror engine (including non-Telerik), when you click Enter twice in the middle of formatted text and go back (with an up arrow) to write, the new text format is back to default.

This enhancement will allow you to keep the text format after pressing Enter and creating new block elements.

Hello,

We are adding references to other documents via a drag an drop over the text as a superscript hyperlinks. Our users are complaining that when we drag and drop onto the Blazor editor control, it is hard to see exactly where the drop is going to be.

The Kendo UI Editor supports this.

I have the following command

await _editorRef.ExecuteAsync(new HtmlCommandArgs("insertHtml", "<hr class='donotremove' />", false));

Currently, the <hr/> element is added but its class is stripped. This is not the case with other elements. 

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

Please allow adding class to <hr/> elements, too.

Description : 
When you click before the content in the Editor, the cursor should show up before the text. But, if a text was added programmatically, the cursor shows up after the added text instead.

To reproduce the problem :

1. Open this REPL example: https://blazorrepl.telerik.com/cdYpPabd37jvK9jt23

2. Click the "Insert Inline Text" button.

3. Try to place the cursor in front of the editor content.