How do you implement copy and paste in a chrome packaged app built with Dart?

Question

This is how far I got:

Added permissions to manifest file:

"permissions": ["clipboardRead", "clipboardWrite"]

I read about chrome.experiment.clipboard, but this appears to have been removed in favour of document.execCommand('copy').

I wrote this program to try it out:

main() {
  var copy = new ButtonElement()..text = 'copy';
  var paste = new ButtonElement()..text = 'paste';
  var textarea = new TextAreaElement()..text = 'foo';
  document.body.nodes.addAll([copy, paste, textarea]);      
  copy.onClick.listen((event) => document.execCommand('copy', null, null));
  paste.onClick.listen((event) => document.execCommand('paste', null, null));
}

Ideally, for my application, I'd like to write a function called getClipboardText(), and setClipboardText(String). But first of all I'm trying to just get this basic example to work.

Any ideas on what to try next?

Edit: Updated bug pointed out by amouravski below. Thanks ;)

Fixed - thanks Keith:

class Clipboard {
  static String get text {
    var active = document.activeElement;
    var hidden = new TextAreaElement();
    document.body.append(hidden);
    hidden.focus();
    document.execCommand('paste', null, '');    
    active.focus();
    hidden.remove();
    return hidden.value;
  }

  static set text(String s) {
    var active = document.activeElement;
    var hidden = new TextAreaElement();
    hidden.value = s;
    document.body.append(hidden);    
    hidden.select();
    document.execCommand('copy', null, '');
    active.focus();
    hidden.remove();
  }
}

Answer 1

You are not too far off...
In order to copy a user selection from the textarea, the textarea element needs to be focused when the copy command is executed. In your snippet, when you click the copy button, the focus is shifted. Similarly, the target textarea needs to be focused when the paste command is executed.

import 'dart:html';

main() {
  var copy = new ButtonElement()..text = 'copy';
  var paste = new ButtonElement()..text = 'paste';
  var textarea = new TextAreaElement()..text = 'foo';
  var resultTextarea = new TextAreaElement();
  var label = new ParagraphElement()..text = 'paste here too...';
  document.body.nodes.addAll([copy, paste, textarea, resultTextarea, label]);

  // Copy Handler
  void copyText(Event e) {
    //Check whether anything is selected, otherwise select all text.
    if (textarea.selectionStart != null &&
        textarea.selectionStart != textarea.selectionEnd) {
      textarea.focus();
    } else {
      textarea.select();
    }

    document.execCommand('copy', null, "");
  }

  // Paste handler
  void pasteText(Event e) {
    resultTextarea.select(); // Select all text in result text area.
                             // Note: replaces all text. Use focus
                             // to paste at cursor position.
    document.execCommand('paste', null, "");
  }

  // Register button handlers for copy and paste.
  copy.onClick.listen(copyText);
  paste.onClick.listen(pasteText);

  // You can also register a Paste event listener to capture copied text
  // directly from the clipboard.
  document.on['paste'].listen((e) {
    var item = e.clipboardData.items.item(e.clipboardData.items.length-1);

    if(item.type == 'text/plain') {
      item.getAsString().then((clip) => label.text = clip);
    }
  });
}

A couple of notes:

1. The changes to the document.execCommand method signature are not quite correct. It appears that, at least in Dartium, the last parameter needs to be a string.
2. You can get pasted text straight from the clipboard by registering an Paste event listener (see bottom of code snippet).

Answer 2

The error message is not very descriptive, but what you need to do is give document.execCommand 3 parameters, like so:

... 
  copy.onClick.listen((event) => document.execCommand('copy', null, null));
  paste.onClick.listen((event) => document.execCommand('paste', null, null));
...

See also: http://api.dartlang.org/docs/releases/latest/dart_html/Document.html#execCommand