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.
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()
};
}
Description
Regression introduced in v9.0.0.
Initial binding to a property works, but when either the RemoveAttributes or the StripTags parameter is set, on changing the Editor value, two-way binding does not work and the new Editor value is not reflected in the property value.
Potentially related to #3887
Steps To Reproduce
- Run the following example:
<p role="status">Current Editor value: @CurrentEditorText</p>
<TelerikEditor @bind-Value="@CurrentEditorText">
<EditorSettings>
<EditorPasteSettings ConvertMsLists="@true"
RemoveAllAttributes="@true"
RemoveAttributes="@(new List<string> { "lang" })"
RemoveHtmlComments="@true"
RemoveMsClasses="@true"
RemoveMsStyles="@true"
StripTags="@( new List<string> { "h1" })">
</EditorPasteSettings>
</EditorSettings>
</TelerikEditor>
@code {
private string CurrentEditorText { get; set; } = @"<strong>initial</strong><span>value</span>";
public List<string> RemoveAttributes { get; set; } = new List<string>() { "data-id" };
public List<string> StripTags { get; set; } = new List<string>() { "font" };
}
- Type in the Editor's content area
Actual Behavior
The CurrentEditorText property value is not updated.
Expected Behavior
The CurrentEditorText property value is updated.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
8.1.1
---
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; }
}---
Description
After the user selects a color in the color tools, the popup does not close automatically. The user has to click on the Editor's toolbar for the popup to close.
Steps To Reproduce
- Run this example: https://blazorrepl.telerik.com/GTYXPsFv59loxN7v37
- Highlight a word in the Editor's content and use the color tools. Change either the text color or the background color.
Actual Behavior
After selecting a color, the color tool's popup remains open.
Expected Behavior
The color tool's popup closes.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
No response
When the Editor is disabled, the user can still focus it by tabbing and edit the content. The issue occurs in both Div and Iframe EditMode.
Click on the textbox and press TAB:
<input type="text" tabindex="0" />
<TelerikEditor Enabled="false"
EditMode="@EditorEditMode.Div"
Height="200px" />
When you create or paste a table, you cannot move the cursor outside of it if there is no other content in the Editor.
----------ADMIN EDIT----------
Here is a possible workaround when using InsertTable() tool:
@using Telerik.Blazor.Components.Editor
<TelerikButton OnClick="@InsertTable">Insert Table</TelerikButton>
<TelerikEditor @ref="@TheEditor" Value="@TheContent" ValueChanged="@ValueChangedHandler"></TelerikEditor>
@code {
TelerikEditor TheEditor { get; set; }
string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";
void ValueChangedHandler(string value)
{
var checkEnd = value.EndsWith("</table>");
TheContent = checkEnd == true ? value + "<p></p>" : value;
}
async Task InsertTable()
{
await TheEditor.ExecuteAsync(new TableCommandArgs(4, 4));
}
}Steps:
- Use the Editor's ValueChanged event.
- See if the value ends with a closing </table> tag.
- Append an empty paragraph to the Editor value - "<p></p>".
However, when we try to insert for example, an "<input />" element via a Custom Tool and the ExecuteAsync method. It doesn't work.
When adding an icon such as <i class="fa-light fa-envelope"></i> (the format which FontAwesome recommends), the icon's HTML disappears upon saving. We figured this was maybe due to the type of tag used (the i tag), so we tried using a div instead (<div class="fa-light fa-envelope"></div>). This div is not stripped from the HTML but the icon is not rendered.
Please allow inserting icons in the Editor content.
In fashion similar to the following example for the React editor that's done through the onMount ReactJS-specific event: https://www.telerik.com/kendo-react-ui/components/editor/plugins/#popup-tools
More on plugins for ProseMirror: https://prosemirror.net/docs/ref/version/0.20.0.html#state.Plugin_System
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).
===
Telerik edit: This was a ProseMirror issue, which was fixed on their side. Changes took effect in Telerik UI for Blazor 5.0.0.
If the editor's HTML markup contains inline CSS styles, and a CSS attribute value includes a semicolon (;), it breaks the applied styles and throws an exception.
For example:
<p style= "" ....background-image: url('data:image/png;base64...;""</p>The exception is:
Uncaught TypeError: Cannot read properties of undefined (reading 'trim')
=== ADMIN EDIT ===
The issue can also occur when there is an invalid inline style with two semicolons without a complete style-value pair in-between.
For example:
<p style=""color:red; b ;"">sdf</p>
Please expose the ability to allow additional HTML attributes in the Editor content.
===ADMIN EDIT===
Provide support for:
- custom attributes for the Editor elements
- custom tags
It would be nice to have an ability to group CustomTool / icons much like we can do EditorButtonGroup(s) - e.g.
new CustomToolGroup (new CustomTool("Save"), new CustomTool("Import"), new CustomTool("Export"))
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
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.