RichTextArea losing focus on color selection

[ruds]

Hello there,
i have the following situation:
a RichtextArea with a toolbar to style the text.
within the toolbar there is a button for a color palette which is a
popup with a grid in it.

i have done an Event listener for the toolbar items so to keep the
RichtextArea focused all the time when playing with the toolbar menu.
Except for the color palette which is making a problem when clicking
on the cell to select the color.

although the table listener is implemented in the Event Listener which
is an inner class as advised by the example done in kitchen sink
/**
* We use an inner Event Listener class to avoid exposing event
methods on the
* RichTextToolbar itself.
*/
Now when selecting the color everything is working fine except when i
have a text selected and i need to change the color of it. i have
realized that when clicking on the cell i am losing the focus of the
RichTextArea and thus losing my selection of the text.
how can i prevent losing the focus on the selected text?
any suggestions/advice?

regards,
ruds

[Sumit Chandel]

Hi ruds,

Here's a suggestion that could work. I haven't tried it out myself, but it could be worth a try.

The first thing you would need to do is prevent the loss of focus from the selected text in your RichTextArea when the user clicks on a cell in the colour palette. You might be able to prevent the loss of focus by calling the DOM.eventPreventDefault() method whenever the click event on the colour palette cell occurs.

The other part of the problem is somehow retrieving the selected text so that you can apply the select colour to it. This could be done by retrieving the selected text at the moment of the click on the colour palette cell. You should be able to accomplish this by writing a quick JSNI method that returns the currently selected text. As a precondition to actually changing the selected text colour, you might also want to verify that the selected text is indeed contained in the RichTextArea.

Give it a try and let us know how it goes.

Hope that helps,

-Sumit Chandel

[rudolf michael]

Hello Sumit,
Thx for your reply, actually i only had this bug over IE. it is working over FF.
the workaround was using JNSI which i really try to avoid when building my modules.

public native JavaScriptObject getRange(Element element)/*-{
    if(element.contentWindow.document.selection){
        return element.contentWindow.document.selection.createRange();
    }else {
        return null;
        }
    }-*/;
  public native void setSelection(JavaScriptObject selection)/*-{
        var range = selection;
        range.select();
    }-*/;
i am keeping a reference of the Range JavaScript object when clicking on the image icon to pop the dialogbox.
if(sender == colorChooser){
              selection = getRange(richText.getElement());
              kcp.setPopupPosition(sender.getOffsetWidth() + sender.getAbsoluteLeft(), sender.getOffsetHeight() + sender.getAbsoluteTop());
            kcp.show();
      }

when i am hiding the pop up i am using set Selection before setting the color and it is working fine now.

 public void onCellClicked(SourcesTableEvents sender, int row, int cell) {
        String selectedValue = "#"+kcp.getColorsArr()[row][cell];
        System.out.println("SELECTED COLOR="+selectedValue);
        if(selection != null){
            setSelection(selection);
        }
        basic.setForeColor(selectedValue);
        //foreColors.setSelectedIndex(0);
        kcp.hide();
 }
this method is also implemented in the Inner Class EventListener  which i have made it implement TableListener

Thank you very much for your support.

regards,
ruds