Enable pasting html and text externally

Sets the "text/html" and "text/plain" clipboard data on copy and cut
events.

fixes #180

src/js/utils/paste-utils.js

@@ -1,21 +1,23 @@
 /* global JSON */
 import MobiledocParser from '../parsers/mobiledoc';
 import HTMLParser from '../parsers/html';
-
-// FIXME fix this issue:
-const issueUrl = 'https://github.com/bustlelabs/content-kit-editor/issues/180';
+import { createDiv } from '../utils/element-utils';
+import { getSelectionContents } from '../utils/selection-utils';
 
 export function setClipboardCopyData(copyEvent, editor) {
   const { cursor, post } = editor;
   const { clipboardData } = copyEvent;
 
   const range = cursor.offsets;
   const mobiledoc = post.cloneRange(range);
+  const fragment = getSelectionContents();
+  const div = createDiv();
+  div.appendChild(fragment);
   const html =
     `<div data-mobiledoc='${JSON.stringify(mobiledoc)}'>` +
-      `<a href='${issueUrl}'>Pasting from Content-Kit not yet supported.</a>` +
+      div.innerHTML +
     `</div>`;
-  const plain = `Pasting from Content-Kit not yet supported. (${issueUrl})`;
+  const plain = div.textContent;
 
   clipboardData.setData('text/plain', plain);
   clipboardData.setData('text/html', html);

src/js/utils/selection-utils.js

@@ -5,6 +5,16 @@ function clearSelection() {
   window.getSelection().removeAllRanges();
 }
 
+// @return {DocumentFragment}
+function getSelectionContents() {
+  let selection = window.getSelection();
+  if (selection.rangeCount > 0) {
+    return selection.getRangeAt(0).cloneContents();
+  } else {
+    return document.createDocumentFragment();
+  }
+}
+
 function comparePosition(selection) {
   let { anchorNode, focusNode, anchorOffset, focusOffset } = selection;
   let headNode, tailNode, headOffset, tailOffset;
@@ -37,5 +47,6 @@ export {
   restoreRange,
   containsNode,
   clearSelection,
-  comparePosition
+  comparePosition,
+  getSelectionContents
 };

tests/acceptance/editor-copy-paste-test.js

@@ -210,3 +210,36 @@ test('copy-paste can copy list sections', (assert) => {
   assert.equal($('#editor ul').length, 2, 'pastes the list');
   assert.hasElement($('#editor ul:eq(0) li:contains(list)'));
 });
+
+test('copy sets html & text for pasting externally', (assert) => {
+  const mobiledoc = Helpers.mobiledoc.build(
+    ({post, markupSection, marker}) => {
+      return post([
+        markupSection('h1', [marker('h1 heading')]),
+        markupSection('h2', [marker('h2 subheader')]),
+        markupSection('p', [marker('The text')])
+      ]);
+  });
+  editor = new Editor({mobiledoc});
+  editor.render(editorElement);
+
+  Helpers.dom.selectText('heading', editor.element,
+                         'The text', editor.element);
+
+  Helpers.dom.triggerCopyEvent(editor);
+
+  let text = Helpers.dom.getCopyData('text/plain');
+  let html = Helpers.dom.getCopyData('text/html');
+  assert.equal(text, [
+    "heading",
+    "h2 subheader",
+    "The text"
+  ].join(''), 'gets plain text');
+
+  assert.ok(html.indexOf("<h1>heading") !== -1,
+            'html has h1');
+  assert.ok(html.indexOf("<h2>h2 subheader") !== -1,
+            'html has h2');
+  assert.ok(html.indexOf("<p>The text") !== -1,
+            'html has p');
+});

tests/helpers/dom.js

@@ -211,6 +211,10 @@ function triggerPasteEvent(editor) {
   editor.triggerEvent(editor.element, 'paste', event);
 }
 
+function getCopyData(type) {
+  return lastCopyData[type];
+}
+
 function fromHTML(html) {
   html = $.trim(html);
   let div = document.createElement('div');
@@ -237,7 +241,8 @@ const DOMHelper = {
   triggerRightArrowKey,
   triggerCopyEvent,
   triggerCutEvent,
-  triggerPasteEvent
+  triggerPasteEvent,
+  getCopyData
 };
 
 export { triggerEvent };