Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 27 Jul 2023 07:52 by ADMIN
Daniel
Created on: 20 Apr 2023 14:07
Category: KendoReact
Type: Bug Report
1
Editor insert table

Issue 1:

I've implemented insert table tool in the editor and I'm setting some states on editor blur. The bug appears when the editor is focused and I try to add a table. When I select the rows and cols from the dropdown  and click to insert the table the editor blur is called my setStates are called and somehow the table insertion doesn't happen. In order to add the table I should not focus the editor and I have to click on the insert table button and select again the cols and rows.

Issue 2:

In the same editor I've added tableResizing plugin. The bug appears when I already have a table in the editor and open the insert table dropdown to add a new one. In that moment when the dropdown is still opened I hover over some of the already inserted table cells borders the insert table dropdown is closed.

Issue 3:

When the editor is controlled we have undefined as initial value and then we type something or try to add table for example the editor crashes and throw an error `Uncaught RangeError: Applying a mismatched transaction`. Even though the value type allows undefined EditorProps.value?: string | Node | undefined. It works fine though if the initial value is empty string.

 

Package
"@progress/kendo-react-editor":"^5.11.0 | 5.12.0"

Minimal reproduction
I'm providing an vite + react + ts project. Steps to run the project:
npm install
npm run dev

It's reproducible in the provided examples in StackBlitz from Kendo, but the editor packages are not always resolved with turbo package manager. I guess it's the same issue as https://github.com/telerik/kendo-react/issues/1530

 

 

Attached Files:
7 comments
Daniel
Posted on: 29 May 2023 12:55

Hi Konstantin,

Please describe the fix for the yarn issue under my github ticket just for a reference if someone has the same issue and you can close it.

 

About the blur the other dropdowns (font size, font family etc.) they steal the focus but when you choose some option from them the changes are applied as expected even when the editor is not focused. I guess it's because we have some text marked and that is saved in the editor config. But for the add table button this is not the case because the focus stays in the editor after the button was pressed and it is stolen when we select some option from the dropdown. I hope that you will find a way to unify the behavior of all dropdowns in the editor.

ADMIN
Konstantin Dikov
Posted on: 25 May 2023 14:18

Hello Daniel,

Regarding the issue for the error when multiple columns are selected, this is due a problem with ProseMirror dependencies when using yarn. Adding resolutions in package.json for the ProseMirror package should resolve the error in question. More information can be found in the following KB article (although that the error is different, the solution is the same):

As for the onBlur issue, going again through the scenario, using the setTimeout will be mandatory in all cases, so that the internal state of the component can be updated before submitting the changes. As for the difference in the behavior of the tools in regards of the focus, there are other tools with popups that cause the focus to be lost and the onBlur event to fire (like the font change). The problem with the popup elements is that sometimes they are rendered outside of the Editor element (within the "body" element), which means that the focus is in fact moved outside of the DOM element of the Editor. Nevertheless, I do agree that there should be consistency as much as possible, so we will take a look at this as well. 

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Daniel
Posted on: 18 May 2023 15:58

Hi Konstantin,

 

About the editor packages issue you can read more in the below ticket. Even though the bug was confirmed the ticket was completed. That is why I've created the github issue.
https://feedback.telerik.com/kendo-react-ui/1601181-rich-text-editor-table-throws-an-error-when-selecting-multiple-columns

 

Regarding the blur issue I've tried the approach with activeElement but it still needs to be wrapped in setTImeout in order to work as expected. It's valid workaround for now but we will stick to our solution which is to preventDefault on mouseDown when the create table dropdown is clicked in order not to steal the focus from the editor. I guess this is how the other buttons are implemented cuz when I click on any other button they don't steal the focus of the editor. And this should be the correct bevaiour in my opinion. The editor should be blurred when the focus moves outside the editor - I count the whole toolbar as part of the editor.


 

 

 

 

ADMIN
Konstantin Dikov
Posted on: 09 May 2023 09:42

Hi Daniel,

Regarding the errors in the example, after some tests I was able to replicate a "Cannot read properties of undefined (reading 'localsInner')" error. I have noticed that after removing the tableResizing plugin the error was no longer observed, so it is most likely related to it. On that note, after consulting with the developers team it seems that they have replaced the Prose Mirror resizing tool with a custom one, so it is within our domain and a developer will look into it. 

Regarding the issues within the onChange and onBlur, the main idea of the suggestion was to allow enough time for the Editor to apply the changes, before setting the state or submitting the changes. With that in mind, the logic for setting the state and submitting must be placed within a setTimeout. Updating the state from within the Editor's onBlur event will prevent the new state of the editor to be set internally. Another suggestion on this matter that we can give (instead of the setTimeout) is to check what is the new focused element on the page within the onBlur event and if the active element is still within the Editor, you can skip the update.

Moving to the "value" property. The property is optional for the uncontrolled mode and with controlled mode the value could not be undefined (since with controlled mode it is not optional anymore).

For issues 4 and 5 we have tested the scenarios and we can confirm that they are bugs and we will log issues for both of them.

Regarding issue 6, we have to say that this is made that way by design and it follows the common behavior in this scenario from other editors (and MS Word as well). The purpose of this behavior is to cover the scenarios where parts of the selection that will be changed to h1, h2, etc. have predefined font-size and that font size will be preserved after changing the type.  

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Daniel
Posted on: 02 May 2023 12:26

Hi Konstantin,

When I try to add a table or do something else with the table from the provided link it crashes. I guess the packages are not properly resolved (https://github.com/telerik/kendo-react/issues/1530). So I've tested it locally on my project.

 

In the first issue I've provided the minimal way that the bug can be reproduced. But given the feedback I've received I had to update my reproduction project with the more real case scenario to our project where onChange we emit onValueChange and onBlur we emit onSubmit event and we are also setting a state. With these changes setTimeout is no longer a valid workaround.

We came up with a workaround but it's not that prominent and we would be happy if we can remove it, when the issue is fixed or more prominent workaout is provided.

 

About the second issue I guess you can raise an issue on ProseMirror side so they can handle it.

 

About the third one the value is optional which means it can accept undefined and it could not be only Node | string.

/**
 * The value of the Editor.
 */
value?: Node | string;

 

I found also couple more issues. I'm not sure if here is the right place or I have to create a new ticket but I'll describe them here and if needed I will create a new one.

 

Issue 4

When we have an ordered or unordered list and we want to switch between them and the editor is controlled I have to click two times on the same button. First time to remove the list and the second time to apply it. If the editor is not controlled this happens from the first time.

 

Issue 5
When we have an ordered or unorderd list and we want to align them (center align, right align  etc.) the dots/numbers are not moving with the text. They stay on the left side. I saw that in KendoJquery they're working as expected.

 

Issue 6
When we have a text(paragraph) which has choosen font size from the font size dropdown - for example 18px - and we want to make it Heading 1 the font size from the Heading 1 doesn't override the already choosen font size. In the screenshot the heading1 text should be the same as heading2

 

Minimal reproduction
I'm providing an vite + react + ts project. Steps to run the project:
npm install
npm run dev

Attached Files:
ADMIN
Konstantin Dikov
Posted on: 27 Apr 2023 09:34

Hi Daniel,

Just a quick follow up with the correct example (the previous one was not saved correctly):

Regards,
Konstantin Dikov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Konstantin Dikov
Posted on: 27 Apr 2023 09:30

Hi Daniel,

Thank you for contacting us.

Regarding the first issue, if you are using the onBlur event to update the state, this could fire the event before the value within the Editor adds the table, so I would suggest that you add a setTimeout function within the blur event, so that there is time for the value to include the table:

    onBlur={() => {
      setTimeout(()=>{ 
        setCounter(counter + 1)
      },100)      
    }}

Regarding the second issue, the tableResizing plugin is from ProseMirror (https://github.com/ProseMirror/prosemirror-tables) and it seems that the plugin is forcing the create table popup to close and I have to say that we do not have control over this behavior.

For the final issue, the value property of the Editor accepts string or Node only and will fail when undefined is set to it: 

    /**
     * The value of the Editor.
     */
    value?: Node | string;

 

Best Regards,
Konstantin Dikov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category