Custom rich text area...

Vaadin 6 / 7 / 8
1

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

2

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.