I can't get RichTextAre OnPaste Event hooking|sinking to work?

[Brandon Donnelson]

I'm trying to observe the OnPaste Event but can't seem to hook it into the RichTextArea and not sure why yet.

http://code.google.com/p/gwt-examples/source/browse/trunk/GoneVertical-Core/src/org/gonevertical/core/client/input/richtext/WiseRichTextArea.java#178 - source (snippet below)

     // deal with messy pasting
    /**
     * TODO - No Worky - iframe? I see the ook events in the RichTextAreaImpl and how come I can't hook them in here?
     */
    sinkEvents(Event.ONPASTE); // TODO ? no worky
    DOM.sinkEvents(getElement(), Event.ONPASTE); //TODO ? no worky
    
    //sinkEvents(Event.ONKEYUP);

    /**
     * TODO this won't work either, b/c it won't capture once focued on richtextarea  
     */
    Event.addNativePreviewHandler(new NativePreviewHandler() {
      public void onPreviewNativeEvent(NativePreviewEvent event) {
        NativeEvent ne = event.getNativeEvent();
        if (event.getTypeInt() == Event.ONPASTE) {
          System.out.println("Pasting?????");
          Window.alert("works");
        }
        System.out.println("event.toDebutString()=" + event.toDebugString() + " ne.getType=" + ne.getType() + " ne.toString=" + ne.toString() + " charCode=" + ne.getCharCode() + " key=" + (char)ne.getCharCode());
      }
    });

Has anybody hooked the onpaste event onto richtextarea? 

Thanks 

Brandon Donnelson

http://gwt-examples.googlecode.com

[darkflame]

I was trying to work this out a few months back but gave up.
If anyone has a answer Id be interested too hear as well.

I suspect somehow you have to tie it to the inner iframes DOM, but I
dont know how to do that.
(in fact, not even sure if you can get the inner DOM of a iframe :-/)

On Oct 30, 4:30 pm, Brandon Donnelson <branflake2...@gmail.com> wrote:
> I'm trying to observe the OnPaste Event but can't seem to hook it into the
> RichTextArea and not sure why yet.
>

> http://code.google.com/p/gwt-examples/source/browse/trunk/GoneVertica...

[Brandon Donnelson]

I setup the source to look deeper and I'm looking at the source to see how the build it. I'm looking at two approaches to get to the iframe, one try accessing it through JSNI, find the iframe in the DOM..., 2, find how the source is passing events through the iframe and replicate that with onpaste. 3. keep trying... :) My goal is to intercept the onPaste event any way I can in the iframe.

One thing that still puzzles me is, how do they get the cursor to blink in that iframe/(RichTextArea Element). I don't see where they attach any input elements. The textarea element they use looks like a container for transport only. Is there a trick to blink the cursor in innerHTML? I inspect the element and its either not picking up something b/c of focus or I'm missing the boat still.

Either way, I intend to figure out a way to paste word document (text) with no formatting into the RichTextArea and which means I have to figure out how to catch OnPaste Events and access ClipBoardData API(s) in the browser. 

I'll be glad to share the results after I figure it out. Thanks for the reply.

Brandon Donnelson

http://gwt-examples.googlecode.com

[darkflame]

As I suspected, your trying to solve the exact same problem I had.
People pasteing from Word into my app produced a crazy amount of junk
formating I wanted to get rid of ;)

I managed to deal (more or less) with it in normal TextBox's, but not
RTF.

Btw, if you run into an Opera compatibility issue with OnPaste, dont
worry about it. The browser doesnt seem to support it.....but it
strips away formating data itself anyway!

[Brandon Donnelson]

So far I found where I can intercept the Paste event:

// RichTextAreaImplSafari.java source hack
  @Override
  protected native void hookEvents() /*-{
    var elem = this.@com.google.gwt.user.client.ui.impl.RichTextAreaImpl::elem;
    var wnd = elem.contentWindow;

    elem.__gwt_handler = function(evt) {
      if (elem.__listener) {
        if (@com.google.gwt.user.client.impl.DOMImpl::isMyListener(Ljava/lang/Object;)(elem.__listener)) {
          @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/EventListener;)(evt, elem, elem.__listener);
        }
      }
    };
    
    elem.__gwt_test = function(evt) {
      alert('pasted');
      __gwt_handler(evt);
    };
    wnd.addEventListener('paste', elem.__gwt_test, true);
    
    alert('I loaded');

    wnd.addEventListener('keydown', elem.__gwt_handler, true);
    wnd.addEventListener('keyup', elem.__gwt_handler, true);
    wnd.addEventListener('keypress', elem.__gwt_handler, true);
    wnd.addEventListener('mousedown', elem.__gwt_handler, true);
    wnd.addEventListener('mouseup', elem.__gwt_handler, true);
    wnd.addEventListener('mousemove', elem.__gwt_handler, true);
    wnd.addEventListener('mouseover', elem.__gwt_handler, true);
    wnd.addEventListener('mouseout', elem.__gwt_handler, true);
    wnd.addEventListener('click', elem.__gwt_handler, true);

    // Focus/blur event handlers. For some reason, [add|remove]eventListener()
    // doesn't work on the iframe element (at least not for focus/blur). Don't
    // dispatch through the normal handler method, as some of the querying we do
    // there interferes with focus.
    wnd.onfocus = function(evt) {
      if (elem.__listener) {
        @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/EventListener;)(evt, elem, elem.__listener);
      }
    };

    wnd.onblur = function(evt) {
      if (elem.__listener) {
        @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/EventListener;)(evt, elem, elem.__listener);
      }
    };
  }-*/;

Now to see what I can do with it. More to come :)

Brandon Donnelson

http://gwt-examples.googlecode.com

[Brandon Donnelson]

I found a nice hack to get the onpaste to work: I modified the source to try it.

  // my inherited RichTextArea
  public WiseRichTextArea(boolean hideBorderUntilHover, boolean grow) {
    super();
    setup(hideBorderUntilHover, grow);
  }

  private void setup(boolean hideBorderUntilHover, boolean grow) {
    this.hideBorderUntilHover = hideBorderUntilHover;
    this.grow = grow;

    addStyleName("gv-core-WiseRichTextArea");

    setUpEditHover();  

    setupHandlers();

    sinkEvents(Event.ONPASTE);
  }

  @Override 
  public void onBrowserEvent(Event event) { 
    super.onBrowserEvent(event); 
    switch (event.getTypeInt()) { 
    case Event.ONPASTE: 
      System.out.println("Paste Detected"); 
      Window.alert("Paste Works!!! Yippie!!!");
      break; 
    } 
  } 

My hack:

// RichTextAreaImplSafari.java source hack
 @Override
  protected native void hookEvents() 

/*-{

    var elem = this.@com.google.gwt.user.client.ui.impl.RichTextAreaImpl::elem;
    var wnd = elem.contentWindow;

    elem.__gwt_handler = function(evt) {
      if (elem.__listener) {
        if (@com.google.gwt.user.client.impl.DOMImpl::isMyListener(Ljava/lang/Object;)(elem.__listener)) {
          @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/EventListener;)(evt, elem, elem.__listener);
        }
      }
    };    

    wnd.addEventListener('keydown', elem.__gwt_handler, true);
    wnd.addEventListener('keyup', elem.__gwt_handler, true);
    wnd.addEventListener('keypress', elem.__gwt_handler, true);
    wnd.addEventListener('mousedown', elem.__gwt_handler, true);
    wnd.addEventListener('mouseup', elem.__gwt_handler, true);
    wnd.addEventListener('mousemove', elem.__gwt_handler, true);
    wnd.addEventListener('mouseover', elem.__gwt_handler, true);
    wnd.addEventListener('mouseout', elem.__gwt_handler, true);
    wnd.addEventListener('click', elem.__gwt_handler, true);

    // Whats needed . this works.
    wnd.addEventListener('paste', elem.__gwt_handler, true);

    // Focus/blur event handlers. For some reason, [add|remove]eventListener()
    // doesn't work on the iframe element (at least not for focus/blur). Don't
    // dispatch through the normal handler method, as some of the querying we do
    // there interferes with focus.
    wnd.onfocus = function(evt) {
      if (elem.__listener) {
        @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/EventListener;)(evt, elem, elem.__listener);
      }
    };

    wnd.onblur = function(evt) {
      if (elem.__listener) {
        @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/EventListener;)(evt, elem, elem.__listener);
      }
    };
  }-*/

;

I'll submit all the source tomorrow.

Brandon Donnelson

http://gwt-examples.googlecode.com

[darkflame]

Fantastic work!
I cant try it out right now, but I've bookmarked for later.
This is going to be VERY usefull.

You might also have been the first guy online to work this out based
on my (long) Googleing on this over the last month or so ;)

>     var elem = th...@com.google.gwt.user.client.ui.impl.RichTextAreaImpl::elem;

>     var wnd = elem.contentWindow;
>
>     elem.__gwt_handler = function(evt) {
>       if (elem.__listener) {

>         if (@com.google.gwt.user.client.impl.DOMImpl::isMyListener(Ljava/lang/Object;)­(elem.__listener)) {
>           @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/­Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/Event­Listener;)(evt, elem, elem.__listener);

>         }
>       }
>     };    
>
>     wnd.addEventListener('keydown', elem.__gwt_handler, true);
>     wnd.addEventListener('keyup', elem.__gwt_handler, true);
>     wnd.addEventListener('keypress', elem.__gwt_handler, true);
>     wnd.addEventListener('mousedown', elem.__gwt_handler, true);
>     wnd.addEventListener('mouseup', elem.__gwt_handler, true);
>     wnd.addEventListener('mousemove', elem.__gwt_handler, true);
>     wnd.addEventListener('mouseover', elem.__gwt_handler, true);
>     wnd.addEventListener('mouseout', elem.__gwt_handler, true);
>     wnd.addEventListener('click', elem.__gwt_handler, true);
>
>     // Whats needed . this works.
>     wnd.addEventListener('paste', elem.__gwt_handler, true);
>
>     // Focus/blur event handlers. For some reason, [add|remove]eventListener()
>     // doesn't work on the iframe element (at least not for focus/blur). Don't
>     // dispatch through the normal handler method, as some of the querying we do
>     // there interferes with focus.
>     wnd.onfocus = function(evt) {
>       if (elem.__listener) {

>         @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/­Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/Event­Listener;)(evt, elem, elem.__listener);

>       }
>     };
>
>     wnd.onblur = function(evt) {
>       if (elem.__listener) {

>         @com.google.gwt.user.client.DOM::dispatchEvent(Lcom/google/gwt/user/client/­Event;Lcom/google/gwt/user/client/Element;Lcom/google/gwt/user/client/Event­Listener;)(evt, elem, elem.__listener);

[Brandon Donnelson]

I ripped the source out so I could create the work around needed for a project. I'll submit a issue later.

http://code.google.com/p/gwt-examples/source/browse/#svn%2Ftrunk%2FGoneVertical-Core%2Fsrc%2Forg%2Fgonevertical%2Fcore%2Fclient%2Finput%2Frichtext%2Fworkaround - I just added to the hookEvents(). I also changed all the imports and native code to reflect new location. 

More tomorrow.

Brandon Donnelson

http;//gwt-examples.googlecode.com

[Brandon Donnelson]

Oh yea, I forgot to say thanks :)

[Brandon Donnelson]

I have solved the word data pasting problem. Wahoo! Now to set it up in a demo. 

http://code.google.com/p/gwt-examples/source/browse/trunk/GoneVertical-Core/src/org/gonevertical/core/client/input/richtext/WiseRichTextArea.java#179

Brandon Donnelson 

http://gwt-examples.googlecode.com

[Brandon Donnelson]

Oops, I'm not there yet. I'm reworking it. 

I'm not doing it correctly yet, but very close. I think I need set it back to the clipboard as regular text, so it will insert instead of replace.

Brandon

[Brandon Donnelson]

[Brandon Donnelson]

Here is my latest rendition. I can't find a perfect solution due to mozilla clipboard data access. But I found a workaround using doubleclick on the RichTextArea. I want to add later, a warning for firefox pasters. So far this is what I have. 

http://code.google.com/p/gwt-examples/wiki/DemoGWTTextBoxExpander?ts=1320507261&updated=DemoGWTTextBoxExpander - wiki with demo and source

http://code.google.com/p/gwt-examples/source/browse/#svn%2Ftrunk%2FGoneVertical-Core%2Fsrc%2Forg%2Fgonevertical%2Fcore%2Fclient%2Finput%2Frichtext%2Fworkaround - workaround

http://demogwttextexpand.appspot.com/ - demo 

[darkflame]

Funny, thought I replied to this :-/

Anyway, fantasic work.
I did a quick implementation in my app and found the following:

Chrome - works flawlessly. At least data cut and paste from open
office is stripped clean nicely.
Firefox - as expected, workaround needed.
Opera - unfortuntely data isnt stripped :-/ (completely contradicting
what I read on their forums...must have been out of date).

The work around popup does have some issues for me...my Richtext box
is already a popup and it appears under it. I guess this can be fixed
with a basic zIndex.

Anyway, once again, great work, supprised its not getting more
attention.

On Nov 5, 4:53 pm, Brandon Donnelson <branflake2...@gmail.com> wrote:
> Here is my latest rendition. I can't find a perfect solution due to mozilla
> clipboard data access. But I found a workaround using doubleclick on the
> RichTextArea. I want to add later, a warning for firefox pasters. So far
> this is what I have.
>

> http://code.google.com/p/gwt-examples/wiki/DemoGWTTextBoxExpander?ts=...

> - wiki with demo and source
>

> http://code.google.com/p/gwt-examples/source/browse/#svn%2Ftrunk%2FGo...
> - workaround
>
> http://demogwttextexpand.appspot.com/- demo

[Brandon Donnelson]

Interesting. Thanks for the info. 

Its been a challenge to try to get an elegant ui solution implemented. Due to the Clipboard API access via the dom in most platforms implementing a solution easily sucks. As far as I can tell, implementing a paste into rich text is going to be impossible, that is, if the security is enabled b/c there is no access to the clipboard api.

I aim to keep tuning workarounds to see what I can get to work efficiently for all the browsers. I imagine it will be a slow process... 

Have a good day,
Brandon Donnelson

c.gawkat.com

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.