Is it possible to use the new Clipboard API in a GWT app? It depends on document.hasFocus being true.

875 views
Skip to first unread message

Jim Douglas

unread,
Oct 15, 2019, 4:40:04 PM10/15/19
to GWT Users
Ok, there are a few moving parts to this. Keeping it as short as possible, this is the new Clipboard API:


Support is extremely limited at the moment, but for now I'd be happy to get something working in Chrome:


Here's Google's live sample page:


For obvious reasons, there's a lot of paranoid security around JavaScript access to the clipboard. This is the specific detail I'm running into:


These APIs throw a security exception if document.hasFocus() is false. And I'm not seeing any way to honour that rule in a GWT app. In my production app, and in a tiny standalone GWT app I just generated for testing purposes, document.hasFocus() is always false ($doc.hasFocus() is true).

For testing purposes, I generated the GWT StockWatcher demo app:


Then I added some UI hooks for clipboard testing elements in StockWatcher.html:

    <h1>Web Application Starter Project</h1>


    <table align="center">

      <tr>

        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        

      </tr>

      <tr>

        <td id="nameFieldContainer"></td>

        <td id="sendButtonContainer"></td>

      </tr>

      <tr>

        <td colspan="2" style="color:red;" id="errorLabelContainer"></td>

      </tr>

      <tr>

        <td id="readTextField"></td>

        <td id="readTextButton"></td>

      </tr>      

      <tr>

        <td id="writeTextField"></td>

        <td id="writeTextButton"></td>

      </tr>

    </table>


And minimal testing UI in StockWatcher.java onModuleLoad:

        TextBox readText = new TextBox();

        readText.setText("readText");

        Button readTextButton = new Button("readText");


        TextBox writeText = new TextBox();

        writeText.setText("writeText");

        Button writeTextButton = new Button("writeText");

        

        RootPanel.get("readTextField").add(readText);

        RootPanel.get("readTextButton").add(readTextButton);

        

        RootPanel.get("writeTextField").add(writeText);

        RootPanel.get("writeTextButton").add(writeTextButton);


        readTextButton.addClickHandler(new ClickHandler()

        {

            public void onClick(ClickEvent event)

            {

                readText();

            }

        });

        

        writeTextButton.addClickHandler(new ClickHandler()

        {

            public void onClick(ClickEvent event)

            {

                writeText(writeText.getText());

            }

        });


And corresponding JSNI functions to attempt to invoke the Clipboard API:

   

    public native void readText()

    /*-{

        try

        {

            if (navigator.clipboard)

            {

                console.log('navigator.clipboard.readText()');

                console.log('document.hasFocus()='+document.hasFocus());

                console.log('$doc.hasFocus()='+$doc.hasFocus());

                var promise = navigator.clipboard.readText();

                var resolve = function(text) {

                    console.log(text);

                };

                var reject = function(reason) {

                    console.log('navigator.clipboard.readText failed: '+reason);

                };

                promise["catch"](reject);

                promise.then(resolve,reject)["catch"](reject);

            }

            else

            {

                console.log('This browser does not support navigator.clipboard.');

            }

        }

        catch (e)

        {

            console.error(e,e.stack);

        }

    }-*/;

    


    public native void writeText(String p_text)

    /*-{

        try

        {

            var _this = this;

            if (navigator.clipboard)

            {

                console.log('navigator.clipboard.writeText()');

                console.log('document.hasFocus()='+document.hasFocus());

                console.log('$doc.hasFocus()='+$doc.hasFocus());

                var promise = navigator.clipboard.writeText(p_text);

                var resolve = function(text) {

                    console.log('navigator.clipboard.writeText '+text);

                };

                var reject = function(reason) {

                    console.log('navigator.clipboard.writeText failed: '+reason);

                };

                promise["catch"](reject);

                promise.then(resolve,reject)["catch"](reject);

            }

            else

            {

                console.log('This browser does not support navigator.clipboard.');

            }

        }

        catch (e)

        {

            console.error(e,e.stack);

        }

    }-*/;


And I'm stuck on the same security error noted in that StackOverflow question, but with no obvious way to satisfy that requirement:

navigator.clipboard.readText()

document.hasFocus()=false

$doc.hasFocus()=true

navigator.clipboard.readText failed: NotAllowedError: Document is not focused.


navigator.clipboard.writeText()

document.hasFocus()=false

$doc.hasFocus()=true

navigator.clipboard.writeText failed: NotAllowedError: Document is not focused.



Is there any way to make this work in GWT?

Thomas Broyer

unread,
Oct 16, 2019, 8:44:05 AM10/16/19
to GWT Users
Have you tried with $wnd.navigator.clipboard?

Jim Douglas

unread,
Oct 16, 2019, 10:23:27 AM10/16/19
to GWT Users
Oh wow, I completely missed that. Of course navigator is really window.navigator. JavaScript sample code almost always references navigator, not window.navigator, and I rarely think of that detail. Even after staring at that code for hours looking for something I might have missed, that never occurred to me. Thanks, Thomas; that's exactly what I was missing. With that simple change, this now works.

Pramod Patil

unread,
Dec 26, 2022, 1:02:32 AM12/26/22
to GWT Users
Hi Experts,
I am newbie with javascript and GWT, I want my function to return clipboard data,for further use in application upon click of(tool button).
Is there any way to get the text read from clipboard, I am looking something similar @Jim Douglas mentioned, with $wnd.navigator.clipboard.readText() is working but I need the "pasted" text to be returned to my native method call 

public static native String readText(){
try{
   if($wnd.navigator.clipboard){
      var promise= $wnd.navigator.clipboard.readText();
      var resolve =function(text){
      console.log(text);   // i want this text which i can see on console(string)  to be returned , Is it possible and how to achieve it any hack to ge
    }
  }
}
}

Please help, as i got stuck at this point for a while. Thanks.

Craig Mitchell

unread,
Dec 29, 2022, 1:02:34 AM12/29/22
to GWT Users
Browsers now need you to get your users to grant permissions in their browsers for this to work.  See "Permissions API" here: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText#security 

An example:  https://stackoverflow.com/a/59954231/418057  When I run the code snippet, and press "paste", it give "NotAllowedError".

Craig Mitchell

unread,
Dec 29, 2022, 9:34:24 PM12/29/22
to GWT Users
Apologies.  That stackoverflow example gets blocked due to cross origin.

Just ran a simple test:

<html>
<script>
async function readClipboard () {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  try {
    const text = await navigator.clipboard.readText();
    document.querySelector('.clipboard-content').innerText = text;
  } catch (err) {
    console.error('Failed to copy!', err)
  }
}

function updateClipboard() {
  // Here You Can Debug without DomException
  debugger
  const clipboard = document.querySelector('.clipboard-content').innerText;
  document.querySelector('.clipboard-content').innerText = 'Updated => ' + clipboard;
}
</script>

<body>
<button onclick="readClipboard()">Paste</button>
<p class="clipboard-content"></p>
<button onclick="updateClipboard()">Edit</button>
</body>
</html>

and it worked fine (browser popped up a message asking for permission).

Pramod Patil

unread,
Dec 29, 2022, 10:30:14 PM12/29/22
to google-we...@googlegroups.com
Yes, it's working but not working with GWT, I think the async function and await keyword is not supported with GWT, was getting a compiler error, I tried below code which worked, but not able to return as String, can print the copied text with console.log(text). As of now I didn't get any solution, I tried to search on the internet but had no luck.

is there any library or anything to be included/imported to get async/await support with GWT?
public static native String readText()/*-{
   try
     {
      var promise = $wnd.navigator.clipboard.readText();
      var resolve = function(text){
      console.log(text);// I can print text here but not able to return it as String
      }
      catch (e){
      //futher code goes here
      }
     }-*/;

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/9856ced4-a191-499c-9118-edc72ef6831fn%40googlegroups.com.


--
Thanks and regards,
 Pramod Patil
 Contact +91-8975432800

Craig Mitchell

unread,
Dec 30, 2022, 12:23:25 AM12/30/22
to GWT Users
As it's doing it asynchronously, you'll need to add a callback to return the string.

Something like this:

---

package mypackage;

public interface Loaded<T> {
    public void data(T data);
}

---

public static native String readText(Loaded<String> clipboardText) /*-{

    try {
        var promise = $wnd.navigator.clipboard.readText();
        var resolve = function(text) {
        console.log(text);// I can print text here but not able to return it as String
        clipboardText.@mypackage.Loaded::data(*)(text);

    }
    catch (e){
      //futher code goes here
    }
}-*/;

---

Note:  I'm just copying your JavaScript, it doesn't look correct to me, I think you also need:

promise.then(resolve);

or something like that.

Pramod Patil

unread,
Jan 3, 2023, 11:40:05 AM1/3/23
to google-we...@googlegroups.com
Hi @Craig Mitchell,
You were right about script,
The above script posted by me seems to have issues, below is the working script, I am not getting any compiler errors but neither getting any string as return value. 
I am testing things using below code, 
readTextButton.addClickHandler(new ClickHandler(){
public void onClick(ClickEvent event){
//Goal is to receive copied value on readText() function call.
String str =readText(null)// 1. What should I pass as argument over here-I know null argument is not correct, My apologies as I am not well versed with async         //callbacks
}
});


public static native String readText(Loaded<String> clipboardText)/*-{
try{
if($wnd.navigator.clipboard){
       var promise=$wnd.navigator.clipboard.readText();
        var resolve= function(text){
        console.log(txt);  //2.Here I can see copied text in console
       clipboardText.@com.mypackage.Loaded::data(*)(text);
};
 var reject=function(reason){
  console.log('$wnd.navigator.clipboard.readText failed: + reason'); //3.Getting cannot read properties of null

};
promise["catch"](reject);
promise.then(resolve,reject)["catch"](reject);

}

}
catch(e){}
}-*/;




Craig Mitchell

unread,
Jan 3, 2023, 5:30:23 PM1/3/23
to GWT Users
readText(text -> {
   // Do whatever you want with the text, eg:
   GWT.log("The text: " + text);
});

Note:  It is returned asynchronously (not from the return statement), so you'll probably need to modify your calling code to cater for that.

Pramod Patil

unread,
Jan 3, 2023, 9:18:31 PM1/3/23
to google-we...@googlegroups.com
I am not sure if I can call Java code
readText(text -> {
   // Do whatever you want with the text, eg:
   GWT.log("The text: " + text);// can I call Java code here to process this string?
});

Craig Mitchell

unread,
Jan 4, 2023, 12:57:57 AM1/4/23
to GWT Users
?  That is the Java code.

readTextButton.addClickHandler(event -> {

  readText(text -> {
    // Do whatever you want with the text, eg:
    GWT.log("The text: " + text);
  });
});

(assuming you are running Java8 or later)

The readText is your JSNI call.

Pramod Patil

unread,
Jan 4, 2023, 1:52:25 AM1/4/23
to google-we...@googlegroups.com
I tried all things, below is the actual flow of code where I need clipboard copied text, upon click on tool icon below function gets called,
protected Function pasteFromExcelFunction =new Function(){
    public void execute(){
     if(readOnly){
     return;
     }// its false
    try{
         if(pasteFromExcelHelper.pasteDataIntoGrid(BaseEditorGridPanel.this, getRecordDef()));
           doAfterPaste();
   }
    }
  }    
    public boolean pasteDataIntoGrid(BaseEditorGridPanel grid, BaseGridRecordDef recordDef)
    {
      boolean pasteSuccessful=true;
      String pastedText= readFromClipboard(); 
     // pastedText is further adjusted as per the grid-all java code
     }   
     private String readFromClipboard (){
    return JavaScriptUtils.getClipboardData();
   }

public static native String getClipboardData()/*-{
// I want modern clipboard api to return string
    if($wnd.clipboardData && clipboardData.setData){
    return $wnd.clipboardData.getData('Text');
}-*/;

So with respect to above method i.e. getClipboardData , which returns string , this works fine with IE but not with modern browser, so I tried new clipboard api but i cant return string. Could you please guide me with repect to above code, its been while I am struggling !!


Craig Mitchell

unread,
Jan 4, 2023, 11:56:50 PM1/4/23
to GWT Users
I can't see enough of your code to work out what you're doing.

At a guess, you just need to do:

public void pasteDataIntoGrid(BaseEditorGridPanel grid, BaseGridRecordDef recordDef, Loaded<Boolean> pasteResult) {
  readText(text -> {
    // Stick the text into your grid here
    
    // As it's now an async call, you can't return a success/fail straight away, so we do a callback instead
    pasteResult.data(true);
  });
}

Reply all
Reply to author
Forward
0 new messages