Unplanned
Last Updated: 30 Dec 2022 07:29 by ADMIN

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
Unplanned
Last Updated: 01 Dec 2022 07:59 by Tom
Created by: Tom
Comments: 0
Category: Editor
Type: Feature Request
2

Please add built-in toolbar tools (buttons) for Cut, Copy and Paste.

The request from our customer is to have similar behavior as typical toolbars in most applications where there is a cut and paste along with the regular keyboard shortcuts.

As the toolbar options typically show the options that are available then one might presume that because cut and paste icons are not present then such a shortcut might not be available either.

Unplanned
Last Updated: 15 Nov 2022 13:50 by Johan
Created by: Johan
Comments: 0
Category: Editor
Type: Bug Report
1

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.
Unplanned
Last Updated: 24 Oct 2022 19:56 by Lance

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.

Completed
Last Updated: 17 Oct 2022 15:01 by ADMIN
Release 2.23.0
Created by: Richard
Comments: 2
Category: Editor
Type: Feature Request
27

It would be great in a future release if we could paste in images from the clipboard.

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

Completed
Last Updated: 12 Oct 2022 07:26 by ADMIN
Release 3.7.0 (09 Nov 2022)
Created by: Stewart
Comments: 5
Category: Editor
Type: Bug Report
3

Highlight an existing hyperlink and click the Insert Hyperlink button. The update button is empty

Unplanned
Last Updated: 11 Oct 2022 14:16 by Miroslav
Created by: Miroslav
Comments: 0
Category: Editor
Type: Bug Report
2

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

Unplanned
Last Updated: 11 Oct 2022 14:13 by Miroslav

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

Planned
Last Updated: 30 Sep 2022 15:03 by ADMIN
If a TelerikEditor and TextArea are hosted in a Form and both are bound to the same value, changing the value of the TextArea will not update the value of the Editor. Changing the value of the editor will change the value of the textarea. 
Unplanned
Last Updated: 15 Sep 2022 07:50 by ADMIN
I'm trying to use the Blazor editor but the "Insert Image" function is very basic. Previously using Webforms & Core the insert image in the editor presented the user with a file management and image upload popup. Is this functionality available with the Blazor component?
Unplanned
Last Updated: 16 Aug 2022 12:30 by Joe
The bottom border of the tabstrip item is not hidden as expected when the component is hosted in a Modal window.
Unplanned
Last Updated: 04 Aug 2022 21:58 by Tom

Hello,

Please allow standard form elements in the Editor content:

  • <button> tags
  • <input> tags (textboxes, checkboxes, buttons, radio buttons)
  • <textarea> tags
Unplanned
Last Updated: 03 Aug 2022 15:33 by ADMIN
Created by: Tejinder
Comments: 1
Category: Editor
Type: Feature Request
2

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?

Unplanned
Last Updated: 28 Jul 2022 07:48 by Patrik Madliak
Created by: Patrik Madliak
Comments: 0
Category: Editor
Type: Bug Report
1

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

Unplanned
Last Updated: 05 Jul 2022 11:28 by ADMIN

I upgraded my Blazor UI package to 3.3.0 to try and get rid of the multiple tbody issue with adding a table.  Now there is an even weirder problem.  Adding a table with two columns via setting the Editor's value in the code block is causing several table cells to get inserted in between and around the desired ones.

This is my long html string:

<div style="padding:20px;text-align:center;">
<table style="width:100%;"><tbody>
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2019</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1"><p style="text-align: right"><strong>AMOUNT DUE</strong></p></td>
				        <td colspan="1"><p style="text-align: left">$562.35</p></td>
					</tr>
					<tr>
				        <td colspan="1"><p style="text-align: right"><strong>5% PENALTY</strong></p></td>
				        <td colspan="1"><p style="text-align: left">¤28.12</p></td>
					</tr>
					<tr>
				        <td colspan="1"><p style="text-align: right"><strong>INTEREST DUE</strong></p></td>
				        <td colspan="1"><p style="text-align: left">¤129.34</p></td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>LATE FEE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">$105.00</p>
						</td>				        
			        </tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤824.81</p>
						</td>
					</tr>	
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2020</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: right"><strong>AMOUNT DUE</strong></p>
						</td>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: left">¤323.34</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>INTEREST DUE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">¤61.43</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤384.77</p>
						</td>
					</tr>					
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2021</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: right"><strong>AMOUNT DUE</strong></p>
						</td>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: left">¤323.47</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>INTEREST DUE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">¤19.41</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤342.88</p>
						</td>
					</tr>					
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
			<tr>
		        <td colspan="1">
			        <p style="text-align: right;color: #3E579A;"><strong>TOTAL DUE</strong></p>
				</td>
		        <td colspan="1">
			        <p style="text-align: left;color: #3E579A;">¤1,552.46</p>
				</td>
			</tr>	
			</tbody>
</table>
</div>
		

This is the result:

At this point I am having to downgrade to 3.2.0 in order for it to look anything near what I need it to.

Here is my modal with the Editor component.

<div class="modal fade" id="bill-modal" tabindex="-1" aria-labelledby="bill-modal-label" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-xl modal-fullscreen-lg-down">
        <div class="modal-content">
            <div class="modal-header">
	                    <h5 class="modal-title" id="redemption-bill-modal-label">Bill</h5>	              	           
	            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <TelerikEditor Id="TheEditor" @ref="@TheEditor" Value="@EditorContent" Tools="@Tools" EditMode="EditorEditMode.Iframe" Class="editor-iframe" Height="800px">
                    <EditorCustomTools>
                        <EditorCustomTool Name="MyCustomTools">
                            <div style="margin-right: 50px">
                                <TelerikButton OnClick="@Print" Icon="print" class="m-1"></TelerikButton>
                                <TelerikButton OnClick="@ExportToPdf" Icon="download" class="m-1"></TelerikButton>
                                <TelerikDropDownList Data="@SupportedExportFormats" @bind-Value="@ExportFormat" Width="auto" class="m-1"></TelerikDropDownList>
                            </div>
                        </EditorCustomTool>
                    </EditorCustomTools>
                </TelerikEditor>
            </div>
        </div>
    </div>
</div>

I'm setting the Value via an exposed method that uses some complicated code to generate that html string above.  I don't think it's necessary to have to strip out the proprietary data and paste that here, but please let me know if that would help resolve this issue.

Thanks.

Completed
Last Updated: 16 Jun 2022 05:55 by ADMIN
Release 3.3.0

When selecting an image, I expect drag handles to show me that an image selection has occurred and that let me resize the image.

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

Unplanned
Last Updated: 24 May 2022 18:08 by ADMIN
Created by: Roland
Comments: 4
Category: Editor
Type: Feature Request
2

I bind the TelerikEditor Value to a property that is reloaded with different unrelated content. The editor keeps the Undo/Redo stack so for the "second" content I can Undo back to the "first" content. I'd like to be able to clear the Undo stack.

Completed
Last Updated: 29 Apr 2022 14:22 by ADMIN
Release 3.3.0

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.

Completed
Last Updated: 29 Apr 2022 12:42 by ADMIN
Release 3.3.0

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

Completed
Last Updated: 29 Apr 2022 09:19 by ADMIN
Release 3.3.0
Created by: Emran
Comments: 0
Category: Editor
Type: Bug Report
2

If I click accidentally click on one of the alignment options, I cannot then unselect it.

===========

ADMIN EDIT

Video of the current behavior attached.

===========

 

1 2 3 4