Is there any way with KendoReact Editor component to support multiple consecutive spaces? I'd like to be able to preserve exactly what the user types in. For example, if they want to manually type in 4 spaces to indent the first line of their paragraph, i'd like to preserve that. The default behavior of the form is to trim all leading and trailing whitespace, and if there are multiple spaces between words, it will condense those to a single space.
So in my example of manually typing 4 consecutive spaces to indent the first line of a paragraph, I would like to have the editor convert that to " " which is a every other character. alternatively you could do 4 consecutive tags, but it would probably be more proper to do every other.
7 Answers, 1 is accepted
I tested this in the demo sent in the last ticket and it seems to work.
Could you please take a look at the screenshot and advise if I missed something:
Also, depending on the scenario, a regex can be used to replace the space with a non-breaking space before saving the value to the state.
Regards,
Stefan
Progress Telerik
Rank 1
Hey Stefan,
So this works if you GET the value from the editor. However, if you SET the value, it will trim the consecutive spaces. try this here: https://www.telerik.com/kendo-react-ui-develop/components/editor/content
Enter some text with consecutive or leading or trailing spaces. Press the "Gets Html" button. Then press the "Sets Html" button. Observe that the spaces have been stripped.
Thank you for the clarification.
Please examine the following example about preserving spaces: https://stackblitz.com/edit/react-pawa3z?file=app/main.jsx. The status of the issue can be tracked here: https://github.com/telerik/kendo-react/issues/224.
Regards,
Nikolay
Progress Telerik
Rank 1
Hey Stefan, I'm trying to get this workaround to work as the component loads instead of on a button click. I have not been able to get that to work. See the following example:
https://stackblitz.com/edit/react-pawa3z-dqiajw?file=app/main.jsx
It looks like this.editor.view is not yet populated when componentDidMount executes.
The issue occurs because the internal view of the Editor is still not initialized and it is returned as undefined.
I will research further to check if this is strictly a timing issue or it is something more.
I will let you know as soon as I have more details on this.
Regards,
Stefan
Progress Telerik
After consulting with the developers` team I can provide more details on why this occurs.
The state(the state of the Editor, not the App) that we are setting on the ComponentDidMount event get overwritten by the value passed to the editor. In order to avoid this, instead of using componentDidMount lifecycle method, we can utilize the onMount event of the Editor to set the value initially:
https://www.telerik.com/kendo-react-ui/components/editor/api/EditorProps#toc-onmount
This is the modified example:
https://stackblitz.com/edit/react-pawa3z-aq5dnx?file=app/main.jsx
Once the issue opened by my colleagues is fixed, this will not be needed, as we consider adding a property to control the space trim.
Regards,
Stefan
Progress Telerik
Rank 1