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:
- Add a table
- Toggle the Editor
- Cells appear taller
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.
Here is a scenario that produces an exception.
- Go to https://demos.telerik.com/blazor-ui/editor/overview
- Select the image in the Editor and resize it using the border / resize handles.
- Keep the image selected and then click the "Insert image" button in the toolbar of the editor. Now the page will crash.
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.
It would be great in a future release if we could paste in images from the clipboard.
*** Thread created by admin on customer behalf ***
Highlight an existing hyperlink and click the Insert Hyperlink button. The update button is empty
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).
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,
Please allow standard form elements in the Editor content:
- <button> tags
- <input> tags (textboxes, checkboxes, buttons, radio buttons)
- <textarea> tags
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?
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()
};
}
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;">
</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;">
</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;">
</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.
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 ***
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.
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.
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
If I click accidentally click on one of the alignment options, I cannot then unselect it.
===========
ADMIN EDIT
Video of the current behavior attached.
===========