Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Custom rich text area...
Hello friends. I need to implement a custom rich text component. My idea is to reuse TinyMCE there, disable original controls of the component and use mine ones. I know I could extend the TinyMCE component, add there some buttons which I desire to see. But I have no complete idea what buttons should be there, and if they should be there where they are now.
So. My problem is, that I can't control the caret position of the area component when I send update text rpc calls to server. I have simple enough scene at my example and almost empty callback for the update event.
What did I try:
1) I had empty update callback - it seems like something is happening with focus and caret of text area jumps randomly. So if you type there fast enough it brings you difficulties.
2) I tried to use simpliest contenteditable div - I had the same problem: cursor changes it's position when vaadin rpc callback comes to the client's world.
3) I tried some other JS libraries thinking that the problem is in my blameful code, which brakes cursor position because I cant handle the diffuciltiness of contentEditable attribute. I had the same problem there with my caret.
It is bieng moved away because of some framework loginc that I cant understand at the moment.
At the same time there is original Vaadin's RichTextArea that works like a charm. This coponent interacts with client side through implementing LegacyComponent's logic which came from Vaadin 6.
I started to learn Vaadin when it was 7.5.x so I can hardly find docs about client side development for 6th version. I suppose that I should not.
Anyway it is clear that I should make some rpc calls from time to time to sinchronyze client-side part of the component with it's server-side part. I do it with setInterval logic now (using gwt Timer). I should do the same things as updating Legacy variables of component.
Can't find how to fix my problem. Please help me. I have my project at GH. It is a bit dirty as I tried much things having less time. https://github.com/asdnf/tokeneditor.git
Answering my question.
There was a piece of code where I update the state of client-side component's content.
@Override
public void onStateChanged(StateChangeEvent stateChangeEvent) {
super.onStateChanged(stateChangeEvent);
//getWidget().setHtml(getState().value);
taskProcessor.scheduleTask(UpdateTaskProcessor.Task.COMMON_UPDATE);
}
The commented out line is the problem. It always updates the content of the component braking cursor position. If I remove that line I need to make some mechanism that will properly update state of my component when it's being updated on server side. Sad mistake.